How to use the @material/select.MDCSelectFoundation function in @material/select

To help you get started, we’ve selected a few @material/select 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 / select / select-foundation.tsx View on Github external
},
          getLabelWidth: () => {
            return floatingLabel.current?.getWidth() || 0;
          }
        };
      };

      const getFoundationMap = () => {
        return {
          leadingIcon:
            (leadingIcon.current && leadingIcon.current.getFoundation()) ||
            undefined
        };
      };

      const f = new MDCSelectFoundation(
        {
          ...getSelectAdapterMethods(),
          ...getCommonAdapterMethods(),
          ...getOutlineAdapterMethods(),
          ...getLabelAdapterMethods()
        },
        getFoundationMap()
      );

      // This foundation requires a bit of monkey patching
      // in order to get placeholders working correctly
      const adapter = (f as any).adapter_ as MDCSelectAdapter;

      // @ts-ignore private override
      f.updateLabel_ = () => {
        const doWork = () => {
github fintechstudios / angularjs-mdc / src / mdc-select / select / component.js View on Github external
getDefaultFoundation() {
    return new MDCSelectFoundation({
      addClass: (className) => this.root_.classList.add(className),
      removeClass: (className) => this.root_.classList.remove(className),
      floatLabel: (value) => {
        if (this.label_) {
          this.label_.float(value);
        }
      },
      addClassToBottomLine: (className) => this.bottomLine_.classList.add(className),
      removeClassFromBottomLine: (className) => this.bottomLine_.classList.remove(className),
      setBottomLineAttr: (attr, value) => this.bottomLine_.setAttribute(attr, value),
      setAttr: (attr, value) => this.root_.setAttribute(attr, value),
      rmAttr: (attr, value) => this.root_.removeAttribute(attr, value),
      computeBoundingRect: () => this.surface_.getBoundingClientRect(),
      registerInteractionHandler: (type, handler) => this.surface_.addEventListener(type, handler),
      deregisterInteractionHandler: (type, handler) => {
        if (this.surface_) { // DOM might be removed before deregistration
github src-zone / material / bundle / src / components / select / mdc.select.directive.ts View on Github external
private initComponent() {
        this.initLineRipple();
        this.initBox();
        this.initOutline();
        this.foundation = new MDCSelectFoundation(this.adapter);
        this.foundation.init();
    }
github trimox / angular-mdc-web / src / lib / select / select.ts View on Github external
},
    removeBodyClass: (className: string) => {
      this._renderer.removeClass(document.body, className);
    }
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    getValue(): any,
    getSelectedIndex(): number,
    setSelectedIndex(selectedIndex: number): void,
    isDisabled(): boolean,
    setDisabled(disabled: boolean): void,
    resize(): void
  } = new MDCSelectFoundation(this._mdcAdapter);

  private _uniqueId: string = `mdc-select-${++nextUniqueId}`;
  @ViewChild(MdcSelectSurface) surface: MdcSelectSurface;
  @ViewChild(MdcSelectLabel) selectLabel: MdcSelectLabel;
  @ViewChild(MdcSelectBottomLine) bottomLine: MdcSelectBottomLine;
  @ViewChild(MdcSelectMenu) selectMenu: MdcSelectMenu;
  @ViewChild(MdcSelectItems) selectItems: MdcSelectItems;
  @ContentChildren(MdcSelectItem, { descendants: true }) options: QueryList;

  /** Emits whenever the component is destroyed. */
  private _destroy = new Subject();

  /** Comparison function to specify which option is displayed. Defaults to object equality. */
  private _compareWith = (o1: any, o2: any) => o1 === o2;

  private _label: string = '';
github jamesmfriedman / rmwc / src / select / index.tsx View on Github external
getDefaultFoundation() {
    return new MDCSelectFoundation(
      {
        ...(this.props.enhanced
          ? this.getEnhancedSelectAdapterMethods_()
          : this.getNativeSelectAdapterMethods_()),
        ...this.getCommonAdapterMethods_(),
        ...this.getOutlineAdapterMethods_(),
        ...this.getLabelAdapterMethods_()
      },
      this.getFoundationMap_()
    );
  }