@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

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

@@ -1,213 +1,139 @@
-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, _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 __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { UUIFormControlMixin as UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.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";
-import "../input/input.js";
-import "../symbol-expand/symbol-expand.js";
-import "../button/button.js";
+import "../icon-registry-essential/svgs/index.js";
 import "../icon/icon.js";
+import "../button/button.js";
+import "../input/input.js";
 import "../scroll-container/scroll-container.js";
 import "../popover-container/popover-container.js";
+import "../symbol-expand/symbol-expand.js";
 import "../tag/tag.js";
 import { UUIComboboxListEvent } from "../combobox-list/UUIComboboxListEvent.js";
-import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.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, _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 = "";
-    this._displayValue = "";
-    this._search = "";
-    this._isPhone = false;
-    this._isOpen = false;
-    this._selectedItems = [];
-    __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, () => {
-      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, () => {
-      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 (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();
-        __privateGet(this, _onOpen).call(this);
-      }
-      if (e.code === "ArrowUp" || e.code === "ArrowDown") {
-        __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();
-      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;
-      this._input.focus();
-      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
+import "../combobox-list/combobox-list.js";
+import { UUIComboboxEvent } from "./UUIComboboxEvent.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+//#region src/components/combobox/combobox.element.ts
+/**
+* @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
+*/
+var UUIComboboxElement = class extends UUIFormControlWithBasicsMixin(LitElement, "") {
+	constructor(..._args) {
+		super(..._args);
+		this.closeLabel = "Close";
+		this.disabled = false;
+		this.multiple = false;
+		this.hideExpandSymbol = false;
+		this.readonly = false;
+		this.placeholder = "";
+		this._displayValue = "";
+		this._search = "";
+		this._isPhone = false;
+		this._isOpen = false;
+		this._selectedItems = [];
+		this.#onPhoneChange = () => {
+			this._isPhone = this.#phoneMediaQuery.matches;
+		};
+		this.#onMouseDown = () => requestAnimationFrame(() => this._input.focus());
+		this.#onBlur = () => requestAnimationFrame(() => {
+			if (!this.shadowRoot?.activeElement) this.#onClose();
+		});
+		this.#onInput = (e) => {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			this.search = e.target.value;
+			this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
+			this.#onOpen();
+		};
+		this.#onInnerSlotChange = () => {
+			if (this.value && this.value !== this.#comboboxList?.value) this.#updateValue();
+		};
+		this.#onChange = () => {
+			const list = 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 : "";
+				this.#onClose();
+			}
+			this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
+		};
+		this.#onToggle = () => {
+			if (this.readonly) return;
+			this.open = !this.open;
+		};
+		this.#onOpen = () => {
+			if (this.open) return;
+			if (this.readonly) return;
+			this.open = true;
+		};
+		this.#onClose = () => {
+			if (!this.open) return;
+			this.open = false;
+			this.search = "";
+			this._input.value = this._displayValue;
+			this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
+		};
+		this.#onKeyDown = (e) => {
+			if (e.code === "Backspace" && this.multiple && this._selectedItems.length > 0 && this.search === "") {
+				const lastItem = this._selectedItems.at(-1);
+				if (lastItem) this.#onRemoveTag(e, lastItem.value);
+				return;
+			}
+			if (this.open === false && e.code === "Enter") {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				this.#onOpen();
+			}
+			if (e.code === "ArrowUp" || e.code === "ArrowDown") this.#onOpen();
+			if (e.code === "Escape") this.#onClose();
+		};
+		this.#onClear = (e) => {
+			if (e.key && e.key !== "Enter") return;
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			const list = 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;
+			this._input.focus();
+			this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
+			this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
+		};
+		this.#onRemoveTag = (e, value) => {
+			e.stopPropagation();
+			const list = 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;
+			}
+		};
+		this.#renderInput = () => {
+			return html`<uui-input
       slot="trigger"
       id="combobox-input"
       label="combobox-input"
@@ -218,25 +144,25 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
       .disabled=${this.disabled}
       .readonly=${this.readonly}
       popovertarget="combobox-popover"
-      @click=${__privateGet(this, _onToggle)}
-      @input=${__privateGet(this, _onInput)}
-      @keydown=${__privateGet(this, _onKeyDown)}>
+      @click=${this.#onToggle}
+      @input=${this.#onInput}
+      @keydown=${this.#onKeyDown}>
       <slot name="input-prepend" slot="prepend"></slot>
-      ${__privateGet(this, _renderSelectedTags).call(this)} ${__privateGet(this, _renderClearButton).call(this)}
+      ${this.#renderSelectedTags()} ${this.#renderClearButton()}
       ${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>
     </uui-input>`;
