@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/stepper/step/step.js

@@ -0,0 +1,250 @@
+import { h } from "@stencil/core";
+export class Step {
+    /** If true, marks this step as completed. */
+    complete = false;
+    /** If true, this step is disabled and not clickable. */
+    disabled = false;
+    /** If true, this step is in an error state. */
+    error = false;
+    /** Whether this is the last step in the stepper. */
+    lastStep = false;
+    /** Numeric identifier / position of this step. */
+    stepId = 1;
+    /** Shared configuration for the whole stepper (active step, layout, etc.). */
+    stepperState = {
+        activeStep: 1,
+        showStepNumber: false,
+        variant: "default",
+        indicatorPosition: "left",
+    };
+    active;
+    clickable = false;
+    onStepChange(event) {
+        const previousActiveStep = event.detail.previousActiveStep;
+        if (previousActiveStep === this.stepId && this.error) {
+            this.clickable = true;
+        }
+    }
+    updateCurrentStep(newStepperState) {
+        this.active = newStepperState.activeStep === this.stepId;
+    }
+    updateErrorState() {
+        if (this.active) {
+            this.error = false;
+        }
+    }
+    handleStepClick() {
+        if (!this.disabled &&
+            this.stepperState.variant !== "compact" &&
+            (this.clickable || this.complete)) {
+            this.stepperState.setActiveStep(this.stepId, true);
+        }
+    }
+    handleStepKeyDown(event) {
+        if (!this.disabled &&
+            this.stepperState.variant !== "compact" &&
+            (this.clickable || this.complete) &&
+            event.key === "Enter") {
+            this.stepperState.setActiveStep(this.stepId, true);
+        }
+    }
+    stopOnClickPropogation(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+        }
+    }
+    render() {
+        return (h("div", { key: '4b21a6a60e0acff717d0193c33ee220e80d59e46', "aria-current": this.active ? "step" : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? "first-step" : ""} 
+                        ${this.error ? "error" : ""}
+                        ${this.stepperState.variant}
+                        ${this.complete ? "complete" : ""}
+                        ${this.lastStep ? "last-step" : ""}
+                        indicator-${this.stepperState.indicatorPosition}
+                        ${this.active ? "active" : ""}
+                        ${this.clickable ? "clickable" : ""}
+                        ${this.disabled ? "disabled" : ""}` }, h("div", { key: '13205aceb9c48e16370b422b29e20516b8926f4a', class: "step-icon-wrapper" }, this.stepperState.variant !== "compact" && (h("span", { key: '75078c39885e4dfc428c752204c72719e5dac207', class: "step-connector-l" })), this.stepperState.variant !== "compact" &&
+            (!this.error || (this.error && this.active)) && (h("div", { key: 'a3b850cdf458d6ecd9905bbda5dd233a492512fb', class: "step-icon" }, this.stepperState.showStepNumber &&
+            !this.complete &&
+            !this.active
+            ? this.stepId
+            : "", this.complete && !this.active && (h("ifx-icon", { key: 'f167d52a1d249e080d802b6da82cb619f3cef1c4', icon: "check16" })), this.active && h("span", { key: '94e6de6567e9cedf5f5a4d1f1cf26885a1e5a425', class: "active-indic" }))), this.stepperState.variant !== "compact" &&
+            this.error &&
+            !this.active && (h("ifx-icon", { key: '20e984db600185b5f468ee36b26a9f5c856b00df', class: "error-icon", icon: "warningF16" })), this.stepperState.variant !== "compact" && (h("span", { key: 'c97fcca3d6900f44102710d226aaaa9fa89d0ace', class: `step-connector-r ${this.active ? "active" : ""}` }))), 
+        /* Step labels */
+        (this.stepperState.variant !== "compact" ||
+            (this.stepperState.variant === "compact" &&
+                (this.active ||
+                    this.stepId === this.stepperState.activeStep + 1))) && (h("div", { key: '8bfac18ed604f6baf2ae701ff94b4f11a9e2e43d', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === "compact" ? (this.active ? "curr-label" : "next-label") : ""}`, onClick: () => {
+                this.handleStepClick();
+            }, onKeyDown: (e) => {
+                this.handleStepKeyDown(e);
+            } }, this.stepperState.variant !== "compact" && h("slot", { key: '15243cf51b78c8fb9211595e8bb910bb323788b1' }), this.stepperState.variant === "compact" && !this.active
+            ? "Next: "
+            : "", this.stepperState.variant === "compact" && h("slot", { key: '055f64362486b847efb5753155dc76e3e658a8c2' })))));
+    }
+    static get is() { return "ifx-step"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "complete": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, marks this step as completed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "complete",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, this step is disabled and not clickable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, this step is in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "lastStep": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this is the last step in the stepper."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "last-step",
+                "defaultValue": "false"
+            },
+            "stepId": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Numeric identifier / position of this step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step-id",
+                "defaultValue": "1"
+            },
+            "stepperState": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepperState",
+                    "resolved": "StepperState",
+                    "references": {
+                        "StepperState": {
+                            "location": "import",
+                            "path": "../interfaces",
+                            "id": "src/components/stepper/interfaces.tsx::StepperState",
+                            "referenceLocation": "StepperState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shared configuration for the whole stepper (active step, layout, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n    activeStep: 1,\n    showStepNumber: false,\n    variant: \"default\",\n    indicatorPosition: \"left\",\n}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "active": {},
+            "clickable": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "stepperState",
+                "methodName": "updateCurrentStep"
+            }, {
+                "propName": "active",
+                "methodName": "updateErrorState"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "ifxChange",
+                "method": "onStepChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/stepper/stepper.css

@@ -0,0 +1,58 @@
+.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;
+}

package/dist/collection/components/stepper/stepper.js

@@ -0,0 +1,327 @@
+import { h, } from "@stencil/core";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+export class Stepper {
+    el;
+    /** 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 (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-stepper", await framework);
+        }
+        this.syncIfxSteps();
+    }
+    componentWillUpdate() {
+        this.syncIfxSteps();
+    }
+    render() {
+        return (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" && (h("div", { key: '15f433b364dd4293c4d11ee8a9871c28d1a9d28c', class: "stepper-progress" }, h("div", { key: 'd6a175d28b23d449243d2fb3d18208548fddff8f', class: "progress-detail" }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`))), h("div", { key: 'd0a986345ee4401a30b9033c218135f6cc838370', class: `stepper-wrapper` }, 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 is() { return "ifx-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["stepper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "activeStep": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently active step in the stepper."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-step",
+                "defaultValue": "1"
+            },
+            "indicatorPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"left\" | \"right\"",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the indicator relative to the step content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator-position",
+                "defaultValue": "\"left\""
+            },
+            "showStepNumber": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, displays step numbers inside the indicators."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-step-number",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"default\" | \"compact\" | \"vertical\"",
+                    "resolved": "\"compact\" | \"default\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual layout variant of the stepper (default, compact, or vertical)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"default\""
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the stepper region."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
+            "ariaCurrentText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA current value for the active step (e.g. 'step' or 'page')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-current-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stepsCount": {},
+            "shouldEmitEvent": {},
+            "emittedByClick": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxChange",
+                "name": "ifxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the active step changes."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStep",
+                "methodName": "handleActiveStep"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "ifxChange",
+                "method": "onStepChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}