@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,54 @@
+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 Breadcrumb {
+    el;
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-breadcrumb", await framework);
+        }
+        const element = this.el.shadowRoot?.firstElementChild;
+        if (element instanceof HTMLElement) {
+            this.validateBreadcrumbItemStructure(element);
+        }
+    }
+    validateBreadcrumbItemStructure(element) {
+        if (!element) {
+            console.error("element not found");
+            return;
+        }
+        const slot = element.querySelector("slot");
+        if (slot) {
+            const assignedNodes = slot.assignedNodes();
+            for (let i = 0; i < assignedNodes.length; i++) {
+                const node = assignedNodes[i];
+                if (node.nodeName === "IFX-BREADCRUMB-ITEM") {
+                    const breadcrumbItem = node;
+                    const breadcrumbItemLabel = breadcrumbItem.querySelector("ifx-breadcrumb-item-label");
+                    const breadcrumbDropdown = breadcrumbItem.querySelector("ifx-dropdown-menu");
+                    if (breadcrumbItemLabel.hasAttribute("href") && breadcrumbDropdown) {
+                        throw new Error("ifx-breadcrumb-item cannot have both a href and a dropdown menu.");
+                    }
+                }
+            }
+        }
+    }
+    render() {
+        return (h("nav", { key: '7e61f9e82395ddb901c955a3dd2eb266cd7ad221', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: 'a2e6222a25a25fdcf551e4f3c4fe6af3f5bb604a', class: "breadcrumb" }, h("slot", { key: '827978b36b42f8ddd14c20ff042a79c9eee4981f' }))));
+    }
+    static get is() { return "ifx-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["breadcrumb.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["breadcrumb.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,247 @@
+:host {
+  vertical-align: bottom;
+  display: inline-flex;
+  width: var(--bw, fit-content);
+}
+
+.btn {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: 0px 16px;
+  gap: 8px;
+  color: #ffffff;
+  font-weight: 600;
+  border-radius: 1px;
+  line-height: 1.5rem;
+  font-family: var(--ifx-font-family);
+  font-style: normal;
+  text-decoration: none;
+  user-select: none;
+  font-size: 1rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  width: var(--bw, fit-content);
+}
+
+.btn:not(.disabled) {
+  cursor: pointer;
+}
+
+.btn.disabled {
+  pointer-events: none;
+}
+
+.btn-default {
+  color: #ffffff;
+  background-color: #0a8276;
+}
+.btn-default:disabled, .btn-default.disabled {
+  background-color: #bfbbbb;
+  color: #ffffff;
+  pointer-events: none;
+}
+
+.btn-secondary-default {
+  background-color: #ffffff;
+  color: #0a8276;
+  border: 1px solid #0a8276;
+}
+.btn-secondary-default:disabled, .btn-secondary-default.disabled {
+  background-color: #ffffff;
+  border: 1px solid #bfbbbb;
+  color: #bfbbbb;
+  pointer-events: none;
+}
+
+.btn-tertiary-default {
+  background-color: rgba(0, 0, 0, 0);
+  color: #0a8276;
+}
+.btn-tertiary-default:disabled, .btn-tertiary-default.disabled {
+  color: #bfbbbb;
+  pointer-events: none;
+}
+
+.btn-danger {
+  color: #ffffff;
+  background-color: #cd002f;
+  border-color: #cd002f;
+}
+.btn-danger:disabled, .btn-danger.disabled {
+  background-color: #bfbbbb;
+  color: #ffffff;
+  pointer-events: none;
+}
+
+.btn-secondary-danger {
+  background-color: #ffffff;
+  color: #cd002f;
+  border: 1px solid #cd002f;
+}
+.btn-secondary-danger:disabled, .btn-secondary-danger.disabled {
+  background-color: #ffffff;
+  border: 1px solid #bfbbbb;
+  color: #bfbbbb;
+  pointer-events: none;
+}
+
+.btn-tertiary-danger {
+  background-color: rgba(0, 0, 0, 0);
+  color: #cd002f;
+}
+.btn-tertiary-danger:disabled, .btn-tertiary-danger.disabled {
+  background-color: #ffffff;
+  color: #bfbbbb;
+  pointer-events: none;
+}
+
+.btn-inverse {
+  color: #0a8276;
+  background-color: #ffffff;
+}
+.btn-inverse:disabled, .btn-inverse.disabled {
+  opacity: 1;
+  background-color: #ffffff;
+  color: #bfbbbb;
+  pointer-events: none;
+}
+
+.btn-secondary-inverse {
+  color: #ffffff;
+  border: 1px solid #ffffff;
+}
+.btn-secondary-inverse:disabled, .btn-secondary-inverse.disabled {
+  border: 1px solid #ffffff;
+  color: #ffffff;
+  pointer-events: none;
+}
+
+.btn-tertiary-inverse {
+  color: #ffffff;
+}
+.btn-tertiary-inverse:disabled, .btn-tertiary-inverse.disabled {
+  color: #ffffff;
+  opacity: 1;
+  pointer-events: none;
+}
+
+.btn ifx-icon:empty {
+  display: none;
+}
+.btn.btn-xs {
+  font-size: 0.875rem;
+  height: 32px;
+  line-height: 1rem;
+}
+.btn.btn-s {
+  font-size: 0.875rem;
+  height: 36px;
+  line-height: 1.25rem;
+}
+.btn.btn-l {
+  font-size: 1.25rem;
+  height: 48px;
+  line-height: 1.75rem;
+}
+.btn.btn-default:not(:disabled, .disabled):focus:not(:active, .active) {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0a8276;
+}
+.btn.btn-default:not(:disabled, .disabled):hover {
+  background-color: #08665c;
+}
+.btn.btn-default:not(:disabled, .disabled):active, .btn.btn-default:not(:disabled, .disabled).active {
+  background-color: #06534b;
+}
+.btn.btn-secondary-default:not(:disabled, .disabled):focus:not(:active, .active) {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0a8276;
+}
+.btn.btn-secondary-default:not(:disabled, .disabled):hover {
+  color: #ffffff;
+  background-color: #08665c;
+}
+.btn.btn-secondary-default:not(:disabled, .disabled):active, .btn.btn-secondary-default:not(:disabled, .disabled).active {
+  background-color: #06534b;
+}
+.btn.btn-secondary:not(:disabled, .disabled):hover {
+  background-color: #9c216e;
+}
+.btn.btn-secondary:not(:disabled, .disabled):active, .btn.btn-secondary:not(:disabled, .disabled).active {
+  background-color: #9c216e;
+}
+.btn.btn-danger:not(:disabled, .disabled):focus:not(:active, .active) {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0a8276;
+}
+.btn.btn-danger:not(:disabled, .disabled):hover {
+  background-color: #a2001e;
+}
+.btn.btn-danger:not(:disabled, .disabled):active, .btn.btn-danger:not(:disabled, .disabled).active {
+  background-color: #900021;
+}
+.btn.btn-secondary-danger:not(:disabled, .disabled):focus:not(:active, .active) {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0a8276;
+}
+.btn.btn-secondary-danger:not(:disabled, .disabled):hover {
+  color: #ffffff;
+  background-color: #a2001e;
+}
+.btn.btn-secondary-danger:not(:disabled, .disabled):active, .btn.btn-secondary-danger:not(:disabled, .disabled).active {
+  background-color: #900021;
+}
+.btn.btn-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
+  outline: none;
+  box-shadow: 0 0 0 2px #0a8276, 0 0 0 4px #ffffff;
+}
+.btn.btn-inverse:not(:disabled, .disabled):hover {
+  background-color: #eeeded;
+}
+.btn.btn-inverse:not(:disabled, .disabled):active, .btn.btn-inverse:not(:disabled, .disabled).active {
+  background-color: #bfbbbb;
+}
+.btn.btn-secondary-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
+  outline: none;
+  box-shadow: 0 0 0 2px #0a8276, 0 0 0 4px #ffffff;
+}
+.btn.btn-secondary-inverse:not(:disabled, .disabled):hover {
+  color: #0a8276;
+  background-color: #eeeded;
+}
+.btn.btn-secondary-inverse:not(:disabled, .disabled):active, .btn.btn-secondary-inverse:not(:disabled, .disabled).active {
+  color: #0a8276;
+  background-color: #bfbbbb;
+}
+.btn.btn-tertiary-default:not(:disabled, .disabled):focus:not(:active, .active) {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #08665c;
+}
+.btn.btn-tertiary-default:not(:disabled, .disabled):hover {
+  color: #08665c;
+}
+.btn.btn-tertiary-default:not(:disabled, .disabled):active, .btn.btn-tertiary-default:not(:disabled, .disabled).active {
+  color: #06534b;
+}
+.btn.btn-tertiary-danger:not(:disabled, .disabled):focus:not(:active, .active) {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #a2001e;
+}
+.btn.btn-tertiary-danger:not(:disabled, .disabled):hover {
+  color: #a2001e;
+}
+.btn.btn-tertiary-danger:not(:disabled, .disabled):active, .btn.btn-tertiary-danger:not(:disabled, .disabled).active {
+  color: #900021;
+}
+.btn.btn-tertiary-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
+  outline: none;
+  box-shadow: 0 0 0 2px #0a8276, 0 0 0 4px #ffffff;
+}
+.btn.btn-tertiary-inverse:not(:disabled, .disabled):hover {
+  color: #eeeded;
+}
+.btn.btn-tertiary-inverse:not(:disabled, .disabled):active, .btn.btn-tertiary-inverse:not(:disabled, .disabled).active {
+  color: #bfbbbb;
+}

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

