@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/text-field/text-field.js

@@ -0,0 +1,514 @@
+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 TextField {
+    inputElement;
+    initialValue = "";
+    el;
+    /** Placeholder text shown when the field is empty. */
+    placeholder = "Placeholder";
+    /** Name attribute used when submitting the text field in a form. */
+    name;
+    /** Current value of the text field (can be updated programmatically). */
+    value = "";
+    /** If true, shows the text field in an error state. */
+    error = false;
+    /** Label text shown above the text field. */
+    label = "";
+    /** Optional icon shown inside or next to the text field. */
+    icon = "";
+    /** Helper text shown below the text field. */
+    caption = "";
+    /** Size of the text field (e.g. s, m, l). */
+    size = "m";
+    /** Whether a value is required (used for validation). */
+    required = false;
+    /** If true, shows the text field in a success/valid state. */
+    success = false;
+    /** If true, the text field is disabled and not interactive. */
+    disabled = false;
+    /** If true, the text field is read-only but focusable. */
+    readOnly = false;
+    /** Maximum number of characters allowed. */
+    maxlength;
+    /** If true, shows a delete/clear icon to remove the current value. */
+    showDeleteIcon = false;
+    /** Native autocomplete attribute value. */
+    autocomplete = "on";
+    /** Input type for the field (text or password). */
+    type = "text";
+    /** Internal ID used to link label and input elements. */
+    internalId = "text-field";
+    internalType;
+    /** Fired when the user types or the value changes. */
+    ifxInput;
+    // @Prop({ reflect: true })
+    // resetOnSubmit: boolean = false;
+    internals;
+    valueWatcher(newValue) {
+        const normalizedValue = newValue ?? "";
+        if (this.inputElement && normalizedValue !== this.inputElement.value) {
+            this.inputElement.value = normalizedValue;
+        }
+        this.syncFormValue(normalizedValue);
+    }
+    syncFormValue(value = this.value ?? "") {
+        this.internals.setFormValue(value);
+    }
+    /** Resets the text field value and clears the underlying input element. */
+    async reset() {
+        this.value = "";
+        if (this.inputElement) {
+            this.inputElement.value = "";
+        }
+        this.syncFormValue("");
+    }
+    formResetCallback() {
+        this.value = this.initialValue;
+        if (this.inputElement) {
+            this.inputElement.value = this.initialValue;
+        }
+        this.syncFormValue(this.initialValue);
+    }
+    handleDeleteContent() {
+        if (!this.disabled && !this.readOnly) {
+            this.reset();
+            this.ifxInput.emit(this.value);
+        }
+    }
+    handleInput() {
+        const query = this.inputElement.value;
+        this.value = query;
+        this.ifxInput.emit(this.value);
+    }
+    handleTypeProp() {
+        this.internalType =
+            this.type === "text" || this.type === "password" ? this.type : "text";
+    }
+    componentWillLoad() {
+        this.handleTypeProp();
+        this.initialValue = this.value ?? "";
+        this.syncFormValue(this.initialValue);
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-text-field", await framework);
+        }
+    }
+    render() {
+        return (h("div", { key: 'e036d5d5ae2432cfab635503a23f4c7602e11413', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? "readOnly" : ""} ${this.disabled && !this.error ? "disabled" : ""}` }, h("div", { key: '55c06b14b80e2be6d04f3a13beabe09de9653a1a', class: "textInput__top-wrapper" }, this.label && (h("label", { key: 'a86b27abe030413baebbf7661eb0eca81678ac65', htmlFor: this.internalId }, h("span", { key: '95ae82198df9bf88085eef21dd890aacbc9690a0' }, this.label), this.required && (h("span", { key: '093fae8e12942b09dc11272538963b1865d827d7', class: `required ${this.error && !this.readOnly ? "error" : ""}` }, "*"))))), h("div", { key: '4127821b00f0561df74b22aca8fd7018929f71e3', class: "textInput__bottom-wrapper" }, h("div", { key: '803c3309e58f2ea6be0422b221c9dcdd405d058b', class: "input-container" }, this.icon && h("ifx-icon", { key: 'bcaf9640edafbd1a06030580bb7acd47ee6e35dc', class: "input-icon", icon: this.icon }), h("input", { key: 'd60901bed92b149d062115c874ece8ab00618e73', ref: (el) => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? "icon" : ""}
+                ${this.error ? "error" : ""} 
+								${this.readOnly ? "readOnly" : ""} 
+              ${this.size === "s" ? "input-s" : ""}
+              ${this.success ? "success" : ""}` }), this.showDeleteIcon && this.value && (h("ifx-icon", { key: 'aec05d3c8c4bc167891570bc642f11b410947c97', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && (h("div", { key: 'bc4721ea2a96a58da3f5da91a52b9feb84b3ce64', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? "error" : ""} ${this.disabled && !this.readOnly && !this.error ? "disabled" : ""}` }, this.caption)))));
+    }
+    static get is() { return "ifx-text-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["text-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["text-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when the field is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "\"Placeholder\""
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute used when submitting the text field in a form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value of the text field (can be updated programmatically)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows the text field in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text shown above the text field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "\"\""
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon shown inside or next to the text field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "\"\""
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text shown below the text field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption",
+                "defaultValue": "\"\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the text field (e.g. s, m, l)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"m\""
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether a value is required (used for validation)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "success": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows the text field in a success/valid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "success",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the text field is disabled and not interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the text field is read-only but focusable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of characters allowed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            },
+            "showDeleteIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a delete/clear icon to remove the current value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-delete-icon",
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native autocomplete attribute value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "\"on\""
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"text\" | \"password\"",
+                    "resolved": "\"password\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type for the field (text or password)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"text\""
+            },
+            "internalId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal ID used to link label and input elements."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "internal-id",
+                "defaultValue": "\"text-field\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalType": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxInput",
+                "name": "ifxInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the user types or the value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the text field value and clears the underlying input element.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueWatcher"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/textarea/textarea.css

@@ -0,0 +1,97 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.wrapper__label {
+  color: #1d1d1d;
+  font: 400 1rem/1.5rem "Source Sans 3";
+  font-family: var(--ifx-font-family);
+}
+.wrapper__label .required {
+  margin-left: 4px;
+}
+.wrapper__label .required.error {
+  color: #CD002F;
+}
+
+:host(.wrapper--disabled) .wrapper__label {
+  color: #bfbbbb;
+}
+
+.wrapper__textarea {
+  width: 100%;
+}
+.wrapper__textarea.fullWidth {
+  width: 100%;
+}
+.wrapper__textarea.fullWidth textarea {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.wrapper__textarea textarea {
+  border: 1px solid #8d8786;
+  border-radius: 1px;
+  padding: 8px 16px;
+  background-color: #ffffff;
+  color: #1d1d1d;
+  font: 400 1rem/1.5rem "Source Sans 3";
+  font-family: var(--ifx-font-family);
+  transition: all 100ms ease;
+  transition-property: border-color;
+}
+.wrapper__textarea textarea:hover {
+  border: 1px solid #575352;
+}
+.wrapper__textarea textarea:focus-within {
+  outline: none;
+  border: 1px solid #0a8276;
+}
+
+:host(.wrapper--error) .wrapper__textarea textarea {
+  border: 1px solid #cd002f;
+}
+
+:host(.wrapper--success) .wrapper__textarea textarea {
+  border: 1px solid #4ca460;
+}
+:host(.wrapper--success) .wrapper__textarea textarea:focus-within {
+  outline: none;
+}
+
+:host(.wrapper--disabled) .wrapper__textarea textarea {
+  border: 1px solid #bfbbbb;
+  background-color: #bfbbbb;
+  color: #ffffff;
+}
+:host(.wrapper--disabled) .wrapper__textarea textarea::placeholder {
+  color: #ffffff;
+}
+
+.wrapper__caption {
+  color: #1d1d1d;
+  font: 400 0.75rem/1rem "Source Sans 3";
+  font-family: var(--ifx-font-family);
+}
+
+:host(.wrapper--error) .wrapper__caption {
+  color: #cd002f;
+}
+
+:host(.wrapper--disabled) .wrapper__caption {
+  color: #bfbbbb;
+}
+
+:host(.wrapper--readonly) .wrapper__textarea textarea {
+  border: none;
+  border-bottom: 1px solid var(--color-engineering-300, #BFBBBB);
+  padding-left: 0;
+}
+:host(.wrapper--readonly) .wrapper__textarea textarea::placeholder {
+  color: #1d1d1d;
+}
+:host(.wrapper--readonly) .wrapper__textarea textarea:focus-within {
+  outline: none;
+}