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

package/dist/esm/ifx-stepper.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-stepper.entry.js","sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.stepper {\r\n    display: flex;\r\n    align-items: center;\r\n    \r\n    &.compact {\r\n        align-items: center;\r\n        gap: 8px;\r\n        \r\n        &.compact-right {\r\n            flex-direction: row-reverse;\r\n            text-align: left;\r\n        }\r\n        \r\n        .stepper-wrapper{\r\n            width: unset;\r\n            flex-direction: column;\r\n        }\r\n    }\r\n\r\n    &.vertical {\r\n        height: 100%;\r\n\r\n        .stepper-wrapper {\r\n            flex-direction: column;\r\n            width: unset;\r\n            height: 100%;\r\n        }\r\n    }\r\n}\r\n\r\n.stepper-wrapper {\r\n    display: flex;\r\n    flex-direction: row;\r\n    width: 100%;\r\n}\r\n\r\n.stepper-wrapper ::slotted(*){\r\n    display: flex;\r\n    flex: 1;\r\n    justify-content: flex-start;\r\n}\r\n\r\n.stepper-progress {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font: tokens.$ifxBodyBodySemibold04;\r\n    min-width: tokens.$ifxSize700;\r\n    height: tokens.$ifxSize700;\r\n    border-radius: tokens.$ifxBorderRadiusRound;\r\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering300 0);\r\n    \r\n    .progress-detail {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        text-align: center;\r\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\r\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\r\n        border-radius: tokens.$ifxBorderRadiusRound;\r\n        background: white;\r\n    }\r\n}\r\n\r\n","import { h, \r\n         Component, \r\n         Element, \r\n         Event, \r\n         EventEmitter, \r\n         Listen, \r\n         Prop, \r\n         State, \r\n         Watch } from \"@stencil/core\";\r\nimport { StepperState } from \"./interfaces\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n    tag: 'ifx-stepper',\r\n    styleUrl: 'stepper.scss',\r\n    shadow: true\r\n})\r\n\r\nexport class Stepper {\r\n    @Element() el: HTMLElement;\r\n\r\n    @Event() ifxChange: EventEmitter;\r\n\r\n    @Prop({ mutable: true }) activeStep: number = 1;\r\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\r\n    @Prop() showStepNumber?: boolean = false;\r\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\r\n    @Prop() ariaLabel: string | null;\r\n    @Prop() ariaCurrent: string | null;\r\n\r\n\r\n\r\n    @State() stepsCount: number;\r\n    @State() shouldEmitEvent: boolean = true;\r\n    @State() emittedByClick: boolean = false;\r\n\r\n    @Listen('ifxChange') \r\n    onStepChange(event: CustomEvent) {\r\n        const steps = this.getSteps();\r\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\r\n        if (previousActiveStep && !previousActiveStep.complete) {\r\n            previousActiveStep.setAttribute('error', 'true');\r\n        }\r\n    } \r\n\r\n    @Watch('activeStep')\r\n    handleActiveStep(newStep: number, oldStep: number) {\r\n        const steps = this.getSteps();\r\n        if (!this.shouldEmitEvent) {\r\n            this.shouldEmitEvent = true;\r\n            return;\r\n        }\r\n        // Skipping until the enabled step is found \r\n        if(steps[newStep-1]) { \r\n            if (!steps[newStep-1].disabled) {\r\n                this.emitIfxChange(newStep, oldStep);\r\n            } else {\r\n                // If coming from higher step number to the lower step number\r\n                if (newStep < oldStep) {\r\n                    let i = newStep;\r\n                    this.shouldEmitEvent = false;\r\n                    while (i >= 1 && steps[i-1].disabled) i--;\r\n                    // if all the steps are disabled no change.\r\n                    if (i < 1) {\r\n                        this.activeStep = oldStep;\r\n                    } else {\r\n                        this.emitIfxChange(i, oldStep);\r\n                        this.activeStep = i;\r\n                    }\r\n                } \r\n                // If coming from lower step number to the higher step number\r\n                else {\r\n                    let i = newStep;\r\n                    this.shouldEmitEvent = false;\r\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\r\n                    if (i > this.stepsCount) {\r\n                        this.activeStep = oldStep;\r\n                    } else {\r\n                        this.emitIfxChange(i, oldStep);\r\n                        this.activeStep = i;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n    \r\n    emitIfxChange(activeStep: number, previousActiveStep: number) {\r\n        this.ifxChange.emit({activeStep: activeStep, \r\n            previousActiveStep: previousActiveStep, \r\n            totalSteps: this.stepsCount,\r\n            emittedByClick: this.emittedByClick\r\n        });\r\n        this.emittedByClick = false;\r\n    }\r\n\r\n    getSteps() {\r\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\r\n        return steps;\r\n    }\r\n\r\n\r\n    addStepIdsToStepsAndCountSteps() {\r\n        const steps = this.getSteps()\r\n        steps[steps.length - 1].lastStep = true;\r\n        for (let i = 0; i < steps.length; i++) {\r\n            steps[i].stepId = i + 1;\r\n        }\r\n        this.stepsCount = steps.length;\r\n    }\r\n\r\n\r\n    setActiveStep(stepId: number, setByClick: boolean = false) {\r\n        this.emittedByClick = setByClick;\r\n        this.activeStep = stepId;\r\n    }\r\n\r\n    setStepsBeforeActiveToComplete() {\r\n        const steps = this.getSteps();\r\n        steps.forEach( (step, stepId) => {\r\n            if (stepId+1 < this.activeStep) step.complete = true;\r\n        });\r\n    }\r\n\r\n    syncIfxSteps() {\r\n        const steps = this.getSteps()\r\n        for (let i = 0; i < steps.length; i++) {\r\n            const stepperState: StepperState = { \r\n                activeStep: this.activeStep,\r\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \r\n                showStepNumber: this.showStepNumber, \r\n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \r\n                setActiveStep: this.setActiveStep.bind(this)\r\n            };\r\n            steps[i].stepperState = stepperState;\r\n        }\r\n    }\r\n\r\n    setInitialActiveStep() {\r\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\r\n    }\r\n\r\n\r\n    componentWillLoad() {\r\n        this.addStepIdsToStepsAndCountSteps();\r\n        this.setInitialActiveStep();\r\n        this.setStepsBeforeActiveToComplete();\r\n    }\r\n    \r\n    async componentDidLoad() {\r\n        if(!isNestedInIfxComponent(this.el)) { \r\n            const framework = detectFramework();\r\n            trackComponent('ifx-stepper', await framework)\r\n        }\r\n        this.syncIfxSteps();\r\n    }\r\n\r\n    componentWillUpdate() {\r\n        this.syncIfxSteps();\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div aria-label = {this.ariaLabel}\r\n                aria-current={this.ariaCurrent}\r\n                role = 'navigation' \r\n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\r\n                {\r\n                    /* Progress bar for compact variant. */\r\n                    (this.variant === 'compact') && \r\n                    <div class = 'stepper-progress'>\r\n                        <div class = 'progress-detail'>\r\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\r\n                        </div>\r\n                    </div>\r\n                }\r\n                \r\n                {/* Slot for ifx-steps. */}\r\n                <div class = {`stepper-wrapper`}>\r\n                    <slot />\r\n                </div>\r\n            </div>\r\n        );\r\n    };\r\n\r\n    componentDidRender() {\r\n        /* Updating progress bar in compact version. */\r\n        if (this.variant == 'compact') {\r\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\r\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\r\n        }\r\n    }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ifx-stepper.entry.js","sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        align-items: center;\n        gap: 8px;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering300 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n    tag: 'ifx-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n    @Prop() ariaLabel: string | null;\n    @Prop() ariaCurrent: string | null;\n\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if(steps[newStep-1]) { \n            if (!steps[newStep-1].disabled) {\n                this.emitIfxChange(newStep, oldStep);\n            } else {\n                // If coming from higher step number to the lower step number\n                if (newStep < oldStep) {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i >= 1 && steps[i-1].disabled) i--;\n                    // if all the steps are disabled no change.\n                    if (i < 1) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                } \n                // If coming from lower step number to the higher step number\n                else {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                    if (i > this.stepsCount) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-stepper', await framework)\n        }\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = {this.ariaLabel}\n                aria-current={this.ariaCurrent}\n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,w6BAAw6B;;MCoB96B,OAAO,GAAA,MAAA;AANpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAW6B,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACvC,QAAA,IAAiB,CAAA,iBAAA,GAAsB,MAAM;AAC7C,QAAA,IAAc,CAAA,cAAA,GAAa,KAAK;AAChC,QAAA,IAAO,CAAA,OAAA,GAAwC,SAAS;AAOvD,QAAA,IAAe,CAAA,eAAA,GAAY,IAAI;AAC/B,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AA6J3C;AA1JG,IAAA,YAAY,CAAC,KAAkB,EAAA;AAC3B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,kBAAkB,GAAC,CAAC,CAAC;AACnE,QAAA,IAAI,kBAAkB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;AACpD,YAAA,kBAAkB,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;;;IAKxD,gBAAgB,CAAC,OAAe,EAAE,OAAe,EAAA;AAC7C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;YAC3B;;;AAGJ,QAAA,IAAG,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,EAAE;YACjB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;AAC5B,gBAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC;;iBACjC;;AAEH,gBAAA,IAAI,OAAO,GAAG,OAAO,EAAE;oBACnB,IAAI,CAAC,GAAG,OAAO;AACf,oBAAA,IAAI,CAAC,eAAe,GAAG,KAAK;oBAC5B,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;AAAE,wBAAA,CAAC,EAAE;;AAEzC,oBAAA,IAAI,CAAC,GAAG,CAAC,EAAE;AACP,wBAAA,IAAI,CAAC,UAAU,GAAG,OAAO;;yBACtB;AACH,wBAAA,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC;AAC9B,wBAAA,IAAI,CAAC,UAAU,GAAG,CAAC;;;;qBAItB;oBACD,IAAI,CAAC,GAAG,OAAO;AACf,oBAAA,IAAI,CAAC,eAAe,GAAG,KAAK;AAC5B,oBAAA,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;AAAE,wBAAA,CAAC,EAAE;AACvD,oBAAA,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE;AACrB,wBAAA,IAAI,CAAC,UAAU,GAAG,OAAO;;yBACtB;AACH,wBAAA,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC;AAC9B,wBAAA,IAAI,CAAC,UAAU,GAAG,CAAC;;;;;;IAOvC,aAAa,CAAC,UAAkB,EAAE,kBAA0B,EAAA;QACxD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,UAAU;AACvC,YAAA,kBAAkB,EAAE,kBAAkB;YACtC,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,cAAc,EAAE,IAAI,CAAC;AACxB,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;IAG/B,QAAQ,GAAA;QACJ,MAAM,KAAK,GAAmC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC;AAClF,QAAA,OAAO,KAAK;;IAIhB,8BAA8B,GAAA;AAC1B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI;AACvC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACnC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC;;AAE3B,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;;AAIlC,IAAA,aAAa,CAAC,MAAc,EAAE,UAAA,GAAsB,KAAK,EAAA;AACrD,QAAA,IAAI,CAAC,cAAc,GAAG,UAAU;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM;;IAG5B,8BAA8B,GAAA;AAC1B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,KAAK,CAAC,OAAO,CAAE,CAAC,IAAI,EAAE,MAAM,KAAI;AAC5B,YAAA,IAAI,MAAM,GAAC,CAAC,GAAG,IAAI,CAAC,UAAU;AAAE,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACxD,SAAC,CAAC;;IAGN,YAAY,GAAA;AACR,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACnC,YAAA,MAAM,YAAY,GAAiB;gBAC/B,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,gBAAA,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;gBAC1E,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBACjG,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI;aAC9C;AACD,YAAA,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,YAAY;;;IAI5C,oBAAoB,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;;IAIpH,iBAAiB,GAAA;QACb,IAAI,CAAC,8BAA8B,EAAE;QACrC,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,8BAA8B,EAAE;;AAGzC,IAAA,MAAM,gBAAgB,GAAA;QAClB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACjC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC;;QAElD,IAAI,CAAC,YAAY,EAAE;;IAGvB,mBAAmB,GAAA;QACf,IAAI,CAAC,YAAY,EAAE;;IAGvB,MAAM,GAAA;AACF,QAAA,QACI,CAAmB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,CAAC,SAAS,EACf,cAAA,EAAA,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAG,YAAY,EACnB,KAAK,EAAI,CAAW,QAAA,EAAA,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,UAAU,GAAC,IAAI,CAAC,iBAAiB,GAAE,EAAE,EAAE,EAAA;;AAG9K,QAAA,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS;AAC3B,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAG,kBAAkB,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAG,iBAAiB,EAAA,EACzB,CAAG,EAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAO,IAAA,EAAA,IAAI,CAAC,UAAU,EAAE,CACpE,CACJ,EAIV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAI,iBAAiB,EAAA,EAC3B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;IAId,kBAAkB,GAAA;;AAEd,QAAA,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;AAC3B,YAAA,MAAM,WAAW,GAAgB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC;YACtF,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,CAAG,EAAA,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,CAAG,CAAA,CAAA,CAAC;;;;;;;;;;;;"}

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

