@vonage/vivid 5.15.0 → 5.16.0

package/combobox/definition.js

@@ -1,647 +1,3 @@
-import { iconDefinition } from '../icon/definition.js';
-import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
-import { l as listboxOptionDefinition } from '../unbundled/definition3.js';
-import { s as styles$1 } from '../unbundled/text-field.js';
-import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { Observable, attr, observable, ref, slotted, html, when } from '@microsoft/fast-element';
-import { uniqueId, limit, classNames } from '@microsoft/fast-web-utilities';
-import { L as Listbox } from '../unbundled/listbox.js';
-import { F as FormAssociated } from '../unbundled/form-associated.js';
-import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
-import { W as WithErrorText } from '../unbundled/with-error-text.js';
-import { W as WithSuccessText } from '../unbundled/with-success-text.js';
-import { F as FormElement } from '../unbundled/form-element.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
-import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
-import { c as chevronTemplateFactory } from '../unbundled/definition.js';
-
-const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
-
-const ComboboxAutocomplete = {
-  inline: "inline",
-  list: "list",
-  both: "both",
-  none: "none"
-};
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Combobox extends WithContextualHelp(
-  WithFeedback(
-    WithErrorText(
-      WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))
-    )
-  )
-) {
-  constructor() {
-    super(...arguments);
-    /**
-     * The collection of currently filtered options.
-     *
-     * @public
-     */
-    this.filteredOptions = [];
-    /**
-     * The current filter value.
-     *
-     * @internal
-     */
-    this.filter = "";
-    this.fixedDropdown = false;
-    /**
-     * The unique id for the internal listbox element.
-     *
-     * @internal
-     */
-    this.listboxId = uniqueId("listbox-");
-    this.maxHeight = 0;
-    this.open = false;
-    /**
-     * @internal
-     */
-    this.proxy = document.createElement("input");
-  }
-  /**
-   * @internal
-   */
-  formResetCallback() {
-    super.formResetCallback();
-    this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
-    this.value = this.firstSelectedOption?.text || "";
-  }
-  /** {@inheritDoc (FormAssociated:interface).validate} */
-  validate() {
-    super.validate(this.control);
-  }
-  get isAutocompleteInline() {
-    return this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth;
-  }
-  get isAutocompleteList() {
-    return this.autocomplete === ComboboxAutocomplete.list || this.isAutocompleteBoth;
-  }
-  get isAutocompleteBoth() {
-    return this.autocomplete === ComboboxAutocomplete.both;
-  }
-  /**
-   * @internal
-   */
-  openChanged() {
-    if (this.open) {
-      this.enqueueScrollSelectedOptionIntoViewIfNeeded();
-    }
-  }
-  /**
-   * The list of options.
-   *
-   * @public
-   * @remarks
-   * Overrides `Listbox.options`.
-   */
-  get options() {
-    Observable.track(this, "options");
-    return this.filteredOptions.length ? this.filteredOptions : this._options;
-  }
-  set options(value) {
-    super.options = value;
-  }
-  /**
-   * Updates the placeholder on the proxy element.
-   * @internal
-   */
-  placeholderChanged() {
-    /* v8 ignore if -- @preserve */
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.placeholder = this.placeholder;
-    }
-  }
-  /**
-   * @internal
-   */
-  valueChanged(prev, next) {
-    if (this.$fastController.isConnected && this.options) {
-      const selectedIndex = this.options.findIndex(
-        (el) => el.text.toLowerCase() === next.toLowerCase()
-      );
-      const prevSelectedValue = this.options[this.selectedIndex]?.text;
-      const nextSelectedValue = this.options[selectedIndex]?.text;
-      this.selectedIndex = prevSelectedValue !== nextSelectedValue ? selectedIndex : this.selectedIndex;
-    }
-    super.valueChanged(prev, next);
-  }
-  /**
-   * Handle opening and closing the listbox when the combobox is clicked.
-   *
-   * @param e - the mouse event
-   * @internal
-   */
-  clickHandler(e) {
-    if (this.disabled || this._isFromContextualHelp(e)) {
-      return;
-    }
-    if (this.open) {
-      const capturedOption = e.target.closest(
-        `option,[role=option],[data-vvd-component=option]`
-      );
-      if (!capturedOption || capturedOption.disabled) {
-        return;
-      }
-      this.selectedOptions = [capturedOption];
-      this.control.value = capturedOption.text;
-      this.clearSelectionRange();
-      this.updateValue(true);
-    }
-    this.open = !this.open;
-    if (this.open) {
-      this.control.focus();
-    }
-    return true;
-  }
-  /**
-   * Handle closing the listbox when the combobox is open and the chevron icon is clicked.
-   *
-   * @param e - the mouse event
-   * @internal
-   */
-  _chevronIconClickHandler(e) {
-    if (!this.open) return;
-    e.stopPropagation();
-    this.open = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.value) {
-      this.initialValue = this.value;
-    }
-    this._popup.anchor = this._anchor;
-  }
-  /**
-   * Filter available options by text value.
-   *
-   * @public
-   */
-  filterOptions() {
-    if (!this.autocomplete || this.autocomplete === ComboboxAutocomplete.none) {
-      this.filter = "";
-    }
-    this.filteredOptions = this._options.filter(
-      (o) => o.text.toLowerCase().startsWith(this.filter.toLowerCase())
-    );
-    if (this.isAutocompleteList) {
-      this._options.forEach((o) => {
-        o.hidden = !this.filteredOptions.includes(o);
-      });
-    }
-  }
-  /**
-   * Focus the control and scroll the first selected option into view.
-   *
-   * @internal
-   * @remarks
-   * Overrides: `Listbox.focusAndScrollOptionIntoView`
-   */
-  focusAndScrollOptionIntoView() {
-    if (this.contains(document.activeElement)) {
-      this.control.focus();
-      this.enqueueScrollSelectedOptionIntoViewIfNeeded();
-    }
-  }
-  /**
-   * @internal
-   */
-  enqueueScrollSelectedOptionIntoViewIfNeeded() {
-    const firstSelectedOption = this.firstSelectedOption;
-    /* v8 ignore else -- @preserve */
-    if (firstSelectedOption) {
-      requestAnimationFrame(() => {
-        firstSelectedOption.scrollIntoView({ block: "nearest" });
-      });
-    }
-  }
-  /**
-   * Handle focus state when the element or its children lose focus.
-   *
-   * @param e - The focus event
-   * @internal
-   */
-  focusoutHandler(e) {
-    this.syncValue();
-    if (!this.open) {
-      return true;
-    }
-    const focusTarget = e.relatedTarget;
-    if (this.isSameNode(focusTarget)) {
-      this.focus();
-      return;
-    }
-    this.open = false;
-  }
-  /**
-   * Handle content changes on the control input.
-   *
-   * @param e - the input event
-   * @internal
-   */
-  inputHandler(e) {
-    this.filter = this.control.value;
-    this.filterOptions();
-    if (!this.isAutocompleteInline) {
-      this.selectedIndex = this.options.map((option) => option.text).indexOf(this.control.value);
-    }
-    if (e.inputType.includes("deleteContent") || !this.filter.length) {
-      return true;
-    }
-    if (this.isAutocompleteList && !this.open) {
-      this.open = true;
-    }
-    if (this.isAutocompleteInline) {
-      if (this.filteredOptions.length) {
-        this.selectedOptions = [this.filteredOptions[0]];
-        this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
-        this.setInlineSelection();
-      } else {
-        this.selectedIndex = -1;
-      }
-    }
-    return;
-  }
-  /**
-   * Handle keydown actions for listbox navigation.
-   *
-   * @param e - the keyboard event
-   * @internal
-   */
-  keydownHandler(e) {
-    const key = e.key;
-    if (e.ctrlKey || e.shiftKey) {
-      return true;
-    }
-    switch (key) {
-      case "Enter": {
-        this.syncValue();
-        /* v8 ignore else -- @preserve */
-        if (this.isAutocompleteInline) {
-          this.filter = this.value;
-        }
-        this.open = false;
-        this.clearSelectionRange();
-        break;
-      }
-      case "Escape": {
-        /* v8 ignore else -- @preserve */
-        if (!this.isAutocompleteInline) {
-          this.selectedIndex = -1;
-        }
-        if (this.open) {
-          this.open = false;
-          break;
-        }
-        this.value = "";
-        this.control.value = "";
-        this.filter = "";
-        this.filterOptions();
-        break;
-      }
-      case "Tab": {
-        this.setInputToSelection();
-        if (!this.open) {
-          return true;
-        }
-        e.preventDefault();
-        this.open = false;
-        break;
-      }
-      case "ArrowUp":
-      case "ArrowDown": {
-        this.filterOptions();
-        if (!this.open) {
-          this.open = true;
-          break;
-        }
-        /* v8 ignore else -- @preserve */
-        if (this.filteredOptions.length > 0) {
-          super.keydownHandler(e);
-        }
-        if (this.isAutocompleteInline) {
-          this.setInlineSelection();
-        }
-        break;
-      }
-      default: {
-        return true;
-      }
-    }
-  }
-  /**
-   * Ensure that the selectedIndex is within the current allowable filtered range.
-   *
-   * @param prev - the previous selected index value
-   * @param next - the current selected index value
-   *
-   * @internal
-   */
-  selectedIndexChanged(prev, next) {
-    if (this.$fastController.isConnected) {
-      next = limit(-1, this.options.length - 1, next);
-      if (next !== this.selectedIndex) {
-        this.selectedIndex = next;
-        return;
-      }
-      super.selectedIndexChanged(prev, next);
-    }
-  }
-  /**
-   * Move focus to the previous selectable option.
-   *
-   * @internal
-   * @remarks
-   * Overrides `Listbox.selectPreviousOption`
-   */
-  selectPreviousOption() {
-    if (!this.disabled && this.selectedIndex >= 0) {
-      this.selectedIndex = this.selectedIndex - 1;
-    }
-  }
-  _isDefaultSelected(option) {
-    return super._isDefaultSelected(option) || option.text !== "" && option.text === this.initialValue;
-  }
-  /**
-   * Focus and set the content of the control based on the first selected option.
-   *
-   * @internal
-   */
-  setInputToSelection() {
-    if (this.firstSelectedOption) {
-      this.control.value = this.firstSelectedOption.text;
-      this.control.focus();
-    }
-  }
-  /**
-   * Focus, set and select the content of the control based on the first selected option.
-   *
-   * @internal
-   */
-  setInlineSelection() {
-    /* v8 ignore else -- @preserve */
-    if (this.firstSelectedOption) {
-      this.setInputToSelection();
-      this.control.setSelectionRange(
-        this.filter.length,
-        this.control.value.length,
-        "backward"
-      );
-    }
-  }
-  /**
-   * Determines if a value update should involve emitting a change event, then updates the value.
-   *
-   * @internal
-   */
-  syncValue() {
-    const newValue = this.firstSelectedOption?.text ?? this.control.value;
-    this.updateValue(this.value !== newValue);
-  }
-  /**
-   * Ensure that the entire list of options is used when setting the selected property.
-   *
-   * @param prev - the previous list of selected options
-   * @param next - the current list of selected options
-   *
-   * @internal
-   * @remarks
-   * Overrides: `Listbox.selectedOptionsChanged`
-   */
-  selectedOptionsChanged(_prev, next) {
-    if (this.$fastController.isConnected) {
-      this._options.forEach((o) => {
-        o.selected = next.includes(o);
-      });
-    }
-  }
-  /**
-   * Synchronize the form-associated proxy and update the value property of the element.
-   *
-   * @param prev - the previous collection of slotted option elements
-   * @param next - the next collection of slotted option elements
-   *
-   * @internal
-   */
-  slottedOptionsChanged(prev, next) {
-    super.slottedOptionsChanged(prev, next);
-    this.updateValue();
-    const scale = this.getAttribute("scale") || this.scale;
-    next.forEach((element) => {
-      if (scale) {
-        element.setAttribute("scale", scale);
-        element.scale = scale;
-      }
-    });
-  }
-  /**
-   * Sets the value and to match the first selected option.
-   *
-   * @param shouldEmit - if true, the change event will be emitted
-   *
-   * @internal
-   */
-  updateValue(shouldEmit) {
-    if (this.$fastController.isConnected) {
-      this.value = this.firstSelectedOption?.text || this.control.value;
-    }
-    if (shouldEmit) {
-      this.$emit("change");
-    }
-  }
-  /**
-   * @internal
-   */
-  clearSelectionRange() {
-    const controlValueLength = this.control.value.length;
-    this.control.setSelectionRange(controlValueLength, controlValueLength);
-  }
-}
-__decorateClass([
-  attr({ attribute: "autocomplete", mode: "fromView" })
-], Combobox.prototype, "autocomplete");
-__decorateClass([
-  attr
-], Combobox.prototype, "appearance");
-__decorateClass([
-  attr
-], Combobox.prototype, "shape");
-__decorateClass([
-  attr()
-], Combobox.prototype, "scale");
-__decorateClass([
-  attr
-], Combobox.prototype, "placement");
-__decorateClass([
-  attr({ mode: "boolean", attribute: "fixed-dropdown" })
-], Combobox.prototype, "fixedDropdown");
-__decorateClass([
-  observable
-], Combobox.prototype, "metaSlottedContent");
-__decorateClass([
-  observable
-], Combobox.prototype, "maxHeight");
-__decorateClass([
-  attr({ attribute: "open", mode: "boolean" })
-], Combobox.prototype, "open");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr
-], Combobox.prototype, "placeholder");
-
-const getStateClasses = ({
-  icon,
-  iconSlottedContent,
-  metaSlottedContent,
-  errorValidationMessage,
-  successText,
-  shape,
-  scale,
-  disabled,
-  placeholder,
-  label,
-  appearance,
-  open,
-  _activeDescendant
-}) => classNames(
-  "base",
-  ["disabled", disabled],
-  [`shape-${shape}`, Boolean(shape)],
-  [`size-${scale}`, Boolean(scale)],
-  ["placeholder", Boolean(placeholder)],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  ["no-label", !label],
-  ["has-icon", !!icon || Boolean(iconSlottedContent?.length)],
-  ["has-meta", Boolean(metaSlottedContent?.length)],
-  ["has-activedescendant", Boolean(_activeDescendant) && open],
-  ["error", Boolean(errorValidationMessage)],
-  ["success", !!successText]
-);
-function renderLabel() {
-  return html` <label for="control" class="label">
-		${(x) => x.label}
-	</label>`;
-}
-function setFixedDropdownVarWidth(x) {
-  return x.open && x.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
-    x.getBoundingClientRect().width
-  )}px` : null;
-}
-function renderInput(context) {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const chevronTemplate = chevronTemplateFactory(context);
-  return html` <div class="${getStateClasses}" ${ref("_anchor")}>
-		<div
-			class="label-wrapper"
-			?hidden=${(x) => !x.label && !x._hasContextualHelp}
-		>
-			${when((x) => x.label, renderLabel())}
-			<slot
-				name="contextual-help"
-				${slotted("_contextualHelpSlottedContent")}
-			></slot>
-		</div>
-		<div class="fieldset">
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-			<div class="wrapper">
-				<input
-					id="control"
-					autocomplete="off"
-					class="control"
-					aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
-					aria-autocomplete="${(x) => x.autocomplete}"
-					aria-controls="${(x) => x.listboxId}"
-					aria-expanded="${(x) => x.open}"
-					aria-haspopup="listbox"
-					aria-describedby="${(x) => x._feedbackDescribedBy}"
-					placeholder="${(x) => x.placeholder}"
-					role="combobox"
-					type="text"
-					?disabled="${(x) => x.disabled}"
-					:value="${(x) => x.value}"
-					@input="${(x, c) => x.inputHandler(c.event)}"
-					${ref("control")}
-				/>
-			</div>
-			<div class="leading-items-wrapper">
-				<slot name="meta" ${slotted("metaSlottedContent")}></slot>
-				<div
-					@click="${(x, c) => x._chevronIconClickHandler(c.event)}"
-				>
-					${chevronTemplate}
-				</div>
-			</div>
-		</div>
-	</div>`;
-}
-const comboboxTemplate = (context) => {
-  const popupTag = context.tagFor(Popup);
-  return html`
-		<template
-			tabindex="${(x) => !x.disabled ? "0" : null}"
-			@click="${(x, c) => x.clickHandler(c.event)}"
-			@focusout="${(x, c) => x.focusoutHandler(c.event)}"
-			@keydown="${(x, { event }) => {
-    x.open && handleEscapeKeyAndStopPropogation(event);
-    return x.keydownHandler(event);
-  }}"
-		>
-			<div class="control-wrapper">
-				${() => renderInput(context)}
-				<${popupTag} class="popup"
-					style="${setFixedDropdownVarWidth}"
-					?open="${(x) => x.open}"
-					placement="${(x) => x.placement ?? "bottom-start"}"
-					strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}"
-					${ref("_popup")}>
-					<div id="${(x) => x.listboxId}"
-						class="listbox"
-						role="listbox"
-						?disabled="${(x) => x.disabled}"
-						${ref("listbox")}>
-						<slot ${slotted({
-    filter: Listbox.slottedOptionFilter,
-    flatten: true,
-    property: "slottedOptions"
-  })}>
-						</slot>
-					</div>
-				</${popupTag}>
-			</div>
-			<div class="feedback-wrapper" @click="${(_, c) => c.event.stopPropagation()}">
-				${(x) => x._getFeedbackTemplate(context)}
-			</div>
-    </template>
-	`;
-};
-
-const comboboxDefinition = defineVividComponent(
-  "combobox",
-  Combobox,
-  comboboxTemplate,
-  [
-    iconDefinition,
-    popupDefinition,
-    listboxOptionDefinition,
-    feedbackMessageDefinition
-  ],
-  {
-    styles: [styles$1, styles],
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerCombobox = createRegisterFunction(comboboxDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerCombobox, r as Combobox, t as comboboxDefinition } from "../unbundled/definition28.js";
 export { Combobox as VwcComboboxElement, comboboxDefinition, registerCombobox };