@infineon/infineon-design-system-stencil 30.16.0--canary.1678.3b3f300a86308b7fca3d588253409a4a1695353c.0 → 31.0.0--canary.1697.75ba6c50a31eb82e52e6adb3444c01768f83dc24.0

package/dist/components/p-ff4327c2.js

@@ -0,0 +1,95 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
+
+const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}";
+const IfxRadioButtonStyle0 = radioButtonCss;
+
+const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.ifxChange = createEvent(this, "ifxChange", 7);
+        this.disabled = false;
+        this.error = false;
+        this.size = "s";
+        this.internalChecked = false;
+        this.hasSlot = true;
+    }
+    /**
+     * @returns whether the radio button is checked.
+     */
+    async isChecked() {
+        return this.internalChecked;
+    }
+    componentWillLoad() {
+        if (this.checked)
+            this.internalChecked = this.checked;
+        const slot = this.el.innerHTML;
+        if (slot) {
+            this.hasSlot = true;
+        }
+        else
+            this.hasSlot = false;
+    }
+    /**
+     * Click the hidden input element to let it handle the state
+     * and emit ifxChange event.
+     */
+    handleRadioButtonClick(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        this.inputElement.click();
+        this.internalChecked = this.inputElement.checked;
+        this.ifxChange.emit(this.internalChecked);
+    }
+    /**
+     * Listen to all change events.
+     * Needed to get informed when another button of the group gets chcked
+     * and this one needs to become unchecked.
+     *
+     * @param event
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.name === this.name) {
+            this.internalChecked = this.inputElement.checked;
+        }
+    }
+    render() {
+        return (h("div", { key: '7b5291f95e3fc00c0ceb9285c57ca440b1a8939f', "aria-label": 'a radio button', "aria-value": this.value, "aria-disabled": this.disabled, class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, h("div", { key: '5efda77550a294da34c4f72c4558e312690f9cd9', class: `radioButton__wrapper 
+          ${this.internalChecked ? 'checked' : ''} 
+          ${this.disabled ? 'disabled' : ''} 
+          ${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), h("input", { key: 'f77c2d84f409e3875798370a06cbc744385e5655', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+    }
+    get el() { return this; }
+    static get style() { return IfxRadioButtonStyle0; }
+}, [4, "ifx-radio-button", {
+        "disabled": [4],
+        "value": [1],
+        "error": [4],
+        "size": [1],
+        "name": [1],
+        "checked": [4],
+        "internalChecked": [32],
+        "hasSlot": [32],
+        "inputElement": [32],
+        "isChecked": [64]
+    }, [[8, "change", "handleChange"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ifx-radio-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ifx-radio-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RadioButton);
+            }
+            break;
+    } });
+}
+
+export { RadioButton as R, defineCustomElement as d };
+
+//# sourceMappingURL=p-ff4327c2.js.map

package/dist/components/p-ff4327c2.js.map

@@ -0,0 +1 @@
+{"file":"p-ff4327c2.js","mappings":";;AAAA,MAAM,cAAc,GAAG,85FAA85F,CAAC;AACt7F,6BAAe,cAAc;;MCQhB,WAAW;IANxB;;;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,UAAK,GAAY,KAAK,CAAC;QACvB,SAAI,GAAc,GAAG,CAAC;QAGrB,oBAAe,GAAY,KAAK,CAAC;QACjC,YAAO,GAAY,IAAI,CAAC;KAsFlC;;;;IA5EC,MAAM,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;;YAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KAC7B;;;;;IAOD,sBAAsB,CAAC,KAAmB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;;;;;;;;IAUD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;SAClD;KACF;IAED,MAAM;QACJ,QACE,0EACa,gBAAgB,gBAAa,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,QAAQ,EAChF,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC/E,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/C,4DACE,KAAK,EAAE;YACL,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAE/B,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE,EACL,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC1F,8DAAQ,CACJ,CACP,EACD,8DACE,IAAI,EAAC,OAAO,EACZ,MAAM,QACN,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAsB,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,GAAU,CAC3C,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n}\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family);\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: false,\n  formAssociated: false\n})\nexport class RadioButton {\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop() size: \"s\" | \"m\" = \"s\";\n  @Prop() name: string;\n  @Prop() checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = true;\n\n  @State() inputElement: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n  /**\n   * @returns whether the radio button is checked.\n   */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n  \n  componentWillLoad() {\n    if (this.checked) this.internalChecked = this.checked;\n    const slot = this.el.innerHTML;\n    if (slot) {\n      this.hasSlot = true;\n    } else this.hasSlot = false;\n  }\n\n\n  /**\n   * Click the hidden input element to let it handle the state\n   * and emit ifxChange event.\n   */\n  handleRadioButtonClick(event: PointerEvent) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  /**\n   * Listen to all change events.\n   * Needed to get informed when another button of the group gets chcked \n   * and this one needs to become unchecked. \n   * \n   * @param event \n   */\n  @Listen('change', { target: 'window' }) \n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if (target.name === this.name) {\n      this.internalChecked = this.inputElement.checked;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={this.handleRadioButtonClick.bind(this)}\n      >\n        <div\n          class={`radioButton__wrapper \n          ${this.internalChecked ? 'checked' : ''} \n          ${this.disabled ? 'disabled' : ''} \n          ${this.error ? 'error' : ''}`}\n          tabIndex={this.disabled ? -1 : 0}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n        <input\n          type=\"radio\" \n          hidden \n          ref={el => this.inputElement = el as HTMLInputElement} \n          name={this.name}  \n          value={this.value}\n          checked={this.internalChecked}        \n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}></input>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ifx-accordion_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement, c as createEvent } from './index-f6e95f3d.js';
+import { r as registerInstance, h, g as getElement, c as createEvent } from './index-12dad3f6.js';
 
 const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";
 const IfxAccordionStyle0 = accordionCss;

package/dist/esm/ifx-alert.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-f6e95f3d.js';
+import { r as registerInstance, c as createEvent, h } from './index-12dad3f6.js';
 
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
 const IfxAlertStyle0 = alertCss;

package/dist/esm/ifx-badge.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-f6e95f3d.js';
+import { r as registerInstance, h } from './index-12dad3f6.js';
 
 const badgeCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:var(--ifx-font-family);font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}";
 const IfxBadgeStyle0 = badgeCss;

