@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/esm/ifx-sidebar-item.entry.js

@@ -0,0 +1,288 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CY4s4b6R.js';
+import { s as sanitizeHref } from './url-utils-QgsB_-OM.js';
+
+const sidebarItemCss = () => `:host{position:relative;display:block}:host([data-has-icon=false]){display:var(--ifx-sidebar-item-without-icon-display, block)}:host([data-sidebar-collapsed][data-hide-in-collapsed]){display:none}.sidebar__nav-item:focus-visible,.sidebar__nav-item.header__section:focus-visible{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.sidebar__nav-item:focus-visible .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus-visible .sidebar__nav-item-icon-wrapper{color:#08665c}.sidebar__nav-item:focus-visible .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus-visible .sidebar__nav-item-label{outline:none;color:#08665c}.sidebar__nav-item:focus-visible .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus-visible .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665c}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665c}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665c}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665c}.sidebar__nav-item{display:flex;flex-direction:var(--ifx-sidebar-item-flex-direction, row);align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1d1d1d;cursor:pointer;font-family:var(--ifx-font-family);word-break:normal;overflow-wrap:anywhere;line-height:0}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0a8276}.sidebar__nav-item.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0a8276;align-self:center}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0a8276}.sidebar__nav-item.header__section.open{padding:8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1d1d1d;font-family:var(--ifx-font-family);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;order:1;flex-grow:1;cursor:pointer;display:var(--ifx-sidebar-item-text-display, flex)}.sidebar__nav-item .sidebar__nav-item-label.font-weight-bold{font-weight:600}.sidebar__nav-item .sidebar__nav-item-label.font-weight-normal{font-weight:400}.sidebar__nav-item .sidebar__nav-item-indicator{display:var(--ifx-sidebar-item-text-display, flex);flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0;position:relative}.sidebar__nav-item .sidebar__nav-item-indicator.indicator-hidden{display:none}:host([data-sidebar-collapsed]) .sidebar__nav-item .sidebar__nav-item-indicator{position:absolute;top:0;right:0;z-index:10;padding:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}`;
+
+const SidebarItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxSidebarMenu = createEvent(this, "ifxSidebarMenu", 7);
+        this.ifxSidebarNavigationItem = createEvent(this, "ifxSidebarNavigationItem", 7);
+        this.ifxSidebarActionItem = createEvent(this, "ifxSidebarActionItem", 7);
+    }
+    get el() { return getElement(this); }
+    /** Icon name or URL for the item */
+    icon = "";
+    /** Navigation link href for the item */
+    href = "";
+    internalHref = "";
+    /** Link target (e.g., "_self", "_blank") */
+    target = "_self";
+    isExpandable = false;
+    isNested = true;
+    isSubMenuItem = false;
+    /** Numeric badge indicator value */
+    numberIndicator;
+    /** Marks the item as active */
+    active = false; // set to true manually or by clicking on a navigation item
+    /** Marks as an action item */
+    isActionItem = false; // if an item is an action item, it can not become active
+    /** Click handler callback; receives the item HTMLElement */
+    handleItemClick;
+    /** Customize the font bold vs normal */
+    fontWeight = "normal";
+    showIcon = true;
+    showIconWrapper = false;
+    indicatorVariant = "number";
+    internalActiveState = false;
+    /** Event fired for menu item interactions */
+    ifxSidebarMenu;
+    /** Event fired when a navigation item is clicked */
+    ifxSidebarNavigationItem;
+    /** Event fired when an action item is clicked */
+    ifxSidebarActionItem;
+    titleText = "";
+    handleActiveChange(newValue, oldValue) {
+        // If the item is an action item, ignore the active prop
+        if (this.isActionItem) {
+            this.internalActiveState = false;
+            return;
+        }
+        this.internalActiveState = newValue;
+        if (newValue !== oldValue) {
+            const labelElement = this.getNavItem(this.el.shadowRoot);
+            if (!this.isExpandable && !newValue) {
+                this.handleClassList(labelElement, "remove", "active");
+            }
+            if (!this.isExpandable && newValue) {
+                this.handleClassList(labelElement, "add", "active");
+            }
+        }
+    }
+    handleNumberIndicatorChange() {
+        this.updateIndicatorVariant();
+    }
+    handleConsoleError(event) {
+        if (event.detail) {
+            this.showIcon = false;
+        }
+        else {
+            this.showIcon = true;
+        }
+    }
+    handleEventEmission() {
+        // Get the active item section
+        this.ifxSidebarMenu.emit(this.el);
+        this.ifxSidebarNavigationItem.emit(this.el);
+    }
+    handleClassList(el, type, className) {
+        el.classList[type](className);
+        if (type === "contains") {
+            return el.classList.contains(className);
+        }
+    }
+    getExpandableMenu() {
+        const expandableSubmenu = this.el.shadowRoot.querySelector(".expandable__submenu");
+        return expandableSubmenu;
+    }
+    getNavItem(el) {
+        return el?.querySelector(".sidebar__nav-item");
+    }
+    getSidebarMenuItems(el = this.el) {
+        const sidebarItems = el.querySelectorAll("ifx-sidebar-item");
+        if (sidebarItems.length === 0) {
+            return el.shadowRoot.querySelectorAll("ifx-sidebar-item");
+        }
+        return sidebarItems;
+    }
+    getSidebarMenuItem() {
+        const sidebarItem = this.el.shadowRoot.querySelector(".sidebar__nav-item");
+        return sidebarItem;
+    }
+    toggleSubmenu() {
+        if (this.isExpandable) {
+            const menuItem = this.getSidebarMenuItem();
+            const expandableMenu = this.getExpandableMenu();
+            this.handleClassList(expandableMenu, "toggle", "open");
+            this.handleClassList(menuItem, "toggle", "open");
+            // Emit an event with the current component
+            this.handleEventEmission();
+        }
+        else {
+            // If the sidebar item is not expandable, it's a leaf item without a submenu.
+            // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.
+            if (this.isActionItem) {
+                //its an action item that eg opens an overlay etc and should not influence the active state of the item
+                this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true
+                return;
+            }
+            else {
+                //its a navigation item which becomes active after clicking it
+                this.handleActiveChange(true, this.internalActiveState);
+                this.ifxSidebarNavigationItem.emit(this.el);
+            }
+            // If the sidebar item is selectable (not expandable), then call the handler function with the current element.
+            if (this.handleItemClick) {
+                this.handleItemClick(this.el);
+            }
+        }
+        // // Emit an event with the current component
+        // this.handleEventEmission();
+    }
+    handleExpandableMenu(sidebarItems) {
+        const sidebarExpandableMenu = this.getExpandableMenu();
+        sidebarItems.forEach((el) => {
+            const li = document.createElement("li");
+            li.appendChild(el);
+            sidebarExpandableMenu.appendChild(li);
+        });
+    }
+    parentElementIsSidebar() {
+        const parentElement = this.el.parentElement;
+        if (parentElement.tagName.toUpperCase() === "IFX-SIDEBAR") {
+            return true;
+        }
+        else
+            return false;
+    }
+    checkIfMenuItemIsNested() {
+        const parentIsSidebar = this.parentElementIsSidebar();
+        if (parentIsSidebar) {
+            this.isNested = false;
+        }
+    }
+    checkIfMenuItemIsSubMenu() {
+        const parentElement = this.el.parentElement;
+        const navItem = this.getNavItem(parentElement.shadowRoot);
+        if (parentElement.tagName.toUpperCase() === "IFX-SIDEBAR-ITEM" &&
+            !this.handleClassList(navItem, "contains", "header__section")) {
+            this.isSubMenuItem = true;
+        }
+        else {
+            this.isSubMenuItem = false;
+        }
+    }
+    setHref() {
+        if (this.href.toLowerCase().trim() === "") {
+            this.internalHref = undefined;
+        }
+        else
+            this.internalHref = this.href;
+    }
+    /** Add 'active' class to the current navigation item */
+    async setActiveClasses() {
+        const activeMenuItem = this.getNavItem(this.el.shadowRoot);
+        this.handleClassList(activeMenuItem, "add", "active");
+    }
+    /** Expand submenu (adds 'open'); if ac=true, remove 'active-section' */
+    async expandMenu(ac) {
+        const menuItem = this.getSidebarMenuItem();
+        const expandableMenu = this.getExpandableMenu();
+        this.handleClassList(expandableMenu, "add", "open");
+        this.handleClassList(menuItem, "add", "open");
+        if (ac) {
+            this.handleClassList(expandableMenu, "remove", "active-section");
+            this.handleClassList(menuItem, "remove", "active-section");
+        }
+    }
+    /** Return whether the item is expandable */
+    async isItemExpandable() {
+        return this.isExpandable;
+    }
+    handleActiveState() {
+        if (this.internalActiveState) {
+            this.setActiveClasses();
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === "Enter") {
+            this.toggleSubmenu();
+        }
+    }
+    componentDidLoad() {
+        this.handleActiveState();
+        if (this.isExpandable) {
+            const sidebarItems = this.getSidebarMenuItems();
+            this.handleExpandableMenu(sidebarItems);
+        }
+        // Listen for collapsed state changes
+        this.updateIndicatorVariant();
+        // Set up MutationObserver to watch for CSS custom property changes
+        this.observeCollapsedState();
+        // Extract text content for title attribute
+        this.extractTitleText();
+    }
+    extractTitleText() {
+        // Get the text content from the slot
+        const slotElement = this.el.shadowRoot.querySelector("slot");
+        if (slotElement) {
+            const assignedNodes = slotElement.assignedNodes();
+            this.titleText = assignedNodes
+                .filter((node) => node.nodeType === Node.TEXT_NODE ||
+                node.nodeType === Node.ELEMENT_NODE)
+                .map((node) => node.textContent?.trim() || "")
+                .join(" ")
+                .trim();
+        }
+    }
+    updateIndicatorVariant() {
+        // Check the data attribute on this element
+        const isCollapsed = this.el.hasAttribute("data-sidebar-collapsed");
+        //this.indicatorVariant = isCollapsed ? 'dot' : 'number';
+        if (this.numberIndicator > 0) {
+            this.indicatorVariant = isCollapsed ? "dot" : "number";
+        }
+    }
+    observeCollapsedState() {
+        // Create a MutationObserver to watch for data-sidebar-collapsed attribute changes
+        const observer = new MutationObserver(() => {
+            this.updateIndicatorVariant();
+        });
+        observer.observe(this.el, {
+            attributes: true,
+            attributeFilter: ["data-sidebar-collapsed"],
+        });
+    }
+    componentWillLoad() {
+        this.internalActiveState = this.active;
+        this.checkIfMenuItemIsNested();
+        this.checkIfMenuItemIsSubMenu();
+        this.setHref();
+        // Set attribute to track if item has icon
+        this.el.setAttribute("data-has-icon", this.icon ? "true" : "false");
+        const sidebarItems = this.getSidebarMenuItems();
+        if (sidebarItems.length !== 0) {
+            this.isExpandable = true;
+        }
+        else {
+            this.isExpandable = false;
+        }
+    }
+    componentWillUpdate() {
+        // If the active prop has been set to true and the internalActiveState has not been set to true yet
+        if (this.active && !this.internalActiveState) {
+            // Set the internal active state to true
+            this.internalActiveState = this.active;
+            // Emit the event to notify the parent Sidebar
+            this.ifxSidebarNavigationItem.emit(this.el);
+        }
+    }
+    render() {
+        const isCollapsed = this.el.hasAttribute("data-sidebar-collapsed");
+        const hasMenuItems = !this.isNested && this.isExpandable;
+        return (h("div", { key: 'ca5419df2f776e005bbf79881f2561a32acf1873' }, h("a", { key: 'b94bb63b43572a44eda1b0c8c37b14654f8b860f', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: sanitizeHref(this.internalHref), onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? "header__section" : ""} ${this.isSubMenuItem ? "submenu__item" : ""}`, title: this.titleText }, this.icon && !hasMenuItems && (h("div", { key: '5f63a9c1776deeff0f16788cd208425c19faea4c', class: `sidebar__nav-item-icon-wrapper ${!this.showIcon && !isCollapsed ? "noIcon" : ""}` }, h("ifx-icon", { key: '7c70ead3878a8170cb277e154d1fb4b4bae75100', icon: this.icon }))), h("div", { key: '05813c42f2e8b7aa4cf923c3332a9d2992ca7feb', class: `sidebar__nav-item-label ${this.fontWeight === "bold" ? "font-weight-bold" : "font-weight-normal"}` }, h("slot", { key: '1bca5852f7ed9c74780ba7a752b5230cec7aa890' })), (this.isExpandable || !isNaN(this.numberIndicator)) && (h("div", { key: 'e40b07ffabe995887a15c86aac227e4ef835c869', class: `sidebar__nav-item-indicator ${!isCollapsed || this.icon ? "" : "indicator-hidden"}` }, this.isExpandable && (h("span", { key: 'd2a1d2a7408c84ce4ba63c934a49865d145d4006', class: "item__arrow-wrapper" }, h("ifx-icon", { key: 'a4c36d567bf9fb983b417907150a25a0e6ddd485', icon: "chevron-down-16" }))), this.numberIndicator > 0 &&
+            !this.isExpandable &&
+            !this.isNested && (h("span", { key: 'a35ffca207c63deb9d4d669371e91e6704bd8ac7', class: "item__number-indicator" }, h("ifx-indicator", { key: '322db1f567efdb6a319cad33f23e437d2dbc9d4f', variant: this.indicatorVariant, number: this.numberIndicator })))))), this.isExpandable && h("ul", { key: '7555221a3fbb99db4df2b440dec33a3d27d47824', class: "expandable__submenu" })));
+    }
+    static get watchers() { return {
+        "active": [{
+                "handleActiveChange": 0
+            }],
+        "numberIndicator": [{
+                "handleNumberIndicatorChange": 0
+            }]
+    }; }
+};
+SidebarItem.style = sidebarItemCss();
+
+export { SidebarItem as ifx_sidebar_item };

package/dist/esm/ifx-sidebar-separator.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-CY4s4b6R.js';
+
+const sidebarSeparatorCss = () => `.sidebar-separator{height:1px;background-color:#eeeded;margin:8px 0px}`;
+
+const SidebarSeparator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return h("div", { key: '8d065ddba0a3c426ec2f47af830444b9ba0566e4', class: "sidebar-separator" });
+    }
+};
+SidebarSeparator.style = sidebarSeparatorCss();
+
+export { SidebarSeparator as ifx_sidebar_separator };

package/dist/esm/ifx-sidebar-title.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, a as getElement, h } from './index-CY4s4b6R.js';
+
+const sidebarTitleCss = () => `:host{position:relative;display:var(--ifx-sidebar-title-display, block)}:host([data-show-in-collapsed=true]){display:var(--ifx-sidebar-title-show-in-collapsed-display, block)}.sidebar__title{width:100%;height:fit-content;padding:var(--ifx-sidebar-title-padding, 12px 0)}.sidebar__title-label{min-height:20px;font:600 0.875rem/1.25rem "Source Sans 3";font-family:var(--ifx-font-family);text-transform:uppercase;color:#575352;letter-spacing:3px;display:var(--ifx-sidebar-title-label-display, block);word-break:break-all}`;
+
+const SidebarTitle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Show item/content when the sidebar is collapsed */
+    showInCollapsed = false;
+    componentWillLoad() {
+        // Set data attribute for CSS targeting
+        this.el.setAttribute("data-show-in-collapsed", this.showInCollapsed.toString());
+    }
+    render() {
+        return (h("div", { key: 'a10a18e87ba13c18bc16e9c9e4daad1b28d32cd2', class: "sidebar__title" }, h("div", { key: '3847f59c397bc13b8e70f5cd68236b4d4052e147', class: "sidebar__title-label" }, h("slot", { key: '708bbf1f59fc926ba84ffa46d823a7593374c8fa' }))));
+    }
+};
+SidebarTitle.style = sidebarTitleCss();
+
+export { SidebarTitle as ifx_sidebar_title };