@govtechsg/sgds-web-component 3.5.3-rc.4 → 3.5.3-rc.6

package/base/dropdown-list-element.d.ts

@@ -11,6 +11,7 @@ export declare class DropdownListElement extends DropdownElement {
     nextDropdownItemNo: number;
     /** @internal */
     prevDropdownItemNo: number;
+    hidden: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(changedProperties: PropertyValueMap<this>): void;

package/base/dropdown-list-element.js

@@ -1,5 +1,5 @@
 import { __decorate } from 'tslib';
-import { query, state } from 'lit/decorators.js';
+import { query, state, property } from 'lit/decorators.js';
 import { DropdownElement } from './dropdown-element.js';
 
 const TAB = "Tab";
@@ -16,6 +16,7 @@ class DropdownListElement extends DropdownElement {
         this.nextDropdownItemNo = 0;
         /** @internal */
         this.prevDropdownItemNo = -1;
+        this.hidden = false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -103,16 +104,17 @@ class DropdownListElement extends DropdownElement {
     }
     _getMenuItems() {
         var _a, _b;
+        const defaultSlot = this.shadowRoot.querySelector("slot#default");
         // for case when default slot is used e.g. dropdown, mainnavdropdown
-        if (this.shadowRoot.querySelector("slot#default")) {
+        if (defaultSlot) {
             const defaultSlotItems = (_a = this.shadowRoot.querySelector("slot#default")) === null || _a === void 0 ? void 0 : _a.assignedElements({
                 flatten: true
-            }).filter(el => !el.classList.contains("empty-menu"));
+            }).filter(el => !el.classList.contains("empty-menu") && !el.hasAttribute("hidden"));
             return defaultSlotItems;
         }
         // for case when there is no slot e.g. combobox
         if ((_b = this.menu) === null || _b === void 0 ? void 0 : _b.hasChildNodes()) {
-            const menuItems = this.menu.children;
+            const menuItems = Array.from(this.menu.children);
             return [...menuItems];
         }
         return [];
@@ -151,6 +153,9 @@ __decorate([
 __decorate([
     state()
 ], DropdownListElement.prototype, "prevDropdownItemNo", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DropdownListElement.prototype, "hidden", void 0);
 
 export { DropdownListElement };
 //# sourceMappingURL=dropdown-list-element.js.map

package/base/dropdown-list-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list-element.js","sources":["../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\n\n/**\n * @event sgds-select - Emitted event when a slot item is selected\n */\nexport class DropdownListElement extends DropdownElement {\n  static styles = DropdownElement.styles;\n\n  /**@internal */\n  @query(\"ul.dropdown-menu\")\n  private menu: HTMLUListElement;\n\n  /** @internal */\n  @state()\n  nextDropdownItemNo = 0;\n\n  /** @internal */\n  @state()\n  prevDropdownItemNo = -1;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n  }\n\n  protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n    const items = this._getActiveMenuItems();\n    const currentItemNo = items.indexOf(e.target as SgdsDropdownItem);\n    this.nextDropdownItemNo = currentItemNo + 1;\n    this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n    /** Emitted event from SgdsDropdown element when a slot item is selected */\n    const selectedItem = e.target as SgdsDropdownItem;\n    if (!selectedItem.disabled) {\n      this.emit(\"sgds-select\");\n      if (this.close !== \"outside\") {\n        this.hideMenu(); // <-- Use new API\n      }\n    }\n  }\n\n  private _resetMenu() {\n    this.nextDropdownItemNo = 0;\n    this.prevDropdownItemNo = -1;\n    // reset the tabindex\n    const items = this._getMenuItems();\n    items.forEach(item => {\n      const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n    });\n  }\n\n  protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (this.readonly) return;\n    const menuItems = this._getActiveMenuItems();\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        if (this.nextDropdownItemNo === menuItems.length) {\n          return this._setMenuItem(0);\n        } else {\n          return this._setMenuItem(this.nextDropdownItemNo > 0 ? this.nextDropdownItemNo : 0);\n        }\n      case ARROW_UP:\n        e.preventDefault();\n        if (this.prevDropdownItemNo < 0) {\n          return this._setMenuItem(menuItems.length - 1, false);\n        } else {\n          return this._setMenuItem(this.prevDropdownItemNo, false);\n        }\n      case TAB:\n        if (!this.menuIsOpen) {\n          return;\n        }\n        e.preventDefault();\n        if (e.shiftKey) {\n          if (this.prevDropdownItemNo < 0) {\n            return this._setMenuItem(menuItems.length - 1, false);\n          } else {\n            return this._setMenuItem(this.prevDropdownItemNo, false);\n          }\n        }\n        if (this.nextDropdownItemNo === menuItems.length) {\n          return this._setMenuItem(0);\n        } else {\n          return this._setMenuItem(this.nextDropdownItemNo > 0 ? this.nextDropdownItemNo : 0);\n        }\n      case ENTER:\n        if (menuItems.includes(e.target as SgdsDropdownItem)) {\n          return this.handleSelectSlot(e);\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _getMenuItems(): SgdsDropdownItem[] {\n    // for case when default slot is used e.g. dropdown, mainnavdropdown\n    if (this.shadowRoot.querySelector(\"slot#default\")) {\n      const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n        ?.assignedElements({\n          flatten: true\n        })\n        .filter(el => !el.classList.contains(\"empty-menu\")) as SgdsDropdownItem[];\n\n      return defaultSlotItems;\n    }\n\n    // for case when there is no slot e.g. combobox\n    if (this.menu?.hasChildNodes()) {\n      const menuItems = this.menu.children;\n      return [...menuItems] as SgdsDropdownItem[];\n    }\n    return [];\n  }\n\n  private _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled);\n  }\n\n  private _setMenuItem(currentItemIdx: number, isArrowDown = true) {\n    const items = this._getActiveMenuItems();\n    if (items.length === 0) return;\n    const item = items[currentItemIdx];\n    this.nextDropdownItemNo = currentItemIdx + 1;\n    this.prevDropdownItemNo = currentItemIdx - 1 < 0 ? items.length - 1 : currentItemIdx - 1;\n    let activeItem: SgdsDropdownItem;\n    if (item.disabled) {\n      return this._setMenuItem(isArrowDown ? this.nextDropdownItemNo : this.prevDropdownItemNo);\n    } else activeItem = item;\n\n    // focus or blur items depending on active or not\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n      item === activeItem && dropdownItem.focus();\n    });\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown-list-element.js","sources":["../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\n\n/**\n * @event sgds-select - Emitted event when a slot item is selected\n */\nexport class DropdownListElement extends DropdownElement {\n  static styles = DropdownElement.styles;\n\n  /**@internal */\n  @query(\"ul.dropdown-menu\")\n  private menu: HTMLUListElement;\n\n  /** @internal */\n  @state()\n  nextDropdownItemNo = 0;\n\n  /** @internal */\n  @state()\n  prevDropdownItemNo = -1;\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n  }\n\n  protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n    const items = this._getActiveMenuItems();\n    const currentItemNo = items.indexOf(e.target as SgdsDropdownItem);\n    this.nextDropdownItemNo = currentItemNo + 1;\n    this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n    /** Emitted event from SgdsDropdown element when a slot item is selected */\n    const selectedItem = e.target as SgdsDropdownItem;\n    if (!selectedItem.disabled) {\n      this.emit(\"sgds-select\");\n      if (this.close !== \"outside\") {\n        this.hideMenu(); // <-- Use new API\n      }\n    }\n  }\n\n  private _resetMenu() {\n    this.nextDropdownItemNo = 0;\n    this.prevDropdownItemNo = -1;\n    // reset the tabindex\n    const items = this._getMenuItems();\n    items.forEach(item => {\n      const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n    });\n  }\n\n  protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (this.readonly) return;\n    const menuItems = this._getActiveMenuItems();\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        if (this.nextDropdownItemNo === menuItems.length) {\n          return this._setMenuItem(0);\n        } else {\n          return this._setMenuItem(this.nextDropdownItemNo > 0 ? this.nextDropdownItemNo : 0);\n        }\n      case ARROW_UP:\n        e.preventDefault();\n        if (this.prevDropdownItemNo < 0) {\n          return this._setMenuItem(menuItems.length - 1, false);\n        } else {\n          return this._setMenuItem(this.prevDropdownItemNo, false);\n        }\n      case TAB:\n        if (!this.menuIsOpen) {\n          return;\n        }\n        e.preventDefault();\n        if (e.shiftKey) {\n          if (this.prevDropdownItemNo < 0) {\n            return this._setMenuItem(menuItems.length - 1, false);\n          } else {\n            return this._setMenuItem(this.prevDropdownItemNo, false);\n          }\n        }\n        if (this.nextDropdownItemNo === menuItems.length) {\n          return this._setMenuItem(0);\n        } else {\n          return this._setMenuItem(this.nextDropdownItemNo > 0 ? this.nextDropdownItemNo : 0);\n        }\n      case ENTER:\n        if (menuItems.includes(e.target as SgdsDropdownItem)) {\n          return this.handleSelectSlot(e);\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _getMenuItems(): SgdsDropdownItem[] {\n    const defaultSlot = this.shadowRoot.querySelector(\"slot#default\");\n    // for case when default slot is used e.g. dropdown, mainnavdropdown\n    if (defaultSlot) {\n      const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n        ?.assignedElements({\n          flatten: true\n        })\n        .filter(el => !el.classList.contains(\"empty-menu\") && !el.hasAttribute(\"hidden\")) as SgdsDropdownItem[];\n      return defaultSlotItems;\n    }\n    // for case when there is no slot e.g. combobox\n    if (this.menu?.hasChildNodes()) {\n      const menuItems = Array.from(this.menu.children);\n      return [...menuItems] as SgdsDropdownItem[];\n    }\n\n    return [];\n  }\n\n  private _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled);\n  }\n\n  private _setMenuItem(currentItemIdx: number, isArrowDown = true) {\n    const items = this._getActiveMenuItems();\n    if (items.length === 0) return;\n    const item = items[currentItemIdx];\n    this.nextDropdownItemNo = currentItemIdx + 1;\n    this.prevDropdownItemNo = currentItemIdx - 1 < 0 ? items.length - 1 : currentItemIdx - 1;\n    let activeItem: SgdsDropdownItem;\n    if (item.disabled) {\n      return this._setMenuItem(isArrowDown ? this.nextDropdownItemNo : this.prevDropdownItemNo);\n    } else activeItem = item;\n\n    // focus or blur items depending on active or not\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n      item === activeItem && dropdownItem.focus();\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

package/base/select-element.d.ts

@@ -45,7 +45,7 @@ export declare class SelectElement extends SelectElement_base implements SgdsFor
     /** Track selected items (even for single-select, but it will have at most one). */
     protected selectedItems: SgdsOptionData[];
     /** @internal Managed filtered menu on the fly with input change*/
-    protected filteredMenuList: SgdsOptionData[];
+    protected filteredList: SgdsOptionData[];
     protected _isTouched: boolean;
     constructor();
     protected _input: Promise<HTMLInputElement>;

package/base/select-element.js

@@ -52,7 +52,7 @@ class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) {
         /** Track selected items (even for single-select, but it will have at most one). */
         this.selectedItems = [];
         /** @internal Managed filtered menu on the fly with input change*/
-        this.filteredMenuList = [];
+        this.filteredList = [];
         this._isTouched = false;
         this._controlId = genId("input");
         this._labelId = genId("label");
@@ -69,7 +69,7 @@ class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener("blur", async () => {
-            this.invalid = !this._mixinReportValidity();
+            this.invalid = this.menuIsOpen ? false : !this._mixinReportValidity();
         });
     }
     /**
@@ -202,7 +202,7 @@ __decorate([
 ], SelectElement.prototype, "selectedItems", void 0);
 __decorate([
     state()
-], SelectElement.prototype, "filteredMenuList", void 0);
+], SelectElement.prototype, "filteredList", void 0);
 __decorate([
     queryAsync("input.form-control")
 ], SelectElement.prototype, "_input", void 0);

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 async _getMenuListFromOptions(assignedElements: Element[]): Promise<SgdsOptionData[]> {\n    const readyOptions = assignedElements.map(async (e: OptionElement) => {\n      await e.updateComplete;\n      return e;\n    });\n    const options = await Promise.all(readyOptions);\n    return options?.map((el: OptionElement) => ({\n      label: el.innerText,\n      value: el.getAttribute(\"value\"),\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 filteredList: 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.menuIsOpen ? false : !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 async _getMenuListFromOptions(assignedElements: Element[]): Promise<SgdsOptionData[]> {\n    const readyOptions = assignedElements.map(async (e: OptionElement) => {\n      await e.updateComplete;\n      return e;\n    });\n    const options = await Promise.all(readyOptions);\n    return options?.map((el: OptionElement) => ({\n      label: el.innerText,\n      value: el.getAttribute(\"value\"),\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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"}

package/components/Breadcrumb/index.umd.js

@@ -7179,6 +7179,7 @@
           this.nextDropdownItemNo = 0;
           /** @internal */
           this.prevDropdownItemNo = -1;
+          this.hidden = false;
       }
       connectedCallback() {
           super.connectedCallback();
@@ -7266,16 +7267,17 @@
       }
       _getMenuItems() {
           var _a, _b;
+          const defaultSlot = this.shadowRoot.querySelector("slot#default");
           // for case when default slot is used e.g. dropdown, mainnavdropdown
-          if (this.shadowRoot.querySelector("slot#default")) {
+          if (defaultSlot) {
               const defaultSlotItems = (_a = this.shadowRoot.querySelector("slot#default")) === null || _a === void 0 ? void 0 : _a.assignedElements({
                   flatten: true
-              }).filter(el => !el.classList.contains("empty-menu"));
+              }).filter(el => !el.classList.contains("empty-menu") && !el.hasAttribute("hidden"));
               return defaultSlotItems;
           }
           // for case when there is no slot e.g. combobox
           if ((_b = this.menu) === null || _b === void 0 ? void 0 : _b.hasChildNodes()) {
-              const menuItems = this.menu.children;
+              const menuItems = Array.from(this.menu.children);
               return [...menuItems];
           }
           return [];
@@ -7314,6 +7316,9 @@
   __decorate([
       state()
   ], DropdownListElement.prototype, "prevDropdownItemNo", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], DropdownListElement.prototype, "hidden", void 0);
 
   // @watch decorator
   //