npm - @umbraco-ui/uui - Versions diffs - 2.0.0-alpha.1 → 2.0.0-rc.0 - Mend

@umbraco-ui/uui 2.0.0-alpha.1 → 2.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

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

@@ -6,8 +6,41 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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;
+var _comboboxList, _phoneMediaQuery, _UUIComboboxElement_instances, onSlotChange_fn, _onPhoneChange, updateValue_fn, _onMouseDown, _onBlur, _onInput, _onInnerSlotChange, _onChange, _onToggle, _onOpen, _onClose, _onKeyDown, _onClear, _onRemoveTag, _renderInput, _renderClearButton, _renderSelectedTags, _renderDropdown;
 import "../combobox-list/combobox-list.js";
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
+import "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
 import { LitElement, nothing, html, css } from "lit";
 import { property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { UUIComboboxEvent } from "./UUIComboboxEvent.js";
@@ -17,9 +50,9 @@ import "../button/button.js";
 import "../icon/icon.js";
 import "../scroll-container/scroll-container.js";
 import "../popover-container/popover-container.js";
+import "../tag/tag.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) => {
@@ -50,11 +83,14 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
     __privateAdd(this, _onClose);
     __privateAdd(this, _onKeyDown);
     __privateAdd(this, _onClear);
+    __privateAdd(this, _onRemoveTag);
     __privateAdd(this, _renderInput);
     __privateAdd(this, _renderClearButton);
+    __privateAdd(this, _renderSelectedTags);
     __privateAdd(this, _renderDropdown);
     this.closeLabel = "Close";
     this.disabled = false;
+    this.multiple = false;
     this.hideExpandSymbol = false;
     this.readonly = false;
     this.placeholder = "";
@@ -62,6 +98,7 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
     this._search = "";
     this._isPhone = false;
     this._isOpen = false;
+    this._selectedItems = [];
     __privateSet(this, _onPhoneChange, () => {
       this._isPhone = __privateGet(this, _phoneMediaQuery).matches;
     });
@@ -84,9 +121,22 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
       }
     });
     __privateSet(this, _onChange, () => {
-      this.value = __privateGet(this, _comboboxList)?.value || "";
-      this.search = this.value ? this.search : "";
-      __privateGet(this, _onClose).call(this);
+      const list = __privateGet(this, _comboboxList);
+      if (!list) return;
+      if (list.multiple) {
+        this._selectedItems = list.selectedValues.map((val, i) => ({
+          value: val,
+          displayValue: list.selectedDisplayValues[i] || val
+        }));
+        this.value = list.selectedValues.join(",");
+        this.search = "";
+        this._input.value = "";
+        this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
+      } else {
+        this.value = list.value || "";
+        this.search = this.value ? this.search : "";
+        __privateGet(this, _onClose).call(this);
+      }
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
     });
     __privateSet(this, _onToggle, () => {
@@ -106,17 +156,17 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
     });
     __privateSet(this, _onKeyDown, (e) => {
+      if (e.code === "Backspace" && this.multiple && this._selectedItems.length > 0 && this.search === "") {
+        const lastItem = this._selectedItems[this._selectedItems.length - 1];
+        __privateGet(this, _onRemoveTag).call(this, e, lastItem.value);
+        return;
+      }
       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();
+      if (e.code === "ArrowUp" || e.code === "ArrowDown") {
         __privateGet(this, _onOpen).call(this);
       }
       if (e.code === "Escape") {
@@ -127,6 +177,16 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
       if (e.key && e.key !== "Enter") return;
       e.preventDefault();
       e.stopImmediatePropagation();
+      const list = __privateGet(this, _comboboxList);
+      if (list?.multiple) {
+        for (const el of list.querySelectorAll(
+          "uui-combobox-list-option[selected]"
+        )) {
+          el.selected = false;
+        }
+        list.resetSelection();
+        this._selectedItems = [];
+      }
       this.value = "";
       this.search = "";
       this._input.value = this._displayValue;
@@ -134,6 +194,18 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
     });
+    __privateSet(this, _onRemoveTag, (e, value) => {
+      e.stopPropagation();
+      const list = __privateGet(this, _comboboxList);
+      if (!list) return;
+      const options = list.querySelectorAll("uui-combobox-list-option");
+      for (const option of options) {
+        if (option.value === value && option.selected) {
+          option.click();
+          break;
+        }
+      }
+    });
     __privateSet(this, _renderInput, () => {
       return html`<uui-input
       slot="trigger"
@@ -150,8 +222,8 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
       @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">
+      ${__privateGet(this, _renderSelectedTags).call(this)} ${__privateGet(this, _renderClearButton).call(this)}
+      ${this.hideExpandSymbol || this.multiple ? 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>
@@ -160,6 +232,7 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
     __privateSet(this, _renderClearButton, () => {
       if (this.disabled) return nothing;
       if (this.readonly) return nothing;
+      if (this.multiple) return nothing;
       return html`<uui-button
       id="clear-button"
       @click=${__privateGet(this, _onClear)}
@@ -168,11 +241,27 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
       slot="append"
       compact
       style="height: 100%;"
-      tabindex=${this.value || this.search ? "" : "-1"}
-      class=${this.value || this.search ? "visible" : ""}>
+      tabindex=${this.value || this.search || this._selectedItems.length > 0 ? "" : "-1"}
+      class=${this.value || this.search || this._selectedItems.length > 0 ? "visible" : ""}>
       <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
     </uui-button>`;
     });
+    __privateSet(this, _renderSelectedTags, () => {
+      if (this._selectedItems.length === 0) return nothing;
+      return html` ${this._selectedItems.map(
+        (item) => html`<uui-tag look="secondary">
+          ${item.displayValue}
+          <uui-button
+            compact
+            label="Remove ${item.displayValue}"
+            @click=${(e) => __privateGet(this, _onRemoveTag).call(this, e, item.value)}>
+            <uui-icon
+              name="remove"
+              .fallback=${iconRemove.strings[0]}></uui-icon>
+          </uui-button>
+        </uui-tag>`
+      )}`;
+    });
     __privateSet(this, _renderDropdown, () => {
       return html`<div id="dropdown">
       <uui-scroll-container tabindex="-1" id="scroll-container">
@@ -285,6 +374,7 @@ onSlotChange_fn = function() {
   if (list) {
     __privateSet(this, _comboboxList, list);
     __privateGet(this, _comboboxList).for = this;
+    __privateGet(this, _comboboxList).multiple = this.multiple;
     __privateGet(this, _comboboxList).addEventListener(
       UUIComboboxListEvent.CHANGE,
       __privateGet(this, _onChange)
@@ -317,8 +407,10 @@ _onOpen = new WeakMap();
 _onClose = new WeakMap();
 _onKeyDown = new WeakMap();
 _onClear = new WeakMap();
+_onRemoveTag = new WeakMap();
 _renderInput = new WeakMap();
 _renderClearButton = new WeakMap();
+_renderSelectedTags = new WeakMap();
 _renderDropdown = new WeakMap();
 _UUIComboboxElement.styles = [
   css`
@@ -401,6 +493,20 @@ _UUIComboboxElement.styles = [
       #phone-wrapper #scroll-container {
         max-height: unset;
       }
+      :host([multiple]) #combobox-input {
+        --uui-input-height: auto;
+        min-height: var(--uui-size-11);
+      }
+      :host([multiple]) uui-tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+      }
+      :host([multiple]) uui-tag uui-button {
+        font-size: 10px;
+      }
     `
 ];
 let UUIComboboxElement = _UUIComboboxElement;
@@ -419,6 +525,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUIComboboxElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIComboboxElement.prototype, "multiple", 2);
 __decorateClass([
   property({ type: Boolean, reflect: false, attribute: "hide-expand-symbol" })
 ], UUIComboboxElement.prototype, "hideExpandSymbol", 2);
@@ -452,6 +561,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], UUIComboboxElement.prototype, "_isOpen", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_selectedItems", 2);
 export {
   UUIComboboxElement
 };

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

	@@ -1 +1 @@
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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"}
1	+ {"version":3,"file":"combobox.element.js","sources":["../../../src/components/combobox/combobox.element.ts"],"sourcesContent":["import { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport type {\n UUIComboboxListElement,\n UUIComboboxListOptionElement,\n} 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';\nimport '../tag/tag.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 Enables multiple selection mode.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n multiple = 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 @state()\n private _selectedItems: Array<{ value: string; displayValue: string }> = [];\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.multiple = this.multiple;\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 const list = this.#comboboxList;\n if (!list) return;\n\n if (list.multiple) {\n this._selectedItems = list.selectedValues.map((val, i) => ({\n value: val,\n displayValue: list.selectedDisplayValues[i] \|\| val,\n }));\n this.value = list.selectedValues.join(',');\n\n this.search = '';\n this._input.value = '';\n this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n } else {\n this.value = list.value \|\| '';\n this.search = this.value ? this.search : '';\n this.#onClose();\n }\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 (\n e.code === 'Backspace' &&\n this.multiple &&\n this._selectedItems.length > 0 &&\n this.search === ''\n ) {\n const lastItem = this._selectedItems[this._selectedItems.length - 1];\n this.#onRemoveTag(e, lastItem.value);\n return;\n }\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 this.#onOpen();\n }\n\n if (e.code === 'ArrowUp' \|\| e.code === 'ArrowDown') {\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();\n e.stopImmediatePropagation();\n\n const list = this.#comboboxList;\n if (list?.multiple) {\n // Deselect all options\n for (const el of list.querySelectorAll<UUIComboboxListOptionElement>(\n 'uui-combobox-list-option[selected]',\n )) {\n el.selected = false;\n }\n list.resetSelection();\n this._selectedItems = [];\n }\n\n this.value = '';\n this.search = '';\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 #onRemoveTag = (e: Event, value: string) => {\n e.stopPropagation(); // Don't let this trigger the input click/toggle\n\n const list = this.#comboboxList;\n if (!list) return;\n\n const options = list.querySelectorAll('uui-combobox-list-option');\n for (const option of options) {\n if (option.value === value && option.selected) {\n option.click(); // Triggers SelectableMixin's toggle → fires DESELECTED → list updates arrays\n break;\n }\n }\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.#renderSelectedTags()} ${this.#renderClearButton()}\n ${this.hideExpandSymbol \|\| this.multiple\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 if (this.multiple) 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 \|\| this._selectedItems.length > 0\n ? ''\n : '-1'}\n class=${this.value \|\| this.search \|\| this._selectedItems.length > 0\n ? 'visible'\n : ''}>\n <uui-icon name=\"remove\" .fallback=${iconRemove.strings[0]}></uui-icon>\n </uui-button>`;\n };\n\n readonly #renderSelectedTags = () => {\n if (this._selectedItems.length === 0) return nothing;\n\n return html` ${this._selectedItems.map(\n item =>\n html`<uui-tag look=\"secondary\">\n ${item.displayValue}\n <uui-button\n compact\n label=\"Remove ${item.displayValue}\"\n @click=${(e: Event) => this.#onRemoveTag(e, item.value)}>\n <uui-icon\n name=\"remove\"\n .fallback=${iconRemove.strings[0]}></uui-icon>\n </uui-button>\n </uui-tag>`,\n )}`;\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 :host([multiple]) #combobox-input {\n --uui-input-height: auto;\n min-height: var(--uui-size-11);\n }\n :host([multiple]) uui-tag {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n }\n\n :host([multiple]) uui-tag uui-button {\n font-size: 10px;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/combobox-list/combobox-list-option.element.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export declare class UUIComboboxListOptionElement extends UUIComboboxListOptionE
     private _value;
     private _disabled;
     _displayValue: string;
+    multiple: boolean;
     /**
      * Value of the option.
      * @type {string}

package/dist/components/combobox-list/combobox-list-option.element.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, nothing, html, css } from "lit";
 import { state, property } from "lit/decorators.js";
 import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
 import { ActiveMixin } from "../../internal/mixins/ActiveMixin.js";
@@ -19,6 +19,7 @@ const _UUIComboboxListOptionElement = class _UUIComboboxListOptionElement extend
     super();
     this._disabled = false;
     this._displayValue = "";
+    this.multiple = false;
     this.selectable = true;
     this.deselectable = false;
   }
@@ -48,7 +49,8 @@ const _UUIComboboxListOptionElement = class _UUIComboboxListOptionElement extend
     this.requestUpdate("disabled", oldValue);
   }
   render() {
-    return html`<slot></slot>`;
+    return html`${this.multiple ? html`<span id="checkbox"></span>` : nothing}
+      <slot></slot>`;
   }
 };
 _UUIComboboxListOptionElement.styles = [
@@ -56,12 +58,12 @@ _UUIComboboxListOptionElement.styles = [
       :host {
         position: relative;
         cursor: pointer;
-        margin: 1px var(--uui-size-2);
+        margin: 1px var(--uui-size-1);
         border-radius: var(--uui-border-radius);
         outline: 2px solid transparent;
         outline-offset: -2px;
-        padding: var(--uui-size-1);
-        padding-left: var(--uui-size-2);
+        padding: var(--uui-size-2);
+        padding-left: var(--uui-size-3);
       }
       :host(:first-child) {
@@ -75,9 +77,10 @@ _UUIComboboxListOptionElement.styles = [
         display: block;
         content: '';
         position: absolute;
-        inset: 0px;
-        outline: var(--uui-color-surface) solid 2px;
-        outline-offset: -4px;
+        inset: 2px;
+        border: var(--uui-color-surface) solid 1px;
+        border-radius: calc(var(--uui-border-radius) - 1px);
+        pointer-events: none;
       }
       /*
       :host::before {
@@ -113,12 +116,12 @@ _UUIComboboxListOptionElement.styles = [
         outline-color: var(--uui-color-focus);
       }
-      :host([selected]) {
+      :host([selected]:not([multiple])) {
         color: var(--uui-color-selected-contrast);
         background-color: var(--uui-color-selected);
       }
-      :host([selected]:hover) {
+      :host([selected]:not([multiple]):hover) {
         color: var(--uui-color-selected-contrast);
         background-color: var(--uui-color-selected-emphasis);
       }
@@ -126,6 +129,39 @@ _UUIComboboxListOptionElement.styles = [
         color: var(--uui-color-disabled-contrast);
         background-color: var(--uui-color-disabled);
       }
+      #checkbox {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
+        border: 2px solid var(--uui-color-border-standalone);
+        border-radius: 3px;
+        margin-right: var(--uui-size-2);
+        vertical-align: middle;
+        box-sizing: border-box;
+        position: relative;
+      }
+      :host([selected]) #checkbox {
+        background-color: var(--uui-color-selected);
+        border-color: var(--uui-color-selected);
+      }
+      :host([selected]) #checkbox::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 2px;
+        margin: auto;
+        width: 4px;
+        height: 8px;
+        border: solid var(--uui-color-selected-contrast);
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+      }
     `
 ];
 let UUIComboboxListOptionElement = _UUIComboboxListOptionElement;
@@ -135,6 +171,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], UUIComboboxListOptionElement.prototype, "_displayValue", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIComboboxListOptionElement.prototype, "multiple", 2);
 __decorateClass([
   property({ type: String })
 ], UUIComboboxListOptionElement.prototype, "value", 1);

package/dist/components/combobox-list/combobox-list-option.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-list-option.element.js","sources":["../../../src/components/combobox-list/combobox-list-option.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ActiveMixin, SelectableMixin } from '../../internal/mixins/index.js';\n\n/*\n @element uui-combobox-list-option\n * @slot - For option content\n * @description - An option to be used within uui-combobox-list\n /\nexport class UUIComboboxListOptionElement extends SelectableMixin(\n ActiveMixin(LitElement),\n) {\n private _value: string \| undefined;\n\n @state()\n private _disabled = false;\n\n @state() _displayValue = '';\n\n /\n Value of the option.\n * @type {string}\n * @attr\n * @default \"\"\n /\n @property({ type: String })\n public get value(): string {\n return this._value ? this._value : this.textContent?.trim() \|\| '';\n }\n public set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n }\n\n /\n A readable value.\n * @type {string}\n * @attr\n * @default \"\"\n /\n @property({ type: String, attribute: 'display-value' })\n public get displayValue() {\n return this._displayValue\n ? this._displayValue\n : this.textContent?.trim() \|\| '';\n }\n public set displayValue(newValue) {\n const oldValue = this._displayValue;\n this._displayValue = newValue;\n this.requestUpdate('displayValue', oldValue);\n }\n\n /\n Determines if the options is disabled. If true the option can't be selected\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n public get disabled() {\n return this._disabled;\n }\n public set disabled(newValue) {\n const oldValue = this._disabled;\n this._disabled = newValue;\n this.selectable = !this._disabled;\n this.requestUpdate('disabled', oldValue);\n }\n\n constructor() {\n super();\n this.selectable = true;\n this.deselectable = false;\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n position: relative;\n cursor: pointer;\n margin: 1px var(--uui-size-2);\n border-radius: var(--uui-border-radius);\n outline: 2px solid transparent;\n outline-offset: -2px;\n padding: var(--uui-size-1);\n padding-left: var(--uui-size-2);\n }\n\n :host(:first-child) {\n margin-top: 6px;\n }\n :host(:last-child) {\n margin-bottom: 6px;\n }\n\n :host([selected]):host([active])::after {\n display: block;\n content: '';\n position: absolute;\n inset: ~~0px~~;\n ~~outline~~: var(--uui-color-surface) solid ~~2px~~;\n ~~outline~~-~~offset~~: -~~4px~~;\n }\n /\n :host::before {\n display: block;\n content: '';\n opacity: 0;\n position: absolute;\n inset: 0;\n background-color: var(--uui-color-selected);\n }\n\n :host(:hover)::before {\n opacity: 0.15;\n border-radius: var(--uui-border-radius);\n } */\n\n :host(:hover) {\n background-color: var(--uui-color-surface-emphasis);\n color: var(--uui-color-interactive-emphasis);\n }\n\n :host([disabled]) {\n cursor: auto;\n color: var(--uui-color-disabled-contrast);\n background-color: var(--uui-color-disabled);\n }\n\n :host([disabled]:hover) {\n background-color: var(--uui-color-disabled);\n }\n\n :host([active]) {\n outline-color: var(--uui-color-focus);\n }\n\n :host([selected]) {\n color: var(--uui-color-selected-contrast);\n background-color: var(--uui-color-selected);\n }\n\n :host([selected]:hover) {\n color: var(--uui-color-selected-contrast);\n background-color: var(--uui-color-selected-emphasis);\n }\n :host([selected][disabled]) {\n color: var(--uui-color-disabled-contrast);\n background-color: var(--uui-color-disabled);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASO,MAAM,gCAAN,MAAM,sCAAqC;AAAA,EAChD,YAAY,UAAU;AACxB,EAAE;AAAA,~~EA2DA~~,cAAc;AACZ,UAAA;~~AAxDF~~,SAAQ,YAAY;AAEX,SAAA,gBAAgB;~~AAuDvB~~,SAAK,aAAa;AAClB,SAAK,eAAe;AAAA,EACtB;AAAA,EAhDA,IAAW,QAAgB;AACzB,WAAO,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,UAAU;AAAA,EACjE;AAAA,EACA,IAAW,MAAM,UAAkB;AACjC,UAAM,WAAW,KAAK;AACtB,SAAK,SAAS;AACd,SAAK,cAAc,SAAS,QAAQ;AAAA,EACtC;AAAA,EASA,IAAW,eAAe;AACxB,WAAO,KAAK,gBACR,KAAK,gBACL,KAAK,aAAa,UAAU;AAAA,EAClC;AAAA,EACA,IAAW,aAAa,UAAU;AAChC,UAAM,WAAW,KAAK;AACtB,SAAK,gBAAgB;AACrB,SAAK,cAAc,gBAAgB,QAAQ;AAAA,EAC7C;AAAA,EASA,IAAW,WAAW;AACpB,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAW,SAAS,UAAU;AAC5B,UAAM,WAAW,KAAK;AACtB,SAAK,YAAY;AACjB,SAAK,aAAa,CAAC,KAAK;AACxB,SAAK,cAAc,YAAY,QAAQ;AAAA,EACzC;AAAA,EAQA,SAAS;AACP,WAAO;AAAA,~~EACT~~;AA~~+EF;AA7EE~~,8BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAxEG~~,IAAM,+BAAN;AAMG,gBAAA;AAAA,EADP,MAAA;AAAM,GALI,6BAMH,WAAA,aAAA,CAAA;AAEC,gBAAA;AAAA,EAAR,MAAA;AAAM,GARI,6BAQF,WAAA,iBAAA,CAAA;~~AASE~~,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GAhBf~~,~~6BAiBA~~,WAAA,SAAA,CAAA;AAgBA,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,~~GAhC3C~~,~~6BAiCA~~,WAAA,gBAAA,CAAA;AAkBA,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,~~GAlD~~/B,~~6BAmDA~~,WAAA,YAAA,CAAA;"}
1	+ {"version":3,"file":"combobox-list-option.element.js","sources":["../../../src/components/combobox-list/combobox-list-option.element.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ActiveMixin, SelectableMixin } from '../../internal/mixins/index.js';\n\n/*\n @element uui-combobox-list-option\n * @slot - For option content\n * @description - An option to be used within uui-combobox-list\n /\nexport class UUIComboboxListOptionElement extends SelectableMixin(\n ActiveMixin(LitElement),\n) {\n private _value: string \| undefined;\n\n @state()\n private _disabled = false;\n\n @state() _displayValue = '';\n\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /\n Value of the option.\n * @type {string}\n * @attr\n * @default \"\"\n /\n @property({ type: String })\n public get value(): string {\n return this._value ? this._value : this.textContent?.trim() \|\| '';\n }\n public set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n }\n\n /\n A readable value.\n * @type {string}\n * @attr\n * @default \"\"\n /\n @property({ type: String, attribute: 'display-value' })\n public get displayValue() {\n return this._displayValue\n ? this._displayValue\n : this.textContent?.trim() \|\| '';\n }\n public set displayValue(newValue) {\n const oldValue = this._displayValue;\n this._displayValue = newValue;\n this.requestUpdate('displayValue', oldValue);\n }\n\n /\n Determines if the options is disabled. If true the option can't be selected\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n public get disabled() {\n return this._disabled;\n }\n public set disabled(newValue) {\n const oldValue = this._disabled;\n this._disabled = newValue;\n this.selectable = !this._disabled;\n this.requestUpdate('disabled', oldValue);\n }\n\n constructor() {\n super();\n this.selectable = true;\n this.deselectable = false;\n }\n\n render() {\n return html`${this.multiple ? html`<span id=\"checkbox\"></span>` : nothing}\n <slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n position: relative;\n cursor: pointer;\n margin: 1px var(--uui-size-1);\n border-radius: var(--uui-border-radius);\n outline: 2px solid transparent;\n outline-offset: -2px;\n padding: var(--uui-size-2);\n padding-left: var(--uui-size-3);\n }\n\n :host(:first-child) {\n margin-top: 6px;\n }\n :host(:last-child) {\n margin-bottom: 6px;\n }\n\n :host([selected]):host([active])::after {\n display: block;\n content: '';\n position: absolute;\n inset: 2px;\n border: var(--uui-color-surface) solid 1px;\n border-radius: calc(var(--uui-border-radius) - 1px);\n pointer-events: none;\n }\n /\n :host::before {\n display: block;\n content: '';\n opacity: 0;\n position: absolute;\n inset: 0;\n background-color: var(--uui-color-selected);\n }\n\n :host(:hover)::before {\n opacity: 0.15;\n border-radius: var(--uui-border-radius);\n } */\n\n :host(:hover) {\n background-color: var(--uui-color-surface-emphasis);\n color: var(--uui-color-interactive-emphasis);\n }\n\n :host([disabled]) {\n cursor: auto;\n color: var(--uui-color-disabled-contrast);\n background-color: var(--uui-color-disabled);\n }\n\n :host([disabled]:hover) {\n background-color: var(--uui-color-disabled);\n }\n\n :host([active]) {\n outline-color: var(--uui-color-focus);\n }\n\n :host([selected]:not([multiple])) {\n color: var(--uui-color-selected-contrast);\n background-color: var(--uui-color-selected);\n }\n\n :host([selected]:not([multiple]):hover) {\n color: var(--uui-color-selected-contrast);\n background-color: var(--uui-color-selected-emphasis);\n }\n :host([selected][disabled]) {\n color: var(--uui-color-disabled-contrast);\n background-color: var(--uui-color-disabled);\n }\n\n #checkbox {\n display: inline-block;\n width: 16px;\n height: 16px;\n min-width: 16px;\n border: 2px solid var(--uui-color-border-standalone);\n border-radius: 3px;\n margin-right: var(--uui-size-2);\n vertical-align: middle;\n box-sizing: border-box;\n position: relative;\n }\n\n :host([selected]) #checkbox {\n background-color: var(--uui-color-selected);\n border-color: var(--uui-color-selected);\n }\n\n :host([selected]) #checkbox::after {\n content: '';\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 2px;\n margin: auto;\n width: 4px;\n height: 8px;\n border: solid var(--uui-color-selected-contrast);\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASO,MAAM,gCAAN,MAAM,sCAAqC;AAAA,EAChD,YAAY,UAAU;AACxB,EAAE;AAAA,EA8DA,cAAc;AACZ,UAAA;AA3DF,SAAQ,YAAY;AAEX,SAAA,gBAAgB;AAGzB,SAAA,WAAW;AAuDT,SAAK,aAAa;AAClB,SAAK,eAAe;AAAA,EACtB;AAAA,EAhDA,IAAW,QAAgB;AACzB,WAAO,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,UAAU;AAAA,EACjE;AAAA,EACA,IAAW,MAAM,UAAkB;AACjC,UAAM,WAAW,KAAK;AACtB,SAAK,SAAS;AACd,SAAK,cAAc,SAAS,QAAQ;AAAA,EACtC;AAAA,EASA,IAAW,eAAe;AACxB,WAAO,KAAK,gBACR,KAAK,gBACL,KAAK,aAAa,UAAU;AAAA,EAClC;AAAA,EACA,IAAW,aAAa,UAAU;AAChC,UAAM,WAAW,KAAK;AACtB,SAAK,gBAAgB;AACrB,SAAK,cAAc,gBAAgB,QAAQ;AAAA,EAC7C;AAAA,EASA,IAAW,WAAW;AACpB,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAW,SAAS,UAAU;AAC5B,UAAM,WAAW,KAAK;AACtB,SAAK,YAAY;AACjB,SAAK,aAAa,CAAC,KAAK;AACxB,SAAK,cAAc,YAAY,QAAQ;AAAA,EACzC;AAAA,EAQA,SAAS;AACP,WAAO,OAAO,KAAK,WAAW,oCAAoC,OAAO;AAAA;AAAA,EAE3E;AAiHF;AA/GE,8BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5EG,IAAM,+BAAN;AAMG,gBAAA;AAAA,EADP,MAAA;AAAM,GALI,6BAMH,WAAA,aAAA,CAAA;AAEC,gBAAA;AAAA,EAAR,MAAA;AAAM,GARI,6BAQF,WAAA,iBAAA,CAAA;AAGT,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAV/B,6BAWX,WAAA,YAAA,CAAA;AASW,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnBf,6BAoBA,WAAA,SAAA,CAAA;AAgBA,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAnC3C,6BAoCA,WAAA,gBAAA,CAAA;AAkBA,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GArD/B,6BAsDA,WAAA,YAAA,CAAA;"}

package/dist/components/combobox-list/combobox-list.element.d.ts CHANGED Viewed

@@ -22,6 +22,7 @@ export declare class UUIComboboxListElement extends LitElement {
      * @default ""
      */
     displayValue: string;
+    multiple: boolean;
     private _for?;
     /**
      * provide another element of which keyboard navigation
@@ -36,12 +37,25 @@ export declare class UUIComboboxListElement extends LitElement {
     private _value;
     private _activeElementValue;
     private _selectedElement;
+    private _selectedValues;
+    private _selectedElements;
+    /**
+     * Array of selected option values. Only relevant when multiple is true.
+     * @type {string[]}
+     */
+    get selectedValues(): string[];
+    /**
+     * Array of display values for selected options. Only relevant when multiple is true.
+     * @type {string[]}
+     */
+    get selectedDisplayValues(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _updateSelection;
     private readonly _onSlotChange;
     private readonly _onSelected;
     private readonly _onDeselected;
+    resetSelection(): void;
     private get _getActiveIndex();
     private get _getActiveElement();
     private readonly _moveIndex;