Static Site

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IOpenable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IOpenable.js","sourceRoot":"","sources":["../../../src/components/dropdown/IOpenable.ts"],"names":[],"mappings":"","sourcesContent":["// IOpenable.ts\nexport interface IOpenable {\n    isOpen: boolean;\n}"]}

Static/package/dist/collection/components/dropdown/dropdown-header/dropdown-header.css

@@ -0,0 +1,23 @@
+:root {
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
+}
+
+.dropdown-header {
+  display: flex;
+  padding: 8px 16px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-bottom: 1px solid #EEEDED;
+  font-family: var(--ifx-font-family);
+}
+.dropdown-header span {
+  color: #575352;
+  font-family: var(--ifx-font-family);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  /* 142.857% */
+}

Static/package/dist/collection/components/dropdown/dropdown-header/dropdown-header.js

@@ -0,0 +1,20 @@
+// dropdown-separator.tsx
+import { h } from "@stencil/core";
+export class DropdownHeader {
+  render() {
+    return (h("div", { class: 'dropdown-header' }, h("span", null, h("slot", null))));
+  }
+  static get is() { return "ifx-dropdown-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-header.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-header.css"]
+    };
+  }
+}
+//# sourceMappingURL=dropdown-header.js.map

Static/package/dist/collection/components/dropdown/dropdown-header/dropdown-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-header/dropdown-header.tsx"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,cAAc;EACzB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,iBAAiB;MAC1B;QACE,eAAQ,CACH,CACH,CACP,CAAA;EACH,CAAC;;;;;;;;;CACF","sourcesContent":["// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true\n})\n\nexport class DropdownHeader {\n  render() {\n    return (\n      <div class='dropdown-header'>\n        <span>\n          <slot />\n        </span>\n      </div>\n    )\n  }\n}"]}

Static/package/dist/collection/components/dropdown/dropdown-item/dropdown-item.css

@@ -0,0 +1,39 @@
+:root {
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
+}
+
+.dropdown-item {
+  text-decoration: none;
+  color: #1D1D1D;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 8px;
+  font-family: var(--ifx-font-family);
+}
+.dropdown-item.hide {
+  display: none;
+}
+.dropdown-item span {
+  color: #1D1D1D;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  /* 150% */
+}
+.dropdown-item.small span {
+  font-size: 14px;
+}
+.dropdown-item:hover {
+  cursor: pointer;
+  background-color: #EEEDED;
+}
+.dropdown-item:active {
+  background-color: #BFBBBB;
+}
+
+.icon {
+  margin-right: 4px;
+}

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

@@ -0,0 +1,142 @@
+// dropdown-item.tsx
+import { h } from "@stencil/core";
+export class DropdownItem {
+  constructor() {
+    this.icon = undefined;
+    this.href = "";
+    this.target = "_self";
+    this.hide = false;
+    this.size = 'l';
+  }
+  handleMenuSize(event) {
+    this.size = event.detail;
+  }
+  handleEventEmission() {
+    this.ifxDropdownItem.emit(this.el.textContent);
+  }
+  render() {
+    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};
+    return (h("a", Object.assign({}, hrefAttr, { onClick: () => this.handleEventEmission(), class: `dropdown-item ${this.size === 's' ? 'small' : ""} ${this.hide ? 'hide' : ""}` }), this.icon && h("ifx-icon", { class: "icon", icon: this.icon }), h("span", null, h("slot", null))));
+  }
+  static get is() { return "ifx-dropdown-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "\"_self\""
+      },
+      "hide": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "size": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ifxDropdownItem",
+        "name": "ifxDropdownItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "menuSize",
+        "method": "handleMenuSize",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=dropdown-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;;;gBAEA,EAAE;kBACA,OAAO;gBACR,KAAK;gBACL,GAAG;;EAK3B,cAAc,CAAC,KAAkB;IAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;EAC3B,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;EAChD,CAAC;EAED,MAAM;IACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,OAAO,CACL,yBAAO,QAAQ,IAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,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;MAC9I,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa;MACjE;QACE,eAAQ,CACH,CACL,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// dropdown-item.tsx\nimport { 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    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"]}

Static/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.css

