@govtechsg/sgds-web-component 3.5.3-rc.0 → 3.5.3-rc.2

package/base/select-element.d.ts

@@ -73,7 +73,7 @@ export declare class SelectElement extends SelectElement_base implements SgdsFor
     protected _labelId: string;
     protected _renderLabel(): import("lit-html").TemplateResult<1>;
     protected _handleClick(): any;
-    protected _getMenuListFromOptions(): SgdsOptionData[];
+    protected _getMenuListFromOptions(assignedElements: Element[]): SgdsOptionData[];
     protected options: OptionElement[];
 }
 export interface SgdsOptionData {

package/base/select-element.js

@@ -138,9 +138,8 @@ class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) {
             this.hideMenu();
         }
     }
-    _getMenuListFromOptions() {
-        var _a;
-        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.map((el) => {
+    _getMenuListFromOptions(assignedElements) {
+        return assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.map((el) => {
             var _a, _b, _c, _d, _e, _f;
             return ({
                 label: (_b = (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "",

package/base/select-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-element.js","sources":["../../src/base/select-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { size } from \"@floating-ui/dom\";\nimport dropdownMenuStyle from \"../components/Dropdown/dropdown-menu.css\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport hintTextStyles from \"../styles/form-hint.css\";\nimport formControlStyles from \"../styles/form-text-control.css\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../utils/formSubmitController\";\nimport generateId from \"../utils/generateId\";\nimport { SgdsFormValidatorMixin } from \"../utils/validatorMixin\";\nimport { DropdownListElement } from \"./dropdown-list-element\";\nimport { OptionElement } from \"./option-element\";\n\nexport class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) implements SgdsFormControl {\n  static styles = [...DropdownListElement.styles, dropdownMenuStyle, hintTextStyles, feedbackStyles, formControlStyles];\n\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** The input's name attribute */\n  @property({ reflect: true }) name: string;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**\n   * IMPORTANT:\n   * We still expose `.value` externally, but this is now the underlying ID or data\n   * (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.\n   */\n  @property({ type: String, reflect: true })\n  value = \"\";\n\n  @state()\n  protected displayValue = \"\";\n\n  /** @internal Gets or sets the default value used to reset this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector. */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The list of items to display in the dropdown.\n   * `interface SgdsComboBoxItemData {\n   * label: string;\n   * value: string;\n   * }`\n   * @deprecated\n   * Deprecated in favour of slots\n   */\n  @property({ type: Array }) menuList: SgdsOptionData[] = [];\n  /** Track selected items (even for single-select, but it will have at most one). */\n  @state()\n  protected selectedItems: SgdsOptionData[] = [];\n  /** @internal Managed filtered menu on the fly with input change*/\n  @state()\n  protected filteredMenuList: SgdsOptionData[] = [];\n\n  protected _isTouched = false;\n\n  constructor() {\n    super();\n\n    this.floatingOpts = {\n      middleware: [\n        size({\n          apply({ rects, elements }) {\n            elements.floating.style.width = `${rects.reference.width}px`;\n          }\n        })\n      ]\n    };\n  }\n\n  @queryAsync(\"input.form-control\") protected _input: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"blur\", async () => {\n      this.invalid = !this._mixinReportValidity();\n    });\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  protected _controlId = generateId(\"input\");\n  protected _renderFeedback() {\n    return this.invalid && this.hasFeedback\n      ? html` <div class=\"invalid-feedback-container\">\n          <slot name=\"invalidIcon\">\n            <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          </slot>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  protected _labelId = generateId(\"label\");\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _handleClick() {\n    if (this.readonly) {\n      return null;\n    }\n    if (!this.menuIsOpen) {\n      this.showMenu();\n    } else {\n      this.hideMenu();\n    }\n  }\n  protected _getMenuListFromOptions(): SgdsOptionData[] {\n    return this.options?.map((el: OptionElement) => ({\n      label: el.textContent?.trim() ?? \"\",\n      value: el.getAttribute(\"value\") ?? el.textContent?.trim() ?? \"\",\n      disabled: el.disabled ?? undefined\n    }));\n  }\n\n  protected declare options: OptionElement[];\n}\n\nexport interface SgdsOptionData {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n"],"names":["generateId","dropdownMenuStyle","hintTextStyles","feedbackStyles","formControlStyles"],"mappings":"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"}
+{"version":3,"file":"select-element.js","sources":["../../src/base/select-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { size } from \"@floating-ui/dom\";\nimport dropdownMenuStyle from \"../components/Dropdown/dropdown-menu.css\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport hintTextStyles from \"../styles/form-hint.css\";\nimport formControlStyles from \"../styles/form-text-control.css\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../utils/formSubmitController\";\nimport generateId from \"../utils/generateId\";\nimport { SgdsFormValidatorMixin } from \"../utils/validatorMixin\";\nimport { DropdownListElement } from \"./dropdown-list-element\";\nimport { OptionElement } from \"./option-element\";\n\nexport class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) implements SgdsFormControl {\n  static styles = [...DropdownListElement.styles, dropdownMenuStyle, hintTextStyles, feedbackStyles, formControlStyles];\n\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** The input's name attribute */\n  @property({ reflect: true }) name: string;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**\n   * IMPORTANT:\n   * We still expose `.value` externally, but this is now the underlying ID or data\n   * (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.\n   */\n  @property({ type: String, reflect: true })\n  value = \"\";\n\n  @state()\n  protected displayValue = \"\";\n\n  /** @internal Gets or sets the default value used to reset this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector. */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The list of items to display in the dropdown.\n   * `interface SgdsComboBoxItemData {\n   * label: string;\n   * value: string;\n   * }`\n   * @deprecated\n   * Deprecated in favour of slots\n   */\n  @property({ type: Array }) menuList: SgdsOptionData[] = [];\n  /** Track selected items (even for single-select, but it will have at most one). */\n  @state()\n  protected selectedItems: SgdsOptionData[] = [];\n  /** @internal Managed filtered menu on the fly with input change*/\n  @state()\n  protected filteredMenuList: SgdsOptionData[] = [];\n\n  protected _isTouched = false;\n\n  constructor() {\n    super();\n\n    this.floatingOpts = {\n      middleware: [\n        size({\n          apply({ rects, elements }) {\n            elements.floating.style.width = `${rects.reference.width}px`;\n          }\n        })\n      ]\n    };\n  }\n\n  @queryAsync(\"input.form-control\") protected _input: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"blur\", async () => {\n      this.invalid = !this._mixinReportValidity();\n    });\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  protected _controlId = generateId(\"input\");\n  protected _renderFeedback() {\n    return this.invalid && this.hasFeedback\n      ? html` <div class=\"invalid-feedback-container\">\n          <slot name=\"invalidIcon\">\n            <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          </slot>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  protected _labelId = generateId(\"label\");\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _handleClick() {\n    if (this.readonly) {\n      return null;\n    }\n    if (!this.menuIsOpen) {\n      this.showMenu();\n    } else {\n      this.hideMenu();\n    }\n  }\n  protected _getMenuListFromOptions(assignedElements: Element[]): SgdsOptionData[] {\n    return assignedElements?.map((el: OptionElement) => ({\n      label: el.textContent?.trim() ?? \"\",\n      value: el.getAttribute(\"value\") ?? el.textContent?.trim() ?? \"\",\n      disabled: el.disabled ?? undefined\n    }));\n  }\n\n  protected declare options: OptionElement[];\n}\n\nexport interface SgdsOptionData {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n"],"names":["generateId","dropdownMenuStyle","hintTextStyles","feedbackStyles","formControlStyles"],"mappings":";;;;;;;;;;;;;;MAea,aAAc,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC,CAAA;AAkE5E,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;;QA/DmB,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGX,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAC;;QASC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;;QAGlB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAE7D;;;;AAIG;QAEH,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QAGD,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;;QAI5B,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;;QAG0B,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGrB,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;;QAGpB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAE5D;;;;;;;AAOG;QACwB,IAAQ,CAAA,QAAA,GAAqB,EAAE,CAAC;;QAGjD,IAAa,CAAA,aAAA,GAAqB,EAAE,CAAC;;QAGrC,IAAgB,CAAA,gBAAA,GAAqB,EAAE,CAAC;QAExC,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;AAkDnB,QAAA,IAAA,CAAA,UAAU,GAAGA,KAAU,CAAC,OAAO,CAAC,CAAC;AAkBjC,QAAA,IAAA,CAAA,QAAQ,GAAGA,KAAU,CAAC,OAAO,CAAC,CAAC;QA/DvC,IAAI,CAAC,YAAY,GAAG;AAClB,YAAA,UAAU,EAAE;AACV,gBAAA,IAAI,CAAC;AACH,oBAAA,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAA;AACvB,wBAAA,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAG,EAAA,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;qBAC9D;iBACF,CAAC;AACH,aAAA;SACF,CAAC;KACH;IAID,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,YAAW;YACvC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;AAC9C,SAAC,CAAC,CAAC;KACJ;AAED;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AACD;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;IAES,eAAe,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;cACnC,IAAI,CAAA,CAAA;;;;AAIS,mBAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACtB,YAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAA;;AAEnE,cAAA,CAAA;cACP,IAAI,CAAA,CAAA,EAAG,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE,CAAC;KACrC;IAES,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAAa,UAAA,EAAA,IAAI,CAAC,UAAU,CAA2B,wBAAA,EAAA,IAAI,CAAC,QAAQ,SAAS,CAAC;AAC3G,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;IAES,YAAY,GAAA;QACpB,MAAM,aAAa,GAAG,IAAI,CAAA,CAAA;;AAEhB,YAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AAChB,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACV,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACC,SAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;KAEhB,CAAC;AACF,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;KACpC;IAES,YAAY,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,OAAO,IAAI,CAAC;SACb;AACD,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;aAAM;YACL,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;AACS,IAAA,uBAAuB,CAAC,gBAA2B,EAAA;QAC3D,OAAO,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,GAAG,CAAC,CAAC,EAAiB,KAAI;;AAAC,YAAA,QAAC;gBACnD,KAAK,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,EAAE,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE;AACnC,gBAAA,KAAK,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAA,EAAA,GAAA,EAAE,CAAC,WAAW,0CAAE,IAAI,EAAE,mCAAI,EAAE;AAC/D,gBAAA,QAAQ,EAAE,CAAA,EAAA,GAAA,EAAE,CAAC,QAAQ,mCAAI,SAAS;AACnC,aAAA,EAAC;AAAA,SAAA,CAAC,CAAC;KACL;;AAnKM,aAAA,CAAA,MAAM,GAAG,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAEC,QAAiB,EAAEC,UAAc,EAAEC,UAAc,EAAEC,UAAiB,CAAC,CAAC;AAGzF,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGX,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGd,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGC,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGnB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ7D,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC/B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGD,UAAA,CAAA;AADT,IAAA,KAAK,EAAE;AACoB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5B,UAAA,CAAA;AADC,IAAA,YAAY,EAAE;AACG,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG0B,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUjC,UAAA,CAAA;AAA1B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAAiC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjD,UAAA,CAAA;AADT,IAAA,KAAK,EAAE;AACuC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrC,UAAA,CAAA;AADT,IAAA,KAAK,EAAE;AAC0C,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAkBN,UAAA,CAAA;IAA3C,UAAU,CAAC,oBAAoB,CAAC;AAA6C,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/ComboBox/index.umd.js

@@ -7989,9 +7989,8 @@
               this.hideMenu();
           }
       }
-      _getMenuListFromOptions() {
-          var _a;
-          return (_a = this.options) === null || _a === void 0 ? void 0 : _a.map((el) => {
+      _getMenuListFromOptions(assignedElements) {
+          return assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.map((el) => {
               var _a, _b, _c, _d, _e, _f;
               return ({
                   label: (_b = (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "",
@@ -11769,9 +11768,10 @@
               this.showMenu();
           }
       }
-      _handleDefaultSlotChange() {
+      _handleDefaultSlotChange(e) {
+          const assignedElements = e.target.assignedElements({ flatten: true });
           /** this will trigger _updateValueAndDisplayValue */
-          this.menuList = this._getMenuListFromOptions();
+          this.menuList = this._getMenuListFromOptions(assignedElements);
       }
       async _handleValueChange() {
           // when value change, always emit a change event