@infineon/infineon-design-system-stencil 20.16.4 → 20.16.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-dropdown-menu.cjs.entry.js +1 -1
- package/dist/cjs/ifx-dropdown-menu.cjs.entry.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.css +1 -0
- package/dist/components/ifx-dropdown-menu.js +1 -1
- package/dist/components/ifx-dropdown-menu.js.map +1 -1
- package/dist/esm/ifx-dropdown-menu.entry.js +1 -1
- package/dist/esm/ifx-dropdown-menu.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-2d7286b3.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-2d7286b3.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-1c3d0ebd.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-1c3d0ebd.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-b797e11e.js');
|
|
6
6
|
|
|
7
|
-
const dropdownMenuCss = ":host{z-index:9999}.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}.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}";
|
|
7
|
+
const dropdownMenuCss = ":host{position:relative;z-index:9999}.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}.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}";
|
|
8
8
|
|
|
9
9
|
const DropdownMenu = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-dropdown-menu.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"ifx-dropdown-menu.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,scAAsc;;MCSjd,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;GACtC;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;GAC5C;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;GACF;EAED,mBAAmB;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC9B;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;GACpC;EAGD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElCA,qBAAQ,CACH,EACP;GACH;;;;;;;","names":["h"],"sources":["./src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","./src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n position: relative;\n z-index: 9999;\n}\n\n.dropdown-menu {\n display: none;\n visibility: hidden;\n flex-direction: column;\n width: 224px;\n max-height: 289px;\n min-width: 224px;\n overflow-y: auto;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 0px;\n\n &.small { \n max-height: 266px;\n max-width: 186px;\n overflow-y: auto;\n }\n\n &.hideTopPadding { \n padding-top: 0px;\n }\n}\n\n.dropdown-menu.show {\n display: flex;\n visibility: visible;\n}","// 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}"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const dropdownMenuCss = ":host{z-index:9999}.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}.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}";
|
|
3
|
+
const dropdownMenuCss = ":host{position:relative;z-index:9999}.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}.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}";
|
|
4
4
|
|
|
5
5
|
const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-dropdown-menu.js","mappings":";;AAAA,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"ifx-dropdown-menu.js","mappings":";;AAAA,MAAM,eAAe,GAAG,scAAsc;;MCSjd,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;GACtC;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;GAC5C;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;GACF;EAED,mBAAmB;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC9B;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;GACpC;EAGD,MAAM;IACJ,QACE,WAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElC,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","./src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n position: relative;\n z-index: 9999;\n}\n\n.dropdown-menu {\n display: none;\n visibility: hidden;\n flex-direction: column;\n width: 224px;\n max-height: 289px;\n min-width: 224px;\n overflow-y: auto;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 0px;\n\n &.small { \n max-height: 266px;\n max-width: 186px;\n overflow-y: auto;\n }\n\n &.hideTopPadding { \n padding-top: 0px;\n }\n}\n\n.dropdown-menu.show {\n display: flex;\n visibility: visible;\n}","// 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}"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-69e586c1.js';
|
|
2
2
|
|
|
3
|
-
const dropdownMenuCss = ":host{z-index:9999}.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}.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}";
|
|
3
|
+
const dropdownMenuCss = ":host{position:relative;z-index:9999}.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}.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}";
|
|
4
4
|
|
|
5
5
|
const DropdownMenu = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-dropdown-menu.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"ifx-dropdown-menu.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,scAAsc;;MCSjd,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;GACtC;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;GAC5C;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;GACF;EAED,mBAAmB;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC9B;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;GACpC;EAGD,MAAM;IACJ,QACE,WAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElC,eAAQ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","./src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n position: relative;\n z-index: 9999;\n}\n\n.dropdown-menu {\n display: none;\n visibility: hidden;\n flex-direction: column;\n width: 224px;\n max-height: 289px;\n min-width: 224px;\n overflow-y: auto;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 0px;\n\n &.small { \n max-height: 266px;\n max-width: 186px;\n overflow-y: auto;\n }\n\n &.hideTopPadding { \n padding-top: 0px;\n }\n}\n\n.dropdown-menu.show {\n display: flex;\n visibility: visible;\n}","// 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}"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,b as t}from"./p-acd1bd1f.js";export{s as setNonce}from"./p-acd1bd1f.js";const o=()=>{{a(i.prototype)}const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};const a=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const o=this.childNodes;if(e){for(let e=0;e<o.length;e++){if(o[e].nodeType!==2){t.appendChild(o[e].cloneNode(true))}}}return t}};o().then((e=>t([["p-aa77bd38",[[1,"ifx-faq"]]],["p-46547e72",[[1,"ifx-dropdown-trigger-button",{isOpen:[4,"is-open"],variant:[1],color:[1],size:[1],disabled:[4],hideArrow:[4,"hide-arrow"]}]]],["p-8b2262fb",[[1,"ifx-modal",{caption:[1],closeOnOverlayClick:[4,"close-on-overlay-click"],alertColor:[1,"alert-color"],alertIcon:[1,"alert-icon"],showModal:[32],open:[64],close:[64]}]]],["p-50f4cec6",[[1,"ifx-multiselect",{options:[1],size:[1],disabled:[4],error:[4],errorMessage:[1,"error-message"],label:[1],maxItemCount:[2,"max-item-count"],persistentSelectedOptions:[32],listOfOptions:[32],dropdownOpen:[32],dropdownFlipped:[32],zIndex:[32]}]]],["p-e1bb2777",[[1,"ifx-search-bar",{showCloseButton:[4,"show-close-button"],isOpen:[4,"is-open"],disabled:[4],value:[1025],internalState:[32]}]]],["p-5dce7228",[[1,"ifx-alert",{color:[1],icon:[1]}]]],["p-e33ff153",[[1,"ifx-breadcrumb-item-label",{icon:[1],url:[1],target:[1]}]]],["p-b4504ee8",[[1,"ifx-chip",{placeholder:[1],isEmpty:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-420f4319",[[1,"ifx-dropdown-item",{icon:[1],href:[1],target:[1],hide:[4],size:[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-9d6be18b",[[1,"ifx-example",{variant:[1],color:[1],size:[1],disabled:[4],icon:[1],position:[1],href:[1],target:[1],type:[1],internalPosition:[32],setFocus:[64]}]]],["p-39708f39",[[1,"ifx-icon-button",{variant:[1],color:[1],size:[1],disabled:[4],icon:[1],href:[1],target:[1],shape:[1],setFocus:[64]}]]],["p-43963509",[[1,"ifx-icons-preview",{iconsArray:[32],isCopied:[32],copiedIndex:[32],htmlTag:[32],iconName:[32]}]]],["p-939327e2",[[1,"ifx-list-item",{isFlush:[1028,"is-flush"],badge:[4],badgeValue:[2,"badge-value"],hasBulletpoint:[32]}]]],["p-38f32fc0",[[1,"ifx-navbar",{applicationName:[1,"application-name"],fixed:[4],showLogo:[4,"show-logo"],main:[32],products:[32],applications:[32],design:[32],support:[32],about:[32],hasLeftMenuItems:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-80b1506f",[[1,"ifx-navbar-item",{isProfile:[1028,"is-profile"],hideLabel:[4,"hide-label"],icon:[1],href:[1],target:[1]}]]],["p-294583db",[[0,"ifx-select",{type:[1],value:[1],name:[1],items:[16],choices:[1],renderChoiceLimit:[2,"render-choice-limit"],maxItemCount:[2,"max-item-count"],addItems:[4,"add-items"],removeItems:[4,"remove-items"],removeItemButton:[4,"remove-item-button"],editItems:[4,"edit-items"],duplicateItemsAllowed:[4,"duplicate-items-allowed"],delimiter:[1],paste:[4],searchEnabled:[4,"search-enabled"],searchChoices:[4,"search-choices"],searchFields:[1,"search-fields"],searchFloor:[2,"search-floor"],searchResultLimit:[2,"search-result-limit"],position:[1],resetScrollPosition:[4,"reset-scroll-position"],shouldSort:[4,"should-sort"],shouldSortItems:[4,"should-sort-items"],sorter:[16],placeholder:[8],placeholderValue:[1,"placeholder-value"],searchPlaceholderValue:[1,"search-placeholder-value"],prependValue:[1,"prepend-value"],appendValue:[1,"append-value"],renderSelectedChoices:[1,"render-selected-choices"],loadingText:[1,"loading-text"],noResultsText:[1,"no-results-text"],noChoicesText:[1,"no-choices-text"],itemSelectText:[1,"item-select-text"],addItemText:[1,"add-item-text"],maxItemText:[1,"max-item-text"],uniqueItemText:[1,"unique-item-text"],classNames:[16],fuseOptions:[16],addItemFilter:[1,"add-item-filter"],customAddItemText:[1,"custom-add-item-text"],callbackOnInit:[16],callbackOnCreateTemplates:[16],valueComparer:[16],ifxError:[4,"ifx-error"],ifxErrorMessage:[1,"ifx-error-message"],ifxLabel:[1,"ifx-label"],ifxDisabled:[4,"ifx-disabled"],ifxPlaceholderValue:[1,"ifx-placeholder-value"],ifxOptions:[1,"ifx-options"],ifxSize:[1,"ifx-size"],ifxSelectedOption:[32],handleChange:[64],highlightItem:[64],unhighlightItem:[64],highlightAll:[64],unhighlightAll:[64],removeActiveItemsByValue:[64],removeActiveItems:[64],removeHighlightedItems:[64],showDropdown:[64],hideDropdown:[64],getValue:[64],setValue:[64],setChoiceByValue:[64],setChoices:[64],clearChoices:[64],clearStore:[64],clearInput:[64],enable:[64],disable:[64],ajax:[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-391beed0",[[1,"ifx-sidebar-item",{icon:[1],href:[1],target:[1],hasIcon:[32],hasIconWrapper:[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-a586bb28",[[1,"ifx-slider",{min:[2],max:[2],value:[2],disabled:[4],showPercentage:[4,"show-percentage"],leftIcon:[1,"left-icon"],rightIcon:[1,"right-icon"],leftText:[1,"left-text"],rightText:[1,"right-text"],internalValue:[32]}]]],["p-84745b56",[[1,"ifx-text-field",{placeholder:[1],value:[1025],error:[4],errorMessage:[1,"error-message"],success:[4],disabled:[4],readonly:[4],icon:[4]}]]],["p-042ecebc",[[1,"ifx-tooltip",{header:[1],text:[1],position:[1],variant:[1],icon:[1],tooltipVisible:[32],internalPosition:[32]}]]],["p-c0324e61",[[1,"ifx-badge"]]],["p-621d85ce",[[0,"ifx-basic-table",{cols:[1],rows:[1],columnDefs:[16],rowData:[16],rowHeight:[1,"row-height"],uniqueKey:[1,"unique-key"],tableHeight:[1,"table-height"],gridOptions:[32]}]]],["p-5b6d051f",[[1,"ifx-breadcrumb"]]],["p-321bc38a",[[1,"ifx-breadcrumb-item",{isLastItem:[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-6ccb878f",[[1,"ifx-card",{direction:[1],href:[1],target:[1],noBtns:[32],alignment:[32],noImg:[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-fce37e59",[[1,"ifx-card-headline",{isHovered:[4,"is-hovered"],direction:[32],hasDesc:[32]}]]],["p-9f7b7de1",[[1,"ifx-card-image",{src:[1],alt:[1],position:[1]}]]],["p-c706365e",[[1,"ifx-card-links"]]],["p-3ae02e9a",[[1,"ifx-card-overline"]]],["p-41c935d6",[[1,"ifx-card-text",{hasBtn:[32]}]]],["p-f6041d8a",[[1,"ifx-dropdown",{placement:[1],defaultOpen:[4,"default-open"],noAppendToBody:[4,"no-append-to-body"],disabled:[4],noCloseOnOutsideClick:[4,"no-close-on-outside-click"],noCloseOnMenuClick:[4,"no-close-on-menu-click"],internalIsOpen:[32],trigger:[32],menu:[32],isOpen:[64],closeDropdown:[64],openDropdown:[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]]]]],["p-e4ca2035",[[1,"ifx-dropdown-header"]]],["p-
|
|
1
|
+
import{p as e,H as i,b as t}from"./p-acd1bd1f.js";export{s as setNonce}from"./p-acd1bd1f.js";const o=()=>{{a(i.prototype)}const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};const a=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const o=this.childNodes;if(e){for(let e=0;e<o.length;e++){if(o[e].nodeType!==2){t.appendChild(o[e].cloneNode(true))}}}return t}};o().then((e=>t([["p-aa77bd38",[[1,"ifx-faq"]]],["p-46547e72",[[1,"ifx-dropdown-trigger-button",{isOpen:[4,"is-open"],variant:[1],color:[1],size:[1],disabled:[4],hideArrow:[4,"hide-arrow"]}]]],["p-8b2262fb",[[1,"ifx-modal",{caption:[1],closeOnOverlayClick:[4,"close-on-overlay-click"],alertColor:[1,"alert-color"],alertIcon:[1,"alert-icon"],showModal:[32],open:[64],close:[64]}]]],["p-50f4cec6",[[1,"ifx-multiselect",{options:[1],size:[1],disabled:[4],error:[4],errorMessage:[1,"error-message"],label:[1],maxItemCount:[2,"max-item-count"],persistentSelectedOptions:[32],listOfOptions:[32],dropdownOpen:[32],dropdownFlipped:[32],zIndex:[32]}]]],["p-e1bb2777",[[1,"ifx-search-bar",{showCloseButton:[4,"show-close-button"],isOpen:[4,"is-open"],disabled:[4],value:[1025],internalState:[32]}]]],["p-5dce7228",[[1,"ifx-alert",{color:[1],icon:[1]}]]],["p-e33ff153",[[1,"ifx-breadcrumb-item-label",{icon:[1],url:[1],target:[1]}]]],["p-b4504ee8",[[1,"ifx-chip",{placeholder:[1],isEmpty:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-420f4319",[[1,"ifx-dropdown-item",{icon:[1],href:[1],target:[1],hide:[4],size:[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-9d6be18b",[[1,"ifx-example",{variant:[1],color:[1],size:[1],disabled:[4],icon:[1],position:[1],href:[1],target:[1],type:[1],internalPosition:[32],setFocus:[64]}]]],["p-39708f39",[[1,"ifx-icon-button",{variant:[1],color:[1],size:[1],disabled:[4],icon:[1],href:[1],target:[1],shape:[1],setFocus:[64]}]]],["p-43963509",[[1,"ifx-icons-preview",{iconsArray:[32],isCopied:[32],copiedIndex:[32],htmlTag:[32],iconName:[32]}]]],["p-939327e2",[[1,"ifx-list-item",{isFlush:[1028,"is-flush"],badge:[4],badgeValue:[2,"badge-value"],hasBulletpoint:[32]}]]],["p-38f32fc0",[[1,"ifx-navbar",{applicationName:[1,"application-name"],fixed:[4],showLogo:[4,"show-logo"],main:[32],products:[32],applications:[32],design:[32],support:[32],about:[32],hasLeftMenuItems:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-80b1506f",[[1,"ifx-navbar-item",{isProfile:[1028,"is-profile"],hideLabel:[4,"hide-label"],icon:[1],href:[1],target:[1]}]]],["p-294583db",[[0,"ifx-select",{type:[1],value:[1],name:[1],items:[16],choices:[1],renderChoiceLimit:[2,"render-choice-limit"],maxItemCount:[2,"max-item-count"],addItems:[4,"add-items"],removeItems:[4,"remove-items"],removeItemButton:[4,"remove-item-button"],editItems:[4,"edit-items"],duplicateItemsAllowed:[4,"duplicate-items-allowed"],delimiter:[1],paste:[4],searchEnabled:[4,"search-enabled"],searchChoices:[4,"search-choices"],searchFields:[1,"search-fields"],searchFloor:[2,"search-floor"],searchResultLimit:[2,"search-result-limit"],position:[1],resetScrollPosition:[4,"reset-scroll-position"],shouldSort:[4,"should-sort"],shouldSortItems:[4,"should-sort-items"],sorter:[16],placeholder:[8],placeholderValue:[1,"placeholder-value"],searchPlaceholderValue:[1,"search-placeholder-value"],prependValue:[1,"prepend-value"],appendValue:[1,"append-value"],renderSelectedChoices:[1,"render-selected-choices"],loadingText:[1,"loading-text"],noResultsText:[1,"no-results-text"],noChoicesText:[1,"no-choices-text"],itemSelectText:[1,"item-select-text"],addItemText:[1,"add-item-text"],maxItemText:[1,"max-item-text"],uniqueItemText:[1,"unique-item-text"],classNames:[16],fuseOptions:[16],addItemFilter:[1,"add-item-filter"],customAddItemText:[1,"custom-add-item-text"],callbackOnInit:[16],callbackOnCreateTemplates:[16],valueComparer:[16],ifxError:[4,"ifx-error"],ifxErrorMessage:[1,"ifx-error-message"],ifxLabel:[1,"ifx-label"],ifxDisabled:[4,"ifx-disabled"],ifxPlaceholderValue:[1,"ifx-placeholder-value"],ifxOptions:[1,"ifx-options"],ifxSize:[1,"ifx-size"],ifxSelectedOption:[32],handleChange:[64],highlightItem:[64],unhighlightItem:[64],highlightAll:[64],unhighlightAll:[64],removeActiveItemsByValue:[64],removeActiveItems:[64],removeHighlightedItems:[64],showDropdown:[64],hideDropdown:[64],getValue:[64],setValue:[64],setChoiceByValue:[64],setChoices:[64],clearChoices:[64],clearStore:[64],clearInput:[64],enable:[64],disable:[64],ajax:[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-391beed0",[[1,"ifx-sidebar-item",{icon:[1],href:[1],target:[1],hasIcon:[32],hasIconWrapper:[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-a586bb28",[[1,"ifx-slider",{min:[2],max:[2],value:[2],disabled:[4],showPercentage:[4,"show-percentage"],leftIcon:[1,"left-icon"],rightIcon:[1,"right-icon"],leftText:[1,"left-text"],rightText:[1,"right-text"],internalValue:[32]}]]],["p-84745b56",[[1,"ifx-text-field",{placeholder:[1],value:[1025],error:[4],errorMessage:[1,"error-message"],success:[4],disabled:[4],readonly:[4],icon:[4]}]]],["p-042ecebc",[[1,"ifx-tooltip",{header:[1],text:[1],position:[1],variant:[1],icon:[1],tooltipVisible:[32],internalPosition:[32]}]]],["p-c0324e61",[[1,"ifx-badge"]]],["p-621d85ce",[[0,"ifx-basic-table",{cols:[1],rows:[1],columnDefs:[16],rowData:[16],rowHeight:[1,"row-height"],uniqueKey:[1,"unique-key"],tableHeight:[1,"table-height"],gridOptions:[32]}]]],["p-5b6d051f",[[1,"ifx-breadcrumb"]]],["p-321bc38a",[[1,"ifx-breadcrumb-item",{isLastItem:[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-6ccb878f",[[1,"ifx-card",{direction:[1],href:[1],target:[1],noBtns:[32],alignment:[32],noImg:[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-fce37e59",[[1,"ifx-card-headline",{isHovered:[4,"is-hovered"],direction:[32],hasDesc:[32]}]]],["p-9f7b7de1",[[1,"ifx-card-image",{src:[1],alt:[1],position:[1]}]]],["p-c706365e",[[1,"ifx-card-links"]]],["p-3ae02e9a",[[1,"ifx-card-overline"]]],["p-41c935d6",[[1,"ifx-card-text",{hasBtn:[32]}]]],["p-f6041d8a",[[1,"ifx-dropdown",{placement:[1],defaultOpen:[4,"default-open"],noAppendToBody:[4,"no-append-to-body"],disabled:[4],noCloseOnOutsideClick:[4,"no-close-on-outside-click"],noCloseOnMenuClick:[4,"no-close-on-menu-click"],internalIsOpen:[32],trigger:[32],menu:[32],isOpen:[64],closeDropdown:[64],openDropdown:[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]]]]],["p-e4ca2035",[[1,"ifx-dropdown-header"]]],["p-2d7286b3",[[1,"ifx-dropdown-menu",{isOpen:[4,"is-open"],size:[1],hideTopPadding:[32],filteredItems:[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-f7d0f880",[[1,"ifx-dropdown-separator"]]],["p-3b6a6777",[[1,"ifx-dropdown-trigger",{isOpen:[4,"is-open"]}]]],["p-2901f8d0",[[1,"ifx-filter-input",{label:[1],size:[1],disabled:[4],icon:[4],search:[4],filter:[4],options:[32]}]]],["p-87f2c40e",[[1,"ifx-footer",{variant:[1],large:[32],default:[32],showFacebook:[32]}]]],["p-b304e24a",[[1,"ifx-footer-column"]]],["p-d618fd1c",[[1,"ifx-link",{href:[1],target:[1],color:[1],bold:[4],underline:[4]}]]],["p-3b29e194",[[1,"ifx-list-group",{flush:[4],bulletpoint:[4],notification:[4]}]]],["p-407b87d3",[[1,"ifx-list-notification",{titleText:[1,"title-text"],isFlush:[4,"is-flush"],creationTime:[8,"creation-time"],postTime:[32],shownTime:[32]}]]],["p-98aa70c1",[[1,"ifx-navbar-menu",{menu:[32]}]]],["p-c4218d32",[[1,"ifx-navbar-menu-item",{href:[1],target:[1],hide:[4]}]]],["p-fdc08d78",[[1,"ifx-progress-bar",{value:[2],label:[1],size:[1],showLabel:[4,"show-label"],internalValue:[32]}]]],["p-ac8ae0f1",[[1,"ifx-radio-button",{disabled:[4],value:[4],error:[4],size:[1],internalValue:[32],hasSlot:[32]}]]],["p-876f3be2",[[1,"ifx-sidebar",{applicationName:[1,"application-name"]}]]],["p-3eb1e629",[[1,"ifx-spinner",{size:[1],variant:[1]}]]],["p-1f80154a",[[1,"ifx-status",{label:[1],border:[4],color:[1]}]]],["p-d1286a72",[[1,"ifx-switch",{value:[4],name:[1],disabled:[4],internalValue:[32]}]]],["p-e5d0e265",[[4,"ifx-tab",{header:[1]}]]],["p-4cd46828",[[0,"ifx-table",{cols:[1],rows:[1],columnDefs:[16],rowData:[16],rowHeight:[1,"row-height"],uniqueKey:[1,"unique-key"],tableHeight:[1,"table-height"],pagination:[4],paginationPageSize:[2,"pagination-page-size"],gridOptions:[32]}]]],["p-ccbb19eb",[[1,"ifx-tabs",{tabs:[16],orientation:[1],small:[4],internalOrientation:[32],activeTabIndex:[32],tabRefs:[32],tabHeaderRefs:[32],tabTitles:[32]},[[0,"slotchange","onSlotChange"]]]]],["p-a9433958",[[1,"ifx-tag"]]],["p-ac28061c",[[1,"ifx-checkbox",{disabled:[4],value:[4],error:[4],name:[1],indeterminate:[4],internalValue:[32]}]]],["p-369b4552",[[1,"ifx-search-field",{value:[1025],showDeleteIcon:[4,"show-delete-icon"],disabled:[4],size:[1],insideDropdown:[32],isFocused:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-7df928cc",[[1,"ifx-number-indicator",{inverted:[4]}]]],["p-1348f335",[[1,"ifx-accordion-item",{caption:[1],open:[32],close:[64],isOpen:[64]}],[1,"ifx-accordion",{autoCollapse:[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-427eed2e",[[1,"ifx-button",{variant:[1],color:[1],size:[1],disabled:[4],href:[1],target:[1],internalHref:[32],setFocus:[64]}]]],["p-a54bbb10",[[0,"ifx-icon",{icon:[1025],ifxIcon:[1032,"ifx-icon"]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as t,h as e,g as o}from"./p-acd1bd1f.js";const s=":host{position:relative;z-index:9999}.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}.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}";const d=class{constructor(e){i(this,e);this.menuSize=t(this,"menuSize",7);this.ifxDropdownMenuItem=t(this,"ifxDropdownMenuItem",7);this.isOpen=false;this.size="l";this.hideTopPadding=false;this.filteredItems=[]}handleMenuFilter(i){const t=i.detail;this.filterDropdownItems(t)}handleDropdownItemValueEmission(i){this.ifxDropdownMenuItem.emit(i.detail)}filterDropdownItems(i){const t=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));let e,o;let s=i.toUpperCase();for(let i=0;i<t.length;i++){e=t[i];o=e.textContent||e.innerText;if(o.toUpperCase().indexOf(s)>-1){e.setAttribute("hide",false)}else{e.setAttribute("hide",true)}}}componentWillUpdate(){this.menuSize.emit(this.size)}componentWillLoad(){this.filteredItems=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));const i=this.el.querySelector("ifx-search-field");const t=this.el.querySelector("ifx-dropdown-header");if(i||t){this.hideTopPadding=true}else this.hideTopPadding=false}render(){return e("div",{class:`dropdown-menu \n ${this.isOpen?"show":""} \n ${this.hideTopPadding?"hideTopPadding":""}\n ${this.size==="s"?"small":""}`},e("slot",null))}get el(){return o(this)}};d.style=s;export{d as ifx_dropdown_menu};
|
|
2
|
+
//# sourceMappingURL=p-2d7286b3.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dropdownMenuCss","DropdownMenu","handleMenuFilter","event","searchValue","detail","this","filterDropdownItems","handleDropdownItemValueEmission","ifxDropdownMenuItem","emit","allItems","Array","from","el","querySelectorAll","dropdownItem","txtValue","query","toUpperCase","i","length","textContent","innerText","indexOf","setAttribute","componentWillUpdate","menuSize","size","componentWillLoad","filteredItems","searchField","querySelector","dropdownHeader","hideTopPadding","render","h","class","isOpen"],"sources":["./src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","./src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n position: relative;\n z-index: 9999;\n}\n\n.dropdown-menu {\n display: none;\n visibility: hidden;\n flex-direction: column;\n width: 224px;\n max-height: 289px;\n min-width: 224px;\n overflow-y: auto;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 0px;\n\n &.small { \n max-height: 266px;\n max-width: 186px;\n overflow-y: auto;\n }\n\n &.hideTopPadding { \n padding-top: 0px;\n }\n}\n\n.dropdown-menu.show {\n display: flex;\n visibility: visible;\n}","// 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}"],"mappings":"yDAAA,MAAMA,EAAkB,uc,MCSXC,EAAY,M,iIACG,M,UACH,I,oBACY,M,mBAIoB,E,CAIvDC,iBAAiBC,GACf,MAAMC,EAAcD,EAAME,OAC1BC,KAAKC,oBAAoBH,E,CAI3BI,gCAAgCL,GAC9BG,KAAKG,oBAAoBC,KAAKP,EAAME,O,CAGtCE,oBAAoBH,GAClB,MAAMO,EAAWC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAAiB,sBACrD,IAAIC,EAAcC,EAClB,IAAIC,EAAQd,EAAYe,cAExB,IAAK,IAAIC,EAAI,EAAGA,EAAIT,EAASU,OAAQD,IAAK,CACxCJ,EAAeL,EAASS,GACxBH,EAAWD,EAAaM,aAAeN,EAAaO,UAEpD,GAAIN,EAASE,cAAcK,QAAQN,IAAU,EAAG,CAC9CF,EAAaS,aAAa,OAAQ,M,KAC7B,CACLT,EAAaS,aAAa,OAAQ,K,GAKxCC,sBACEpB,KAAKqB,SAASjB,KAAKJ,KAAKsB,K,CAG1BC,oBACEvB,KAAKwB,cAAgBlB,MAAMC,KAAKP,KAAKQ,GAAGC,iBAAiB,sBACzD,MAAMgB,EAAczB,KAAKQ,GAAGkB,cAAc,oBAC1C,MAAMC,EAAiB3B,KAAKQ,GAAGkB,cAAc,uBAE7C,GAAID,GAAeE,EAAgB,CACjC3B,KAAK4B,eAAiB,I,MACjB5B,KAAK4B,eAAiB,K,CAI/BC,SACE,OACEC,EAAA,OAAKC,MAAO,yBACV/B,KAAKgC,OAAS,OAAS,cACvBhC,KAAK4B,eAAiB,iBAAmB,aACzC5B,KAAKsB,OAAS,IAAM,QAAU,MAE9BQ,EAAA,a"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "20.16.
|
|
3
|
+
"version": "20.16.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Infineon design system Stencil web components",
|
|
6
6
|
"homepage": "https://github.com/Infineon/infineon-design-system-stencil#readme",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as s,g as e}from"./p-acd1bd1f.js";const o=":host{z-index:9999}.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}.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}";const d=class{constructor(s){i(this,s);this.menuSize=t(this,"menuSize",7);this.ifxDropdownMenuItem=t(this,"ifxDropdownMenuItem",7);this.isOpen=false;this.size="l";this.hideTopPadding=false;this.filteredItems=[]}handleMenuFilter(i){const t=i.detail;this.filterDropdownItems(t)}handleDropdownItemValueEmission(i){this.ifxDropdownMenuItem.emit(i.detail)}filterDropdownItems(i){const t=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));let s,e;let o=i.toUpperCase();for(let i=0;i<t.length;i++){s=t[i];e=s.textContent||s.innerText;if(e.toUpperCase().indexOf(o)>-1){s.setAttribute("hide",false)}else{s.setAttribute("hide",true)}}}componentWillUpdate(){this.menuSize.emit(this.size)}componentWillLoad(){this.filteredItems=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));const i=this.el.querySelector("ifx-search-field");const t=this.el.querySelector("ifx-dropdown-header");if(i||t){this.hideTopPadding=true}else this.hideTopPadding=false}render(){return s("div",{class:`dropdown-menu \n ${this.isOpen?"show":""} \n ${this.hideTopPadding?"hideTopPadding":""}\n ${this.size==="s"?"small":""}`},s("slot",null))}get el(){return e(this)}};d.style=o;export{d as ifx_dropdown_menu};
|
|
2
|
-
//# sourceMappingURL=p-1c3d0ebd.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["dropdownMenuCss","DropdownMenu","handleMenuFilter","event","searchValue","detail","this","filterDropdownItems","handleDropdownItemValueEmission","ifxDropdownMenuItem","emit","allItems","Array","from","el","querySelectorAll","dropdownItem","txtValue","query","toUpperCase","i","length","textContent","innerText","indexOf","setAttribute","componentWillUpdate","menuSize","size","componentWillLoad","filteredItems","searchField","querySelector","dropdownHeader","hideTopPadding","render","h","class","isOpen"],"sources":["./src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","./src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n z-index: 9999;\n}\n\n.dropdown-menu {\n display: none;\n visibility: hidden;\n flex-direction: column;\n width: 224px;\n max-height: 289px;\n min-width: 224px;\n overflow-y: auto;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 0px;\n\n &.small { \n max-height: 266px;\n max-width: 186px;\n overflow-y: auto;\n }\n\n &.hideTopPadding { \n padding-top: 0px;\n }\n}\n\n.dropdown-menu.show {\n display: flex;\n visibility: visible;\n}","// 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}"],"mappings":"yDAAA,MAAMA,EAAkB,qb,MCSXC,EAAY,M,iIACG,M,UACH,I,oBACY,M,mBAIoB,E,CAIvDC,iBAAiBC,GACf,MAAMC,EAAcD,EAAME,OAC1BC,KAAKC,oBAAoBH,E,CAI3BI,gCAAgCL,GAC9BG,KAAKG,oBAAoBC,KAAKP,EAAME,O,CAGtCE,oBAAoBH,GAClB,MAAMO,EAAWC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAAiB,sBACrD,IAAIC,EAAcC,EAClB,IAAIC,EAAQd,EAAYe,cAExB,IAAK,IAAIC,EAAI,EAAGA,EAAIT,EAASU,OAAQD,IAAK,CACxCJ,EAAeL,EAASS,GACxBH,EAAWD,EAAaM,aAAeN,EAAaO,UAEpD,GAAIN,EAASE,cAAcK,QAAQN,IAAU,EAAG,CAC9CF,EAAaS,aAAa,OAAQ,M,KAC7B,CACLT,EAAaS,aAAa,OAAQ,K,GAKxCC,sBACEpB,KAAKqB,SAASjB,KAAKJ,KAAKsB,K,CAG1BC,oBACEvB,KAAKwB,cAAgBlB,MAAMC,KAAKP,KAAKQ,GAAGC,iBAAiB,sBACzD,MAAMgB,EAAczB,KAAKQ,GAAGkB,cAAc,oBAC1C,MAAMC,EAAiB3B,KAAKQ,GAAGkB,cAAc,uBAE7C,GAAID,GAAeE,EAAgB,CACjC3B,KAAK4B,eAAiB,I,MACjB5B,KAAK4B,eAAiB,K,CAI/BC,SACE,OACEC,EAAA,OAAKC,MAAO,yBACV/B,KAAKgC,OAAS,OAAS,cACvBhC,KAAK4B,eAAiB,iBAAmB,aACzC5B,KAAKsB,OAAS,IAAM,QAAU,MAE9BQ,EAAA,a"}
|