@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/navigation/navbar/navbar-profile.js

@@ -0,0 +1,354 @@
+import { h, } from "@stencil/core";
+import { sanitizeHref } from "../../../shared/utils/url-utils";
+export class NavbarProfile {
+    el;
+    /** Whether to show the user name label next to the avatar. */
+    showLabel = true;
+    /** URL the avatar item should navigate to when clicked. */
+    href = "";
+    /** Image URL used for the avatar. */
+    imageUrl = "";
+    /** Where to open the link (same tab, new tab, etc.). */
+    target = "_self";
+    /** Alternative text for the avatar image. */
+    alt = "";
+    /** Displayed user name associated with the avatar. */
+    userName = "";
+    internalHref = "";
+    isMenuItem = false;
+    hasChildNavItems = false;
+    internalImageUrl = { type: "", value: "" };
+    defaultProfileImage = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="#0A8276"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z" fill="white"/>
+</svg>`;
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        const itemMenu = this.getItemMenu();
+        if (itemMenu) {
+            if (itemMenu.classList.contains("open")) {
+                if (!path.includes(this.el)) {
+                    this.closeItemMenu();
+                }
+            }
+        }
+    }
+    componentWillLoad() {
+        this.setHref();
+        this.setImage();
+        const sidebarItems = this.getNavbarItems();
+        if (sidebarItems.length !== 0) {
+            this.hasChildNavItems = true;
+        }
+        else {
+            this.hasChildNavItems = false;
+        }
+    }
+    componentDidLoad() {
+        this.setProfileGap();
+        if (this.hasChildNavItems) {
+            const navItems = this.getNavbarItems();
+            this.appendNavItemToMenu(navItems);
+        }
+    }
+    /** Hides this avatar item component. */
+    async hideComponent() {
+        this.el.style.display = "none";
+    }
+    /** Shows this avatar item component. */
+    async showComponent() {
+        this.el.style.display = "";
+    }
+    handleClassList(el, type, className) {
+        el.classList[type](className);
+        if (type === "contains") {
+            return el.classList.contains(className);
+        }
+    }
+    getNavbarItems() {
+        const navItems = this.el.querySelectorAll("ifx-navbar-item");
+        return navItems;
+    }
+    getNavBarItem() {
+        const navItem = this.el.shadowRoot.querySelector(".navbar__item");
+        return navItem;
+    }
+    relocateUsingSlot(navItems) {
+        navItems.forEach((item) => {
+            item.setAttribute("slot", "first__layer");
+        });
+    }
+    appendNavItemToMenu(navItems) {
+        this.relocateUsingSlot(navItems);
+    }
+    isValidHttpUrl(string) {
+        let url;
+        try {
+            url = new URL(string);
+        }
+        catch (_) {
+            return false;
+        }
+        return url.protocol === "http:" || url.protocol === "https:";
+    }
+    setImage() {
+        if (this.imageUrl.toLowerCase().trim() === "") {
+            this.internalImageUrl = { type: undefined, value: "" };
+        }
+        else if (this.isValidHttpUrl(this.imageUrl)) {
+            this.internalImageUrl = { type: "url", value: this.imageUrl };
+        }
+        else {
+            this.internalImageUrl = { type: "initials", value: this.imageUrl };
+        }
+    }
+    setHref() {
+        if (this.href.toLowerCase().trim() === "") {
+            this.internalHref = undefined;
+        }
+        else
+            this.internalHref = this.href;
+    }
+    setProfileGap() {
+        const innerContentWrapper = this.el.shadowRoot.querySelector(".inner__content-wrapper");
+        const labelWrapper = this.el.shadowRoot.querySelector(".label__wrapper");
+        const labelSlot = labelWrapper.querySelector("slot");
+        const nodes = labelSlot.assignedNodes();
+        if (!nodes.length) {
+            this.handleClassList(innerContentWrapper, "add", "no-gap");
+        }
+        else {
+            this.handleClassList(innerContentWrapper, "remove", "no-gap");
+        }
+    }
+    getItemMenu() {
+        const menu = this.el.shadowRoot.querySelector(".navbar-menu");
+        return menu;
+    }
+    closeItemMenu() {
+        const itemMenu = this.getItemMenu();
+        const menuItem = this.getNavBarItem();
+        if (itemMenu) {
+            this.handleClassList(itemMenu, "remove", "open");
+            this.handleClassList(menuItem, "remove", "open");
+        }
+    }
+    toggleItemMenu() {
+        if (!this.internalHref) {
+            if (this.isMenuItem && this.hasChildNavItems) {
+                const itemMenu = this.getItemMenu();
+                this.handleClassList(itemMenu, "add", "right");
+            }
+            if (this.hasChildNavItems) {
+                const itemMenu = this.getItemMenu();
+                const menuItem = this.getNavBarItem();
+                this.handleClassList(itemMenu, "toggle", "open");
+                this.handleClassList(menuItem, "toggle", "open");
+            }
+        }
+    }
+    handleProfileMenuKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.toggleItemMenu();
+        }
+    };
+    render() {
+        return (h("div", { key: '9bc7f38063db4841251257ef3646c3c79f41869a', class: "container" }, h("a", { key: 'defc417da894b54dc7e94b810d9b5cb2a3f0c15c', href: sanitizeHref(this.internalHref), target: this.target, onClick: () => this.toggleItemMenu(), class: `navbar__item ${!this.showLabel ? "removeLabel" : ""} ${this.hasChildNavItems ? "isParent" : ""}`, role: "button", tabindex: "0", "aria-label": "Open profile menu", onKeyDown: this.handleProfileMenuKeyDown }, h("div", { key: 'd4863e77c74980bf2c7932ac4ae1af1f6e0104a1', class: "inner__content-wrapper" }, h("div", { key: 'a4a859cd5a531a9ec2f57f3b869846e764dc485a', class: `navbar__container-right-content-navigation-item-icon-wrapper` }, this.userName.trim() !== "" && (h("div", { key: '0fd4e968faf1bdf9ef1de69b9aa179406543e1c5', class: "username__tooltip" }, this.userName)), this.internalImageUrl.type !== "initials" && (h("img", { key: 'ad8c108ecfc62de0e6beff5eae6c8c5b91a82df4', src: this.internalImageUrl.type === "url"
+                ? this.internalImageUrl.value
+                : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`, alt: this.alt })), this.internalImageUrl.type === "initials" && (h("div", { key: 'a3363231180180ef0fd9a04e08bffb36b0359955', class: "initials__wrapper" }, h("span", { key: '1bfa338a7375d027fa15b4e1b7411d3bbae93147', class: "initials" }, this.internalImageUrl.value)))), h("span", { key: 'f46fed15aa2e5f53e0bb704a38b044f61ffedad6', class: "label__wrapper" }, h("slot", { key: 'c76509df2fcce4f255f73f4622ed22b7c87b7501', onSlotchange: () => this.setProfileGap() })))), this.hasChildNavItems && (h("ul", { key: 'd12f6e1dbda4b1f3f00697c0886ecb0d079f619e', class: "navbar-menu rightSideItemMenu" }, " ", h("slot", { key: 'dec68286746ee02021bac70d5b5478e275f86396', name: "first__layer" }), " "))));
+    }
+    static get is() { return "ifx-navbar-profile"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["navbar-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["navbar-item.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the user name label next to the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL the avatar item should navigate to when clicked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "\"\""
+            },
+            "imageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL used for the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-url",
+                "defaultValue": "\"\""
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to open the link (same tab, new tab, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "\"_self\""
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the avatar image."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "\"\""
+            },
+            "userName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displayed user name associated with the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user-name",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalHref": {},
+            "isMenuItem": {},
+            "hasChildNavItems": {},
+            "internalImageUrl": {}
+        };
+    }
+    static get methods() {
+        return {
+            "hideComponent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides this avatar item component.",
+                    "tags": []
+                }
+            },
+            "showComponent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows this avatar item component.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "mousedown",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}