@@ -0,0 +1,32 @@
+:host {
+  position: relative;
+  z-index: 1000;
+}
+
+.dropdown-menu {
+  display: none;
+  visibility: hidden;
+  flex-direction: column;
+  width: 224px;
+  max-height: 289px;
+  min-width: 224px;
+  overflow-y: auto;
+  background: #FFFFFF;
+  box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);
+  border: 1px solid #EEEDED;
+  padding: 8px 0px;
+  font-family: var(--ifx-font-family);
+}
+.dropdown-menu.small {
+  max-height: 266px;
+  max-width: 186px;
+  overflow-y: auto;
+}
+.dropdown-menu.hideTopPadding {
+  padding-top: 0px;
+}
+
+.dropdown-menu.show {
+  display: flex;
+  visibility: visible;
+}

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

@@ -0,0 +1,164 @@
+// dropdown-menu.tsx
+import { h } from "@stencil/core";
+export class DropdownMenu {
+  constructor() {
+    this.isOpen = false;
+    this.size = 'l';
+    this.hideTopPadding = false;
+    this.filteredItems = [];
+  }
+  handleMenuFilter(event) {
+    const searchValue = event.detail;
+    this.filterDropdownItems(searchValue);
+  }
+  handleDropdownItemValueEmission(event) {
+    this.ifxDropdownMenuItem.emit(event.detail);
+  }
+  filterDropdownItems(searchValue) {
+    const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
+    let dropdownItem, txtValue;
+    let query = searchValue.toUpperCase();
+    for (let i = 0; i < allItems.length; i++) {
+      dropdownItem = allItems[i];
+      txtValue = dropdownItem.textContent || dropdownItem.innerText;
+      if (txtValue.toUpperCase().indexOf(query) > -1) {
+        dropdownItem.setAttribute('hide', false);
+      }
+      else {
+        dropdownItem.setAttribute('hide', true);
+      }
+    }
+  }
+  componentWillUpdate() {
+    this.menuSize.emit(this.size);
+  }
+  componentWillLoad() {
+    this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
+    const searchField = this.el.querySelector('ifx-search-field');
+    const dropdownHeader = this.el.querySelector('ifx-dropdown-header');
+    if (searchField || dropdownHeader) {
+      this.hideTopPadding = true;
+    }
+    else
+      this.hideTopPadding = false;
+  }
+  render() {
+    return (h("div", { class: `dropdown-menu 
+      ${this.isOpen ? 'show' : ''} 
+      ${this.hideTopPadding ? 'hideTopPadding' : ""}
+      ${this.size === 's' ? 'small' : ""}` }, h("slot", null)));
+  }
+  static get is() { return "ifx-dropdown-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'l'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hideTopPadding": {},
+      "filteredItems": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "menuSize",
+        "name": "menuSize",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "ifxDropdownMenuItem",
+        "name": "ifxDropdownMenuItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "CustomEvent",
+          "resolved": "CustomEvent<any>",
+          "references": {
+            "CustomEvent": {
+              "location": "global",
+              "id": "global::CustomEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "ifxInput",
+        "method": "handleMenuFilter",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "ifxDropdownItem",
+        "method": "handleDropdownItemValueEmission",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=dropdown-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;;kBACG,KAAK;gBACR,GAAG;0BACS,KAAK;yBAIe,EAAE;;EAIzD,gBAAgB,CAAC,KAAkB;IACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;EACvC,CAAC;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;EAC7C,CAAC;EAED,mBAAmB,CAAC,WAAmB;IACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;IAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;IAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;MAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;MAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;QAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;OACzC;WAAM;QACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;OACxC;KACF;EACH,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC/B,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;IAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;IAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;IAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;MACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;;MAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;EACrC,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,WAAK,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;MAElC,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// dropdown-menu.tsx\nimport { 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}"]}

Static/package/dist/collection/components/dropdown/dropdown-seperator/dropdown-separator.css

@@ -0,0 +1,5 @@
+.dropdown-separator {
+  height: 1px;
+  background-color: #EEEDED;
+  margin: 8px 16px;
+}

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

@@ -0,0 +1,20 @@
+// dropdown-separator.tsx
+import { h } from "@stencil/core";
+export class DropdownSeparator {
+  render() {
+    return (h("div", { class: 'dropdown-separator' }));
+  }
+  static get is() { return "ifx-dropdown-separator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-separator.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-separator.css"]
+    };
+  }
+}
+//# sourceMappingURL=dropdown-separator.js.map

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

@@ -0,0 +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;EAC5B,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAA;EACH,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}"]}

Static/package/dist/collection/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.css

@@ -0,0 +1,14 @@
+:host {
+  display: inline-block;
+}
+
+.rotate {
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(-180deg);
+  margin-top: 0em;
+}
+
+.icon {
+  margin-top: 0em;
+  transition: transform 0.2s ease-in-out;
+}

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

@@ -0,0 +1,139 @@
+// dropdown-trigger-button.tsx
+import { h } from "@stencil/core";
+export class DropdownItem {
+  constructor() {
+    this.isOpen = false;
+    this.theme = 'default';
+    this.variant = undefined;
+    this.size = 'm';
+    this.disabled = undefined;
+    this.hideArrow = false;
+  }
+  render() {
+    return (h("ifx-button", { variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", null), !this.hideArrow &&
+      h("ifx-icon", { icon: "chevron-down-12", class: `icon${this.isOpen ? ' rotate' : ''}` })));
+  }
+  static get is() { return "ifx-dropdown-trigger-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-trigger-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-trigger-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'danger' | 'inverse'",
+          "resolved": "\"danger\" | \"default\" | \"inverse\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary'",
+          "resolved": "\"primary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'s' | 'm'",
+          "resolved": "\"m\" | \"s\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'m'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "hideArrow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-arrow",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=dropdown-trigger-button.js.map

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

@@ -0,0 +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;;kBACG,KAAK;iBAEmB,SAAS;;gBAEjC,GAAG;;qBAEA,KAAK;;EAElC,MAAM;IACJ,OAAO,CACL,kBACE,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;MAE/B,eAAQ;MACP,CAAC,IAAI,CAAC,SAAS;QACd,gBAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CAExE,CACd,CAAA;EACH,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-12\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n        }\n      </ifx-button>\n    )\n  }\n}"]}

