@aurelia-mdc-web/all 9.3.5-au2 → 9.3.7-au2

package/dist/icon-button/mdc-icon-button.js

@@ -20,9 +20,6 @@ let MdcIconButton = (() => {
     let _icon_decorators;
     let _icon_initializers = [];
     let _icon_extraInitializers = [];
-    let _href_decorators;
-    let _href_initializers = [];
-    let _href_extraInitializers = [];
     let _touch_decorators;
     let _touch_initializers = [];
     let _touch_extraInitializers = [];
@@ -32,11 +29,9 @@ let MdcIconButton = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _on_decorators = [bindable({ set: booleanAttr, mode: BindingMode.twoWay })];
             _icon_decorators = [bindable()];
-            _href_decorators = [bindable()];
             _touch_decorators = [bindable({ set: booleanAttr, mode: BindingMode.twoWay })];
             __esDecorate(null, null, _on_decorators, { kind: "field", name: "on", static: false, private: false, access: { has: obj => "on" in obj, get: obj => obj.on, set: (obj, value) => { obj.on = value; } }, metadata: _metadata }, _on_initializers, _on_extraInitializers);
             __esDecorate(null, null, _icon_decorators, { kind: "field", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
-            __esDecorate(null, null, _href_decorators, { kind: "field", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
             __esDecorate(null, null, _touch_decorators, { kind: "field", name: "touch", static: false, private: false, access: { has: obj => "touch" in obj, get: obj => obj.touch, set: (obj, value) => { obj.touch = value; } }, metadata: _metadata }, _touch_initializers, _touch_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             MdcIconButton = _classThis = _classDescriptor.value;
@@ -48,21 +43,21 @@ let MdcIconButton = (() => {
         /** Optional. Set a Material icon as a non-toggle icon. */
         icon = (__runInitializers(this, _on_extraInitializers), __runInitializers(this, _icon_initializers, void 0));
         // this is necessary for the route-href to work
-        href = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _href_initializers, void 0));
-        hrefChanged() {
-            if (this.href) {
-                this.root.setAttribute('href', this.href);
-            }
-            else {
-                this.root.removeAttribute('href');
-            }
-        }
+        // @bindable()
+        // href: string;
+        // hrefChanged() {
+        //   if (this.href) {
+        //     this.root.setAttribute('href', this.href);
+        //   } else {
+        //     this.root.removeAttribute('href');
+        //   }
+        // }
         /**
          * Set the component touch target to 48 x 48 px
          */
-        touch = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _touch_initializers, void 0));
+        touch = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _touch_initializers, void 0));
         attached() {
-            this.hrefChanged();
+            // this.hrefChanged();
             if (this.root.querySelector('mdc-icon-button-icon')) {
                 this.foundation = this.getDefaultFoundation();
                 this.foundation.init();

package/dist/icon-button/mdc-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"mdc-icon-button.js","sourceRoot":"","sources":["../../src/icon-button/mdc-icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, inject, BindingMode, bindable } from 'aurelia';\r\nimport { MDCIconButtonToggleFoundation, MDCIconButtonToggleAdapter, MDCIconButtonToggleEventDetail, strings } from '@material/icon-button';\r\nimport { MdcComponent, booleanAttr } from '../base';\r\nimport template from './mdc-icon-button.html?raw';\r\n\r\n/**\r\n * @selector button[mdc-icon-button]\r\n * @selector a[mdc-icon-button]\r\n * @selector mdc-icon-button\r\n */\r\n@inject(Element)\r\n@customElement({ name: 'mdc-icon-button', template })\r\nexport class MdcIconButton extends MdcComponent<MDCIconButtonToggleFoundation> {\r\n  /** Sets the toggle state to the provided value */\r\n  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })\r\n  on: boolean;\r\n\r\n  /** Optional. Set a Material icon as a non-toggle icon. */\r\n  @bindable()\r\n  icon: string;\r\n\r\n  // this is necessary for the route-href to work\r\n  @bindable()\r\n  href: string;\r\n  hrefChanged() {\r\n    if (this.href) {\r\n      this.root.setAttribute('href', this.href);\r\n    } else {\r\n      this.root.removeAttribute('href');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Set the component touch target to 48 x 48 px\r\n   */\r\n  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })\r\n  touch: boolean;\r\n\r\n  attached() {\r\n    this.hrefChanged();\r\n    if (this.root.querySelector('mdc-icon-button-icon')) {\r\n      this.foundation = this.getDefaultFoundation();\r\n      this.foundation.init();\r\n    }\r\n  }\r\n\r\n  handleClick() {\r\n    this.foundation?.handleClick();\r\n    return true;\r\n  }\r\n\r\n  getDefaultFoundation() {\r\n    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.\r\n    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.\r\n    const adapter: MDCIconButtonToggleAdapter = {\r\n      addClass: (className) => this.root.classList.add(className),\r\n      hasClass: (className) => this.root.classList.contains(className),\r\n      notifyChange: (evtData) => {\r\n        this.emit<MDCIconButtonToggleEventDetail>(strings.CHANGE_EVENT, evtData);\r\n        this.on = evtData.isOn;\r\n      },\r\n      removeClass: (className) => this.root.classList.remove(className),\r\n      getAttr: (attrName) => this.root.getAttribute(attrName),\r\n      setAttr: (attrName, attrValue) => this.root.setAttribute(attrName, attrValue),\r\n    };\r\n    return new MDCIconButtonToggleFoundation(adapter);\r\n  }\r\n\r\n}\r\n"]}
+{"version":3,"file":"mdc-icon-button.js","sourceRoot":"","sources":["../../src/icon-button/mdc-icon-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,6BAA6B,EAA8D,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAElD;;;;GAIG;IAGU,aAAa;4BAFzB,MAAM,CAAC,OAAO,CAAC,EACf,aAAa,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAAC;;;;sBAClB,YAAY;;;;;;;;;;6BAApB,SAAQ,WAA2C;;;;8BAE3E,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;gCAIxD,QAAQ,EAAE;iCAiBV,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;YApBzD,wJAAA,EAAE,6BAAF,EAAE,+EAAU;YAIZ,8JAAA,IAAI,6BAAJ,IAAI,mFAAS;YAiBb,iKAAA,KAAK,6BAAL,KAAK,qFAAU;YAxBjB,6KAwDC;;;YAxDY,uDAAa;;QACxB,kDAAkD;QAElD,EAAE,qDAAU;QAEZ,0DAA0D;QAE1D,IAAI,yGAAS;QAEb,+CAA+C;QAC/C,cAAc;QACd,gBAAgB;QAChB,kBAAkB;QAClB,qBAAqB;QACrB,iDAAiD;QACjD,aAAa;QACb,yCAAyC;QACzC,MAAM;QACN,IAAI;QAEJ;;WAEG;QAEH,KAAK,4GAAU;QAEf,QAAQ;YACN,sBAAsB;YACtB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,CAAC;gBACpD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC9C,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;QAED,WAAW;YACT,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC;YAC/B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,oBAAoB;YAClB,sGAAsG;YACtG,yGAAyG;YACzG,MAAM,OAAO,GAA+B;gBAC1C,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC;gBAC3D,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;gBAChE,YAAY,EAAE,CAAC,OAAO,EAAE,EAAE;oBACxB,IAAI,CAAC,IAAI,CAAiC,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;oBACzE,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;gBACzB,CAAC;gBACD,WAAW,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC;gBACjE,OAAO,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;gBACvD,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC;aAC9E,CAAC;YACF,OAAO,IAAI,6BAA6B,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;;;;;;;;SAtDU,aAAa","sourcesContent":["import { customElement, inject, BindingMode, bindable } from 'aurelia';\nimport { MDCIconButtonToggleFoundation, MDCIconButtonToggleAdapter, MDCIconButtonToggleEventDetail, strings } from '@material/icon-button';\nimport { MdcComponent, booleanAttr } from '../base';\nimport template from './mdc-icon-button.html?raw';\n\n/**\n * @selector button[mdc-icon-button]\n * @selector a[mdc-icon-button]\n * @selector mdc-icon-button\n */\n@inject(Element)\n@customElement({ name: 'mdc-icon-button', template })\nexport class MdcIconButton extends MdcComponent<MDCIconButtonToggleFoundation> {\n  /** Sets the toggle state to the provided value */\n  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })\n  on: boolean;\n\n  /** Optional. Set a Material icon as a non-toggle icon. */\n  @bindable()\n  icon: string;\n\n  // this is necessary for the route-href to work\n  // @bindable()\n  // href: string;\n  // hrefChanged() {\n  //   if (this.href) {\n  //     this.root.setAttribute('href', this.href);\n  //   } else {\n  //     this.root.removeAttribute('href');\n  //   }\n  // }\n\n  /**\n   * Set the component touch target to 48 x 48 px\n   */\n  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })\n  touch: boolean;\n\n  attached() {\n    // this.hrefChanged();\n    if (this.root.querySelector('mdc-icon-button-icon')) {\n      this.foundation = this.getDefaultFoundation();\n      this.foundation.init();\n    }\n  }\n\n  handleClick() {\n    this.foundation?.handleClick();\n    return true;\n  }\n\n  getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.\n    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCIconButtonToggleAdapter = {\n      addClass: (className) => this.root.classList.add(className),\n      hasClass: (className) => this.root.classList.contains(className),\n      notifyChange: (evtData) => {\n        this.emit<MDCIconButtonToggleEventDetail>(strings.CHANGE_EVENT, evtData);\n        this.on = evtData.isOn;\n      },\n      removeClass: (className) => this.root.classList.remove(className),\n      getAttr: (attrName) => this.root.getAttribute(attrName),\n      setAttr: (attrName, attrValue) => this.root.setAttribute(attrName, attrValue),\n    };\n    return new MDCIconButtonToggleFoundation(adapter);\n  }\n\n}\n"]}

package/dist/lookup/mdc-lookup.html

@@ -1,27 +1,36 @@
-<template class="mdc-lookup">
-  <mdc-menu component.ref="menu" mdcmenu:selected.trigger="handleMenuItemAction($event)" anchor-corner="BOTTOM_LEFT"
-    anchor.bind="input" hoist-to-body.bind="hoistToBody" class="${menuClass}" select-on-tab.bind="selectOnTab" stay-open
-    mdc-menu-surface.ref="menuSurface" keydown.trigger="handleMenuKeydown($event)">
-    <mdc-list role="menu" wrap-focus>
-
-      <au-slot if.bind="searching" name="searching">
-        <mdc-list-item two-line.bind="twoLine">${defaultConfiguration.searchingMessage}</mdc-list-item>
-      </au-slot>
-
-      <au-slot if.bind="errorMessage" name="error">
-        <mdc-list-item two-line.bind="twoLine">${errorMessage}</mdc-list-item>
-      </au-slot>
-
-      <au-slot if.bind="optionsArray && !optionsArray.length" name="not-found">
-        <mdc-list-item two-line.bind="twoLine">
-          ${defaultConfiguration.notFoundMessage}
-        </mdc-list-item>
-      </au-slot>
-
-      <mdc-list-item role="menuitem" repeat.for="option of optionsArray" value.bind="option" tabindex="-1"
-        two-line.bind="twoLine">
-        <au-slot name="option">${getDisplay(option)}</au-slot>
-      </mdc-list-item>
-    </mdc-list>
-  </mdc-menu>
-</template>
+<template class="mdc-lookup">
+  <mdc-menu component.ref="menu" mdcmenu:selected.trigger="handleMenuItemAction($event)" anchor-corner="BOTTOM_LEFT"
+    anchor.bind="input" hoist-to-body.bind="hoistToBody" class="${menuClass}" select-on-tab.bind="selectOnTab" stay-open
+    mdc-menu-surface.ref="menuSurface" keydown.trigger="handleMenuKeydown($event)">
+    <mdc-list role="menu" wrap-focus>
+
+      <au-slot if.bind="searching" name="searching">
+        <mdc-list-item two-line.bind="twoLine">${configuration.lookup.searchingMessage}</mdc-list-item>
+      </au-slot>
+
+      <au-slot if.bind="errorMessage" name="error">
+        <mdc-list-item two-line.bind="twoLine">${errorMessage}</mdc-list-item>
+      </au-slot>
+
+      <au-slot if.bind="optionsArray && !optionsArray.length" name="not-found">
+        <mdc-list-item two-line.bind="twoLine">
+          ${configuration.lookup.notFoundMessage}
+        </mdc-list-item>
+      </au-slot>
+
+      <div if.bind="!virtual && optionsArray.length">
+        <mdc-list-item role="menuitem" repeat.for="option of optionsArray" value.bind="option"
+          tabindex="-1" two-line.bind="twoLine">
+          <au-slot name="option">${getDisplay(option)}</au-slot>
+        </mdc-list-item>
+      </div>
+
+      <div if.bind="virtual && optionsArray.length">
+        <mdc-list-item role="menuitem" virtual-repeat.for="option of optionsArray" value.bind="option" tabindex="-1"
+          two-line.bind="twoLine">
+          <au-slot name="option">${getDisplay(option)}</au-slot>
+        </mdc-list-item>
+      </div>
+    </mdc-list>
+  </mdc-menu>
+</template>

package/dist/types/icon-button/mdc-icon-button.d.ts

@@ -10,8 +10,6 @@ export declare class MdcIconButton extends MdcComponent<MDCIconButtonToggleFound
     on: boolean;
     /** Optional. Set a Material icon as a non-toggle icon. */
     icon: string;
-    href: string;
-    hrefChanged(): void;
     /**
      * Set the component touch target to 48 x 48 px
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurelia-mdc-web/all",
-  "version": "9.3.5-au2",
+  "version": "9.3.7-au2",
   "publishConfig": {
     "access": "public"
   },
@@ -90,7 +90,7 @@
     "@material/tooltip": "^14.0.0",
     "@material/top-app-bar": "^14.0.0",
     "@material/typography": "^14.0.0",
-    "aurelia": "2.0.0-beta.24",
+    "aurelia": "2.0.0-beta.25",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1"
   }

package/src/icon-button/mdc-icon-button.ts

@@ -1,69 +1,69 @@
-import { customElement, inject, BindingMode, bindable } from 'aurelia';
-import { MDCIconButtonToggleFoundation, MDCIconButtonToggleAdapter, MDCIconButtonToggleEventDetail, strings } from '@material/icon-button';
-import { MdcComponent, booleanAttr } from '../base';
-import template from './mdc-icon-button.html?raw';
-
-/**
- * @selector button[mdc-icon-button]
- * @selector a[mdc-icon-button]
- * @selector mdc-icon-button
- */
-@inject(Element)
-@customElement({ name: 'mdc-icon-button', template })
-export class MdcIconButton extends MdcComponent<MDCIconButtonToggleFoundation> {
-  /** Sets the toggle state to the provided value */
-  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
-  on: boolean;
-
-  /** Optional. Set a Material icon as a non-toggle icon. */
-  @bindable()
-  icon: string;
-
-  // this is necessary for the route-href to work
-  @bindable()
-  href: string;
-  hrefChanged() {
-    if (this.href) {
-      this.root.setAttribute('href', this.href);
-    } else {
-      this.root.removeAttribute('href');
-    }
-  }
-
-  /**
-   * Set the component touch target to 48 x 48 px
-   */
-  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
-  touch: boolean;
-
-  attached() {
-    this.hrefChanged();
-    if (this.root.querySelector('mdc-icon-button-icon')) {
-      this.foundation = this.getDefaultFoundation();
-      this.foundation.init();
-    }
-  }
-
-  handleClick() {
-    this.foundation?.handleClick();
-    return true;
-  }
-
-  getDefaultFoundation() {
-    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-    const adapter: MDCIconButtonToggleAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      hasClass: (className) => this.root.classList.contains(className),
-      notifyChange: (evtData) => {
-        this.emit<MDCIconButtonToggleEventDetail>(strings.CHANGE_EVENT, evtData);
-        this.on = evtData.isOn;
-      },
-      removeClass: (className) => this.root.classList.remove(className),
-      getAttr: (attrName) => this.root.getAttribute(attrName),
-      setAttr: (attrName, attrValue) => this.root.setAttribute(attrName, attrValue),
-    };
-    return new MDCIconButtonToggleFoundation(adapter);
-  }
-
-}
+import { customElement, inject, BindingMode, bindable } from 'aurelia';
+import { MDCIconButtonToggleFoundation, MDCIconButtonToggleAdapter, MDCIconButtonToggleEventDetail, strings } from '@material/icon-button';
+import { MdcComponent, booleanAttr } from '../base';
+import template from './mdc-icon-button.html?raw';
+
+/**
+ * @selector button[mdc-icon-button]
+ * @selector a[mdc-icon-button]
+ * @selector mdc-icon-button
+ */
+@inject(Element)
+@customElement({ name: 'mdc-icon-button', template })
+export class MdcIconButton extends MdcComponent<MDCIconButtonToggleFoundation> {
+  /** Sets the toggle state to the provided value */
+  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
+  on: boolean;
+
+  /** Optional. Set a Material icon as a non-toggle icon. */
+  @bindable()
+  icon: string;
+
+  // this is necessary for the route-href to work
+  // @bindable()
+  // href: string;
+  // hrefChanged() {
+  //   if (this.href) {
+  //     this.root.setAttribute('href', this.href);
+  //   } else {
+  //     this.root.removeAttribute('href');
+  //   }
+  // }
+
+  /**
+   * Set the component touch target to 48 x 48 px
+   */
+  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
+  touch: boolean;
+
+  attached() {
+    // this.hrefChanged();
+    if (this.root.querySelector('mdc-icon-button-icon')) {
+      this.foundation = this.getDefaultFoundation();
+      this.foundation.init();
+    }
+  }
+
+  handleClick() {
+    this.foundation?.handleClick();
+    return true;
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCIconButtonToggleAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      notifyChange: (evtData) => {
+        this.emit<MDCIconButtonToggleEventDetail>(strings.CHANGE_EVENT, evtData);
+        this.on = evtData.isOn;
+      },
+      removeClass: (className) => this.root.classList.remove(className),
+      getAttr: (attrName) => this.root.getAttribute(attrName),
+      setAttr: (attrName, attrValue) => this.root.setAttribute(attrName, attrValue),
+    };
+    return new MDCIconButtonToggleFoundation(adapter);
+  }
+
+}

package/src/lookup/mdc-lookup.html

@@ -1,27 +1,36 @@
-<template class="mdc-lookup">
-  <mdc-menu component.ref="menu" mdcmenu:selected.trigger="handleMenuItemAction($event)" anchor-corner="BOTTOM_LEFT"
-    anchor.bind="input" hoist-to-body.bind="hoistToBody" class="${menuClass}" select-on-tab.bind="selectOnTab" stay-open
-    mdc-menu-surface.ref="menuSurface" keydown.trigger="handleMenuKeydown($event)">
-    <mdc-list role="menu" wrap-focus>
-
-      <au-slot if.bind="searching" name="searching">
-        <mdc-list-item two-line.bind="twoLine">${defaultConfiguration.searchingMessage}</mdc-list-item>
-      </au-slot>
-
-      <au-slot if.bind="errorMessage" name="error">
-        <mdc-list-item two-line.bind="twoLine">${errorMessage}</mdc-list-item>
-      </au-slot>
-
-      <au-slot if.bind="optionsArray && !optionsArray.length" name="not-found">
-        <mdc-list-item two-line.bind="twoLine">
-          ${defaultConfiguration.notFoundMessage}
-        </mdc-list-item>
-      </au-slot>
-
-      <mdc-list-item role="menuitem" repeat.for="option of optionsArray" value.bind="option" tabindex="-1"
-        two-line.bind="twoLine">
-        <au-slot name="option">${getDisplay(option)}</au-slot>
-      </mdc-list-item>
-    </mdc-list>
-  </mdc-menu>
-</template>
+<template class="mdc-lookup">
+  <mdc-menu component.ref="menu" mdcmenu:selected.trigger="handleMenuItemAction($event)" anchor-corner="BOTTOM_LEFT"
+    anchor.bind="input" hoist-to-body.bind="hoistToBody" class="${menuClass}" select-on-tab.bind="selectOnTab" stay-open
+    mdc-menu-surface.ref="menuSurface" keydown.trigger="handleMenuKeydown($event)">
+    <mdc-list role="menu" wrap-focus>
+
+      <au-slot if.bind="searching" name="searching">
+        <mdc-list-item two-line.bind="twoLine">${configuration.lookup.searchingMessage}</mdc-list-item>
+      </au-slot>
+
+      <au-slot if.bind="errorMessage" name="error">
+        <mdc-list-item two-line.bind="twoLine">${errorMessage}</mdc-list-item>
+      </au-slot>
+
+      <au-slot if.bind="optionsArray && !optionsArray.length" name="not-found">
+        <mdc-list-item two-line.bind="twoLine">
+          ${configuration.lookup.notFoundMessage}
+        </mdc-list-item>
+      </au-slot>
+
+      <div if.bind="!virtual && optionsArray.length">
+        <mdc-list-item role="menuitem" repeat.for="option of optionsArray" value.bind="option"
+          tabindex="-1" two-line.bind="twoLine">
+          <au-slot name="option">${getDisplay(option)}</au-slot>
+        </mdc-list-item>
+      </div>
+
+      <div if.bind="virtual && optionsArray.length">
+        <mdc-list-item role="menuitem" virtual-repeat.for="option of optionsArray" value.bind="option" tabindex="-1"
+          two-line.bind="twoLine">
+          <au-slot name="option">${getDisplay(option)}</au-slot>
+        </mdc-list-item>
+      </div>
+    </mdc-list>
+  </mdc-menu>
+</template>