@aurelia-ui-toolkits/headless 1.0.0

package/dist/combobox/enhance-ui-combobox.js

@@ -0,0 +1,26 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { templateCompilerHooks } from 'aurelia';
+let EnhanceUiCombobox = (() => {
+    let _classDecorators = [templateCompilerHooks];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var EnhanceUiCombobox = 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);
+            EnhanceUiCombobox = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        compiling(template) {
+            template.innerHTML = template.innerHTML
+                .replaceAll('<ui-combobox ', '<label as-element="ui-combobox" ui-combobox-element ')
+                .replaceAll('</ui-combobox>', '</label>');
+        }
+    };
+    return EnhanceUiCombobox = _classThis;
+})();
+export { EnhanceUiCombobox };
+//# sourceMappingURL=enhance-ui-combobox.js.map

package/dist/combobox/enhance-ui-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhance-ui-combobox.js","sourceRoot":"","sources":["../../src/combobox/enhance-ui-combobox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;IAGnC,iBAAiB;4BAD7B,qBAAqB;;;;;;;;YACtB,6KAMC;;;YANY,uDAAiB;;QAC5B,SAAS,CAAC,QAA2C;YACnD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS;iBACpC,UAAU,CAAC,eAAe,EAAE,sDAAsD,CAAC;iBACnF,UAAU,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;QAC9C,CAAC;;;;SALU,iBAAiB","sourcesContent":["import { templateCompilerHooks } from 'aurelia';\n\n@templateCompilerHooks\nexport class EnhanceUiCombobox {\n  compiling(template: HTMLElement | HTMLTemplateElement) {\n    template.innerHTML = template.innerHTML\n      .replaceAll('<ui-combobox ', '<label as-element=\"ui-combobox\" ui-combobox-element ')\n      .replaceAll('</ui-combobox>', '</label>');\n  }\n}\n"]}

package/dist/combobox/ui-combobox.html

@@ -0,0 +1,76 @@
+<template class="ui-combobox"
+  data-disabled.attr="disabled ? '' : null"
+  data-invalid.attr="invalid || errors.size ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-open.attr="open ? '' : null"
+  data-inset.attr="inset ? '' : null"
+  data-has-value.attr="hasValue ? '' : null">
+  <label class="ui-combobox__label"
+    for.bind="id"
+    id.bind="!inset && label ? labelId : null"
+    show.bind="label && !inset">${label}</label>
+
+  <div class="ui-combobox__control" ref="controlEl">
+    <span class="ui-combobox__leading" show.bind="leadingNodes.length">
+      <au-slot name="leading"></au-slot>
+    </span>
+
+    <span class="ui-combobox__inset-label"
+      id.bind="inset && label ? labelId : null"
+      show.bind="label && inset">${label}</span>
+
+    <input ref="inputEl"
+      class="ui-combobox__native"
+      id.bind="id"
+      name.attr="name || null"
+      value.bind="textValue"
+      placeholder.attr="placeholderText || null"
+      autocomplete.attr="autocomplete || null"
+      disabled.bind="disabled"
+      readonly.bind="readonly"
+      required.bind="required"
+      role="combobox"
+      aria-haspopup="listbox"
+      aria-expanded.attr="open ? 'true' : 'false'"
+      aria-labelledby.bind="label ? labelId : null"
+      aria-invalid.bind="invalid || errors.size ? 'true' : 'false'"
+      aria-describedby.bind="errors.size ? errorsId : (helperNodes.length ? helperId : null)"
+      input.trigger="onInput()"
+      keydown.trigger="onKeyDown($event)"
+      focusin.trigger="onFocusIn()"
+      focusout.trigger="onFocusOut($event)"
+      pointerdown.trigger="onPointerDown()"
+      pointerup.trigger="onPointerUp()"
+      pointerleave.trigger="onPointerLeave()">
+
+    <span class="ui-combobox__trailing">
+      <au-slot name="trailing">
+        <span class="ui-combobox__chevron" aria-hidden="true"></span>
+      </au-slot>
+    </span>
+  </div>
+
+  <ui-menu component.ref="menu"
+    open.bind="open"
+    anchor.bind="controlEl"
+    tab-reference.bind="inputEl"
+    match-anchor-width
+    focus-on-open.bind="false"
+    restore-focus.bind="false"
+    exposed-host.bind="slotHost"
+    menu-tab-away.trigger="onMenuTabAway()"
+    menu-select.trigger="onMenuSelect($event)">
+    <au-slot expose.bind="slotHost"></au-slot>
+  </ui-menu>
+
+  <div class="ui-combobox__subscript" show.bind="errors.size || helperText || helperNodes.length">
+    <div class="ui-combobox__helper" id.bind="helperId" show.bind="!errors.size && (helperText || helperNodes.length)">
+      <au-slot name="helper">${helperText}</au-slot>
+    </div>
+
+    <div class="ui-combobox__errors" id.bind="errorsId" show.bind="errors.size">
+      <div class="ui-combobox__error" repeat.for="[error, _] of errors" if.bind="error.message">${error.message}</div>
+    </div>
+  </div>
+</template>

package/dist/combobox/ui-combobox.js

