@govtechsg/sgds-web-component 1.0.0-rc.4 → 1.0.0-rc.5

package/base/dropdown-element.cjs.js

@@ -8,6 +8,7 @@ var decorators_js = require('lit/decorators.js');
 var ref_js = require('lit/directives/ref.js');
 var mergeDeep = require('../utils/mergeDeep.cjs.js');
 var sgdsElement = require('./sgds-element.cjs.js');
+var generateId = require('../utils/generateId.cjs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,6 +31,8 @@ class DropdownElement extends sgdsElement["default"] {
         this.myDropdown = ref_js.createRef();
         /** @internal */
         this.bsDropdown = null;
+        /** @internal Unique id generated for the dropdown menu */
+        this.dropdownMenuId = generateId["default"]("dropdown-menu", "ul");
         /** @internal Controls auto-flipping of menu */
         this.noFlip = false;
         /** @internal When true, aligns right edge of menu with right edge of button */

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-element.cjs.js","sources":["../../src/base/dropdown-element.ts"],"sourcesContent":["import type { StrictModifiers } from \"@popperjs/core\";\nimport * as Popper from \"@popperjs/core\";\nimport Dropdown from \"bootstrap/js/src/dropdown\";\nimport type { Dropdown as BsDropdown } from \"bootstrap\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport mergeDeep from \"../utils/mergeDeep\";\nimport SgdsElement from \"./sgds-element\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n * @event sgds-select - Emitted event when a slot item is selected\n */\n\nexport class DropdownElement extends SgdsElement {\n  static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n  /** @internal */\n  protected bsDropdown: BsDropdown = null;\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */\n  @property({ type: Object })\n  popperOpts = {};\n\n  /** @internal */\n  @state()\n  dropdownConfig: Partial<Popper.Options>;\n  /** @internal */\n  @state()\n  modifierOpt: StrictModifiers[] = [];\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    document.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n  }\n\n  firstUpdated() {\n    this.bsDropdown = new Dropdown(this.myDropdown.value, {\n      // autoClose not working as bootstrap is using attribute data-bs-toggle=\"dropdown\" to configure autoclose. But it doesnt look into this attribute in the shadow dom\n      reference: \"toggle\", // working\n      popperConfig: (defaultConfig?: Partial<Popper.Options>) => {\n        //working\n        this.dropdownConfig = {\n          placement: \"bottom-start\",\n          modifiers: !this.noFlip\n            ? this.modifierOpt\n            : [\n                ...this.modifierOpt,\n                {\n                  name: \"flip\",\n                  options: { fallbackPlacements: [] }\n                }\n              ]\n        };\n\n        switch (this.drop) {\n          case \"up\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n            break;\n          case \"right\":\n            this.dropdownConfig.placement = \"right-start\";\n            break;\n          case \"left\":\n            this.dropdownConfig.placement = \"left-start\";\n            break;\n          case \"down\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n            break;\n          default:\n            this.dropdownConfig.placement = undefined;\n            break;\n        }\n        return mergeDeep(defaultConfig, mergeDeep(this.dropdownConfig, this.popperOpts));\n      }\n    });\n\n    this.myDropdown.value.addEventListener(\"show.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"shown.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-after-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hide.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-hide\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hidden.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-after-hide\");\n    });\n\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  /** When invoked, opens the dropdown menu */\n  showMenu() {\n    this.bsDropdown.show();\n  }\n\n  /** When invoked, hides the dropdown menu */\n  hideMenu() {\n    this.bsDropdown.hide();\n  }\n\n  toggleMenu() {\n    this.bsDropdown.toggle();\n  }\n\n  private _handleKeyboardMenuEvent(e: KeyboardEvent) {\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ESC:\n        return this.hideMenu();\n      default:\n        break;\n    }\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: DropdownElement) {\n    if (!e.composedPath().includes(self)) {\n      this.hideMenu();\n    }\n  }\n}\n"],"names":["SgdsElement","createRef","Dropdown","mergeDeep","__decorate","property","state"],"mappings":"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"}
+{"version":3,"file":"dropdown-element.cjs.js","sources":["../../src/base/dropdown-element.ts"],"sourcesContent":["import type { StrictModifiers } from \"@popperjs/core\";\nimport * as Popper from \"@popperjs/core\";\nimport Dropdown from \"bootstrap/js/src/dropdown\";\nimport type { Dropdown as BsDropdown } from \"bootstrap\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport mergeDeep from \"../utils/mergeDeep\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n * @event sgds-select - Emitted event when a slot item is selected\n */\n\nexport class DropdownElement extends SgdsElement {\n  static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n  /** @internal */\n  protected bsDropdown: BsDropdown = null;\n\n  /** @internal Unique id generated for the dropdown menu */\n  protected dropdownMenuId: string = generateId(\"dropdown-menu\", \"ul\");\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */\n  @property({ type: Object })\n  popperOpts = {};\n\n  /** @internal */\n  @state()\n  dropdownConfig: Partial<Popper.Options>;\n  /** @internal */\n  @state()\n  modifierOpt: StrictModifiers[] = [];\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    document.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n  }\n\n  firstUpdated() {\n    this.bsDropdown = new Dropdown(this.myDropdown.value, {\n      // autoClose not working as bootstrap is using attribute data-bs-toggle=\"dropdown\" to configure autoclose. But it doesnt look into this attribute in the shadow dom\n      reference: \"toggle\", // working\n      popperConfig: (defaultConfig?: Partial<Popper.Options>) => {\n        //working\n        this.dropdownConfig = {\n          placement: \"bottom-start\",\n          modifiers: !this.noFlip\n            ? this.modifierOpt\n            : [\n                ...this.modifierOpt,\n                {\n                  name: \"flip\",\n                  options: { fallbackPlacements: [] }\n                }\n              ]\n        };\n\n        switch (this.drop) {\n          case \"up\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n            break;\n          case \"right\":\n            this.dropdownConfig.placement = \"right-start\";\n            break;\n          case \"left\":\n            this.dropdownConfig.placement = \"left-start\";\n            break;\n          case \"down\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n            break;\n          default:\n            this.dropdownConfig.placement = undefined;\n            break;\n        }\n        return mergeDeep(defaultConfig, mergeDeep(this.dropdownConfig, this.popperOpts));\n      }\n    });\n\n    this.myDropdown.value.addEventListener(\"show.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"shown.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-after-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hide.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-hide\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hidden.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-after-hide\");\n    });\n\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  /** When invoked, opens the dropdown menu */\n  showMenu() {\n    this.bsDropdown.show();\n  }\n\n  /** When invoked, hides the dropdown menu */\n  hideMenu() {\n    this.bsDropdown.hide();\n  }\n\n  toggleMenu() {\n    this.bsDropdown.toggle();\n  }\n\n  private _handleKeyboardMenuEvent(e: KeyboardEvent) {\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ESC:\n        return this.hideMenu();\n      default:\n        break;\n    }\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: DropdownElement) {\n    if (!e.composedPath().includes(self)) {\n      this.hideMenu();\n    }\n  }\n}\n"],"names":["SgdsElement","createRef","generateId","Dropdown","mergeDeep","__decorate","property","state"],"mappings":"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"}