package/dist/esm/ifx-basic-table.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-12dad3f6.js';
 import { c as createGrid } from './main.esm-b8709563.js';
 import { c as classNames } from './index-72ac5051.js';
 
@@ -178,7 +178,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (h(Host, { key: 'aad9914fcf873da2a71ed7bbfa7db2be5dec54a5' }, h("div", { key: 'bc436824ba11ec68a0dca3fc0381993dc66ff593', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '9c290e9797c50dae868ab333ad613035715e1518', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'ff940c90b4fd4396cafd1cbfd13476e9225df362' }, h("div", { key: '2da95f49bbcd224297c91168c2c29f6178fa6b2b', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'fb5cf41dd677de23d4fb5a7e897b7e1dcd8444f1', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/ifx-breadcrumb-item-label.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-12dad3f6.js';
 
 const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";
 const IfxBreadcrumbItemLabelStyle0 = breadcrumbItemLabelCss;

package/dist/esm/ifx-breadcrumb-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, h, g as getElement } from './index-12dad3f6.js';
 
 const breadcrumbItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}";
 const IfxBreadcrumbItemStyle0 = breadcrumbItemCss;

package/dist/esm/ifx-breadcrumb.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, h, g as getElement } from './index-12dad3f6.js';
 
 const breadcrumbCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}";
 const IfxBreadcrumbStyle0 = breadcrumbCss;

package/dist/esm/ifx-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-12dad3f6.js';
 import { c as classNames } from './index-72ac5051.js';
 
 const buttonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#0A8276;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}";

package/dist/esm/ifx-card-headline.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, h, g as getElement } from './index-12dad3f6.js';
 
 const cardHeadlineCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__headline-wrapper{padding-bottom:16px}.card__headline-wrapper.withDesc{padding-bottom:8px}.card-headline{margin-top:0;padding-top:0;font-family:var(--ifx-font-family);font-weight:600;font-size:1.5rem;line-height:2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.card-headline.horizontal{font-size:1.25rem;line-height:28px}";
 const IfxCardHeadlineStyle0 = cardHeadlineCss;

package/dist/esm/ifx-card-image.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-f6e95f3d.js';
+import { r as registerInstance, c as createEvent, h } from './index-12dad3f6.js';
 
 const cardImageCss = ".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";
 const IfxCardImageStyle0 = cardImageCss;

package/dist/esm/ifx-card-links.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, h, g as getElement } from './index-12dad3f6.js';
 
 const cardLinksCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.container{display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-decoration:none;color:#1D1D1D;padding:0px 24px 24px 24px;word-wrap:break-word;overflow-wrap:anywhere;}.container:hover{cursor:initial}";
 const IfxCardLinksStyle0 = cardLinksCss;

package/dist/esm/ifx-card-overline.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-f6e95f3d.js';
+import { r as registerInstance, h } from './index-12dad3f6.js';
 
 const cardOverlineCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card-overline{font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}";
 const IfxCardOverlineStyle0 = cardOverlineCss;

package/dist/esm/ifx-card-text.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, h, g as getElement } from './index-12dad3f6.js';
 
 const cardTextCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__text-wrapper{padding-bottom:0px}.card__text-wrapper.hasBtn{padding-bottom:16px}.card-text{line-height:1.5rem;font-size:1rem;font-weight:400;white-space:wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}";
 const IfxCardTextStyle0 = cardTextCss;

