@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/spinner/spinner.css

@@ -0,0 +1,66 @@
+:host {
+  display: inline-block;
+}
+
+.spinner {
+  position: relative;
+}
+
+.spinner.m {
+  width: 40px;
+  height: 40px;
+}
+
+.spinner.s {
+  width: 24px;
+  height: 24px;
+}
+
+.border {
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 4px solid transparent;
+  border-top-color: #0a8276;
+  border-left-color: #0a8276;
+  border-right-color: #0a8276;
+  border-top-left-radius: 1px;
+  border-top-right-radius: 1px;
+  border-radius: 50%;
+  animation: spin 2s linear infinite;
+}
+.border.inverted {
+  border-top-color: #ffffff;
+  border-left-color: #ffffff;
+  border-right-color: #ffffff;
+}
+
+.semiconductor {
+  width: 100%;
+  height: 100%;
+  animation: spin 2s linear infinite;
+}
+.semiconductor svg {
+  fill: #0a8276;
+}
+.semiconductor.inverted svg {
+  fill: #ffffff;
+}
+.semiconductor.s svg {
+  width: 24px;
+  height: 24px;
+}
+.semiconductor.m svg {
+  width: 40px;
+  height: 40px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/collection/components/spinner/spinner.js

@@ -0,0 +1,151 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+export class Spinner {
+    el;
+    /**
+     * Visual size of the spinner.
+     * @default "m"
+     */
+    size = "m";
+    /**
+     * Spinner style variant.
+     * @default "default"
+     */
+    variant = "default";
+    /**
+     * Renders the spinner in inverted color for dark backgrounds.
+     * @default false
+     */
+    inverted = false;
+    /**
+     * Accessible label announced by assistive technologies.
+     * @default null
+     */
+    ariaLabelText;
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-spinner", await framework);
+        }
+    }
+    render() {
+        return (h("div", { key: '4f82b1cb70a27997e75205640f40a0419a9123ab', role: "status", "aria-label": this.ariaLabelText || "Loading", class: this.getClassNames() }, h("div", { key: 'af98d8ecdd1bd3ea1a0d45ae2130e71a754d5fc3', class: `${this.variant !== "brand" ? "border" : ""} ${this.inverted ? "inverted" : ""}` }), this.variant === "brand" && (h("div", { key: '252f35fe1c3834f0720ee666c9afa73418e1aa75', class: `semiconductor ${this.inverted ? "inverted" : ""} ${this.getSizeClass()}` }, h("svg", { key: '8920a5b70f54a29660ff18d7ddd7bc4004e118f7', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '006a15f426ea4bfb4e1dd19aa2e3aaf134ec1638', id: "spinner/conductor" }, h("path", { key: '60cb36fd03f0ca71407f725b0d17c577630dffb5', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" })))))));
+    }
+    getSizeClass() {
+        return this.size;
+    }
+    getClassNames() {
+        return classNames("spinner", this.getSizeClass());
+    }
+    static get is() { return "ifx-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spinner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"s\" | \"m\"",
+                    "resolved": "\"m\" | \"s\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"m\""
+                        }],
+                    "text": "Visual size of the spinner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"m\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"default\" | \"brand\"",
+                    "resolved": "\"brand\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"default\""
+                        }],
+                    "text": "Spinner style variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"default\""
+            },
+            "inverted": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Renders the spinner in inverted color for dark backgrounds."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inverted",
+                "defaultValue": "false"
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Accessible label announced by assistive technologies."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/status/status.css

@@ -0,0 +1,196 @@
+:host {
+  display: inline-block;
+}
+
+.container {
+  display: flex;
+  min-height: 1.25em;
+  align-items: center;
+  padding: 0 8px;
+  border-radius: 9999px;
+  font-family: var(--ifx-font-family);
+}
+.container.no-border {
+  padding: 0;
+}
+.container.border-engineering-100 {
+  border: 1px solid #f7f7f7;
+}
+.container.border-engineering-200 {
+  border: 1px solid #eeeded;
+}
+.container.border-engineering-300 {
+  border: 1px solid #bfbbbb;
+}
+.container.border-engineering-400 {
+  border: 1px solid #8d8786;
+}
+.container.border-engineering-500 {
+  border: 1px solid #575352;
+}
+.container.border-engineering-600 {
+  border: 1px solid #3c3a39;
+}
+.container.border-ocean-100 {
+  border: 1px solid #dff4f3;
+}
+.container.border-ocean-200 {
+  border: 1px solid #b8deda;
+}
+.container.border-ocean-300 {
+  border: 1px solid #6cb4ad;
+}
+.container.border-ocean-400 {
+  border: 1px solid #3b9b91;
+}
+.container.border-ocean-500 {
+  border: 1px solid #0a8276;
+}
+.container.border-ocean-600 {
+  border: 1px solid #08665c;
+}
+.container.border-ocean-700 {
+  border: 1px solid #06534b;
+}
+.container.border-red-500 {
+  border: 1px solid #cd002f;
+}
+.container.border-red-600 {
+  border: 1px solid #a2001e;
+}
+.container.border-red-700 {
+  border: 1px solid #900021;
+}
+.container.border-orange-500 {
+  border: 1px solid #e16b25;
+}
+.container.border-green-500 {
+  border: 1px solid #4ca460;
+}
+.container.border-lawn-400 {
+  border: 1px solid #b9d257;
+}
+.container.border-lawn-500 {
+  border: 1px solid #9bba43;
+}
+.container.border-lawn-700 {
+  border: 1px solid #3c6c0f;
+}
+.container.border-berry-400 {
+  border: 1px solid #be3283;
+}
+.container.border-berry-500 {
+  border: 1px solid #9c216e;
+}
+.container.border-sun-400 {
+  border: 1px solid #ff9737;
+}
+.container.border-sun-500 {
+  border: 1px solid #f97414;
+}
+.container.border-sand-400 {
+  border: 1px solid #fbe273;
+}
+.container.border-sand-500 {
+  border: 1px solid #fcd442;
+}
+
+.text {
+  margin: 0;
+  padding-left: 4px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  display: inline;
+  color: #1d1d1d;
+}
+
+.dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+}
+
+.dot.engineering-100 {
+  background-color: #f7f7f7;
+}
+.dot.engineering-200 {
+  background-color: #eeeded;
+}
+.dot.engineering-300 {
+  background-color: #bfbbbb;
+}
+.dot.engineering-400 {
+  background-color: #8d8786;
+}
+.dot.engineering-500 {
+  background-color: #575352;
+}
+.dot.engineering-600 {
+  background-color: #3c3a39;
+}
+.dot.ocean-100 {
+  background-color: #dff4f3;
+}
+.dot.ocean-200 {
+  background-color: #b8deda;
+}
+.dot.ocean-300 {
+  background-color: #6cb4ad;
+}
+.dot.ocean-400 {
+  background-color: #3b9b91;
+}
+.dot.ocean-500 {
+  background-color: #0a8276;
+}
+.dot.ocean-600 {
+  background-color: #08665c;
+}
+.dot.ocean-700 {
+  background-color: #06534b;
+}
+.dot.red-500 {
+  background-color: #cd002f;
+}
+.dot.red-600 {
+  background-color: #a2001e;
+}
+.dot.red-700 {
+  background-color: #900021;
+}
+.dot.orange-500 {
+  background-color: #e16b25;
+}
+.dot.green-500 {
+  background-color: #4ca460;
+}
+.dot.lawn-400 {
+  background-color: #b9d257;
+}
+.dot.lawn-500 {
+  background-color: #9bba43;
+}
+.dot.lawn-700 {
+  background-color: #3c6c0f;
+}
+.dot.berry-400 {
+  background-color: #be3283;
+}
+.dot.berry-500 {
+  background-color: #9c216e;
+}
+.dot.sun-400 {
+  background-color: #ff9737;
+}
+.dot.sun-500 {
+  background-color: #f97414;
+}
+.dot.sand-400 {
+  background-color: #fbe273;
+}
+.dot.sand-500 {
+  background-color: #fcd442;
+}

package/dist/collection/components/status/status.js

@@ -0,0 +1,102 @@
+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 Status {
+    el;
+    /** Text label displayed inside the status component. */
+    label;
+    /** If true, shows a border around the status. */
+    border = false;
+    /** Color token used for the status (e.g. orange-500). */
+    color = "orange-500";
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-status", await framework);
+        }
+    }
+    render() {
+        const effectiveColor = this.color?.trim() ? this.color : "orange-500";
+        const containerClass = this.border
+            ? `container border-${effectiveColor}`
+            : "container no-border";
+        return (h("div", { key: 'b9b200e59ded91df57552850600ddceea5351ff8', role: "status", class: containerClass }, h("span", { key: '4d23f0e614f6c36c81fb132d2ab2e62775cbe483', class: `dot ${effectiveColor}` }), h("p", { key: 'd6fc99d444e7652d51327949c7028fbcd69c163f', class: "text" }, this.label)));
+    }
+    static get is() { return "ifx-status"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["status.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["status.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text label displayed inside the status component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a border around the status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border",
+                "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color token used for the status (e.g. orange-500)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "\"orange-500\""
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,189 @@
+.step-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 8px;
+  font: 400 1rem/1.5rem "Source Sans 3";
+  font-family: var(--ifx-font-family);
+}
+.step-wrapper.vertical {
+  flex-direction: row;
+  gap: 12px;
+  width: unset;
+  height: 100%;
+}
+.step-wrapper.vertical .step-icon-wrapper {
+  flex-direction: column;
+  width: unset;
+  height: 100%;
+}
+.step-wrapper.compact {
+  gap: 0;
+  max-width: 100%;
+}
+.step-wrapper.compact .step-label {
+  max-width: 100%;
+  cursor: auto;
+  align-self: flex-start;
+  color: #575352;
+}
+.step-wrapper.compact.indicator-left {
+  align-items: flex-end;
+  text-align: right;
+}
+.step-wrapper.compact.indicator-right {
+  align-items: flex-start;
+}
+.step-wrapper .step-label {
+  max-width: 90%;
+  color: #bfbbbb;
+  word-wrap: break-word;
+}
+.step-wrapper .step-label.curr-label {
+  font: 600 1.25rem/1.75rem "Source Sans 3";
+  font-family: var(--ifx-font-family);
+}
+.step-wrapper .step-label:focus {
+  outline: 2px solid #0a8276;
+  outline-offset: 2px;
+}
+.step-wrapper .step-label.next-label {
+  font: 400 0.75rem/1rem "Source Sans 3";
+  font-family: var(--ifx-font-family);
+}
+.step-wrapper .step-label :hover {
+  color: #bfbbbb;
+}
+.step-wrapper.first-step .step-connector-l {
+  height: 0px;
+}
+.step-wrapper.last-step .step-connector-r {
+  height: 0px;
+}
+.step-wrapper.vertical.first-step .step-connector-l, .step-wrapper.vertical.last-step .step-connector-r {
+  width: 0px;
+}
+.step-wrapper.complete .step-connector-l, .step-wrapper.complete .step-connector-r, .step-wrapper.complete .step-icon {
+  background: #0a8276;
+}
+.step-wrapper.complete .step-connector-l.active, .step-wrapper.complete .step-connector-l.error, .step-wrapper.complete .step-connector-r.active, .step-wrapper.complete .step-connector-r.error, .step-wrapper.complete .step-icon.active, .step-wrapper.complete .step-icon.error {
+  background: #bfbbbb;
+}
+.step-wrapper.complete:not(.disabled) .step-label {
+  cursor: pointer;
+  color: #1d1d1d;
+}
+.step-wrapper.complete:not(.disabled) .step-label :hover {
+  color: #08665c;
+}
+.step-wrapper.disabled .step-connector-l,
+.step-wrapper.disabled .step-connector-r,
+.step-wrapper.disabled .step-icon {
+  background-color: #bfbbbb;
+}
+.step-wrapper.disabled .step-label,
+.step-wrapper.disabled .step-label :hover {
+  color: #bfbbbb;
+}
+.step-wrapper.active .step-connector-l,
+.step-wrapper.active .step-connector-r,
+.step-wrapper.active .step-icon {
+  background: #0a8276;
+}
+.step-wrapper.active .step-connector-l.active, .step-wrapper.active .step-connector-l.error,
+.step-wrapper.active .step-connector-r.active,
+.step-wrapper.active .step-connector-r.error,
+.step-wrapper.active .step-icon.active,
+.step-wrapper.active .step-icon.error {
+  background: #bfbbbb;
+}
+.step-wrapper.active .step-label,
+.step-wrapper.active .step-label :hover {
+  color: #1d1d1d;
+}
+.step-wrapper.active.complete .step-label {
+  cursor: auto;
+}
+.step-wrapper.clickable:not(.active) .step-label {
+  cursor: pointer;
+}
+.step-wrapper.error:not(.active) {
+  margin: auto;
+  color: #cd002f;
+}
+.step-wrapper.error:not(.active) .step-label {
+  color: #cd002f;
+}
+.step-wrapper.error:not(.active) .step-label :hover {
+  color: #0a8276;
+}
+.step-wrapper.disabled .step-label {
+  cursor: auto;
+}
+.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,
+.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,
+.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon {
+  background: #08665c;
+}
+.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active, .step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,
+.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,
+.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,
+.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,
+.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error {
+  background: #bfbbbb;
+}
+.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label {
+  color: #08665c;
+}
+
+.active-indic {
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  background: white;
+}
+
+.step-icon-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.step-icon {
+  width: 24px;
+  height: 24px;
+  background-color: #bfbbbb;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.error-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.step-connector-r,
+.step-connector-l {
+  height: 2px;
+  min-width: 40px;
+  flex-grow: 1;
+  background-color: #bfbbbb;
+}
+
+.vertical .step-connector-r,
+.vertical .step-connector-l {
+  height: unset;
+  min-width: unset;
+  width: 2px;
+  min-height: 40px;
+}