npm - @infineon/infineon-design-system-stencil - Versions diffs - 37.14.1--canary.2005.99ac1d98777d6916e7e421ca72db2a9a0f407149.0 → 37.14.1--canary.2009.a1675c98d08311581a1733f9e5d2d89304b688e7.0 - Mend

@infineon/infineon-design-system-stencil 37.14.1--canary.2005.99ac1d98777d6916e7e421ca72db2a9a0f407149.0 → 37.14.1--canary.2009.a1675c98d08311581a1733f9e5d2d89304b688e7.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 (147) hide show

package/dist/collection/test-setup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"test-setup.js","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAAA,IAAI,oBAAoB,CAAC;AACzB,OAAO,CAAC,GAAG,CAAC,QAAQ,GAAG,MAAM,CAAC;AAE9B,IAAI,CAAC;IACH,yCAAyC;IACzC,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAC/C,oBAAoB,GAAG,MAAM,CAAC,oBAAoB,CAAC;IACnD,OAAO,CAAC,GAAG,CAAC,4CAA4C,CAAC,CAAC;AAC5D,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,qDAAqD;IACrD,OAAO,CAAC,IAAI,CAAC,mEAAmE,CAAC,CAAC;IAClF,oBAAoB,GAAG,KAAK,IAAI,EAAE;QAChC,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACtF,CAAC,CAAC;AACJ,CAAC;AAED,6CAA6C;AAC7C,IAAI,CAAC,CAAC,kBAAkB,IAAI,MAAM,CAAC,EAAE,CAAC;IACpC,MAAM,oBAAoB;QAA1B;YACE,4BAA4B;YAC5B,SAAI,GAAG,IAAI,CAAC;YACZ,WAAM,GAAG,EAAE,CAAC;YACZ,sBAAiB,GAAG,EAAE,CAAC;YACvB,aAAQ,GAAG;gBACT,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,KAAK;gBACf,WAAW,EAAE,KAAK;gBAClB,eAAe,EAAE,KAAK;gBACtB,aAAa,EAAE,KAAK;gBACpB,cAAc,EAAE,KAAK;gBACrB,YAAY,EAAE,KAAK;gBACnB,OAAO,EAAE,KAAK;gBACd,QAAQ,EAAE,KAAK;gBACf,YAAY,EAAE,KAAK;gBACnB,YAAY,EAAE,KAAK;aACpB,CAAC;YAEF,4CAA4C;YAC5C,~~2BAA2B~~;~~YAC3B~~,~~0BAA0B~~;~~YAC1B~~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","sourcesContent":["let defineCustomElements;\nprocess.env.NODE_ENV = 'test'; \n\ntry {\n // Attempt to import defineCustomElements\n const loader = await import('../types/loader');\n defineCustomElements = loader.defineCustomElements;\n console.log('defineCustomElements imported successfully');\n} catch (error) {\n // If the import fails, provide a mock implementation\n console.warn('Failed to import defineCustomElements. Using mock implementation.');\n defineCustomElements = async () => {\n console.warn('Mock defineCustomElements called. No components will be registered.');\n };\n}\n\n// Create a more robust ElementInternals mock\nif (!('ElementInternals' in window)) {\n class MockElementInternals {\n // Required basic properties\n form = null;\n labels = [];\n validationMessage = '';\n validity = {\n valid: true,\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valueMissing: false\n };\n \n // Required methods with full implementation\n //setFormValue = jest.fn();\n //setValidity = jest.fn();\n checkValidity = jest.fn().mockReturnValue(true);\n reportValidity = jest.fn().mockReturnValue(true);\n \n // Additional properties to satisfy TypeScript\n shadowRoot = null;\n states = new Set();\n willValidate = true;\n \n // ARIA properties (add as needed)\n ariaAtomic = null;\n ariaAutoComplete = null;\n ariaBusy = null;\n ariaChecked = null;\n ariaColCount = null;\n // ... other aria properties\n }\n \n // Assign the class to window\n (window as any).ElementInternals = MockElementInternals;\n \n // Mock attachInternals - use type assertion to avoid TypeScript errors\n if (!HTMLElement.prototype.attachInternals) {\n HTMLElement.prototype.attachInternals = jest.fn(() => \n new MockElementInternals()\n ) as unknown as () => ElementInternals;\n }\n}\n\n// Fix for multiselect tests - ensure FormData exists\nif (!window.FormData) {\n window.FormData = class FormData {\n private data = new Map();\n append(key, value) { this.data.set(key, value); }\n delete(key) { this.data.delete(key); }\n get(key) { return this.data.get(key); }\n getAll(key) { return [this.data.get(key)]; }\n has(key) { return this.data.has(key); }\n set(key, value) { this.data.set(key, value); }\n entries() { return this.data.entries(); }\n keys() { return this.data.keys(); }\n values() { return this.data.values(); }\n forEach(callback) { this.data.forEach((value, key) => callback(value, key)); }\n } as any;\n}\n\nasync function setup() {\n try {\n console.log('Registering custom elements');\n await defineCustomElements(window); \n console.log('Custom elements registered');\n } catch (error) {\n console.error('Error during component registration:', error);\n }\n}\n\nsetup();\n\n// Fix for Sidebar test - mock expandActiveItems globally\nsetTimeout(() => {\n try {\n // We use setTimeout to ensure this runs after module loading\n const { Sidebar } = require('./components/navigation/sidebar/sidebar');\n console.log('Found Sidebar component, mocking expandActiveItems');\n if (Sidebar && Sidebar.prototype) {\n Sidebar.prototype.expandActiveItems = jest.fn();\n }\n } catch (e) {\n console.warn('Could not mock Sidebar.expandActiveItems:', e);\n }\n}, 0);\n\nexport {};"]}
1	+ {"version":3,"file":"test-setup.js","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"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","sourcesContent":["let defineCustomElements;\nprocess.env.NODE_ENV = 'test'; \n\ntry {\n // Attempt to import defineCustomElements\n const loader = await import('../types/loader');\n defineCustomElements = loader.defineCustomElements;\n console.log('defineCustomElements imported successfully');\n} catch (error) {\n // If the import fails, provide a mock implementation\n console.warn('Failed to import defineCustomElements. Using mock implementation.');\n defineCustomElements = async () => {\n console.warn('Mock defineCustomElements called. No components will be registered.');\n };\n}\n\n// Create a more robust ElementInternals mock\nif (!('ElementInternals' in window)) {\n class MockElementInternals {\n // Required basic properties\n form = null;\n labels = [];\n validationMessage = '';\n validity = {\n valid: true,\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valueMissing: false\n };\n \n // Required methods with full implementation\n setFormValue = jest.fn();\n setValidity = jest.fn();\n checkValidity = jest.fn().mockReturnValue(true);\n reportValidity = jest.fn().mockReturnValue(true);\n \n // Additional properties to satisfy TypeScript\n shadowRoot = null;\n states = new Set();\n willValidate = true;\n \n // ARIA properties (add as needed)\n ariaAtomic = null;\n ariaAutoComplete = null;\n ariaBusy = null;\n ariaChecked = null;\n ariaColCount = null;\n // ... other aria properties\n }\n \n // Assign the class to window\n (window as any).ElementInternals = MockElementInternals;\n \n // Mock attachInternals - use type assertion to avoid TypeScript errors\n if (!HTMLElement.prototype.attachInternals) {\n HTMLElement.prototype.attachInternals = jest.fn(() => \n new MockElementInternals()\n ) as unknown as () => ElementInternals;\n }\n}\n\n// Fix for multiselect tests - ensure FormData exists\nif (!window.FormData) {\n window.FormData = class FormData {\n private data = new Map();\n append(key, value) { this.data.set(key, value); }\n delete(key) { this.data.delete(key); }\n get(key) { return this.data.get(key); }\n getAll(key) { return [this.data.get(key)]; }\n has(key) { return this.data.has(key); }\n set(key, value) { this.data.set(key, value); }\n entries() { return this.data.entries(); }\n keys() { return this.data.keys(); }\n values() { return this.data.values(); }\n forEach(callback) { this.data.forEach((value, key) => callback(value, key)); }\n } as any;\n}\n\nasync function setup() {\n try {\n console.log('Registering custom elements');\n await defineCustomElements(window); \n console.log('Custom elements registered');\n } catch (error) {\n console.error('Error during component registration:', error);\n }\n}\n\nsetup();\n\n// Fix for Sidebar test - mock expandActiveItems globally\nsetTimeout(() => {\n try {\n // We use setTimeout to ensure this runs after module loading\n const { Sidebar } = require('./components/navigation/sidebar/sidebar');\n console.log('Found Sidebar component, mocking expandActiveItems');\n if (Sidebar && Sidebar.prototype) {\n Sidebar.prototype.expandActiveItems = jest.fn();\n }\n } catch (e) {\n console.warn('Could not mock Sidebar.expandActiveItems:', e);\n }\n}, 0);\n\nexport {};"]}

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

@@ -1,4 +1,4 @@
-import { C as Checkbox, d as defineCustomElement$1 } from './p-BdxNbvkX.js';
+import { C as Checkbox, d as defineCustomElement$1 } from './p-DL0DaOdR.js';
 const IfxCheckbox = Checkbox;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { C as ChipItem, d as defineCustomElement$1 } from './p-dFnoI9Z9.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-Bsg4XNJ8.js';
 const IfxChipItem = ChipItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-date-picker.js CHANGED Viewed

@@ -28,7 +28,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
         const month = selectedDate.getMonth() + 1;
         const year = selectedDate.getFullYear();
         if (!inputValue) {
-            //this.internals.setFormValue(null);
+            this.internals.setFormValue(null);
             if (this.type === 'datetime-local') {
                 const hours = selectedDate.getHours();
                 const minutes = selectedDate.getMinutes();
@@ -41,7 +41,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
         }
         const input = this.el.shadowRoot.querySelector('.date__picker-input');
         input.classList.add('has-value');
-        //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))
+        this.internals.setFormValue(selectedDate.toISOString().substring(0, 10));
         if (this.type === 'datetime-local') {
             const hours = selectedDate.getHours();
             const minutes = selectedDate.getMinutes();
@@ -96,13 +96,13 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
             this.getDate({ target: { value: this.value } });
         }
     }
-    // formResetCallback() {
-    //   this.internals.setFormValue(null);
-    // }
+    formResetCallback() {
+        this.internals.setFormValue(null);
+    }
     render() {
         var _a, _b;
-        return (h("div", { key: '7d17576703fc18fcaf23152d644ade7c13a24896', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'ae9c4c36a6d11bd619b6f45d146b08dd0f8a1d21', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), h("span", { key: 'fe09bfc685a43064a59f964d021a957b57dc9165', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: 'ae2897c521f496ec9f13d68e96f57c5034e1174f', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'fcd00c05631aed14e26f843e38fc09307d312dfe', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '03e650aa82186eb8989f9a5da38d3f8ec72b9052', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '33f085aeb96a81fc16fef8fa9aa0dc0bd3d760fe', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'bc29febf9a6aea7be226b43c0cf46b0e82a35981', class: 'caption__wrapper' }, this.caption.trim()))));
+        return (h("div", { key: '54939ec686f17c6f9d5a77d2c578947707254f1e', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '96190d8cd34abb294455693c106e06e99c44b14d', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), h("span", { key: '43b00aab35d90f6022af42a0fffc9f8ef3750a6b', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '9077684afde83eadd4ba777a62f30d2b5ba35146', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '7e2aa162dad9c942adc3abf52aa684d485bb0015', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'd2f342fc05ecdf7f8c43fec285b2b2b4c3efc99d', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: 'aa7b6906751018c0cad1e43ee0f86aa426dad285', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'bb91a4936b8db806bf3176e95429e7b434c92c1d', class: 'caption__wrapper' }, this.caption.trim()))));
     }
     get el() { return this; }
     static get style() { return datePickerCss; }

