@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,321 @@
+import { Host, 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";
+import { sanitizeHref } from "../../shared/utils/url-utils";
+export class IconButton {
+    el;
+    /**
+     * Visual style of the icon button.
+     * Primary has a solid background, secondary has an outline and tertiary is just the icon with no background or border.
+     * @default "primary"
+     */
+    variant = "primary";
+    /**
+     * Size of the icon button.
+     * Options: xs (20px), s (32px), m (36px) and l (40px).
+     * @default "m"
+     */
+    size = "m";
+    /**
+     * Disables the button and blocks user interaction.
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Icon name rendered by the nested `ifx-icon`.
+     * Refer to the [Icon Library](https://infineon.github.io/infineon-design-system-stencil/storybook/?path=/docs/icon-library--development) for available icons.
+     */
+    icon;
+    updateIcon(newIcon) {
+        this.internalIcon = newIcon;
+    }
+    /**
+     * URL to navigate to; when provided, the component renders as a link.
+     */
+    href;
+    /**
+     * Target for link navigation when `href` is set.
+     * @default "_self"
+     */
+    target = "_self";
+    /**
+     * Visual shape of the icon button.
+     * @default "round"
+     */
+    shape = "round";
+    /**
+     * Accessible name announced by assistive technologies.
+     */
+    ariaLabelText;
+    internalIcon;
+    focusableElement;
+    /**
+     * Sets focus on the icon button. If the button is rendered as a link, it focuses the anchor element; otherwise, it focuses the button element.
+     */
+    async setFocus() {
+        this.focusableElement.focus();
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            event.stopImmediatePropagation();
+        }
+    }
+    componentWillLoad() {
+        this.internalIcon = this.icon;
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-icon-button", await framework);
+        }
+    }
+    render() {
+        return (h(Host, { key: '404fc47f258b000d505050b8b0a9ac13b865ce58', "aria-disabled": this.disabled, "aria-label": this.ariaLabelText }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? sanitizeHref(this.href) : undefined, target: this.target, rel: this.target === "_blank" ? "noopener noreferrer" : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
+    }
+    getVariantClass() {
+        return `${this.variant}` === "secondary"
+            ? `secondary`
+            : `${this.variant}` === "tertiary"
+                ? `tertiary`
+                : `primary`;
+    }
+    getSizeClass() {
+        return ["xs", "s", "m", "l"].includes(this.size) ? this.size : "m";
+    }
+    getClassNames() {
+        const shape = this.shape || "round";
+        return classNames("btn icon-button", `btn-${shape}`, `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? "disabled" : "");
+    }
+    static get is() { return "ifx-icon-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"primary\""
+                        }],
+                    "text": "Visual style of the icon button.\nPrimary has a solid background, secondary has an outline and tertiary is just the icon with no background or border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"primary\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"xs\" | \"s\" | \"m\" | \"l\"",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"m\""
+                        }],
+                    "text": "Size of the icon button.\nOptions: xs (20px), s (32px), m (36px) and l (40px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"m\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Disables the button and blocks user interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name rendered by the nested `ifx-icon`.\nRefer to the [Icon Library](https://infineon.github.io/infineon-design-system-stencil/storybook/?path=/docs/icon-library--development) for available icons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to navigate to; when provided, the component renders as a link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"_self\""
+                        }],
+                    "text": "Target for link navigation when `href` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "\"_self\""
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"round\" | \"square\"",
+                    "resolved": "\"round\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"round\""
+                        }],
+                    "text": "Visual shape of the icon button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "\"round\""
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name announced by assistive technologies."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalIcon": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the icon button. If the button is rendered as a link, it focuses the anchor element; otherwise, it focuses the button element.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "icon",
+                "methodName": "updateIcon"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/icons-preview/icons-preview.css

@@ -0,0 +1,93 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.alert__wrapper {
+  margin-bottom: 40px;
+}
+
+.snippet__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  background-color: white;
+}
+
+.html-wrapper {
+  background: rgb(38, 38, 38);
+  padding: 20px;
+  color: white;
+  font-family: monospace;
+}
+.html-wrapper button {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  background: rgba(0, 0, 0, 0.85);
+  color: #C9CDCF;
+  border: 0 none;
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  font-family: "Nunito Sans";
+  font-weight: 700;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  margin-left: -1px;
+  border-radius: 4px 0 0 0;
+  cursor: pointer;
+}
+.html-wrapper .component-name {
+  color: #A8FF60;
+}
+.html-wrapper .attribute-name {
+  color: rgb(150, 203, 254);
+}
+.html-wrapper .attribute-value {
+  color: rgb(180, 116, 221);
+}
+
+.preview__container {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.preview__container .no-results {
+  width: 100%;
+  text-align: center;
+}
+.preview__container .preview__container-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #f1f1f1;
+  padding: 2px;
+  width: 50px;
+  height: 50px;
+  position: relative;
+}
+.preview__container .preview__container-item:active {
+  border-color: #378375;
+}
+.preview__container .preview__container-item:hover {
+  cursor: pointer;
+}
+.preview__container .preview__container-item.copied::after {
+  z-index: 50;
+  content: "copied!";
+  position: absolute;
+  top: 0;
+  left: 50px;
+  background-color: #000;
+  color: white;
+  padding: 3px;
+  border-radius: 4px;
+}

package/dist/collection/components/icons-preview/icons-preview.js

@@ -0,0 +1,78 @@
+import { icons } from "@infineon/infineon-icons";
+import { searchIconMetadata } from "@infineon/infineon-icons/metadata";
+import { h } from "@stencil/core";
+export class IconsPreview {
+    iconsArray = [];
+    isCopied = false;
+    copiedIndex;
+    copiedIcon = null;
+    htmlTag = '<ifx-icon icon="calendar-16"></ifx-icon>';
+    iconName = `""`;
+    searchTerm = "";
+    el;
+    handleCopiedText() {
+        this.isCopied = true;
+        setTimeout(() => {
+            this.isCopied = false;
+        }, 2000);
+    }
+    copyIconText(icon) {
+        this.htmlTag = `<ifx-icon icon="${icon}"></ifx-icon>`;
+        this.iconName = `"${icon}"`;
+        this.copiedIcon = icon;
+    }
+    copyHtmlString() {
+        const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;
+        navigator.clipboard.writeText(copiedTag);
+        this.handleCopiedText();
+    }
+    get filteredIcons() {
+        const term = this.searchTerm.toLowerCase().trim();
+        if (!term)
+            return this.iconsArray;
+        const nameMatches = this.iconsArray.filter((icon) => icon.toLowerCase().includes(term));
+        const metadataMatches = searchIconMetadata(term)
+            .map((icon) => icon.name)
+            .filter((iconName) => this.iconsArray.includes(iconName));
+        return Array.from(new Set([...nameMatches, ...metadataMatches]));
+    }
+    handleIconFilter() {
+        const searchField = this.el.shadowRoot.querySelector("#search__field");
+        searchField.addEventListener("ifxInput", (e) => {
+            this.searchTerm = e.detail;
+        });
+    }
+    componentWillLoad() {
+        this.iconsArray = Object.keys(icons);
+    }
+    componentDidLoad() {
+        this.handleIconFilter();
+    }
+    render() {
+        return (h("div", { key: 'b02b1f1323fd06e44931ebc42f02c1dfdf0198b5', class: "container" }, h("div", { key: 'c90c09279abbd80fef32ed2d1008f1cfd3cf3e94', class: "alert__wrapper" }, h("ifx-notification", { key: 'e59548d5e58170be8ee74f434b39d46f8c011429', icon: "c-check-16", variant: "neutral", "link-text": "Figma icon library", "link-href": "https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0", "link-target": "_blank" }, "You can also find the UI icons in Figma for use in mockups.")), h("div", { key: '991880bc8794cd0a106f7fb7b3593cec4176d67c', class: "snippet__wrapper" }, h("div", { key: '59f798134195cf2f893b6f5f6aa3853071ed5856', class: "search__wrapper" }, h("ifx-search-field", { key: 'b4ffe92f8475c4f17e006df64c1a77cf563adc14', id: "search__field", size: "l", "show-delete-icon": "true", value: "", autocomplete: "on", placeholder: "Search icon" })), h("div", { key: '2916c5a23582baacdbdc8544478033872ff2c43c', class: "html-wrapper" }, h("span", { key: 'dee9efec64144021b5bac68021364a96e0d54fc8', class: "html-tag" }, "<"), h("span", { key: '169b58cd1970bb9e2366c9dbed9426cfb6b36369', class: "component-name" }, "ifx-icon"), h("span", { key: '645b55167664e9fded8fa0cb48de7a3274768608', class: "attribute-name" }, " icon"), "=", h("span", { key: '12d07662829be78606bc8ca03a7ba595e4ed219f', class: "attribute-value" }, this.iconName), h("span", { key: '65bd3808d810e9bdbdf62725186598f04263f163', class: "html-tag" }, ">"), h("span", { key: '4f414eead29cddb3106c0814bc055641f4b01c55', class: "html-tag" }, "</"), h("span", { key: '72154179cb02059d6beb31a6d1910e7cb0b91c35', class: "component-name" }, "ifx-icon"), h("span", { key: 'aed26d01ac4f1cd9d149a824dd6e983553329725', class: "html-tag" }, ">"), h("button", { key: 'a00d392ded0b1089b0851e0bfd6eda01cf9ebb30', onClick: () => this.copyHtmlString() }, this.isCopied ? "Copied" : "Copy"))), h("div", { key: 'ba272a76d0efc11155a399bade624246a31eb1da', class: "preview__container" }, this.filteredIcons.map((icon) => (h("div", { key: icon, class: `preview__container-item ${this.isCopied && this.copiedIcon === icon ? "copied" : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon })))), this.filteredIcons.length === 0 && (h("div", { key: '55a27417d7e66ce7f52bbe4c3d17bf307940eb8f', class: "no-results" }, "No icons found matching \"", this.searchTerm, "\"")))));
+    }
+    static get is() { return "ifx-icons-preview"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./icons-preview.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icons-preview.css"]
+        };
+    }
+    static get states() {
+        return {
+            "iconsArray": {},
+            "isCopied": {},
+            "copiedIndex": {},
+            "copiedIcon": {},
+            "htmlTag": {},
+            "iconName": {},
+            "searchTerm": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/indicator/indicator.css

@@ -0,0 +1,45 @@
+:host {
+  display: inline-flex;
+  font-family: var(--ifx-font-family);
+}
+
+.indicator__container {
+  font-family: var(--ifx-font-family);
+}
+.indicator__container .dot__wrapper {
+  display: flex;
+  width: 8px;
+  height: 8px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background-color: #0a8276;
+}
+.indicator__container .number__container {
+  height: 16px;
+  display: inline-flex;
+  padding: 0;
+  min-width: 16px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  background-color: #0a8276;
+  font-family: var(--ifx-font-family);
+}
+.indicator__container .number__container .number__wrapper {
+  font-family: var(--ifx-font-family);
+  padding: 0 4px;
+  color: #ffffff;
+  text-align: center;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px;
+}
+.indicator__container .number__container.inverted {
+  background-color: #ffffff;
+}
+.indicator__container .number__container.inverted .number__wrapper {
+  color: #0a8276;
+}

package/dist/collection/components/indicator/indicator.js

@@ -0,0 +1,137 @@
+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 Indicator {
+    el;
+    filteredNumber;
+    /** Renders the indicator with an inverted color scheme for dark backgrounds. */
+    inverted = false;
+    /** Provide a short, descriptive text that explains the indicator's meaning or value. */
+    ariaLabelText;
+    /** Sets variant of the Indicator */
+    variant = 'number';
+    /** Numeric value to display when using the 'number' variant */
+    number = 0;
+    handleNumber() {
+        this.filteredNumber =
+            !isNaN(this.number) && this.number > 99 ? "99+" : this.number;
+    }
+    componentWillLoad() {
+        this.handleNumber();
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-indicator", await framework);
+        }
+    }
+    componentWillUpdate() {
+        this.handleNumber();
+    }
+    render() {
+        return (h("div", { key: 'ef280addc9bbfbc744105b141368da9b547fc4f4', "aria-label-text": this.ariaLabelText, class: 'indicator__container' }, this.variant === 'number' &&
+            h("div", { key: 'b3fad711714ee0f4455f1866df1f516a98171a60', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '5471e2548156876d5da9de3a603d5bc28e437124', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '3fb361c0c3d98174ce7f14f2971105661a8e053b', class: `dot__wrapper` })));
+    }
+    static get is() { return "ifx-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inverted": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the indicator with an inverted color scheme 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": [],
+                    "text": "Provide a short, descriptive text that explains the indicator's meaning or value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets variant of the Indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'number'"
+            },
+            "number": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Numeric value to display when using the 'number' variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "number",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filteredNumber": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}