Static/package/dist/collection/components/dropdown/dropdown-trigger/dropdown-trigger.css

@@ -0,0 +1,4 @@
+:host {
+  display: inline-block;
+  cursor: pointer;
+}

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

@@ -0,0 +1,45 @@
+// dropdown-trigger-button.tsx
+import { h } from "@stencil/core";
+export class DropdownItem {
+  constructor() {
+    this.isOpen = false;
+  }
+  render() {
+    return (h("slot", null));
+  }
+  static get is() { return "ifx-dropdown-trigger"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-trigger.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-trigger.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-open",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=dropdown-trigger.js.map

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

@@ -0,0 +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;;kBACG,KAAK;;EAE/B,MAAM;IACJ,OAAO,CACL,eAAQ,CACT,CAAA;EACH,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}"]}

Static/package/dist/collection/components/dropdown/dropdown.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-block;
+}

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

@@ -0,0 +1,48 @@
+// dropdown.e2e.ts
+import { newE2EPage } from "@stencil/core/testing";
+describe('Dropdown Component', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+      <ifx-dropdown>
+        <ifx-dropdown-trigger-button icon="c-info-16" variant="solid" color="primary" size="m"></ifx-dropdown-trigger-button>
+        <ifx-dropdown-menu>
+          <ifx-dropdown-item href="https://example.com" icon="c-info-16" target="_blank"></ifx-dropdown-item>
+          <ifx-dropdown-separator></ifx-dropdown-separator>
+          <ifx-dropdown-item href="https://example2.com" icon="c-info-16" target="_blank"></ifx-dropdown-item>
+        </ifx-dropdown-menu>
+      </ifx-dropdown>
+    `);
+  });
+  it('should be rendered', async () => {
+    const dropdown = await page.find('ifx-dropdown');
+    expect(dropdown).not.toBeNull();
+  });
+  it('should render the separator', async () => {
+    const separator = await page.find('ifx-dropdown-separator');
+    expect(separator).not.toBeNull();
+  });
+  it('should open the dropdown when the trigger is clicked', async () => {
+    const dropdown = await page.find('ifx-dropdown');
+    const trigger = await dropdown.querySelector('ifx-dropdown-trigger-button');
+    await trigger.click();
+    const dropdownMenu = await page.find('ifx-dropdown-menu');
+    const isVisible = await dropdownMenu.isVisible();
+    expect(isVisible).toBe(true);
+  });
+  it('should render the correct icon for each dropdown item', async () => {
+    // Open the dropdown
+    const dropdown = await page.find('ifx-dropdown');
+    const trigger = await dropdown.querySelector('ifx-dropdown-trigger-button');
+    await trigger.click();
+    // Check the icons for each dropdown item
+    const dropdownMenu = await page.find('ifx-dropdown-menu');
+    const items = await dropdownMenu.findAll('ifx-dropdown-item');
+    const icon1 = await items[0].shadowRoot.querySelector('ifx-icon');
+    expect(icon1).not.toBeNull();
+    const icon2 = await items[1].shadowRoot.querySelector('ifx-icon');
+    expect(icon2).not.toBeNull();
+  });
+});
+//# sourceMappingURL=dropdown.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.e2e.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.e2e.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAChC,IAAI,IAAI,CAAC;EAET,UAAU,CAAC,KAAK,IAAI,EAAE;IAClB,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAC1B,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;;KASzB,CAAC,CAAC;EACH,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;EACpC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;IAC5D,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;EACrC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IAElE,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAC5E,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IAEtB,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,MAAM,YAAY,CAAC,SAAS,EAAE,CAAC;IACjD,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;IACnE,oBAAoB;IACpB,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAC5E,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IAEtB,yCAAyC;IACzC,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC1D,MAAM,KAAK,GAAG,MAAM,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC9D,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAClE,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAE7B,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAClE,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["// dropdown.e2e.ts\nimport { newE2EPage } from '@stencil/core/testing';\n\ndescribe('Dropdown Component', () => {\n    let page;\n\n    beforeEach(async () => {\n        page = await newE2EPage();\n        await page.setContent(`\n      <ifx-dropdown>\n        <ifx-dropdown-trigger-button icon=\"c-info-16\" variant=\"solid\" color=\"primary\" size=\"m\"></ifx-dropdown-trigger-button>\n        <ifx-dropdown-menu>\n          <ifx-dropdown-item href=\"https://example.com\" icon=\"c-info-16\" target=\"_blank\"></ifx-dropdown-item>\n          <ifx-dropdown-separator></ifx-dropdown-separator>\n          <ifx-dropdown-item href=\"https://example2.com\" icon=\"c-info-16\" target=\"_blank\"></ifx-dropdown-item>\n        </ifx-dropdown-menu>\n      </ifx-dropdown>\n    `);\n    });\n\n    it('should be rendered', async () => {\n        const dropdown = await page.find('ifx-dropdown');\n        expect(dropdown).not.toBeNull();\n    });\n\n    it('should render the separator', async () => {\n        const separator = await page.find('ifx-dropdown-separator');\n        expect(separator).not.toBeNull();\n    });\n\n    it('should open the dropdown when the trigger is clicked', async () => {\n\n        const dropdown = await page.find('ifx-dropdown');\n        const trigger = await dropdown.querySelector('ifx-dropdown-trigger-button');\n        await trigger.click();\n\n        const dropdownMenu = await page.find('ifx-dropdown-menu');\n        const isVisible = await dropdownMenu.isVisible();\n        expect(isVisible).toBe(true);\n    });\n\n    it('should render the correct icon for each dropdown item', async () => {\n        // Open the dropdown\n        const dropdown = await page.find('ifx-dropdown');\n        const trigger = await dropdown.querySelector('ifx-dropdown-trigger-button');\n        await trigger.click();\n\n        // Check the icons for each dropdown item\n        const dropdownMenu = await page.find('ifx-dropdown-menu');\n        const items = await dropdownMenu.findAll('ifx-dropdown-item');\n        const icon1 = await items[0].shadowRoot.querySelector('ifx-icon');\n        expect(icon1).not.toBeNull();\n\n        const icon2 = await items[1].shadowRoot.querySelector('ifx-icon');\n        expect(icon2).not.toBeNull();\n    });\n});"]}

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

