@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/progress-bar/progress-bar.js

@@ -0,0 +1,118 @@
+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 ProgressBar {
+    el;
+    /** Current value of the progress bar (e.g. completion percentage). */
+    value = 0;
+    /** Size of the progress bar (e.g. small, medium, large). */
+    size;
+    /** Whether to show a text label next to the progress bar. */
+    showLabel = false;
+    internalValue;
+    valueChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.internalValue = newValue;
+        }
+    }
+    componentWillLoad() {
+        this.internalValue = this.value;
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-progress-bar", await framework);
+        }
+    }
+    render() {
+        return (h("div", { key: 'b8a95a77fbd9b4681de1b92b434957b0c680e22a', role: "progressbar", "aria-valuenow": this.internalValue, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": `Progress: ${this.internalValue}%`, class: `progress-bar ${this.size}` }, h("div", { key: '01d282d3921f4270e1088f8b13d5f4e0e1b4e63a', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && (h("span", { key: '8fc8c0bf257e0b47a96f60a77367dfdfff82a61a', class: "label" }, `${this.internalValue}%`)))));
+    }
+    static get is() { return "ifx-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value of the progress bar (e.g. completion percentage)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the progress bar (e.g. small, medium, large)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a text label next to the progress bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}

package/dist/collection/components/radio-button/radio-button.css

@@ -0,0 +1,157 @@
+:host {
+  display: inline-flex;
+  --_ifx-fallback-display: none !important;
+}
+
+._ifx-radiobutton-fallback {
+  display: var(--_ifx-fallback-display);
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  border: 0 !important;
+}
+
+.radioButton__container {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+  gap: 8px;
+  cursor: pointer;
+  font-family: var(--ifx-font-family);
+  outline: none;
+}
+.radioButton__container.readOnly {
+  cursor: default;
+  pointer-events: none;
+}
+.radioButton__container.readOnly .radioButton__wrapper {
+  border-color: #bfbbbb;
+}
+.radioButton__container.readOnly .radioButton__wrapper.checked {
+  border-color: #bfbbbb;
+}
+.radioButton__container.readOnly .radioButton__wrapper.checked::after {
+  background-color: #575352;
+}
+.radioButton__container.disabled {
+  cursor: default;
+}
+.radioButton__container.disabled .radioButton__wrapper {
+  background-color: #bfbbbb;
+  border-color: #bfbbbb;
+}
+.radioButton__container.disabled .radioButton__wrapper:hover {
+  background-color: #bfbbbb;
+}
+.radioButton__container.disabled .radioButton__wrapper.checked {
+  background-color: #ffffff;
+  border-color: #bfbbbb;
+}
+.radioButton__container.disabled .radioButton__wrapper.checked::after {
+  background-color: #bfbbbb;
+}
+.radioButton__container.disabled .radioButton__wrapper.checked .radioButton__wrapper-mark {
+  background-color: #bfbbbb;
+}
+.radioButton__container.disabled .radioButton__wrapper.checked:hover {
+  border-color: #bfbbbb;
+}
+.radioButton__container.disabled .radioButton__wrapper.checked:hover .radioButton__wrapper-mark {
+  background-color: #bfbbbb;
+}
+.radioButton__container.disabled .label {
+  color: #bfbbbb;
+}
+.radioButton__container:not(.disabled) .radioButton__wrapper.error {
+  border-color: #cd002f;
+}
+.radioButton__container:not(.disabled) .radioButton__wrapper.error:hover, .radioButton__container:not(.disabled) .radioButton__wrapper.error:focus-visible {
+  border-color: #cd002f;
+}
+.radioButton__container:not(.disabled) .radioButton__wrapper.error.checked::after {
+  border-color: #cd002f;
+  background-color: #cd002f;
+}
+.radioButton__container:focus:not(.disabled) .radioButton__wrapper::before {
+  content: "";
+  position: absolute;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid #0a8276;
+  border-radius: 50%;
+}
+.radioButton__container.m .radioButton__wrapper {
+  width: 24px;
+  height: 24px;
+}
+.radioButton__container .radioButton__wrapper {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  display: block;
+  border-radius: 50%;
+  background-color: #ffffff;
+  border: 1px solid #575352;
+}
+.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #0a8276;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-color: rgba(0, 0, 0, 0);
+}
+.radioButton__container .radioButton__wrapper:hover {
+  background-color: #eeeded;
+}
+.radioButton__container .radioButton__wrapper.checked {
+  border-color: #0a8276;
+}
+.radioButton__container .radioButton__wrapper.checked::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 10px;
+  height: 10px;
+  background-color: #0a8276;
+  border-radius: 50%;
+}
+.radioButton__container .radioButton__wrapper.checked:hover {
+  border-color: #08665c;
+}
+.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark {
+  background-color: #08665c;
+}
+.radioButton__container .label {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #1d1d1d;
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+}
+.radioButton__container .label.label-m {
+  height: 24px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}

package/dist/collection/components/radio-button/radio-button.js

@@ -0,0 +1,334 @@
+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 RadioButton {
+    el;
+    initialChecked = false;
+    /** If true, the checkbox is disabled and not interactive. */
+    disabled = false;
+    /** Value submitted when the checkbox is checked. */
+    value = "on";
+    /** If true, the checkbox is shown in an error state. */
+    error = false;
+    /** Size of the checkbox (small or medium). */
+    size = "s";
+    /** Name attribute used when submitting the checkbox in a form. */
+    name;
+    /** Whether the checkbox is currently checked (can be updated). */
+    checked;
+    hasSlot = false;
+    /** Returns the current checked state of the checkbox. */
+    async isChecked() {
+        return !!this.checked;
+    }
+    inputElement;
+    internals;
+    /** Fired when the checked state of the checkbox changes. */
+    ifxChange;
+    /** Fired when the checkbox enters or leaves an error state. */
+    ifxError;
+    componentWillLoad() {
+        // Initial state
+        this.checked = !!this.checked;
+        this.initialChecked = this.checked;
+        this.hasSlot =
+            !!this.el.querySelector("[slot]") || this.el.innerHTML.trim() !== "";
+        this.updateFormValue();
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-radio-button", await framework);
+        }
+    }
+    handleCheckedChange(newValue) {
+        const normalizedValue = !!newValue;
+        if (newValue !== normalizedValue) {
+            this.checked = normalizedValue;
+            return;
+        }
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.checked) {
+            this.internals.setFormValue(this.value);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    formResetCallback() {
+        this.checked = this.initialChecked;
+        this.updateFormValue();
+    }
+    formStateRestoreCallback(state, _mode) {
+        if (state) {
+            this.checked = true;
+            this.updateFormValue();
+        }
+        else {
+            this.checked = false;
+            this.internals.setFormValue(null);
+        }
+    }
+    errorChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.ifxError.emit(newValue);
+        }
+    }
+    handleRadioButtonClick(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        const wasChecked = !!this.checked;
+        this.inputElement.click();
+        const nextChecked = !!this.inputElement.checked;
+        if (nextChecked === wasChecked) {
+            return;
+        }
+        this.checked = nextChecked;
+        this.ifxChange.emit(nextChecked);
+        const changeEvent = new CustomEvent("change", {
+            bubbles: true,
+            composed: true,
+            detail: { checked: nextChecked },
+        });
+        this.el.dispatchEvent(changeEvent);
+    }
+    handleKeyDown(ev) {
+        if ([" ", "Enter"].includes(ev.key)) {
+            ev.preventDefault();
+            this.handleRadioButtonClick(new PointerEvent("click"));
+        }
+    }
+    handleExternalChange(event) {
+        const target = event.target;
+        if (target === this.el ||
+            target.tagName.toLowerCase() !== "ifx-radio-button")
+            return;
+        if (target.getAttribute("name") === this.name) {
+            this.checked = false;
+        }
+    }
+    render() {
+        return (h("div", { key: 'b8572f4e16f7fdda8ab9a02adcd25a351673d018', class: `radioButton__container ${this.size} ${this.disabled ? "disabled" : ""}`, onClick: (e) => this.handleRadioButtonClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "radio", "aria-checked": this.checked ? "true" : "false", "aria-disabled": this.disabled ? "true" : "false", tabIndex: this.disabled ? -1 : 0 }, h("div", { key: '4c0aa67501a86e7f96e011fcea19391498bd8e4e', class: `radioButton__wrapper 
+            ${this.checked ? "checked" : ""}  
+            ${this.error ? "error" : ""}` }, this.checked && (h("div", { key: '465028120ead84ceeeff02580a1e6dec1735750b', class: "radioButton__wrapper-mark" }))), this.hasSlot && (h("div", { key: 'b06496317d3f71e372f2f1a80db7f9e954ee58be', class: `label ${this.size === "m" ? "label-m" : ""}` }, h("slot", { key: '8d8741b70b080ab8585c7bfed648086bd66104af' }))), h("input", { key: '52c44c47f9397a171491d73d0e3bb294b1e3373a', type: "radio", hidden: true, ref: (el) => (this.inputElement = el), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+    }
+    static get is() { return "ifx-radio-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the checkbox is disabled and not interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value submitted when the checkbox is checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"on\""
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the checkbox is shown in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"s\" | \"m\"",
+                    "resolved": "\"m\" | \"s\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the checkbox (small or medium)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "\"s\""
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute used when submitting the checkbox in a form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is currently checked (can be updated)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxChange",
+                "name": "ifxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the checked state of the checkbox changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxError",
+                "name": "ifxError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the checkbox enters or leaves an error state."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isChecked": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns the current checked state of the checkbox.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }, {
+                "propName": "error",
+                "methodName": "errorChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "change",
+                "method": "handleExternalChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/radio-button-group/radio-button-group.css

@@ -0,0 +1,69 @@
+.radio-button-group-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.radio-button-group {
+  display: flex;
+  gap: 8px;
+}
+.radio-button-group.horizontal {
+  flex-direction: row;
+  column-gap: 12px;
+}
+.radio-button-group.vertical {
+  flex-direction: column;
+  row-gap: 12px;
+}
+
+.group-label {
+  font-family: var(--ifx-font-family);
+  font-size: 1rem;
+  color: #1d1d1d;
+  line-height: 1.5rem;
+  font-weight: 400;
+  margin-bottom: 8px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+
+.group-label .required {
+  color: #575352;
+  margin-left: 4px;
+}
+
+.group-label .required.error {
+  color: #cd002f;
+}
+
+.caption {
+  margin-top: 8px;
+  align-self: flex-start;
+  display: flex;
+  width: 100%;
+  column-gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+}
+.caption.default {
+  color: #1d1d1d;
+}
+.caption.error {
+  color: #cd002f;
+}
+
+.caption-text {
+  font-family: var(--ifx-font-family);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  flex: 1;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+
+.caption-icon {
+  flex: 0;
+  display: flex;
+}