@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/alert/alert.css

@@ -0,0 +1,142 @@
+:host {
+  display: block;
+}
+
+.alert__info-wrapper {
+  display: flex;
+  padding: 16px 24px;
+  font-family: var(--ifx-font-family);
+  box-shadow: 0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);
+}
+.alert__info-wrapper .info__text-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.alert__info-wrapper .info__text-wrapper .info__headline-wrapper {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,
+.alert__info-wrapper .info__text-wrapper .info__description-wrapper {
+  color: #1D1D1D;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+}
+.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),
+.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p) {
+  padding: 0;
+  margin: 0;
+}
+.alert__info-wrapper .info__text-wrapper .info__description-wrapper {
+  font-weight: 400;
+}
+.alert__info-wrapper .close-icon-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.alert__info-wrapper .close-icon-wrapper button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  color: #1d1d1d;
+  height: 24px;
+  width: 24px;
+}
+.alert__info-wrapper .close-icon-wrapper button:focus {
+  outline: 2px solid #0a8276;
+  outline-offset: 2px;
+}
+
+.alert {
+  display: flex;
+  border: 1px solid #0a8276;
+  border-radius: 1px;
+  color: #1d1d1d;
+  background-color: #ffffff;
+  font-family: var(--ifx-font-family);
+  box-shadow: 0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);
+}
+.alert .close-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+}
+.alert .close-icon-wrapper button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  color: #1d1d1d;
+  height: 24px;
+  width: 24px;
+}
+.alert .close-icon-wrapper button:focus {
+  outline: 2px solid #0a8276;
+  outline-offset: 2px;
+}
+.alert .icon-wrapper {
+  position: relative;
+  min-width: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #0a8276;
+}
+.alert .alert-text {
+  font-size: 16px;
+  width: 100%;
+  padding: 12px 0px 12px 12px;
+  color: #1d1d1d;
+  white-space: pre-wrap;
+  /* wraps text at spaces and within words */
+  word-wrap: break-word;
+  /* breaks text within a word if necessary */
+  overflow-wrap: anywhere;
+  /* breaks text at arbitrary points when needed */
+}
+.alert.primary {
+  border: 1px solid #0a8276;
+}
+.alert.primary .icon-wrapper {
+  background-color: #0a8276;
+  color: #ffffff;
+}
+.alert.success {
+  border: 1px solid #4ca460;
+}
+.alert.success .icon-wrapper {
+  background-color: #4ca460;
+  color: #ffffff;
+}
+.alert.danger {
+  border: 1px solid #cd002f;
+}
+.alert.danger .icon-wrapper {
+  background-color: #cd002f;
+  color: #ffffff;
+}
+.alert.warning {
+  border: 1px solid #e16b25;
+}
+.alert.warning .icon-wrapper {
+  background-color: #e16b25;
+  color: #ffffff;
+}
+
+.close-icon-wrapper ifx-icon:hover {
+  cursor: pointer;
+}

package/dist/collection/components/alert/alert.js

@@ -0,0 +1,167 @@
+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 Alert {
+    el;
+    /** Visual style variant of the component. */
+    variant = "primary";
+    /** Name or identifier of the icon to display. */
+    icon;
+    /** Event emitted when the component is closed. */
+    ifxClose;
+    /** Wether the component can be closed by the user. */
+    closable = true;
+    /** Aria live region setting for accessibility announcements. */
+    AriaLiveText = "assertive";
+    uniqueId;
+    alertTypeDescription = {
+        primary: "Neutral alert",
+        success: "Success Alert",
+        danger: "Error Alert",
+        warning: "Warning Alert",
+        info: "Neutral alert",
+    };
+    handleClose() {
+        this.ifxClose.emit();
+    }
+    renderCloseButton() {
+        return (h("div", { class: "close-icon-wrapper" }, h("button", { onClick: this.handleClose.bind(this), "aria-label": "Dismiss alert" }, h("ifx-icon", { icon: "cross-16" }))));
+    }
+    generateUniqueId(prefix = "id") {
+        return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    componentWillLoad() {
+        if (!this.uniqueId) {
+            this.uniqueId = this.generateUniqueId("alert");
+        }
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = await detectFramework();
+            trackComponent("ifx-alert", framework);
+        }
+    }
+    render() {
+        return this.variant === "info" ? (h("div", { class: "alert__info-wrapper", role: "alert", "aria-live": this.AriaLiveText, "aria-describedby": this.alertTypeDescription[this.variant], "aria-labelledby": "alert-text alert-description" }, h("div", { class: "info__text-wrapper" }, h("div", { class: "info__headline-wrapper" }, h("slot", { name: "headline" })), h("div", { id: `alert-description-${this.uniqueId}`, class: "info__description-wrapper" }, h("slot", { name: "desc" }))), this.closable ? this.renderCloseButton() : null)) : (h("div", { class: `alert ${this.variant}`, role: "alert" }, this.icon && (h("div", { class: "icon-wrapper" }, h("ifx-icon", { icon: this.icon }))), h("div", { class: "alert-text", id: `alert-text-${this.uniqueId}` }, h("slot", null)), this.closable ? this.renderCloseButton() : null));
+    }
+    static get is() { return "ifx-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["alert.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"primary\" | \"success\" | \"danger\" | \"warning\" | \"info\"",
+                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style variant of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"primary\""
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name or identifier of the icon to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the component can be closed by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "true"
+            },
+            "AriaLiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"assertive\"",
+                    "resolved": "\"assertive\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria live region setting for accessibility announcements."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-live-text",
+                "defaultValue": "\"assertive\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "uniqueId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxClose",
+                "name": "ifxClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the component is closed."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/breadcrumb/breadcrumb-item-label.css

@@ -0,0 +1,33 @@
+.breadcrumb-item-label-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  color: #1d1d1d;
+}
+.breadcrumb-item-label-container.margin {
+  margin-left: 16px;
+}
+.breadcrumb-item-label-container ifx-icon:empty {
+  display: none;
+}
+.breadcrumb-item-label-container .label-icon-wrapper {
+  display: inline-flex;
+}
+.breadcrumb-item-label-container .menu-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+}
+.breadcrumb-item-label-container .menu-icon-wrapper.hide {
+  display: none;
+}
+.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon {
+  transition: 0.3s;
+}
+.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon {
+  transition: 0.3s;
+  transform: rotate(180deg);
+}

