@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.0

package/dist/collection/components/dropdown/dropdown-item/dropdown-item.js

@@ -21,7 +21,7 @@ export class DropdownItem {
         };
         if (!hasHref)
             common.tabIndex = 0;
-        return (h("a", Object.assign({ key: '3b6bafaaafc41c5b41b6aeb95b24ca9dfc877fe7' }, common, (hasHref ? { href: this.href, target: this.target } : {})), this.icon && h("ifx-icon", { key: 'ddc2194b498892b02808fbbc86b974870f4ec766', class: "icon", icon: this.icon }), h("span", { key: 'e7dc8f0743ea61387cf1988233d8b1fa1a791f14' }, h("slot", { key: 'c0b7fb1aaeaee44598d66eed133aa99d16f61b82' }))));
+        return (h("a", Object.assign({ key: '0fa61b25ba8f7f8dec6828def32fca24c753970b' }, common, (hasHref ? { href: this.href, target: this.target } : {})), this.icon && h("ifx-icon", { key: '7676baff54e17a8ac7a3de6a47fb00e773b80718', class: "icon", icon: this.icon }), h("span", { key: 'a2b3213b15b3e0d0b40c12cf7863158f5233c400' }, h("slot", { key: 'b0c64b7c89c088900c65736450ebb366fcccad3c' }))));
     }
     static get is() { return "ifx-dropdown-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-item/dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;IANzB;QAQU,SAAI,GAAW,EAAE,CAAA;QACjB,WAAM,GAAW,OAAO,CAAA;QACxB,SAAI,GAAY,KAAK,CAAC;QACrB,SAAI,GAAW,GAAG,CAAA;KA8B5B;IAzBC,cAAc,CAAC,KAAkB;QAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;IAC3B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;IAChD,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;QAClF,MAAM,MAAM,GAAG;YACb,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;YACrF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE;YACzC,IAAI,EAAE,UAAU;SACV,CAAC;QAET,IAAI,CAAC,OAAO;YAAE,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;QAElC,OAAO,CACL,0EAAO,MAAM,EAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YACzE,IAAI,CAAC,IAAI,IAAI,iEAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa;YACjE;gBAAM,8DAAQ,CAAO,CACnB,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown-item',\r\n  styleUrl: 'dropdown-item.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class DropdownItem {\r\n  @Prop() icon: string;\r\n  @Prop() href: string = \"\"\r\n  @Prop() target: string = \"_self\"\r\n  @Prop() hide: boolean = false;\r\n  @State() size: string = 'l'\r\n  @Event() ifxDropdownItem: EventEmitter;\r\n  @Element() el;\r\n\r\n  @Listen('menuSize', { target: 'body' })\r\n  handleMenuSize(event: CustomEvent) {\r\n    this.size = event.detail;\r\n  }\r\n\r\n  handleEventEmission() {\r\n    this.ifxDropdownItem.emit(this.el.textContent)\r\n  }\r\n\r\n  render() {\r\n    const hasHref = this.href !== undefined && this.href !== null && this.href !== '';\r\n    const common = {\r\n      class: `dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`,\r\n      onClick: () => this.handleEventEmission(),\r\n      role: 'menuitem'\r\n    } as any;\r\n\r\n    if (!hasHref) common.tabIndex = 0;\r\n\r\n    return (\r\n      <a {...common} {...(hasHref ? { href: this.href, target: this.target } : {})}>\r\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\r\n        <span><slot /></span>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;IANzB;QAQU,SAAI,GAAW,EAAE,CAAA;QACjB,WAAM,GAAW,OAAO,CAAA;QACxB,SAAI,GAAY,KAAK,CAAC;QACrB,SAAI,GAAW,GAAG,CAAA;KA8B5B;IAzBC,cAAc,CAAC,KAAkB;QAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;IAC3B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;IAChD,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;QAClF,MAAM,MAAM,GAAG;YACb,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;YACrF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE;YACzC,IAAI,EAAE,UAAU;SACV,CAAC;QAET,IAAI,CAAC,OAAO;YAAE,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;QAElC,OAAO,CACL,0EAAO,MAAM,EAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YACzE,IAAI,CAAC,IAAI,IAAI,iEAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa;YACjE;gBAAM,8DAAQ,CAAO,CACnB,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true\n})\n\nexport class DropdownItem {\n  @Prop() icon: string;\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n  @State() size: string = 'l'\n  @Event() ifxDropdownItem: EventEmitter;\n  @Element() el;\n\n  @Listen('menuSize', { target: 'body' })\n  handleMenuSize(event: CustomEvent) {\n    this.size = event.detail;\n  }\n\n  handleEventEmission() {\n    this.ifxDropdownItem.emit(this.el.textContent)\n  }\n\n  render() {\n    const hasHref = this.href !== undefined && this.href !== null && this.href !== '';\n    const common = {\n      class: `dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`,\n      onClick: () => this.handleEventEmission(),\n      role: 'menuitem'\n    } as any;\n\n    if (!hasHref) common.tabIndex = 0;\n\n    return (\n      <a {...common} {...(hasHref ? { href: this.href, target: this.target } : {})}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span><slot /></span>\n      </a>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.js

@@ -42,10 +42,10 @@ export class DropdownMenu {
             this.hideTopPadding = false;
     }
     render() {
-        return (h("div", { key: '9aa77a597f7aa89fc7738d32e2a7a4402adff325', class: `dropdown-menu 
-      ${this.isOpen ? 'show' : ''} 
-      ${this.hideTopPadding ? 'hideTopPadding' : ""}
-      ${this.size === 's' ? 'small' : ""}` }, h("slot", { key: '39c6c53198ef1ffcf0b1e00031f52969e7769572' })));
+        return (h("div", { key: 'e4d2067883d6a787f4b8d718af8ff98b3815ee04', class: `dropdown-menu 
+      ${this.isOpen ? 'show' : ''} 
+      ${this.hideTopPadding ? 'hideTopPadding' : ""}
+      ${this.size === 's' ? 'small' : ""}` }, h("slot", { key: '290c409805d04ea7f96f5c7516d150222867da6b' })));
     }
     static get is() { return "ifx-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;IANzB;QAOU,WAAM,GAAY,KAAK,CAAC;QACxB,SAAI,GAAW,GAAG,CAAA;QACjB,mBAAc,GAAY,KAAK,CAAC;QAIhC,kBAAa,GAAiC,EAAE,CAAC;KAyD3D;IArDC,gBAAgB,CAAC,KAAkB;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;IACvC,CAAC;IAGD,+BAA+B,CAAC,KAAkB;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IAC7C,CAAC;IAED,mBAAmB,CAAC,WAAmB;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;QAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;YAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;gBAC/C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;YAC1C,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;YACzC,CAAC;QACH,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC/B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;QAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;QAEnE,IAAI,WAAW,IAAI,cAAc,EAAE,CAAC;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;;YAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IACrC,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;QACzB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;YAElC,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown-menu',\r\n  styleUrl: 'dropdown-menu.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class DropdownMenu {\r\n  @Prop() isOpen: boolean = false;\r\n  @Prop() size: string = 'l'\r\n  @State() hideTopPadding: boolean = false;\r\n  @Element() el;\r\n\r\n  @Event() menuSize: EventEmitter;\r\n  @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\r\n  @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\r\n\r\n  @Listen('ifxInput')\r\n  handleMenuFilter(event: CustomEvent) {\r\n    const searchValue = event.detail;\r\n    this.filterDropdownItems(searchValue)\r\n  }\r\n\r\n  @Listen('ifxDropdownItem')\r\n  handleDropdownItemValueEmission(event: CustomEvent) {\r\n    this.ifxDropdownMenuItem.emit(event.detail)\r\n  }\r\n\r\n  filterDropdownItems(searchValue: string) {\r\n    const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\r\n    let dropdownItem, txtValue;\r\n    let query = searchValue.toUpperCase()\r\n\r\n    for (let i = 0; i < allItems.length; i++) {\r\n      dropdownItem = allItems[i];\r\n      txtValue = dropdownItem.textContent || dropdownItem.innerText;\r\n\r\n      if (txtValue.toUpperCase().indexOf(query) > -1) {\r\n        dropdownItem.setAttribute('hide', false)\r\n      } else {\r\n        dropdownItem.setAttribute('hide', true)\r\n      }\r\n    }\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.menuSize.emit(this.size)\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\r\n    const searchField = this.el.querySelector('ifx-search-field')\r\n    const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\r\n\r\n    if (searchField || dropdownHeader) {\r\n      this.hideTopPadding = true;\r\n    } else this.hideTopPadding = false;\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class={`dropdown-menu \r\n      ${this.isOpen ? 'show' : ''} \r\n      ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\r\n      ${this.size === 's' ? 'small' : \"\"}`\r\n      } >\r\n        <slot />\r\n      </div >\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;IANzB;QAOU,WAAM,GAAY,KAAK,CAAC;QACxB,SAAI,GAAW,GAAG,CAAA;QACjB,mBAAc,GAAY,KAAK,CAAC;QAIhC,kBAAa,GAAiC,EAAE,CAAC;KAyD3D;IArDC,gBAAgB,CAAC,KAAkB;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;IACvC,CAAC;IAGD,+BAA+B,CAAC,KAAkB;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IAC7C,CAAC;IAED,mBAAmB,CAAC,WAAmB;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;QAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;YAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;gBAC/C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;YAC1C,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;YACzC,CAAC;QACH,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC/B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;QAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;QAEnE,IAAI,WAAW,IAAI,cAAc,EAAE,CAAC;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;;YAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IACrC,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;QACzB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;YAElC,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-menu',\n  styleUrl: 'dropdown-menu.scss',\n  shadow: true\n})\n\nexport class DropdownMenu {\n  @Prop() isOpen: boolean = false;\n  @Prop() size: string = 'l'\n  @State() hideTopPadding: boolean = false;\n  @Element() el;\n\n  @Event() menuSize: EventEmitter;\n  @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\n  @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\n\n  @Listen('ifxInput')\n  handleMenuFilter(event: CustomEvent) {\n    const searchValue = event.detail;\n    this.filterDropdownItems(searchValue)\n  }\n\n  @Listen('ifxDropdownItem')\n  handleDropdownItemValueEmission(event: CustomEvent) {\n    this.ifxDropdownMenuItem.emit(event.detail)\n  }\n\n  filterDropdownItems(searchValue: string) {\n    const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\n    let dropdownItem, txtValue;\n    let query = searchValue.toUpperCase()\n\n    for (let i = 0; i < allItems.length; i++) {\n      dropdownItem = allItems[i];\n      txtValue = dropdownItem.textContent || dropdownItem.innerText;\n\n      if (txtValue.toUpperCase().indexOf(query) > -1) {\n        dropdownItem.setAttribute('hide', false)\n      } else {\n        dropdownItem.setAttribute('hide', true)\n      }\n    }\n  }\n\n  componentWillUpdate() {\n    this.menuSize.emit(this.size)\n  }\n\n  componentWillLoad() {\n    this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\n    const searchField = this.el.querySelector('ifx-search-field')\n    const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\n\n    if (searchField || dropdownHeader) {\n      this.hideTopPadding = true;\n    } else this.hideTopPadding = false;\n  }\n\n\n  render() {\n    return (\n      <div class={`dropdown-menu \n      ${this.isOpen ? 'show' : ''} \n      ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\n      ${this.size === 's' ? 'small' : \"\"}`\n      } >\n        <slot />\n      </div >\n    );\n  }\n}"]}