package/dist/esm/ifx-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-12dad3f6.js';
 
 const cardCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}";
 const IfxCardStyle0 = cardCss;

package/dist/esm/ifx-checkbox.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-12dad3f6.js';
 
 const checkboxCss = ":host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked{background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked.error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked.disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:\"\";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}";
 const IfxCheckboxStyle0 = checkboxCss;

package/dist/esm/ifx-chip_3.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f6e95f3d.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-12dad3f6.js';
 
 const chipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}";
 const IfxChipStyle0 = chipCss;
@@ -365,7 +365,7 @@ const Pagination = class {
         this.ifxPrevPage = createEvent(this, "ifxPrevPage", 7);
         this.currentPage = 0;
         this.internalPage = 1;
-        this.itemsPerPage = 10;
+        this.internalItemsPerPage = 10;
         this.numberOfPages = [];
         this.total = 1;
         this.CLASS_DISABLED = "disabled";
@@ -375,10 +375,10 @@ const Pagination = class {
     }
     setItemsPerPage(e) {
         if (e.detail) {
-            this.itemsPerPage = parseInt(e.detail.label);
+            this.internalItemsPerPage = parseInt(e.detail.label);
         }
         else {
-            this.itemsPerPage = 10;
+            this.internalItemsPerPage = 10;
         }
     }
     componentDidLoad() {
@@ -391,8 +391,8 @@ const Pagination = class {
         if (isNaN(this.currentPage)) {
             this.currentPage = 1;
         }
-        const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;
-        const itemsPerPage = this.itemsPerPage;
+        const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;
+        const itemsPerPage = this.internalItemsPerPage;
         const totalPageNumber = Math.ceil(total / itemsPerPage);
         if (this.currentPage <= 0) {
             this.internalPage = 1;
@@ -426,7 +426,7 @@ const Pagination = class {
         let totalPages = this.numberOfPages.length;
         let prevPage = currActive === 0 ? null : currActive;
         let nextPage = currActive + 2 > totalPages ? null : currActive + 2;
-        let itemsPerPage = this.itemsPerPage;
+        let itemsPerPage = this.internalItemsPerPage;
         this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage });
     }
     addEventListenersToPageItems(listItems, paginationContainer) {
@@ -499,7 +499,7 @@ const Pagination = class {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: '7b8554afb4ab1240382530828809745aa609f53e', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: '707a3ca32bc632c7320b993eb27d64d229f30a65', class: 'items__per-page-wrapper' }, h("div", { key: 'b0f25e68a5dbccb9cfd4ba1d08ef86ff5c5ecf65', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '69b061c1e12cf143f74c432fd18b4391ed6f6ddb', class: 'items__per-page-field' }, h("ifx-select", { key: 'c46571c99645614953ae178e021cc61b3bcbfa04', 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: 'f8434e2d9d299386cf48d810df03ec4243d890e7', class: 'items__total-wrapper' }, h("div", { key: '51bfcecb4be405342dede6fe85b3c155410389be', class: 'page__numbers-wrapper' }, h("div", { key: '57801f51e2dec7266ac238d373b830d400fd13df', class: "pagination" }, h("ifx-icon-button", { key: '19f7d39d7cf8b42e9a2431bf2f41a309d0bcc4b1', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: 'b75719030d7caaa45134242d6365858cf4f24fab' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: 'd3f16fc3a2f132ec036f8baabd0e07401e281fb6', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: '2617ce20d4618504068a3fedfa20c4755d09ca71', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: '86eca8147de0600734fd6f688b924e287b6ea3b4', class: 'items__per-page-wrapper' }, h("div", { key: '8c20c3aa9fdaf898eb90617bfd5c2b86304244e5', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '5ef760e01d63dd1939e3c6510dff408d2671cef9', class: 'items__per-page-field' }, h("ifx-select", { key: '721bc102569c6a90e52e87100e6e69026a94901c', 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: this.itemsPerPage }))), h("div", { key: 'c464ee94b87ea2ce72c724227d404df0b76c23c6', class: 'items__total-wrapper' }, h("div", { key: '306d457fc78d4588ca16acd6b0ce8c9054f37a7b', class: 'page__numbers-wrapper' }, h("div", { key: '618a7d42aade781f452de965ce97af751c8a7824', class: "pagination" }, h("ifx-icon-button", { key: '13af5f58c77a3cec09f11c20be1a6a57c7c29a75', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '6da6a93063da5d8c3b0c77f72a6943301ecee4dd' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '6a1296a8e112299ec236298a54423d5034364abc', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     get el() { return getElement(this); }
 };