@@ -70,7 +70,7 @@ const Switch = class {
     //   this.internals.setFormValue(null);
     // }
     render() {
-        return (h("div", { key: 'd34cf1b1bad0bb7356b6b76ecff9b5d60110ee21', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "switch-label", onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'd8b3d3252180cb7f10905220dcd599308193e154', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'f8aa01d8c06448133f34251f20602ec5a04044d1', class: "switch__checkbox-wrapper" }, h("input", { key: '6a207dcaf0a2b3ce55c1abc753ea73bd62d3df62', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '5872b3540d8c3e04552855ebfbf3a9e86129dec5', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '0f8606cfa3c1925b30f5a38e7b7a22687704d876', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '9f11274ce2123997f6990cec8f93fd9e2f0b6d31', htmlFor: "switch" }, h("slot", { key: '0266c7c9232ca8adcae27ea6e65471d3e76e8c83', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: 'dac7ec48eba63ea4fea619b38bc2d42050335fb3', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "switch-label", onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: '4e331d64ea1bd5c2a76b730523c250add430e620', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '7f9d1690039ed6a4a99e4204c0358088aa1f459a', class: "switch__checkbox-wrapper" }, h("input", { key: '9b1b492b35cd3bf74143370bbdf79dc97d456893', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '27559d56f6fb75e90ac15590245668af0b1ab447', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '783db5d3a6d1619b96ac97501bb889bb1f6a75bc', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'ee10d23ac2b7d8d693a3ff8a85fb7af9b09c3445', htmlFor: "switch" }, h("slot", { key: '3b7b243ac57f43997f0111500e59667c2b8c75be', onSlotchange: () => this.toggleLabelGap() })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-switch.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-switch.entry.js","sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n/* switch.css */\r\n:host {\r\n  display: inline-block;\r\n  user-select: none;\r\n}\r\n\r\n.container {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  &.gap {\r\n    gap: tokens.$ifxSpace200;\r\n  }\r\n}\r\n\r\n\r\n.switch__checkbox-container {\r\n  padding: tokens.$ifxSpace50;\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  // Subtracting padding size from both height and width\r\n  width: (tokens.$ifxSpace500)-8px;\r\n  height: 16px;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border: 1px solid tokens.$ifxColorEngineering500;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  transition: background-color 0.3s ease;\r\n  outline: none;\r\n\r\n  &:focus {\r\n    outline: 4px solid tokens.$ifxColorOcean500;\r\n    outline-offset: 2px;\r\n  }\r\n\r\n  &:focus:not(:focus-visible) {\r\n    outline: none;\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid tokens.$ifxColorOcean500;\r\n    outline-offset: 2px;\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: default;\r\n    border-color: tokens.$ifxColorEngineering300;\r\n  }\r\n\r\n\r\n}\r\n\r\n\r\n.switch__label-wrapper {\r\n\r\n  & label { \r\n    &:hover { \r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: tokens.$ifxColorEngineering300;\r\n    \r\n    & label { \r\n      &:hover { \r\n        cursor: default;\r\n      }\r\n  }\r\n  }\r\n}\r\n\r\n\r\n.switch__checkbox-wrapper {\r\n\r\n  .switch {\r\n    // position: absolute;\r\n    width: tokens.$ifxSpace200;\r\n    height: tokens.$ifxSpace200;\r\n    background-color: tokens.$ifxColorEngineering500;\r\n    border-radius: 50%;\r\n    transition: transform 0.3s ease, background-color 0.3s ease;\r\n\r\n    &.disabled {\r\n      background-color: tokens.$ifxColorEngineering300;\r\n      border-color: tokens.$ifxColorEngineering300;\r\n      cursor: default;\r\n    }\r\n  }\r\n\r\n  .switch.checked {\r\n    transform: translateX(16px);\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n\r\n    &.disabled {\r\n      cursor: default;\r\n    }\r\n\r\n  }\r\n\r\n}\r\n\r\n.switch__checkbox-container:hover .toggle-switch {\r\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n\r\n\r\n.switch__checkbox-container.checked {\r\n  background-color: tokens.$ifxColorOcean500;\r\n  border-color: tokens.$ifxColorOcean500;\r\n\r\n  &.disabled {\r\n    background-color: tokens.$ifxColorEngineering300;\r\n    border-color: tokens.$ifxColorEngineering300;\r\n    cursor: default;\r\n  }\r\n}","import { AttachInternals, Method } from '@stencil/core';\r\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-switch',\r\n  styleUrl: 'switch.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\nexport class Switch {\r\n  @Prop() checked: boolean = false;\r\n  @Prop() name: string = '';\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() value: string;\r\n  @State() internalChecked: boolean = false;\r\n\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  @Element() el: HTMLIfxSwitchElement;\r\n\r\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\r\n\r\n  @Method()\r\n  async isChecked(): Promise<boolean> {\r\n    return this.internalChecked;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalChecked = this.checked;\r\n  }\r\n  \r\n\r\n  toggleLabelGap() {\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    const container = this.el.shadowRoot.querySelector('.container');\r\n    if (slot.assignedNodes().length) {\r\n      container.classList.add('gap')\r\n    } else { \r\n      container.classList.remove('gap')\r\n    }\r\n  }\r\n  \r\n  async componentDidLoad() {\r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-switch', await framework)\r\n    }\r\n    this.toggleLabelGap();\r\n  }\r\n    \r\n  @Watch('checked')\r\n  valueChanged(newValue: boolean, oldValue: boolean) {\r\n    if (newValue !== oldValue) {\r\n      this.internalChecked = newValue;\r\n    }\r\n  }\r\n\r\n  toggleSwitch() {\r\n    if (this.disabled) return;\r\n    this.internalChecked = !this.internalChecked;\r\n\r\n    if (this.internalChecked) {\r\n      if (this.value !== undefined) {\r\n        //this.internals.setFormValue(this.value);\r\n      } else {\r\n        //this.internals.setFormValue(\"on\")\r\n      }\r\n    } else {\r\n      //this.internals.setFormValue(null)\r\n    }\r\n\r\n    this.ifxChange.emit(this.internalChecked);\r\n  }\r\n\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    if (this.disabled) return;\r\n    // If the pressed key is either 'Enter' or 'Space' \r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      this.toggleSwitch();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Callback for form association.\r\n   * Called whenever the form is reset.\r\n   */\r\n  // formResetCallback() {\r\n  //   this.internals.setFormValue(null);\r\n  // }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class=\"container\"\r\n        role=\"switch\"\r\n        aria-checked={this.internalChecked ? 'true' : 'false'}\r\n        aria-disabled={this.disabled ? 'true' : 'false'}\r\n        aria-labelledby=\"switch-label\"\r\n        onClick={() => this.toggleSwitch()}\r\n        onKeyDown={(event) => this.handleKeyDown(event)}\r\n        >\r\n        {/* Checkbox */}\r\n        <div \r\n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\r\n          tabindex=\"0\"\r\n        >\r\n          <div class=\"switch__checkbox-wrapper\">\r\n            <input type=\"checkbox\" hidden\r\n              name={this.name}\r\n              disabled={this.disabled}\r\n              checked={this.internalChecked}\r\n              value={`${this.value}`} />\r\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\r\n          </div>\r\n        </div >\r\n\r\n        {/* Label */}\r\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\r\n          <label htmlFor=\"switch\">\r\n            <slot onSlotchange={() => this.toggleLabelGap()} />\r\n          </label>\r\n        </div>\r\n      </div>\r\n    )\r\n\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ifx-switch.entry.js","sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    \n    & label { \n      &:hover { \n        cursor: default;\n      }\n  }\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  // formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-switch', await framework)\n    }\n    this.toggleLabelGap();\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        //this.internals.setFormValue(this.value);\n      } else {\n        //this.internals.setFormValue(\"on\")\n      }\n    } else {\n      //this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  // formResetCallback() {\n  //   this.internals.setFormValue(null);\n  // }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-labelledby=\"switch-label\"\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -13,7 +13,7 @@ const IfxTab = class {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return h("slot", { key: '419b1743fe36e5d30e3cfad98c3b02bb7a039ce3' });
+        return h("slot", { key: 'dad01fbbf74d672ac8755a57cf6a31b18b4de550' });
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ifx-tab.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-tab.entry.js","sources":["src/components/tabs/tab.scss?tag=ifx-tab","src/components/tabs/tab.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}","import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-tab',\r\n  styleUrl: 'tab.scss',\r\n  shadow: false\r\n})\r\nexport class IfxTab {\r\n  @Element() el: HTMLElement;\r\n  @Prop() header: string;\r\n  @Prop() disabled: boolean;\r\n  @Prop() icon: string = '';\r\n  @Prop() iconPosition: 'left' | 'right' = 'left';\r\n  @Event() tabHeaderChange: EventEmitter;\r\n\r\n  componentWillUpdate() { \r\n    this.tabHeaderChange.emit(this.header)\r\n  }\r\n\r\n  render() {\r\n    return <slot />;\r\n  }\r\n}"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,sBAAsB;;MCOxB,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASU,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAY,CAAA,YAAA,GAAqB,MAAM;AAUhD;IAPC,mBAAmB,GAAA;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;IAGxC,MAAM,GAAA;QACJ,OAAO,8DAAQ;;;;;;;;"}
+{"version":3,"file":"ifx-tab.entry.js","sources":["src/components/tabs/tab.scss?tag=ifx-tab","src/components/tabs/tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}","import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-tab',\n  styleUrl: 'tab.scss',\n  shadow: false\n})\nexport class IfxTab {\n  @Element() el: HTMLElement;\n  @Prop() header: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string = '';\n  @Prop() iconPosition: 'left' | 'right' = 'left';\n  @Event() tabHeaderChange: EventEmitter;\n\n  componentWillUpdate() { \n    this.tabHeaderChange.emit(this.header)\n  }\n\n  render() {\n    return <slot />;\n  }\n}"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,sBAAsB;;MCOxB,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASU,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAY,CAAA,YAAA,GAAqB,MAAM;AAUhD;IAPC,mBAAmB,GAAA;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;IAGxC,MAAM,GAAA;QACJ,OAAO,8DAAQ;;;;;;;;"}

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

@@ -319,10 +319,10 @@ class StatusCellRenderer {
 class CustomNoRowsOverlay {
     init(params) {
         this.eGui = document.createElement('div');
-        this.eGui.innerHTML = `
-            <div role="presentation" class="ag-overlay-loading-center" >
-               ${params.noRowsMessageFunc()}
-            </div>
+        this.eGui.innerHTML = `
+            <div role="presentation" class="ag-overlay-loading-center" >
+               ${params.noRowsMessageFunc()}
+            </div>
         `;
     }
     getGui() {
@@ -336,8 +336,8 @@ class CustomNoRowsOverlay {
 class CustomLoadingOverlay {
     init(_params) {
         this.eGui = document.createElement('div');
-        this.eGui.innerHTML = `<div class="ag-overlay-loading-center" role="presentation">
-<ifx-spinner></ifx-spinner>
+        this.eGui.innerHTML = `<div class="ag-overlay-loading-center" role="presentation">
+<ifx-spinner></ifx-spinner>
             </div>`;
     }
     getGui() {
@@ -384,6 +384,7 @@ const Table = class {
         this.enableSelection = false;
         this.selectedRows = new Set();
         this.selectAll = false;
+        this.selectedRowsData = new Map();
         this.showLoading = false;
         this.originalRowData = [];
         this.internalItemsPerPage = JSON.stringify([
@@ -393,12 +394,41 @@ const Table = class {
         ]);
         this.handleSelectAll = (checked) => {
             this.selectAll = checked;
+            const newSelectedRows = new Set(this.selectedRows);
+            const newSelectedRowsData = new Map(this.selectedRowsData);
             if (checked) {
-                this.selectedRows = new Set(this.allRowData.map(row => row.__rowId));
+                if (this.serverSidePagination) {
+                    this.rowData.forEach(row => {
+                        const rowId = row.__rowId;
+                        newSelectedRows.add(rowId);
+                        const cleanRow = __rest(row, ["__checkbox", "__rowId"]);
+                        newSelectedRowsData.set(rowId, cleanRow);
+                    });
+                }
+                else {
+                    this.allRowData.forEach(row => {
+                        const rowId = row.__rowId;
+                        newSelectedRows.add(rowId);
+                        const cleanRow = __rest(row, ["__checkbox", "__rowId"]);
+                        newSelectedRowsData.set(rowId, cleanRow);
+                    });
+                }
             }
             else {
-                this.selectedRows = new Set();
+                if (this.serverSidePagination) {
+                    this.rowData.forEach(row => {
+                        const rowId = row.__rowId;
+                        newSelectedRows.delete(rowId);
+                        newSelectedRowsData.delete(rowId);
+                    });
+                }
+                else {
+                    newSelectedRows.clear();
+                    newSelectedRowsData.clear();
+                }
             }
+            this.selectedRows = newSelectedRows;
+            this.selectedRowsData = newSelectedRowsData;
             this.updateCheckboxStates();
             this.updateHeaderCheckboxState();
             this.emitSelectionChange();
@@ -407,14 +437,25 @@ const Table = class {
             const clickedRowData = params.data;
             const rowId = clickedRowData.__rowId;
             const newSelectedRows = new Set(this.selectedRows);
+            const newSelectedRowsData = new Map(this.selectedRowsData);
             if (newSelectedRows.has(rowId)) {
                 newSelectedRows.delete(rowId);
+                newSelectedRowsData.delete(rowId);
             }
             else {
                 newSelectedRows.add(rowId);
+                const cleanRow = __rest(clickedRowData, ["__checkbox", "__rowId"]);
+                newSelectedRowsData.set(rowId, cleanRow);
             }
             this.selectedRows = newSelectedRows;
-            this.selectAll = newSelectedRows.size === this.allRowData.length;
+            this.selectedRowsData = newSelectedRowsData;
+            if (this.serverSidePagination) {
+                const currentPageSelectedCount = this.rowData.filter(row => newSelectedRows.has(row.__rowId)).length;
+                this.selectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
+            }
+            else {
+                this.selectAll = newSelectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+            }
             this.updateCheckboxStates();
             this.updateHeaderCheckboxState();
             this.emitSelectionChange();
@@ -536,10 +577,19 @@ const Table = class {
                 var _a;
                 const headerCheckbox = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.ag-header-cell[col-id="__checkbox"] ifx-checkbox');
                 if (headerCheckbox) {
-                    const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
-                    const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;
-                    headerCheckbox.checked = allSelected;
-                    headerCheckbox.indeterminate = someSelected;
+                    if (this.serverSidePagination) {
+                        const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
+                        const allOnPageSelected = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
+                        const someOnPageSelected = currentPageSelectedCount > 0 && currentPageSelectedCount < this.rowData.length;
+                        headerCheckbox.checked = allOnPageSelected;
+                        headerCheckbox.indeterminate = someOnPageSelected;
+                    }
+                    else {
+                        const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+                        const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;
+                        headerCheckbox.checked = allSelected;
+                        headerCheckbox.indeterminate = someSelected;
+                    }
                 }
             }, 0);
         }
@@ -626,10 +676,8 @@ const Table = class {
                     if (!textFilterMatched)
                         return false;
                 }
-                // For multi-select filters, this remains unchanged
                 else if (filterInfo.type === 'multi-select') {
                     let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';
-                    // Check if 'undefined' is a selected value and include rows with empty values in that case
                     let includesUndefined = selectedValues.includes('undefined');
                     if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {
                         return false;
@@ -640,30 +688,31 @@ const Table = class {
         });
     }
     async updateTableView() {
+        if (this.serverSidePagination) {
+            this.selectAll = false;
+        }
         if (this.serverSidePagination && this.serverPageChangeHandler) {
             const { rows, total } = await this.serverPageChangeHandler({
                 page: this.currentPage,
                 pageSize: this.paginationPageSize,
             });
-            if (this.enableSelection) {
-                rows.forEach((row, index) => {
-                    var _a;
-                    if (!row.__rowId) {
-                        row.__rowId = `row_${(this.currentPage - 1) * this.paginationPageSize + index}_${Date.now()}`;
-                    }
-                    row.__checkbox = {
-                        disabled: false,
-                        checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(row.__rowId)) || false,
-                        size: 's',
-                        indeterminate: false,
-                        error: false,
-                    };
-                });
-            }
+            rows.forEach((row, index) => {
+                var _a;
+                const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
+                row.__rowId = rowId;
+                row.__checkbox = {
+                    disabled: false,
+                    checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
+                    size: 's',
+                    indeterminate: false,
+                    error: false,
+                };
+            });
             this.rowData = rows;
             this.matchingResultsCount = total;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', rows);
+                this.updateHeaderCheckboxState();
             }
             const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
             if (paginationElement) {
@@ -671,9 +720,15 @@ const Table = class {
             }
         }
         else {
-            const startIndex = (this.currentPage - 1) * this.paginationPageSize;
-            const endIndex = startIndex + this.paginationPageSize;
-            const visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            let visibleRowData;
+            if (this.pagination) {
+                const startIndex = (this.currentPage - 1) * this.paginationPageSize;
+                const endIndex = startIndex + this.paginationPageSize;
+                visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            }
+            else {
+                visibleRowData = this.allRowData;
+            }
             if (this.enableSelection) {
                 visibleRowData.forEach(row => {
                     var _a, _b;
@@ -696,6 +751,7 @@ const Table = class {
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', this.rowData);
             }
+            this.updateHeaderCheckboxState();
         }
     }
     clearAllFilters() {
@@ -852,16 +908,35 @@ const Table = class {
         });
     }
     async handlePageChange(event) {
+        if (!this.pagination) {
+            return;
+        }
         this.currentPage = event.detail.currentPage;
+        if (this.serverSidePagination) {
+            this.selectAll = false;
+        }
         if (this.serverSidePagination && this.serverPageChangeHandler) {
             const { rows, total } = await this.serverPageChangeHandler({
                 page: this.currentPage,
                 pageSize: this.paginationPageSize,
             });
+            rows.forEach((row, index) => {
+                var _a;
+                const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
+                row.__rowId = rowId;
+                row.__checkbox = {
+                    disabled: false,
+                    checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
+                    size: 's',
+                    indeterminate: false,
+                    error: false,
+                };
+            });
             this.rowData = rows;
             this.matchingResultsCount = total;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', this.rowData);
+                this.updateHeaderCheckboxState();
             }
             const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
             if (paginationElement) {
@@ -872,8 +947,27 @@ const Table = class {
             const startIndex = (this.currentPage - 1) * this.paginationPageSize;
             const endIndex = startIndex + this.paginationPageSize;
             const visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            if (this.enableSelection) {
+                visibleRowData.forEach(row => {
+                    var _a, _b;
+                    if (!row.__checkbox) {
+                        row.__checkbox = {
+                            disabled: false,
+                            checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(row.__rowId)) || false,
+                            size: 's',
+                            indeterminate: false,
+                            error: false,
+                        };
+                    }
+                    else {
+                        row.__checkbox.checked = ((_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.has(row.__rowId)) || false;
+                    }
+                });
+            }
+            this.rowData = visibleRowData;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', visibleRowData);
+                this.updateHeaderCheckboxState();
             }
         }
     }
@@ -923,7 +1017,8 @@ const Table = class {
         return rows.slice(0, this.paginationPageSize);
     }
     updateCheckboxStates() {
-        this.allRowData.forEach(row => {
+        const dataToUpdate = this.rowData;
+        dataToUpdate.forEach(row => {
             if (row.__checkbox) {
                 row.__checkbox.checked = this.selectedRows.has(row.__rowId);
             }
@@ -936,20 +1031,20 @@ const Table = class {
         }
     }
     emitSelectionChange() {
-        const selectedRowsData = Array.from(this.selectedRows)
-            .map(rowId => {
-            const row = this.allRowData.find(r => r.__rowId === rowId);
-            if (!row)
-                return null;
-            const rowData = __rest(row, ["__checkbox", "__rowId"]);
-            return rowData;
-        })
-            .filter(row => row !== null);
+        const selectedRowsArray = Array.from(this.selectedRowsData.values());
+        let isSelectAll;
+        if (this.serverSidePagination) {
+            const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
+            isSelectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
+        }
+        else {
+            isSelectAll = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+        }
         this.host.dispatchEvent(new CustomEvent('ifxSelectionChange', {
             detail: {
-                selectedRows: selectedRowsData,
-                selectedCount: selectedRowsData.length,
-                isSelectAll: this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0,
+                selectedRows: selectedRowsArray,
+                selectedCount: selectedRowsArray.length,
+                isSelectAll: isSelectAll,
             },
             bubbles: true,
         }));
@@ -1073,12 +1168,12 @@ const Table = class {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : this.filterOrientation === 'none' ? '' : 'sidebar-layout';
-        return (h(Host, { key: 'aed3105d02de1b425538c01dd241a0cc8ad56862' }, h("div", { key: '4558eb8d179b08d909d6406a36987e2b424e2e3d', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '3507914423eeceac168b20afcfbd9ca4314b70cd', class: "sidebar-btn" }, h("ifx-button", { key: '48ba9e71c7aaa1ac3fa1cb16aaddf55d4a5587ae', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'b08ca29c94a41b2510028d549edb8f8e161865f7', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '766df4ac67ac10a94418fadae0fd8a402adcf19f', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '89323404fb703cd96b5423c735a2d0b3047cc427', class: "sidebar-container" }, h("div", { key: '8cb80b12813e07f5671359dec7a37347f154a89f', class: "filters-title-container" }, h("span", { key: 'ed31fcf5e3a86323ebef8a3f38f8a32d63d68a31', class: "filters-title" }, "Filters")), h("div", { key: 'd76a86a785ffc46a7f364818a9b93ecea9158132', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '0dc3ef1ef98bf48f99e1a9fab419d7173b20df43', name: "sidebar-filter" })))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '6f6046736499cb18dfb4d8910ddc587dce3ac37a', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '6adf3eaaa45e7c43d6cdf4649de26f7bedf56e01', name: "topbar-filter" }))), h("div", { key: '18562ba4f47e25f18255ea1278962f9e2fc27cc2', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (h("div", { key: '8b8b49aa984ee4abd1800cbc81d874dd17ee1231', class: "filter-chips" }, Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'a0421844e9c61683bd742e73f1809ffe3e0e6bad' }, h("div", { key: 'cdbddf03c9ec9508afe475280031ac789465c924', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '9190967ad17c4bc873461f9679857aecfc42cf29', class: "sidebar-btn" }, h("ifx-button", { key: 'e6af658a82fa88e87b3b2cc3d377268d4b8e2cf4', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '20be3fda6b40d956202c70dd8f2d5b8e27fccca1', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'b886df2920915f2e26b9e92a29f95971c769fe0c', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '768e749d6bb7294581916fa350ab6db406fd56cc', class: "sidebar-container" }, h("div", { key: '00e5ee6ae4127e25ed6f354431fb50826a5738b7', class: "filters-title-container" }, h("span", { key: 'c40714d09dae34e2fe4ca75f4ddb12f4c81b37da', class: "filters-title" }, "Filters")), h("div", { key: '4c182b7dd4fe8996011025af996c1a2c8815c6d2', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '8a7dc422f3e4382554eb2af47de00ed53442d1d5', name: "sidebar-filter" })))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '0f1ee29a1bc041554cdc65108136c646efc7b934', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: 'c9ce08d1026ebfc80ddd3a11bbe1b26a09e58c64', name: "topbar-filter" }))), h("div", { key: '12f0b8bcb4dcebe0b57779f09ac703a76c741df0', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (h("div", { key: '50fae34e9d7652ad2d27a2dbe10a973cc559f61b', class: "filter-chips" }, 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;
-        }))), h("div", { key: '9dea2c6e676eb5b5c9a12507db3ce36ccb77690e', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (h("div", { key: 'ac4056b29fbe87a7df4b8e6c63c2018a270619a6', class: "matching-results-container" }, h("span", { key: '318c260b1d7218f07b00024feb6ab8e3b862e2a1', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), h("span", { key: '9ab7ca1283fdf966ba613e36d76ade4eec543997', class: "matching-results-text" }, this.headline))), h("div", { key: '3ce5feb6e709df11319a9da723f9acf7b71b3e68', class: "inner-buttons-wrapper" }, h("slot", { key: 'db3ad5aa4cd1c9f2b4a97c5766a9ac130c83c446', name: "inner-button" }))), h("div", { key: '889950920e705429bfd0a35e4c740cabe6052f08', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '71b42826058ed0dcc642e4a10599c68f9f1d4309', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`, style: style, ref: el => (this.container = el) })), h("div", { key: '9b7170f76c1c49878ba4679f11418235d1e91cb9', class: "pagination-wrapper" }, this.pagination ? (h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage })) : null))))));
+        }))), h("div", { key: 'a3d61c90ad5d8744be6c55d7790551a53d5388e9', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (h("div", { key: '598c04897a782b9f7fa8ea69b202e17c5db87142', class: "matching-results-container" }, h("span", { key: '174bbc64858c0b952eef4e289ec25a88f6a13ba5', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), h("span", { key: 'fa4e1a350a97794ba1c0390176d7413c19ff9286', class: "matching-results-text" }, this.headline))), h("div", { key: '52105af6541e2a5588dc0307c20d7e4b3e72220c', class: "inner-buttons-wrapper" }, h("slot", { key: 'fe68a9b64d3ed0fcbdb6a2ac9f2092fb9c921974', name: "inner-button" }))), h("div", { key: 'd3001b399da78d9e6005f4cf262a7f74b77b9cb4', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '4cc86621f42cb3c4de69618957297666e7df04a3', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`, style: style, ref: el => (this.container = el) })), h("div", { key: 'ffea3142fecc04ca051aeeefd17dc9860ca8a1e1', class: "pagination-wrapper" }, this.pagination ? (h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage })) : null))))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');