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

package/dist/cjs/ifx-segmented-control.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-segmented-control.entry.cjs.js","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}"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":"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"}
+{"version":3,"file":"ifx-segmented-control.entry.cjs.js","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}"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":"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"}

package/dist/cjs/ifx-select.cjs.entry.js

@@ -7067,9 +7067,9 @@ const Choices = class {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (index.h("div", { key: 'f7a22d8351935d6c1c5ec3b982b8108a3c1922db', class: `ifx-select-container` }, this.label ? (index.h("div", { class: `ifx-label-wrapper ${this.disabled && !this.error ? 'disabled' : ""}` }, index.h("span", null, this.label), this.required && index.h("span", { class: `required ${this.error ? 'error' : ''}` }, "*"))) : null, index.h("div", { key: 'e887521113196418caed070b83fb51d4011428ed', class: `${choicesWrapperClass} 
-            ${this.disabled && !this.error ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled && !this.error ? undefined : e => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, index.h("select", Object.assign({ key: 'b6d9632789477be3de2de6a0dd85dcba7b69be3d', class: "single__select-input-field", disabled: this.disabled && !this.error }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), index.h("div", { key: '245b0f374f6fa9f45c76c0ac38db3ca2cc2c4b5f', class: "single__select-icon-container" }, this.optionIsSelected && (index.h("div", { key: '5ef777317eb672a0e2b1f1ba71b1f1dde5b74480', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, index.h("ifx-icon", { key: '002f589c071749707ef2de20ad0702a3288c9b88', icon: "cRemove16", onClick: () => this.clearSelection() }))), index.h("div", { key: 'cf822d1d8e24f0555cc590bafe20354ef0ca5f11', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), index.h("div", { key: 'e6f205f02ed851147496f26f5f08dd17102a2680', class: "ifx-choices__icon-wrapper-down" }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && index.h("div", { key: '9dd1680c52e34aec1a0c902b65f1131c865994a1', class: `single__select-caption ${this.error ? 'error' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, this.caption)));
+        return (index.h("div", { key: 'b6991547fb607b9ae6acac18344a4884b3f6e96f', class: `ifx-select-container` }, this.label ? (index.h("div", { class: `ifx-label-wrapper ${this.disabled && !this.error ? 'disabled' : ""}` }, index.h("span", null, this.label), this.required && index.h("span", { class: `required ${this.error ? 'error' : ''}` }, "*"))) : null, index.h("div", { key: 'd4631090d5c4a358c74beef998d9b147fa1f82c5', class: `${choicesWrapperClass} 
+            ${this.disabled && !this.error ? 'disabled' : ''} 
+            ${this.error ? 'error' : ''}`, onClick: this.disabled && !this.error ? undefined : e => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, index.h("select", Object.assign({ key: 'a37b0ec62a2f0e0f7f6d648498d839bfe55b6080', class: "single__select-input-field", disabled: this.disabled && !this.error }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), index.h("div", { key: '43cb963ce76209e1cf3243361c8933a50246037b', class: "single__select-icon-container" }, this.optionIsSelected && (index.h("div", { key: 'f11a8226a109c7c9ab55c569e6a1fab7e03b3d0e', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, index.h("ifx-icon", { key: '4a9e713955e8b3a46852af0f587f720c8c942f37', icon: "cRemove16", onClick: () => this.clearSelection() }))), index.h("div", { key: 'd414796caa9b716af1a1d2b9300e31ec123c0f7e', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), index.h("div", { key: 'c08899e0217f465d1e7cb9306101b1b2f80db2ef', class: "ifx-choices__icon-wrapper-down" }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && index.h("div", { key: 'ed418d2787c25790157f7a0651d9acc7693c3423', class: `single__select-caption ${this.error ? 'error' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, this.caption)));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');
@@ -7189,54 +7189,54 @@ const Choices = class {
                             let removeButtonHTML = '';
                             if (data.placeholder && !((_a = self.selectedOption) === null || _a === void 0 ? void 0 : _a.value)) {
                                 // For placeholders, use data-id="placeholder"
-                                return template(`
-                  <div class="choices__placeholder" data-item data-id="${data.id}" data-value="${data.value}" ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
-                    ${data.label === undefined ? this.placeholderValue : data.label}
-                    ${removeButtonHTML}
-                  </div>
+                                return template(`
+                  <div class="choices__placeholder" data-item data-id="${data.id}" data-value="${data.value}" ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
+                    ${data.label === undefined ? this.placeholderValue : data.label}
+                    ${removeButtonHTML}
+                  </div>
                 `);
                             }
                             else {
                                 // For non-placeholder items, use the actual data ID
-                                return template(`
-                <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" 
-                      data-item 
-                      data-id="${((_b = self.selectedOption) === null || _b === void 0 ? void 0 : _b.id) !== undefined ? (_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.id : self.choice.getValue().id}" 
-                      data-value="${((_d = self.selectedOption) === null || _d === void 0 ? void 0 : _d.value) !== undefined ? (_e = self.selectedOption) === null || _e === void 0 ? void 0 : _e.value : self.choice.getValue().value}" 
-                      ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
-                  <span>${((_f = self.selectedOption) === null || _f === void 0 ? void 0 : _f.label) !== undefined ? (_g = self.selectedOption) === null || _g === void 0 ? void 0 : _g.label : self.choice.getValue().label}</span>
-                  <!-- Add your remove button here if needed -->
-                </div>
+                                return template(`
+                <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" 
+                      data-item 
+                      data-id="${((_b = self.selectedOption) === null || _b === void 0 ? void 0 : _b.id) !== undefined ? (_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.id : self.choice.getValue().id}" 
+                      data-value="${((_d = self.selectedOption) === null || _d === void 0 ? void 0 : _d.value) !== undefined ? (_e = self.selectedOption) === null || _e === void 0 ? void 0 : _e.value : self.choice.getValue().value}" 
+                      ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
+                  <span>${((_f = self.selectedOption) === null || _f === void 0 ? void 0 : _f.label) !== undefined ? (_g = self.selectedOption) === null || _g === void 0 ? void 0 : _g.label : self.choice.getValue().label}</span>
+                  <!-- Add your remove button here if needed -->
+                </div>
               `);
                             }
                         },
                         input: ({ classNames }) => {
-                            return template(`
-                  <input 
-                    type="search"
-                    class="${classNames.input} ${classNames.inputCloned} ${self.getSizeClass()}"
-                    autocomplete="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                    role="textbox"
-                    aria-autocomplete="list"
+                            return template(`
+                  <input 
+                    type="search"
+                    class="${classNames.input} ${classNames.inputCloned} ${self.getSizeClass()}"
+                    autocomplete="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                    role="textbox"
+                    aria-autocomplete="list"
                     aria-label="${this.showSearch ? this.searchPlaceholderValue : ''}">`);
                         },
                         //modifying the template of each item in the options list
                         choice: ({ classNames }, data) => {
                             var _a, _b, _c, _d;
-                            return template(`
-              <div class="${classNames.item} ${classNames.itemChoice} ${self.getSizeClass()} 
-              ${data.selected || ((_a = self.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === data.value || ((_b = self.getPreSelected(self)) === null || _b === void 0 ? void 0 : _b.value) === data.value ? 'selected' : ''} 
-              ${data.placeholder ? classNames.placeholder : ''} 
-              ${data.disabled && !this.error ? classNames.itemDisabled : classNames.itemSelectable} 
-                    role="${data.groupId && data.groupId > 0 ? 'treeitem' : 'option'}"
-                    data-choice ${data.disabled && !this.error ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}                     data-id="${data.id}"
-                    data-value="${data.value}"
-                    data-select-text="${this.config.itemSelectText}">
-                <span>${data.label}</span>
-                ${data.selected || ((_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.value) === data.value || ((_d = self.getPreSelected(self)) === null || _d === void 0 ? void 0 : _d.value) === data.value ? '<ifx-icon icon="check16"></ifx-icon>' : ''}
-              </div>
+                            return template(`
+              <div class="${classNames.item} ${classNames.itemChoice} ${self.getSizeClass()} 
+              ${data.selected || ((_a = self.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === data.value || ((_b = self.getPreSelected(self)) === null || _b === void 0 ? void 0 : _b.value) === data.value ? 'selected' : ''} 
+              ${data.placeholder ? classNames.placeholder : ''} 
+              ${data.disabled && !this.error ? classNames.itemDisabled : classNames.itemSelectable} 
+                    role="${data.groupId && data.groupId > 0 ? 'treeitem' : 'option'}"
+                    data-choice ${data.disabled && !this.error ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}                     data-id="${data.id}"
+                    data-value="${data.value}"
+                    data-select-text="${this.config.itemSelectText}">
+                <span>${data.label}</span>
+                ${data.selected || ((_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.value) === data.value || ((_d = self.getPreSelected(self)) === null || _d === void 0 ? void 0 : _d.value) === data.value ? '<ifx-icon icon="check16"></ifx-icon>' : ''}
+              </div>
             `);
                         },
                     };