@aurelia-ui-toolkits/headless 1.0.0

package/dist/list/ui-list.js

@@ -0,0 +1,316 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, children, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-list.html?raw';
+let UiList = (() => {
+    let _classDecorators = [customElement({ name: 'ui-list', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _items_decorators;
+    let _items_initializers = [];
+    let _items_extraInitializers = [];
+    let _loop_decorators;
+    let _loop_initializers = [];
+    let _loop_extraInitializers = [];
+    let _orientation_decorators;
+    let _orientation_initializers = [];
+    let _orientation_extraInitializers = [];
+    let _typeaheadField_decorators;
+    let _typeaheadField_initializers = [];
+    let _typeaheadField_extraInitializers = [];
+    let _disabledField_decorators;
+    let _disabledField_initializers = [];
+    let _disabledField_extraInitializers = [];
+    let _selected_decorators;
+    let _selected_initializers = [];
+    let _selected_extraInitializers = [];
+    let _listItems_decorators;
+    let _listItems_initializers = [];
+    let _listItems_extraInitializers = [];
+    var UiList = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _items_decorators = [bindable];
+            _loop_decorators = [bindable({ set: booleanAttr })];
+            _orientation_decorators = [bindable];
+            _typeaheadField_decorators = [bindable];
+            _disabledField_decorators = [bindable];
+            _selected_decorators = [bindable({ mode: 'twoWay' })];
+            _listItems_decorators = [children({
+                    query: 'ui-list-item',
+                    map: (_node, viewModel) => viewModel
+                })];
+            __esDecorate(null, null, _items_decorators, { kind: "field", name: "items", static: false, private: false, access: { has: obj => "items" in obj, get: obj => obj.items, set: (obj, value) => { obj.items = value; } }, metadata: _metadata }, _items_initializers, _items_extraInitializers);
+            __esDecorate(null, null, _loop_decorators, { kind: "field", name: "loop", static: false, private: false, access: { has: obj => "loop" in obj, get: obj => obj.loop, set: (obj, value) => { obj.loop = value; } }, metadata: _metadata }, _loop_initializers, _loop_extraInitializers);
+            __esDecorate(null, null, _orientation_decorators, { kind: "field", name: "orientation", static: false, private: false, access: { has: obj => "orientation" in obj, get: obj => obj.orientation, set: (obj, value) => { obj.orientation = value; } }, metadata: _metadata }, _orientation_initializers, _orientation_extraInitializers);
+            __esDecorate(null, null, _typeaheadField_decorators, { kind: "field", name: "typeaheadField", static: false, private: false, access: { has: obj => "typeaheadField" in obj, get: obj => obj.typeaheadField, set: (obj, value) => { obj.typeaheadField = value; } }, metadata: _metadata }, _typeaheadField_initializers, _typeaheadField_extraInitializers);
+            __esDecorate(null, null, _disabledField_decorators, { kind: "field", name: "disabledField", static: false, private: false, access: { has: obj => "disabledField" in obj, get: obj => obj.disabledField, set: (obj, value) => { obj.disabledField = value; } }, metadata: _metadata }, _disabledField_initializers, _disabledField_extraInitializers);
+            __esDecorate(null, null, _selected_decorators, { kind: "field", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
+            __esDecorate(null, null, _listItems_decorators, { kind: "field", name: "listItems", static: false, private: false, access: { has: obj => "listItems" in obj, get: obj => obj.listItems, set: (obj, value) => { obj.listItems = value; } }, metadata: _metadata }, _listItems_initializers, _listItems_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiList = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        host = resolve(INode);
+        items = __runInitializers(this, _items_initializers, []);
+        loop = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _loop_initializers, true));
+        orientation = (__runInitializers(this, _loop_extraInitializers), __runInitializers(this, _orientation_initializers, 'vertical'));
+        typeaheadField = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _typeaheadField_initializers, void 0));
+        disabledField = (__runInitializers(this, _typeaheadField_extraInitializers), __runInitializers(this, _disabledField_initializers, 'disabled'));
+        selected = (__runInitializers(this, _disabledField_extraInitializers), __runInitializers(this, _selected_initializers, void 0));
+        listItems = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _listItems_initializers, []));
+        listItemsChanged() {
+            if (!this.items.length) {
+                this.items = this.listItems.map(x => x.value);
+            }
+            if (this.listItemsChangedCallback) {
+                this.listItemsChangedCallback();
+                this.listItemsChangedCallback = undefined;
+            }
+        }
+        listItemsChangedCallback = __runInitializers(this, _listItems_extraInitializers);
+        activeItem;
+        typeaheadBuffer = '';
+        typeaheadTimer;
+        detaching() {
+            this.clearTypeahead();
+        }
+        onKeyDown(event) {
+            const values = this.getEffectiveItems();
+            if (values.length === 0) {
+                return;
+            }
+            if (this.isNextKey(event.key)) {
+                event.preventDefault();
+                this.move(1);
+                return;
+            }
+            if (this.isPreviousKey(event.key)) {
+                event.preventDefault();
+                this.move(-1);
+                return;
+            }
+            if (event.key === Keys.Home) {
+                event.preventDefault();
+                this.setFirstActive();
+                return;
+            }
+            if (event.key === Keys.End) {
+                event.preventDefault();
+                this.setLastActive();
+                return;
+            }
+            if (event.key === Keys.Enter) {
+                event.preventDefault();
+                this.selectActive();
+                return;
+            }
+            if (this.typeaheadField && this.isTypeaheadKey(event)) {
+                event.preventDefault();
+                this.handleTypeahead(event.key.toLowerCase());
+            }
+        }
+        isItemDisabled(item) {
+            const listItem = this.listItems.find(x => x.value === item);
+            if (listItem) {
+                return listItem.disabled;
+            }
+            if (typeof this.disabledField === 'string') {
+                return !!item[this.disabledField];
+            }
+            else if (typeof this.disabledField === 'function') {
+                return this.disabledField(item);
+            }
+            return false;
+        }
+        onClick(event) {
+            const item = this.resolveItemFromEvent(event.target);
+            if (item === undefined || item === null || this.isItemDisabled(item)) {
+                return;
+            }
+            this.selectItem(item);
+        }
+        suppressMouseOver = false;
+        onMouseMove() {
+            if (this.suppressMouseOver) {
+                this.suppressMouseOver = false;
+            }
+        }
+        onMouseOver(event) {
+            if (this.suppressMouseOver) {
+                return;
+            }
+            const item = this.resolveItemFromEvent(event.target);
+            if (item === undefined || item === null || this.isItemDisabled(item)) {
+                return;
+            }
+            this.activateItem(item);
+        }
+        focusFirst() {
+            this.host.focus();
+            this.setFirstActive();
+        }
+        focusLast() {
+            this.host.focus();
+            this.setLastActive();
+        }
+        getEffectiveItems() {
+            if (this.items?.length) {
+                return this.items;
+            }
+            return this.listItems.map(item => item.value);
+        }
+        isNextKey(key) {
+            if (this.orientation === 'horizontal') {
+                return key === Keys.ArrowRight;
+            }
+            return key === Keys.ArrowDown;
+        }
+        isPreviousKey(key) {
+            if (this.orientation === 'horizontal') {
+                return key === Keys.ArrowLeft;
+            }
+            return key === Keys.ArrowUp;
+        }
+        move(direction) {
+            const items = this.getEffectiveItems();
+            const currentIndex = this.activeItem ? items.indexOf(this.activeItem) : -1;
+            let nextIndex = currentIndex + direction;
+            if (this.loop) {
+                nextIndex = (nextIndex + items.length) % items.length;
+            }
+            else {
+                nextIndex = Math.max(0, Math.min(items.length - 1, nextIndex));
+            }
+            const next = this.getNonDisabled(items[nextIndex], direction, items);
+            if (next !== undefined) {
+                this.scrollItemIntoView(next);
+                this.activateItem(next);
+            }
+        }
+        getNonDisabled(item, direction, items = this.getEffectiveItems()) {
+            if (!this.isItemDisabled(item)) {
+                return item;
+            }
+            const startIndex = items.indexOf(item);
+            for (let step = 1; step < items.length; step++) {
+                const index = (startIndex + direction * step + items.length) % items.length;
+                const next = items[index];
+                if (!this.isItemDisabled(next)) {
+                    return next;
+                }
+            }
+            return undefined;
+        }
+        async setFirstActive() {
+            const items = this.getEffectiveItems();
+            const firstItem = this.getNonDisabled(items[0], 1, items);
+            if (firstItem === undefined) {
+                return;
+            }
+            this.scrollItemIntoView(firstItem);
+            this.activateItem(firstItem);
+        }
+        setLastActive() {
+            const items = this.getEffectiveItems();
+            const lastItem = this.getNonDisabled(items[items.length - 1], -1, items);
+            if (lastItem === undefined) {
+                return;
+            }
+            this.scrollItemIntoView(lastItem);
+            this.activateItem(lastItem);
+        }
+        activateItem(item) {
+            this.activeItem = item;
+            this.emitActivate(item);
+        }
+        selectActive() {
+            if (this.activeItem !== undefined && !this.isItemDisabled(this.activeItem)) {
+                this.selectItem(this.activeItem);
+            }
+        }
+        selectItem(item) {
+            this.activateItem(item);
+            this.selected = item;
+            this.emitSelection(item);
+        }
+        emitActivate(item) {
+            this.host.dispatchEvent(new CustomEvent('list-activate', {
+                bubbles: true,
+                detail: item
+            }));
+        }
+        emitSelection(item) {
+            this.host.dispatchEvent(new CustomEvent('list-select', {
+                bubbles: true,
+                detail: item
+            }));
+        }
+        resolveItemFromEvent(target) {
+            const element = target instanceof HTMLElement ? target.closest('ui-list-item') : null;
+            if (!element) {
+                return undefined;
+            }
+            return this.listItems.find((item) => item.element === element)?.value;
+        }
+        isTypeaheadKey(event) {
+            return (event.key.length === 1 || event.key === ' ') && !event.altKey && !event.ctrlKey && !event.metaKey;
+        }
+        handleTypeahead(character) {
+            this.typeaheadBuffer += character;
+            this.clearTypeahead();
+            this.typeaheadTimer = setTimeout(() => {
+                this.typeaheadBuffer = '';
+                this.typeaheadTimer = undefined;
+            }, 800);
+            const items = this.getEffectiveItems();
+            const startIndex = this.activeItem ? items.indexOf(this.activeItem) : 0;
+            for (let step = 0; step < items.length; step++) {
+                const index = (startIndex + step) % items.length;
+                const item = items[index];
+                const label = this.getItemText(item).toLowerCase();
+                if (label.startsWith(this.typeaheadBuffer) && !this.isItemDisabled(item)) {
+                    this.scrollItemIntoView(item);
+                    this.activateItem(item);
+                    return;
+                }
+            }
+        }
+        getItemText(item) {
+            if (this.typeaheadField && item && typeof item === 'object') {
+                const value = item[this.typeaheadField];
+                return value === undefined || value === null ? '' : String(value);
+            }
+            return item === undefined || item === null ? '' : String(item);
+        }
+        clearTypeahead() {
+            if (this.typeaheadTimer) {
+                clearTimeout(this.typeaheadTimer);
+                this.typeaheadTimer = undefined;
+            }
+        }
+        scrollItemIntoView(item) {
+            const listItem = this.listItems.find(x => x.value === item);
+            this.suppressMouseOver = true;
+            if (listItem) {
+                listItem.element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+            }
+            else {
+                const items = this.getEffectiveItems();
+                const index = items.indexOf(item);
+                this.host.scrollTo({ top: this.host.scrollHeight / items.length * index });
+                // this is a workaround to ensure the active item is scrolled into view after the items are rendered,
+                // if CSS defines a gap between items the virtual-repeat spacer height might be incorrect
+                // so we need to adjust the scroll after the list item gets rendered
+                this.listItemsChangedCallback = () => this.scrollItemIntoView(item);
+            }
+        }
+    };
+    return UiList = _classThis;
+})();
+export { UiList };
+//# sourceMappingURL=ui-list.js.map