package/dist/collection/components/breadcrumb/breadcrumb-item-label.js

@@ -0,0 +1,121 @@
+import { h, } from "@stencil/core";
+import { sanitizeHref } from "../../shared/utils/url-utils";
+export class BreadcrumbItemLabel {
+    /** Icon displayed inside the breadcrumb item. */
+    icon;
+    /** URL the breadcrumb item links to. */
+    href;
+    /** Where to open the link. */
+    target = "_self";
+    el;
+    /** Fires with the icon wrapper element when it's ready. */
+    breadcrumbMenuIconWrapper;
+    componentDidLoad() {
+        const container = this.el.shadowRoot.querySelector(".breadcrumb-item-label-container");
+        const menuWrapper = container?.querySelector(".menu-icon-wrapper");
+        if (menuWrapper) {
+            this.breadcrumbMenuIconWrapper.emit(menuWrapper);
+        }
+    }
+    render() {
+        return (h("a", { key: '469c15e1f80f043cc781457277fb49ca250712cc', href: sanitizeHref(this.href), target: this.target, class: "breadcrumb-item-label-container", role: "link" }, h("ifx-icon", { key: 'd2f25b67fa417f58baac4553fa231005971eed25', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '952ce4529313627043a590e1a6780edb7382b389', class: "label-wrapper" }, h("slot", { key: 'dd372efabeca69a1c05f06974cbc874a21d3f83c' })), h("span", { key: '685a2ccfc4f00910cf2d3fbdc27caaef9bae04b3', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: '571d27872a74dff5d4084a151464fb23cbf81fcc', icon: "chevron-down-16" }))));
+    }
+    static get is() { return "ifx-breadcrumb-item-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["breadcrumb-item-label.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["breadcrumb-item-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon displayed inside the breadcrumb item."
+                },
+                "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 the breadcrumb item links to."
+                },
+                "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\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "breadcrumbMenuIconWrapper",
+                "name": "breadcrumbMenuIconWrapper",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the icon wrapper element when it's ready."
+                },
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,52 @@
+.breadcrumb-parent {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+  gap: 12px;
+  min-height: 24px;
+  justify-content: center;
+}
+.breadcrumb-parent:hover {
+  cursor: pointer;
+}
+.breadcrumb-parent .breadcrumb-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+  gap: 8px;
+  position: relative;
+}
+.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 20px;
+}
+.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open {
+  display: block;
+}
+.breadcrumb-parent .breadcrumb-wrapper a {
+  text-decoration: none;
+  color: #1d1d1d;
+  font-family: var(--ifx-font-family);
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  display: flex;
+  align-items: center;
+  color: #1d1d1d;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0px;
+  border-bottom: 1px solid #1D1D1D;
+}
+.breadcrumb-parent .breadcrumb-divider {
+  width: 10px;
+  height: 16px;
+  color: #bfbbbb;
+  line-height: 13px;
+  font-size: 1.25rem;
+  margin-right: 12px;
+}

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

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+export class BreadcrumbItem {
+    isLastItem = false;
+    el;
+    emittedElement;
+    uniqueId;
+    hasDropdownMenu = false;
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.el)) {
+            this.closeDropdownMenu();
+        }
+    }
+    handleKeyDown(ev) {
+        if (ev.key === "Enter" || ev.key === " ") {
+            this.toggleDropdownMenu();
+        }
+        else if (ev.key === "Escape") {
+            this.closeDropdownMenu();
+        }
+    }
+    getDropdownMenu() {
+        const dropdownMenu = this.el.shadowRoot.querySelector(".dropdown-menu");
+        return dropdownMenu;
+    }
+    menuWrapperEventReEmitter(event) {
+        this.emittedElement = event.detail;
+    }
+    getMenuIconWrapper() {
+        return this.emittedElement;
+    }
+    handleClassList(el, type, className) {
+        el.classList[type](className);
+    }
+    closeDropdownMenu() {
+        if (this.hasDropdownMenu) {
+            const dropdownMenu = this.getDropdownMenu();
+            const menuWrapper = this.getMenuIconWrapper();
+            this.handleClassList(dropdownMenu, "remove", "open");
+            this.handleClassList(menuWrapper, "remove", "show");
+        }
+    }
+    toggleDropdownMenu() {
+        if (this.hasDropdownMenu) {
+            const dropdownMenu = this.getDropdownMenu();
+            const menuWrapper = this.getMenuIconWrapper();
+            this.handleClassList(dropdownMenu, "toggle", "open");
+            this.handleClassList(menuWrapper, "toggle", "show");
+        }
+    }
+    isDropdownMenuOpen() {
+        const dropdownMenu = this.getDropdownMenu();
+        return (this.hasDropdownMenu &&
+            dropdownMenu &&
+            dropdownMenu.classList.contains("open"));
+    }
+    handleLastItem() {
+        const breadcrumbItems = this.el
+            .closest("ifx-breadcrumb")
+            .querySelectorAll("ifx-breadcrumb-item");
+        if (this.el === breadcrumbItems[breadcrumbItems.length - 1]) {
+            this.isLastItem = true;
+        }
+        else
+            this.isLastItem = false;
+    }
+    generateUniqueId(prefix = "id") {
+        return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    componentWillLoad() {
+        if (!this.uniqueId) {
+            this.uniqueId = this.generateUniqueId("breadcrumb-dropdown");
+        }
+        this.handleLastItem();
+    }
+    componentDidUpdate() {
+        this.handleLastItem();
+    }
+    componentWillRender() {
+        this.setHasDropdownMenuState();
+    }
+    setHasDropdownMenuState() {
+        const dropdownMenu = this.getIfxDropdownMenuComponent();
+        if (dropdownMenu) {
+            this.hasDropdownMenu = !!dropdownMenu;
+        }
+    }
+    getIfxDropdownMenuComponent() {
+        const dropdownMenu = this.el.querySelector("ifx-dropdown-menu");
+        return dropdownMenu;
+    }
+    componentDidLoad() {
+        const dropdownMenu = this.getIfxDropdownMenuComponent();
+        if (!this.hasDropdownMenu) {
+            const iconMenuWrapper = this.getMenuIconWrapper();
+            this.handleClassList(iconMenuWrapper, "toggle", "hide");
+        }
+        else {
+            dropdownMenu.isOpen = true;
+        }
+    }
+    render() {
+        return (h("li", { key: 'a6e3ced53d2a988efc7814ab096443f0c3adc889', class: "breadcrumb-parent", "aria-current": `${this.isLastItem ? "page" : ""}` }, h("li", { key: 'a34dba95bbfa06947c20f4cca2ea98519c510e49', role: "button", tabindex: this.hasDropdownMenu ? 0 : -1, class: "breadcrumb-wrapper", onClick: () => this.toggleDropdownMenu(), "aria-controls": this.uniqueId, "aria-haspopup": "menu", "aria-label": "Toggle dropdown menu" }, h("slot", { key: '29a928930c54eb5395431ef214bb799c3ad6c59b', name: "label" }), h("div", { key: '1fba6f650c6d9c9173cba1bfa7fcd03a7b90f7cd', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, h("slot", { key: 'c43583bd4a2d9da175f3cdb358f87c6953682362' }))), !this.isLastItem && (h("span", { key: '74c85ac130502169455204850d6a6cfe07e12851', class: "breadcrumb-divider", "aria-hidden": "true" }, "/"))));
+    }
+    static get is() { return "ifx-breadcrumb-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["breadcrumb-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["breadcrumb-item.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isLastItem": {},
+            "uniqueId": {},
+            "hasDropdownMenu": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "mousedown",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "breadcrumbMenuIconWrapper",
+                "method": "menuWrapperEventReEmitter",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+}
+
+.breadcrumb {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  display: flex;
+  flex-direction: row;
+  font-family: var(--ifx-font-family);
+  font-size: 0.875rem;
+  align-items: flex-start;
+}