How to use the @material/list.MDCListFoundation function in @material/list

To help you get started, we’ve selected a few @material/list examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jamesmfriedman / rmwc / src / list / list.tsx View on Github external
getDefaultFoundation() {
    return new MDCListFoundation(
      /** @type {!MDCListAdapter} */ (Object.assign({
        getListItemCount: () => this.listElements.length,
        getFocusedElementIndex: () =>
          this.listElements.indexOf(document.activeElement as HTMLLIElement),
        setAttributeForElementIndex: (
          index: number,
          attr: string,
          value: string | number
        ) => {
          // This value is getting set and never getting set back
          // This is causing list items to be un-tabbable
          if (attr === 'tabindex' && value === -1) {
            return;
          }

          const element = this.listElements[index];
github trimox / angular-mdc-web / packages / list / list.ts View on Github external
const listItem = this.items.toArray()[index].getListItemElement();
        const toggleEl = listItem.querySelector(strings.CHECKBOX_RADIO_SELECTOR);
        toggleEl!.checked = isChecked;

        if (this._platform.isBrowser) {
          const event = document.createEvent('Event');
          event.initEvent('change', true, true);
          toggleEl!.dispatchEvent(event);
        }
      },
      isFocusInsideList: () => this._platform.isBrowser ?
        this.elementRef.nativeElement.contains(document.activeElement) : false,
      isRootFocused: () => this._platform.isBrowser ? document.activeElement === this._getHostElement() : false,
      notifyAction: (index: number) => this.actionEvent.emit({ index: index })
    };
    return new MDCListFoundation(adapter);
  }