npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4-canary.0 → 39.5.0 - Mend

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

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.

Files changed (1210) hide show

package/dist/components/ifx-pagination.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { P as Pagination, d as defineCustomElement$1 } from './p-UJUcpUZI.js';
+import { P as Pagination, d as defineCustomElement$1 } from './p-BG0cmSVP.js';
 const IfxPagination = Pagination;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-progress-bar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { P as ProgressBar, d as defineCustomElement$1 } from './p-B8O27fA1.js';
+import { P as ProgressBar, d as defineCustomElement$1 } from './p-BR9GBwm3.js';
 const IfxProgressBar = ProgressBar;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-radio-button-group.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
 const radioButtonGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;color:#1D1D1D;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.group-label .required{color:#575352;margin-left:4px}.group-label .required.error{color:#CD002F}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
@@ -56,7 +56,7 @@ const RadioButtonGroup = /*@__PURE__*/ proxyCustomElement(class RadioButtonGroup
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: '9d56fb1bbb2ad9ce178e55f2e703bcba8be4e6b2', class: 'radio-button-group-container' }, this.showGroupLabel && (h("div", { key: '314ff595785c24d188cf98dc232a9dae19205f44', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: 'fe839163d77957b80d72b7bcf8369a68e7a3d992', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: '018d84f32df0e17743080ac09d98bc030fe09e30', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: 'd632718b08c8100e6c8604059f86abfc324e2ba8', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (h("div", { key: 'dcd66919142f41e8d51054f7de1663361c273232', class: 'radio-button-group-container' }, this.showGroupLabel && (h("div", { key: '7765acb090b78c495b03b17f242b0efacba29a10', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: 'e500cc4867c756991d6e76b77640b6fc1f052296', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: '05211a3727a84a135588bccee63d22c36511cbee', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '4d9cbd4f52276f6c101306208bd6156e01287f2f', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     get el() { return this; }
     static get style() { return radioButtonGroupCss; }

package/dist/components/ifx-radio-button-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-radio-button-group.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.radio-button-group-container {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.radio-button-group {\r\n display: flex;\r\n gap: tokens.$ifxSpace100;\r\n\r\n &.horizontal {\r\n flex-direction: row;\r\n column-gap: tokens.$ifxSpace150;\r\n }\r\n\r\n &.vertical {\r\n flex-direction: column;\r\n row-gap: tokens.$ifxSpace150;\r\n }\r\n}\r\n\r\n.group-label {\r\n font-size: tokens.$ifxFontSizeM;\r\n color: tokens.$ifxColorBaseBlack;\r\n line-height: tokens.$ifxLineHeightM;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n margin-bottom: tokens.$ifxSpace100;\r\n text-align: left;\r\n text-underline-position: from-font;\r\n text-decoration-skip-ink: none;\r\n}\r\n\r\n.group-label .required {\r\n color: tokens.$ifxColorEngineering500;\r\n margin-left: tokens.$ifxSpace50;\r\n}\r\n\r\n.group-label .required.error {\r\n color: tokens.$ifxColorRed500;\r\n}\r\n\r\n.caption {\r\n margin-top: tokens.$ifxSpace100;\r\n align-self: flex-start;\r\n display: flex;\r\n width: 100%;\r\n column-gap: tokens.$ifxSpace100;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n &.default {\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n\r\n &.error {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n}\r\n\r\n.caption-text {\r\n font-size: tokens.$ifxFontSizeXs;\r\n line-height: tokens.$ifxLineHeightXs;\r\n flex: 1;\r\n text-align: left;\r\n text-underline-position: from-font;\r\n text-decoration-skip-ink: none;\r\n}\r\n\r\n.caption-icon {\r\n flex:0;\r\n display: flex;\r\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-radio-button-group',\r\n styleUrl: 'radio-button-group.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\n\r\nexport class RadioButtonGroup {\r\n private errorStates: Map<HTMLElement, boolean> = new Map();\r\n\r\n @Element() el: HTMLElement;\r\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\r\n @Prop() size: string;\r\n @Prop() showGroupLabel: boolean;\r\n @Prop() groupLabelText: string = 'Group Label Text';\r\n @Prop() showCaption: boolean;\r\n @Prop() captionText: string;\r\n @Prop() showCaptionIcon: boolean;\r\n @Prop() required: boolean = false;\r\n @State() hasErrors: boolean = false;\r\n \r\n @Listen('ifxError')\r\n handleRadioButtonError(event: CustomEvent) {\r\n const radioButton = event.target as HTMLElement;\r\n if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\r\n this.errorStates.set(radioButton, event.detail);\r\n this.updateHasErrors();\r\n }\r\n }\r\n\r\n // Method to set the error state of all radio-butttons in the group\r\n @Method()\r\n async setGroupError(error: boolean) {\r\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n radioButtons.forEach((radioButton) => {\r\n (radioButton as any).error = error;\r\n });\r\n }\r\n\r\n componentWillLoad() {\r\n this.initializeState();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-radio-button-group', await framework)\r\n }\r\n }\r\n\r\n handleSlotChange = () => {\r\n this.initializeState();\r\n };\r\n\r\n private initializeState() {\r\n this.errorStates.clear();\r\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n radioButtons.forEach((radioButton) => {\r\n if (!this.errorStates.has(radioButton)) {\r\n this.errorStates.set(radioButton, (radioButton as any).error \|\| false);\r\n }\r\n });\r\n this.updateHasErrors();\r\n }\r\n\r\n private updateHasErrors() {\r\n console.log('here')\r\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class='radio-button-group-container'>\r\n {this.showGroupLabel && (\r\n <div class=\"group-label\">\r\n {this.groupLabelText}\r\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\r\n </div>\r\n )}\r\n <div class={`radio-button-group ${this.alignment} ${this.size}`}>\r\n <slot onSlotchange={this.handleSlotChange} ></slot>\r\n </div>\r\n {this.showCaption ? (\r\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\r\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\r\n </ifx-icon></div> : ''}\r\n <div class='caption-text'>{this.captionText}</div>\r\n </div>) : ''}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
1	+ {"file":"ifx-radio-button-group.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.radio-button-group {\n display: flex;\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font-size: tokens.$ifxFontSizeM;\n color: tokens.$ifxColorBaseBlack;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.group-label .required {\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace50;\n}\n\n.group-label .required.error {\n color: tokens.$ifxColorRed500;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button-group',\n styleUrl: 'radio-button-group.scss',\n shadow: true,\n // formAssociated: true\n})\n\nexport class RadioButtonGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @Prop() required: boolean = false;\n @State() hasErrors: boolean = false;\n \n @Listen('ifxError')\n handleRadioButtonError(event: CustomEvent) {\n const radioButton = event.target as HTMLElement;\n if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\n this.errorStates.set(radioButton, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all radio-butttons in the group\n @Method()\n async setGroupError(error: boolean) {\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n (radioButton as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n if (!this.errorStates.has(radioButton)) {\n this.errorStates.set(radioButton, (radioButton as any).error \|\| false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n console.log('here')\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='radio-button-group-container'>\n {this.showGroupLabel && (\n <div class=\"group-label\">\n {this.groupLabelText}\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n </div>\n )}\n <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange} ></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"version":3}

package/dist/components/ifx-radio-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { R as RadioButton, d as defineCustomElement$1 } from './p-DcAKq8Jr.js';
+import { R as RadioButton, d as defineCustomElement$1 } from './p-BGgzlGhs.js';
 const IfxRadioButton = RadioButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-search-bar.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$3 } from './p-BnjY2AJX.js';
-import { d as defineCustomElement$2 } from './p-D3I_SqHt.js';
+import { d as defineCustomElement$3 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$2 } from './p-CRSbKJxa.js';
 const searchBarCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}";
@@ -47,7 +47,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends H {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '3c4c2a5448190651f3b9e41f2712598758abcec9', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: '79e53af4741984e201a7c62711236c8091538b7d', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-search-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-search-bar.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,u+BAAu+B;;MCU/+B,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAY,IAAI;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAMxB,QAAA,IAAY,CAAA,YAAA,GAAW,IAAI;AAcpC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;YACxC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;AACvC,SAAC;AAsBD,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACjB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AAC3B,SAAC;AAuBF;AA5DC,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;IAI5B,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAQlC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAGlC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAGvC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;AAIrD,IAAA,WAAW,CAAC,KAAkB,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM;;IAQ3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAY,+BAA+B,EAAa,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,eAAA,EAAiB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAA,CAAE,EAAA,EAC9K,IAAI,CAAC,aAAa,IACjB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,kBAAA,EAAA,EAAkB,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAC/J,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAEnB,CAAc,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,cAAc,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAW,EAAA,OAAA,CAAA,CAC7F,KAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EACpC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAC7B,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,CAAY,CAClC,CACP,CACK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n width: 100%; //revert\r\n display: flex;\r\n}\r\n\r\n.search-bar {\r\n box-sizing: border-box;\r\n height: tokens.$ifxSize500;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n width: 100%;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n &.closed {\r\n display: flex;\r\n width: auto;\r\n justify-content: flex-start;\r\n }\r\n\r\n & .search-bar-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: tokens.$ifxSpace200;\r\n width: 100%;\r\n\r\n & a {\r\n \r\n text-decoration: none;\r\n font-size: tokens.$ifxFontSizeM;\r\n font-style: normal;\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n line-height: tokens.$ifxLineHeightM;\r\n color: tokens.$ifxColorOcean500;\r\n cursor: pointer;\r\n &:focus{\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n }\r\n & ifx-search-field {\r\n width: 100%;\r\n }\r\n }\r\n\r\n .search-bar__icon-wrapper {\r\n display: none;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n & ifx-icon:hover {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n &.closed {\r\n .search-bar__icon-wrapper {\r\n display: flex;\r\n }\r\n\r\n .search-bar-wrapper {\r\n display: none;\r\n }\r\n }\r\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-search-bar',\r\n styleUrl: 'search-bar.scss',\r\n shadow: true,\r\n})\r\nexport class SearchBar {\r\n @Prop() isOpen: boolean = true;\r\n @Prop() disabled: boolean = false;\r\n @State() internalState: boolean;\r\n @Prop({ mutable: true }) value: string;\r\n @Prop() maxlength?: number;\r\n @Event() ifxInput: EventEmitter;\r\n @Event() ifxOpen: EventEmitter;\r\n @Prop() autocomplete: string = \"on\";\r\n @Element() el;\r\n\r\n @Method()\r\n async onNavbarMobile() {\r\n this.ifxOpen.emit(false)\r\n this.internalState = false;\r\n }\r\n\r\n @Watch('isOpen')\r\n handlePropChange() {\r\n this.internalState = this.isOpen;\r\n }\r\n\r\n handleCloseButton = () => {\r\n this.internalState = !this.internalState;\r\n this.ifxOpen.emit(this.internalState)\r\n }\r\n\r\n setInitialState() {\r\n this.internalState = this.isOpen;\r\n }\r\n\r\n componentWillLoad() {\r\n this.setInitialState();\r\n this.ifxOpen.emit(this.internalState)\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-search-bar', await framework)\r\n }\r\n }\r\n\r\n handleInput(event: CustomEvent) {\r\n this.value = event.detail;\r\n }\r\n\r\n handleFocus = () => {\r\n this.internalState = true;\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\r\n {this.internalState ? (\r\n <div class=\"search-bar-wrapper\">\r\n <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\r\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\r\n </ifx-search-field>\r\n\r\n <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\r\n </div>\r\n ) : (\r\n <div class=\"search-bar_icon-wrapper\"\r\n onClick={this.handleCloseButton}>\r\n <ifx-icon icon=\"search-16\"></ifx-icon>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-search-bar.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,u+BAAu+B;;MCU/+B,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAY,IAAI;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAMxB,QAAA,IAAY,CAAA,YAAA,GAAW,IAAI;AAcpC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;YACxC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;AACvC,SAAC;AAsBD,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACjB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AAC3B,SAAC;AAuBF;AA5DC,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;IAI5B,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAQlC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAGlC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAGvC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;AAIrD,IAAA,WAAW,CAAC,KAAkB,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM;;IAQ3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAY,+BAA+B,EAAa,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,eAAA,EAAiB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAA,CAAE,EAAA,EAC9K,IAAI,CAAC,aAAa,IACjB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,kBAAA,EAAA,EAAkB,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAC/J,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAEnB,CAAc,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,cAAc,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAW,EAAA,OAAA,CAAA,CAC7F,KAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EACpC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAC7B,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,CAAY,CAClC,CACP,CACK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n width: 100%; //revert\n display: flex;\n}\n\n.search-bar {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.closed {\n display: flex;\n width: auto;\n justify-content: flex-start;\n }\n\n & .search-bar-wrapper {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace200;\n width: 100%;\n\n & a {\n \n text-decoration: none;\n font-size: tokens.$ifxFontSizeM;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n &:focus{\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n }\n & ifx-search-field {\n width: 100%;\n }\n }\n\n .search-bar__icon-wrapper {\n display: none;\n flex-direction: row;\n align-items: center;\n\n & ifx-icon:hover {\n cursor: pointer;\n }\n }\n\n &.closed {\n .search-bar__icon-wrapper {\n display: flex;\n }\n\n .search-bar-wrapper {\n display: none;\n }\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxOpen: EventEmitter;\n @Prop() autocomplete: string = \"on\";\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n componentWillLoad() {\n this.setInitialState();\n this.ifxOpen.emit(this.internalState)\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-search-bar', await framework)\n }\n }\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar_icon-wrapper\"\n onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/ifx-search-field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchField, d as defineCustomElement$1 } from './p-D3I_SqHt.js';
+import { S as SearchField, d as defineCustomElement$1 } from './p-CRSbKJxa.js';
 const IfxSearchField = SearchField;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-segment.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
 const segmentCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.segment{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;border:1px solid #BFBBBB;border-radius:1px;padding:0 8px 0 8px;height:34px;background-color:#FFFFFF;transition:all 100ms ease;transition-property:color, background;font:600 0.875rem/1.25rem \"Source Sans 3\"}.segment:focus-visible{color:#FFFFFF;background-color:#0A8276}.segment:hover{color:#FFFFFF;background-color:#08665C;cursor:pointer}.segment:active{background-color:#06534B}.segment.segment--selected{color:#FFFFFF;background-color:#0A8276}.segment.segment--small{height:30px}.segment::after{position:absolute;top:0;left:0;width:100%;height:100%;outline:1px solid #BFBBBB;border-radius:1px;content:\"\"}";
@@ -26,7 +26,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends H {
         }
     }
     render() {
-        return (h("div", { key: 'f1c3d94b360aa39d61b021f9fcd8aa3e3533a3bf', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'a421ad55148b0d098f65fa002610a929cd544e5b', icon: this.icon }), " ", h("slot", { key: '3a700e57d8c7681162e1c067590c99c9ffb5a7a0' })));
+        return (h("div", { key: '7e3de00d0927c957e99a81faf334f096a1f3b4fc', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '6d6d9d9d02bebbe45aa32250fe73ee4deac9876a', icon: this.icon }), " ", h("slot", { key: '2c860e35d492f81d846356e60bdcf04919cc6bc7' })));
     }
     static get style() { return segmentCss; }
 }, [257, "ifx-segment", {

package/dist/components/ifx-segment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-segment.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,8vBAA8vB;;MCQpwB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,GAAA;;;;;AAW6B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BrD;IAxBG,kBAAkB,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG9C,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACrC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAClD,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;YACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;;IAIlD,MAAM,GAAA;QACF,QACI,4DAAK,KAAK,EAAE,CAAA,QAAA,EAAW,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE,CAAA,CAAE,EAC7D,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAO,IAAI,CAAC,kBAAkB,EAAE,CAAA,EAAC,EAC1C,SAAS,EAAE,CAAC,CAAC,OAAM,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAC,EAAA,EAChD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,OAAC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/segmented-control/segment/segment.scss?tag=ifx-segment&encapsulation=shadow","src/components/segmented-control/segment/segment.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.segment {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: tokens.$ifxSize100;\r\n position: relative;\r\n\r\n border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\r\n border-radius: tokens.$ifxBorderRadius12;\r\n padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\r\n \r\n height: 34px;\r\n\r\n background-color: tokens.$ifxColorBaseWhite;\r\n\r\n transition: all 100ms ease;\r\n transition-property: color, background;\r\n \r\n font: tokens.$ifxBodyBodySemibold04;\r\n\r\n &:focus-visible {\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover { \r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorOcean600;\r\n \r\n cursor: pointer;\r\n }\r\n \r\n &:active {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n \r\n &.segment--selected {\r\n color: tokens.$ifxColorBaseWhite;\r\n \r\n background-color: tokens.$ifxColorOcean500;\r\n }\r\n\r\n &.segment--small {\r\n height: 30px;\r\n }\r\n}\r\n\r\n.segment::after {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\r\n border-radius: tokens.$ifxBorderRadius12;\r\n\r\n content: '';\r\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\n@Component ({\r\n tag: 'ifx-segment',\r\n styleUrl: 'segment.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Segment {\r\n @Event({ composed: false }) segmentSelect: EventEmitter<number>;\r\n\r\n @Prop() icon: string;\r\n @Prop() segmentIndex: number;\r\n @Prop({ mutable: true }) selected: boolean = false;\r\n @Prop() value!: string;\r\n\r\n handleSegmentClick() {\r\n if (this.selected) return;\r\n this.selected = true;\r\n this.segmentSelect.emit(this.segmentIndex);\r\n }\r\n \r\n handleSegmentKeyDown(event: KeyboardEvent) {\r\n if (event.code === 'Enter' \|\| event.code === 'Space') {\r\n if (this.selected) return;\r\n this.selected = true;\r\n this.segmentSelect.emit(this.segmentIndex);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \r\n tabIndex={0}\r\n onClick={() => {this.handleSegmentClick()}}\r\n onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\r\n <ifx-icon icon={this.icon}></ifx-icon> <slot />\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
1	+ {"file":"ifx-segment.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,8vBAA8vB;;MCQpwB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,GAAA;;;;;AAW6B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BrD;IAxBG,kBAAkB,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG9C,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACrC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAClD,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;YACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;;IAIlD,MAAM,GAAA;QACF,QACI,4DAAK,KAAK,EAAE,CAAA,QAAA,EAAW,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE,CAAA,CAAE,EAC7D,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAO,IAAI,CAAC,kBAAkB,EAAE,CAAA,EAAC,EAC1C,SAAS,EAAE,CAAC,CAAC,OAAM,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAC,EAAA,EAChD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,OAAC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/segmented-control/segment/segment.scss?tag=ifx-segment&encapsulation=shadow","src/components/segmented-control/segment/segment.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.segment {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: tokens.$ifxSize100;\n position: relative;\n\n border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadius12;\n padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\n \n height: 34px;\n\n background-color: tokens.$ifxColorBaseWhite;\n\n transition: all 100ms ease;\n transition-property: color, background;\n \n font: tokens.$ifxBodyBodySemibold04;\n\n &:focus-visible {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean500;\n }\n\n &:hover { \n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean600;\n \n cursor: pointer;\n }\n \n &:active {\n background-color: tokens.$ifxColorOcean700;\n }\n \n &.segment--selected {\n color: tokens.$ifxColorBaseWhite;\n \n background-color: tokens.$ifxColorOcean500;\n }\n\n &.segment--small {\n height: 30px;\n }\n}\n\n.segment::after {\n position: absolute;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 100%;\n\n outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadius12;\n\n content: '';\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component ({\n tag: 'ifx-segment',\n styleUrl: 'segment.scss',\n shadow: true\n})\n\nexport class Segment {\n @Event({ composed: false }) segmentSelect: EventEmitter<number>;\n\n @Prop() icon: string;\n @Prop() segmentIndex: number;\n @Prop({ mutable: true }) selected: boolean = false;\n @Prop() value!: string;\n\n handleSegmentClick() {\n if (this.selected) return;\n this.selected = true;\n this.segmentSelect.emit(this.segmentIndex);\n }\n \n handleSegmentKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n if (this.selected) return;\n this.selected = true;\n this.segmentSelect.emit(this.segmentIndex);\n }\n }\n\n render() {\n return (\n <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleSegmentClick()}}\n onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\n <ifx-icon icon={this.icon}></ifx-icon> <slot />\n </div>\n );\n }\n}"],"version":3}

package/dist/components/ifx-segmented-control.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
 const segmentedControlCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.group{display:flex;flex-direction:column;justify-content:space-between}.group__label{font-size:1rem;color:#1D1D1D;line-height:1.5rem;font-weight:400}.group__label:empty{display:none}.group__label .required{color:#575352;margin-left:4px}.group__label .required.error{color:#CD002F}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{margin-top:4px;display:flex;align-items:center;gap:8px;font-weight:400;font-size:0.75rem;line-height:1rem}.group__caption.error{color:#CD002F}";
@@ -73,8 +73,8 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: '706d281e237d35c615ef19fc5843bcc1d0f69cd5', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '1ba15cc20ec7dbe8fd38c7078a6a25f4f6074c7b', class: 'group__label' }, this.label.trim(), this.required && this.label.trim().toLowerCase() !== "" && h("span", { key: '1edd2c6760432e9d1e6cea3494e15f0ce61aa833', class: `required ${this.error ? 'error' : ''}` }, "*")), h("div", { key: 'cbcc9f0ec911a27a0adb273cff1c9732ac24b7c3', class: 'group__controls' }, h("slot", { key: '1d9949d1a9381f688238599f8f084039d22842b3' })), this.caption.trim() &&
-            h("div", { key: '04a9a16afbb6217391a891e4f003f23a454e68b6', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '9bda23de0c260440d1cfc9d3808b451cc6221253', icon: 'c-info-16' }), " ", this.caption.trim())));
+        return (h("div", { key: '74bfd584af640b44d4fdeaa674e0df4003d58383', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '233e32decc7484857fe34397d10191fa60f101ff', class: 'group__label' }, this.label.trim(), this.required && this.label.trim().toLowerCase() !== "" && h("span", { key: '59e000fd4bf388832d2dc31f2487f90a555aedf7', class: `required ${this.error ? 'error' : ''}` }, "*")), h("div", { key: '4368841e6a763be4407ada54434297b699e8d2b8', class: 'group__controls' }, h("slot", { key: 'f4d60a5f83969042e4198aa67687628b25dbf68b' })), this.caption.trim() &&
+            h("div", { key: '4c46eec275fea48fd95df56519739fd2ba97b807', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '656b6becac2b36bb32bf7ba8b4b247fe69e1a212', icon: 'c-info-16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

package/dist/components/ifx-segmented-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-segmented-control.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.group {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n}\r\n\r\n.group__label {\r\n font-size: tokens.$ifxFontSizeM;\r\n color: tokens.$ifxColorBaseBlack;\r\n line-height: tokens.$ifxLineHeightM;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n \r\n &:empty {\r\n display: none;\r\n }\r\n\r\n & .required {\r\n color: tokens.$ifxColorEngineering500;\r\n margin-left: tokens.$ifxSpace50;\r\n\r\n &.error {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n }\r\n}\r\n\r\n.group__controls {\r\n display: flex;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.group__controls ::slotted() {\r\n margin-left: -1px;\r\n margin-top: -1px;\r\n}\r\n\r\n.group__caption {\r\n margin-top: tokens.$ifxSpace50;\r\n display: flex;\r\n align-items: center;\r\n gap: tokens.$ifxSpace100;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n font-size: tokens.$ifxFontSizeXs;\r\n line-height: tokens.$ifxLineHeightXs;\r\n\r\n &.error {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component ({\r\n tag: 'ifx-segmented-control',\r\n styleUrl: 'segmented-control.scss',\r\n shadow: true\r\n})\r\n\r\nexport class SegmentedControl {\r\n @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\r\n\r\n @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\r\n\r\n @Prop() caption: string = '';\r\n @Prop() label: string = '';\r\n @Prop() size: 'regular' \| 'small' = 'regular';\r\n @Prop() required: boolean = false;\r\n @Prop() error: boolean = false;\r\n\r\n\r\n @Listen('segmentSelect')\r\n onSegmentSelect(event: CustomEvent) {\r\n const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\r\n this.selectedValue = selectedValue;\r\n this.ifxChange.emit({ previousValue, selectedValue });\r\n }\r\n\r\n private selectedValue: string = '';\r\n\r\n unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\r\n let previousValue: string;\r\n let selectedValue: string;\r\n\r\n const segments: NodeList = this.getSegments();\r\n segments.forEach((control: HTMLIfxSegmentElement) => {\r\n if (control.selected) {\r\n if (control.segmentIndex !== newSelectedIndex) {\r\n control.selected = false;\r\n previousValue = control.value;\r\n } else {\r\n selectedValue = control.value;\r\n }\r\n }\r\n })\r\n\r\n return { previousValue, selectedValue };\r\n }\r\n\r\n getSegments(): NodeList {\r\n return this.SegmentedControl.querySelectorAll('ifx-segment');\r\n }\r\n\r\n setActiveSegment(): void {\r\n const segments: NodeList = this.getSegments();\r\n let activeSegmentedControlFound = false;\r\n segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\r\n control.segmentIndex = idx;\r\n if (activeSegmentedControlFound) {\r\n if (control.selected) control.selected = false;\r\n } else {\r\n if (control.selected) {\r\n activeSegmentedControlFound = true;\r\n this.selectedValue = control.value;\r\n }\r\n }\r\n });\r\n }\r\n\r\n setSegmentSize(): void {\r\n const segments: NodeList = this.getSegments();\r\n segments.forEach((control: HTMLIfxSegmentElement) => {\r\n control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\r\n });\r\n }\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.SegmentedControl)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-segmented-control', await framework)\r\n }\r\n this.setActiveSegment();\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\r\n <div class='group__label'>\r\n { this.label.trim() }\r\n { this.required && this.label.trim().toLowerCase() !== \"\" && <span class={`required ${this.error ? 'error' : ''}`}></span> }\r\n </div>\r\n \r\n <div class='group__controls'>\r\n <slot />\r\n </div>\r\n \r\n {\r\n this.caption.trim() &&\r\n <div class={`group__caption ${this.error ? 'error' : ''}`}>\r\n <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\r\n </div>\r\n }\r\n </div>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n this.setSegmentSize();\r\n }\r\n}"],"version":3}
1	+ {"file":"ifx-segmented-control.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.group__label {\n font-size: tokens.$ifxFontSizeM;\n color: tokens.$ifxColorBaseBlack;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n \n &:empty {\n display: none;\n }\n\n & .required {\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace50;\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n}\n\n.group__controls {\n display: flex;\n flex-wrap: wrap;\n}\n\n.group__controls ::slotted() {\n margin-left: -1px;\n margin-top: -1px;\n}\n\n.group__caption {\n margin-top: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component ({\n tag: 'ifx-segmented-control',\n styleUrl: 'segmented-control.scss',\n shadow: true\n})\n\nexport class SegmentedControl {\n @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n @Prop() caption: string = '';\n @Prop() label: string = '';\n @Prop() size: 'regular' \| 'small' = 'regular';\n @Prop() required: boolean = false;\n @Prop() error: boolean = false;\n\n\n @Listen('segmentSelect')\n onSegmentSelect(event: CustomEvent) {\n const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n this.selectedValue = selectedValue;\n this.ifxChange.emit({ previousValue, selectedValue });\n }\n\n private selectedValue: string = '';\n\n unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n let previousValue: string;\n let selectedValue: string;\n\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n if (control.selected) {\n if (control.segmentIndex !== newSelectedIndex) {\n control.selected = false;\n previousValue = control.value;\n } else {\n selectedValue = control.value;\n }\n }\n })\n\n return { previousValue, selectedValue };\n }\n\n getSegments(): NodeList {\n return this.SegmentedControl.querySelectorAll('ifx-segment');\n }\n\n setActiveSegment(): void {\n const segments: NodeList = this.getSegments();\n let activeSegmentedControlFound = false;\n segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n control.segmentIndex = idx;\n if (activeSegmentedControlFound) {\n if (control.selected) control.selected = false;\n } else {\n if (control.selected) {\n activeSegmentedControlFound = true;\n this.selectedValue = control.value;\n }\n }\n });\n }\n\n setSegmentSize(): void {\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n });\n }\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.SegmentedControl)) { \n const framework = detectFramework();\n trackComponent('ifx-segmented-control', await framework)\n }\n this.setActiveSegment();\n }\n\n render() {\n return (\n <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\n <div class='group__label'>\n { this.label.trim() }\n { this.required && this.label.trim().toLowerCase() !== \"\" && <span class={`required ${this.error ? 'error' : ''}`}></span> }\n </div>\n \n <div class='group__controls'>\n <slot />\n </div>\n \n {\n this.caption.trim() &&\n <div class={`group__caption ${this.error ? 'error' : ''}`}>\n <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n </div>\n }\n </div>\n );\n }\n\n componentDidRender() {\n this.setSegmentSize();\n }\n}"],"version":3}

package/dist/components/ifx-select.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { C as Choices, d as defineCustomElement$1 } from './p-C0oKAW62.js';
+import { C as Choices, d as defineCustomElement$1 } from './p-DHLzWSzN.js';
 const IfxSelect = Choices;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-set-filter.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$8 } from './p-B61ip_5M.js';
-import { d as defineCustomElement$7 } from './p-BnjY2AJX.js';
-import { d as defineCustomElement$6 } from './p-B5v9D54X.js';
-import { d as defineCustomElement$5 } from './p-ncBPrnzY.js';
-import { d as defineCustomElement$4 } from './p-D3I_SqHt.js';
-import { d as defineCustomElement$3 } from './p-C0oKAW62.js';
-import { d as defineCustomElement$2 } from './p-DzvIkH4S.js';
+import { d as defineCustomElement$8 } from './p-BQj9WQQe.js';
+import { d as defineCustomElement$7 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$6 } from './p-CcGE_f9F.js';
+import { d as defineCustomElement$5 } from './p-Djr4amRx.js';
+import { d as defineCustomElement$4 } from './p-CRSbKJxa.js';
+import { d as defineCustomElement$3 } from './p-DHLzWSzN.js';
+import { d as defineCustomElement$2 } from './p-DFInpODO.js';
 const setFilterCss = "";

package/dist/components/ifx-set-filter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-set-filter.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/table-advanced-version/set-filter/set-filter.scss?tag=ifx-set-filter&encapsulation=shadow","src/components/table-advanced-version/set-filter/setFilter.tsx"],"sourcesContent":["/* set-filter.css */\r\n\r\n","// SetFilter.tsx\r\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-set-filter',\r\n styleUrl: 'set-filter.scss',\r\n shadow: true\r\n})\r\nexport class SetFilter {\r\n @Prop() filterName: string;\r\n @Prop() filterLabel: string;\r\n @Prop() placeholder: string;\r\n @Prop() type: 'text' \| 'single-select' \| 'multi-select' = 'text';\r\n @Prop() options: any[] \| string;\r\n @State() filterValues: string[] = [];\r\n\r\n @Event() ifxFilterSelect: EventEmitter;\r\n\r\n\r\n handleTextInputChange(event: Event) {\r\n const target = event.target as HTMLInputElement;\r\n const value = target.value;\r\n this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\r\n\r\n }\r\n\r\n handleSingleSelectChange(event: CustomEvent) {\r\n const value = event.detail.value;\r\n this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\r\n }\r\n\r\n\r\n handleMultiselectOptionChange(event: CustomEvent) {\r\n this.filterValues = event.detail.map(option => ({\r\n label: option.value,\r\n value: option.value\r\n }));\r\n this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\r\n }\r\n\r\n\r\n render() {\r\n let optionsArray = [];\r\n\r\n // Parse options if it's a string\r\n if (typeof this.options === 'string') {\r\n try {\r\n optionsArray = JSON.parse(this.options);\r\n } catch (e) {\r\n console.error('Failed to parse options:', e);\r\n optionsArray = [];\r\n }\r\n } else if (Array.isArray(this.options)) {\r\n optionsArray = this.options;\r\n }\r\n\r\n switch (this.type) {\r\n case 'text':\r\n return (\r\n <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\r\n onIfxInput={event => this.handleTextInputChange(event)}\r\n >{this.filterLabel}</ifx-text-field>\r\n );\r\n case 'single-select':\r\n return (\r\n <ifx-select\r\n placeholder=\"true\"\r\n search-enabled=\"true\"\r\n search-placeholder-value=\"Search...\"\r\n onIfxSelect={event => this.handleSingleSelectChange(event)}\r\n ifx-placeholder-value={this.placeholder}\r\n ifx-label={this.filterLabel}\r\n ifx-options={this.options}\r\n ></ifx-select>\r\n );\r\n case 'multi-select':\r\n return (\r\n <ifx-multiselect\r\n label={this.filterLabel}\r\n placeholder={this.placeholder}\r\n onIfxSelect={event => this.handleMultiselectOptionChange(event)}\r\n >\r\n {optionsArray.map(option => (\r\n <ifx-multiselect-option value={option.value \|\| option}>\r\n {option.label \|\| option}\r\n </ifx-multiselect-option>\r\n ))}\r\n </ifx-multiselect>\r\n );\r\n default:\r\n return null;\r\n }\r\n }\r\n}\r\n\r\n"],"version":3}
1	+ {"file":"ifx-set-filter.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/table-advanced-version/set-filter/set-filter.scss?tag=ifx-set-filter&encapsulation=shadow","src/components/table-advanced-version/set-filter/setFilter.tsx"],"sourcesContent":["/* set-filter.css */\n\n","// SetFilter.tsx\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'ifx-set-filter',\n styleUrl: 'set-filter.scss',\n shadow: true\n})\nexport class SetFilter {\n @Prop() filterName: string;\n @Prop() filterLabel: string;\n @Prop() placeholder: string;\n @Prop() type: 'text' \| 'single-select' \| 'multi-select' = 'text';\n @Prop() options: any[] \| string;\n @State() filterValues: string[] = [];\n\n @Event() ifxFilterSelect: EventEmitter;\n\n\n handleTextInputChange(event: Event) {\n const target = event.target as HTMLInputElement;\n const value = target.value;\n this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n\n }\n\n handleSingleSelectChange(event: CustomEvent) {\n const value = event.detail.value;\n this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n }\n\n\n handleMultiselectOptionChange(event: CustomEvent) {\n this.filterValues = event.detail.map(option => ({\n label: option.value,\n value: option.value\n }));\n this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\n }\n\n\n render() {\n let optionsArray = [];\n\n // Parse options if it's a string\n if (typeof this.options === 'string') {\n try {\n optionsArray = JSON.parse(this.options);\n } catch (e) {\n console.error('Failed to parse options:', e);\n optionsArray = [];\n }\n } else if (Array.isArray(this.options)) {\n optionsArray = this.options;\n }\n\n switch (this.type) {\n case 'text':\n return (\n <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\n onIfxInput={event => this.handleTextInputChange(event)}\n >{this.filterLabel}</ifx-text-field>\n );\n case 'single-select':\n return (\n <ifx-select\n placeholder=\"true\"\n search-enabled=\"true\"\n search-placeholder-value=\"Search...\"\n onIfxSelect={event => this.handleSingleSelectChange(event)}\n ifx-placeholder-value={this.placeholder}\n ifx-label={this.filterLabel}\n ifx-options={this.options}\n ></ifx-select>\n );\n case 'multi-select':\n return (\n <ifx-multiselect\n label={this.filterLabel}\n placeholder={this.placeholder}\n onIfxSelect={event => this.handleMultiselectOptionChange(event)}\n >\n {optionsArray.map(option => (\n <ifx-multiselect-option value={option.value \|\| option}>\n {option.label \|\| option}\n </ifx-multiselect-option>\n ))}\n </ifx-multiselect>\n );\n default:\n return null;\n }\n }\n}\n\n"],"version":3}

package/dist/components/ifx-sidebar-item.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$3 } from './p-BnjY2AJX.js';
-import { d as defineCustomElement$2 } from './p-rP_UHrBl.js';
+import { d as defineCustomElement$3 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$2 } from './p-BxahGQyq.js';
 const sidebarItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{position:relative;display:block}:host([data-has-icon=false]){display:var(--ifx-sidebar-item-without-icon-display, block)}.sidebar__nav-item:focus-visible,.sidebar__nav-item.header__section:focus-visible{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.sidebar__nav-item:focus-visible .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus-visible .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus-visible .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus-visible .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus-visible .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus-visible .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item{display:flex;flex-direction:var(--ifx-sidebar-item-flex-direction, row);align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1D1D1D;cursor:pointer;font-family:var(--ifx-font-family)}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0A8276}.sidebar__nav-item.active-section::before{content:\"\";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.sidebar__nav-item.header__section.active-section::before{content:\"\";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.header__section.open{padding:16px 0px 8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1D1D1D;font-family:Source Sans 3;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;flex:none;order:1;flex-grow:1;cursor:pointer;display:var(--ifx-sidebar-item-text-display, flex)}.sidebar__nav-item .sidebar__nav-item-indicator{display:var(--ifx-sidebar-item-text-display, flex);flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0;position:relative}:host([data-sidebar-collapsed]) .sidebar__nav-item .sidebar__nav-item-indicator{position:absolute;top:0;right:0;z-index:10;padding:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}";
@@ -295,13 +295,13 @@ const SidebarItem = /*@__PURE__*/ proxyCustomElement(class SidebarItem extends H
     render() {
         const isCollapsed = this.el.hasAttribute('data-sidebar-collapsed');
         const shouldHide = this.el.hasAttribute('data-hide-in-collapsed');
-        return (h("div", { key: 'c0da686ed7bfbcfb1637050b27e5a60129feceac', style: { display: shouldHide ? 'none' : 'block' } }, h("a", { key: '5c495c69f296c436dc7c2806d0f52b6b6e2a4f34', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}`, title: this.titleText }, this.icon &&
-            h("div", { key: '9e1b5f6b65ec6ac4c06f7bf5e89c001d645ebe86', class: `sidebar__nav-item-icon-wrapper ${!this.showIcon && !isCollapsed ? 'noIcon' : ""}` }, h("ifx-icon", { key: 'b2fc6a9960dee7619058286748100a87660d5e38', icon: this.icon })), h("div", { key: '9521ce2438b9c0282d761017cf91203ac89bb731', class: "sidebar__nav-item-label" }, h("slot", { key: '3c1e691de3f6371b653422c723b278230da389a7' })), (this.isExpandable || !isNaN(this.numberIndicator)) &&
-            h("div", { key: '470e3593aadb94681d26fa7f0e2b17c53f5b3836', class: "sidebar__nav-item-indicator", style: {
+        return (h("div", { key: '491cbffba289bab9d633a08724a2bf1575b92d9f', style: { display: shouldHide ? 'none' : 'block' } }, h("a", { key: '50a8e5dd2298c86711260427549b7d86601d5b46', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}`, title: this.titleText }, this.icon &&
+            h("div", { key: 'b27c805c73bd5404b648f493c4ded4d689b9eb3c', class: `sidebar__nav-item-icon-wrapper ${!this.showIcon && !isCollapsed ? 'noIcon' : ""}` }, h("ifx-icon", { key: '2049a5d0f58106ad977b68c848c8c0f21182a86d', icon: this.icon })), h("div", { key: 'c140a72eb126c87989c71066f287cea862060562', class: "sidebar__nav-item-label" }, h("slot", { key: 'ee9708e5f3591b34e7251546cab50224967abffe' })), (this.isExpandable || !isNaN(this.numberIndicator)) &&
+            h("div", { key: 'd5ac6af6cf668e3463626c7b0f8f5694d23d2d1f', class: "sidebar__nav-item-indicator", style: {
                     display: (!isCollapsed || this.icon) ? 'flex' : 'none'
                 } }, this.isExpandable &&
-                h("span", { key: '8427bdc7f7209db63dc1025902354cebae73c606', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: '5fe69e9d047a68ee76137528a5fa6217595ab44b', icon: "chevron-down-16" })), this.numberIndicator > 0 && !this.isExpandable && !this.isNested &&
-                h("span", { key: 'ef42139f67caa2658a8ebc695bbc6349a4fccc69', class: "item__number-indicator" }, h("ifx-indicator", { key: 'd3447bc5aefae79b39293afeecb93fc88f78c777', variant: this.indicatorVariant, number: this.numberIndicator })))), this.isExpandable && h("ul", { key: 'ee2551afec6ac236ca1e377a90e9c0b5bb305f3e', class: 'expandable__submenu' })));
+                h("span", { key: '7ff6bd7e736d73392e8786980b740b0d1f1b1ac2', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: 'dc62663bee631edbb5a1126b5b2cd4bfb6125c98', icon: "chevron-down-16" })), this.numberIndicator > 0 && !this.isExpandable && !this.isNested &&
+                h("span", { key: '2a02e2d009f260b57c7fb75cdce87366e56e5a53', class: "item__number-indicator" }, h("ifx-indicator", { key: '8dcaf820d27afd21722e4f02f81e4d52441d5458', variant: this.indicatorVariant, number: this.numberIndicator })))), this.isExpandable && h("ul", { key: 'c55eb1c02512807fe889dff1e2b9e3455bc5cc23', class: 'expandable__submenu' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-sidebar-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-sidebar-item.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,2mIAA2mI;;MCOrnI,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAChB,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AACxB,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AACjC,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAChB,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AAC1B,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AACvB,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAC7B,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AACxB,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAE/B,QAAA,IAAA,CAAA,MAAM,GAAY,KAAK,CAAC;AACxB,QAAA,IAAA,CAAA,YAAY,GAAY,KAAK,CAAC;AAC7B,QAAA,IAAgB,CAAA,gBAAA,GAAqB,QAAQ;AAE7C,QAAA,IAAmB,CAAA,mBAAA,GAAY,KAAK;AAQrC,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AAsW/B;IAnWC,kBAAkB,CAAC,QAAiB,EAAE,QAAiB,EAAA;;AAErD,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK;YAChC;;AAEF,QAAA,IAAI,CAAC,mBAAmB,GAAG,QAAQ;AACnC,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;YACtD,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE;gBACnC,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC;;AAExD,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,QAAQ,EAAE;gBAClC,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC;;;;IAMzD,2BAA2B,GAAA;QACzB,IAAI,CAAC,sBAAsB,EAAE;;AAI/B,IAAA,kBAAkB,CAAC,KAA2B,EAAA;AAC5C,QAAA,IAAI,KAAK,CAAC,MAAM,EAAE;AAChB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;aAChB;AACL,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;;;IAIxB,mBAAmB,GAAA;;QAEjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;;AAGnC,IAAA,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS,EAAA;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;AAC7B,QAAA,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,OAAO,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;;;IAI3C,iBAAiB,GAAA;AACf,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC;AAClF,QAAA,OAAO,iBAAiB;;AAG1B,IAAA,UAAU,CAAC,EAAE,EAAA;QACX,OAAO,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,MAAA,GAAA,MAAA,GAAA,EAAE,CAAE,aAAa,CAAC,oBAAoB,CAAC;;AAKhD,IAAA,mBAAmB,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,EAAA;QAC9B,MAAM,YAAY,GAAG,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC5D,QAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7B,OAAO,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;;AAE3D,QAAA,OAAO,YAAY;;IAGrB,kBAAkB,GAAA;AAChB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC;AAC1E,QAAA,OAAO,WAAW;;IAIpB,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAC1C,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE;YAC/C,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,QAAQ,EAAE,MAAM,CAAC;YACtD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC;;YAEhD,IAAI,CAAC,mBAAmB,EAAE;;aACrB;;;AAGL,YAAA,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACxC;;AACK,iBAAA;gBACL,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAAC;gBACvD,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;;;AAG7C,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;AASnC,IAAA,oBAAoB,CAAC,YAAY,EAAA;AAC/B,QAAA,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,EAAE;AACtD,QAAA,YAAY,CAAC,OAAO,CAAC,CAAC,EAAe,KAAI;YACvC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;AACvC,YAAA,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC;AAClB,YAAA,qBAAqB,CAAC,WAAW,CAAC,EAAE,CAAC;AACvC,SAAC,CAAC;;IAGJ,sBAAsB,GAAA;AACpB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;QAC3C,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE;AACzD,YAAA,OAAO,IAAI;;;AACN,YAAA,OAAO,KAAK;;IAGrB,uBAAuB,GAAA;AACrB,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE;QACrD,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;;IAIzB,wBAAwB,GAAA;AACtB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;QAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC;QACzD,IAAG,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,UAAU,EAAE,iBAAiB,CAAC,EAAE;AAC9H,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;;aACrB;AACJ,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;;AAI9B,IAAA,QAAQ,CAAC,iBAAiB,EAAA;QACxB,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,YAAY,CAAC,QAAQ,CAAC;AACrE,QAAA,MAAM,QAAQ,GAAG,oBAAoB,KAAK,MAAM;AAChD,QAAA,OAAO,QAAQ;;AAGjB,IAAA,gBAAgB,CAAC,EAAe,EAAA;AAC9B,QAAA,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa;QAEpC,OAAO,aAAa,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE;YAC7E,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB,EAAE;AAC9D,gBAAA,OAAO,aAAa;;AAEtB,YAAA,aAAa,GAAG,aAAa,CAAC,aAAa;;AAG7C,QAAA,OAAO,IAAI;;AAKb,IAAA,iCAAiC,CAAC,QAAQ,EAAA;;AAExC,QAAA,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,QAAQ,KAAI;YACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACpC,IAAI,QAAQ,EAAE;AACZ,gBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC;AACjE,gBAAA,MAAM,qBAAqB,GAAG,IAAI,CAAC,oBAAoB,EAAE;gBACzD,IAAI,CAAC,MAAM,EAAE;oBACX,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,KAAK,EAAE,gBAAgB,CAAC;;qBAC/D;oBACL,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,QAAQ,EAAE,gBAAgB,CAAC;;;;YAK3E,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC/C,YAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC1D,SAAC;;AAGD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE;AAChD,QAAA,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;;IAI7D,OAAO,GAAA;AACL,QAAA,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;AACzC,YAAA,IAAI,CAAC,YAAY,GAAG,SAAS;;;AACxB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;IAGtC,oBAAoB,GAAA;AAClB,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE;QACrD,IAAI,eAAe,EAAE;AACnB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;AACxD,YAAA,OAAO,YAAY;;aACd;AACL,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;AACxD,YAAA,OAAO,YAAY;;;AAKvB,IAAA,MAAM,gBAAgB,GAAA;AACpB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;QAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,KAAK,EAAE,QAAQ,CAAC;;IAIvD,MAAM,UAAU,CAAC,EAAW,EAAA;AACxB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAC1C,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE;QAC/C,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC;QACnD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC;QAC7C,IAAG,EAAE,EAAC;YACJ,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,QAAQ,EAAE,gBAAgB,CAAC;YAChE,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,CAAC;;;AAKhE,IAAA,MAAM,gBAAgB,GAAA;QACpB,OAAO,IAAI,CAAC,YAAY;;IAG1B,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,IAAI,CAAC,gBAAgB,EAAE;;;AAI3B,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,IAAI,CAAC,aAAa,EAAE;;;IAIxB,gBAAgB,GAAA;QACd,IAAI,CAAC,iBAAiB,EAAE;AACxB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE;AAC/C,YAAA,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC;;;QAGzC,IAAI,CAAC,sBAAsB,EAAE;;QAE7B,IAAI,CAAC,qBAAqB,EAAE;;QAE5B,IAAI,CAAC,gBAAgB,EAAE;;IAGjB,gBAAgB,GAAA;;AAEtB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC;QAC5D,IAAI,WAAW,EAAE;AACf,YAAA,MAAM,aAAa,GAAG,WAAW,CAAC,aAAa,EAAE;YACjD,IAAI,CAAC,SAAS,GAAG;iBACd,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;AACtF,iBAAA,GAAG,CAAC,IAAI,IAAI,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,KAAI,EAAE,CAAA,EAAA;iBAC1C,IAAI,CAAC,GAAG;AACR,iBAAA,IAAI,EAAE;;;IAIL,sBAAsB,GAAA;;QAE5B,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,wBAAwB,CAAC;;AAElE,QAAA,IAAI,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;AAC1B,YAAA,IAAI,CAAC,gBAAgB,GAAG,WAAW,GAAG,KAAK,GAAG,QAAQ;;;IAIpD,qBAAqB,GAAA;;AAE3B,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACzC,IAAI,CAAC,sBAAsB,EAAE;AAC/B,SAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;AACxB,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,wBAAwB;AAC3C,SAAA,CAAC;;IAGJ,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,MAAM;QACtC,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,wBAAwB,EAAE;QAC/B,IAAI,CAAC,OAAO,EAAE;;AAGd,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE;AAC/C,QAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;aACnB;AACL,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;;IAI7B,mBAAmB,GAAA;;QAEjB,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;;AAE5C,YAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,MAAM;;YAGtC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;;;IAKjD,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,wBAAwB,CAAC;QAClE,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,wBAAwB,CAAC;QAEjE,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,EAAE,EAAA,EACpD,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAC/C,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACnC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,CAAA,kBAAA,EAAqB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,EAAE,CAAA,CAAE,EACvI,KAAK,EAAE,IAAI,CAAC,SAAS,EAAA,EAEpB,IAAI,CAAC,IAAI;AACR,YAAA,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,+BAAA,EAAkC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,EAAE,CAAE,CAAA,EAAA,EAC5F,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACR,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAEN,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;AAChD,YAAA,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAC,KAAK,EAAE;AAC9C,oBAAA,OAAO,EAAE,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG;iBACjD,EAAA,EACE,IAAI,CAAC,YAAY;AAChB,gBAAA,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC/B,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,EAAA,CAAG,CAC9B,EAGR,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAC/D,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAClC,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,MAAM,EAAE,IAAI,CAAC,eAAe,EACd,CAAA,CACX,CAEL,CAEN,EACH,IAAI,CAAC,YAAY,IAAI,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,CAAM,CAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n position: relative;\r\n display: block;\r\n}\r\n\r\n:host([data-has-icon=\"false\"]) {\r\n display: var(--ifx-sidebar-item-without-icon-display, block);\r\n}\r\n\r\n.sidebar__nav-item,\r\n.sidebar__nav-item.header__section {\r\n &:focus-visible {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n\r\n & .sidebar__nav-item-icon-wrapper {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n & .sidebar__nav-item-label {\r\n outline: none;\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n & .sidebar__nav-item-indicator {\r\n & .item__arrow-wrapper {\r\n & ifx-icon {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n &:hover {\r\n outline: none;\r\n\r\n & .sidebar__nav-item-icon-wrapper {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n & .sidebar__nav-item-label {\r\n outline: none;\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n & .sidebar__nav-item-indicator {\r\n & .item__arrow-wrapper {\r\n & ifx-icon {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sidebar__nav-item {\r\n display: flex;\r\n flex-direction: var(--ifx-sidebar-item-flex-direction, row);\r\n align-items: center;\r\n width: 100%;\r\n padding: 8px 0px;\r\n gap: 4px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n cursor: pointer;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n &.extra-padding__bottom {\r\n padding: 8px 0px 16px 0px;\r\n }\r\n\r\n &.active {\r\n color: tokens.$ifxColorOcean500;\r\n }\r\n\r\n &.active-section {\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n left: -32px;\r\n height: 40px;\r\n width: 2px;\r\n background: tokens.$ifxColorOcean500;\r\n }\r\n }\r\n\r\n\r\n &.open {\r\n padding: 8px 0px;\r\n\r\n & .sidebar__nav-item-label {\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 24px;\r\n }\r\n\r\n & .sidebar__nav-item-indicator {\r\n & .item__arrow-wrapper {\r\n & ifx-icon {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.header__section {\r\n box-sizing: padding-box;\r\n border-top: 1px solid tokens.$ifxColorEngineering200;\r\n padding: 16px 0px;\r\n display: -webkit-flex;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: horizontal;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n\r\n &.no-top-border {\r\n border-top: none;\r\n }\r\n\r\n &.active-section {\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n left: -32px;\r\n height: 40px;\r\n width: 2px;\r\n background: tokens.$ifxColorOcean500;\r\n }\r\n }\r\n\r\n &.open {\r\n\r\n padding: 16px 0px 8px 0px;\r\n\r\n & .sidebar__nav-item-indicator {\r\n & .item__arrow-wrapper {\r\n & ifx-icon {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .sidebar__nav-item-label {\r\n color: tokens.$ifxColorBaseBlack;\r\n font-family: Source Sans 3;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 24px;\r\n }\r\n }\r\n\r\n &.submenu__item {\r\n padding: 4px 0px;\r\n\r\n &.extra-padding__bottom {\r\n padding: 4px 0px 16px 0px;\r\n }\r\n }\r\n\r\n & .sidebar__nav-item-icon-wrapper {\r\n display: flex;\r\n width: tokens.$ifxSize300;\r\n height: tokens.$ifxSize300;\r\n justify-content: center;\r\n align-items: center;\r\n gap: tokens.$ifxSpace100;\r\n flex-shrink: 0;\r\n\r\n &.noIcon {\r\n display: none;\r\n }\r\n\r\n & ifx-icon {\r\n width: tokens.$ifxSize200;\r\n height: tokens.$ifxSize200;\r\n }\r\n }\r\n\r\n & .sidebar__nav-item-label {\r\n font-style: normal;\r\n font-weight: 400;\r\n font-size: tokens.$ifxFontSizeM;\r\n line-height: tokens.$ifxLineHeightM;\r\n display: flex;\r\n align-items: center;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 1;\r\n cursor: pointer;\r\n display: var(--ifx-sidebar-item-text-display, flex);\r\n }\r\n\r\n & .sidebar__nav-item-indicator {\r\n display: var(--ifx-sidebar-item-text-display, flex);\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0px 4px;\r\n flex: none;\r\n order: 2;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n // Collapsed state styling - position indicator over icon\r\n :host([data-sidebar-collapsed]) & {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n z-index: 10;\r\n padding: 0;\r\n }\r\n }\r\n}\r\n\r\n.expandable__submenu {\r\n display: none;\r\n list-style-type: none;\r\n flex-direction: column;\r\n padding: 0;\r\n margin: 0;\r\n padding-left: 40px;\r\n\r\n &.open {\r\n display: flex;\r\n }\r\n}\r\n\r\n.header__section+.expandable__submenu {\r\n padding-left: 0;\r\n}","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-sidebar-item',\r\n styleUrl: 'sidebar-item.scss',\r\n shadow: true\r\n})\r\nexport class SidebarItem {\r\n @Element() el;\r\n @Prop() icon: string = \"\"\r\n @State() showIcon: boolean = true;\r\n @State() showIconWrapper: boolean = false;\r\n @Prop() href: string = \"\";\r\n @State() internalHref: string = \"\";\r\n @Prop() target: string = \"_self\";\r\n @State() isExpandable: boolean = false;\r\n @State() isNested: boolean = true;\r\n @State() isSubMenuItem: boolean = false;\r\n @Prop() numberIndicator: number;\r\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\r\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\r\n @State() indicatorVariant: 'number' \| 'dot' = 'number';\r\n\r\n @State() internalActiveState: boolean = false;\r\n \r\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\r\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\r\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\r\n\r\n @Prop() handleItemClick: (item: HTMLElement) => void;\r\n\r\n private titleText: string = '';\r\n\r\n @Watch('active')\r\n handleActiveChange(newValue: boolean, oldValue: boolean) {\r\n // If the item is an action item, ignore the active prop\r\n if (this.isActionItem) {\r\n this.internalActiveState = false;\r\n return;\r\n }\r\n this.internalActiveState = newValue;\r\n if (newValue !== oldValue) {\r\n let labelElement = this.getNavItem(this.el.shadowRoot)\r\n if (!this.isExpandable && !newValue) {\r\n this.handleClassList(labelElement, 'remove', 'active');\r\n }\r\n if (!this.isExpandable && newValue) {\r\n this.handleClassList(labelElement, 'add', 'active');\r\n }\r\n }\r\n }\r\n\r\n @Watch('numberIndicator') \r\n handleNumberIndicatorChange() {\r\n this.updateIndicatorVariant();\r\n }\r\n\r\n @Listen('consoleError')\r\n handleConsoleError(event: CustomEvent<boolean>) {\r\n if (event.detail) {\r\n this.showIcon = false;\r\n } else {\r\n this.showIcon = true;\r\n }\r\n }\r\n\r\n handleEventEmission() {\r\n // Get the active item section\r\n this.ifxSidebarMenu.emit(this.el)\r\n }\r\n\r\n handleClassList(el, type, className) {\r\n el.classList[type](className)\r\n if (type === 'contains') {\r\n return el.classList.contains(className)\r\n }\r\n }\r\n\r\n getExpandableMenu() {\r\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\r\n return expandableSubmenu\r\n }\r\n\r\n getNavItem(el) {\r\n return el?.querySelector('.sidebar__nav-item')\r\n }\r\n\r\n\r\n\r\n getSidebarMenuItems(el = this.el) {\r\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\r\n if (sidebarItems.length === 0) {\r\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\r\n }\r\n return sidebarItems;\r\n }\r\n\r\n getSidebarMenuItem() {\r\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\r\n return sidebarItem;\r\n }\r\n\r\n\r\n toggleSubmenu() {\r\n if (this.isExpandable) {\r\n const menuItem = this.getSidebarMenuItem();\r\n const expandableMenu = this.getExpandableMenu();\r\n this.handleClassList(expandableMenu, 'toggle', 'open');\r\n this.handleClassList(menuItem, 'toggle', 'open');\r\n // Emit an event with the current component\r\n this.handleEventEmission();\r\n } else {\r\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\r\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\r\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\r\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\r\n return;\r\n } else { //its a navigation item which becomes active after clicking it\r\n this.handleActiveChange(true, this.internalActiveState)\r\n this.ifxSidebarNavigationItem.emit(this.el);\r\n }\r\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\r\n if (this.handleItemClick) {\r\n this.handleItemClick(this.el);\r\n }\r\n }\r\n // // Emit an event with the current component\r\n // this.handleEventEmission();\r\n }\r\n\r\n\r\n\r\n handleExpandableMenu(sidebarItems) {\r\n const sidebarExpandableMenu = this.getExpandableMenu();\r\n sidebarItems.forEach((el: HTMLElement) => {\r\n const li = document.createElement('li')\r\n li.appendChild(el)\r\n sidebarExpandableMenu.appendChild(li)\r\n })\r\n }\r\n\r\n parentElementIsSidebar() {\r\n const parentElement = this.el.parentElement;\r\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\r\n return true;\r\n } else return false;\r\n }\r\n\r\n checkIfMenuItemIsNested() {\r\n const parentIsSidebar = this.parentElementIsSidebar()\r\n if (parentIsSidebar) {\r\n this.isNested = false;\r\n }\r\n }\r\n\r\n checkIfMenuItemIsSubMenu() {\r\n const parentElement = this.el.parentElement;\r\n const navItem = this.getNavItem(parentElement.shadowRoot);\r\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\r\n this.isSubMenuItem = true;\r\n }else {\r\n this.isSubMenuItem = false;\r\n }\r\n }\r\n\r\n isActive(iteratedComponent) {\r\n const activeAttributeValue = iteratedComponent.getAttribute('active');\r\n const isActive = activeAttributeValue === 'true';\r\n return isActive\r\n }\r\n\r\n getParentSection(el: HTMLElement) {\r\n let parentElement = el.parentElement;\r\n\r\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\r\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\r\n return parentElement;\r\n }\r\n parentElement = parentElement.parentElement;\r\n }\r\n\r\n return null;\r\n }\r\n\r\n\r\n\r\n handleBorderIndicatorDisplacement(menuItem) {\r\n // Recursive function to handle each item\r\n const handleItem = (item, menuItem) => {\r\n const isActive = this.isActive(item);\r\n if (isActive) {\r\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\r\n const activeMenuItemSection = this.getActiveItemSection();\r\n if (!isOpen) {\r\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\r\n } else {\r\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\r\n }\r\n }\r\n\r\n // Process each child item\r\n const children = this.getSidebarMenuItems(item);\r\n children.forEach((child) => handleItem(child, menuItem));\r\n }\r\n\r\n // Start with the top-level items\r\n const topLevelItems = this.getSidebarMenuItems();\r\n topLevelItems.forEach((item) => handleItem(item, menuItem));\r\n }\r\n\r\n\r\n setHref() {\r\n if (this.href.toLowerCase().trim() === \"\") {\r\n this.internalHref = undefined;\r\n } else this.internalHref = this.href;\r\n }\r\n\r\n getActiveItemSection() {\r\n const parentIsSidebar = this.parentElementIsSidebar()\r\n if (parentIsSidebar) {\r\n const labelElement = this.getNavItem(this.el.shadowRoot)\r\n return labelElement;\r\n } else {\r\n const labelElement = this.getNavItem(this.el.shadowRoot)\r\n return labelElement;\r\n }\r\n }\r\n\r\n @Method()\r\n async setActiveClasses() {\r\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\r\n this.handleClassList(activeMenuItem, 'add', 'active')\r\n }\r\n\r\n @Method()\r\n async expandMenu(ac: boolean){\r\n const menuItem = this.getSidebarMenuItem();\r\n const expandableMenu = this.getExpandableMenu();\r\n this.handleClassList(expandableMenu, 'add', 'open');\r\n this.handleClassList(menuItem, 'add', 'open');\r\n if(ac){\r\n this.handleClassList(expandableMenu, 'remove', 'active-section')\r\n this.handleClassList(menuItem, 'remove', 'active-section')\r\n }\r\n }\r\n\r\n @Method()\r\n async isItemExpandable(){\r\n return this.isExpandable;\r\n }\r\n\r\n handleActiveState() {\r\n if (this.internalActiveState) {\r\n this.setActiveClasses()\r\n }\r\n }\r\n\r\n handleKeyDown(event: KeyboardEvent) {\r\n if (event.key === 'Enter') {\r\n this.toggleSubmenu()\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.handleActiveState();\r\n if (this.isExpandable) {\r\n const sidebarItems = this.getSidebarMenuItems();\r\n this.handleExpandableMenu(sidebarItems)\r\n }\r\n // Listen for collapsed state changes\r\n this.updateIndicatorVariant();\r\n // Set up MutationObserver to watch for CSS custom property changes\r\n this.observeCollapsedState();\r\n // Extract text content for title attribute\r\n this.extractTitleText();\r\n }\r\n\r\n private extractTitleText() {\r\n // Get the text content from the slot\r\n const slotElement = this.el.shadowRoot.querySelector('slot');\r\n if (slotElement) {\r\n const assignedNodes = slotElement.assignedNodes();\r\n this.titleText = assignedNodes\r\n .filter(node => node.nodeType === Node.TEXT_NODE \|\| node.nodeType === Node.ELEMENT_NODE)\r\n .map(node => node.textContent?.trim() \|\| '')\r\n .join(' ')\r\n .trim();\r\n }\r\n }\r\n\r\n private updateIndicatorVariant() {\r\n // Check the data attribute on this element\r\n const isCollapsed = this.el.hasAttribute('data-sidebar-collapsed');\r\n //this.indicatorVariant = isCollapsed ? 'dot' : 'number';\r\n if (this.numberIndicator > 0) {\r\n this.indicatorVariant = isCollapsed ? 'dot' : 'number';\r\n }\r\n }\r\n\r\n private observeCollapsedState() {\r\n // Create a MutationObserver to watch for data-sidebar-collapsed attribute changes\r\n const observer = new MutationObserver(() => {\r\n this.updateIndicatorVariant();\r\n });\r\n\r\n observer.observe(this.el, {\r\n attributes: true,\r\n attributeFilter: ['data-sidebar-collapsed']\r\n });\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalActiveState = this.active;\r\n this.checkIfMenuItemIsNested();\r\n this.checkIfMenuItemIsSubMenu();\r\n this.setHref()\r\n\r\n // Set attribute to track if item has icon\r\n this.el.setAttribute('data-has-icon', this.icon ? 'true' : 'false');\r\n\r\n const sidebarItems = this.getSidebarMenuItems();\r\n if (sidebarItems.length !== 0) {\r\n this.isExpandable = true;\r\n } else {\r\n this.isExpandable = false;\r\n }\r\n }\r\n\r\n componentWillUpdate() {\r\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\r\n if (this.active && !this.internalActiveState) {\r\n // Set the internal active state to true\r\n this.internalActiveState = this.active;\r\n\r\n // Emit the event to notify the parent Sidebar\r\n this.ifxSidebarNavigationItem.emit(this.el);\r\n }\r\n }\r\n\r\n\r\nrender() {\r\n const isCollapsed = this.el.hasAttribute('data-sidebar-collapsed');\r\n const shouldHide = this.el.hasAttribute('data-hide-in-collapsed');\r\n\r\n return (\r\n <div style={{ display: shouldHide ? 'none' : 'block' }}>\r\n <a\r\n tabIndex={1}\r\n onKeyDown={(event) => this.handleKeyDown(event)}\r\n href={this.internalHref}\r\n onClick={() => this.toggleSubmenu()}\r\n target={this.target}\r\n class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}\r\n title={this.titleText}\r\n >\r\n {this.icon &&\r\n <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon && !isCollapsed ? 'noIcon' : \"\"}`}>\r\n <ifx-icon icon={this.icon}></ifx-icon>\r\n </div>}\r\n <div class=\"sidebar__nav-item-label\">\r\n <slot />\r\n </div>\r\n {\r\n (this.isExpandable \|\| !isNaN(this.numberIndicator)) &&\r\n <div class=\"sidebar__nav-item-indicator\" style={{\r\n display: (!isCollapsed \|\| this.icon) ? 'flex' : 'none'\r\n }}>\r\n {this.isExpandable &&\r\n <span class='item__arrow-wrapper'>\r\n <ifx-icon icon=\"chevron-down-16\" />\r\n </span>\r\n }\r\n\r\n {this.numberIndicator > 0 && !this.isExpandable && !this.isNested &&\r\n <span class=\"item__number-indicator\">\r\n <ifx-indicator\r\n variant={this.indicatorVariant}\r\n number={this.numberIndicator}>\r\n </ifx-indicator>\r\n </span>}\r\n\r\n </div>\r\n }\r\n </a>\r\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\r\n\r\n </div>\r\n );\r\n}\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-sidebar-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n display: block;\n}\n\n:host([data-has-icon=\"false\"]) {\n display: var(--ifx-sidebar-item-without-icon-display, block);\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: var(--ifx-sidebar-item-flex-direction, row);\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n\n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n\n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n display: var(--ifx-sidebar-item-text-display, flex);\n }\n\n & .sidebar__nav-item-indicator {\n display: var(--ifx-sidebar-item-text-display, flex);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n position: relative;\n\n // Collapsed state styling - position indicator over icon\n :host([data-sidebar-collapsed]) & {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n }\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section+.expandable__submenu {\n padding-left: 0;\n}","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() showIcon: boolean = true;\n @State() showIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: number;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n @State() indicatorVariant: 'number' \| 'dot' = 'number';\n\n @State() internalActiveState: boolean = false;\n \n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n private titleText: string = '';\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n @Watch('numberIndicator') \n handleNumberIndicatorChange() {\n this.updateIndicatorVariant();\n }\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.showIcon = false;\n } else {\n this.showIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n\n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n // Listen for collapsed state changes\n this.updateIndicatorVariant();\n // Set up MutationObserver to watch for CSS custom property changes\n this.observeCollapsedState();\n // Extract text content for title attribute\n this.extractTitleText();\n }\n\n private extractTitleText() {\n // Get the text content from the slot\n const slotElement = this.el.shadowRoot.querySelector('slot');\n if (slotElement) {\n const assignedNodes = slotElement.assignedNodes();\n this.titleText = assignedNodes\n .filter(node => node.nodeType === Node.TEXT_NODE \|\| node.nodeType === Node.ELEMENT_NODE)\n .map(node => node.textContent?.trim() \|\| '')\n .join(' ')\n .trim();\n }\n }\n\n private updateIndicatorVariant() {\n // Check the data attribute on this element\n const isCollapsed = this.el.hasAttribute('data-sidebar-collapsed');\n //this.indicatorVariant = isCollapsed ? 'dot' : 'number';\n if (this.numberIndicator > 0) {\n this.indicatorVariant = isCollapsed ? 'dot' : 'number';\n }\n }\n\n private observeCollapsedState() {\n // Create a MutationObserver to watch for data-sidebar-collapsed attribute changes\n const observer = new MutationObserver(() => {\n this.updateIndicatorVariant();\n });\n\n observer.observe(this.el, {\n attributes: true,\n attributeFilter: ['data-sidebar-collapsed']\n });\n }\n\n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n\n // Set attribute to track if item has icon\n this.el.setAttribute('data-has-icon', this.icon ? 'true' : 'false');\n\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\nrender() {\n const isCollapsed = this.el.hasAttribute('data-sidebar-collapsed');\n const shouldHide = this.el.hasAttribute('data-hide-in-collapsed');\n\n return (\n <div style={{ display: shouldHide ? 'none' : 'block' }}>\n <a\n tabIndex={1}\n onKeyDown={(event) => this.handleKeyDown(event)}\n href={this.internalHref}\n onClick={() => this.toggleSubmenu()}\n target={this.target}\n class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}\n title={this.titleText}\n >\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon && !isCollapsed ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable \|\| !isNaN(this.numberIndicator)) &&\n <div class=\"sidebar__nav-item-indicator\" style={{\n display: (!isCollapsed \|\| this.icon) ? 'flex' : 'none'\n }}>\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-16\" />\n </span>\n }\n\n {this.numberIndicator > 0 && !this.isExpandable && !this.isNested &&\n <span class=\"item__number-indicator\">\n <ifx-indicator\n variant={this.indicatorVariant}\n number={this.numberIndicator}>\n </ifx-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n}\n}\n"],"version":3}

package/dist/components/ifx-sidebar-title.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SidebarTitle = /*@__PURE__*/ proxyCustomElement(class SidebarTitle extends
         this.el.setAttribute('data-show-in-collapsed', this.showInCollapsed.toString());
     }
     render() {
-        return (h("div", { key: '3ad734ec12426830092ff07683c9a67e89f7bbe6', class: 'sidebar__title' }, h("div", { key: '7e2c82c559d180d331333f555d93c52145b5b4bd', class: 'sidebar__title-label' }, h("slot", { key: '3d464dba922417b36d51f2dea08938a3eea4a063' }))));
+        return (h("div", { key: 'd3aecfe3f2a5d62f265267cda82bcf7c0dd6aad3', class: 'sidebar__title' }, h("div", { key: 'e8b6d50f2d7cb7e622f6c533a745f64b0a1122d9', class: 'sidebar__title-label' }, h("slot", { key: '8c2ebf5d135bada72543aaae04ec61ca120977cb' }))));
     }
     get el() { return this; }
     static get style() { return sidebarTitleCss; }

package/dist/components/ifx-sidebar-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-sidebar-title.js","mappings":";;AAAA,MAAM,eAAe,GAAG,0lBAA0lB;;MCQrmB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AANzB,IAAA,WAAA,GAAA;;;;AAQY,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAgB3C;IAdG,iBAAiB,GAAA;;AAEb,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,wBAAwB,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC;;IAGnF,MAAM,GAAA;AACF,QAAA,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAG,gBAAgB,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAG,sBAAsB,EAAA,EAC/B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/navigation/sidebar/sidebar-title.scss?tag=ifx-sidebar-title&encapsulation=shadow","src/components/navigation/sidebar/sidebar-title.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n position: relative;\r\n display: var(--ifx-sidebar-title-display, block);\r\n}\r\n\r\n:host([data-show-in-collapsed=\"true\"]) {\r\n display: var(--ifx-sidebar-title-show-in-collapsed-display, block);\r\n}\r\n\r\n.sidebar__title {\r\n width: 100%;\r\n height: fit-content;\r\n border-top: 1px solid tokens.$ifxColorEngineering200;\r\n padding: var(--ifx-sidebar-title-padding, tokens.$ifxSpace150 0);\r\n\r\n &.no-top-border {\r\n border-top: none;\r\n }\r\n}\r\n\r\n.sidebar__title-label {\r\n height: 20px;\r\n font: tokens.$ifxEyebrowEyebrow02;\r\n text-transform: uppercase;\r\n color: tokens.$ifxColorEngineering500;\r\n letter-spacing: 3px;\r\n display: var(--ifx-sidebar-title-label-display, block);\r\n}\r\n","import { Component, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-sidebar-title',\r\n styleUrl: 'sidebar-title.scss',\r\n shadow: true\r\n})\r\n\r\nexport class SidebarTitle {\r\n @Element() el;\r\n @Prop() showInCollapsed: boolean = false;\r\n\r\n componentWillLoad() {\r\n // Set data attribute for CSS targeting\r\n this.el.setAttribute('data-show-in-collapsed', this.showInCollapsed.toString());\r\n }\r\n\r\n render() {\r\n return(\r\n <div class = 'sidebar__title'>\r\n <div class = 'sidebar__title-label'>\r\n <slot />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-sidebar-title.js","mappings":";;AAAA,MAAM,eAAe,GAAG,0lBAA0lB;;MCQrmB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AANzB,IAAA,WAAA,GAAA;;;;AAQY,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAgB3C;IAdG,iBAAiB,GAAA;;AAEb,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,wBAAwB,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC;;IAGnF,MAAM,GAAA;AACF,QAAA,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAG,gBAAgB,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAG,sBAAsB,EAAA,EAC/B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/navigation/sidebar/sidebar-title.scss?tag=ifx-sidebar-title&encapsulation=shadow","src/components/navigation/sidebar/sidebar-title.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n display: var(--ifx-sidebar-title-display, block);\n}\n\n:host([data-show-in-collapsed=\"true\"]) {\n display: var(--ifx-sidebar-title-show-in-collapsed-display, block);\n}\n\n.sidebar__title {\n width: 100%;\n height: fit-content;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: var(--ifx-sidebar-title-padding, tokens.$ifxSpace150 0);\n\n &.no-top-border {\n border-top: none;\n }\n}\n\n.sidebar__title-label {\n height: 20px;\n font: tokens.$ifxEyebrowEyebrow02;\n text-transform: uppercase;\n color: tokens.$ifxColorEngineering500;\n letter-spacing: 3px;\n display: var(--ifx-sidebar-title-label-display, block);\n}\n","import { Component, h, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-title',\n styleUrl: 'sidebar-title.scss',\n shadow: true\n})\n\nexport class SidebarTitle {\n @Element() el;\n @Prop() showInCollapsed: boolean = false;\n\n componentWillLoad() {\n // Set data attribute for CSS targeting\n this.el.setAttribute('data-show-in-collapsed', this.showInCollapsed.toString());\n }\n\n render() {\n return(\n <div class = 'sidebar__title'>\n <div class = 'sidebar__title-label'>\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}