package/dist/components/ifx-date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-date-picker.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n\n & .asterisk { \n display: none;\n &.required {\n display: inline;\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 8px 16px;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering200;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } 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-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() value: string;\n @Prop() type: string = 'date'\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n\n \n \n if (!inputValue) {\n //this.internals.setFormValue(null);\n\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year});\n }\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year})\n }\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\n }\n }\n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework)\n }\n this.setFireFoxClasses()\n }\n\n componentWillUpdate() { \n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"version":3}
1	+ {"file":"ifx-date-picker.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n\n & .asterisk { \n display: none;\n &.required {\n display: inline;\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 8px 16px;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering200;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } 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-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() value: string;\n @Prop() type: string = 'date'\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n\n \n \n if (!inputValue) {\n this.internals.setFormValue(null);\n\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year});\n }\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year})\n }\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\n }\n }\n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework)\n }\n this.setFireFoxClasses()\n }\n\n componentWillUpdate() { \n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"version":3}

package/dist/components/ifx-list-entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$4 } from './p-BdxNbvkX.js';
+import { d as defineCustomElement$4 } from './p-DL0DaOdR.js';
 import { d as defineCustomElement$3 } from './p-Bq-GdSe7.js';
-import { d as defineCustomElement$2 } from './p-D0FTDBJi.js';
+import { d as defineCustomElement$2 } from './p-CStEOh5u.js';
 const listEntryCss = ".list-entry{display:flex;align-items:center;margin-top:8px;align-self:stretch}";

package/dist/components/ifx-multiselect-option.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { M as MultiselectOption, d as defineCustomElement$1 } from './p-B1lfea8R.js';
+import { M as MultiselectOption, d as defineCustomElement$1 } from './p-CkOHJ_UX.js';
 const IfxMultiselectOption = MultiselectOption;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { M as Multiselect, d as defineCustomElement$1 } from './p-wf80ST1n.js';
+import { M as Multiselect, d as defineCustomElement$1 } from './p-DyWw4V2x.js';
 const IfxMultiselect = Multiselect;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { R as RadioButton, d as defineCustomElement$1 } from './p-D0FTDBJi.js';
+import { R as RadioButton, d as defineCustomElement$1 } from './p-CStEOh5u.js';
 const IfxRadioButton = RadioButton;
 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-BdxNbvkX.js';
+import { d as defineCustomElement$8 } from './p-DL0DaOdR.js';
 import { d as defineCustomElement$7 } from './p-Bq-GdSe7.js';
-import { d as defineCustomElement$6 } from './p-wf80ST1n.js';
-import { d as defineCustomElement$5 } from './p-B1lfea8R.js';
+import { d as defineCustomElement$6 } from './p-DyWw4V2x.js';
+import { d as defineCustomElement$5 } from './p-CkOHJ_UX.js';
 import { d as defineCustomElement$4 } from './p-Dt9X9aqI.js';
 import { d as defineCustomElement$3 } from './p-DBHwLTn9.js';
-import { d as defineCustomElement$2 } from './p-jpHS2EcW.js';
+import { d as defineCustomElement$2 } from './p-BdjtCY5d.js';
 const setFilterCss = "";

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

@@ -48,6 +48,17 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
         if (this.disabled)
             return;
         this.internalChecked = !this.internalChecked;
+        if (this.internalChecked) {
+            if (this.value !== undefined) {
+                this.internals.setFormValue(this.value);
+            }
+            else {
+                this.internals.setFormValue("on");
+            }
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
         this.ifxChange.emit(this.internalChecked);
     }
     handleKeyDown(event) {
@@ -62,11 +73,11 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
      * Callback for form association.
      * Called whenever the form is reset.
      */
-    // formResetCallback() {
-    //   this.internals.setFormValue(null);
-    // }
+    formResetCallback() {
+        this.internals.setFormValue(null);
+    }
     render() {
-        return (h("div", { key: '305eeaf2fe5904134c21a5abe556303366b65ae6', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'bd115571fc983d6c79f05cc4e04956354f6f18f3', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'cd26894c8d3329d5b3f97460fe25e6dcb9713865', class: "switch__checkbox-wrapper" }, h("input", { key: 'e1785eb1b9d77b4d5043dbf52bd8892b5c8d33a6', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '212d207114a8c783c2019e962585c7aca3f2a6ab', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '5dc8dde1aa40fe6e889a52bc63866b1c3a753e24', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '6e61b7f75aeac9db0d497b2c8843e22ca5a0c590', htmlFor: "switch" }, h("slot", { key: '4692e1b1dab2874fc52c6d2828a1daf4962fa549', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '721e94b2ad3eaefd838df483dcb5d71d88232721', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: '8465d7f9484085b1c803e492d3c77ffb2c662116', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'd09df6b3ef851b26fc8ac6ccb399a980a2582069', class: "switch__checkbox-wrapper" }, h("input", { key: 'af32a99d14cf27fd111e52ab17221a0b6aebe73e', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '1cd8797abf5515841fb27cc521d9468f5939b51c', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: 'cd68516a598fe78f98fef03d43c26956131b4836', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'c085aed72ebd61b00188f2377942c8ef70e033d0', htmlFor: "switch" }, h("slot", { key: '021b99c96d0d0eab72e43cfc0bbfad2d6d89b73b', onSlotchange: () => this.toggleLabelGap() })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"ifx-switch.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,ygDAAygD;;MCY9gD,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,GAAA;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AACxB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAExB,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AA+G1C;AAtGC,IAAA,MAAM,SAAS,GAAA;QACb,OAAO,IAAI,CAAC,eAAe;;IAG7B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;;IAIrC,cAAc,GAAA;AACZ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC;AACrD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC;AAChE,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE;AAC/B,YAAA,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;;aACzB;AACL,YAAA,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC;;;AAIrC,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,YAAY,EAAE,MAAM,SAAS,CAAC;;QAE/C,IAAI,CAAC,cAAc,EAAE;;IAIvB,YAAY,CAAC,QAAiB,EAAE,QAAiB,EAAA;AAC/C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,eAAe,GAAG,QAAQ;;;IAInC,YAAY,GAAA;QACV,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe;~~QAY5C~~,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;;AAG3C,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE;;AAEnB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,IAAI,CAAC,YAAY,EAAE;;;AAIvB;;;AAGG~~;;;;IAKH~~,MAAM,GAAA;AACJ,QAAA,QACE,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,QAAQ,EACC,cAAA,EAAA,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,OAAO,EAAA,YAAA,EACzC,IAAI,CAAC,IAAI,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAA,EAG/C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAA8B,2BAAA,EAAA,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAC/G,QAAQ,EAAC,GAAG,EAAA,EAEZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,IAAI,EAAC,UAAU,EAAC,MAAM,EAAA,IAAA,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,CAAE,EAAI,CAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAA,CAAI,CAChG,CACD,EAGP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,yBAAyB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpE,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,QAAQ,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAI,CAAA,CAC7C,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css /\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n &.gap {\n gap: tokens.$ifxSpace200;\n }\n}\n\n\n.switch__checkbox-container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n // Subtracting padding size from both height and width\n width: (tokens.$ifxSpace500)-8px;\n height: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n border-color: tokens.$ifxColorEngineering300;\n }\n\n\n}\n\n\n.switch__label-wrapper {\n\n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch__checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(16px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } 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-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n // formAssociated: true\n})\nexport class Switch {\n @Prop() checked: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n @Element() el: HTMLIfxSwitchElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n }\n \n\n toggleLabelGap() {\n const slot = this.el.shadowRoot.querySelector('slot');\n const container = this.el.shadowRoot.querySelector('.container');\n if (slot.assignedNodes().length) {\n container.classList.add('gap')\n } else { \n container.classList.remove('gap')\n }\n }\n \n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-switch', await framework)\n }\n this.toggleLabelGap();\n }\n \n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n }\n }\n\n toggleSwitch() {\n if (this.disabled) return;\n this.internalChecked = !this.internalChecked;\n\n if (this.internalChecked) {\n if (this.value !== undefined) {\n //this.internals.setFormValue(this.value);\n } else {\n //this.internals.setFormValue(\"on\")\n }\n } else {\n //this.internals.setFormValue(null)\n }\n\n this.ifxChange.emit(this.internalChecked);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' \|\| event.key === ' ') {\n this.toggleSwitch();\n }\n }\n\n /\n Callback for form association.\n * Called whenever the form is reset.\n /\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div\n class=\"container\"\n role=\"switch\"\n aria-checked={this.internalChecked ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggleSwitch()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n {/ Checkbox /}\n <div \n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n tabindex=\"0\"\n >\n <div class=\"switch__checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n checked={this.internalChecked}\n value={`${this.value}`} />\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n </div >\n\n {/ Label */}\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot onSlotchange={() => this.toggleLabelGap()} />\n </label>\n </div>\n </div>\n )\n\n }\n}\n"],"version":3}
1	+ {"file":"ifx-switch.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css /\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n &.gap {\n gap: tokens.$ifxSpace200;\n }\n}\n\n\n.switch__checkbox-container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n // Subtracting padding size from both height and width\n width: (tokens.$ifxSpace500)-8px;\n height: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n border-color: tokens.$ifxColorEngineering300;\n }\n\n\n}\n\n\n.switch__label-wrapper {\n\n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch__checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(16px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } 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-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n // formAssociated: true\n})\nexport class Switch {\n @Prop() checked: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n @Element() el: HTMLIfxSwitchElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n }\n \n\n toggleLabelGap() {\n const slot = this.el.shadowRoot.querySelector('slot');\n const container = this.el.shadowRoot.querySelector('.container');\n if (slot.assignedNodes().length) {\n container.classList.add('gap')\n } else { \n container.classList.remove('gap')\n }\n }\n \n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-switch', await framework)\n }\n this.toggleLabelGap();\n }\n \n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n }\n }\n\n toggleSwitch() {\n if (this.disabled) return;\n this.internalChecked = !this.internalChecked;\n\n if (this.internalChecked) {\n if (this.value !== undefined) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(\"on\")\n }\n } else {\n this.internals.setFormValue(null)\n }\n\n this.ifxChange.emit(this.internalChecked);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' \|\| event.key === ' ') {\n this.toggleSwitch();\n }\n }\n\n /\n Callback for form association.\n * Called whenever the form is reset.\n /\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n render() {\n return (\n <div\n class=\"container\"\n role=\"switch\"\n aria-checked={this.internalChecked ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggleSwitch()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n {/ Checkbox /}\n <div \n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n tabindex=\"0\"\n >\n <div class=\"switch__checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n checked={this.internalChecked}\n value={`${this.value}`} />\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n </div >\n\n {/ Label */}\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot onSlotchange={() => this.toggleLabelGap()} />\n </label>\n </div>\n </div>\n )\n\n }\n}\n"],"version":3}

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

@@ -4,9 +4,9 @@ import { d as detectFramework, t as trackComponent } from './p-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './p-Bw2fh5LT.js';
 import { c as createGrid } from './p-9UDg_bQZ.js';
 import { d as defineCustomElement$a } from './p-CSFUrFeR.js';
-import { d as defineCustomElement$9 } from './p-BdxNbvkX.js';
+import { d as defineCustomElement$9 } from './p-DL0DaOdR.js';
 import { d as defineCustomElement$8 } from './p-C0tC8p0l.js';
-import { d as defineCustomElement$7 } from './p-dFnoI9Z9.js';
+import { d as defineCustomElement$7 } from './p-Bsg4XNJ8.js';
 import { d as defineCustomElement$6 } from './p-Bq-GdSe7.js';
 import { d as defineCustomElement$5 } from './p-r7hBylnC.js';
 import { d as defineCustomElement$4 } from './p-CLgcoxeD.js';
@@ -132,6 +132,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         this.showSidebarFilters = true;
         this.matchingResultsCount = 0;
         this.variant = 'default';
+        this.serverSidePagination = false;
         this.showLoading = false;
         this.originalRowData = [];
         this.internalItemsPerPage = JSON.stringify([
@@ -316,13 +317,33 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             return true;
         });
     }
-    updateTableView() {
-        const startIndex = (this.currentPage - 1) * this.paginationPageSize;
-        const endIndex = startIndex + this.paginationPageSize;
-        const visibleRowData = this.allRowData.slice(startIndex, endIndex);
-        this.rowData = visibleRowData;
-        this.gridApi.setGridOption('rowData', this.rowData);
-        this.matchingResultsCount = this.allRowData.length;
+    async updateTableView() {
+        if (this.serverSidePagination && this.serverPageChangeHandler) {
+            const { rows, total } = await this.serverPageChangeHandler({
+                page: this.currentPage,
+                pageSize: this.paginationPageSize
+            });
+            this.rowData = rows;
+            this.matchingResultsCount = total;
+            if (this.gridApi) {
+                this.gridApi.setGridOption('rowData', rows);
+            }
+            // 👇 FIX: update pagination total
+            const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
+            if (paginationElement) {
+                paginationElement.setAttribute('total', total.toString());
+            }
+        }
+        else {
+            const startIndex = (this.currentPage - 1) * this.paginationPageSize;
+            const endIndex = startIndex + this.paginationPageSize;
+            const visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            this.rowData = visibleRowData;
+            this.matchingResultsCount = this.allRowData.length;
+            if (this.gridApi) {
+                this.gridApi.setGridOption('rowData', this.rowData);
+            }
+        }
     }
     clearAllFilters() {
         this.currentFilters = {};
@@ -412,6 +433,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
                 });
             }
         }
+        this.updateTableView();
     }
     componentWillUnmount() {
         if (this.pagination) {
@@ -431,14 +453,30 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             topbarFilter.removeEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));
         });
     }