package/dist/collection/components/dropdown/dropdown-seperator/dropdown-separator.js

@@ -2,7 +2,7 @@
 import { h } from "@stencil/core";
 export class DropdownSeparator {
     render() {
-        return (h("div", { key: '7468448e215e04290ad28644bfc7405ff3e92da6', class: 'dropdown-separator' }));
+        return (h("div", { key: 'cd362aec9c480b38bb21eb247c05f24ca2668990', class: 'dropdown-separator' }));
     }
     static get is() { return "ifx-dropdown-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-seperator/dropdown-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-separator.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-seperator/dropdown-separator.tsx"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,iBAAiB;IAC5B,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAA;IACH,CAAC;;;;;;;;;CACF","sourcesContent":["// dropdown-separator.tsx\r\nimport { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown-separator',\r\n  styleUrl: 'dropdown-separator.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class DropdownSeparator {\r\n  render() {\r\n    return (\r\n      <div class='dropdown-separator'></div>\r\n    )\r\n  }\r\n}"]}
+{"version":3,"file":"dropdown-separator.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-seperator/dropdown-separator.tsx"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,iBAAiB;IAC5B,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAA;IACH,CAAC;;;;;;;;;CACF","sourcesContent":["// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-separator',\n  styleUrl: 'dropdown-separator.scss',\n  shadow: true\n})\n\nexport class DropdownSeparator {\n  render() {\n    return (\n      <div class='dropdown-separator'></div>\n    )\n  }\n}"]}

package/dist/collection/components/dropdown/dropdown-trigger/dropdown-trigger.js

@@ -5,7 +5,7 @@ export class DropdownItem {
         this.isOpen = false;
     }
     render() {
-        return (h("slot", { key: '54fbd683065299b0e714e6f91c4e0333d92e28e5' }));
+        return (h("slot", { key: '39ffc845865675f32133ee990db668ed0e6264dd' }));
     }
     static get is() { return "ifx-dropdown-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-trigger/dropdown-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-trigger.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,YAAY;IANzB;QAOU,WAAM,GAAY,KAAK,CAAC;KAOjC;IALC,MAAM;QACJ,OAAO,CACL,8DAAQ,CACT,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// dropdown-trigger-button.tsx\r\nimport { Component, Prop, h } from \"@stencil/core\";\r\nimport { IOpenable } from '../IOpenable';\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown-trigger',\r\n  styleUrl: 'dropdown-trigger.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class DropdownItem implements IOpenable {\r\n  @Prop() isOpen: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <slot />\r\n    )\r\n  }\r\n}"]}
+{"version":3,"file":"dropdown-trigger.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,YAAY;IANzB;QAOU,WAAM,GAAY,KAAK,CAAC;KAOjC;IALC,MAAM;QACJ,OAAO,CACL,8DAAQ,CACT,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n  tag: 'ifx-dropdown-trigger',\n  styleUrl: 'dropdown-trigger.scss',\n  shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n  @Prop() isOpen: boolean = false;\n\n  render() {\n    return (\n      <slot />\n    )\n  }\n}"]}

package/dist/collection/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.js

@@ -8,8 +8,8 @@ export class DropdownItem {
         this.hideArrow = false;
     }
     render() {
-        return (h("ifx-button", { key: '8f1566ffba39304744537dea9b0582d7fb5385c7', variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", { key: 'cfd9b40e6ce2f74efd15c4e1f6b7106b4dcf4dc9' }), !this.hideArrow &&
-            h("ifx-icon", { key: '29a120aaf9d98f2638c980e74a7635450522334e', icon: "chevron-down-16", class: `icon${this.isOpen ? ' rotate' : ''}` })));
+        return (h("ifx-button", { key: 'cba835345a4dcbec963deb2589bb26a1294908da', variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", { key: 'b8f6d30967aaa2ced90815c96081353f9ec0c7d1' }), !this.hideArrow &&
+            h("ifx-icon", { key: '41a60ee566d9be237bbe05e3ede8402f9d4e3f6e', icon: "chevron-down-16", class: `icon${this.isOpen ? ' rotate' : ''}` })));
     }
     static get is() { return "ifx-dropdown-trigger-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-trigger-button.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,YAAY;IANzB;QAOU,WAAM,GAAY,KAAK,CAAC;QAExB,UAAK,GAAqC,SAAS,CAAC;QAEpD,SAAI,GAAc,GAAG,CAAC;QAEtB,cAAS,GAAY,KAAK,CAAC;KAkBpC;IAhBC,MAAM;QACJ,OAAO,CACL,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,yBAAyB;YAE/B,8DAAQ;YACP,CAAC,IAAI,CAAC,SAAS;gBACd,iEAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CAExE,CACd,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// dropdown-trigger-button.tsx\r\nimport { Component, Prop, h } from \"@stencil/core\";\r\nimport { IOpenable } from '../IOpenable';\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown-trigger-button',\r\n  styleUrl: 'dropdown-trigger-button.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class DropdownItem implements IOpenable {\r\n  @Prop() isOpen: boolean = false;\r\n\r\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\r\n  @Prop() variant: 'primary';\r\n  @Prop() size: 's' | 'm' = 'm';\r\n  @Prop() disabled: boolean;\r\n  @Prop() hideArrow: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <ifx-button\r\n        variant={this.variant}\r\n        theme={this.theme}\r\n        size={this.size}\r\n        disabled={this.disabled}\r\n        class=\"dropdown-trigger-button\"\r\n      >\r\n        <slot />\r\n        {!this.hideArrow &&\r\n          <ifx-icon icon=\"chevron-down-16\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\r\n        }\r\n      </ifx-button>\r\n    )\r\n  }\r\n}"]}
+{"version":3,"file":"dropdown-trigger-button.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,YAAY;IANzB;QAOU,WAAM,GAAY,KAAK,CAAC;QAExB,UAAK,GAAqC,SAAS,CAAC;QAEpD,SAAI,GAAc,GAAG,CAAC;QAEtB,cAAS,GAAY,KAAK,CAAC;KAkBpC;IAhBC,MAAM;QACJ,OAAO,CACL,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,yBAAyB;YAE/B,8DAAQ;YACP,CAAC,IAAI,CAAC,SAAS;gBACd,iEAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CAExE,CACd,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n  tag: 'ifx-dropdown-trigger-button',\n  styleUrl: 'dropdown-trigger-button.scss',\n  shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n  @Prop() isOpen: boolean = false;\n\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() variant: 'primary';\n  @Prop() size: 's' | 'm' = 'm';\n  @Prop() disabled: boolean;\n  @Prop() hideArrow: boolean = false;\n\n  render() {\n    return (\n      <ifx-button\n        variant={this.variant}\n        theme={this.theme}\n        size={this.size}\n        disabled={this.disabled}\n        class=\"dropdown-trigger-button\"\n      >\n        <slot />\n        {!this.hideArrow &&\n          <ifx-icon icon=\"chevron-down-16\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n        }\n      </ifx-button>\n    )\n  }\n}"]}

package/dist/collection/components/dropdown/dropdown.js

@@ -203,7 +203,7 @@ export class Dropdown {
         }
     }
     render() {
-        return (h("div", { key: '78b68c1c7dddb7c41b39c6be63acd951c0c888ad', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: '2605abfa59787f7c135c762ac651c1ccc30fb59b' })));
+        return (h("div", { key: '98fae8a111b3e91b8a4f2690e0dd462d1c6c4791', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: 'f491cae9545a2d18342efa9f2fb29412d580f643' })));
     }
     static get is() { return "ifx-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -229,7 +229,7 @@ export class Dropdown {
                     "references": {
                         "Placement": {
                             "location": "local",
-                            "path": "/home/fp/Dev/IFX/dds/packages/components/src/components/dropdown/dropdown.tsx",
+                            "path": "/home/runner/work/infineon-design-system-stencil/infineon-design-system-stencil/packages/components/src/components/dropdown/dropdown.tsx",
                             "id": "src/components/dropdown/dropdown.tsx::Placement"
                         }
                     }

package/dist/collection/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA4B9C,MAAM,OAAO,QAAQ;IANrB;QAOU,cAAS,GAAc,cAAc,CAAC;QACtC,gBAAW,GAAY,KAAK,CAAC;QAC5B,mBAAc,GAAY,KAAK,CAAC;QACjC,mBAAc,GAAY,KAAK,CAAC;QAKhC,0BAAqB,GAAY,KAAK,CAAC;QACvC,uBAAkB,GAAY,KAAK,CAAC;QA4BpC,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,cAAc;gBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;gBACzC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC5B,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,CAAgB,EAAE,EAAE;YAClD,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;YAClB,IAAI,GAAG,KAAK,KAAK,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACxD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,kBAAkB;gBAAE,IAAI,CAAC,aAAa,EAAE,CAAC;QACrD,CAAC,CAAC;QAYM,sBAAiB,GAAG,CAAC,CAAgB,EAAE,EAAE;;YAChD,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACtC,IAAI,CAAC,KAAK,CAAC,MAAM;gBAAE,OAAO;YAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC,CAAC;YAE/D,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,WAAW;oBACd,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;oBACtC,MAAM;gBACR,KAAK,SAAS;oBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;oBACrD,MAAM;gBACR,KAAK,MAAM;oBACT,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACjB,MAAM;gBACR,KAAK,KAAK;oBACR,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBAChC,MAAM;gBACR,KAAK,OAAO,CAAC;gBACb,KAAK,GAAG,CAAC;gBACT,KAAK,UAAU;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,MAAC,QAAQ,CAAC,aAA6B,0CAAE,KAAK,EAAE,CAAC;oBACjD,MAAM;gBACR,KAAK,QAAQ;oBACX,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,aAAa,EAAE,CAAC;oBACrB,MAAC,IAAI,CAAC,OAAuB,0CAAE,KAAK,EAAE,CAAC;oBACvC,MAAM;gBACR,KAAK,KAAK;oBACR,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;wBAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,aAAa,EAAE,CAAC;wBACrB,MAAC,IAAI,CAAC,OAAuB,0CAAE,KAAK,EAAE,CAAC;oBACzC,CAAC;oBACD,MAAM;YACV,CAAC;QACH,CAAC,CAAC;KA6ID;IAtOC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC5F,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAGD,kBAAkB,CAAC,KAAiB;QAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IACE,IAAI,CAAC,cAAc;YACnB,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;YACzB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAC3B,CAAC;YACD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAoBK,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;QAC1B,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAkB,CAAC;QAC3F,OAAO,KAAK;aACT,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;aACjF,GAAG,CAAC,CAAC,CAAC,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,UAAU,0CAAE,aAAa,CAAC,GAAG,CAAuB,CAAA,EAAA,CAAC;aAChE,MAAM,CAAC,CAAC,EAAE,EAAqB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC7C,CAAC;IA8CC,iBAAiB;QACf,kBAAkB;QAClB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACjE,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,cAAc,EAAE,MAAM,SAAS,CAAC,CAAA;QACjD,CAAC;IACH,CAAC;IAGD,kBAAkB,CAAC,QAAiB,EAAE,QAAiB;QACrD,IAAI,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;YAC9D,IAAI,QAAQ,EAAE,CAAC;gBACb,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAChB,IAAI,CAAC,OAA4D,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzF,CAAC;IACH,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEK,cAAc;QACpB,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,EAAE,CAAC;IACjB,CAAC;IAGC,iBAAiB;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mDAAmD,CAAuB,CAAC;QAEnH,IAAI,UAAU,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAChC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBACnE,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACzE,CAAC;YACD,IAAI,CAAC,OAAO,GAAG,UAAW,CAAC;YAC3B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAChB,IAAI,CAAC,OAAe,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;gBAC/C,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBAChE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACtE,CAAC;QACH,CAAC;QAEH,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAuB,CAAC;QAEjF,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBACvC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;gBAC7D,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBACjE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACrB,CAAC;YACD,IAAI,CAAC,IAAI,GAAG,OAAQ,CAAC;YACrB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;gBACpD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,GAAG,OAAQ,CAAC;QACvB,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC7D,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACjE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC1D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAChE,CAAC;IACD,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,MAAM;QACV,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAGD,KAAK,CAAC,aAAa;QACjB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAE3B,IAAI,CAAC,OAAgC,CAAC,MAAM,GAAG,KAAK,CAAC;YACrD,IAAI,CAAC,IAA6B,CAAC,MAAM,GAAG,KAAK,CAAC;YAEnD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC3C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,OAAe,CAAC,MAAM,GAAG,IAAI,CAAC;YACnC,IAAI,CAAC,IAAY,CAAC,MAAM,GAAG,IAAI,CAAC;YACjC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;YACtF,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,eAAe,EAAC,KAAK,EAAC,UAAU;YAC9C,8DAAQ,CACJ,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { createPopper } from '@popperjs/core';\r\n \r\n\r\nimport { IOpenable } from './IOpenable';\r\n\r\nexport type Placement =\r\n  | 'auto'\r\n  | 'auto-start'\r\n  | 'auto-end'\r\n  | 'top'\r\n  | 'top-start'\r\n  | 'top-end'\r\n  | 'bottom'\r\n  | 'bottom-start'\r\n  | 'bottom-end'\r\n  | 'right'\r\n  | 'right-start'\r\n  | 'right-end'\r\n  | 'left'\r\n  | 'left-start'\r\n  | 'left-end';\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown',\r\n  styleUrl: 'dropdown.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class Dropdown {\r\n  @Prop() placement: Placement = 'bottom-start';\r\n  @Prop() defaultOpen: boolean = false;\r\n  @State() internalIsOpen: boolean = false;\r\n  @Prop() noAppendToBody: boolean = false;\r\n  @Event() ifxOpen: EventEmitter;\r\n  @Event() ifxClose: EventEmitter;\r\n  @Event() ifxDropdown: EventEmitter;\r\n  @Prop() disabled: boolean;\r\n  @Prop() noCloseOnOutsideClick: boolean = false;\r\n  @Prop() noCloseOnMenuClick: boolean = false;\r\n  @Element() el;\r\n  @State() trigger: HTMLElement;\r\n  @State() menu: HTMLElement\r\n  // Popper instance for positioning\r\n  popperInstance: any;\r\n\r\n  @Listen('mousedown', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const target = event.target as HTMLElement;\r\n\r\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  @Listen('focusin', { target: 'document' })\r\n  handleFocusOutside(event: FocusEvent) {\r\n    const target = event.target as HTMLElement;\r\n    if (\r\n      this.internalIsOpen &&\r\n      !this.el.contains(target) &&\r\n      !this.menu.contains(target)\r\n    ) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  private handleTriggerClick = () => {\r\n    if (!this.internalIsOpen) this.openDropdown();\r\n    else this.closeDropdown();\r\n  };\r\n\r\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\r\n    const key = e.key;\r\n    if (key === 'Tab' && this.internalIsOpen && !e.shiftKey) {\r\n      e.preventDefault();\r\n      this.focusFirstItem();\r\n    }\r\n  };\r\n\r\n  private handleMenuClick = () => {\r\n  if (!this.noCloseOnMenuClick) this.closeDropdown();\r\n};\r\n\r\n\r\nprivate getItemFocusables(): HTMLElement[] {\r\n  if (!this.menu) return [];\r\n  const hosts = Array.from(this.menu.querySelectorAll('ifx-dropdown-item')) as HTMLElement[];\r\n  return hosts\r\n    .filter(h => !(h.getAttribute('hide') === 'true' || h.classList.contains('hide')))\r\n    .map(h => h.shadowRoot?.querySelector('a') as HTMLElement | null)\r\n    .filter((el): el is HTMLElement => !!el);\r\n}\r\n\r\nprivate handleMenuKeyDown = (e: KeyboardEvent) => {\r\n const items = this.getItemFocusables();\r\n  if (!items.length) return;\r\n\r\n  const i = items.indexOf(document.activeElement as HTMLElement);\r\n\r\n  switch (e.key) {\r\n    case 'ArrowDown':\r\n      e.preventDefault();\r\n      items[(i + 1) % items.length].focus();\r\n      break;\r\n    case 'ArrowUp':\r\n      e.preventDefault();\r\n      items[(i - 1 + items.length) % items.length].focus();\r\n      break;\r\n    case 'Home':\r\n      e.preventDefault();\r\n      items[0].focus();\r\n      break;\r\n    case 'End':\r\n      e.preventDefault();\r\n      items[items.length - 1].focus();\r\n      break;\r\n    case 'Enter':\r\n    case ' ':\r\n    case 'Spacebar':\r\n      e.preventDefault();\r\n      (document.activeElement as HTMLElement)?.click();\r\n      break;\r\n    case 'Escape':\r\n      e.preventDefault();\r\n      this.closeDropdown();\r\n      (this.trigger as HTMLElement)?.focus();\r\n      break;\r\n    case 'Tab':\r\n      if (e.shiftKey && i === 0) {\r\n        e.preventDefault();\r\n        this.closeDropdown();\r\n        (this.trigger as HTMLElement)?.focus();\r\n      }\r\n      break;\r\n  }\r\n};\r\n\r\n  componentWillLoad() {\r\n    //maybe not needed\r\n    this.updateSlotContent();\r\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-dropdown', await framework)\r\n    }\r\n  }\r\n\r\n  @Watch('defaultOpen')\r\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\r\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\r\n      if (newValue) {\r\n        this.openDropdown();\r\n      } else {\r\n        this.closeDropdown();\r\n      }\r\n    }\r\n  }\r\n\r\n  @Watch('disabled')\r\n  watchHandlerDisabled(newValue: boolean) {\r\n    if (this.trigger) {\r\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\r\n    }\r\n  }\r\n\r\n  @Listen('slotchange')\r\n  watchHandlerSlot() {\r\n    this.updateSlotContent();\r\n  }\r\n\r\nprivate focusFirstItem() {\r\n  const [first] = this.getItemFocusables();\r\n  first?.focus();\r\n}\r\n\r\n\r\n  updateSlotContent() {\r\n   const newTrigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger') as HTMLElement | null;\r\n\r\n    if (newTrigger !== this.trigger) {\r\n      if (this.trigger) {\r\n        this.trigger.removeEventListener('click', this.handleTriggerClick);\r\n        this.trigger.removeEventListener('keydown', this.handleTriggerKeyDown);\r\n      }\r\n      this.trigger = newTrigger!;\r\n      if (this.trigger) {\r\n        (this.trigger as any).disabled = this.disabled;\r\n        this.trigger.addEventListener('click', this.handleTriggerClick);\r\n        this.trigger.addEventListener('keydown', this.handleTriggerKeyDown);\r\n      }\r\n    }\r\n\r\n  const newMenu = this.el.querySelector('ifx-dropdown-menu') as HTMLElement | null;\r\n\r\n  if (!this.noAppendToBody) {\r\n    if (this.menu && this.menu !== newMenu) {\r\n      this.menu.removeEventListener('click', this.handleMenuClick);\r\n      this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\r\n      this.menu.remove();\r\n    }\r\n    this.menu = newMenu!;\r\n    if (this.menu && !document.body.contains(this.menu)) {\r\n      document.body.append(this.menu);\r\n    }\r\n  } else {\r\n    this.menu = newMenu!;\r\n  }\r\n\r\n  if (this.menu) {\r\n    this.menu.removeEventListener('click', this.handleMenuClick);\r\n    this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\r\n    this.menu.addEventListener('click', this.handleMenuClick);\r\n    this.menu.addEventListener('keydown', this.handleMenuKeyDown);\r\n  }\r\n  }\r\n\r\n  menuClickHandler() {\r\n    if (!this.noCloseOnMenuClick) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.popperInstance) {\r\n      this.popperInstance.destroy();\r\n      this.popperInstance = null;\r\n    }\r\n\r\n    if (this.menu) {\r\n      this.menu.remove();\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async isOpen() {\r\n    return this.internalIsOpen;\r\n  }\r\n\r\n  @Method()\r\n  async closeDropdown() {\r\n    if (this.internalIsOpen) {\r\n      this.internalIsOpen = false;\r\n    \r\n      (this.trigger as unknown as IOpenable).isOpen = false;\r\n      (this.menu as unknown as IOpenable).isOpen = false;\r\n   \r\n      this.ifxClose.emit();\r\n    }\r\n \r\n    if (this.popperInstance) {\r\n      this.popperInstance.destroy();\r\n      this.popperInstance = null;\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async openDropdown() {\r\n    if (!this.internalIsOpen && !this.disabled) {\r\n      this.internalIsOpen = true;\r\n      (this.trigger as any).isOpen = true;\r\n      (this.menu as any).isOpen = true;\r\n      this.popperInstance = createPopper(this.el, this.menu, { placement: this.placement });\r\n      this.ifxOpen.emit();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div aria-label='dropdown menu' class='dropdown'>\r\n        <slot />\r\n      </div>\r\n    )\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n@Component({\n  tag: 'ifx-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true\n})\n\nexport class Dropdown {\n  @Prop() placement: Placement = 'bottom-start';\n  @Prop() defaultOpen: boolean = false;\n  @State() internalIsOpen: boolean = false;\n  @Prop() noAppendToBody: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  @Event() ifxDropdown: EventEmitter;\n  @Prop() disabled: boolean;\n  @Prop() noCloseOnOutsideClick: boolean = false;\n  @Prop() noCloseOnMenuClick: boolean = false;\n  @Element() el;\n  @State() trigger: HTMLElement;\n  @State() menu: HTMLElement\n  // Popper instance for positioning\n  popperInstance: any;\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n      this.closeDropdown();\n    }\n  }\n\n  @Listen('focusin', { target: 'document' })\n  handleFocusOutside(event: FocusEvent) {\n    const target = event.target as HTMLElement;\n    if (\n      this.internalIsOpen &&\n      !this.el.contains(target) &&\n      !this.menu.contains(target)\n    ) {\n      this.closeDropdown();\n    }\n  }\n\n  private handleTriggerClick = () => {\n    if (!this.internalIsOpen) this.openDropdown();\n    else this.closeDropdown();\n  };\n\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\n    const key = e.key;\n    if (key === 'Tab' && this.internalIsOpen && !e.shiftKey) {\n      e.preventDefault();\n      this.focusFirstItem();\n    }\n  };\n\n  private handleMenuClick = () => {\n  if (!this.noCloseOnMenuClick) this.closeDropdown();\n};\n\n\nprivate getItemFocusables(): HTMLElement[] {\n  if (!this.menu) return [];\n  const hosts = Array.from(this.menu.querySelectorAll('ifx-dropdown-item')) as HTMLElement[];\n  return hosts\n    .filter(h => !(h.getAttribute('hide') === 'true' || h.classList.contains('hide')))\n    .map(h => h.shadowRoot?.querySelector('a') as HTMLElement | null)\n    .filter((el): el is HTMLElement => !!el);\n}\n\nprivate handleMenuKeyDown = (e: KeyboardEvent) => {\n const items = this.getItemFocusables();\n  if (!items.length) return;\n\n  const i = items.indexOf(document.activeElement as HTMLElement);\n\n  switch (e.key) {\n    case 'ArrowDown':\n      e.preventDefault();\n      items[(i + 1) % items.length].focus();\n      break;\n    case 'ArrowUp':\n      e.preventDefault();\n      items[(i - 1 + items.length) % items.length].focus();\n      break;\n    case 'Home':\n      e.preventDefault();\n      items[0].focus();\n      break;\n    case 'End':\n      e.preventDefault();\n      items[items.length - 1].focus();\n      break;\n    case 'Enter':\n    case ' ':\n    case 'Spacebar':\n      e.preventDefault();\n      (document.activeElement as HTMLElement)?.click();\n      break;\n    case 'Escape':\n      e.preventDefault();\n      this.closeDropdown();\n      (this.trigger as HTMLElement)?.focus();\n      break;\n    case 'Tab':\n      if (e.shiftKey && i === 0) {\n        e.preventDefault();\n        this.closeDropdown();\n        (this.trigger as HTMLElement)?.focus();\n      }\n      break;\n  }\n};\n\n  componentWillLoad() {\n    //maybe not needed\n    this.updateSlotContent();\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-dropdown', await framework)\n    }\n  }\n\n  @Watch('defaultOpen')\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n      if (newValue) {\n        this.openDropdown();\n      } else {\n        this.closeDropdown();\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchHandlerDisabled(newValue: boolean) {\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n    }\n  }\n\n  @Listen('slotchange')\n  watchHandlerSlot() {\n    this.updateSlotContent();\n  }\n\nprivate focusFirstItem() {\n  const [first] = this.getItemFocusables();\n  first?.focus();\n}\n\n\n  updateSlotContent() {\n   const newTrigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger') as HTMLElement | null;\n\n    if (newTrigger !== this.trigger) {\n      if (this.trigger) {\n        this.trigger.removeEventListener('click', this.handleTriggerClick);\n        this.trigger.removeEventListener('keydown', this.handleTriggerKeyDown);\n      }\n      this.trigger = newTrigger!;\n      if (this.trigger) {\n        (this.trigger as any).disabled = this.disabled;\n        this.trigger.addEventListener('click', this.handleTriggerClick);\n        this.trigger.addEventListener('keydown', this.handleTriggerKeyDown);\n      }\n    }\n\n  const newMenu = this.el.querySelector('ifx-dropdown-menu') as HTMLElement | null;\n\n  if (!this.noAppendToBody) {\n    if (this.menu && this.menu !== newMenu) {\n      this.menu.removeEventListener('click', this.handleMenuClick);\n      this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\n      this.menu.remove();\n    }\n    this.menu = newMenu!;\n    if (this.menu && !document.body.contains(this.menu)) {\n      document.body.append(this.menu);\n    }\n  } else {\n    this.menu = newMenu!;\n  }\n\n  if (this.menu) {\n    this.menu.removeEventListener('click', this.handleMenuClick);\n    this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\n    this.menu.addEventListener('click', this.handleMenuClick);\n    this.menu.addEventListener('keydown', this.handleMenuKeyDown);\n  }\n  }\n\n  menuClickHandler() {\n    if (!this.noCloseOnMenuClick) {\n      this.closeDropdown();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\n    if (this.menu) {\n      this.menu.remove();\n    }\n  }\n\n  @Method()\n  async isOpen() {\n    return this.internalIsOpen;\n  }\n\n  @Method()\n  async closeDropdown() {\n    if (this.internalIsOpen) {\n      this.internalIsOpen = false;\n    \n      (this.trigger as unknown as IOpenable).isOpen = false;\n      (this.menu as unknown as IOpenable).isOpen = false;\n   \n      this.ifxClose.emit();\n    }\n \n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  @Method()\n  async openDropdown() {\n    if (!this.internalIsOpen && !this.disabled) {\n      this.internalIsOpen = true;\n      (this.trigger as any).isOpen = true;\n      (this.menu as any).isOpen = true;\n      this.popperInstance = createPopper(this.el, this.menu, { placement: this.placement });\n      this.ifxOpen.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='dropdown menu' class='dropdown'>\n        <slot />\n      </div>\n    )\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown.stories.js

@@ -195,24 +195,24 @@ export default {
 };
 const DefaultTemplate = args => {
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `<ifx-dropdown placement="${args.placement}" 
-  disabled="${args.disabled}" 
-  default-open="${args.defaultOpen}"
-  no-close-on-outside-click="${args.noCloseOnOutsideClick}"
-  no-close-on-menu-click="${args.noCloseOnOutsideClick}"
-  no-append-to-body="${args.noAppendToBody}">
-
-    <ifx-dropdown-trigger-button variant="${args.variant}">
-      ${args.label}
-    </ifx-dropdown-trigger-button>
-
-  <ifx-dropdown-menu size="${args.size}">
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-  </ifx-dropdown-menu>
+    wrapper.innerHTML = `<ifx-dropdown placement="${args.placement}" 
+  disabled="${args.disabled}" 
+  default-open="${args.defaultOpen}"
+  no-close-on-outside-click="${args.noCloseOnOutsideClick}"
+  no-close-on-menu-click="${args.noCloseOnOutsideClick}"
+  no-append-to-body="${args.noAppendToBody}">
+
+    <ifx-dropdown-trigger-button variant="${args.variant}">
+      ${args.label}
+    </ifx-dropdown-trigger-button>
+
+  <ifx-dropdown-menu size="${args.size}">
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+  </ifx-dropdown-menu>
 </ifx-dropdown>`;
     const dropdown = wrapper.querySelector('ifx-dropdown');
     const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
@@ -224,26 +224,26 @@ const DefaultTemplate = args => {
 export const Default = DefaultTemplate.bind({});
 const LabelTriggerTemplate = args => {
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `<ifx-dropdown
-    placement="${args.placement}"
-    default-open="${args.defaultOpen}"
-    no-close-on-outside-click="${args.noCloseOnOutsideClick}"
-    no-close-on-menu-click="${args.noCloseOnOutsideClick}"
-    disabled="${args.disabled}"
-    no-append-to-body="${args.noAppendToBody}"
-  >
-    Hello World! Click on the text to open the dropdown
-    <ifx-dropdown-trigger>
-      <ifx-icon icon="${'c-check-16'}"></ifx-icon>
-    </ifx-dropdown-trigger>
-    Some more text
-  <ifx-dropdown-menu size="${args.size}">
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-  </ifx-dropdown-menu>
+    wrapper.innerHTML = `<ifx-dropdown
+    placement="${args.placement}"
+    default-open="${args.defaultOpen}"
+    no-close-on-outside-click="${args.noCloseOnOutsideClick}"
+    no-close-on-menu-click="${args.noCloseOnOutsideClick}"
+    disabled="${args.disabled}"
+    no-append-to-body="${args.noAppendToBody}"
+  >
+    Hello World! Click on the text to open the dropdown
+    <ifx-dropdown-trigger>
+      <ifx-icon icon="${'c-check-16'}"></ifx-icon>
+    </ifx-dropdown-trigger>
+    Some more text
+  <ifx-dropdown-menu size="${args.size}">
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+  </ifx-dropdown-menu>
 </ifx-dropdown>`;
     const dropdown = wrapper.querySelector('ifx-dropdown');
     const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
@@ -267,24 +267,24 @@ LabelTrigger.argTypes = {
 };
 const HeaderTemplate = args => {
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `<ifx-dropdown
-  placement="${args.placement}"
-  default-open="${args.defaultOpen}"
-  no-close-on-outside-click="${args.noCloseOnOutsideClick}"
-  no-close-on-menu-click="${args.noCloseOnOutsideClick}"
-  no-append-to-body="${args.noAppendToBody}">
-  <ifx-dropdown-header>Dropdown Header</ifx-dropdown-header>
-   <ifx-dropdown-trigger-button variant="${args.variant}">
-      ${args.label}
-    </ifx-dropdown-trigger-button>
-     <ifx-dropdown-menu size="${args.size}">
-    <ifx-dropdown-header>Header Text</ifx-dropdown-header>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-  </ifx-dropdown-menu>
+    wrapper.innerHTML = `<ifx-dropdown
+  placement="${args.placement}"
+  default-open="${args.defaultOpen}"
+  no-close-on-outside-click="${args.noCloseOnOutsideClick}"
+  no-close-on-menu-click="${args.noCloseOnOutsideClick}"
+  no-append-to-body="${args.noAppendToBody}">
+  <ifx-dropdown-header>Dropdown Header</ifx-dropdown-header>
+   <ifx-dropdown-trigger-button variant="${args.variant}">
+      ${args.label}
+    </ifx-dropdown-trigger-button>
+     <ifx-dropdown-menu size="${args.size}">
+    <ifx-dropdown-header>Header Text</ifx-dropdown-header>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+  </ifx-dropdown-menu>
 </ifx-dropdown>`;
     const dropdown = wrapper.querySelector('ifx-dropdown');
     const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
@@ -308,23 +308,23 @@ Header.argTypes = {
 };
 const SearchTemplate = args => {
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `<ifx-dropdown
-  placement="${args.placement}"
-  default-open="${args.defaultOpen}"
-  no-close-on-outside-click="${args.noCloseOnOutsideClick}"
-  no-close-on-menu-click="${args.noCloseOnOutsideClick}"
-  no-append-to-body="${args.noAppendToBody}">
-   <ifx-dropdown-trigger-button variant="${args.variant}">
-      ${args.label}
-    </ifx-dropdown-trigger-button>
-     <ifx-dropdown-menu size="${args.size}">
-    <ifx-search-field show-delete-icon="false"></ifx-search-field>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-  </ifx-dropdown-menu>
+    wrapper.innerHTML = `<ifx-dropdown
+  placement="${args.placement}"
+  default-open="${args.defaultOpen}"
+  no-close-on-outside-click="${args.noCloseOnOutsideClick}"
+  no-close-on-menu-click="${args.noCloseOnOutsideClick}"
+  no-append-to-body="${args.noAppendToBody}">
+   <ifx-dropdown-trigger-button variant="${args.variant}">
+      ${args.label}
+    </ifx-dropdown-trigger-button>
+     <ifx-dropdown-menu size="${args.size}">
+    <ifx-search-field show-delete-icon="false"></ifx-search-field>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+  </ifx-dropdown-menu>
 </ifx-dropdown>`;
     const dropdown = wrapper.querySelector('ifx-dropdown');
     const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
@@ -336,23 +336,23 @@ const SearchTemplate = args => {
 export const SearchField = SearchTemplate.bind({});
 const SeparatorTemplate = args => {
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `<ifx-dropdown
-  placement="${args.placement}"
-  default-open="${args.defaultOpen}"
-   no-close-on-outside-click="${args.noCloseOnOutsideClick}"
-  no-close-on-menu-click="${args.noCloseOnOutsideClick}"
-  no-append-to-body="${args.noAppendToBody}">
-   <ifx-dropdown-trigger-button variant="${args.variant}">
-      ${args.label}
-    </ifx-dropdown-trigger-button>
-     <ifx-dropdown-menu size="${args.size}">
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-separator></ifx-dropdown-separator>
-    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-  </ifx-dropdown-menu>
+    wrapper.innerHTML = `<ifx-dropdown
+  placement="${args.placement}"
+  default-open="${args.defaultOpen}"
+   no-close-on-outside-click="${args.noCloseOnOutsideClick}"
+  no-close-on-menu-click="${args.noCloseOnOutsideClick}"
+  no-append-to-body="${args.noAppendToBody}">
+   <ifx-dropdown-trigger-button variant="${args.variant}">
+      ${args.label}
+    </ifx-dropdown-trigger-button>
+     <ifx-dropdown-menu size="${args.size}">
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-separator></ifx-dropdown-separator>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+  </ifx-dropdown-menu>
 </ifx-dropdown>`;
     const dropdown = wrapper.querySelector('ifx-dropdown');
     const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');