@@ -0,0 +1,478 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, CustomElement, customElement, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-combobox.html?raw';
+let nextComboboxId = 0;
+let UiCombobox = (() => {
+    let _classDecorators = [customElement({ name: 'ui-combobox', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _text_decorators;
+    let _text_initializers = [];
+    let _text_extraInitializers = [];
+    let _items_decorators;
+    let _items_initializers = [];
+    let _items_extraInitializers = [];
+    let _filteredItems_decorators;
+    let _filteredItems_initializers = [];
+    let _filteredItems_extraInitializers = [];
+    let _filterField_decorators;
+    let _filterField_initializers = [];
+    let _filterField_extraInitializers = [];
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _inset_decorators;
+    let _inset_initializers = [];
+    let _inset_extraInitializers = [];
+    let _helperText_decorators;
+    let _helperText_initializers = [];
+    let _helperText_extraInitializers = [];
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _autocomplete_decorators;
+    let _autocomplete_initializers = [];
+    let _autocomplete_extraInitializers = [];
+    let _valueField_decorators;
+    let _valueField_initializers = [];
+    let _valueField_extraInitializers = [];
+    let _labelField_decorators;
+    let _labelField_initializers = [];
+    let _labelField_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _invalid_decorators;
+    let _invalid_initializers = [];
+    let _invalid_extraInitializers = [];
+    let _helperNodes_decorators;
+    let _helperNodes_initializers = [];
+    let _helperNodes_extraInitializers = [];
+    let _leadingNodes_decorators;
+    let _leadingNodes_initializers = [];
+    let _leadingNodes_extraInitializers = [];
+    let _trailingNodes_decorators;
+    let _trailingNodes_initializers = [];
+    let _trailingNodes_extraInitializers = [];
+    var UiCombobox = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _value_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _text_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _items_decorators = [bindable];
+            _filteredItems_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _filterField_decorators = [bindable];
+            _open_decorators = [bindable({ mode: BindingMode.twoWay, set: booleanAttr })];
+            _label_decorators = [bindable];
+            _inset_decorators = [bindable({ set: booleanAttr })];
+            _helperText_decorators = [bindable];
+            _id_decorators = [bindable];
+            _name_decorators = [bindable];
+            _placeholder_decorators = [bindable];
+            _autocomplete_decorators = [bindable];
+            _valueField_decorators = [bindable];
+            _labelField_decorators = [bindable];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _readonly_decorators = [bindable({ set: booleanAttr })];
+            _required_decorators = [bindable({ set: booleanAttr })];
+            _invalid_decorators = [bindable({ set: booleanAttr })];
+            _helperNodes_decorators = [slotted({ slotName: 'helper' })];
+            _leadingNodes_decorators = [slotted({ slotName: 'leading' })];
+            _trailingNodes_decorators = [slotted({ slotName: 'trailing' })];
+            __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, null, _text_decorators, { kind: "field", name: "text", static: false, private: false, access: { has: obj => "text" in obj, get: obj => obj.text, set: (obj, value) => { obj.text = value; } }, metadata: _metadata }, _text_initializers, _text_extraInitializers);
+            __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, _filteredItems_decorators, { kind: "field", name: "filteredItems", static: false, private: false, access: { has: obj => "filteredItems" in obj, get: obj => obj.filteredItems, set: (obj, value) => { obj.filteredItems = value; } }, metadata: _metadata }, _filteredItems_initializers, _filteredItems_extraInitializers);
+            __esDecorate(null, null, _filterField_decorators, { kind: "field", name: "filterField", static: false, private: false, access: { has: obj => "filterField" in obj, get: obj => obj.filterField, set: (obj, value) => { obj.filterField = value; } }, metadata: _metadata }, _filterField_initializers, _filterField_extraInitializers);
+            __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, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _inset_decorators, { kind: "field", name: "inset", static: false, private: false, access: { has: obj => "inset" in obj, get: obj => obj.inset, set: (obj, value) => { obj.inset = value; } }, metadata: _metadata }, _inset_initializers, _inset_extraInitializers);
+            __esDecorate(null, null, _helperText_decorators, { kind: "field", name: "helperText", static: false, private: false, access: { has: obj => "helperText" in obj, get: obj => obj.helperText, set: (obj, value) => { obj.helperText = value; } }, metadata: _metadata }, _helperText_initializers, _helperText_extraInitializers);
+            __esDecorate(null, null, _id_decorators, { kind: "field", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(null, null, _autocomplete_decorators, { kind: "field", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
+            __esDecorate(null, null, _valueField_decorators, { kind: "field", name: "valueField", static: false, private: false, access: { has: obj => "valueField" in obj, get: obj => obj.valueField, set: (obj, value) => { obj.valueField = value; } }, metadata: _metadata }, _valueField_initializers, _valueField_extraInitializers);
+            __esDecorate(null, null, _labelField_decorators, { kind: "field", name: "labelField", static: false, private: false, access: { has: obj => "labelField" in obj, get: obj => obj.labelField, set: (obj, value) => { obj.labelField = value; } }, metadata: _metadata }, _labelField_initializers, _labelField_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            __esDecorate(null, null, _required_decorators, { kind: "field", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(null, null, _invalid_decorators, { kind: "field", name: "invalid", static: false, private: false, access: { has: obj => "invalid" in obj, get: obj => obj.invalid, set: (obj, value) => { obj.invalid = value; } }, metadata: _metadata }, _invalid_initializers, _invalid_extraInitializers);
+            __esDecorate(null, null, _helperNodes_decorators, { kind: "field", name: "helperNodes", static: false, private: false, access: { has: obj => "helperNodes" in obj, get: obj => obj.helperNodes, set: (obj, value) => { obj.helperNodes = value; } }, metadata: _metadata }, _helperNodes_initializers, _helperNodes_extraInitializers);
+            __esDecorate(null, null, _leadingNodes_decorators, { kind: "field", name: "leadingNodes", static: false, private: false, access: { has: obj => "leadingNodes" in obj, get: obj => obj.leadingNodes, set: (obj, value) => { obj.leadingNodes = value; } }, metadata: _metadata }, _leadingNodes_initializers, _leadingNodes_extraInitializers);
+            __esDecorate(null, null, _trailingNodes_decorators, { kind: "field", name: "trailingNodes", static: false, private: false, access: { has: obj => "trailingNodes" in obj, get: obj => obj.trailingNodes, set: (obj, value) => { obj.trailingNodes = value; } }, metadata: _metadata }, _trailingNodes_initializers, _trailingNodes_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiCombobox = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor() {
+            defineUiComboboxElementApis(this.element);
+        }
+        element = resolve(Element);
+        slotHost = this;
+        errors = new Map();
+        focus = false;
+        active = false;
+        controlEl;
+        inputEl;
+        menu;
+        value = __runInitializers(this, _value_initializers, void 0);
+        async valueChanged() {
+            if (this.suppressValueChanged) {
+                this.suppressValueChanged = false;
+                return;
+            }
+            await this.updateFilterBasedOnValue();
+        }
+        text = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _text_initializers, void 0));
+        textChanged() {
+            if (this.inputEl && this.inputEl.value !== (this.text ?? '')) {
+                this.inputEl.value = this.text ?? '';
+            }
+        }
+        items = (__runInitializers(this, _text_extraInitializers), __runInitializers(this, _items_initializers, []));
+        async itemsChanged() {
+            this.setGetOptions();
+            await this.updateFilterBasedOnValue();
+        }
+        filteredItems = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _filteredItems_initializers, []));
+        selectedOption = __runInitializers(this, _filteredItems_extraInitializers);
+        filterField = __runInitializers(this, _filterField_initializers, void 0);
+        filterFieldChanged() { }
+        open = (__runInitializers(this, _filterField_extraInitializers), __runInitializers(this, _open_initializers, false));
+        label = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _label_initializers, void 0));
+        inset = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _inset_initializers, false));
+        helperText = (__runInitializers(this, _inset_extraInitializers), __runInitializers(this, _helperText_initializers, void 0));
+        id = (__runInitializers(this, _helperText_extraInitializers), __runInitializers(this, _id_initializers, `ui-combobox-${++nextComboboxId}`));
+        name = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _name_initializers, void 0));
+        placeholder = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _placeholder_initializers, void 0));
+        autocomplete = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _autocomplete_initializers, void 0));
+        valueField = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _valueField_initializers, void 0));
+        labelField = (__runInitializers(this, _valueField_extraInitializers), __runInitializers(this, _labelField_initializers, void 0));
+        disabled = (__runInitializers(this, _labelField_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        readonly = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+        required = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _required_initializers, false));
+        invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
+        helperNodes = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _helperNodes_initializers, []));
+        leadingNodes = (__runInitializers(this, _helperNodes_extraInitializers), __runInitializers(this, _leadingNodes_initializers, []));
+        trailingNodes = (__runInitializers(this, _leadingNodes_extraInitializers), __runInitializers(this, _trailingNodes_initializers, []));
+        initialText = __runInitializers(this, _trailingNodes_extraInitializers);
+        getOptions;
+        optionsRequest = 0;
+        suppressValueChanged = false;
+        suppressFocusOpen = false;
+        get textValue() {
+            if (this.inputEl) {
+                return this.inputEl.value;
+            }
+            return this.initialText;
+        }
+        set textValue(value) {
+            this.text = value;
+            if (this.inputEl) {
+                this.inputEl.value = value ?? '';
+            }
+            else {
+                this.initialText = value;
+            }
+        }
+        get labelId() {
+            return `${this.id}-label`;
+        }
+        get helperId() {
+            return `${this.id}-helper`;
+        }
+        get errorsId() {
+            return `${this.id}-errors`;
+        }
+        get hasValue() {
+            return !!this.textValue;
+        }
+        get placeholderText() {
+            if (this.inset && !this.focus) {
+                return undefined;
+            }
+            return this.placeholder;
+        }
+        async attached() {
+            this.setGetOptions();
+            if (this.text !== undefined) {
+                this.textValue = this.text;
+            }
+            await this.updateFilterBasedOnValue();
+        }
+        addError(error) {
+            if (this.findError(error)) {
+                return;
+            }
+            this.errors.set(error, true);
+        }
+        removeError(error) {
+            const existing = this.findError(error);
+            if (existing) {
+                this.errors.delete(existing);
+                return;
+            }
+            this.errors.delete(error);
+        }
+        async onInput() {
+            this.text = this.inputEl.value;
+            this.selectedOption = undefined;
+            this.setValue(undefined);
+            this.open = true;
+            await this.loadOptions(true, undefined);
+            this.dispatchValueEvent('input');
+        }
+        async onKeyDown(event) {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            if (event.key === Keys.Tab) {
+                this.open = false;
+                return;
+            }
+            if (event.ctrlKey && event.key === Keys.Space) {
+                event.preventDefault();
+                await this.loadOptions(true, this.value);
+                return;
+            }
+            if (event.key === Keys.ArrowDown || event.key === Keys.ArrowUp) {
+                event.preventDefault();
+                await this.loadOptions(true, this.value);
+                this.menu.focus(event.key === Keys.ArrowDown ? Keys.Home : Keys.End);
+                return;
+            }
+            if (event.key === Keys.Escape) {
+                event.preventDefault();
+                this.open = false;
+            }
+        }
+        onMenuSelect(event) {
+            this.selectedOption = event.detail;
+            this.value = this.getItemValue(event.detail);
+            this.open = false;
+            this.suppressFocusOpen = true;
+            this.inputEl.focus();
+            this.dispatchValueEvent('input');
+            this.dispatchValueEvent('change');
+        }
+        onMenuTabAway() {
+            this.open = false;
+            this.focus = false;
+        }
+        async onFocusIn() {
+            if (this.suppressFocusOpen) {
+                this.suppressFocusOpen = false;
+                this.focus = true;
+                return;
+            }
+            if (!this.disabled) {
+                this.focus = true;
+                await this.loadOptions(true, this.value);
+            }
+        }
+        onFocusOut(event) {
+            const next = event.relatedTarget;
+            if (next && this.menu.contains(next)) {
+                event.stopPropagation();
+                return;
+            }
+            this.open = false;
+            this.focus = false;
+        }
+        onPointerDown() {
+            if (!this.disabled) {
+                this.active = true;
+            }
+        }
+        onPointerUp() {
+            this.active = false;
+        }
+        onPointerLeave() {
+            this.active = false;
+        }
+        getItemValue(item) {
+            if (this.valueField && item && typeof item === 'object') {
+                return item[this.valueField];
+            }
+            return item;
+        }
+        getItemLabel(item) {
+            const labelField = this.labelField ?? this.filterField;
+            if (labelField && item && typeof item === 'object') {
+                const label = item[labelField];
+                return label === undefined || label === null ? '' : String(label);
+            }
+            return item === undefined || item === null ? '' : String(item);
+        }
+        setValue(value) {
+            if (this.value === value) {
+                return;
+            }
+            this.suppressValueChanged = true;
+            this.value = value;
+        }
+        setGetOptions() {
+            if (this.items instanceof Function) {
+                this.getOptions = this.items;
+                return;
+            }
+            this.getOptions = this.getOptionsDefault;
+        }
+        getOptionsDefault = (filter, value) => {
+            const options = Array.isArray(this.items) ? this.items : [];
+            if (value !== undefined) {
+                const option = options.find(item => this.getItemValue(item) === value);
+                return option === undefined ? [] : [option];
+            }
+            const text = filter?.trim().toLowerCase();
+            if (!text) {
+                return options;
+            }
+            return options.filter(item => this.getItemFilterText(item).toLowerCase().includes(text));
+        };
+        async loadOptions(open, value) {
+            if (!this.getOptions) {
+                return;
+            }
+            const request = ++this.optionsRequest;
+            const options = await this.getOptions(this.textValue, value);
+            if (request !== this.optionsRequest) {
+                return;
+            }
+            this.filteredItems = options;
+            if (open) {
+                this.open = true;
+            }
+        }
+        async updateFilterBasedOnValue() {
+            if (this.value !== undefined) {
+                await this.loadOptions(false, this.value);
+            }
+            else {
+                this.filteredItems = [];
+            }
+            if (this.filteredItems.length) {
+                this.selectedOption = this.filteredItems[0];
+                this.textValue = this.getItemLabel(this.filteredItems[0]);
+            }
+            else if (this.value !== undefined) {
+                this.selectedOption = undefined;
+                this.textValue = undefined;
+            }
+            else {
+                this.selectedOption = undefined;
+            }
+        }
+        getItemFilterText(item) {
+            if (this.filterField && item && typeof item === 'object') {
+                const filterValue = item[this.filterField];
+                return filterValue === undefined || filterValue === null ? '' : String(filterValue);
+            }
+            return this.getItemLabel(item);
+        }
+        dispatchValueEvent(type) {
+            this.element.dispatchEvent(new Event(type, { bubbles: true }));
+        }
+        findError(error) {
+            for (const existing of this.errors.keys()) {
+                if (existing === error || existing.message === error.message) {
+                    return existing;
+                }
+            }
+            return undefined;
+        }
+    };
+    return UiCombobox = _classThis;
+})();
+export { UiCombobox };
+function defineUiComboboxElementApis(element) {
+    Object.defineProperties(element, {
+        tagName: {
+            get() {
+                return 'UI-COMBOBOX';
+            }
+        },
+        value: {
+            get() {
+                return CustomElement.for(this).viewModel.value;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.value = value;
+            },
+            configurable: true
+        },
+        disabled: {
+            get() {
+                return CustomElement.for(this).viewModel.disabled;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.disabled = value;
+            },
+            configurable: true
+        },
+        readOnly: {
+            get() {
+                return CustomElement.for(this).viewModel.readonly;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.readonly = value;
+            },
+            configurable: true
+        },
+        addError: {
+            value(error) {
+                CustomElement.for(this).viewModel.addError(error);
+            },
+            configurable: true
+        },
+        removeError: {
+            value(error) {
+                CustomElement.for(this).viewModel.removeError(error);
+            },
+            configurable: true
+        },
+        focus: {
+            value() {
+                CustomElement.for(this).viewModel.inputEl.focus();
+            },
+            configurable: true
+        },
+        blur: {
+            value() {
+                CustomElement.for(this).viewModel.inputEl.blur();
+            },
+            configurable: true
+        },
+        isFocused: {
+            get() {
+                return document.activeElement === CustomElement.for(this).viewModel.inputEl;
+            },
+            configurable: true
+        }
+    });
+}
+//# sourceMappingURL=ui-combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui-combobox.js","sourceRoot":"","sources":["../../src/combobox/ui-combobox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAE9C,IAAI,cAAc,GAAG,CAAC,CAAC;IAIV,UAAU;4BADtB,aAAa,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAgB9C,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;gCAWtC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;iCAQtC,QAAQ;yCAOR,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;uCAKtC,QAAQ;gCAIR,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;iCAGxD,QAAQ;iCAGR,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;sCAG9B,QAAQ;8BAGR,QAAQ;gCAGR,QAAQ;uCAGR,QAAQ;wCAGR,QAAQ;sCAGR,QAAQ;sCAGR,QAAQ;oCAGR,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;oCAG9B,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;oCAG9B,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;mCAG9B,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;uCAG9B,OAAO,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;wCAG/B,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;yCAGhC,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;YAlFlC,iKAAA,KAAK,6BAAL,KAAK,qFAAU;YAWf,8JAAA,IAAI,6BAAJ,IAAI,mFAAqB;YAQzB,iKAAA,KAAK,6BAAL,KAAK,qFAAuB;YAO5B,yLAAA,aAAa,6BAAb,aAAa,qGAAiB;YAK9B,mLAAA,WAAW,6BAAX,WAAW,iGAAqB;YAIhC,8JAAA,IAAI,6BAAJ,IAAI,mFAAkB;YAGtB,iKAAA,KAAK,6BAAL,KAAK,qFAAqB;YAG1B,iKAAA,KAAK,6BAAL,KAAK,qFAAkB;YAGvB,gLAAA,UAAU,6BAAV,UAAU,+FAAqB;YAG/B,wJAAA,EAAE,6BAAF,EAAE,+EAA6C;YAG/C,8JAAA,IAAI,6BAAJ,IAAI,mFAAqB;YAGzB,mLAAA,WAAW,6BAAX,WAAW,iGAAqB;YAGhC,sLAAA,YAAY,6BAAZ,YAAY,mGAAuB;YAGnC,gLAAA,UAAU,6BAAV,UAAU,+FAAqB;YAG/B,gLAAA,UAAU,6BAAV,UAAU,+FAAqB;YAG/B,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAG1B,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAG1B,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAG1B,uKAAA,OAAO,6BAAP,OAAO,yFAAkB;YAGzB,mLAAA,WAAW,6BAAX,WAAW,iGAAuB;YAGlC,sLAAA,YAAY,6BAAZ,YAAY,mGAAuB;YAGnC,yLAAA,aAAa,6BAAb,aAAa,qGAAuB;YAnGtC,6KA+WC;;;YA/WY,uDAAU;;QACrB;YACE,2BAA2B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5C,CAAC;QAEQ,OAAO,GAAG,OAAO,CAAC,OAAO,CAAgB,CAAC;QAC1C,QAAQ,GAAG,IAAI,CAAC;QAEzB,MAAM,GAAG,IAAI,GAAG,EAAmB,CAAC;QACpC,KAAK,GAAY,KAAK,CAAC;QACvB,MAAM,GAAY,KAAK,CAAC;QACxB,SAAS,CAAe;QACxB,OAAO,CAAoB;QAC3B,IAAI,CAAU;QAGd,KAAK,wDAAU;QACf,KAAK,CAAC,YAAY;YAChB,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC9B,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;gBAClC,OAAO;YACT,CAAC;YAED,MAAM,IAAI,CAAC,wBAAwB,EAAE,CAAC;QACxC,CAAC;QAGD,IAAI,4GAAqB;QACzB,WAAW;YACT,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,CAAC;gBAC7D,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;YACvC,CAAC;QACH,CAAC;QAGD,KAAK,mGAAoB,EAAE,GAAC;QAC5B,KAAK,CAAC,YAAY;YAChB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,MAAM,IAAI,CAAC,wBAAwB,EAAE,CAAC;QACxC,CAAC;QAGD,aAAa,4GAAc,EAAE,GAAC;QAE9B,cAAc,6DAAU;QAGxB,WAAW,8DAAqB;QAChC,kBAAkB,KAAU,CAAC;QAG7B,IAAI,yGAAY,KAAK,GAAC;QAGtB,KAAK,4GAAqB;QAG1B,KAAK,oGAAY,KAAK,GAAC;QAGvB,UAAU,kHAAqB;QAG/B,EAAE,sGAAW,eAAe,EAAE,cAAc,EAAE,GAAC;QAG/C,IAAI,yGAAqB;QAGzB,WAAW,kHAAqB;QAGhC,YAAY,0HAAuB;QAGnC,UAAU,yHAAqB;QAG/B,UAAU,uHAAqB;QAG/B,QAAQ,4GAAY,KAAK,GAAC;QAG1B,QAAQ,0GAAY,KAAK,GAAC;QAG1B,QAAQ,0GAAY,KAAK,GAAC;QAG1B,OAAO,yGAAY,KAAK,GAAC;QAGzB,WAAW,4GAAoB,EAAE,GAAC;QAGlC,YAAY,iHAAoB,EAAE,GAAC;QAGnC,aAAa,mHAAoB,EAAE,GAAC;QAE5B,WAAW,6DAAqB;QAChC,UAAU,CAA+F;QACzG,cAAc,GAAG,CAAC,CAAC;QACnB,oBAAoB,GAAG,KAAK,CAAC;QAC7B,iBAAiB,GAAG,KAAK,CAAC;QAClC,IAAI,SAAS;YACX,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;YAC5B,CAAC;YACD,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QACD,IAAI,SAAS,CAAC,KAAyB;YACrC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC;QACH,CAAC;QAED,IAAI,OAAO;YACT,OAAO,GAAG,IAAI,CAAC,EAAE,QAAQ,CAAC;QAC5B,CAAC;QAED,IAAI,QAAQ;YACV,OAAO,GAAG,IAAI,CAAC,EAAE,SAAS,CAAC;QAC7B,CAAC;QAED,IAAI,QAAQ;YACV,OAAO,GAAG,IAAI,CAAC,EAAE,SAAS,CAAC;QAC7B,CAAC;QAED,IAAI,QAAQ;YACV,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,IAAI,eAAe;YACjB,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC9B,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QAED,KAAK,CAAC,QAAQ;YACZ,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;gBAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;YAC7B,CAAC;YACD,MAAM,IAAI,CAAC,wBAAwB,EAAE,CAAC;QACxC,CAAC;QAED,QAAQ,CAAC,KAAa;YACpB,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC/B,CAAC;QAED,WAAW,CAAC,KAAa;YACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACvC,IAAI,QAAQ,EAAE,CAAC;gBACb,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;gBAC7B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;QAED,KAAK,CAAC,OAAO;YACX,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;YAChC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;YACxC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC;QAED,KAAK,CAAC,SAAS,CAAC,KAAoB;YAClC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnC,OAAO;YACT,CAAC;YAED,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;gBAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,OAAO;YACT,CAAC;YAED,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC/D,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACrE,OAAO;YACT,CAAC;YAED,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;gBAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC;QACH,CAAC;QAED,YAAY,CAAC,KAAkB;YAC7B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;YACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YACrB,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;YACjC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;QACpC,CAAC;QAED,aAAa;YACX,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,KAAK,CAAC,SAAS;YACb,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;gBAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAClB,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;QAED,UAAU,CAAC,KAAiB;YAC1B,MAAM,IAAI,GAAG,KAAK,CAAC,aAA4B,CAAC;YAChD,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBACrC,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,aAAa;YACX,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;QAED,WAAW;YACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QAED,cAAc;YACZ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QAEO,YAAY,CAAC,IAAa;YAChC,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACxD,OAAQ,IAAgC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC5D,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QAEO,YAAY,CAAC,IAAa;YAChC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,CAAC;YACvD,IAAI,UAAU,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACnD,MAAM,KAAK,GAAI,IAAgC,CAAC,UAAU,CAAC,CAAC;gBAC5D,OAAO,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACpE,CAAC;YACD,OAAO,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjE,CAAC;QAEO,QAAQ,CAAC,KAAc;YAC7B,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;gBACzB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAEO,aAAa;YACnB,IAAI,IAAI,CAAC,KAAK,YAAY,QAAQ,EAAE,CAAC;gBACnC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;gBAC7B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAC3C,CAAC;QAEO,iBAAiB,GAAG,CAAC,MAA0B,EAAE,KAAc,EAAa,EAAE;YACpF,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YAC5D,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC;gBACvE,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAC9C,CAAC;YAED,MAAM,IAAI,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;YAC1C,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO,OAAO,CAAC;YACjB,CAAC;YAED,OAAO,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3F,CAAC,CAAC;QAEM,KAAK,CAAC,WAAW,CAAC,IAAa,EAAE,KAAc;YACrD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrB,OAAO;YACT,CAAC;YAED,MAAM,OAAO,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC;YACtC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAC7D,IAAI,OAAO,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;gBACpC,OAAO;YACT,CAAC;YAED,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;YAC7B,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACnB,CAAC;QACH,CAAC;QAEO,KAAK,CAAC,wBAAwB;YACpC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC7B,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;YAC1B,CAAC;YAED,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;gBAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5D,CAAC;iBAAM,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBACpC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;gBAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;YAClC,CAAC;QACH,CAAC;QAEO,iBAAiB,CAAC,IAAa;YACrC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACzD,MAAM,WAAW,GAAI,IAAgC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACxE,OAAO,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YACtF,CAAC;YAED,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;QAEO,kBAAkB,CAAC,IAAwB;YACjD,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACjE,CAAC;QAEO,SAAS,CAAC,KAAa;YAC7B,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC;gBAC1C,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,CAAC,OAAO,KAAK,KAAK,CAAC,OAAO,EAAE,CAAC;oBAC7D,OAAO,QAAQ,CAAC;gBAClB,CAAC;YACH,CAAC;YAED,OAAO,SAAS,CAAC;QACnB,CAAC;;;;SA9WU,UAAU;AAqXvB,SAAS,2BAA2B,CAAC,OAAoB;IACvD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC/B,OAAO,EAAE;YACP,GAAG;gBACD,OAAO,aAAa,CAAC;YACvB,CAAC;SACF;QACD,KAAK,EAAE;YACL,GAAG;gBACD,OAAO,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;YAC7D,CAAC;YACD,GAAG,CAA2B,KAAc;gBAC1C,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;YAC9D,CAAC;YACD,YAAY,EAAE,IAAI;SACnB;QACD,QAAQ,EAAE;YACR,GAAG;gBACD,OAAO,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC;YAChE,CAAC;YACD,GAAG,CAA2B,KAAc;gBAC1C,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC;YACjE,CAAC;YACD,YAAY,EAAE,IAAI;SACnB;QACD,QAAQ,EAAE;YACR,GAAG;gBACD,OAAO,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC;YAChE,CAAC;YACD,GAAG,CAA2B,KAAc;gBAC1C,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC;YACjE,CAAC;YACD,YAAY,EAAE,IAAI;SACnB;QACD,QAAQ,EAAE;YACR,KAAK,CAA2B,KAAa;gBAC3C,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChE,CAAC;YACD,YAAY,EAAE,IAAI;SACnB;QACD,WAAW,EAAE;YACX,KAAK,CAA2B,KAAa;gBAC3C,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACnE,CAAC;YACD,YAAY,EAAE,IAAI;SACnB;QACD,KAAK,EAAE;YACL,KAAK;gBACH,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAChE,CAAC;YACD,YAAY,EAAE,IAAI;SACnB;QACD,IAAI,EAAE;YACJ,KAAK;gBACH,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC/D,CAAC;YACD,YAAY,EAAE,IAAI;SACnB;QACD,SAAS,EAAE;YACT,GAAG;gBACD,OAAO,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,CAAa,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC;YAC1F,CAAC;YACD,YAAY,EAAE,IAAI;SACnB;KACF,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { bindable, BindingMode, CustomElement, customElement, resolve, slotted } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { IError, IValidatedElement } from '../base/i-validated-element';\nimport { Keys } from '../base/keys';\nimport { UiMenu } from '../menu/ui-menu';\nimport template from './ui-combobox.html?raw';\n\nlet nextComboboxId = 0;\ntype ComboboxOptions = unknown[] | ((filter: string | undefined, value: unknown) => unknown[] | Promise<unknown[]>);\n\n@customElement({ name: 'ui-combobox', template })\nexport class UiCombobox {\n  constructor() {\n    defineUiComboboxElementApis(this.element);\n  }\n\n  readonly element = resolve(Element) as HTMLElement;\n  readonly slotHost = this;\n\n  errors = new Map<IError, boolean>();\n  focus: boolean = false;\n  active: boolean = false;\n  controlEl!: HTMLElement;\n  inputEl!: HTMLInputElement;\n  menu!: UiMenu;\n\n  @bindable({ mode: BindingMode.twoWay })\n  value: unknown;\n  async valueChanged(): Promise<void> {\n    if (this.suppressValueChanged) {\n      this.suppressValueChanged = false;\n      return;\n    }\n\n    await this.updateFilterBasedOnValue();\n  }\n\n  @bindable({ mode: BindingMode.twoWay })\n  text: string | undefined;\n  textChanged(): void {\n    if (this.inputEl && this.inputEl.value !== (this.text ?? '')) {\n      this.inputEl.value = this.text ?? '';\n    }\n  }\n\n  @bindable\n  items: ComboboxOptions = [];\n  async itemsChanged(): Promise<void> {\n    this.setGetOptions();\n    await this.updateFilterBasedOnValue();\n  }\n\n  @bindable({ mode: BindingMode.twoWay })\n  filteredItems: unknown[] = [];\n\n  selectedOption: unknown;\n\n  @bindable\n  filterField: string | undefined;\n  filterFieldChanged(): void {}\n\n  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })\n  open: boolean = false;\n\n  @bindable\n  label: string | undefined;\n\n  @bindable({ set: booleanAttr })\n  inset: boolean = false;\n\n  @bindable\n  helperText: string | undefined;\n\n  @bindable\n  id: string = `ui-combobox-${++nextComboboxId}`;\n\n  @bindable\n  name: string | undefined;\n\n  @bindable\n  placeholder: string | undefined;\n\n  @bindable\n  autocomplete: AutoFill | undefined;\n\n  @bindable\n  valueField: string | undefined;\n\n  @bindable\n  labelField: string | undefined;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  readonly: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  required: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  invalid: boolean = false;\n\n  @slotted({ slotName: 'helper' })\n  helperNodes: readonly Node[] = [];\n\n  @slotted({ slotName: 'leading' })\n  leadingNodes: readonly Node[] = [];\n\n  @slotted({ slotName: 'trailing' })\n  trailingNodes: readonly Node[] = [];\n\n  private initialText: string | undefined;\n  private getOptions: ((filter: string | undefined, value: unknown) => unknown[] | Promise<unknown[]>) | undefined;\n  private optionsRequest = 0;\n  private suppressValueChanged = false;\n  private suppressFocusOpen = false;\n  get textValue(): string | undefined {\n    if (this.inputEl) {\n      return this.inputEl.value;\n    }\n    return this.initialText;\n  }\n  set textValue(value: string | undefined) {\n    this.text = value;\n    if (this.inputEl) {\n      this.inputEl.value = value ?? '';\n    } else {\n      this.initialText = value;\n    }\n  }\n\n  get labelId(): string {\n    return `${this.id}-label`;\n  }\n\n  get helperId(): string {\n    return `${this.id}-helper`;\n  }\n\n  get errorsId(): string {\n    return `${this.id}-errors`;\n  }\n\n  get hasValue(): boolean {\n    return !!this.textValue;\n  }\n\n  get placeholderText(): string | undefined {\n    if (this.inset && !this.focus) {\n      return undefined;\n    }\n    return this.placeholder;\n  }\n\n  async attached(): Promise<void> {\n    this.setGetOptions();\n    if (this.text !== undefined) {\n      this.textValue = this.text;\n    }\n    await this.updateFilterBasedOnValue();\n  }\n\n  addError(error: IError): void {\n    if (this.findError(error)) {\n      return;\n    }\n\n    this.errors.set(error, true);\n  }\n\n  removeError(error: IError): void {\n    const existing = this.findError(error);\n    if (existing) {\n      this.errors.delete(existing);\n      return;\n    }\n\n    this.errors.delete(error);\n  }\n\n  async onInput(): Promise<void> {\n    this.text = this.inputEl.value;\n    this.selectedOption = undefined;\n    this.setValue(undefined);\n    this.open = true;\n    await this.loadOptions(true, undefined);\n    this.dispatchValueEvent('input');\n  }\n\n  async onKeyDown(event: KeyboardEvent): Promise<void> {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === Keys.Tab) {\n      this.open = false;\n      return;\n    }\n\n    if (event.ctrlKey && event.key === Keys.Space) {\n      event.preventDefault();\n      await this.loadOptions(true, this.value);\n      return;\n    }\n\n    if (event.key === Keys.ArrowDown || event.key === Keys.ArrowUp) {\n      event.preventDefault();\n      await this.loadOptions(true, this.value);\n      this.menu.focus(event.key === Keys.ArrowDown ? Keys.Home : Keys.End);\n      return;\n    }\n\n    if (event.key === Keys.Escape) {\n      event.preventDefault();\n      this.open = false;\n    }\n  }\n\n  onMenuSelect(event: CustomEvent): void {\n    this.selectedOption = event.detail;\n    this.value = this.getItemValue(event.detail);\n    this.open = false;\n    this.suppressFocusOpen = true;\n    this.inputEl.focus();\n    this.dispatchValueEvent('input');\n    this.dispatchValueEvent('change');\n  }\n\n  onMenuTabAway(): void {\n    this.open = false;\n    this.focus = false;\n  }\n\n  async onFocusIn(): Promise<void> {\n    if (this.suppressFocusOpen) {\n      this.suppressFocusOpen = false;\n      this.focus = true;\n      return;\n    }\n\n    if (!this.disabled) {\n      this.focus = true;\n      await this.loadOptions(true, this.value);\n    }\n  }\n\n  onFocusOut(event: FocusEvent): void {\n    const next = event.relatedTarget as Node | null;\n    if (next && this.menu.contains(next)) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.open = false;\n    this.focus = false;\n  }\n\n  onPointerDown(): void {\n    if (!this.disabled) {\n      this.active = true;\n    }\n  }\n\n  onPointerUp(): void {\n    this.active = false;\n  }\n\n  onPointerLeave(): void {\n    this.active = false;\n  }\n\n  private getItemValue(item: unknown): unknown {\n    if (this.valueField && item && typeof item === 'object') {\n      return (item as Record<string, unknown>)[this.valueField];\n    }\n    return item;\n  }\n\n  private getItemLabel(item: unknown): string {\n    const labelField = this.labelField ?? this.filterField;\n    if (labelField && item && typeof item === 'object') {\n      const label = (item as Record<string, unknown>)[labelField];\n      return label === undefined || label === null ? '' : String(label);\n    }\n    return item === undefined || item === null ? '' : String(item);\n  }\n\n  private setValue(value: unknown): void {\n    if (this.value === value) {\n      return;\n    }\n\n    this.suppressValueChanged = true;\n    this.value = value;\n  }\n\n  private setGetOptions(): void {\n    if (this.items instanceof Function) {\n      this.getOptions = this.items;\n      return;\n    }\n\n    this.getOptions = this.getOptionsDefault;\n  }\n\n  private getOptionsDefault = (filter: string | undefined, value: unknown): unknown[] => {\n    const options = Array.isArray(this.items) ? this.items : [];\n    if (value !== undefined) {\n      const option = options.find(item => this.getItemValue(item) === value);\n      return option === undefined ? [] : [option];\n    }\n\n    const text = filter?.trim().toLowerCase();\n    if (!text) {\n      return options;\n    }\n\n    return options.filter(item => this.getItemFilterText(item).toLowerCase().includes(text));\n  };\n\n  private async loadOptions(open: boolean, value: unknown): Promise<void> {\n    if (!this.getOptions) {\n      return;\n    }\n\n    const request = ++this.optionsRequest;\n    const options = await this.getOptions(this.textValue, value);\n    if (request !== this.optionsRequest) {\n      return;\n    }\n\n    this.filteredItems = options;\n    if (open) {\n      this.open = true;\n    }\n  }\n\n  private async updateFilterBasedOnValue(): Promise<void> {\n    if (this.value !== undefined) {\n      await this.loadOptions(false, this.value);\n    } else {\n      this.filteredItems = [];\n    }\n\n    if (this.filteredItems.length) {\n      this.selectedOption = this.filteredItems[0];\n      this.textValue = this.getItemLabel(this.filteredItems[0]);\n    } else if (this.value !== undefined) {\n      this.selectedOption = undefined;\n      this.textValue = undefined;\n    } else {\n      this.selectedOption = undefined;\n    }\n  }\n\n  private getItemFilterText(item: unknown): string {\n    if (this.filterField && item && typeof item === 'object') {\n      const filterValue = (item as Record<string, unknown>)[this.filterField];\n      return filterValue === undefined || filterValue === null ? '' : String(filterValue);\n    }\n\n    return this.getItemLabel(item);\n  }\n\n  private dispatchValueEvent(type: 'input' | 'change'): void {\n    this.element.dispatchEvent(new Event(type, { bubbles: true }));\n  }\n\n  private findError(error: IError): IError | undefined {\n    for (const existing of this.errors.keys()) {\n      if (existing === error || existing.message === error.message) {\n        return existing;\n      }\n    }\n\n    return undefined;\n  }\n}\n\nexport interface IUiComboboxElement extends IValidatedElement {\n  value: unknown;\n}\n\nfunction defineUiComboboxElementApis(element: HTMLElement) {\n  Object.defineProperties(element, {\n    tagName: {\n      get() {\n        return 'UI-COMBOBOX';\n      }\n    },\n    value: {\n      get(this: IUiComboboxElement) {\n        return CustomElement.for<UiCombobox>(this).viewModel.value;\n      },\n      set(this: IUiComboboxElement, value: unknown) {\n        CustomElement.for<UiCombobox>(this).viewModel.value = value;\n      },\n      configurable: true\n    },\n    disabled: {\n      get(this: IUiComboboxElement) {\n        return CustomElement.for<UiCombobox>(this).viewModel.disabled;\n      },\n      set(this: IUiComboboxElement, value: boolean) {\n        CustomElement.for<UiCombobox>(this).viewModel.disabled = value;\n      },\n      configurable: true\n    },\n    readOnly: {\n      get(this: IUiComboboxElement) {\n        return CustomElement.for<UiCombobox>(this).viewModel.readonly;\n      },\n      set(this: IUiComboboxElement, value: boolean) {\n        CustomElement.for<UiCombobox>(this).viewModel.readonly = value;\n      },\n      configurable: true\n    },\n    addError: {\n      value(this: IUiComboboxElement, error: IError) {\n        CustomElement.for<UiCombobox>(this).viewModel.addError(error);\n      },\n      configurable: true\n    },\n    removeError: {\n      value(this: IUiComboboxElement, error: IError) {\n        CustomElement.for<UiCombobox>(this).viewModel.removeError(error);\n      },\n      configurable: true\n    },\n    focus: {\n      value(this: IUiComboboxElement) {\n        CustomElement.for<UiCombobox>(this).viewModel.inputEl.focus();\n      },\n      configurable: true\n    },\n    blur: {\n      value(this: IUiComboboxElement) {\n        CustomElement.for<UiCombobox>(this).viewModel.inputEl.blur();\n      },\n      configurable: true\n    },\n    isFocused: {\n      get(this: IUiComboboxElement) {\n        return document.activeElement === CustomElement.for<UiCombobox>(this).viewModel.inputEl;\n      },\n      configurable: true\n    }\n  });\n}\n"]}