@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/date-picker/date-picker.js

@@ -0,0 +1,522 @@
+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 DatePicker {
+    inputId = `ifx-date-picker-${++datePickerId}`;
+    el;
+    /**
+     * Size of the date picker input
+     */
+    size = "s";
+    /**
+     * Error state of the date picker
+     */
+    error = false;
+    /**
+     * Success state of the date picker
+     */
+    success = false;
+    /**
+     * Whether the date picker is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the date picker is read-only
+     */
+    readOnly = false;
+    /**
+     * Aria label for the date picker input
+     */
+    ariaLabelText;
+    /**
+     * The value of the date picker
+     */
+    value;
+    /**
+     * Type of date input (date, datetime-local, etc.)
+     */
+    type = "date";
+    /**
+     * Maximum allowed date
+     */
+    max;
+    /**
+     * Minimum allowed date
+     */
+    min;
+    /**
+     * Whether the date picker is required
+     */
+    required = false;
+    /**
+     * Label text for the date picker
+     */
+    label;
+    /**
+     * Caption text displayed below the date picker
+     */
+    caption;
+    /**
+     * Autocomplete attribute for the input
+     */
+    autocomplete = "on";
+    /**
+     * Internal state to manage the current value
+     */
+    internalValue;
+    internals;
+    /**
+     * Event emitted when date value changes
+     */
+    ifxDate;
+    handleValueChange(newValue) {
+        this.internalValue = newValue;
+    }
+    /**
+     * Clears the date picker value
+     */
+    async clear() {
+        this.internalValue = "";
+        const input = this.getInput();
+        if (input) {
+            input.classList.remove("has-value");
+        }
+        if (this.type === "datetime-local") {
+            this.ifxDate.emit({
+                day: null,
+                month: null,
+                year: null,
+                hours: null,
+                minutes: null,
+            });
+        }
+        else {
+            this.ifxDate.emit({ day: null, month: null, year: null });
+        }
+    }
+    getInput() {
+        const input = this.el.shadowRoot.querySelector(".date__picker-input");
+        return input;
+    }
+    getDate(e) {
+        const inputValue = e.target.value;
+        this.value = inputValue;
+        this.internalValue = inputValue;
+        const selectedDate = new Date(inputValue);
+        const day = selectedDate.getDate();
+        const month = selectedDate.getMonth() + 1;
+        const year = selectedDate.getFullYear();
+        if (!inputValue) {
+            //this.internals.setFormValue(null);
+            if (this.type === "datetime-local") {
+                const hours = selectedDate.getHours();
+                const minutes = selectedDate.getMinutes();
+                this.ifxDate.emit({ day, month, year, hours, minutes });
+            }
+            else {
+                this.ifxDate.emit({ day, month, year });
+            }
+            return;
+        }
+        const input = this.getInput();
+        input.classList.add("has-value");
+        //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))
+        if (this.type === "datetime-local") {
+            const hours = selectedDate.getHours();
+            const minutes = selectedDate.getMinutes();
+            this.ifxDate.emit({ day, month, year, hours, minutes });
+        }
+        else {
+            this.ifxDate.emit({ day, month, year });
+        }
+    }
+    handleIconKeyDown(e) {
+        if (this.disabled)
+            return;
+        const browserIsFirefox = this.isFirefox();
+        const input = this.getInput();
+        if (e.key === "Enter" && browserIsFirefox) {
+            e.preventDefault();
+            if (input.showPicker) {
+                input.showPicker();
+            }
+        }
+    }
+    isFirefox() {
+        const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
+        return isFirefox;
+    }
+    setFireFoxClasses() {
+        const browserIsFirefox = this.isFirefox();
+        const input = this.getInput();
+        const iconWrapper = this.el.shadowRoot.querySelector(".icon__wrapper");
+        if (browserIsFirefox) {
+            input.classList.add("firefox__classes");
+            iconWrapper.classList.add("firefox__classes");
+        }
+        else if (input.classList.contains("firefox__classes")) {
+            input.classList.remove("firefox__classes");
+            iconWrapper.classList.remove("firefox__classes");
+        }
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-date-picker", await framework);
+        }
+        this.setFireFoxClasses();
+    }
+    componentWillLoad() {
+        this.internalValue = this.value;
+    }
+    // formResetCallback() {
+    //   this.internals.setFormValue(null);
+    // }
+    render() {
+        return (h("div", { key: '606389879ef54f5069e88ca8fb3b029697f592b5', class: `date__picker-container ${this.readOnly ? "readOnly" : this.error ? "error" : this.disabled ? "disabled" : ""}` }, h("label", { key: 'a8ae70f93be2fe3300b234f38580e42c8dcba18d', class: "label__wrapper", htmlFor: this.inputId }, this.label?.trim(), h("span", { key: 'a0541bb99cf6f8b19dbd570195775929063420c5', class: `asterisk ${this.required ? "required" : ""} ${this.error && !this.readOnly ? "error" : ""}` }, "*")), h("div", { key: '674c678306284d59a6b704d9f11a6485f02c1656', class: `input__wrapper ${this.size === "l" ? "large" : "small"} ${this.readOnly ? "readOnly" : !this.error && this.disabled ? "disabled" : ""}` }, h("input", { key: '5c0690be3b7e8c8401c37af9c4439d9956d486e0', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.readOnly ? "readOnly" : ""} ${!this.readOnly && this.error ? "error" : ""} ${!this.readOnly && this.success ? "success" : ""}`, disabled: !this.readOnly && !this.error && this.disabled ? true : undefined, readOnly: this.readOnly, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabelText, max: this.max, min: this.min, value: this.internalValue, required: this.required, onChange: (e) => this.getDate(e) }), h("button", { key: 'a70393132f55ae2828a1c52e68ee55b63496d543', type: "button", class: "icon__wrapper", disabled: this.disabled, "aria-label": "Open date picker", tabIndex: this.isFirefox() ? 0 : -1, onKeyDown: (e) => this.handleIconKeyDown(e) }, h("span", { key: 'dd6d16c479e1d9bb899c0ea966d1b89a78ab0dce', "aria-hidden": "true" }, h("ifx-icon", { key: '009a57c029fe16f869460ede391c5c46fa1a761e', icon: "calendar16" })))), this.caption?.trim() && (h("div", { key: '3cfde155bac1f251b44ebe1fc656c3b4b01900e9', class: "caption__wrapper" }, this.caption.trim()))));
+    }
+    static get is() { return "ifx-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the date picker input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"s\""
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error state of the date picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "success": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Success state of the date picker"
+                },
+                "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": "Whether the date picker is disabled"
+                },
+                "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": "Whether the date picker is read-only"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the date picker input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the date picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of date input (date, datetime-local, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"date\""
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum allowed date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum allowed date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the date picker is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the date picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption text displayed below the date picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autocomplete attribute for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "\"on\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxDate",
+                "name": "ifxDate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when date value changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the date picker value",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+let datePickerId = 0;

package/dist/collection/components/download/download.js

@@ -0,0 +1,65 @@
+import { h } from "@stencil/core";
+import { sanitizeHref } from "../../shared/utils/url-utils";
+export class Download {
+    /** Type of file to download. */
+    tokens = "css";
+    render() {
+        const fileMap = {
+            css: "https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/css-variables.css",
+            scss: "https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/scss-variables.scss",
+            json: "https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-echarts-theme/dds-echarts-theme.json",
+            js: "https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-echarts-theme/dds-echarts-theme.js",
+        };
+        const fileUrl = fileMap[this.tokens];
+        const fileName = this.tokens === "json" || this.tokens === "js"
+            ? `dds-echarts-theme.${this.tokens}`
+            : `infineon-tokens.${this.tokens}`;
+        return (h("ifx-link", { key: '61750b255910d33eb39f460a26eae9b14fcb0da7', onClick: (e) => {
+                e.preventDefault();
+                fetch(fileUrl)
+                    .then((res) => res.blob())
+                    .then((blob) => {
+                    const link = document.createElement("a");
+                    link.href = sanitizeHref(URL.createObjectURL(blob));
+                    link.download = fileName;
+                    link.click();
+                });
+            }, href: fileUrl, download: fileName, class: "download__wrapper", size: "m", variant: "bold" }, h("slot", { key: '785f67a681f4ce24a03ae2d44ad0e06cafa4e4b4' })));
+    }
+    static get is() { return "ifx-download"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./download.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["download.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tokens": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"css\" | \"scss\" | \"json\" | \"js\"",
+                    "resolved": "\"css\" | \"js\" | \"json\" | \"scss\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of file to download."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tokens",
+                "defaultValue": "\"css\""
+            }
+        };
+    }
+}

package/dist/collection/components/dropdown/IOpenable.js

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

package/dist/collection/components/dropdown/dropdown-header/dropdown-header.css

@@ -0,0 +1,18 @@
+.dropdown-header {
+  display: flex;
+  padding: 8px 16px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-bottom: 1px solid #eeeded;
+  font-family: var(--ifx-font-family);
+}
+.dropdown-header span {
+  color: #575352;
+  font-family: var(--ifx-font-family);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  /* 142.857% */
+}

package/dist/collection/components/dropdown/dropdown-header/dropdown-header.js

@@ -0,0 +1,19 @@
+// dropdown-separator.tsx
+import { h } from "@stencil/core";
+export class DropdownHeader {
+    render() {
+        return (h("div", { key: '2272b53b32c6cd9a67c36a463626fa1ebf28cebf', class: "dropdown-header" }, h("span", { key: 'c99f028c2c446edcd80ceb4c13d83329b868f8ea' }, h("slot", { key: 'f1d7a62919f6bd17487e2f5d5f5d263383920675' }))));
+    }
+    static get is() { return "ifx-dropdown-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-header.css"]
+        };
+    }
+}

package/dist/collection/components/dropdown/dropdown-item/dropdown-item.css

@@ -0,0 +1,58 @@
+.dropdown-item {
+  text-decoration: none;
+  color: #1d1d1d;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 8px;
+  font-family: var(--ifx-font-family);
+}
+.dropdown-item:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0a8276;
+}
+.dropdown-item.hide {
+  display: none;
+}
+.dropdown-item span {
+  color: #1d1d1d;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  /* 150% */
+}
+.dropdown-item.small span {
+  font-size: 14px;
+}
+.dropdown-item:hover {
+  cursor: pointer;
+  background-color: #eeeded;
+}
+.dropdown-item:active {
+  background-color: #bfbbbb;
+}
+.dropdown-item.error {
+  color: #cd002f;
+}
+.dropdown-item.error span {
+  color: #cd002f;
+}
+.dropdown-item.disabled {
+  color: #bfbbbb;
+  pointer-events: none;
+}
+.dropdown-item.disabled span {
+  color: #bfbbbb;
+}
+
+.icon {
+  margin-right: 4px;
+}
+
+button.dropdown-item {
+  width: 100%;
+  border: 0;
+  background-color: transparent;
+  text-align: left;
+}