package/base/dropdown-element.d.ts

@@ -17,6 +17,8 @@ export declare class DropdownElement extends SgdsElement {
     protected myDropdown: Ref<HTMLElement>;
     /** @internal */
     protected bsDropdown: BsDropdown;
+    /** @internal Unique id generated for the dropdown menu */
+    protected dropdownMenuId: string;
     /** @internal Controls auto-flipping of menu */
     protected noFlip: boolean;
     /** @internal When true, aligns right edge of menu with right edge of button */

package/base/dropdown-element.js

@@ -4,6 +4,7 @@ import { property, state } from 'lit/decorators.js';
 import { createRef } from 'lit/directives/ref.js';
 import mergeDeep from '../utils/mergeDeep.js';
 import SgdsElement from './sgds-element.js';
+import genId from '../utils/generateId.js';
 
 const ARROW_DOWN = "ArrowDown";
 const ARROW_UP = "ArrowUp";
@@ -22,6 +23,8 @@ class DropdownElement extends SgdsElement {
         this.myDropdown = createRef();
         /** @internal */
         this.bsDropdown = null;
+        /** @internal Unique id generated for the dropdown menu */
+        this.dropdownMenuId = genId("dropdown-menu", "ul");
         /** @internal Controls auto-flipping of menu */
         this.noFlip = false;
         /** @internal When true, aligns right edge of menu with right edge of button */

package/base/dropdown-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-element.js","sources":["../../src/base/dropdown-element.ts"],"sourcesContent":["import type { StrictModifiers } from \"@popperjs/core\";\nimport * as Popper from \"@popperjs/core\";\nimport Dropdown from \"bootstrap/js/src/dropdown\";\nimport type { Dropdown as BsDropdown } from \"bootstrap\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport mergeDeep from \"../utils/mergeDeep\";\nimport SgdsElement from \"./sgds-element\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n * @event sgds-select - Emitted event when a slot item is selected\n */\n\nexport class DropdownElement extends SgdsElement {\n  static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n  /** @internal */\n  protected bsDropdown: BsDropdown = null;\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */\n  @property({ type: Object })\n  popperOpts = {};\n\n  /** @internal */\n  @state()\n  dropdownConfig: Partial<Popper.Options>;\n  /** @internal */\n  @state()\n  modifierOpt: StrictModifiers[] = [];\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    document.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n  }\n\n  firstUpdated() {\n    this.bsDropdown = new Dropdown(this.myDropdown.value, {\n      // autoClose not working as bootstrap is using attribute data-bs-toggle=\"dropdown\" to configure autoclose. But it doesnt look into this attribute in the shadow dom\n      reference: \"toggle\", // working\n      popperConfig: (defaultConfig?: Partial<Popper.Options>) => {\n        //working\n        this.dropdownConfig = {\n          placement: \"bottom-start\",\n          modifiers: !this.noFlip\n            ? this.modifierOpt\n            : [\n                ...this.modifierOpt,\n                {\n                  name: \"flip\",\n                  options: { fallbackPlacements: [] }\n                }\n              ]\n        };\n\n        switch (this.drop) {\n          case \"up\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n            break;\n          case \"right\":\n            this.dropdownConfig.placement = \"right-start\";\n            break;\n          case \"left\":\n            this.dropdownConfig.placement = \"left-start\";\n            break;\n          case \"down\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n            break;\n          default:\n            this.dropdownConfig.placement = undefined;\n            break;\n        }\n        return mergeDeep(defaultConfig, mergeDeep(this.dropdownConfig, this.popperOpts));\n      }\n    });\n\n    this.myDropdown.value.addEventListener(\"show.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"shown.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-after-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hide.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-hide\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hidden.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-after-hide\");\n    });\n\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  /** When invoked, opens the dropdown menu */\n  showMenu() {\n    this.bsDropdown.show();\n  }\n\n  /** When invoked, hides the dropdown menu */\n  hideMenu() {\n    this.bsDropdown.hide();\n  }\n\n  toggleMenu() {\n    this.bsDropdown.toggle();\n  }\n\n  private _handleKeyboardMenuEvent(e: KeyboardEvent) {\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ESC:\n        return this.hideMenu();\n      default:\n        break;\n    }\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: DropdownElement) {\n    if (!e.composedPath().includes(self)) {\n      this.hideMenu();\n    }\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown-element.js","sources":["../../src/base/dropdown-element.ts"],"sourcesContent":["import type { StrictModifiers } from \"@popperjs/core\";\nimport * as Popper from \"@popperjs/core\";\nimport Dropdown from \"bootstrap/js/src/dropdown\";\nimport type { Dropdown as BsDropdown } from \"bootstrap\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport mergeDeep from \"../utils/mergeDeep\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n * @event sgds-select - Emitted event when a slot item is selected\n */\n\nexport class DropdownElement extends SgdsElement {\n  static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n  /** @internal */\n  protected bsDropdown: BsDropdown = null;\n\n  /** @internal Unique id generated for the dropdown menu */\n  protected dropdownMenuId: string = generateId(\"dropdown-menu\", \"ul\");\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */\n  @property({ type: Object })\n  popperOpts = {};\n\n  /** @internal */\n  @state()\n  dropdownConfig: Partial<Popper.Options>;\n  /** @internal */\n  @state()\n  modifierOpt: StrictModifiers[] = [];\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    document.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n  }\n\n  firstUpdated() {\n    this.bsDropdown = new Dropdown(this.myDropdown.value, {\n      // autoClose not working as bootstrap is using attribute data-bs-toggle=\"dropdown\" to configure autoclose. But it doesnt look into this attribute in the shadow dom\n      reference: \"toggle\", // working\n      popperConfig: (defaultConfig?: Partial<Popper.Options>) => {\n        //working\n        this.dropdownConfig = {\n          placement: \"bottom-start\",\n          modifiers: !this.noFlip\n            ? this.modifierOpt\n            : [\n                ...this.modifierOpt,\n                {\n                  name: \"flip\",\n                  options: { fallbackPlacements: [] }\n                }\n              ]\n        };\n\n        switch (this.drop) {\n          case \"up\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n            break;\n          case \"right\":\n            this.dropdownConfig.placement = \"right-start\";\n            break;\n          case \"left\":\n            this.dropdownConfig.placement = \"left-start\";\n            break;\n          case \"down\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n            break;\n          default:\n            this.dropdownConfig.placement = undefined;\n            break;\n        }\n        return mergeDeep(defaultConfig, mergeDeep(this.dropdownConfig, this.popperOpts));\n      }\n    });\n\n    this.myDropdown.value.addEventListener(\"show.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"shown.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-after-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hide.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-hide\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hidden.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-after-hide\");\n    });\n\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  /** When invoked, opens the dropdown menu */\n  showMenu() {\n    this.bsDropdown.show();\n  }\n\n  /** When invoked, hides the dropdown menu */\n  hideMenu() {\n    this.bsDropdown.hide();\n  }\n\n  toggleMenu() {\n    this.bsDropdown.toggle();\n  }\n\n  private _handleKeyboardMenuEvent(e: KeyboardEvent) {\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ESC:\n        return this.hideMenu();\n      default:\n        break;\n    }\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: DropdownElement) {\n    if (!e.composedPath().includes(self)) {\n      this.hideMenu();\n    }\n  }\n}\n"],"names":["generateId"],"mappings":"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"}

package/components/ComboBox/index.umd.js

@@ -3610,6 +3610,10 @@
   }
   SgdsElement.styles = css_248z$1;
 