package/dist/list/ui-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-list.js","sourceRoot":"","sources":["../../src/list/ui-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, children, customElement, INode, resolve } from 'aurelia';\r\nimport { booleanAttr } from '../base/boolean-attr';\r\nimport { Keys } from '../base/keys';\r\nimport { UiListItem } from './ui-list-item';\r\nimport template from './ui-list.html?raw';\r\n\r\ntype ListOrientation = 'vertical' | 'horizontal';\r\n\r\n@customElement({ name: 'ui-list', template })\r\nexport class UiList {\r\n  private readonly host = resolve(INode) as HTMLElement;\r\n\r\n  @bindable\r\n  items: any[] = [];\r\n\r\n  @bindable({ set: booleanAttr })\r\n  loop: boolean = true;\r\n\r\n  @bindable\r\n  orientation: ListOrientation = 'vertical';\r\n\r\n  @bindable\r\n  typeaheadField: string | undefined;\r\n\r\n  @bindable\r\n  disabledField: string | ((item: unknown) => boolean) = 'disabled';\n\r\n  @bindable({ mode: 'twoWay' })\n  selected: unknown;\n\r\n  @children({\r\n    query: 'ui-list-item',\r\n    map: (_node, viewModel) => viewModel\r\n  })\r\n  listItems: UiListItem[] = [];\r\n  listItemsChanged() {\r\n    if (!this.items.length) {\r\n      this.items = this.listItems.map(x => x.value);\r\n    }\r\n    if (this.listItemsChangedCallback) {\r\n      this.listItemsChangedCallback();\r\n      this.listItemsChangedCallback = undefined;\r\n    }\r\n  }\r\n\r\n  private listItemsChangedCallback: (() => void) | undefined;\r\n  activeItem: unknown;\n  private typeaheadBuffer = '';\r\n  private typeaheadTimer: ReturnType<typeof setTimeout> | undefined;\r\n\r\n  detaching(): void {\r\n    this.clearTypeahead();\r\n  }\r\n\r\n  onKeyDown(event: KeyboardEvent): void {\r\n    const values = this.getEffectiveItems();\r\n    if (values.length === 0) {\r\n      return;\r\n    }\r\n\r\n    if (this.isNextKey(event.key)) {\r\n      event.preventDefault();\r\n      this.move(1);\r\n      return;\r\n    }\r\n\r\n    if (this.isPreviousKey(event.key)) {\r\n      event.preventDefault();\r\n      this.move(-1);\r\n      return;\r\n    }\r\n\r\n    if (event.key === Keys.Home) {\r\n      event.preventDefault();\r\n      this.setFirstActive();\r\n      return;\r\n    }\r\n\r\n    if (event.key === Keys.End) {\r\n      event.preventDefault();\r\n      this.setLastActive();\r\n      return;\r\n    }\r\n\r\n    if (event.key === Keys.Enter) {\r\n      event.preventDefault();\r\n      this.selectActive();\r\n      return;\r\n    }\r\n\r\n    if (this.typeaheadField && this.isTypeaheadKey(event)) {\r\n      event.preventDefault();\r\n      this.handleTypeahead(event.key.toLowerCase());\r\n    }\r\n  }\r\n\r\n  isItemDisabled(item: unknown): boolean {\n    const listItem = this.listItems.find(x => x.value === item);\n    if (listItem) {\n      return listItem.disabled;\n    }\n\n    if (typeof this.disabledField === 'string') {\n      return !!(item as any)[this.disabledField];\n    } else if (typeof this.disabledField === 'function') {\r\n      return this.disabledField(item);\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  onClick(event: MouseEvent): void {\n    const item = this.resolveItemFromEvent(event.target);\n    if (item === undefined || item === null || this.isItemDisabled(item)) {\n      return;\n    }\n\r\n    this.selectItem(item);\r\n  }\r\n\r\n  private suppressMouseOver = false;\r\n\r\n  onMouseMove(): void {\r\n    if (this.suppressMouseOver) {\r\n      this.suppressMouseOver = false;\r\n    }\r\n  }\r\n\r\n  onMouseOver(event: MouseEvent): void {\r\n    if (this.suppressMouseOver) {\r\n      return;\r\n    }\n    const item = this.resolveItemFromEvent(event.target);\n    if (item === undefined || item === null || this.isItemDisabled(item)) {\n      return;\n    }\n\r\n    this.activateItem(item);\r\n  }\r\n\r\n  focusFirst(): void {\r\n    this.host.focus();\r\n    this.setFirstActive();\r\n  }\r\n\r\n  focusLast(): void {\r\n    this.host.focus();\r\n    this.setLastActive();\r\n  }\r\n\r\n  private getEffectiveItems(): unknown[] {\n    if (this.items?.length) {\n      return this.items;\n    }\n\n    return this.listItems.map(item => item.value);\n  }\n\r\n  private isNextKey(key: string): boolean {\r\n    if (this.orientation === 'horizontal') {\r\n      return key === Keys.ArrowRight;\r\n    }\r\n\r\n    return key === Keys.ArrowDown;\r\n  }\r\n\r\n  private isPreviousKey(key: string): boolean {\r\n    if (this.orientation === 'horizontal') {\r\n      return key === Keys.ArrowLeft;\r\n    }\r\n\r\n    return key === Keys.ArrowUp;\r\n  }\r\n\r\n  private move(direction: 1 | -1): void {\n    const items = this.getEffectiveItems();\n    const currentIndex = this.activeItem ? items.indexOf(this.activeItem) : -1;\n    let nextIndex = currentIndex + direction;\n\n    if (this.loop) {\n      nextIndex = (nextIndex + items.length) % items.length;\n    } else {\n      nextIndex = Math.max(0, Math.min(items.length - 1, nextIndex));\n    }\n\n    const next = this.getNonDisabled(items[nextIndex], direction, items);\n    if (next !== undefined) {\n      this.scrollItemIntoView(next);\n      this.activateItem(next);\n    }\n  }\r\n\r\n  private getNonDisabled(item: unknown, direction: 1 | -1, items = this.getEffectiveItems()): unknown {\n    if (!this.isItemDisabled(item)) {\n      return item;\n    }\n    const startIndex = items.indexOf(item);\n    for (let step = 1; step < items.length; step++) {\n      const index = (startIndex + direction * step + items.length) % items.length;\n      const next = items[index];\n      if (!this.isItemDisabled(next)) {\r\n        return next;\r\n      }\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private async setFirstActive() {\n    const items = this.getEffectiveItems();\n    const firstItem = this.getNonDisabled(items[0], 1, items);\n    if (firstItem === undefined) {\n      return;\n    }\n\r\n    this.scrollItemIntoView(firstItem);\r\n    this.activateItem(firstItem);\r\n  }\r\n\r\n  private setLastActive(): void {\n    const items = this.getEffectiveItems();\n    const lastItem = this.getNonDisabled(items[items.length - 1], -1, items);\n    if (lastItem === undefined) {\n      return;\n    }\n\r\n    this.scrollItemIntoView(lastItem);\r\n    this.activateItem(lastItem);\r\n  }\r\n\r\n  private activateItem(item: unknown): void {\n    this.activeItem = item;\r\n    this.emitActivate(item);\r\n  }\r\n\r\n  private selectActive(): void {\r\n    if (this.activeItem !== undefined && !this.isItemDisabled(this.activeItem)) {\n      this.selectItem(this.activeItem);\n    }\n  }\r\n\r\n  private selectItem(item: unknown): void {\n    this.activateItem(item);\r\n    this.selected = item;\r\n    this.emitSelection(item);\r\n  }\r\n\r\n  private emitActivate(item: unknown): void {\n    this.host.dispatchEvent(new CustomEvent('list-activate', {\r\n      bubbles: true,\r\n      detail: item\r\n    }));\r\n  }\r\n\r\n  private emitSelection(item: unknown): void {\n    this.host.dispatchEvent(new CustomEvent('list-select', {\r\n      bubbles: true,\r\n      detail: item\r\n    }));\r\n  }\r\n\r\n  private resolveItemFromEvent(target: EventTarget | null) {\r\n    const element = target instanceof HTMLElement ? target.closest('ui-list-item') : null;\r\n    if (!element) {\r\n      return undefined;\r\n    }\r\n\r\n    return this.listItems.find((item) => item.element === element)?.value;\r\n  }\r\n\r\n  private isTypeaheadKey(event: KeyboardEvent): boolean {\r\n    return (event.key.length === 1 || event.key === ' ') && !event.altKey && !event.ctrlKey && !event.metaKey;\r\n  }\r\n\r\n  private handleTypeahead(character: string): void {\n    this.typeaheadBuffer += character;\r\n    this.clearTypeahead();\r\n    this.typeaheadTimer = setTimeout(() => {\r\n      this.typeaheadBuffer = '';\r\n      this.typeaheadTimer = undefined;\r\n    }, 800);\r\n\r\n    const items = this.getEffectiveItems();\n    const startIndex = this.activeItem ? items.indexOf(this.activeItem) : 0;\n\n    for (let step = 0; step < items.length; step++) {\n      const index = (startIndex + step) % items.length;\n      const item = items[index];\n      const label = this.getItemText(item).toLowerCase();\n      if (label.startsWith(this.typeaheadBuffer) && !this.isItemDisabled(item)) {\r\n        this.scrollItemIntoView(item);\r\n        this.activateItem(item);\r\n        return;\r\n      }\r\n    }\r\n  }\n\n  private getItemText(item: unknown): string {\n    if (this.typeaheadField && item && typeof item === 'object') {\n      const value = (item as Record<string, unknown>)[this.typeaheadField];\n      return value === undefined || value === null ? '' : String(value);\n    }\n\n    return item === undefined || item === null ? '' : String(item);\n  }\n\n  private clearTypeahead(): void {\n    if (this.typeaheadTimer) {\r\n      clearTimeout(this.typeaheadTimer);\r\n      this.typeaheadTimer = undefined;\r\n    }\r\n  }\r\n\r\n  private scrollItemIntoView(item: unknown): void {\n    const listItem = this.listItems.find(x => x.value === item);\r\n    this.suppressMouseOver = true;\r\n\r\n    if (listItem) {\r\n      listItem.element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });\r\n    } else {\n      const items = this.getEffectiveItems();\n      const index = items.indexOf(item);\n      this.host.scrollTo({ top: this.host.scrollHeight / items.length * index });\n      // this is a workaround to ensure the active item is scrolled into view after the items are rendered,\r\n      // if CSS defines a gap between items the virtual-repeat spacer height might be incorrect\r\n      // so we need to adjust the scroll after the list item gets rendered\r\n      this.listItemsChangedCallback = () => this.scrollItemIntoView(item);\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/menu/ui-menu.html

@@ -0,0 +1,20 @@
+<template class="ui-menu" role="menu" data-open.attr="open ? '' : null">
+  <ui-popup component.ref="popup"
+    open.bind="open"
+    anchor.bind="anchor"
+    tab-reference.bind="tabReference"
+    placement.bind="placement"
+    offset.bind="offset"
+    portal-target.bind="portalTarget"
+    portal-position.bind="portalPosition"
+    exposed-host.bind="effectiveSlotHost"
+    close-on-outside.bind="closeOnOutside"
+    close-on-escape.bind="closeOnEscape"
+    match-anchor-width.bind="matchAnchorWidth"
+    focus-on-open.bind="focusOnOpen"
+    restore-focus.bind="restoreFocus"
+    popup-tab-away.trigger="onPopupTabAway($event)"
+    list-select.trigger="onListSelect($event)">
+    <au-slot expose.bind="effectiveSlotHost"></au-slot>
+  </ui-popup>
+</template>

package/dist/menu/ui-menu.js

@@ -0,0 +1,154 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, CustomElement, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-menu.html?raw';
+let UiMenu = (() => {
+    let _classDecorators = [customElement({ name: 'ui-menu', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _anchor_decorators;
+    let _anchor_initializers = [];
+    let _anchor_extraInitializers = [];
+    let _tabReference_decorators;
+    let _tabReference_initializers = [];
+    let _tabReference_extraInitializers = [];
+    let _placement_decorators;
+    let _placement_initializers = [];
+    let _placement_extraInitializers = [];
+    let _offset_decorators;
+    let _offset_initializers = [];
+    let _offset_extraInitializers = [];
+    let _portalTarget_decorators;
+    let _portalTarget_initializers = [];
+    let _portalTarget_extraInitializers = [];
+    let _portalPosition_decorators;
+    let _portalPosition_initializers = [];
+    let _portalPosition_extraInitializers = [];
+    let _exposedHost_decorators;
+    let _exposedHost_initializers = [];
+    let _exposedHost_extraInitializers = [];
+    let _closeOnOutside_decorators;
+    let _closeOnOutside_initializers = [];
+    let _closeOnOutside_extraInitializers = [];
+    let _closeOnEscape_decorators;
+    let _closeOnEscape_initializers = [];
+    let _closeOnEscape_extraInitializers = [];
+    let _matchAnchorWidth_decorators;
+    let _matchAnchorWidth_initializers = [];
+    let _matchAnchorWidth_extraInitializers = [];
+    let _focusOnOpen_decorators;
+    let _focusOnOpen_initializers = [];
+    let _focusOnOpen_extraInitializers = [];
+    let _restoreFocus_decorators;
+    let _restoreFocus_initializers = [];
+    let _restoreFocus_extraInitializers = [];
+    let _closeOnSelect_decorators;
+    let _closeOnSelect_initializers = [];
+    let _closeOnSelect_extraInitializers = [];
+    var UiMenu = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _open_decorators = [bindable({ mode: BindingMode.twoWay, set: booleanAttr })];
+            _anchor_decorators = [bindable];
+            _tabReference_decorators = [bindable];
+            _placement_decorators = [bindable];
+            _offset_decorators = [bindable];
+            _portalTarget_decorators = [bindable];
+            _portalPosition_decorators = [bindable];
+            _exposedHost_decorators = [bindable];
+            _closeOnOutside_decorators = [bindable({ set: booleanAttr })];
+            _closeOnEscape_decorators = [bindable({ set: booleanAttr })];
+            _matchAnchorWidth_decorators = [bindable({ set: booleanAttr })];
+            _focusOnOpen_decorators = [bindable({ set: booleanAttr })];
+            _restoreFocus_decorators = [bindable({ set: booleanAttr })];
+            _closeOnSelect_decorators = [bindable({ set: booleanAttr })];
+            __esDecorate(null, null, _open_decorators, { kind: "field", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(null, null, _anchor_decorators, { kind: "field", name: "anchor", static: false, private: false, access: { has: obj => "anchor" in obj, get: obj => obj.anchor, set: (obj, value) => { obj.anchor = value; } }, metadata: _metadata }, _anchor_initializers, _anchor_extraInitializers);
+            __esDecorate(null, null, _tabReference_decorators, { kind: "field", name: "tabReference", static: false, private: false, access: { has: obj => "tabReference" in obj, get: obj => obj.tabReference, set: (obj, value) => { obj.tabReference = value; } }, metadata: _metadata }, _tabReference_initializers, _tabReference_extraInitializers);
+            __esDecorate(null, null, _placement_decorators, { kind: "field", name: "placement", static: false, private: false, access: { has: obj => "placement" in obj, get: obj => obj.placement, set: (obj, value) => { obj.placement = value; } }, metadata: _metadata }, _placement_initializers, _placement_extraInitializers);
+            __esDecorate(null, null, _offset_decorators, { kind: "field", name: "offset", static: false, private: false, access: { has: obj => "offset" in obj, get: obj => obj.offset, set: (obj, value) => { obj.offset = value; } }, metadata: _metadata }, _offset_initializers, _offset_extraInitializers);
+            __esDecorate(null, null, _portalTarget_decorators, { kind: "field", name: "portalTarget", static: false, private: false, access: { has: obj => "portalTarget" in obj, get: obj => obj.portalTarget, set: (obj, value) => { obj.portalTarget = value; } }, metadata: _metadata }, _portalTarget_initializers, _portalTarget_extraInitializers);
+            __esDecorate(null, null, _portalPosition_decorators, { kind: "field", name: "portalPosition", static: false, private: false, access: { has: obj => "portalPosition" in obj, get: obj => obj.portalPosition, set: (obj, value) => { obj.portalPosition = value; } }, metadata: _metadata }, _portalPosition_initializers, _portalPosition_extraInitializers);
+            __esDecorate(null, null, _exposedHost_decorators, { kind: "field", name: "exposedHost", static: false, private: false, access: { has: obj => "exposedHost" in obj, get: obj => obj.exposedHost, set: (obj, value) => { obj.exposedHost = value; } }, metadata: _metadata }, _exposedHost_initializers, _exposedHost_extraInitializers);
+            __esDecorate(null, null, _closeOnOutside_decorators, { kind: "field", name: "closeOnOutside", static: false, private: false, access: { has: obj => "closeOnOutside" in obj, get: obj => obj.closeOnOutside, set: (obj, value) => { obj.closeOnOutside = value; } }, metadata: _metadata }, _closeOnOutside_initializers, _closeOnOutside_extraInitializers);
+            __esDecorate(null, null, _closeOnEscape_decorators, { kind: "field", name: "closeOnEscape", static: false, private: false, access: { has: obj => "closeOnEscape" in obj, get: obj => obj.closeOnEscape, set: (obj, value) => { obj.closeOnEscape = value; } }, metadata: _metadata }, _closeOnEscape_initializers, _closeOnEscape_extraInitializers);
+            __esDecorate(null, null, _matchAnchorWidth_decorators, { kind: "field", name: "matchAnchorWidth", static: false, private: false, access: { has: obj => "matchAnchorWidth" in obj, get: obj => obj.matchAnchorWidth, set: (obj, value) => { obj.matchAnchorWidth = value; } }, metadata: _metadata }, _matchAnchorWidth_initializers, _matchAnchorWidth_extraInitializers);
+            __esDecorate(null, null, _focusOnOpen_decorators, { kind: "field", name: "focusOnOpen", static: false, private: false, access: { has: obj => "focusOnOpen" in obj, get: obj => obj.focusOnOpen, set: (obj, value) => { obj.focusOnOpen = value; } }, metadata: _metadata }, _focusOnOpen_initializers, _focusOnOpen_extraInitializers);
+            __esDecorate(null, null, _restoreFocus_decorators, { kind: "field", name: "restoreFocus", static: false, private: false, access: { has: obj => "restoreFocus" in obj, get: obj => obj.restoreFocus, set: (obj, value) => { obj.restoreFocus = value; } }, metadata: _metadata }, _restoreFocus_initializers, _restoreFocus_extraInitializers);
+            __esDecorate(null, null, _closeOnSelect_decorators, { kind: "field", name: "closeOnSelect", static: false, private: false, access: { has: obj => "closeOnSelect" in obj, get: obj => obj.closeOnSelect, set: (obj, value) => { obj.closeOnSelect = value; } }, metadata: _metadata }, _closeOnSelect_initializers, _closeOnSelect_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiMenu = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        element = resolve(INode);
+        slotHost = this;
+        popup;
+        open = __runInitializers(this, _open_initializers, false);
+        openChanged(newValue) {
+            if (newValue && this.focusOnOpen) {
+                this.focus();
+            }
+        }
+        anchor = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _anchor_initializers, void 0));
+        tabReference = (__runInitializers(this, _anchor_extraInitializers), __runInitializers(this, _tabReference_initializers, void 0));
+        placement = (__runInitializers(this, _tabReference_extraInitializers), __runInitializers(this, _placement_initializers, 'bottom-start'));
+        offset = (__runInitializers(this, _placement_extraInitializers), __runInitializers(this, _offset_initializers, 6));
+        portalTarget = (__runInitializers(this, _offset_extraInitializers), __runInitializers(this, _portalTarget_initializers, void 0));
+        portalPosition = (__runInitializers(this, _portalTarget_extraInitializers), __runInitializers(this, _portalPosition_initializers, 'beforeend'));
+        exposedHost = (__runInitializers(this, _portalPosition_extraInitializers), __runInitializers(this, _exposedHost_initializers, void 0));
+        closeOnOutside = (__runInitializers(this, _exposedHost_extraInitializers), __runInitializers(this, _closeOnOutside_initializers, true));
+        closeOnEscape = (__runInitializers(this, _closeOnOutside_extraInitializers), __runInitializers(this, _closeOnEscape_initializers, true));
+        matchAnchorWidth = (__runInitializers(this, _closeOnEscape_extraInitializers), __runInitializers(this, _matchAnchorWidth_initializers, false));
+        focusOnOpen = (__runInitializers(this, _matchAnchorWidth_extraInitializers), __runInitializers(this, _focusOnOpen_initializers, true));
+        restoreFocus = (__runInitializers(this, _focusOnOpen_extraInitializers), __runInitializers(this, _restoreFocus_initializers, true));
+        closeOnSelect = (__runInitializers(this, _restoreFocus_extraInitializers), __runInitializers(this, _closeOnSelect_initializers, true));
+        get effectiveSlotHost() {
+            return this.exposedHost ?? this.slotHost;
+        }
+        onListSelect(event) {
+            this.element.dispatchEvent(new CustomEvent('menu-select', {
+                bubbles: true,
+                detail: event.detail
+            }));
+            if (this.closeOnSelect) {
+                this.open = false;
+            }
+        }
+        onPopupTabAway(event) {
+            this.element.dispatchEvent(new CustomEvent('menu-tab-away', {
+                bubbles: true,
+                detail: event.detail
+            }));
+        }
+        focus(key = Keys.Home) {
+            const list = this.popup.panelElement?.querySelector('ui-list');
+            if (!list) {
+                this.popup.focus();
+                return;
+            }
+            const listViewModel = CustomElement.for(list).viewModel;
+            if (key === Keys.End) {
+                listViewModel.focusLast();
+            }
+            else {
+                listViewModel.focusFirst();
+            }
+        }
+        contains(target) {
+            return this.popup.contains(target);
+        }
+        constructor() {
+            __runInitializers(this, _closeOnSelect_extraInitializers);
+        }
+    };
+    return UiMenu = _classThis;
+})();
+export { UiMenu };
+//# sourceMappingURL=ui-menu.js.map

package/dist/menu/ui-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-menu.js","sourceRoot":"","sources":["../../src/menu/ui-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, CustomElement, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { Keys } from '../base/keys';\nimport { UiList } from '../list/ui-list';\nimport { UiPopup } from '../popup/ui-popup';\nimport template from './ui-menu.html?raw';\n\r\ntype MenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';\r\n\r\n@customElement({ name: 'ui-menu', template })\r\nexport class UiMenu {\n  readonly element = resolve(INode) as HTMLElement;\n  readonly slotHost = this;\n  popup!: UiPopup;\n\n  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })\n  open: boolean = false;\n  openChanged(newValue: boolean): void {\n    if (newValue && this.focusOnOpen) {\n      this.focus();\n    }\n  }\n\n  @bindable\n  anchor: Element | undefined;\n\n  @bindable\n  tabReference: HTMLElement | undefined;\n\n  @bindable\n  placement: MenuPlacement = 'bottom-start';\n\n  @bindable\n  offset: number = 6;\n\r\n  @bindable\r\n  portalTarget: string | Element | null | undefined;\r\n\r\n  @bindable\n  portalPosition: InsertPosition = 'beforeend';\n\n  @bindable\n  exposedHost: unknown;\n\r\n  @bindable({ set: booleanAttr })\r\n  closeOnOutside: boolean = true;\r\n\r\n  @bindable({ set: booleanAttr })\r\n  closeOnEscape: boolean = true;\r\n\r\n  @bindable({ set: booleanAttr })\n  matchAnchorWidth: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  focusOnOpen: boolean = true;\n\n  @bindable({ set: booleanAttr })\n  restoreFocus: boolean = true;\n\n  @bindable({ set: booleanAttr })\n  closeOnSelect: boolean = true;\n\n  get effectiveSlotHost(): unknown {\n    return this.exposedHost ?? this.slotHost;\n  }\n\n  onListSelect(event: Event): void {\n    this.element.dispatchEvent(new CustomEvent('menu-select', {\n      bubbles: true,\n      detail: (event as CustomEvent).detail\n    }));\r\n\r\n    if (this.closeOnSelect) {\r\n      this.open = false;\n    }\n  }\n\n  onPopupTabAway(event: CustomEvent): void {\n    this.element.dispatchEvent(new CustomEvent('menu-tab-away', {\n      bubbles: true,\n      detail: event.detail\n    }));\n  }\n\n  focus(key: Keys.Home | Keys.End = Keys.Home): void {\n    const list = this.popup.panelElement?.querySelector('ui-list') as HTMLElement | null;\n    if (!list) {\n      this.popup.focus();\n      return;\n    }\n\n    const listViewModel = CustomElement.for<UiList>(list).viewModel;\n    if (key === Keys.End) {\n      listViewModel.focusLast();\n    } else {\n      listViewModel.focusFirst();\n    }\n  }\n\n  contains(target: Node): boolean {\n    return this.popup.contains(target);\n  }\n}\n"]}

package/dist/popup/ui-popup.html

@@ -0,0 +1,16 @@
+<template class="ui-popup" data-open.attr="open ? '' : null">
+  <div portal="target.bind: portalTarget; position.bind: portalPosition">
+    <div class="ui-popup__panel"
+      ref="panelElement"
+      id.bind="panelId"
+      role.bind="panelRole"
+      tabindex="-1"
+      list-select.trigger="onListSelect($event)"
+      show.bind="open"
+      style.bind="panelStyle"
+      data-role.attr="panelRole"
+      data-open.attr="open ? '' : null">
+      <au-slot expose.bind="effectiveSlotHost"></au-slot>
+    </div>
+  </div>
+</template>