@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,168 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const stepperCss = () => `.stepper{display:flex;align-items:center}.stepper.compact{align-items:center;gap:8px}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";font-family:var(--ifx-font-family);min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0a8276 var(--pb, 0%), #bfbbbb 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}`;
+
+const Stepper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxChange = index.createEvent(this, "ifxChange", 7);
+    }
+    get el() { return index.getElement(this); }
+    /** Fired when the active step changes. */
+    ifxChange;
+    /** Currently active step in the stepper. */
+    activeStep = 1;
+    /** Position of the indicator relative to the step content. */
+    indicatorPosition = "left";
+    /** If true, displays step numbers inside the indicators. */
+    showStepNumber = false;
+    /** Visual layout variant of the stepper (default, compact, or vertical). */
+    variant = "default";
+    /** Accessible label for the stepper region. */
+    ariaLabelText;
+    /** ARIA current value for the active step (e.g. 'step' or 'page'). */
+    ariaCurrentText;
+    stepsCount;
+    shouldEmitEvent = true;
+    emittedByClick = false;
+    onStepChange(event) {
+        const steps = this.getSteps();
+        const previousActiveStep = steps[event.detail.previousActiveStep - 1];
+        if (previousActiveStep && !previousActiveStep.complete) {
+            previousActiveStep.setAttribute("error", "true");
+        }
+    }
+    handleActiveStep(newStep, oldStep) {
+        const steps = this.getSteps();
+        if (!this.shouldEmitEvent) {
+            this.shouldEmitEvent = true;
+            return;
+        }
+        // Skipping until the enabled step is found
+        if (steps[newStep - 1]) {
+            if (!steps[newStep - 1].disabled) {
+                this.emitIfxChange(newStep, oldStep);
+            }
+            else {
+                // If coming from higher step number to the lower step number
+                if (newStep < oldStep) {
+                    let i = newStep;
+                    this.shouldEmitEvent = false;
+                    while (i >= 1 && steps[i - 1].disabled)
+                        i--;
+                    // if all the steps are disabled no change.
+                    if (i < 1) {
+                        this.activeStep = oldStep;
+                    }
+                    else {
+                        this.emitIfxChange(i, oldStep);
+                        this.activeStep = i;
+                    }
+                }
+                // If coming from lower step number to the higher step number
+                else {
+                    let i = newStep;
+                    this.shouldEmitEvent = false;
+                    while (i <= this.stepsCount && steps[i - 1].disabled)
+                        i++;
+                    if (i > this.stepsCount) {
+                        this.activeStep = oldStep;
+                    }
+                    else {
+                        this.emitIfxChange(i, oldStep);
+                        this.activeStep = i;
+                    }
+                }
+            }
+        }
+    }
+    emitIfxChange(activeStep, previousActiveStep) {
+        this.ifxChange.emit({
+            activeStep: activeStep,
+            previousActiveStep: previousActiveStep,
+            totalSteps: this.stepsCount,
+            emittedByClick: this.emittedByClick,
+        });
+        this.emittedByClick = false;
+    }
+    getSteps() {
+        const steps = this.el.querySelectorAll("ifx-step");
+        return steps;
+    }
+    addStepIdsToStepsAndCountSteps() {
+        const steps = this.getSteps();
+        steps[steps.length - 1].lastStep = true;
+        for (let i = 0; i < steps.length; i++) {
+            steps[i].stepId = i + 1;
+        }
+        this.stepsCount = steps.length;
+    }
+    setActiveStep(stepId, setByClick = false) {
+        this.emittedByClick = setByClick;
+        this.activeStep = stepId;
+    }
+    setStepsBeforeActiveToComplete() {
+        const steps = this.getSteps();
+        steps.forEach((step, stepId) => {
+            if (stepId + 1 < this.activeStep)
+                step.complete = true;
+        });
+    }
+    syncIfxSteps() {
+        const steps = this.getSteps();
+        for (let i = 0; i < steps.length; i++) {
+            const stepperState = {
+                activeStep: this.activeStep,
+                indicatorPosition: this.indicatorPosition !== "right" ? "left" : "right",
+                showStepNumber: this.showStepNumber,
+                variant: this.variant !== "compact" && this.variant !== "vertical"
+                    ? "default"
+                    : this.variant,
+                setActiveStep: this.setActiveStep.bind(this),
+            };
+            steps[i].stepperState = stepperState;
+        }
+    }
+    setInitialActiveStep() {
+        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== "compact" ? 1 : 0), this.activeStep));
+    }
+    componentWillLoad() {
+        this.addStepIdsToStepsAndCountSteps();
+        this.setInitialActiveStep();
+        this.setStepsBeforeActiveToComplete();
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-stepper", await framework);
+        }
+        this.syncIfxSteps();
+    }
+    componentWillUpdate() {
+        this.syncIfxSteps();
+    }
+    render() {
+        return (index.h("div", { key: '80f7a337df54e600e28a05568a97dc9b1b4d381d', "aria-label": this.ariaLabelText, "aria-current": this.ariaCurrentText, role: "navigation", class: `stepper ${this.variant !== "compact" && this.variant !== "vertical" ? "default" : this.variant} ${this.variant === "compact" ? "compact-" + this.indicatorPosition : ""}` }, 
+        /* Progress bar for compact variant. */
+        this.variant === "compact" && (index.h("div", { key: '15f433b364dd4293c4d11ee8a9871c28d1a9d28c', class: "stepper-progress" }, index.h("div", { key: 'd6a175d28b23d449243d2fb3d18208548fddff8f', class: "progress-detail" }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`))), index.h("div", { key: 'd0a986345ee4401a30b9033c218135f6cc838370', class: `stepper-wrapper` }, index.h("slot", { key: '32b1d023f9d8af37dfa8becb5451cb1668470479' }))));
+    }
+    componentDidRender() {
+        /* Updating progress bar in compact version. */
+        if (this.variant == "compact") {
+            const progressBar = this.el.shadowRoot.querySelector(".stepper-progress");
+            progressBar.style.setProperty("--pb", `${(this.activeStep / this.stepsCount) * 100}%`);
+        }
+    }
+    static get watchers() { return {
+        "activeStep": [{
+                "handleActiveStep": 0
+            }]
+    }; }
+};
+Stepper.style = stepperCss();
+
+exports.ifx_stepper = Stepper;

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

@@ -0,0 +1,190 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const switchCss = () => `:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#ffffff;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0a8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0a8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#bfbbbb}.switch__label-wrapper{font-family:var(--ifx-font-family);color:#1d1d1d}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#bfbbbb}.switch__label-wrapper.disabled label:hover{cursor:default}.switch__label-wrapper.readOnly{color:#575352}.switch__label-wrapper.readOnly label:hover{cursor:default}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#bfbbbb;border-color:#bfbbbb;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#ffffff}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0a8276;border-color:#0a8276}.switch__checkbox-container.checked.disabled{background-color:#bfbbbb;border-color:#bfbbbb;cursor:default}.switch__checkbox-container.checked.readOnly{background-color:#575352;border-color:#575352}.switch__checkbox-container.readOnly{border-color:#bfbbbb;cursor:default}`;
+
+const Switch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxChange = index.createEvent(this, "ifxChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    // 1. Own Properties - internal only, not exposed on host element
+    initialChecked;
+    get el() { return index.getElement(this); }
+    // 3. State Variables - internal reactive state
+    // (none - this component uses @Prop instead)
+    // 4. Public Properties - exposed as both properties and attributes
+    /**
+     * Sets the checked state of the switch.
+     * @default false
+     */
+    checked = false;
+    // @Watch goes right after the @Prop it monitors - keeps related code together
+    onCheckedChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.checked = newValue;
+            this.updateFormValue();
+        }
+    }
+    /**
+     * Disables user interaction when true.
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Makes the switch read-only.
+     * @default false
+     */
+    readOnly = false;
+    /**
+     * Form field name.
+     * @default ""
+     */
+    name = "";
+    /**
+     * Form field value when checked.
+     * If not set, defaults to "on" (standard checkbox behavior).
+     * @default "on"
+     */
+    value = "on";
+    // ElementInternals for form association - enables participation in HTML forms
+    internals;
+    // 5. Events - custom events emitted by the component
+    /**
+     * Emitted when checked state changes.
+     */
+    ifxChange;
+    // 6. Lifecycle Methods - ordered by execution flow
+    componentWillLoad() {
+        // Remember initial state for form reset
+        this.initialChecked = this.checked;
+        // Set initial form value when component loads
+        this.updateFormValue();
+    }
+    async componentDidLoad() {
+        // Only track top-level components to avoid duplicate analytics
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-switch", await framework);
+        }
+        this.toggleLabelGap();
+    }
+    /**
+     * Form-Associated Lifecycle Callbacks
+     * ------------------------------------
+     * These are called by the browser to integrate with native form behavior.
+     * See: https://stenciljs.com/docs/form-associated
+     *
+     * Note: formAssociatedCallback and formDisabledCallback are not implemented
+     * as they're not needed for this component. They would only be useful if we
+     * needed to react to form association changes or support fieldset-level disabling.
+     */
+    /**
+     * Called when the form is reset.
+     * Resets the switch to its initial state and clears form value.
+     */
+    formResetCallback() {
+        this.checked = this.initialChecked;
+        this.updateFormValue();
+    }
+    /**
+     * Called when the browser restores form state (e.g., browser autofill or back button).
+     * @param state - The saved state to restore
+     * @param mode - "restore" (browser restart/navigation) or "autocomplete" (autofill)
+     */
+    formStateRestoreCallback(state, _mode) {
+        if (state) {
+            this.checked = true;
+            this.updateFormValue();
+        }
+        else {
+            this.checked = false;
+            this.internals.setFormValue(null);
+        }
+    }
+    // 7. Listeners
+    // (none - this component handles events inline in render)
+    // 8. Public Methods - MUST be async, exposed on host element
+    /**
+     * Returns the current checked state.
+     */
+    async isChecked() {
+        return this.checked;
+    }
+    /**
+     * Sets the checked state.
+     * @param checked - New checked state.
+     */
+    async setChecked(checked) {
+        this.checked = checked;
+        return Promise.resolve();
+    }
+    /**
+     * Toggles the checked state.
+     * @returns Resolves when the toggle is complete.
+     */
+    async toggle() {
+        return Promise.resolve(this.toggleSwitch());
+    }
+    // 9. Private Methods - internal helpers, not callable externally
+    handleKeyDown(event) {
+        if (this.disabled || this.readOnly)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            this.toggleSwitch();
+        }
+    }
+    toggleSwitch() {
+        if (this.disabled || this.readOnly)
+            return;
+        this.checked = !this.checked;
+        this.updateFormValue();
+        this.ifxChange.emit(this.checked);
+        return this.checked;
+    }
+    /**
+     * Updates the form value based on the current checked state.
+     * Called whenever checked state changes to keep form data in sync.
+     */
+    updateFormValue() {
+        if (this.checked) {
+            this.internals.setFormValue(this.value);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    toggleLabelGap() {
+        const slot = this.el.shadowRoot.querySelector("slot");
+        const container = this.el.shadowRoot.querySelector(".container");
+        if (slot.assignedNodes().length) {
+            container.classList.add("gap");
+        }
+        else {
+            container.classList.remove("gap");
+        }
+    }
+    // 10. render() - always last, called when state/props change
+    render() {
+        return (index.h("div", { key: '9c1bcd3ef1d073d117ea30a3403b3a523c6a1b8f', class: "container", role: "switch", "aria-checked": this.checked ? "true" : "false", "aria-disabled": this.disabled || this.readOnly ? "true" : "false", "aria-readonly": this.readOnly ? "true" : "false", "aria-labelledby": "switch-label", tabIndex: this.disabled ? -1 : 0, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { key: 'f6ecd560e30a8e8274d631769ed2caafd88d052a', class: `switch__checkbox-container ${this.checked ? "checked" : ""} ${this.readOnly ? "readOnly" : this.disabled ? "disabled" : ""}` }, index.h("div", { key: '5d1c4d4dbe78e98a75a7aea071c95686f63517a7', class: "switch__checkbox-wrapper" }, index.h("input", { key: '5811a455d03b91a0f01b0a81fd71d9d3df725770', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled && !this.readOnly, checked: this.checked, value: this.value }), index.h("div", { key: '1a7af5766ad6c3d36384ed85fc6cd668570a7a14', class: `switch ${this.checked ? "checked" : ""} ${this.readOnly ? "readOnly" : this.disabled ? "disabled" : ""}` }))), index.h("div", { key: '823964c09843b68b74c065371391c3afaae5c878', class: `switch__label-wrapper ${this.readOnly ? "readOnly" : this.disabled ? "disabled" : ""}` }, index.h("label", { key: 'd6c95ecf19ead9a6bc70f7d15f773e2779daa4ce', htmlFor: "switch" }, index.h("slot", { key: 'ca9f2a9eb9559f1932093cf31d4581bd81282a24', onSlotchange: () => this.toggleLabelGap() })))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "onCheckedChange": 0
+            }]
+    }; }
+};
+Switch.style = switchCss();
+
+exports.ifx_switch = Switch;

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

@@ -0,0 +1,42 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const tabCss = () => `:host{display:block}`;
+
+const IfxTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabHeaderChange = index.createEvent(this, "tabHeaderChange", 7);
+    }
+    get el() { return index.getElement(this); }
+    /** Visible title text displayed in the tab header. */
+    header;
+    /** Disables the tab when true. */
+    disabled;
+    /** Icon displayed in the tab header. */
+    icon = '';
+    /** Position of the Icon relative to the header text. */
+    iconPosition = 'left';
+    /** Subline under the header, only for advanced variant. */
+    subline;
+    /** Subline position, either left or center. */
+    sublinePosition = 'left';
+    /** Text of the Advanced-Tab-Label */
+    label;
+    /** Number of the Advanced-Tab-Number */
+    number = 0;
+    /** Makes the tab header stick to the top of its scrolling oontainer */
+    positionSticky = false;
+    /** Emitted when tab header triggers a change (selection or property updates). */
+    tabHeaderChange;
+    componentWillUpdate() {
+        this.tabHeaderChange.emit(this.header);
+    }
+    render() {
+        return index.h("slot", { key: '4d6f00ec2248b1b76c45a6a8da46d039f356c6e8' });
+    }
+};
+IfxTab.style = tabCss();
+
+exports.ifx_tab = IfxTab;