+  function genId (componentName = "", elementName = "") {
+      return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
+  }
+
   const ARROW_DOWN$1 = "ArrowDown";
   const ARROW_UP$1 = "ArrowUp";
   const ESC = "Escape";
@@ -3627,6 +3631,8 @@
           this.myDropdown = e$2();
           /** @internal */
           this.bsDropdown = null;
+          /** @internal Unique id generated for the dropdown menu */
+          this.dropdownMenuId = genId("dropdown-menu", "ul");
           /** @internal Controls auto-flipping of menu */
           this.noFlip = false;
           /** @internal When true, aligns right edge of menu with right edge of button */
@@ -3956,10 +3962,6 @@
       }
   }
 
-  function genId (componentName = "", elementName = "") {
-      return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
-  }
-
   // @watch decorator
   //
   // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
@@ -4433,12 +4435,16 @@
           ?readonly=${this.readonly}
           .value=${this.value}
           @sgds-input=${this._handleInputChange}
+          role="combobox"
+          aria-expanded=${this.menuIsOpen}
+          aria-autocomplete="list"
+          aria-controls=${this.dropdownMenuId}
         >
         </sgds-input>
         <div class="form-control-icon">
           <slot name="icon"></slot>
         </div>
-        <ul class="dropdown-menu" part="menu">
+        <ul id=${this.dropdownMenuId} class="dropdown-menu" part="menu" tabindex="-1">
           ${this.filteredMenuList.map(item => x `<button class="dropdown-item" @click=${this._handleSelectChange}>${item}</button>`)}
         </ul>
       </div>