@aurelia-mdc-web/all 9.2.3-au2 → 9.3.1-au2

package/dist/select/mdc-select-value-observer.js

@@ -0,0 +1,283 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { subscriberCollection, AccessorType, } from '@aurelia/runtime';
+import { CustomElement } from '@aurelia/runtime-html';
+// const hasOwn = Object.prototype.hasOwnProperty;
+const childObserverOptions = {
+    childList: true,
+    subtree: true,
+    characterData: true
+};
+let MdcSelectValueObserver = (() => {
+    let _classDecorators = [subscriberCollection()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var MdcSelectValueObserver = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MdcSelectValueObserver = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        currentValue = void 0;
+        oldValue = void 0;
+        obj;
+        config;
+        hasChanges = false;
+        // ObserverType.Layout is not always true
+        // but for simplicity, always treat as such
+        type = (AccessorType.Node | AccessorType.Observer | AccessorType.Layout);
+        arrayObserver = void 0;
+        nodeObserver = void 0;
+        observing = false;
+        listened = false;
+        constructor(obj, 
+        // deepscan-disable-next-line
+        _key, config, _) {
+            this.obj = obj;
+            this.config = config;
+        }
+        optionsWereSet;
+        setElementValue(skipNotify) {
+            // do not pass the value to the element if options has never been set
+            // the value will be passed on when options do arrive
+            if (this.optionsWereSet) {
+                CustomElement.for(this.obj).viewModel.setValue(this.currentValue, skipNotify);
+            }
+        }
+        getValue() {
+            // is it safe to assume the observer has the latest value?
+            // todo: ability to turn on/off cache based on type
+            return this.observing
+                ? this.currentValue
+                // : this.obj.multiple
+                //   ? Array.from(this.obj.options).map(o => o.value)
+                : this.obj.value;
+        }
+        setValue(newValue) {
+            this.currentValue = newValue;
+            this.hasChanges = newValue !== this.oldValue;
+            // this.observeArray(newValue instanceof Array ? newValue : null);
+            if (this.optionsWereSet) {
+                this.flushChanges();
+            }
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        flushChanges() {
+            if (this.hasChanges) {
+                this.hasChanges = false;
+                this.synchronizeOptions();
+            }
+        }
+        handleCollectionChange() {
+            // always sync "selected" property of <options/>
+            // immediately whenever the array notifies its mutation
+            this.synchronizeOptions();
+        }
+        notify() {
+            const oldValue = this.oldValue;
+            const newValue = this.currentValue;
+            if (newValue === oldValue) {
+                return;
+            }
+            this.subs.notify(newValue, oldValue);
+        }
+        handleEvent() {
+            const shouldNotify = this.synchronizeValue();
+            if (shouldNotify) {
+                this.subs.notify(this.currentValue, this.oldValue);
+            }
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        synchronizeOptions(_indexMap) {
+            this.setElementValue(true);
+            // const { currentValue, obj } = this;
+            //   // const isArray = Array.isArray(currentValue);
+            //   // const matcher = obj.matcher !== void 0 ? obj.matcher : defaultMatcher;
+            //   // const matcher = defaultMatcher;
+            //   const options = CustomElement.for<MdcSelect>(obj).viewModel.items;
+            //   let i = options.length;
+            //   while (i-- > 0) {
+            //     // const option = options[i];
+            //     // const optionValue = hasOwn.call(option, 'model') ? option.model : option.value;
+            //     // const optionValue = option.value;
+            //     // if (isArray) {
+            //     //   option.selected = (currentValue as unknown[]).findIndex(item => !!matcher(optionValue, item)) !== -1;
+            //     //   continue;
+            //     // }
+            //     if (!this.optionsWereSet) {
+            //       this.optionsWereSet = true;
+            //       this.setElementValue(true);
+            //     }
+            //     // option.selected = !!matcher(optionValue, currentValue);
+            //   }
+        }
+        synchronizeValue() {
+            // Spec for synchronizing value from `<select/>`  to `SelectObserver`
+            // When synchronizing value to observed <select/> element, do the following steps:
+            // A. If `<select/>` is multiple
+            //    1. Check if current value, called `currentValue` is an array
+            //      a. If not an array, return true to signal value has changed
+            //      b. If is an array:
+            //        i. gather all current selected <option/>, in to array called `values`
+            //        ii. loop through the `currentValue` array and remove items that are nolonger selected based on matcher
+            //        iii. loop through the `values` array and add items that are selected based on matcher
+            //        iv. Return false to signal value hasn't changed
+            // B. If the select is single
+            //    1. Let `value` equal the first selected option, if no option selected, then `value` is `null`
+            //    2. assign `this.currentValue` to `this.oldValue`
+            //    3. assign `value` to `this.currentValue`
+            //    4. return `true` to signal value has changed
+            const obj = this.obj;
+            const options = CustomElement.for(obj).viewModel.items ?? [];
+            const len = options.length;
+            // const currentValue = this.currentValue;
+            let i = 0;
+            /*
+            if (obj.multiple) {
+              // A.
+              if (!(currentValue instanceof Array)) {
+                // A.1.a
+                return true;
+              }
+              // A.1.b
+              // multi select
+              let option: IOptionElement;
+              const matcher = obj.matcher ?? defaultMatcher;
+              // A.1.b.i
+              const values: unknown[] = [];
+              while (i < len) {
+                option = options[i];
+                if (option.selected) {
+                  values.push(hasOwn.call(option, 'model')
+                    ? option.model
+                    : option.value
+                  );
+                }
+                ++i;
+              }
+              // A.1.b.ii
+              i = 0;
+              while (i < currentValue.length) {
+                const a = currentValue[i];
+                // Todo: remove arrow fn
+                if (values.findIndex(b => !!matcher(a, b)) === -1) {
+                  currentValue.splice(i, 1);
+                } else {
+                  ++i;
+                }
+              }
+              // A.1.b.iii
+              i = 0;
+              while (i < values.length) {
+                const a = values[i];
+                // Todo: remove arrow fn
+                if (currentValue.findIndex(b => !!matcher(a, b)) === -1) {
+                  currentValue.push(a);
+                }
+                ++i;
+              }
+              // A.1.b.iv
+              return false;
+            }
+            */
+            // B. single select
+            // B.1
+            let value = null;
+            while (i < len) {
+                const option = options[i];
+                if (option.value === this.obj.value) {
+                    // value = hasOwn.call(option, 'model') ? option.model : option.value;
+                    value = option.value;
+                    break;
+                }
+                ++i;
+            }
+            // B.2
+            this.oldValue = this.currentValue;
+            // B.3
+            this.currentValue = value;
+            // B.4
+            return true;
+        }
+        start() {
+            const vm = CustomElement.for(this.obj).viewModel;
+            vm.initialised.then(() => {
+                (this.nodeObserver = new this.obj.ownerDocument.defaultView.MutationObserver(records => this.handleNodeChange(records)))
+                    .observe(vm.menu.root, childObserverOptions);
+                // this.observeArray(this.currentValue instanceof Array ? this.currentValue : null);
+                this.observing = true;
+                if (vm.items?.length) {
+                    this.optionsWereSet = true;
+                    this.synchronizeOptions();
+                }
+            });
+        }
+        stop() {
+            this.optionsWereSet = false;
+            this.nodeObserver?.disconnect();
+            this.arrayObserver?.unsubscribe(this);
+            this.nodeObserver
+                = this.arrayObserver
+                    = void 0;
+            this.observing = false;
+        }
+        // todo: observe all kind of collection
+        // private observeArray(array: unknown[] | null): void {
+        //   this.arrayObserver?.unsubscribe(this);
+        //   this.arrayObserver = void 0;
+        //   if (array !== null) {
+        //     if (!this.obj.multiple) {
+        //       throw new Error('Only null or Array instances can be bound to a multi-select.');
+        //     }
+        //     (this.arrayObserver = this.observerLocator.getArrayObserver(array)).subscribe(this);
+        //   }
+        // }
+        handleNodeChange(records) {
+            if (records.find(x => x.type === 'childList'
+                && (Array.from(x.addedNodes).find(y => y.tagName === 'MDC-LIST-ITEM')
+                    || Array.from(x.removedNodes).find(y => y.tagName === 'MDC-LIST-ITEM')))) {
+                this.optionsWereSet = true;
+                this.synchronizeOptions();
+                const shouldNotify = this.synchronizeValue();
+                if (shouldNotify) {
+                    this.notify();
+                }
+            }
+        }
+        subscribe(subscriber) {
+            if (this.subs.add(subscriber) && this.subs.count === 1) {
+                for (const e of this.config.events) {
+                    this.obj.addEventListener(e, this);
+                }
+                this.listened = true;
+                this.start();
+            }
+        }
+        unsubscribe(subscriber) {
+            if (this.subs.remove(subscriber) && this.subs.count === 0) {
+                for (const e of this.config.events) {
+                    this.obj.removeEventListener(e, this);
+                }
+                this.listened = false;
+                this.stop();
+            }
+        }
+        useConfig(config) {
+            this.config = config;
+            if (this.listened) {
+                for (const e of this.config.events) {
+                    this.obj.removeEventListener(e, this);
+                }
+                for (const e of this.config.events) {
+                    this.obj.addEventListener(e, this);
+                }
+            }
+        }
+    };
+    return MdcSelectValueObserver = _classThis;
+})();
+export { MdcSelectValueObserver };
+//# sourceMappingURL=mdc-select-value-observer.js.map

package/dist/select/mdc-select-value-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdc-select-value-observer.js","sourceRoot":"","sources":["../../src/select/mdc-select-value-observer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  subscriberCollection,\r\n  AccessorType,\r\n} from '@aurelia/runtime';\r\n\r\nimport type {\r\n  ICollectionObserver,\r\n  IndexMap,\r\n  IObserver,\r\n  IObserverLocator,\r\n  ISubscriber,\r\n  ISubscriberCollection,\r\n} from '@aurelia/runtime';\r\n\r\nimport { INode, CustomElement } from '@aurelia/runtime-html';\r\nimport { IMdcSelectElement, MdcSelect } from './mdc-select';\r\n\r\n// const hasOwn = Object.prototype.hasOwnProperty;\r\nconst childObserverOptions = {\r\n  childList: true,\r\n  subtree: true,\r\n  characterData: true\r\n};\r\n\r\n// function defaultMatcher(a: unknown, b: unknown): boolean {\r\n//   return a === b;\r\n// }\r\n\r\nexport interface IOptionElement extends HTMLOptionElement {\r\n  model?: unknown;\r\n}\r\n\r\nexport interface MdcSelectValueObserver extends\r\n  ISubscriberCollection { }\r\n\r\nexport interface INodeObserverConfigBase {\r\n  /**\r\n   * Indicates the list of events can be used to observe a particular property\r\n   */\r\n  readonly events: string[];\r\n  /**\r\n   * Indicates whether this property is readonly, so observer wont attempt to assign value\r\n   * example: input.files\r\n   */\r\n  readonly readonly?: boolean;\r\n  /**\r\n   * A default value to assign to the corresponding property if the incoming value is null/undefined\r\n   */\r\n  readonly default?: unknown;\r\n}\r\n\r\n\r\nexport interface INodeObserver extends IObserver {\r\n  /**\r\n   * Instruct this node observer event observation behavior\r\n   */\r\n  useConfig(config: INodeObserverConfigBase): void;\r\n}\r\n\r\n@subscriberCollection()\r\nexport class MdcSelectValueObserver implements INodeObserver {\r\n  public currentValue: unknown = void 0;\r\n  public oldValue: unknown = void 0;\r\n\r\n  public readonly obj: IMdcSelectElement;\r\n  public config: INodeObserverConfigBase;\r\n\r\n  public hasChanges: boolean = false;\r\n  // ObserverType.Layout is not always true\r\n  // but for simplicity, always treat as such\r\n  public type: AccessorType = (AccessorType.Node | AccessorType.Observer | AccessorType.Layout) as AccessorType;\r\n\r\n  public arrayObserver?: ICollectionObserver<'array'> = void 0;\r\n  public nodeObserver?: MutationObserver = void 0;\r\n\r\n  private observing: boolean = false;\r\n  private listened: boolean = false;\r\n\r\n  public constructor(\r\n    obj: INode,\r\n    // deepscan-disable-next-line\r\n    _key: PropertyKey,\r\n    config: INodeObserverConfigBase,\r\n    _: IObserverLocator\r\n  ) {\r\n    this.obj = obj as unknown as IMdcSelectElement;\r\n    this.config = config;\r\n  }\r\n\r\n  optionsWereSet: boolean;\r\n\r\n  setElementValue(skipNotify: boolean) {\r\n    // do not pass the value to the element if options has never been set\r\n    // the value will be passed on when options do arrive\r\n    if (this.optionsWereSet) {\r\n      CustomElement.for<MdcSelect>(this.obj).viewModel.setValue(this.currentValue, skipNotify);\r\n    }\r\n  }\r\n\r\n  public getValue(): unknown {\r\n    // is it safe to assume the observer has the latest value?\r\n    // todo: ability to turn on/off cache based on type\r\n    return this.observing\r\n      ? this.currentValue\r\n      // : this.obj.multiple\r\n      //   ? Array.from(this.obj.options).map(o => o.value)\r\n      : this.obj.value;\r\n  }\r\n\r\n  public setValue(newValue: unknown): void {\r\n    this.currentValue = newValue;\r\n    this.hasChanges = newValue !== this.oldValue;\r\n    // this.observeArray(newValue instanceof Array ? newValue : null);\r\n    if (this.optionsWereSet) {\r\n      this.flushChanges();\r\n    }\r\n  }\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n  public flushChanges(): void {\r\n    if (this.hasChanges) {\r\n      this.hasChanges = false;\r\n      this.synchronizeOptions();\r\n    }\r\n  }\r\n\r\n  public handleCollectionChange(): void {\r\n    // always sync \"selected\" property of <options/>\r\n    // immediately whenever the array notifies its mutation\r\n    this.synchronizeOptions();\r\n  }\r\n\r\n  public notify(): void {\r\n    const oldValue = this.oldValue;\r\n    const newValue = this.currentValue;\r\n    if (newValue === oldValue) {\r\n      return;\r\n    }\r\n    this.subs.notify(newValue, oldValue);\r\n  }\r\n\r\n  public handleEvent(): void {\r\n    const shouldNotify = this.synchronizeValue();\r\n    if (shouldNotify) {\r\n      this.subs.notify(this.currentValue, this.oldValue);\r\n    }\r\n  }\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n  public synchronizeOptions(_indexMap?: IndexMap): void {\r\n    this.setElementValue(true);\r\n    // const { currentValue, obj } = this;\r\n    //   // const isArray = Array.isArray(currentValue);\r\n    //   // const matcher = obj.matcher !== void 0 ? obj.matcher : defaultMatcher;\r\n    //   // const matcher = defaultMatcher;\r\n    //   const options = CustomElement.for<MdcSelect>(obj).viewModel.items;\r\n    //   let i = options.length;\r\n\r\n    //   while (i-- > 0) {\r\n    //     // const option = options[i];\r\n    //     // const optionValue = hasOwn.call(option, 'model') ? option.model : option.value;\r\n    //     // const optionValue = option.value;\r\n    //     // if (isArray) {\r\n    //     //   option.selected = (currentValue as unknown[]).findIndex(item => !!matcher(optionValue, item)) !== -1;\r\n    //     //   continue;\r\n    //     // }\r\n    //     if (!this.optionsWereSet) {\r\n    //       this.optionsWereSet = true;\r\n    //       this.setElementValue(true);\r\n    //     }\r\n    //     // option.selected = !!matcher(optionValue, currentValue);\r\n    //   }\r\n  }\r\n\r\n  public synchronizeValue(): boolean {\r\n    // Spec for synchronizing value from `<select/>`  to `SelectObserver`\r\n    // When synchronizing value to observed <select/> element, do the following steps:\r\n    // A. If `<select/>` is multiple\r\n    //    1. Check if current value, called `currentValue` is an array\r\n    //      a. If not an array, return true to signal value has changed\r\n    //      b. If is an array:\r\n    //        i. gather all current selected <option/>, in to array called `values`\r\n    //        ii. loop through the `currentValue` array and remove items that are nolonger selected based on matcher\r\n    //        iii. loop through the `values` array and add items that are selected based on matcher\r\n    //        iv. Return false to signal value hasn't changed\r\n    // B. If the select is single\r\n    //    1. Let `value` equal the first selected option, if no option selected, then `value` is `null`\r\n    //    2. assign `this.currentValue` to `this.oldValue`\r\n    //    3. assign `value` to `this.currentValue`\r\n    //    4. return `true` to signal value has changed\r\n    const obj = this.obj;\r\n    const options = CustomElement.for<MdcSelect>(obj).viewModel.items ?? [];\r\n    const len = options.length;\r\n    // const currentValue = this.currentValue;\r\n    let i = 0;\r\n\r\n    /*\r\n    if (obj.multiple) {\r\n      // A.\r\n      if (!(currentValue instanceof Array)) {\r\n        // A.1.a\r\n        return true;\r\n      }\r\n      // A.1.b\r\n      // multi select\r\n      let option: IOptionElement;\r\n      const matcher = obj.matcher ?? defaultMatcher;\r\n      // A.1.b.i\r\n      const values: unknown[] = [];\r\n      while (i < len) {\r\n        option = options[i];\r\n        if (option.selected) {\r\n          values.push(hasOwn.call(option, 'model')\r\n            ? option.model\r\n            : option.value\r\n          );\r\n        }\r\n        ++i;\r\n      }\r\n      // A.1.b.ii\r\n      i = 0;\r\n      while (i < currentValue.length) {\r\n        const a = currentValue[i];\r\n        // Todo: remove arrow fn\r\n        if (values.findIndex(b => !!matcher(a, b)) === -1) {\r\n          currentValue.splice(i, 1);\r\n        } else {\r\n          ++i;\r\n        }\r\n      }\r\n      // A.1.b.iii\r\n      i = 0;\r\n      while (i < values.length) {\r\n        const a = values[i];\r\n        // Todo: remove arrow fn\r\n        if (currentValue.findIndex(b => !!matcher(a, b)) === -1) {\r\n          currentValue.push(a);\r\n        }\r\n        ++i;\r\n      }\r\n      // A.1.b.iv\r\n      return false;\r\n    }\r\n    */\r\n    // B. single select\r\n    // B.1\r\n    let value: unknown = null;\r\n    while (i < len) {\r\n      const option = options[i];\r\n      if (option.value === this.obj.value) {\r\n        // value = hasOwn.call(option, 'model') ? option.model : option.value;\r\n        value = option.value;\r\n        break;\r\n      }\r\n      ++i;\r\n    }\r\n    // B.2\r\n    this.oldValue = this.currentValue;\r\n    // B.3\r\n    this.currentValue = value;\r\n    // B.4\r\n    return true;\r\n  }\r\n\r\n  private start(): void {\r\n    const vm = CustomElement.for<MdcSelect>(this.obj).viewModel;\r\n    vm.initialised.then(() => {\r\n      (this.nodeObserver = new this.obj.ownerDocument.defaultView!.MutationObserver(records => this.handleNodeChange(records)))\r\n        .observe(vm.menu.root, childObserverOptions);\r\n      // this.observeArray(this.currentValue instanceof Array ? this.currentValue : null);\r\n      this.observing = true;\r\n      if (vm.items?.length) {\r\n        this.optionsWereSet = true;\r\n        this.synchronizeOptions();\r\n      }\r\n    });\r\n  }\r\n\r\n  private stop(): void {\r\n    this.optionsWereSet = false;\r\n    this.nodeObserver?.disconnect();\r\n    this.arrayObserver?.unsubscribe(this);\r\n    this.nodeObserver\r\n      = this.arrayObserver\r\n      = void 0;\r\n    this.observing = false;\r\n  }\r\n\r\n  // todo: observe all kind of collection\r\n  // private observeArray(array: unknown[] | null): void {\r\n  //   this.arrayObserver?.unsubscribe(this);\r\n  //   this.arrayObserver = void 0;\r\n  //   if (array !== null) {\r\n  //     if (!this.obj.multiple) {\r\n  //       throw new Error('Only null or Array instances can be bound to a multi-select.');\r\n  //     }\r\n  //     (this.arrayObserver = this.observerLocator.getArrayObserver(array)).subscribe(this);\r\n  //   }\r\n  // }\r\n\r\n  public handleNodeChange(records: MutationRecord[]): void {\r\n    if (records.find(x => x.type === 'childList'\r\n      && (Array.from(x.addedNodes).find(y => (y as HTMLElement).tagName === 'MDC-LIST-ITEM')\r\n        || Array.from(x.removedNodes).find(y => (y as HTMLElement).tagName === 'MDC-LIST-ITEM'))\r\n    )) {\r\n      this.optionsWereSet = true;\r\n      this.synchronizeOptions();\r\n      const shouldNotify = this.synchronizeValue();\r\n      if (shouldNotify) {\r\n        this.notify();\r\n      }\r\n    }\r\n  }\r\n\r\n  public subscribe(subscriber: ISubscriber): void {\r\n    if (this.subs.add(subscriber) && this.subs.count === 1) {\r\n      for (const e of this.config.events) {\r\n        this.obj.addEventListener(e, this);\r\n      }\r\n      this.listened = true;\r\n      this.start();\r\n    }\r\n  }\r\n\r\n  public unsubscribe(subscriber: ISubscriber): void {\r\n    if (this.subs.remove(subscriber) && this.subs.count === 0) {\r\n      for (const e of this.config.events) {\r\n        this.obj.removeEventListener(e, this);\r\n      }\r\n      this.listened = false;\r\n      this.stop();\r\n    }\r\n  }\r\n\r\n  useConfig(config: INodeObserverConfigBase): void {\r\n    this.config = config;\r\n    if (this.listened) {\r\n      for (const e of this.config.events) {\r\n        this.obj.removeEventListener(e, this);\r\n      }\r\n      for (const e of this.config.events) {\r\n        this.obj.addEventListener(e, this);\r\n      }\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/select/mdc-select.html

@@ -0,0 +1,38 @@
+<template class="
+    mdc-select
+    mdc-select--${outlined ? 'outlined' : 'filled'}
+    ${leadingIcon ? 'mdc-select--with-leading-icon' : ''}
+    ${required ? 'mdc-select--required' : ''}
+  " role="button" aria-haspopup="listbox">
+  <div class="mdc-select__anchor" ref="selectAnchor" mdc-ripple="no-class.bind: true;" change.trigger="handleChange()"
+    focus.trigger="handleFocus()" blur.trigger="handleBlur()" keydown.trigger="handleKeydown($event)"
+    click.trigger="handleClick($event)">
+    <span class="mdc-select__ripple" if.bind="!outlined"></span>
+    <au-slot name="leading-icon"></au-slot>
+    <span class="mdc-select__selected-text-container">
+      <span class="mdc-select__selected-text" ref="selectedText"></span>
+    </span>
+    <span class="mdc-select__dropdown-icon">
+      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
+        <polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10">
+        </polygon>
+        <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15">
+        </polygon>
+      </svg>
+    </span>
+    <mdc-floating-label if.bind="label && !outlined" for="${id}" component.ref="mdcLabel">${label}
+    </mdc-floating-label>
+    <mdc-line-ripple if.bind="!outlined" component.ref="lineRipple"></mdc-line-ripple>
+    <mdc-notched-outline if.bind="outlined" component.ref="outline">
+      <mdc-floating-label if.bind="label" for="${id}" component.ref="mdcLabel">${label}</mdc-floating-label>
+    </mdc-notched-outline>
+  </div>
+
+  <mdc-menu class="mdc-select__menu ${naturalWidth || hoistToBody || fixed ? '' : 'mdc-menu-surface--fullwidth'}"
+    component.ref="menu" ref="menuElement" typeahead mdcmenusurface:closed.trigger="handleMenuClosed()"
+    anchor-margin.bind="anchorMargin" mdcmenusurface:opened.trigger="handleMenuOpened()"
+    mdcmenu:selected.trigger="handleMenuItemAction($event)" mdclist:itemschanged.trigger="handleItemsChanged($event)"
+    hoist-to-body.bind="hoistToBody" fixed.bind="fixed">
+    <au-slot></au-slot>
+  </mdc-menu>
+</template>