-    });
-    __privateSet(this, _renderClearButton, () => {
-      if (this.disabled) return nothing;
-      if (this.readonly) return nothing;
-      if (this.multiple) return nothing;
-      return html`<uui-button
+		};
+		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)}
-      @keydown=${__privateGet(this, _onClear)}
+      @click=${this.#onClear}
+      @keydown=${this.#onClear}
       label="clear"
       slot="append"
       compact
@@ -245,175 +171,160 @@ const _UUIComboboxElement = class _UUIComboboxElement extends UUIFormControlWith
       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">
+		};
+		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)}>
+            @click=${(e) => this.#onRemoveTag(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-tag>`)}`;
+		};
+		this.#renderDropdown = () => {
+			return html`<div id="dropdown">
       <uui-scroll-container tabindex="-1" id="scroll-container">
-        <slot @slotchange=${__privateMethod(this, _UUIComboboxElement_instances, onSlotChange_fn)}></slot>
+        <slot @slotchange=${this.#onSlotChange}></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)}>
+		};
+	}
+	set value(newValue) {
+		super.value = newValue;
+		if (typeof newValue === "string") this.#updateValue();
+	}
+	get value() {
+		return super.value;
+	}
+	/**
+	* The search input.
+	* @type {string}
+	* @attr
+	* @default ""
+	*/
+	set search(newValue) {
+		if (this.search === newValue) return;
+		const oldValue = this._search;
+		this._search = newValue;
+		this.requestUpdate("search", oldValue);
+	}
+	get search() {
+		return this._search;
+	}
+	/**
+	* Specifies if the popover should be open.
+	* @type {boolean}
+	* @attr
+	* @default false
+	*/
+	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;
+	}
+	#comboboxList;
+	#phoneMediaQuery;
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("blur", this.#onBlur);
+		this.addEventListener("mousedown", this.#onMouseDown);
+		this.#phoneMediaQuery = window.matchMedia("(max-width: 600px)");
+		this.#onPhoneChange();
+		this.#phoneMediaQuery.addEventListener("change", this.#onPhoneChange);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("blur", this.#onBlur);
+		this.removeEventListener("mousedown", this.#onMouseDown);
+		this.#phoneMediaQuery.removeEventListener("change", this.#onPhoneChange);
+	}
+	#onSlotChange() {
+		if (this.#comboboxList) {
+			this.#comboboxList.removeEventListener(UUIComboboxListEvent.CHANGE, this.#onChange);
+			this.#comboboxList.removeEventListener(UUIComboboxListEvent.INNER_SLOT_CHANGE, this.#onInnerSlotChange);
+		}
+		const list = this._comboboxListElements?.[0];
+		if (list) {
+			this.#comboboxList = list;
+			this.#comboboxList.for = this;
+			this.#comboboxList.multiple = this.multiple;
+			this.#comboboxList.addEventListener(UUIComboboxListEvent.CHANGE, this.#onChange);
+			this.#comboboxList.addEventListener(UUIComboboxListEvent.INNER_SLOT_CHANGE, this.#onInnerSlotChange);
+		}
+		this.updateComplete.then(() => {
+			this.#updateValue();
+		});
+	}
+	#onPhoneChange;
+	#updateValue() {
+		if (this.#comboboxList) {
+			this.#comboboxList.value = this.value;
+			requestAnimationFrame(() => this._displayValue = this.#comboboxList.displayValue || "");
+		}
+	}
+	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();
+	}
+	#onMouseDown;
+	#onBlur;
+	#onInput;
+	#onInnerSlotChange;
+	#onChange;
+	#onToggle;
+	#onOpen;
+	#onClose;
+	#onKeyDown;
+	#onClear;
+	#onRemoveTag;
+	#renderInput;
+	#renderClearButton;
+	#renderSelectedTags;
+	#renderDropdown;
+	render() {
+		if (this._isPhone && this.open) return html`<div id="phone-wrapper">
+        <uui-button label="close" look="primary" @click=${this.#onClose}>
           ${this.closeLabel}
         </uui-button>
-        ${__privateGet(this, _renderInput).call(this)} ${__privateGet(this, _renderDropdown).call(this)}
+        ${this.#renderInput()} ${this.#renderDropdown()}
       </div>`;
-    } else {
-      return html`
-        ${__privateGet(this, _renderInput).call(this)}
+		else return html`
+        ${this.#renderInput()}
         <uui-popover-container
           id="combobox-popover"
           popover="manual"
           placement="bottom-end">
-          ${__privateGet(this, _renderDropdown).call(this)}
+          ${this.#renderDropdown()}
         </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).multiple = this.multiple;
-    __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();
-_onRemoveTag = new WeakMap();
-_renderInput = new WeakMap();
-_renderClearButton = new WeakMap();
-_renderSelectedTags = new WeakMap();
-_renderDropdown = new WeakMap();
-_UUIComboboxElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         display: inline-flex;
       }
@@ -507,64 +418,49 @@ _UUIComboboxElement.styles = [
       :host([multiple]) uui-tag uui-button {
         font-size: 10px;
       }
-    `
-];
-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: true })
-], UUIComboboxElement.prototype, "multiple", 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);
-__decorateClass([
-  state()
-], UUIComboboxElement.prototype, "_selectedItems", 2);
-export {
-  UUIComboboxElement
+    `];
+	}
 };
