@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/combobox/UUIComboboxEvent.d.ts

@@ -0,0 +1,7 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIComboboxElement } from './combobox.element.js';
+export declare class UUIComboboxEvent extends UUIEvent<UUIComboboxElement> {
+    static readonly SEARCH: string;
+    static readonly CHANGE: string;
+    constructor(evName: string, eventInit?: any);
+}

package/dist/components/combobox/UUIComboboxEvent.js

@@ -0,0 +1,16 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIComboboxEvent = class _UUIComboboxEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, {
+      bubbles: true,
+      ...eventInit
+    });
+  }
+};
+_UUIComboboxEvent.SEARCH = "search";
+_UUIComboboxEvent.CHANGE = "change";
+let UUIComboboxEvent = _UUIComboboxEvent;
+export {
+  UUIComboboxEvent
+};
+//# sourceMappingURL=UUIComboboxEvent.js.map

package/dist/components/combobox/UUIComboboxEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIComboboxEvent.js","sources":["../../../src/components/combobox/UUIComboboxEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIComboboxElement } from './combobox.element.js';\n\nexport class UUIComboboxEvent extends UUIEvent<UUIComboboxElement> {\n  public static readonly SEARCH: string = 'search';\n  public static readonly CHANGE: string = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,oBAAN,MAAM,0BAAyB,SAA6B;AAAA,EAIjE,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AATE,kBAAuB,SAAiB;AACxC,kBAAuB,SAAiB;AAFnC,IAAM,mBAAN;"}

package/dist/components/combobox/combobox-async-example.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export declare class UUIComboboxAsyncExampleElement extends LitElement {
+    _options: any[];
+    _loading: boolean;
+    _filterValue: string;
+    private readonly _fetchData;
+    private readonly _handleSearch;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/combobox/combobox-async-options-example.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class UUIComboboxAsyncOptionsExampleElement extends LitElement {
+    _options: any[];
+    connectedCallback(): void;
+    private readonly _fetchData;
+    preselected: string;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,9 @@
+import { UUIComboboxElement } from './combobox.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-combobox': UUIComboboxElement;
+    }
+}
+export * from './combobox.element.js';
+export * from './UUIComboboxEvent.js';
+export { UUIComboboxElement as default } from './combobox.element.js';

package/dist/components/combobox/combobox.element.d.ts

@@ -0,0 +1,90 @@
+import { LitElement } from 'lit';
+import '../input/input.js';
+import '../symbol-expand/symbol-expand.js';
+import '../button/button.js';
+import '../icon/icon.js';
+import '../scroll-container/scroll-container.js';
+import '../popover-container/popover-container.js';
+declare const UUIComboboxElement_base: (new (...args: any[]) => import("../../index.js").UUIFormControlWithBasicsMixinElement<FormDataEntryValue | FormData>) & typeof LitElement;
+/**
+ * @element uui-combobox
+ * @fires {UUIComboboxEvent} input - fires when search input is changed
+ * @fires {UUIComboboxEvent} change - fires when selection is changed
+ * @slot - for uui-combobox-list-options
+ * @slot input-prepend - prepend for the uui-input
+ * @slot input-append - append for the uui-input
+ * @cssprop --uui-dropdown-width - overwrite the dropdown width
+ * @description - Filterable combobox
+ */
+export declare class UUIComboboxElement extends UUIComboboxElement_base {
+    #private;
+    set value(newValue: FormDataEntryValue | FormData);
+    get value(): FormDataEntryValue | FormData;
+    /**
+     * The search input.
+     * @type {string}
+     * @attr
+     * @default ""
+     */
+    set search(newValue: string);
+    get search(): string;
+    /**
+     * Specifies if the popover should be open.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    set open(newValue: boolean);
+    get open(): boolean;
+    /**
+     * Specifies the button label for the close button in mobile mode
+     * @type {string}
+     * @attr
+     * @default "Close"
+     */
+    closeLabel: string;
+    /**
+     * Disables the uui-combobox.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Removes the expand symbol.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    hideExpandSymbol: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Defines the input placeholder.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    placeholder: string;
+    private readonly _input;
+    private readonly _comboboxPopoverElement?;
+    private readonly _comboboxListElements?;
+    private _displayValue;
+    private _search;
+    private _isPhone;
+    private _isOpen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected getFormElement(): HTMLElement | undefined;
+    focus(): Promise<void>;
+    blur(): Promise<void>;
+    click(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

package/dist/components/combobox/combobox.element.js

@@ -0,0 +1,458 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _comboboxList, _phoneMediaQuery, _UUIComboboxElement_instances, onSlotChange_fn, _onPhoneChange, updateValue_fn, _onMouseDown, _onBlur, _onInput, _onInnerSlotChange, _onChange, _onToggle, _onOpen, _onClose, _onKeyDown, _onClear, _renderInput, _renderClearButton, _renderDropdown;
+import "../combobox-list/combobox-list.js";
+import { LitElement, nothing, html, css } from "lit";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { UUIComboboxEvent } from "./UUIComboboxEvent.js";
+import "../input/input.js";
+import "../symbol-expand/symbol-expand.js";
+import "../button/button.js";
+import "../icon/icon.js";
+import "../scroll-container/scroll-container.js";
+import "../popover-container/popover-container.js";
+import { UUIComboboxListEvent } from "../combobox-list/UUIComboboxListEvent.js";
+import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
+import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWithBasicsMixin(
+  LitElement,
+  ""
+) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _UUIComboboxElement_instances);
+    __privateAdd(this, _comboboxList);
+    __privateAdd(this, _phoneMediaQuery);
+    __privateAdd(this, _onPhoneChange);
+    __privateAdd(this, _onMouseDown);
+    __privateAdd(this, _onBlur);
+    __privateAdd(this, _onInput);
+    __privateAdd(this, _onInnerSlotChange);
+    __privateAdd(this, _onChange);
+    __privateAdd(this, _onToggle);
+    __privateAdd(this, _onOpen);
+    __privateAdd(this, _onClose);
+    __privateAdd(this, _onKeyDown);
+    __privateAdd(this, _onClear);
+    __privateAdd(this, _renderInput);
+    __privateAdd(this, _renderClearButton);
+    __privateAdd(this, _renderDropdown);
+    this.closeLabel = "Close";
+    this.disabled = false;
+    this.hideExpandSymbol = false;
+    this.readonly = false;
+    this.placeholder = "";
+    this._displayValue = "";
+    this._search = "";
+    this._isPhone = false;
+    this._isOpen = false;
+    __privateSet(this, _onPhoneChange, () => {
+      this._isPhone = __privateGet(this, _phoneMediaQuery).matches;
+    });
+    __privateSet(this, _onMouseDown, () => requestAnimationFrame(() => this._input.focus()));
+    __privateSet(this, _onBlur, () => requestAnimationFrame(() => {
+      if (!this.shadowRoot?.activeElement) {
+        __privateGet(this, _onClose).call(this);
+      }
+    }));
+    __privateSet(this, _onInput, (e) => {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this.search = e.target.value;
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
+      __privateGet(this, _onOpen).call(this);
+    });
+    __privateSet(this, _onInnerSlotChange, () => {
+      if (this.value && this.value !== __privateGet(this, _comboboxList)?.value) {
+        __privateMethod(this, _UUIComboboxElement_instances, updateValue_fn).call(this);
+      }
+    });
+    __privateSet(this, _onChange, () => {
+      this.value = __privateGet(this, _comboboxList)?.value || "";
+      this.search = this.value ? this.search : "";
+      __privateGet(this, _onClose).call(this);
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
+    });
+    __privateSet(this, _onToggle, () => {
+      if (this.readonly) return;
+      this.open = !this.open;
+    });
+    __privateSet(this, _onOpen, () => {
+      if (this.open) return;
+      if (this.readonly) return;
+      this.open = true;
+    });
+    __privateSet(this, _onClose, () => {
+      if (!this.open) return;
+      this.open = false;
+      this.search = "";
+      this._input.value = this._displayValue;
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
+    });
+    __privateSet(this, _onKeyDown, (e) => {
+      if (this.open === false && e.code === "Enter") {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+      if (e.code === "ArrowUp" || e.code === "ArrowDown") {
+        __privateGet(this, _onOpen).call(this);
+      }
+      if (e.code === "Space") {
+        if (this._isOpen) return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        __privateGet(this, _onOpen).call(this);
+      }
+      if (e.code === "Escape") {
+        __privateGet(this, _onClose).call(this);
+      }
+    });
+    __privateSet(this, _onClear, (e) => {
+      if (e.key && e.key !== "Enter") return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this.value = "";
+      this.search = "";
+      this._input.value = this._displayValue;
+      this._input.focus();
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
+    });
+    __privateSet(this, _renderInput, () => {
+      return html`<uui-input
+      slot="trigger"
+      id="combobox-input"
+      label="combobox-input"
+      type="text"
+      .value=${this._displayValue}
+      .placeholder=${this.placeholder}
+      autocomplete="off"
+      .disabled=${this.disabled}
+      .readonly=${this.readonly}
+      popovertarget="combobox-popover"
+      @click=${__privateGet(this, _onToggle)}
+      @input=${__privateGet(this, _onInput)}
+      @keydown=${__privateGet(this, _onKeyDown)}>
+      <slot name="input-prepend" slot="prepend"></slot>
+      ${__privateGet(this, _renderClearButton).call(this)}
+      ${this.hideExpandSymbol ? nothing : html`<div id="expand-symbol-wrapper" slot="append">
+            <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
+          </div>`}
+      <slot name="input-append" slot="append"></slot>
+    </uui-input>`;
+    });
+    __privateSet(this, _renderClearButton, () => {
+      if (this.disabled) return nothing;
+      if (this.readonly) return nothing;
+      return html`<uui-button
+      id="clear-button"
+      @click=${__privateGet(this, _onClear)}
+      @keydown=${__privateGet(this, _onClear)}
+      label="clear"
+      slot="append"
+      compact
+      style="height: 100%;"
+      tabindex=${this.value || this.search ? "" : "-1"}
+      class=${this.value || this.search ? "visible" : ""}>
+      <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
+    </uui-button>`;
+    });
+    __privateSet(this, _renderDropdown, () => {
+      return html`<div id="dropdown">
+      <uui-scroll-container tabindex="-1" id="scroll-container">
+        <slot @slotchange=${__privateMethod(this, _UUIComboboxElement_instances, onSlotChange_fn)}></slot>
+      </uui-scroll-container>
+    </div>`;
+    });
+  }
+  set value(newValue) {
+    super.value = newValue;
+    if (typeof newValue === "string") {
+      __privateMethod(this, _UUIComboboxElement_instances, updateValue_fn).call(this);
+    }
+  }
+  get value() {
+    return super.value;
+  }
+  set search(newValue) {
+    if (this.search === newValue) return;
+    const oldValue = this._search;
+    this._search = newValue;
+    this.requestUpdate("search", oldValue);
+  }
+  get search() {
+    return this._search;
+  }
+  set open(newValue) {
+    const oldValue = newValue;
+    this._isOpen = newValue;
+    const popover = this._comboboxPopoverElement;
+    if (popover) {
+      if (newValue) {
+        const width = this._input.offsetWidth;
+        popover.style.setProperty("--popover-width", `${width}px`);
+        popover.showPopover();
+      } else {
+        popover.hidePopover();
+      }
+    }
+    this.requestUpdate("open", oldValue);
+  }
+  get open() {
+    return this._isOpen;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("blur", __privateGet(this, _onBlur));
+    this.addEventListener("mousedown", __privateGet(this, _onMouseDown));
+    __privateSet(this, _phoneMediaQuery, window.matchMedia("(max-width: 600px)"));
+    __privateGet(this, _onPhoneChange).call(this);
+    __privateGet(this, _phoneMediaQuery).addEventListener("change", __privateGet(this, _onPhoneChange));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("blur", __privateGet(this, _onBlur));
+    this.removeEventListener("mousedown", __privateGet(this, _onMouseDown));
+    __privateGet(this, _phoneMediaQuery).removeEventListener("change", __privateGet(this, _onPhoneChange));
+  }
+  getFormElement() {
+    return this._input;
+  }
+  async focus() {
+    await this.updateComplete;
+    this._input.focus();
+  }
+  async blur() {
+    await this.updateComplete;
+    this._input.blur();
+  }
+  async click() {
+    await this.updateComplete;
+    this._input.click();
+  }
+  render() {
+    if (this._isPhone && this.open) {
+      return html`<div id="phone-wrapper">
+        <uui-button label="close" look="primary" @click=${__privateGet(this, _onClose)}>
+          ${this.closeLabel}
+        </uui-button>
+        ${__privateGet(this, _renderInput).call(this)} ${__privateGet(this, _renderDropdown).call(this)}
+      </div>`;
+    } else {
+      return html`
+        ${__privateGet(this, _renderInput).call(this)}
+        <uui-popover-container
+          id="combobox-popover"
+          popover="manual"
+          placement="bottom-end">
+          ${__privateGet(this, _renderDropdown).call(this)}
+        </uui-popover-container>
+      `;
+    }
+  }
+};
+_comboboxList = new WeakMap();
+_phoneMediaQuery = new WeakMap();
+_UUIComboboxElement_instances = new WeakSet();
+onSlotChange_fn = function() {
+  if (__privateGet(this, _comboboxList)) {
+    __privateGet(this, _comboboxList).removeEventListener(
+      UUIComboboxListEvent.CHANGE,
+      __privateGet(this, _onChange)
+    );
+    __privateGet(this, _comboboxList).removeEventListener(
+      UUIComboboxListEvent.INNER_SLOT_CHANGE,
+      __privateGet(this, _onInnerSlotChange)
+    );
+  }
+  const list = this._comboboxListElements?.[0];
+  if (list) {
+    __privateSet(this, _comboboxList, list);
+    __privateGet(this, _comboboxList).for = this;
+    __privateGet(this, _comboboxList).addEventListener(
+      UUIComboboxListEvent.CHANGE,
+      __privateGet(this, _onChange)
+    );
+    __privateGet(this, _comboboxList).addEventListener(
+      UUIComboboxListEvent.INNER_SLOT_CHANGE,
+      __privateGet(this, _onInnerSlotChange)
+    );
+  }
+  this.updateComplete.then(() => {
+    __privateMethod(this, _UUIComboboxElement_instances, updateValue_fn).call(this);
+  });
+};
+_onPhoneChange = new WeakMap();
+updateValue_fn = function() {
+  if (__privateGet(this, _comboboxList)) {
+    __privateGet(this, _comboboxList).value = this.value;
+    requestAnimationFrame(
+      () => this._displayValue = __privateGet(this, _comboboxList).displayValue || ""
+    );
+  }
+};
+_onMouseDown = new WeakMap();
+_onBlur = new WeakMap();
+_onInput = new WeakMap();
+_onInnerSlotChange = new WeakMap();
+_onChange = new WeakMap();
+_onToggle = new WeakMap();
+_onOpen = new WeakMap();
+_onClose = new WeakMap();
+_onKeyDown = new WeakMap();
+_onClear = new WeakMap();
+_renderInput = new WeakMap();
+_renderClearButton = new WeakMap();
+_renderDropdown = new WeakMap();
+_UUIComboboxElement.styles = [
+  css`
+      :host {
+        display: inline-flex;
+      }
+
+      #combobox-input {
+        width: 100%;
+        border-radius: var(--uui-border-radius-3);
+      }
+
+      #combobox-popover {
+        width: var(--uui-dropdown-width, var(--popover-width, inherit));
+      }
+
+      #scroll-container {
+        overflow-y: auto;
+        width: 100%;
+        max-height: var(--uui-combobox-popover-max-height, 500px);
+      }
+      #expand-symbol-wrapper {
+        height: 100%;
+        padding-right: var(--uui-size-space-3);
+        display: flex;
+        justify-content: center;
+      }
+
+      #clear-button {
+        opacity: 0;
+        transition: opacity 80ms;
+      }
+
+      :host(:not([disabled]):not([readonly]):focus-within)
+        #clear-button.visible,
+      :host(:not([disabled]):not([readonly]):hover) #clear-button.visible {
+        opacity: 1;
+      }
+
+      #dropdown {
+        overflow: hidden;
+        z-index: -1;
+        background-color: var(
+          --uui-combobox-popover-background-color,
+          var(--uui-color-surface)
+        );
+        border: 1px solid var(--uui-color-border);
+        border-radius: var(--uui-border-radius-3);
+        width: 100%;
+        box-sizing: border-box;
+        box-shadow: var(--uui-shadow-depth-3);
+      }
+
+      :host([disabled]) #caret {
+        fill: var(--uui-color-disabled-contrast);
+      }
+
+      #phone-wrapper {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        z-index: 1;
+        font-size: 1.1em;
+      }
+
+      #phone-wrapper #dropdown {
+        display: flex;
+      }
+
+      #phone-wrapper #combobox-input {
+        height: var(--uui-size-16);
+      }
+
+      #phone-wrapper > uui-button {
+        height: var(--uui-size-14);
+        width: 100%;
+      }
+
+      #phone-wrapper #scroll-container {
+        max-height: unset;
+      }
+    `
+];
+let UUIComboboxElement = _UUIComboboxElement;
+__decorateClass([
+  property({ attribute: "value", reflect: true })
+], UUIComboboxElement.prototype, "value", 1);
+__decorateClass([
+  property({ type: String })
+], UUIComboboxElement.prototype, "search", 1);
+__decorateClass([
+  property({ type: Boolean })
+], UUIComboboxElement.prototype, "open", 1);
+__decorateClass([
+  property({ type: String, attribute: "close-label" })
+], UUIComboboxElement.prototype, "closeLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIComboboxElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: false, attribute: "hide-expand-symbol" })
+], UUIComboboxElement.prototype, "hideExpandSymbol", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIComboboxElement.prototype, "readonly", 2);
+__decorateClass([
+  property()
+], UUIComboboxElement.prototype, "placeholder", 2);
+__decorateClass([
+  query("#combobox-input")
+], UUIComboboxElement.prototype, "_input", 2);
+__decorateClass([
+  query("#combobox-popover")
+], UUIComboboxElement.prototype, "_comboboxPopoverElement", 2);
+__decorateClass([
+  queryAssignedElements({
+    flatten: true,
+    selector: "uui-combobox-list"
+  })
+], UUIComboboxElement.prototype, "_comboboxListElements", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_displayValue", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_search", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_isPhone", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_isOpen", 2);
+export {
+  UUIComboboxElement
+};
+//# sourceMappingURL=combobox.element.js.map

package/dist/components/combobox/combobox.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.element.js","sources":["../../../src/components/combobox/combobox.element.ts"],"sourcesContent":["import { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport type { UUIComboboxListElement } from '../combobox-list/combobox-list.js';\nimport { UUIComboboxListEvent } from '../combobox-list/combobox-list.js';\nimport { iconRemove } from '../icon-registry-essential/svgs/index.js';\nimport type { UUIPopoverContainerElement } from '../popover-container/popover-container.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\n\nimport { UUIComboboxEvent } from './UUIComboboxEvent.js';\n\nimport '../input/input.js';\nimport '../symbol-expand/symbol-expand.js';\nimport '../button/button.js';\nimport '../icon/icon.js';\nimport '../scroll-container/scroll-container.js';\nimport '../popover-container/popover-container.js';\n\n/**\n * @element uui-combobox\n * @fires {UUIComboboxEvent} input - fires when search input is changed\n * @fires {UUIComboboxEvent} change - fires when selection is changed\n * @slot - for uui-combobox-list-options\n * @slot input-prepend - prepend for the uui-input\n * @slot input-append - append for the uui-input\n * @cssprop --uui-dropdown-width - overwrite the dropdown width\n * @description - Filterable combobox\n */\nexport class UUIComboboxElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  @property({ attribute: 'value', reflect: true })\n  set value(newValue) {\n    super.value = newValue;\n\n    if (typeof newValue === 'string') {\n      this.#updateValue();\n    }\n  }\n  get value() {\n    return super.value;\n  }\n\n  /**\n   * The search input.\n   * @type {string}\n   * @attr\n   * @default \"\"\n   */\n  @property({ type: String })\n  public set search(newValue) {\n    if (this.search === newValue) return;\n    const oldValue = this._search;\n    this._search = newValue;\n    this.requestUpdate('search', oldValue);\n  }\n  public get search() {\n    return this._search;\n  }\n\n  /**\n   * Specifies if the popover should be open.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean })\n  public set open(newValue: boolean) {\n    const oldValue = newValue;\n    this._isOpen = newValue;\n    const popover = this._comboboxPopoverElement;\n    if (popover) {\n      if (newValue) {\n        const width = this._input.offsetWidth;\n        popover.style.setProperty('--popover-width', `${width}px`);\n        popover.showPopover();\n      } else {\n        popover.hidePopover();\n      }\n    }\n\n    this.requestUpdate('open', oldValue);\n  }\n  public get open() {\n    return this._isOpen;\n  }\n\n  /**\n   * Specifies the button label for the close button in mobile mode\n   * @type {string}\n   * @attr\n   * @default \"Close\"\n   */\n  @property({ type: String, attribute: 'close-label' })\n  public closeLabel = 'Close';\n\n  /**\n   * Disables the uui-combobox.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Removes the expand symbol.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: false, attribute: 'hide-expand-symbol' })\n  hideExpandSymbol = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Defines the input placeholder.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property()\n  placeholder = '';\n\n  @query('#combobox-input')\n  private readonly _input!: HTMLInputElement;\n\n  @query('#combobox-popover')\n  private readonly _comboboxPopoverElement?: UUIPopoverContainerElement;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'uui-combobox-list',\n  })\n  private readonly _comboboxListElements?: UUIComboboxListElement[];\n\n  #comboboxList!: UUIComboboxListElement;\n  #phoneMediaQuery!: MediaQueryList;\n\n  @state()\n  private _displayValue = '';\n\n  @state()\n  private _search = '';\n\n  @state()\n  private _isPhone = false;\n\n  @state()\n  private _isOpen = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('blur', this.#onBlur);\n    this.addEventListener('mousedown', this.#onMouseDown);\n\n    this.#phoneMediaQuery = window.matchMedia('(max-width: 600px)');\n    this.#onPhoneChange();\n    this.#phoneMediaQuery.addEventListener('change', this.#onPhoneChange);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.removeEventListener('blur', this.#onBlur);\n    this.removeEventListener('mousedown', this.#onMouseDown);\n    this.#phoneMediaQuery.removeEventListener('change', this.#onPhoneChange);\n  }\n\n  #onSlotChange() {\n    if (this.#comboboxList) {\n      this.#comboboxList.removeEventListener(\n        UUIComboboxListEvent.CHANGE,\n        this.#onChange,\n      );\n      this.#comboboxList.removeEventListener(\n        UUIComboboxListEvent.INNER_SLOT_CHANGE,\n        this.#onInnerSlotChange,\n      );\n    }\n    const list = this._comboboxListElements?.[0];\n\n    if (list) {\n      this.#comboboxList = list;\n      this.#comboboxList.for = this;\n      this.#comboboxList.addEventListener(\n        UUIComboboxListEvent.CHANGE,\n        this.#onChange,\n      );\n      this.#comboboxList.addEventListener(\n        UUIComboboxListEvent.INNER_SLOT_CHANGE,\n        this.#onInnerSlotChange,\n      );\n    }\n\n    this.updateComplete.then(() => {\n      this.#updateValue();\n    });\n  }\n\n  readonly #onPhoneChange = () => {\n    this._isPhone = this.#phoneMediaQuery.matches;\n  };\n\n  #updateValue() {\n    if (this.#comboboxList) {\n      this.#comboboxList.value = this.value;\n      requestAnimationFrame(\n        () => (this._displayValue = this.#comboboxList.displayValue || ''),\n      );\n    }\n  }\n\n  protected getFormElement(): HTMLElement | undefined {\n    return this._input;\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this._input.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._input.blur();\n  }\n  async click() {\n    await this.updateComplete;\n    this._input.click();\n  }\n\n  readonly #onMouseDown = () =>\n    requestAnimationFrame(() => this._input.focus());\n\n  readonly #onBlur = () =>\n    requestAnimationFrame(() => {\n      if (!this.shadowRoot?.activeElement) {\n        this.#onClose();\n      }\n    });\n\n  readonly #onInput = (e: any) => {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    this.search = e.target.value;\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n    this.#onOpen();\n  };\n\n  readonly #onInnerSlotChange = () => {\n    if (this.value && this.value !== this.#comboboxList?.value) {\n      this.#updateValue();\n    }\n  };\n\n  readonly #onChange = () => {\n    this.value = this.#comboboxList?.value || '';\n    this.search = this.value ? this.search : '';\n\n    this.#onClose();\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));\n  };\n\n  readonly #onToggle = () => {\n    if (this.readonly) return;\n    this.open = !this.open;\n  };\n\n  readonly #onOpen = () => {\n    if (this.open) return;\n    if (this.readonly) return;\n    this.open = true;\n  };\n\n  readonly #onClose = () => {\n    if (!this.open) return;\n\n    this.open = false;\n    this.search = '';\n    // Reset input(search-input) value:\n    this._input.value = this._displayValue;\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n  };\n\n  readonly #onKeyDown = (e: KeyboardEvent) => {\n    if (this.open === false && e.code === 'Enter') {\n      e.preventDefault(); // Prevent form submission when combobox is closed\n      e.stopImmediatePropagation(); // Don't let list handle Enter when closed\n    }\n\n    if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {\n      this.#onOpen();\n    }\n\n    if (e.code === 'Space') {\n      if (this._isOpen) return;\n      e.preventDefault();\n      e.stopImmediatePropagation();\n      this.#onOpen();\n    }\n\n    if (e.code === 'Escape') {\n      this.#onClose();\n    }\n  };\n\n  readonly #onClear = (e: any) => {\n    if (e.key && e.key !== 'Enter') return;\n\n    e.preventDefault(); // Prevent form submission from clear button\n    e.stopImmediatePropagation(); // Don't let list handle Enter after clearing\n\n    this.value = '';\n    this.search = '';\n    // Reset input(search-input) value:\n    this._input.value = this._displayValue;\n\n    this._input.focus();\n\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));\n  };\n\n  readonly #renderInput = () => {\n    return html`<uui-input\n      slot=\"trigger\"\n      id=\"combobox-input\"\n      label=\"combobox-input\"\n      type=\"text\"\n      .value=${this._displayValue}\n      .placeholder=${this.placeholder}\n      autocomplete=\"off\"\n      .disabled=${this.disabled}\n      .readonly=${this.readonly}\n      popovertarget=\"combobox-popover\"\n      @click=${this.#onToggle}\n      @input=${this.#onInput}\n      @keydown=${this.#onKeyDown}>\n      <slot name=\"input-prepend\" slot=\"prepend\"></slot>\n      ${this.#renderClearButton()}\n      ${this.hideExpandSymbol\n        ? nothing\n        : html`<div id=\"expand-symbol-wrapper\" slot=\"append\">\n            <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>\n          </div>`}\n      <slot name=\"input-append\" slot=\"append\"></slot>\n    </uui-input>`;\n  };\n\n  readonly #renderClearButton = () => {\n    if (this.disabled) return nothing;\n    if (this.readonly) return nothing;\n\n    return html`<uui-button\n      id=\"clear-button\"\n      @click=${this.#onClear}\n      @keydown=${this.#onClear}\n      label=\"clear\"\n      slot=\"append\"\n      compact\n      style=\"height: 100%;\"\n      tabindex=${this.value || this.search ? '' : '-1'}\n      class=${this.value || this.search ? 'visible' : ''}>\n      <uui-icon name=\"remove\" .fallback=${iconRemove.strings[0]}></uui-icon>\n    </uui-button>`;\n  };\n\n  readonly #renderDropdown = () => {\n    return html`<div id=\"dropdown\">\n      <uui-scroll-container tabindex=\"-1\" id=\"scroll-container\">\n        <slot @slotchange=${this.#onSlotChange}></slot>\n      </uui-scroll-container>\n    </div>`;\n  };\n\n  render() {\n    if (this._isPhone && this.open) {\n      return html`<div id=\"phone-wrapper\">\n        <uui-button label=\"close\" look=\"primary\" @click=${this.#onClose}>\n          ${this.closeLabel}\n        </uui-button>\n        ${this.#renderInput()} ${this.#renderDropdown()}\n      </div>`;\n    } else {\n      return html`\n        ${this.#renderInput()}\n        <uui-popover-container\n          id=\"combobox-popover\"\n          popover=\"manual\"\n          placement=\"bottom-end\">\n          ${this.#renderDropdown()}\n        </uui-popover-container>\n      `;\n    }\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n      }\n\n      #combobox-input {\n        width: 100%;\n        border-radius: var(--uui-border-radius-3);\n      }\n\n      #combobox-popover {\n        width: var(--uui-dropdown-width, var(--popover-width, inherit));\n      }\n\n      #scroll-container {\n        overflow-y: auto;\n        width: 100%;\n        max-height: var(--uui-combobox-popover-max-height, 500px);\n      }\n      #expand-symbol-wrapper {\n        height: 100%;\n        padding-right: var(--uui-size-space-3);\n        display: flex;\n        justify-content: center;\n      }\n\n      #clear-button {\n        opacity: 0;\n        transition: opacity 80ms;\n      }\n\n      :host(:not([disabled]):not([readonly]):focus-within)\n        #clear-button.visible,\n      :host(:not([disabled]):not([readonly]):hover) #clear-button.visible {\n        opacity: 1;\n      }\n\n      #dropdown {\n        overflow: hidden;\n        z-index: -1;\n        background-color: var(\n          --uui-combobox-popover-background-color,\n          var(--uui-color-surface)\n        );\n        border: 1px solid var(--uui-color-border);\n        border-radius: var(--uui-border-radius-3);\n        width: 100%;\n        box-sizing: border-box;\n        box-shadow: var(--uui-shadow-depth-3);\n      }\n\n      :host([disabled]) #caret {\n        fill: var(--uui-color-disabled-contrast);\n      }\n\n      #phone-wrapper {\n        position: fixed;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        z-index: 1;\n        font-size: 1.1em;\n      }\n\n      #phone-wrapper #dropdown {\n        display: flex;\n      }\n\n      #phone-wrapper #combobox-input {\n        height: var(--uui-size-16);\n      }\n\n      #phone-wrapper > uui-button {\n        height: var(--uui-size-14);\n        width: 100%;\n      }\n\n      #phone-wrapper #scroll-container {\n        max-height: unset;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/combobox/combobox.js

@@ -0,0 +1,10 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIComboboxElement } from "./combobox.element.js";
+import { UUIComboboxEvent } from "./UUIComboboxEvent.js";
+defineElement("uui-combobox", UUIComboboxElement);
+export {
+  UUIComboboxElement,
+  UUIComboboxEvent,
+  UUIComboboxElement as default
+};
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","sources":["../../../src/components/combobox/combobox.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIComboboxElement } from './combobox.element.js';\n\ndefineElement('uui-combobox', UUIComboboxElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-combobox': UUIComboboxElement;\n  }\n}\n\nexport * from './combobox.element.js';\nexport * from './UUIComboboxEvent.js';\nexport { UUIComboboxElement as default } from './combobox.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,gBAAgB,kBAAkB;"}

package/dist/components/combobox-list/UUIComboboxListEvent.d.ts

@@ -0,0 +1,7 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIComboboxListElement } from './combobox-list.element.js';
+export declare class UUIComboboxListEvent extends UUIEvent<UUIComboboxListElement> {
+    static readonly CHANGE: string;
+    static readonly INNER_SLOT_CHANGE: string;
+    constructor(evName: string, eventInit?: any);
+}