@@ -0,0 +1,408 @@
+//dropdown.tsx
+import { h } from "@stencil/core";
+import { createPopper } from "@popperjs/core";
+export class Dropdown {
+  constructor() {
+    this.placement = 'bottom-start';
+    this.defaultOpen = false;
+    this.internalIsOpen = false;
+    this.noAppendToBody = false;
+    this.disabled = undefined;
+    this.noCloseOnOutsideClick = false;
+    this.noCloseOnMenuClick = false;
+    this.trigger = undefined;
+    this.menu = undefined;
+  }
+  componentWillLoad() {
+    //maybe not needed
+    this.updateSlotContent();
+    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);
+  }
+  watchHandlerIsOpen(newValue, oldValue) {
+    if (newValue !== oldValue && newValue !== this.internalIsOpen) {
+      if (newValue) {
+        this.openDropdown();
+      }
+      else {
+        this.closeDropdown();
+      }
+    }
+  }
+  watchHandlerDisabled(newValue) {
+    if (this.trigger) {
+      this.trigger.disabled = newValue;
+    }
+  }
+  watchHandlerSlot() {
+    this.updateSlotContent();
+  }
+  // handling assignment of trigger and menu
+  updateSlotContent() {
+    // Get dropdown trigger. name has to start with ifx-dropdown-trigger
+    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');
+    if (this.trigger) {
+      this.trigger.disabled = this.disabled;
+      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));
+      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));
+    }
+    // Remove menu if exists from body
+    if (!this.noAppendToBody) {
+      if (this.menu) {
+        this.menu.remove();
+      }
+      // Get new menu and add to body
+      this.menu = this.el.querySelector('ifx-dropdown-menu');
+      // event handler for closing dropdown on menu click
+      document.body.append(this.menu);
+    }
+    else {
+      this.menu = this.el.querySelector('ifx-dropdown-menu');
+    }
+    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));
+    this.menu.addEventListener('click', this.menuClickHandler.bind(this));
+  }
+  menuClickHandler() {
+    if (!this.noCloseOnMenuClick) {
+      this.closeDropdown();
+    }
+  }
+  triggerClickHandler() {
+    if (!this.internalIsOpen) {
+      this.openDropdown();
+    }
+    else {
+      this.closeDropdown();
+    }
+  }
+  disconnectedCallback() {
+    // Destroy popper instance if exists
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+    // Remove menu if exists
+    if (this.menu) {
+      this.menu.remove();
+    }
+  }
+  async isOpen() {
+    return this.internalIsOpen;
+  }
+  async closeDropdown() {
+    if (this.internalIsOpen) {
+      this.internalIsOpen = false;
+      // sets isOpen prop on trigger and menu
+      this.trigger.isOpen = false;
+      this.menu.isOpen = false;
+      // Emit close event
+      this.ifxClose.emit();
+    }
+    // Destroy popper instance if exists
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+  }
+  async openDropdown() {
+    if (!this.internalIsOpen && !this.disabled) {
+      this.internalIsOpen = true;
+      // sets isOpen prop on trigger and menu
+      this.trigger.isOpen = true;
+      this.menu.isOpen = true;
+      // Create popper instance for positioning
+      this.popperInstance = createPopper(this.el, this.menu, { placement: this.placement });
+      this.ifxOpen.emit();
+    }
+  }
+  //emitted by and listening to it from the dropdown menu right now
+  // @Listen('ifxDropdownMenu')
+  // handleDropdownMenuEvents(event: CustomEvent) {
+  //   this.ifxDropdown.emit(event.detail)
+  //   console.log('Selected item received in higher-level parent:');
+  // }
+  handleOutsideClick(event) {
+    const target = event.target;
+    // Close dropdown if outside click
+    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {
+      this.closeDropdown();
+    }
+  }
+  render() {
+    return (h("div", { "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", null)));
+  }
+  static get is() { return "ifx-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "local",
+              "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"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom-start'"
+      },
+      "defaultOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noAppendToBody": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-append-to-body",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "noCloseOnOutsideClick": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-close-on-outside-click",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noCloseOnMenuClick": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-close-on-menu-click",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "internalIsOpen": {},
+      "trigger": {},
+      "menu": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ifxOpen",
+        "name": "ifxOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "ifxClose",
+        "name": "ifxClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "ifxDropdown",
+        "name": "ifxDropdown",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "isOpen": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "closeDropdown": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "IOpenable": {
+              "location": "import",
+              "path": "./IOpenable",
+              "id": "src/components/dropdown/IOpenable.ts::IOpenable"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "openDropdown": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "IOpenable": {
+              "location": "import",
+              "path": "./IOpenable",
+              "id": "src/components/dropdown/IOpenable.ts::IOpenable"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "defaultOpen",
+        "methodName": "watchHandlerIsOpen"
+      }, {
+        "propName": "disabled",
+        "methodName": "watchHandlerDisabled"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "slotchange",
+        "method": "watchHandlerSlot",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "mousedown",
+        "method": "handleOutsideClick",
+        "target": "document",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +1,156 @@
+import { action } from "@storybook/addon-actions";
+import { icons } from "@infineon/infineon-icons";
+export default {
+  title: 'Components/Dropdown',
+  args: {
+    label: "Dropdown",
+    size: "m",
+    disabled: false,
+    search: false,
+    header: false,
+    separator: false,
+    variant: "primary",
+    url: "",
+    target: "_self",
+    icon: "c-check-16",
+    dropdownMenuItemIcon: false,
+    defaultOpen: false,
+    noCloseOnOutsideClick: false,
+    noCloseOnMenuClick: false,
+    noAppendToBody: false,
+    placement: 'bottom-start',
+  },
+  argTypes: {
+    placement: {
+      options: [
+        'auto',
+        'auto-start',
+        'auto-end',
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'right',
+        'right-start',
+        'right-end',
+        'left',
+        'left-start',
+        'left-end'
+      ],
+      control: { type: 'select' },
+    },
+    label: { description: 'The visible name or label for the dropdown button' },
+    size: {
+      description: "Font Size options: s (14px) and m (16px) - default: m",
+      options: ['s', 'm'],
+      control: { type: 'radio' },
+    },
+    disabled: { description: 'Determines if the dropdown button should be disabled' },
+    variant: {
+      description: 'The visual style of the dropdown button. Accepted values are "primary", "secondary", "tertiary"',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'radio' },
+    },
+    target: {
+      options: ['_self', '_blank'],
+      control: { type: 'radio' },
+    },
+    icon: {
+      description: 'The icon to be displayed on the dropdown button',
+      options: Object.values(icons).map(i => i['name']),
+      control: { type: 'select' },
+    },
+    defaultOpen: { description: 'Determines if the dropdown should be open by default' },
+    noCloseOnOutsideClick: { description: 'Determines if the dropdown should not close when a click outside the dropdown happens' },
+    noCloseOnMenuClick: { description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens' },
+    noAppendToBody: { description: 'Determines if the dropdown should not be appended to the body' },
+    ifxOpen: {
+      action: 'ifxOpen',
+      description: 'Custom event that is emitted when the dropdown opens',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxOpen={handleChange}\nVue:@ifxOpen="handleChange"\nAngular:(ifxOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle change});',
+        },
+      },
+    },
+    ifxClose: {
+      action: 'ifxClose',
+      description: 'Custom event emitted when dropdown closes',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxClose={handleChange}\nVue:@ifxClose="handleChange"\nAngular:(ifxClose)="handleChange()"\nVanillaJs:.addEventListener("ifxClose", (event) => {//handle change});',
+        },
+      },
+    },
+    ifxDropdownMenuItem: {
+      action: 'ifxDropdownMenuItem',
+      description: 'Custom event emitted when an item is selected',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxDropdownMenuItem={handleChange}\nVue:@ifxDropdownMenuItem="handleChange"\nAngular:(ifxDropdownMenuItem)="handleChange()"\nVanillaJs:.addEventListener("ifxDropdownMenuItem", (event) => {//handle change});',
+        },
+      },
+    }
+  },
+};
+const DefaultTemplate = (args) => {
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = `<ifx-dropdown placement="${args.placement}" disabled="${args.disabled}" no-close-on-menu-click="${args.noCloseOnOutsideClick}">
+  <ifx-dropdown-trigger-button variant="${args.variant}">
+    dropdown
+  </ifx-dropdown-trigger-button>
+  <ifx-dropdown-menu size="${args.size}">
+    ${args.header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ""}
+    ${args.search ? `<ifx-search-field show-delete-icon="false"></ifx-search-field>` : ""}
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+    ${args.separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ""}
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+  </ifx-dropdown-menu>
+</ifx-dropdown>`;
+  const dropdown = wrapper.querySelector('ifx-dropdown');
+  const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
+  dropdown.addEventListener('ifxOpen', action('ifxOpen'));
+  dropdown.addEventListener('ifxClose', action('ifxClose'));
+  dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
+  return wrapper;
+};
+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="${args.icon}"></ifx-icon>
+    </ifx-dropdown-trigger>
+    Some more text
+    <ifx-dropdown-menu>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+    </ifx-dropdown-menu>
+  </ifx-dropdown>`;
+  const dropdown = wrapper.querySelector('ifx-dropdown');
+  const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
+  dropdown.addEventListener('ifxOpen', action('ifxOpen'));
+  dropdown.addEventListener('ifxClose', action('ifxClose'));
+  dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
+  return wrapper;
+};
+export const LabelTrigger = LabelTriggerTemplate.bind({});
+//# sourceMappingURL=dropdown.stories.js.map