-    handlePageChange(event) {
+    async handlePageChange(event) {
         this.currentPage = event.detail.currentPage;
-        const startIndex = (this.currentPage - 1) * this.paginationPageSize;
-        const endIndex = startIndex + this.paginationPageSize;
-        const visibleRowData = this.allRowData.slice(startIndex, endIndex);
-        // Update the data in the grid
-        if (this.gridApi) {
-            this.gridApi.setGridOption('rowData', visibleRowData);
+        if (this.serverSidePagination && this.serverPageChangeHandler) {
+            const { rows, total } = await this.serverPageChangeHandler({
+                page: this.currentPage,
+                pageSize: this.paginationPageSize
+            });
+            this.rowData = rows;
+            this.matchingResultsCount = total;
+            if (this.gridApi) {
+                this.gridApi.setGridOption('rowData', this.rowData);
+            }
+            const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
+            if (paginationElement) {
+                paginationElement.setAttribute('total', total.toString());
+            }
+        }
+        else {
+            const startIndex = (this.currentPage - 1) * this.paginationPageSize;
+            const endIndex = startIndex + this.paginationPageSize;
+            const visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            if (this.gridApi) {
+                this.gridApi.setGridOption('rowData', visibleRowData);
+            }
         }
     }
     isJSONParseable(str) {
@@ -530,12 +568,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: '57d58d8d22bb387b9c43534dd3a401177d93f398' }, h("div", { key: '078da88d6909477b0e9d6f05e5ef43f7f11dccd6', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '3631ac354f20a7f2d8ca37a778fbbdacdaf3a7dc', class: "sidebar-btn" }, h("ifx-button", { key: 'da620be61a292844364371a9d216823a506250df', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'a691538e44adada86749955c3492a74140023973', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '6f2f19292c24e976d50e2dddbd89e10f37419505', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '202f8bccf72625c7f82d1a4fb2afebad813d3da5', class: "sidebar-container" }, h("div", { key: '6f86580fea19787e0fa79c8b63a1ff20bb4f7c5f', class: "filters-title-container" }, h("span", { key: '5df891cbef09a691e8a39444d480789cb17eb1cb', class: "filters-title" }, "Filters")), h("div", { key: '72cc704fa2c0b029657958d2e523733cb37e6c7d', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '5e81b3b2d8e54add2612b0d4263630740ef43b1f', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '2ed6b7d3d36dcb79368af9a103595350967779ac', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '80411817924fe75c67dce87f01fbfdacd7743f51', name: "topbar-filter" })))), h("div", { key: '0989b64e4cc8d5b2ac03b7dabc5bf57647b040f4', class: "table-pagination-wrapper" }, h("div", { key: '7c1b71032d9220d44f55cd83cc9b45ba0957fcf3', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'fd0e6b6f5f6f47c5fae1aa8ca27a7360c2360e5e' }, h("div", { key: '6d8e5474ffa038d5be3a79aa79dd12a2561228a0', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: 'bfff6a6b57b3033be46fbefcc8ec6283ab8cab17', class: "sidebar-btn" }, h("ifx-button", { key: '6612b1ccf029835417dc462d802e7bbf30dc33c2', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '66e96657cecf3cababb110e5c429fe0db5480c9c', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '69c63f253dea7bbad0572f9f42a487ef42d3abfd', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '46eb45efbf62473a568b35dae19417cb511471a6', class: "sidebar-container" }, h("div", { key: 'dfa0c061b16633923c9e77078320eaa8cda68c18', class: "filters-title-container" }, h("span", { key: '0cf1e1c054ca2265580efbcd8a20d4b71dedb7f8', class: "filters-title" }, "Filters")), h("div", { key: 'e4ff6f659422e6cb6a25c4f4a89de6a5ea7ee4fc', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'd210e04a9a42eac59ec4c591fe8e81dd1b241ed9', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: 'b2e65adbd90e0c6f2b648d01cd853006856aae82', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'e24c8f623b67d67983dfea1a5cb1bc3bfa7ee6a9', name: "topbar-filter" })))), h("div", { key: '212fe485f8d28024ace7ba7531871201734ff77f', class: "table-pagination-wrapper" }, h("div", { key: '29eacc8beb7c4d9392da670b0961497d4923be8f', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: 'f359cc77668bfe2659ab4e957e5f829e37a696e5', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'c4b80ec2a98d8a7fb898964d91c5af0e111b9336', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'aa467b350336adb839975dbdb1e4c74573e420f8', class: "matching-results-container" }, h("span", { key: 'cff3d87ce4d72557d085ee95f4b44392dcc11c74', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '608425fb602084d62dca782bc411b5ea499319a1', class: "matching-results-text" }, "matching results"))), h("div", { key: '715e5b6525452071148539e812c54da89cab4cf8', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '998c1175e1dacfa339c86efbec38976d7c367447', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: '17b770de28b2e46eb7c93fa5546e8521931099ea', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '69c6664f0993ec1680b8c2594cce5b61885da4fe', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '5c1a03dbf94b1ff031ef06649d3e42acb714ac1f', class: "matching-results-container" }, h("span", { key: '9cfd13ebfaa6a8eb4fc933101633df6ba91a5fa9', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: 'c4d436c9a93e49eab0e7a3e536618736bc4e88d6', class: "matching-results-text" }, "matching results"))), h("div", { key: 'f8ea0983a8af677d8d60e24705247cef013b228c', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'e2a329f4ec35d942db691440bcdb06dc5d0d03b1', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');
@@ -573,6 +611,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         "paginationItemsPerPage": [1, "pagination-items-per-page"],
         "filterOrientation": [1, "filter-orientation"],
         "variant": [1],
+        "serverSidePagination": [4, "server-side-pagination"],
+        "serverPageChangeHandler": [16, "server-page-change-handler"],
         "showLoading": [4, "show-loading"],
         "currentPage": [32],
         "rowData": [32],