-//# sourceMappingURL=combobox.element.js.map
+__decorate([property({
+	attribute: "value",
+	reflect: true
+})], UUIComboboxElement.prototype, "value", null);
+__decorate([property({ type: String })], UUIComboboxElement.prototype, "search", null);
+__decorate([property({ type: Boolean })], UUIComboboxElement.prototype, "open", null);
+__decorate([property({
+	type: String,
+	attribute: "close-label"
+})], UUIComboboxElement.prototype, "closeLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIComboboxElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIComboboxElement.prototype, "multiple", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: false,
+	attribute: "hide-expand-symbol"
+})], UUIComboboxElement.prototype, "hideExpandSymbol", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIComboboxElement.prototype, "readonly", void 0);
+__decorate([property()], UUIComboboxElement.prototype, "placeholder", void 0);
+__decorate([query("#combobox-input")], UUIComboboxElement.prototype, "_input", void 0);
+__decorate([query("#combobox-popover")], UUIComboboxElement.prototype, "_comboboxPopoverElement", void 0);
+__decorate([queryAssignedElements({
+	flatten: true,
+	selector: "uui-combobox-list"
+})], UUIComboboxElement.prototype, "_comboboxListElements", void 0);
+__decorate([state()], UUIComboboxElement.prototype, "_displayValue", void 0);
+__decorate([state()], UUIComboboxElement.prototype, "_search", void 0);
+__decorate([state()], UUIComboboxElement.prototype, "_isPhone", void 0);
+__decorate([state()], UUIComboboxElement.prototype, "_isOpen", void 0);
+__decorate([state()], UUIComboboxElement.prototype, "_selectedItems", void 0);
+//#endregion
+export { UUIComboboxElement };
+
+//# sourceMappingURL=combobox.element.js.map