@@ -0,0 +1,383 @@
+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 Button {
+    /** Button style level (visual prominence). */
+    variant = "primary";
+    /** Color theme of the button. */
+    theme = "default";
+    /** Button size (xs, s, m, l). */
+    size = "m";
+    /** Wether the button is disabled and not clickable. */
+    disabled = false;
+    internalHref;
+    /** URL the Button should navigate to when clicked.  */
+    href;
+    /** Where to open the link. */
+    target = "_self";
+    /** Native button type. */
+    type = "button";
+    /** If true, button stretches to fill the available width. */
+    fullWidth = false;
+    /** Accessible label for screen readers when text is not enough */
+    ariaLabelText;
+    el;
+    focusableElement;
+    nativeButton;
+    setInternalHref(newValue) {
+        this.internalHref = newValue;
+    }
+    /** Move keayboard focus to the button. */
+    async setFocus() {
+        this.focusableElement.focus();
+    }
+    insertNativeButton() {
+        this.nativeButton = document.createElement("button");
+        this.nativeButton.type = this.type;
+        this.nativeButton.style.display = "none";
+        this.el.closest("form").appendChild(this.nativeButton);
+    }
+    handleFormAndInternalHref() {
+        if (this.el.closest("form")) {
+            if (this.el.href) {
+                this.internalHref = undefined;
+            }
+            this.insertNativeButton();
+        }
+        else {
+            this.internalHref = this.href;
+        }
+    }
+    handleButtonWidth() {
+        if (this.fullWidth) {
+            this.el.style.setProperty("--bw", "100%");
+        }
+        else {
+            this.el.style.setProperty("--bw", "fit-content");
+        }
+    }
+    componentWillLoad() {
+        this.handleFormAndInternalHref();
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-button", await framework);
+        }
+    }
+    componentWillRender() {
+        this.handleButtonWidth();
+    }
+    handleClick = (ev) => {
+        if (this.el.shadowRoot) {
+            const parentForm = this.el.closest("form");
+            if (parentForm) {
+                ev.preventDefault();
+                if (this.type === "reset") {
+                    parentForm.reset();
+                    parentForm.dispatchEvent(new Event("reset"));
+                    return;
+                }
+                if (this.nativeButton) {
+                    this.nativeButton.click();
+                    return;
+                }
+                const fakeButton = document.createElement("button");
+                if (this.type) {
+                    fakeButton.type = this.type;
+                }
+                fakeButton.style.display = "none";
+                parentForm.appendChild(fakeButton);
+                fakeButton.click();
+                fakeButton.remove();
+            }
+        }
+    };
+    handleKeyDown(ev) {
+        if (ev.key === " " || (ev.key === "Enter" && !this.disabled)) {
+            this.focusableElement.click();
+        }
+    }
+    handleHostClick(event) {
+        if (this.disabled === true) {
+            event.stopImmediatePropagation();
+        }
+    }
+    handleFocus(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            this.focusableElement.blur();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'e4c165461267e3877bb8eeeccbffd4210c7442ae' }, h("a", { key: '0a5e7131ed8cac297f08329cbd43e64d5c9f5941', role: this.href ? "link" : "button", tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? sanitizeHref(this.internalHref) : undefined, target: this.target, onClick: this.handleClick, rel: this.target === "_blank" ? "noopener noreferrer" : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? "true" : null, "aria-describedby": this.theme === "danger" ? "Dangerous action" : undefined, "aria-label": this.ariaLabelText || undefined }, h("slot", { key: 'aee88584e7ed312589f8606f2387cd7833bcac77' }))));
+    }
+    getVariantClass() {
+        return `${this.variant}` === "secondary"
+            ? `secondary-${this.theme}`
+            : `${this.variant}` === "tertiary"
+                ? `tertiary-${this.theme}`
+                : `${this.theme}`;
+    }
+    getSizeClass() {
+        if (`${this.size}` === "xs") {
+            return "xs";
+        }
+        else if (`${this.size}` === "s") {
+            return "s";
+        }
+        else if (`${this.size}` === "l") {
+            return "l";
+        }
+        else
+            return "";
+    }
+    getClassNames() {
+        return classNames("btn", this.size && `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? "disabled" : "");
+    }
+    static get is() { return "ifx-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["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": [],
+                    "text": "Button style level (visual prominence)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"primary\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"default\" | \"danger\" | \"inverse\"",
+                    "resolved": "\"danger\" | \"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color theme of the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "\"default\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button size (xs, s, m, l)."
+                },
+                "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": [],
+                    "text": "Wether the button is disabled and not clickable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL the Button should navigate to when clicked."
+                },
+                "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": [],
+                    "text": "Where to open the link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "\"_self\""
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"button\" | \"submit\" | \"reset\"",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"button\""
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, button stretches to fill the available width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers when text is not enough"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalHref": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Move keayboard focus to the button.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "href",
+                "methodName": "setInternalHref"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleHostClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}