@infineon/infineon-design-system-stencil 30.0.0--canary.1626.ffb29ef0579b15bc19c3bb02e9b882c9b0e882e1.0 → 30.0.0--canary.1626.aeec3483953b238b8058a8bc41c443ffa47eb680.0

package/dist/components/ifx-pagination.js

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

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

@@ -22,7 +22,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         this.internalValue = this.value;
     }
     render() {
-        return (h("div", { key: '0ff795929756b1595746d14884de3a3d867cd1a3', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '07a41eb8ad3b9a7447ff267c844585c386f9a0fd', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: 'e5f1e82c316f7cf7a35ae1f7c85a16c4a7fd7236', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: 'c222329efb633757b013203285668579d0844786', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: 'bd5235aa565957461162fe913960b491c1486768', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '6294c5ae3aff2295b65d2e66631794b1bafe369d', class: "label" }, `${this.internalValue}%`))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

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

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-4c09147f.js';
 import { d as defineCustomElement$3 } from './p-a2411b44.js';
-import { d as defineCustomElement$2 } from './p-8ef3226f.js';
+import { d as defineCustomElement$2 } from './p-f64f5f8d.js';
 
 const searchBarCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, 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 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}";
 const IfxSearchBarStyle0 = searchBarCss;
@@ -43,7 +43,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends H {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: 'a0d45dc79e136db856db02b31a16eb3e93b516ae', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { 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", { tabindex: "-1", 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: '06b4122a9df300f357050cd6b70cace1d2cfc4bd', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { 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", { tabindex: "-1", 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-field.js

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

package/dist/components/ifx-segment.js

@@ -30,7 +30,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends H {
         }
     }
     render() {
-        return (h("div", { key: 'd21c9af8c4d3e120a7ea69cceb89dbd6bbea3a50', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '2a26824f3960ba1e14721edd21900c5a6a7bcec7', icon: this.icon }), " ", h("slot", { key: '173b327a36428d9136aafb4ccf8c66bb03755b3a' })));
+        return (h("div", { key: '0a115fe376c6484b9c301689ffdf81bc9645d5e3', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '565df7e4a349afca13c80ee467f7199c18756e67', icon: this.icon }), " ", h("slot", { key: '3389c7d009e67542d3c4ba4ccbc32774cbd9b997' })));
     }
     static get style() { return IfxSegmentStyle0; }
 }, [1, "ifx-segment", {

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

@@ -71,8 +71,8 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: '42d423ccf53e16757603b95584926e01ef05b9fe', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '261921695c16c88d62564383590d3fa2c249a5f7', class: 'group__label' }, this.label.trim()), h("div", { key: '5acd2baa0945e9bfbb38feb4112d4cc7e1093c1c', class: 'group__controls' }, h("slot", { key: '2bb4ded58d002a67122eafb10c7f1969b8824822' })), this.caption.trim() &&
-            h("div", { key: 'efc69ec956cf953c8fe07a46058b31158e2c2224', class: 'group__caption' }, h("ifx-icon", { key: 'b25e0f621f8eee2874c27eb5219c0367ba0da401', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (h("div", { key: '5ca0ee9243e0823492e12fe8b2630985f694fd69', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: 'b3675371fb2e67ceed8ace372b127b9e9113f939', class: 'group__label' }, this.label.trim()), h("div", { key: '917662be651673665491b329aa0b50b0cb40a2cd', class: 'group__controls' }, h("slot", { key: 'd4ce45676acc1fda36e03129756cf74b3bb1c939' })), this.caption.trim() &&
+            h("div", { key: '0881e270ba2a728c5800658f9f2a1eea0ffc2ae8', class: 'group__caption' }, h("ifx-icon", { key: '3279f97de64a7d2ae369c934c4f3ea9efecdbb5b', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

package/dist/components/ifx-select.js

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

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

@@ -3,8 +3,8 @@ import { d as defineCustomElement$7 } from './p-cc820c25.js';
 import { d as defineCustomElement$6 } from './p-0d986658.js';
 import { d as defineCustomElement$5 } from './p-a2411b44.js';
 import { d as defineCustomElement$4 } from './p-96fbc3db.js';
-import { d as defineCustomElement$3 } from './p-4adbcde3.js';
-import { d as defineCustomElement$2 } from './p-975b1a84.js';
+import { d as defineCustomElement$3 } from './p-b9024e1a.js';
+import { d as defineCustomElement$2 } from './p-d5a199fb.js';
 
 const setFilterCss = "";
 const IfxSetFilterStyle0 = setFilterCss;

package/dist/components/ifx-slider.js

@@ -152,10 +152,10 @@ const IfxSlider$1 = /*@__PURE__*/ proxyCustomElement(class IfxSlider extends H {
         this.updateValuePercent();
     }
     render() {
-        return (h("div", { key: 'c3d57c86d3f73a10d8230c6a0ac2d6518f8798e1', class: "ifx-slider" }, this.leftText && (h("span", { key: '2ce7ac5b13daec0ccf6b9a3f5d9875add891d40b', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '09563c6af0be70c77cf997b1eaaa89a62cd686df', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: '8018325235df36fea9dea725b8ad591ecccb4264', class: "ifx-slider" }, this.leftText && (h("span", { key: '17433ac850f968a6e5d453952bb63a96c7b02d5e', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '6cb7b2572e62d990a6724f2d00610aeee1a4441b', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
             h("input", { type: "range", min: this.min, max: this.max, step: this.step, value: this.internalValue, disabled: this.disabled, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": 'a slider', "aria-value": this.value, "aria-disabled": this.disabled })
             :
-                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: 'bd45db810d36c8819dcdbaf7bc4795648d30077e', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'e6f12c0b49d26756ef83fb5b4ac20f25bf33207d', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '5abd9643a6f772ded758d514a0b0dc8f9e18e3c0', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
+                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: 'e0cde8d64abfd3ed959f8e62383958f574b8be29', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'a30d54d9082b927aa21374a1e78123deb959b117', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '95baf22332438f825302b4d2616d83b5531823a0', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-spinner.js

@@ -14,8 +14,8 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends H {
         this.inverted = false;
     }
     render() {
-        return (h("div", { key: '83d5b9453610b862a68aa9ece33899c4f04d827d', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'bfcdabadb5086143182e10a5cfa6763865288217', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: '19bbd5c630d14d9823a635ac546a2ecd8cc908e4', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'b4228122ce3d92aabea862c9b0757563c90b7b0f', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'ef219b50001f54cb297d31c70a1ec6c37a491023', id: "spinner/conductor" }, h("path", { key: 'acd452dcc07558d4841d0cfcb9c333eb25159398', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
+        return (h("div", { key: 'b04265492791de4279b55be5c26c3f91d0310ce3', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '4be11129b1b1ec16a9ad6aac61959f3fcf884e05', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: '7147294300181e410f1a2da1a04bebaa34ca2338', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '08aaeab1b3b244ea665cfb7ba86c5b2be0a833f4', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '32a839d29fa24742874c01a72e7f447940a6180c', id: "spinner/conductor" }, h("path", { key: '55846dd76b8622f0ac57337caf2ac049d7934144', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"

package/dist/components/ifx-status.js

@@ -14,7 +14,7 @@ const Status = /*@__PURE__*/ proxyCustomElement(class Status extends H {
     }
     render() {
         const containerClass = this.border ? `container border-${this.color}` : 'container no-border';
-        return (h("div", { key: '11cf42c29727b1de165faa101504fc8ed3ffe143', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'dd77aba86956af473fb23f891543cbf0abb3e424', class: `dot ${this.color}` }), h("p", { key: 'ef225e443394cb9b431087f4c2e7312bb6c8c40c', class: "text" }, this.label)));
+        return (h("div", { key: '7d0a904e3325f104c736cc772d876be18d62f5f7', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'd3dad621fea01aca96ac6ae8f50a447058d547b4', class: `dot ${this.color}` }), h("p", { key: '68ce21770f730b740a2398ed69c0b33a3817912a', class: "text" }, this.label)));
     }
     static get style() { return IfxStatusStyle0; }
 }, [1, "ifx-status", {

package/dist/components/ifx-step.js

@@ -51,7 +51,7 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
         }
     }
     render() {
-        return (h("div", { key: '7cdac0ba78ab462dc0f341f9f7fea5714ce81e57', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''} 
+        return (h("div", { key: '416ac5feff4f3ec3e86b9d8ff0affe3b0efc744c', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''} 
                         ${this.error ? 'error' : ''}
                         ${this.stepperState.variant}
                         ${this.complete ? 'complete' : ''}
@@ -59,11 +59,11 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
                         indicator-${this.stepperState.indicatorPosition}
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'a6bee8557dfef1f5e6e170a8b78455316776544a', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '793b87a257fd933c58c41ab5257cb8b30cbba302', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: 'ad96dbb8a4814e7dfbd37f6e519df65366f510cc', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'cd6e338685cf91590799155e6129e7176f02d7bb', icon: 'check16' }), this.active && h("span", { key: 'bf43224af7fc04dbb72e96572fa2564912de12fa', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'ebbd45d8bfad46ee520a5054ed8f387a3c678c05', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: 'fdd0a2b2bc434b428379a2aa81fa2d413a8aae74', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'efb7fa5e287d66dae02b723b70d9db2f6c464bf4', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '4f33356052398a786a8554b704a7d74f226b64d4', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: 'a25b2220945eee1a67808a2da320ba87046d4a49', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'f03a2ff8035b2a82880eaf3d582679cfc930370f', icon: 'check16' }), this.active && h("span", { key: '481b56ce3eb85af45f0b450b74aa9aaa2b582c73', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'e59722bf9e76be99bffcc16128add8f7a86ede79', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '9ad59c9ded639b54c3f8d92ae1e5d29d1b66e7b6', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
         /* Step labels */
         (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
-            h("div", { key: '23a924683757b80f877cd42a1a1cedac11525d12', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: '50cb22884954b7ebe674b7084db69791ef69e70b' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '71d32772d0afe56e0078ad60eea63e7de6c87bf2' }))));
+            h("div", { key: '4383eec5c8d4f48dc63e0cdc7da2f6d0e94b4181', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: '56ae021c14fa55b0f8aeb4274353f314e2b609a5' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '73c45a7010f1d80922fa31f357949c834fd83e7b' }))));
     }
     ;
     static get watchers() { return {

package/dist/components/ifx-stepper.js

@@ -125,10 +125,10 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: 'f2e93e259a501fd05a2a80c7397d06a0b8e1ac68', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
+        return (h("div", { key: '1762c426129e424854ca59f136dae7cc6ea6b12b', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
         /* Progress bar for compact variant. */
         (this.variant === 'compact') &&
-            h("div", { key: 'ce3a39478b07bb66339386a4d5628f9f8863a4be', class: 'stepper-progress' }, h("div", { key: '5a7e0c967387d6b17dfa4dd2e676acc1eed4661a', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '8db37824dcce73499eae526a34f17ff85a943e8d', class: `stepper-wrapper` }, h("slot", { key: 'b8bf71472c5b63c993999dcc41b6694d5f683afd' }))));
+            h("div", { key: '05e68fa2c4b4f7778a249e546e2feda37b82f3e5', class: 'stepper-progress' }, h("div", { key: 'a633d25307f2268ab0d590fd38b6e4c4b0a5c1f2', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: 'e68826d1ca953026b60597c52859fbff3ddcb076', class: `stepper-wrapper` }, h("slot", { key: 'c9bc23918e6f50d40c5c61cdce6a0da195ed4fb9' }))));
     }
     ;
     componentDidRender() {

package/dist/components/ifx-switch.js

@@ -73,7 +73,7 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: '1ed3d8c2f655656146ed24e547175ac81617f9d9', 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: 'a0c5348b7011c57c2f8acc5d4f1aa6f34a014819', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '05788440cc2d89f498b9d1dd61c96cff79d177aa', class: "switch__checkbox-wrapper" }, h("input", { key: 'afc473786a71945c1109551cd47ce76fd3a325d4', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '888e72f8e141ffbc0e314039d7c144daf2c580b3', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '50f218bae8c294eaebe3f9058c2818511cd515a5', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '833c29fc6dbb5f1efc2e073100f267b3fddefcb8', htmlFor: "switch" }, h("slot", { key: '7b43f97578aba84c4a67ced1b11fd1d9940d834e', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '14a4d237bd92cc310e940e38be973fd109835e2f', 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: '48d82805b763e9a4876e69fff126a19668c60568', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '966db68145830c394840d78e5a409bdaa93cff17', class: "switch__checkbox-wrapper" }, h("input", { key: '3e4f7b754878457747a22fc53643b3e3676cfb3d', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'ca007fbcf8f88fee940039770a87345bdde5dda8', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '1bb43eb27456e27f5d735d6bd2d3be7bc58d3196', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '464f09b02a8b05a0bde53ebbc2cb998207995e29', htmlFor: "switch" }, h("slot", { key: '46896c8f8ac5c94b606cabdb26d0fa6903501299', onSlotchange: () => this.toggleLabelGap() })))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/ifx-tab.js

@@ -13,7 +13,7 @@ const IfxTab$1 = /*@__PURE__*/ proxyCustomElement(class IfxTab extends H {
         this.iconPosition = 'left';
     }
     render() {
-        return h("slot", { key: 'b137ce6b9fbc38d6bcd9548552d1ff6407732ba7' });
+        return h("slot", { key: '58ea0a29eec7165f8d5d4627f00f2163916ed69a' });
     }
     get el() { return this; }
     static get style() { return IfxTabStyle0; }

package/dist/components/ifx-table.js

@@ -8,8 +8,8 @@ import { d as defineCustomElement$7 } from './p-77b40c27.js';
 import { d as defineCustomElement$6 } from './p-a2411b44.js';
 import { d as defineCustomElement$5 } from './p-6a771687.js';
 import { d as defineCustomElement$4 } from './p-56db9d3e.js';
-import { d as defineCustomElement$3 } from './p-07b492d8.js';
-import { d as defineCustomElement$2 } from './p-4adbcde3.js';
+import { d as defineCustomElement$3 } from './p-81357e99.js';
+import { d as defineCustomElement$2 } from './p-b9024e1a.js';
 
 const ButtonKeys = ['disabled', 'variant', 'size', 'target', 'color', 'text'];
 
@@ -460,12 +460,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: 'ebaa9ca14103b769af757862b3f7a0cd4dbac383' }, h("div", { key: 'eaa95a8dcdf7430e30dfedabc177875b0a9b8b76', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: 'fff38a9c72d935eee62b88436d3b9d43529ad704', class: "sidebar-btn" }, h("ifx-button", { key: '157455f693445926fcced883bc2c0d605bcbcf03', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '096c56f48164acecdda7df3d0fd647c92d28dcd8', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '9f4201c44ebc7724b3f971c9d3b6f346251f26a0', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'f5592f37e3281991c488e00b9d3e9c24db3e7b2c', class: "sidebar-container" }, h("div", { key: 'adce6212a72831ac1d273441f0cff0fe1f69b278', class: "filters-title-container" }, h("span", { key: 'c8d1369c5d3ab1a06ae9407c1858c41cd6365d86', class: "filters-title" }, "Filters")), h("div", { key: '95743e8079c7646d5300bfc408e111e3c90c258b', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'f15836ee889bae0dce198b8b987746ea0966a231', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: 'cfbc8998c250114f331e8e1f50c47392b75edc60', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'fb076efed178ea8ba6b0eb377cf3e1b74a4f6c0a', name: "topbar-filter" })))), h("div", { key: '46ba85f323951ef92d1d088e2cef47b8077a03bf', class: "table-pagination-wrapper" }, h("div", { key: '7a48c5cdec766782dcfce08e21026ede5819305e', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'cb5495c16dd1e368f9b25604e36e75f19b052f6c' }, h("div", { key: '6344aab178181e2bac00b2e700a423e2dfd73c0d', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '10dcb98a47b393c7deab1454e4738b15a15313d4', class: "sidebar-btn" }, h("ifx-button", { key: '8e46c678a6f99ebe01cc25bc774ad99c6dbea3a3', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'cd11248cfa51b68a4783dd0d66c6a5561f9afc1d', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'ce3d2ddc7d6db1c11695fa8698099c63cdcd6016', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '221c3e8b632166682e3f5c16aa8790869a0cbd50', class: "sidebar-container" }, h("div", { key: '949dbe6a17f2c2f5ba7a411761e7a51903904cb1', class: "filters-title-container" }, h("span", { key: '85c9d1ad837f550867af7a027ca09b44300a08ca', class: "filters-title" }, "Filters")), h("div", { key: 'b57dad26fbdf3372654da8bbf781b3f2bec6f5f9', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'f2cd9bc56be616581dace0c4acc05f54e20f27c4', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '81c36d9e0a3ce3f0b64c837bb557a7a4cb26de0a', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '3b9e65e24baa8d71eb0910146a6567d9f99b80e2', name: "topbar-filter" })))), h("div", { key: '41b62ff1c5fab0b29667ae2e1e6c5c010796f33b', class: "table-pagination-wrapper" }, h("div", { key: 'e617cbe06c4540a845f5356b1c0f9b67422c9f6b', 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: '0d0e8050e0977663b5f474ec7ef33227bd35c6b9', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '08faee94377e39a2abba16d9b9f44f5e7691e2a7', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '97e15862609b536a9f98615882b99ae8129dff49', class: "matching-results-container" }, h("span", { key: '8e126f8e2991009e058dd65f3cacd6fcd5230731', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '03d245af1d6b1f835ec2664c8123dcc1e5e6260c', class: "matching-results-text" }, "matching results"))), h("div", { key: 'ee6b82dfc94e84eb6f62ec173c35e9317e6a2d0e', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'fa82868bcb950bc3934e9002c6b1a35c97323930', id: `ifxTable-${this.uniqueKey}`, class: 'ifx-ag-grid', style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: '4d254dac541112495170a042abb6be9eee35928f', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '9d5ece826c48a7e9dd87aaa70ee380f13b38f61c', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '15515a1dc227bb72fddf6a1b6be42dbb3f727857', class: "matching-results-container" }, h("span", { key: '57fd4353359477232550132e79048b18839aa995', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '65b5c9850eee2814275fa46cbd25065842b61238', class: "matching-results-text" }, "matching results"))), h("div", { key: '5158fb6fa70c8842c482cd841acbba9363594dd3', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'bc4cc2553b57558f2249b32f29a97038e370d0f7', id: `ifxTable-${this.uniqueKey}`, class: 'ifx-ag-grid', style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');

package/dist/components/ifx-tabs.js

@@ -195,9 +195,9 @@ const IfxTabs$1 = /*@__PURE__*/ proxyCustomElement(class IfxTabs extends H {
     }
     render() {
         var _a;
-        return (h("div", { key: 'd28ad9e4b1e8d89344ca813dbe25a7ecc77c6e83', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '4fcd2e26e21a6de4835dadb8522c4858d949aea6', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '31de3a8ee189bb7c23bcc80fad050605595a6a0f', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '867bea4d332940244b6a1a8623f279ed19d7e6eb', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), tabindex: "0", onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), h("div", { key: 'e3e19e8f3d482acee9be0f47c3fc0e322df79705', class: "active-border" })), h("div", { key: '97896ce0bb1fa65e854a03f1cfa392801b24edc6', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+                tab.header))), h("div", { key: 'c1e8cd4aa0285bcc4a51d5623722025f8f580519', class: "active-border" })), h("div", { key: '217fe852c9f7e36d5f62b9acec0ce468c7417f46', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-tag.js

@@ -12,7 +12,7 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends H {
         this.icon = undefined;
     }
     render() {
-        return (h("div", { key: '103aaf52f43ba9b22e337a9984dd353cfe0fe155', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: '2f87ba630039cdf93aac9f6ff67660168fd43d60', icon: this.icon })), h("a", { key: '0d77514108965a1fcdd54e41e4ca932eb64d6161', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: 'e15558bac0bcb4273cb4e73ee527f9368f4ce27c', class: "label" }, h("slot", { key: 'eff616388b80ffc1cd677761b5584554ddc64a4d' })))));
+        return (h("div", { key: 'fc093100e9f721a29aaa84bf74176c451c1edcc5', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: '2ec09bacc6d29d140c6f4d25ad5746831f81519a', icon: this.icon })), h("a", { key: 'f411ae8ba59c7197fb0b980cb52767913909146f', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '1f52e3aae5deca0445fdfcca82651777cc895dba', class: "label" }, h("slot", { key: '810b1c466622acefb56b4a9f4c129414ff71b8c3' })))));
     }
     static get style() { return IfxTagStyle0; }
 }, [1, "ifx-tag", {

package/dist/components/ifx-text-field.js

@@ -1,4 +1,4 @@
-import { T as TextField, d as defineCustomElement$1 } from './p-975b1a84.js';
+import { T as TextField, d as defineCustomElement$1 } from './p-d5a199fb.js';
 
 const IfxTextField = TextField;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-textarea.js

@@ -47,9 +47,9 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'fa5c845d5352544c1b4c62a09407aebb95da24d3', class: `wrapper 
+        return (h(Host, { key: 'ec61a94701ba15cea4338a1039c63ebb080a31de', class: `wrapper 
 						wrapper--${this.error ? 'error' : ''}
-						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'e68472869f26f77d87cf8cefd29d8e56aac74c95', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'e4d5c36b7608d981bf33dc764453c9cc75883f59', class: 'wrapper__textarea' }, h("textarea", { key: '93988a66ea85198eb40fab3989a82f8a794d815f', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'f58f74a260af7090a6e8059081dfe27fc3fe49c9', class: 'wrapper__caption' }, this.caption.trim()))));
+						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '0ca84ca56869de241eb8993e210feff68d7e5cc4', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '6b27bb557b12d119425b024f964707d683c154bd', class: 'wrapper__textarea' }, h("textarea", { key: 'c3ce055457fddfad964b1c8da4bd574f30e182e2', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '5f774605c74e18f14908e181235be8489fdbe401', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get formAssociated() { return true; }
     static get style() { return IfxTextareaStyle0; }

package/dist/components/ifx-tooltip.js

@@ -156,10 +156,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '7da57630a19be3d8b55667e0764445203cd1f77c', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '3a55da34a85606a8fd32207550366fad3436f120' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '67dec6dcc56c7f3ca8a8a67ff070df931433f71e', class: tooltipDismissible }, h("button", { key: 'db34f7fe5237d960ff0a728f4b82c3df30c6266b', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: 'de96a6255887700e6b89a38b0ff549ea3916e1e7', icon: "cross16" })), h("div", { key: 'e324ffa46233ca6931ebe766c95e391d7c3d9ce2', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'd435679be58ec126b9fa9f785e960d2ef39b259d', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'd3ce120faae0d9b12d28069673d19e403e52763f', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '28bf2c543359173d1ab0be2c9f098ff813b17650', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a355efa505ea997469320a35262780942e495504', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: '55d7bfd3d951839bf89f887419e57b85623a3a0e', class: tooltipCompact }, this.text, h("svg", { key: '36247aaeda7486865b15ca4e4097a36b69d571c1', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac90b5fd1f7188993695a1fc3ac084d8ba8cc8ee', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: 'de8269abcb6ddc0219024b77f26d95cb809c8818', class: tooltipExtended }, h("slot", { key: 'f88f2cdaa9bafa4d95d7a6953fc4a2b4c49cad35', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
-                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '226db4dd5c26b73ee30e20378b5a664bc365581b', class: "tooltip-extended-content" }, this.header && h("div", { key: '47a5ffc018245e0375255ea0eefe77e85e3b630c', class: "tooltip-extended-header" }, this.header), h("div", { key: '7892a686219be701d4a912a77edf77ba9cb5840a', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '143b7a548b751cabb80450637ca8f9da9d54efa7', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '973348331d6ff15eaa25d9d29ab8490b5961d510', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: 'bef3eea14c8dde6e5320575791fb3af389260697', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'b6a0e680a8a6c2d302930b086c4488bf6f7ac169' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '67be6e1c5ec6a7f277b441648986d2ec07a6a651', class: tooltipDismissible }, h("button", { key: '053fbb51ae10f7ef007da38a5fc2c4df2a2d3846', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '8b78386336b48c89c9ca8afe972c215c2c064903', icon: "cross16" })), h("div", { key: '48db9d8098af06bb9e310a4fb23a952442d0ec6f', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'b6687c8155ef62a414090d52478e8da155778358', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '6f927579b33f3fd4ce6f5d4e493b9b037ff04678', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '467f192720b5396add3971ccbee8a1bc5c1cc0e6', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7d62ff6780d4c4daaffdf5dcd53433dc20f1c064', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: 'd3f8293e8ed481dc295d0c9f5dc98c218d999e3b', class: tooltipCompact }, this.text, h("svg", { key: '6276062b4337289d751911b6a71530e564b99bc0', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8fde6da76e2d4ca34743cb1274b4d7954434fd26', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: 'c5318be31b725bb4f5d5bcd35d8503668032dffa', class: tooltipExtended }, h("slot", { key: '7f092e8f400880cc2186320a45f4d58d7b7c96a3', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
+                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '016ca1ce8701db753e8716344ccfb1fed728ed89', class: "tooltip-extended-content" }, this.header && h("div", { key: '30f8a71e360924c8c65bc6197397ae05c4b729c2', class: "tooltip-extended-header" }, this.header), h("div", { key: '4694d5e98f009c678ca1e1b8df7449af4c59b7bf', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'f82ef84945cd3185d034e58e7e9e88e6e468a02d', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ef2e943957ab5d5a5a1ed0e5443bb2b82feb0a1b', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/{p-07b492d8.js → p-81357e99.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-4c09147f.js';
 import { d as defineCustomElement$3 } from './p-a2411b44.js';
 import { d as defineCustomElement$2 } from './p-6a771687.js';
-import { d as defineCustomElement$1 } from './p-4adbcde3.js';
+import { d as defineCustomElement$1 } from './p-b9024e1a.js';
 
 const paginationCss = "@charset \"UTF-8\";:root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}";
 const IfxPaginationStyle0 = paginationCss;
@@ -25,7 +25,12 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
         this.total = 1;
     }
     setItemsPerPage(e) {
-        this.itemsPerPage = parseInt(e.detail.label);
+        if (e.detail) {
+            this.itemsPerPage = parseInt(e.detail.label);
+        }
+        else {
+            this.itemsPerPage = 10;
+        }
     }
     componentDidLoad() {
         this.calculateVisiblePageIndices();
@@ -145,7 +150,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: 'ddbbf014b90a3f159c13e6b58c83d3b5a897ecd5', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'dd8209766c3b6e63c11768e5f463b49242a64111', class: 'items__per-page-wrapper' }, h("div", { key: '3cba5110d93b8d46e6d21477dd40bc2ff6e37a4c', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: 'd14e29b52ea9d95874887a2d05a50a81a591a4e7', class: 'items__per-page-field' }, h("ifx-select", { key: '4e261c9494341a8ae4efc6d25d730c511e396e7b', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: '1b41a777c07df93340e656d6a70f230638d26290', class: 'items__total-wrapper' }, h("div", { key: '809a5349b5eba53a22b4e7e24eacf8ff642b6e3d', class: 'page__numbers-wrapper' }, h("div", { key: '18254ec57fe68998fa59a55d2433f6a66ed40115', class: "pagination" }, h("ifx-icon-button", { key: 'bfcf0866f0049b94390896f9e7cd0aab69651a38', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: 'd6de4a2be43135e85521efb29543ec3de76c23ae' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '721a3c414bb92c1046fdb3b892c546b8f12d2f71', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: 'fa57bfbd14b7ccfb8dbd5ef450c7db53a98bce50', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'f4eff578aa7189bbb52c0ac161faadd6a9ca2774', class: 'items__per-page-wrapper' }, h("div", { key: 'c199973fbd9d3518d21634fda3bc695bda392a24', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '3f8318383647cf41d67b5b1a0fd9c387dffe0e50', class: 'items__per-page-field' }, h("ifx-select", { key: '1cc33baebbb0d8930c8314ee5f39dbc393984d53', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: '992b8b3219a3017fafc44d7d66be2d5997758945', class: 'items__total-wrapper' }, h("div", { key: 'ec4061b565a4dcd5fbe20fa655315328305bee4e', class: 'page__numbers-wrapper' }, h("div", { key: '67dfe394137b0edb704afe8367ed87697bbb52ee', class: "pagination" }, h("ifx-icon-button", { key: 'd6207f9becee00b57bda596fc7117bf4f757c10f', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: 'c5a7300ffb926ab41a77a0e673cde2b85c8e196c' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: 'f2f96994c6cbd1b7c401eb9d81228d4b5dc7cfde', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     get el() { return this; }
     static get style() { return IfxPaginationStyle0; }
@@ -187,4 +192,4 @@ function defineCustomElement() {
 
 export { Pagination as P, defineCustomElement as d };
 
-//# sourceMappingURL=p-07b492d8.js.map
+//# sourceMappingURL=p-81357e99.js.map

package/dist/components/p-81357e99.js.map

@@ -0,0 +1 @@
+{"file":"p-81357e99.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family);\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el;\n  @Event() ifxPageChange: EventEmitter;\n  @Event() ifxNextPage: EventEmitter;\n  @Event() ifxPrevPage: EventEmitter;\n  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() itemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n\n  private CLASS_DISABLED = \"disabled\"\n  private CLASS_ACTIVE = \"active\"\n  private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n  private DATA_KEY = \"pagination\";\n\n  @Listen('ifxSelect')\n  setItemsPerPage(e) {\n    if(e.detail) {\n      this.itemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.itemsPerPage = 10;\n    }\n  }\n\n  componentDidLoad() {\n    this.calculateVisiblePageIndices()\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    let leftArrow = paginationElement.querySelector('.prev')\n    this.navigateSinglePage(leftArrow, true)\n\n  }\n\n  calculateNumberOfPages() {\n    if (isNaN(this.currentPage)) {\n      this.currentPage = 1;\n    }\n    const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n    const itemsPerPage = this.itemsPerPage;\n    const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n    if (this.currentPage <= 0) {\n      this.internalPage = 1;\n    } else if (this.currentPage > totalPageNumber) {\n      this.internalPage = totalPageNumber;\n    } else this.internalPage = this.currentPage;\n\n    this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages()\n  }\n\n  componentDidUpdate() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    var listItems = paginationElement.querySelectorAll(\"li\");\n    this.addEventListenersToPageItems(listItems, paginationElement)\n\n    if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n      paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n    } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n    this.changePage(paginationElement, false)\n  }\n\n  componentWillUpdate() {\n    this.calculateNumberOfPages()\n  }\n\n  handleEventEmission(currActive) {\n    let currentPage = currActive + 1;\n    let totalPages = this.numberOfPages.length;\n    let prevPage = currActive === 0 ? null : currActive;\n    let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n    let itemsPerPage = this.itemsPerPage\n    this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n  }\n\n  addEventListenersToPageItems(listItems, paginationContainer) {\n    listItems.forEach((item) => {\n      item.addEventListener(\"click\", (e) => {\n        var parent = paginationContainer;\n        let listItems = parent.querySelectorAll(\"li\");\n        parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n        this.changePage(parent, false)\n      });\n    });\n  }\n\n  initPagination(paginationContainer) {\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n\n    paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n    paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n    paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n    this.addEventListenersToPageItems(listItems, paginationContainer)\n  }\n\n  navigateSinglePage(e, initialValue) {\n    let el = e;\n    if (typeof e.target === 'object') {\n      el = e.target\n    }\n\n    if (!el.classList.contains(this.CLASS_DISABLED)) {\n      var parent = el.closest(\".pagination\");\n      var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n      currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n      if (currActive === -1) {\n        currActive = 0;\n      }\n\n      parent.dataset[this.DATA_KEY] = currActive;\n      this.changePage(parent, initialValue)\n    }\n  }\n\n  changePage(pagination, initialValue) {\n    const paginationContainer = pagination;\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n    var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n    listItems.forEach((item) => {\n      item.classList.remove(this.CLASS_ACTIVE);\n      item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n    });\n\n    if (initialValue && this.internalPage > 1) {\n      currActive = Math.floor(this.internalPage - 1);\n      paginationContainer.dataset[this.DATA_KEY] = currActive;\n    }\n\n    this.handleEventEmission(currActive)\n\n    listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n    if (currActive === 0) {\n      paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = true;\n\n    } else {\n      listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n      paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = false;\n    }\n\n    if (currActive === (listItems.length - 1)) {\n      paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = true;\n\n    } else {\n      paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = false;\n    }\n  }\n\n  calculateVisiblePageIndices() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    this.initPagination(paginationElement)\n  }\n\n  render() {\n    return (\n      <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n        <div class='items__per-page-wrapper'>\n          <div class='items__per-page-label'>Results per Page</div>\n          <div class='items__per-page-field'>\n            <ifx-select\n              value='undefined'\n              size='s'\n              placeholder='false'\n              show-search='false'\n              search-placeholder-value='Search...'\n              disabled={false}\n              error={false}\n              error-message='Error'\n              label=''\n              placeholder-value='Placeholder'\n              options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n            </ifx-select>\n          </div>\n        </div>\n        <div class='items__total-wrapper'>\n          <div class='page__numbers-wrapper'>\n            <div class=\"pagination\">\n              <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n              <ol>\n                {this.numberOfPages.map((item) =>\n                  <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n              </ol>\n              <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}