@infineon/infineon-design-system-stencil 27.1.0 → 27.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js +6 -6
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js.map +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar-item.js +6 -6
- package/dist/collection/components/navigation/sidebar/sidebar-item.js.map +1 -1
- package/dist/components/ifx-sidebar-item.js +6 -6
- package/dist/components/ifx-sidebar-item.js.map +1 -1
- package/dist/esm/ifx-sidebar-item.entry.js +6 -6
- package/dist/esm/ifx-sidebar-item.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-4673aa07.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-4673aa07.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-1fd9b636.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-1fd9b636.entry.js.map +0 -1
|
@@ -14,7 +14,7 @@ const SidebarItem = class {
|
|
|
14
14
|
this.ifxSidebarNavigationItem = index.createEvent(this, "ifxSidebarNavigationItem", 7);
|
|
15
15
|
this.ifxSidebarActionItem = index.createEvent(this, "ifxSidebarActionItem", 7);
|
|
16
16
|
this.icon = "";
|
|
17
|
-
this.hasIcon =
|
|
17
|
+
this.hasIcon = true;
|
|
18
18
|
this.hasIconWrapper = false;
|
|
19
19
|
this.href = "";
|
|
20
20
|
this.internalHref = "";
|
|
@@ -255,11 +255,11 @@ const SidebarItem = class {
|
|
|
255
255
|
}
|
|
256
256
|
render() {
|
|
257
257
|
var _a, _b;
|
|
258
|
-
return (index.h("div", { key: '
|
|
259
|
-
index.h("div", { key: '
|
|
260
|
-
index.h("div", { key: '
|
|
261
|
-
index.h("span", { key: '
|
|
262
|
-
index.h("span", { key: '
|
|
258
|
+
return (index.h("div", { key: '3e35a92d13b0f05f15f8503b1ecd15171b842f0e' }, index.h("a", { key: '0f0a859e7eae80830332c31fbde2106ee7cc5109', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
|
|
259
|
+
index.h("div", { key: '9a8f270cb4f2102b6902ab6ba5ac0a261a08bbba', class: `sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : ""}` }, index.h("ifx-icon", { key: '62b5c9569893abfbd68569fe6df317547135c0e9', icon: this.icon })), index.h("div", { key: '2a94c0e7ddc4d4648029ae77f70fc309d994fb26', class: "sidebar__nav-item-label" }, index.h("slot", { key: '041327de83356d87d251150a61cc215976972bab' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
|
|
260
|
+
index.h("div", { key: '251376a9a98cbff9ee8399319e9771c6d42b3b86', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
|
|
261
|
+
index.h("span", { key: '9d711269ce896b4b1e981447b505f7d7f71d5ca4', class: 'item__arrow-wrapper' }, index.h("ifx-icon", { key: 'cb61d9d12efc1d628abd56f2db296e5e5e53f29a', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
|
|
262
|
+
index.h("span", { key: '5df812fe492f39872f43ae476ba947b285b18e15', class: 'item__number-indicator' }, index.h("ifx-number-indicator", { key: '280cd539c27c94f061178944287dfd891f27a479' }, this.numberIndicator)))), this.isExpandable && index.h("ul", { key: 'ddbf8ff9992fe85b15cb81dad9645368c12ae6da', class: 'expandable__submenu' })));
|
|
263
263
|
}
|
|
264
264
|
get el() { return index.getElement(this); }
|
|
265
265
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-sidebar-item.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = false;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ifx-sidebar-item.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = true;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
export class SidebarItem {
|
|
3
3
|
constructor() {
|
|
4
4
|
this.icon = "";
|
|
5
|
-
this.hasIcon =
|
|
5
|
+
this.hasIcon = true;
|
|
6
6
|
this.hasIconWrapper = false;
|
|
7
7
|
this.href = "";
|
|
8
8
|
this.internalHref = "";
|
|
@@ -243,11 +243,11 @@ export class SidebarItem {
|
|
|
243
243
|
}
|
|
244
244
|
render() {
|
|
245
245
|
var _a, _b;
|
|
246
|
-
return (h("div", { key: '
|
|
247
|
-
h("div", { key: '
|
|
248
|
-
h("div", { key: '
|
|
249
|
-
h("span", { key: '
|
|
250
|
-
h("span", { key: '
|
|
246
|
+
return (h("div", { key: '3e35a92d13b0f05f15f8503b1ecd15171b842f0e' }, h("a", { key: '0f0a859e7eae80830332c31fbde2106ee7cc5109', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
|
|
247
|
+
h("div", { key: '9a8f270cb4f2102b6902ab6ba5ac0a261a08bbba', class: `sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: '62b5c9569893abfbd68569fe6df317547135c0e9', icon: this.icon })), h("div", { key: '2a94c0e7ddc4d4648029ae77f70fc309d994fb26', class: "sidebar__nav-item-label" }, h("slot", { key: '041327de83356d87d251150a61cc215976972bab' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
|
|
248
|
+
h("div", { key: '251376a9a98cbff9ee8399319e9771c6d42b3b86', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
|
|
249
|
+
h("span", { key: '9d711269ce896b4b1e981447b505f7d7f71d5ca4', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: 'cb61d9d12efc1d628abd56f2db296e5e5e53f29a', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
|
|
250
|
+
h("span", { key: '5df812fe492f39872f43ae476ba947b285b18e15', class: 'item__number-indicator' }, h("ifx-number-indicator", { key: '280cd539c27c94f061178944287dfd891f27a479' }, this.numberIndicator)))), this.isExpandable && h("ul", { key: 'ddbf8ff9992fe85b15cb81dad9645368c12ae6da', class: 'expandable__submenu' })));
|
|
251
251
|
}
|
|
252
252
|
static get is() { return "ifx-sidebar-item"; }
|
|
253
253
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-item.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = false;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sidebar-item.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = true;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"]}
|
|
@@ -14,7 +14,7 @@ const SidebarItem = /*@__PURE__*/ proxyCustomElement(class SidebarItem extends H
|
|
|
14
14
|
this.ifxSidebarNavigationItem = createEvent(this, "ifxSidebarNavigationItem", 7);
|
|
15
15
|
this.ifxSidebarActionItem = createEvent(this, "ifxSidebarActionItem", 7);
|
|
16
16
|
this.icon = "";
|
|
17
|
-
this.hasIcon =
|
|
17
|
+
this.hasIcon = true;
|
|
18
18
|
this.hasIconWrapper = false;
|
|
19
19
|
this.href = "";
|
|
20
20
|
this.internalHref = "";
|
|
@@ -255,11 +255,11 @@ const SidebarItem = /*@__PURE__*/ proxyCustomElement(class SidebarItem extends H
|
|
|
255
255
|
}
|
|
256
256
|
render() {
|
|
257
257
|
var _a, _b;
|
|
258
|
-
return (h("div", { key: '
|
|
259
|
-
h("div", { key: '
|
|
260
|
-
h("div", { key: '
|
|
261
|
-
h("span", { key: '
|
|
262
|
-
h("span", { key: '
|
|
258
|
+
return (h("div", { key: '3e35a92d13b0f05f15f8503b1ecd15171b842f0e' }, h("a", { key: '0f0a859e7eae80830332c31fbde2106ee7cc5109', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
|
|
259
|
+
h("div", { key: '9a8f270cb4f2102b6902ab6ba5ac0a261a08bbba', class: `sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: '62b5c9569893abfbd68569fe6df317547135c0e9', icon: this.icon })), h("div", { key: '2a94c0e7ddc4d4648029ae77f70fc309d994fb26', class: "sidebar__nav-item-label" }, h("slot", { key: '041327de83356d87d251150a61cc215976972bab' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
|
|
260
|
+
h("div", { key: '251376a9a98cbff9ee8399319e9771c6d42b3b86', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
|
|
261
|
+
h("span", { key: '9d711269ce896b4b1e981447b505f7d7f71d5ca4', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: 'cb61d9d12efc1d628abd56f2db296e5e5e53f29a', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
|
|
262
|
+
h("span", { key: '5df812fe492f39872f43ae476ba947b285b18e15', class: 'item__number-indicator' }, h("ifx-number-indicator", { key: '280cd539c27c94f061178944287dfd891f27a479' }, this.numberIndicator)))), this.isExpandable && h("ul", { key: 'ddbf8ff9992fe85b15cb81dad9645368c12ae6da', class: 'expandable__submenu' })));
|
|
263
263
|
}
|
|
264
264
|
get el() { return this; }
|
|
265
265
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-sidebar-item.js","mappings":"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","names":[],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = false;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ifx-sidebar-item.js","mappings":"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","names":[],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = true;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -10,7 +10,7 @@ const SidebarItem = class {
|
|
|
10
10
|
this.ifxSidebarNavigationItem = createEvent(this, "ifxSidebarNavigationItem", 7);
|
|
11
11
|
this.ifxSidebarActionItem = createEvent(this, "ifxSidebarActionItem", 7);
|
|
12
12
|
this.icon = "";
|
|
13
|
-
this.hasIcon =
|
|
13
|
+
this.hasIcon = true;
|
|
14
14
|
this.hasIconWrapper = false;
|
|
15
15
|
this.href = "";
|
|
16
16
|
this.internalHref = "";
|
|
@@ -251,11 +251,11 @@ const SidebarItem = class {
|
|
|
251
251
|
}
|
|
252
252
|
render() {
|
|
253
253
|
var _a, _b;
|
|
254
|
-
return (h("div", { key: '
|
|
255
|
-
h("div", { key: '
|
|
256
|
-
h("div", { key: '
|
|
257
|
-
h("span", { key: '
|
|
258
|
-
h("span", { key: '
|
|
254
|
+
return (h("div", { key: '3e35a92d13b0f05f15f8503b1ecd15171b842f0e' }, h("a", { key: '0f0a859e7eae80830332c31fbde2106ee7cc5109', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
|
|
255
|
+
h("div", { key: '9a8f270cb4f2102b6902ab6ba5ac0a261a08bbba', class: `sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: '62b5c9569893abfbd68569fe6df317547135c0e9', icon: this.icon })), h("div", { key: '2a94c0e7ddc4d4648029ae77f70fc309d994fb26', class: "sidebar__nav-item-label" }, h("slot", { key: '041327de83356d87d251150a61cc215976972bab' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
|
|
256
|
+
h("div", { key: '251376a9a98cbff9ee8399319e9771c6d42b3b86', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
|
|
257
|
+
h("span", { key: '9d711269ce896b4b1e981447b505f7d7f71d5ca4', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: 'cb61d9d12efc1d628abd56f2db296e5e5e53f29a', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
|
|
258
|
+
h("span", { key: '5df812fe492f39872f43ae476ba947b285b18e15', class: 'item__number-indicator' }, h("ifx-number-indicator", { key: '280cd539c27c94f061178944287dfd891f27a479' }, this.numberIndicator)))), this.isExpandable && h("ul", { key: 'ddbf8ff9992fe85b15cb81dad9645368c12ae6da', class: 'expandable__submenu' })));
|
|
259
259
|
}
|
|
260
260
|
get el() { return getElement(this); }
|
|
261
261
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-sidebar-item.entry.js","mappings":"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","names":[],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = false;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ifx-sidebar-item.entry.js","mappings":"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","names":[],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = true;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,b as i}from"./p-fd788b6a.js";export{s as setNonce}from"./p-fd788b6a.js";import{g as a}from"./p-e1255160.js";var n=()=>{{o(t.prototype)}const i=import.meta.url;const a={};if(i!==""){a.resourcesUrl=new URL(".",i).href}return e(a)};var o=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const i=t.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){i.appendChild(a[e].cloneNode(true))}}}return i}};n().then((async e=>{await a();return i(JSON.parse('[["p-51406939",[[1,"ifx-table",{"cols":[8],"rows":[8],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"filterOrientation":[1,"filter-orientation"],"showLoading":[4,"show-loading"],"currentPage":[32],"rowData":[32],"colData":[32],"filterOptions":[32],"currentFilters":[32],"uniqueKey":[32],"showSidebarFilters":[32],"matchingResultsCount":[32],"onBtShowLoading":[64]},[[0,"ifxChipChange","handleChipChange"]]]]],["p-b09a2529",[[1,"ifx-set-filter",{"filterName":[1,"filter-name"],"filterLabel":[1,"filter-label"],"placeholder":[1],"type":[1],"options":[1],"filterValues":[32]}]]],["p-c74203ff",[[1,"ifx-faq"]]],["p-fc5516c0",[[1,"ifx-list-entry",{"value":[1028],"label":[1],"type":[1]},[[0,"ifxChange","handleFilterEntryChange"]],{"value":["valueChanged"]}]]],["p-bd8f1b2d",[[1,"ifx-overview-table"]]],["p-ac442a85",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-fb338051",[[1,"ifx-filter-accordion",{"maxVisibleItems":[2,"max-visible-items"],"filterGroupName":[1,"filter-group-name"],"expanded":[32],"count":[32],"totalItems":[32]}]]],["p-06faf37f",[[1,"ifx-filter-bar",{"maxShownFilters":[2,"max-shown-filters"],"showMoreFiltersButton":[4,"show-more-filters-button"],"selectedOptions":[32],"showAllFilters":[32],"visibleSlots":[32]}]]],["p-2577207f",[[1,"ifx-filter-search",{"filterName":[1,"filter-name"],"disabled":[4],"filterValue":[1025,"filter-value"],"filterKey":[1,"filter-key"],"filterOrientation":[1,"filter-orientation"],"placeholder":[1],"showDeleteIcon":[32]},[[0,"ifxInput","handleFilterSearchChange"]],{"value":["valueChanged"]}]]],["p-1c25290f",[[1,"ifx-list",{"name":[1],"maxVisibleItems":[2,"max-visible-items"],"type":[1],"resetTrigger":[1028,"reset-trigger"],"expanded":[32],"showMore":[32],"selectedCount":[32],"totalItems":[32],"internalResetTrigger":[32]},null,{"type":["handleTypeChange"],"resetTrigger":["resetTriggerChanged"]}]]],["p-bb09ad19",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-842b14f0",[[1,"ifx-notification",{"icon":[1],"variant":[1],"linkText":[1,"link-text"],"linkHref":[1,"link-href"],"linkTarget":[1,"link-target"]}]]],["p-6afc0f0c",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"maxlength":[2],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-1fd9b636",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[1,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-cd74d6ac",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4],"AriaLive":[1,"aria-live"],"uniqueId":[32]}]]],["p-6738b563",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-ea642823",[[65,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"AriaLabel":[1,"aria-label"]}]]],["p-571157c7",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-c8afe5b2",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-9121ea15",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-206403c0",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxSearchBarIsOpen","handleSearchBarToggle"]]]]],["p-f473d73a",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-998d7454",[[1,"ifx-segment",{"icon":[1],"segmentIndex":[2,"segment-index"],"selected":[1028],"value":[1]}]]],["p-61a426a2",[[1,"ifx-segmented-control",{"caption":[1],"label":[1],"size":[1]},[[0,"segmentSelect","onSegmentSelect"]]]]],["p-891c6d44",[[1,"ifx-slider",{"min":[2],"max":[2],"step":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-dfc44ec5",[[1,"ifx-step",{"complete":[4],"disabled":[4],"error":[1028],"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[16],"active":[32],"clickable":[32]},[[4,"ifxChange","onStepChange"]],{"stepperState":["updateCurrentStep"],"active":["updateErrorState"]}]]],["p-fcf22eae",[[1,"ifx-tabs",{"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[9,"resize","updateBorderOnWindowResize"],[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-c7231a5a",[[1,"ifx-tag",{"icon":[1]}]]],["p-33f673cb",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-df248b01",[[1,"ifx-badge"]]],["p-d747925a",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"gridOptions":[32],"gridApi":[32],"uniqueKey":[32]}]]],["p-b6ca1f36",[[1,"ifx-breadcrumb"]]],["p-ed447b6b",[[1,"ifx-breadcrumb-item",{"isLastItem":[32],"uniqueId":[32],"hasDropdownMenu":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-4dbc7e64",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"AriaLabel":[1,"aria-label"],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-ad4802ac",[[1,"ifx-card-headline",{"direction":[32],"hasDesc":[32]}]]],["p-2eac355e",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-ebb46a31",[[1,"ifx-card-links"]]],["p-71289fc0",[[1,"ifx-card-overline"]]],["p-050d1536",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-0da96006",[[1,"ifx-content-switcher",{"items":[32],"activeIndex":[32],"hoverIndex":[32],"focusIndex":[32],"dividers":[32]}]]],["p-9d12f305",[[1,"ifx-content-switcher-item",{"selected":[4],"value":[1]}]]],["p-5ebcf3af",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-61c178a5",[[1,"ifx-dropdown-header"]]],["p-a21ded58",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-e0230aef",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-3ae58af4",[[1,"ifx-filter-type-group",{"selectedOptions":[32]}]]],["p-8629f472",[[1,"ifx-footer",{"copyrightText":[1,"copyright-text"],"currentYear":[32]}]]],["p-f95f530f",[[1,"ifx-footer-column"]]],["p-3be3e180",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-b1189b21",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-f2172993",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"userName":[1,"user-name"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-f5e54983",[[1,"ifx-progress-bar",{"value":[2],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-6c093faa",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-d4a4ae48",[[1,"ifx-sidebar-title"]]],["p-9e222148",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-90dd321d",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-9f5cf26b",[[1,"ifx-stepper",{"activeStep":[1026,"active-step"],"indicatorPosition":[1,"indicator-position"],"showStepNumber":[4,"show-step-number"],"variant":[1],"stepsCount":[32],"shouldEmitEvent":[32]},[[0,"ifxChange","onStepChange"]],{"activeStep":["handleActiveStep"]}]]],["p-9e1163a7",[[65,"ifx-switch",{"checked":[4],"name":[1],"disabled":[4],"value":[1],"internalChecked":[32],"isChecked":[64]},null,{"checked":["valueChanged"]}]]],["p-f75e634e",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-ee24197c",[[4,"ifx-radio-button",{"disabled":[4],"value":[1],"error":[4],"size":[1],"name":[1],"checked":[4],"internalChecked":[32],"hasSlot":[32],"inputElement":[32],"isChecked":[64]},[[8,"change","handleChange"]]]]],["p-275dc206",[[1,"ifx-dropdown-separator"]]],["p-45c681f5",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-b375e899",[[65,"ifx-checkbox",{"disabled":[4],"checked":[4],"error":[4],"size":[1],"indeterminate":[4],"value":[1],"internalChecked":[32],"internalIndeterminate":[32],"isChecked":[64],"toggleCheckedState":[64]},null,{"checked":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-fd27d9f4",[[65,"ifx-multiselect",{"name":[1],"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"showSearch":[4,"show-search"],"showSelectAll":[4,"show-select-all"],"internalError":[32],"internalErrorMessage":[32],"persistentSelectedOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32],"optionCount":[32],"optionsProcessed":[32]},null,{"error":["updateInternalError"],"errorMessage":["updateInternalErrorMessage"],"loadedOptions":["loadedOptionsChanged"],"persistentSelectedOptions":["onSelectionChange"]}],[65,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"maxlength":[2],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-5b868ac1",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"AriaLive":[2,"aria-live"],"internalOpen":[32]},[[0,"keydown","handleKeydown"]],{"open":["openChanged"]}],[17,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-20ca0cb4",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"placeholder":[1],"maxlength":[2],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-3cda6479",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]},[[2,"click","handleClick"]]]]],["p-ef245100",[[0,"ifx-select",{"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"showSearch":[4,"show-search"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"disabled":[4],"placeholderValue":[1,"placeholder-value"],"options":[1025],"size":[1],"selectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]],{"disabled":["watchDisabled"]}]]],["p-863bc1da",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]],[1,"ifx-chip",{"placeholder":[1],"size":[1],"value":[1025],"variant":[1],"readOnly":[4,"read-only"],"opened":[32],"selectedOptions":[32]},[[5,"mousedown","closeDropdownOnOutsideClick"],[0,"ifxChipItemSelect","updateSelectedOptions"]],{"value":["handleValueChange"],"readOnly":["handleReadOnlyChange"]}],[1,"ifx-chip-item",{"value":[1],"chipState":[16],"selected":[1540]},[[16,"ifxChipItemSelect","updateItemSelection"]],{"selected":["validateSelected"]}]]],["p-0a6120f5",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"AriaLabel":[1,"aria-label"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-2f932dd5",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-946886ee",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
1
|
+
import{p as e,H as t,b as i}from"./p-fd788b6a.js";export{s as setNonce}from"./p-fd788b6a.js";import{g as a}from"./p-e1255160.js";var n=()=>{{o(t.prototype)}const i=import.meta.url;const a={};if(i!==""){a.resourcesUrl=new URL(".",i).href}return e(a)};var o=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const i=t.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){i.appendChild(a[e].cloneNode(true))}}}return i}};n().then((async e=>{await a();return i(JSON.parse('[["p-51406939",[[1,"ifx-table",{"cols":[8],"rows":[8],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"filterOrientation":[1,"filter-orientation"],"showLoading":[4,"show-loading"],"currentPage":[32],"rowData":[32],"colData":[32],"filterOptions":[32],"currentFilters":[32],"uniqueKey":[32],"showSidebarFilters":[32],"matchingResultsCount":[32],"onBtShowLoading":[64]},[[0,"ifxChipChange","handleChipChange"]]]]],["p-b09a2529",[[1,"ifx-set-filter",{"filterName":[1,"filter-name"],"filterLabel":[1,"filter-label"],"placeholder":[1],"type":[1],"options":[1],"filterValues":[32]}]]],["p-c74203ff",[[1,"ifx-faq"]]],["p-fc5516c0",[[1,"ifx-list-entry",{"value":[1028],"label":[1],"type":[1]},[[0,"ifxChange","handleFilterEntryChange"]],{"value":["valueChanged"]}]]],["p-bd8f1b2d",[[1,"ifx-overview-table"]]],["p-ac442a85",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-fb338051",[[1,"ifx-filter-accordion",{"maxVisibleItems":[2,"max-visible-items"],"filterGroupName":[1,"filter-group-name"],"expanded":[32],"count":[32],"totalItems":[32]}]]],["p-06faf37f",[[1,"ifx-filter-bar",{"maxShownFilters":[2,"max-shown-filters"],"showMoreFiltersButton":[4,"show-more-filters-button"],"selectedOptions":[32],"showAllFilters":[32],"visibleSlots":[32]}]]],["p-2577207f",[[1,"ifx-filter-search",{"filterName":[1,"filter-name"],"disabled":[4],"filterValue":[1025,"filter-value"],"filterKey":[1,"filter-key"],"filterOrientation":[1,"filter-orientation"],"placeholder":[1],"showDeleteIcon":[32]},[[0,"ifxInput","handleFilterSearchChange"]],{"value":["valueChanged"]}]]],["p-1c25290f",[[1,"ifx-list",{"name":[1],"maxVisibleItems":[2,"max-visible-items"],"type":[1],"resetTrigger":[1028,"reset-trigger"],"expanded":[32],"showMore":[32],"selectedCount":[32],"totalItems":[32],"internalResetTrigger":[32]},null,{"type":["handleTypeChange"],"resetTrigger":["resetTriggerChanged"]}]]],["p-bb09ad19",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-842b14f0",[[1,"ifx-notification",{"icon":[1],"variant":[1],"linkText":[1,"link-text"],"linkHref":[1,"link-href"],"linkTarget":[1,"link-target"]}]]],["p-6afc0f0c",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"maxlength":[2],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-4673aa07",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[1,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-cd74d6ac",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4],"AriaLive":[1,"aria-live"],"uniqueId":[32]}]]],["p-6738b563",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-ea642823",[[65,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"AriaLabel":[1,"aria-label"]}]]],["p-571157c7",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-c8afe5b2",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-9121ea15",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-206403c0",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxSearchBarIsOpen","handleSearchBarToggle"]]]]],["p-f473d73a",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-998d7454",[[1,"ifx-segment",{"icon":[1],"segmentIndex":[2,"segment-index"],"selected":[1028],"value":[1]}]]],["p-61a426a2",[[1,"ifx-segmented-control",{"caption":[1],"label":[1],"size":[1]},[[0,"segmentSelect","onSegmentSelect"]]]]],["p-891c6d44",[[1,"ifx-slider",{"min":[2],"max":[2],"step":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-dfc44ec5",[[1,"ifx-step",{"complete":[4],"disabled":[4],"error":[1028],"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[16],"active":[32],"clickable":[32]},[[4,"ifxChange","onStepChange"]],{"stepperState":["updateCurrentStep"],"active":["updateErrorState"]}]]],["p-fcf22eae",[[1,"ifx-tabs",{"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[9,"resize","updateBorderOnWindowResize"],[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-c7231a5a",[[1,"ifx-tag",{"icon":[1]}]]],["p-33f673cb",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-df248b01",[[1,"ifx-badge"]]],["p-d747925a",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"gridOptions":[32],"gridApi":[32],"uniqueKey":[32]}]]],["p-b6ca1f36",[[1,"ifx-breadcrumb"]]],["p-ed447b6b",[[1,"ifx-breadcrumb-item",{"isLastItem":[32],"uniqueId":[32],"hasDropdownMenu":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-4dbc7e64",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"AriaLabel":[1,"aria-label"],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-ad4802ac",[[1,"ifx-card-headline",{"direction":[32],"hasDesc":[32]}]]],["p-2eac355e",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-ebb46a31",[[1,"ifx-card-links"]]],["p-71289fc0",[[1,"ifx-card-overline"]]],["p-050d1536",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-0da96006",[[1,"ifx-content-switcher",{"items":[32],"activeIndex":[32],"hoverIndex":[32],"focusIndex":[32],"dividers":[32]}]]],["p-9d12f305",[[1,"ifx-content-switcher-item",{"selected":[4],"value":[1]}]]],["p-5ebcf3af",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-61c178a5",[[1,"ifx-dropdown-header"]]],["p-a21ded58",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-e0230aef",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-3ae58af4",[[1,"ifx-filter-type-group",{"selectedOptions":[32]}]]],["p-8629f472",[[1,"ifx-footer",{"copyrightText":[1,"copyright-text"],"currentYear":[32]}]]],["p-f95f530f",[[1,"ifx-footer-column"]]],["p-3be3e180",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-b1189b21",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-f2172993",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"userName":[1,"user-name"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-f5e54983",[[1,"ifx-progress-bar",{"value":[2],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-6c093faa",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-d4a4ae48",[[1,"ifx-sidebar-title"]]],["p-9e222148",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-90dd321d",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-9f5cf26b",[[1,"ifx-stepper",{"activeStep":[1026,"active-step"],"indicatorPosition":[1,"indicator-position"],"showStepNumber":[4,"show-step-number"],"variant":[1],"stepsCount":[32],"shouldEmitEvent":[32]},[[0,"ifxChange","onStepChange"]],{"activeStep":["handleActiveStep"]}]]],["p-9e1163a7",[[65,"ifx-switch",{"checked":[4],"name":[1],"disabled":[4],"value":[1],"internalChecked":[32],"isChecked":[64]},null,{"checked":["valueChanged"]}]]],["p-f75e634e",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-ee24197c",[[4,"ifx-radio-button",{"disabled":[4],"value":[1],"error":[4],"size":[1],"name":[1],"checked":[4],"internalChecked":[32],"hasSlot":[32],"inputElement":[32],"isChecked":[64]},[[8,"change","handleChange"]]]]],["p-275dc206",[[1,"ifx-dropdown-separator"]]],["p-45c681f5",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-b375e899",[[65,"ifx-checkbox",{"disabled":[4],"checked":[4],"error":[4],"size":[1],"indeterminate":[4],"value":[1],"internalChecked":[32],"internalIndeterminate":[32],"isChecked":[64],"toggleCheckedState":[64]},null,{"checked":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-fd27d9f4",[[65,"ifx-multiselect",{"name":[1],"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"showSearch":[4,"show-search"],"showSelectAll":[4,"show-select-all"],"internalError":[32],"internalErrorMessage":[32],"persistentSelectedOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32],"optionCount":[32],"optionsProcessed":[32]},null,{"error":["updateInternalError"],"errorMessage":["updateInternalErrorMessage"],"loadedOptions":["loadedOptionsChanged"],"persistentSelectedOptions":["onSelectionChange"]}],[65,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"maxlength":[2],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-5b868ac1",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"AriaLive":[2,"aria-live"],"internalOpen":[32]},[[0,"keydown","handleKeydown"]],{"open":["openChanged"]}],[17,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-20ca0cb4",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"placeholder":[1],"maxlength":[2],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-3cda6479",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]},[[2,"click","handleClick"]]]]],["p-ef245100",[[0,"ifx-select",{"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"showSearch":[4,"show-search"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"disabled":[4],"placeholderValue":[1,"placeholder-value"],"options":[1025],"size":[1],"selectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]],{"disabled":["watchDisabled"]}]]],["p-863bc1da",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]],[1,"ifx-chip",{"placeholder":[1],"size":[1],"value":[1025],"variant":[1],"readOnly":[4,"read-only"],"opened":[32],"selectedOptions":[32]},[[5,"mousedown","closeDropdownOnOutsideClick"],[0,"ifxChipItemSelect","updateSelectedOptions"]],{"value":["handleValueChange"],"readOnly":["handleReadOnlyChange"]}],[1,"ifx-chip-item",{"value":[1],"chipState":[16],"selected":[1540]},[[16,"ifxChipItemSelect","updateItemSelection"]],{"selected":["validateSelected"]}]]],["p-0a6120f5",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"AriaLabel":[1,"aria-label"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-2f932dd5",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-946886ee",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as i,h as t,g as s}from"./p-fd788b6a.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{position:relative}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .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: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)}.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}.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;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.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:16px 0px 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:Source Sans 3;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;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow: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 a=n;const r=class{constructor(t){e(this,t);this.ifxSidebarMenu=i(this,"ifxSidebarMenu",7);this.ifxSidebarNavigationItem=i(this,"ifxSidebarNavigationItem",7);this.ifxSidebarActionItem=i(this,"ifxSidebarActionItem",7);this.icon="";this.hasIcon=true;this.hasIconWrapper=false;this.href="";this.internalHref="";this.target="_self";this.isExpandable=false;this.isNested=true;this.isSubMenuItem=false;this.numberIndicator=undefined;this.active=false;this.isActionItem=false;this.internalActiveState=false;this.value="";this.handleItemClick=undefined}handleActiveChange(e,i){if(this.isActionItem){this.internalActiveState=false;return}this.internalActiveState=e;if(e!==i){let i=this.getNavItem(this.el.shadowRoot);if(!this.isExpandable&&!e){this.handleClassList(i,"remove","active")}if(!this.isExpandable&&e){this.handleClassList(i,"add","active")}}}handleConsoleError(e){if(e.detail){this.hasIcon=false}else{this.hasIcon=true}}handleEventEmission(){this.ifxSidebarMenu.emit(this.el)}handleClassList(e,i,t){e.classList[i](t);if(i==="contains"){return e.classList.contains(t)}}getExpandableMenu(){const e=this.el.shadowRoot.querySelector(".expandable__submenu");return e}getNavItem(e){return e===null||e===void 0?void 0:e.querySelector(".sidebar__nav-item")}getSidebarMenuItems(e=this.el){const i=e.querySelectorAll("ifx-sidebar-item");if(i.length===0){return e.shadowRoot.querySelectorAll("ifx-sidebar-item")}return i}getSidebarMenuItem(){const e=this.el.shadowRoot.querySelector(".sidebar__nav-item");return e}toggleSubmenu(){if(this.isExpandable){const e=this.getSidebarMenuItem();const i=this.getExpandableMenu();this.handleClassList(i,"toggle","open");this.handleClassList(e,"toggle","open");this.handleEventEmission()}else{if(this.isActionItem){this.ifxSidebarActionItem.emit(this.el);return}else{this.handleActiveChange(true,this.internalActiveState);this.ifxSidebarNavigationItem.emit(this.el)}if(this.handleItemClick){this.handleItemClick(this.el)}}}handleExpandableMenu(e){const i=this.getExpandableMenu();e.forEach((e=>{const t=document.createElement("li");t.appendChild(e);i.appendChild(t)}))}parentElementIsSidebar(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-SIDEBAR"){return true}else return false}checkIfMenuItemIsNested(){const e=this.parentElementIsSidebar();if(e){this.isNested=false}}checkIfMenuItemIsSubMenu(){const e=this.el.parentElement;const i=this.getNavItem(e.shadowRoot);if(e.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&!this.handleClassList(i,"contains","header__section")){this.isSubMenuItem=true}else{this.isSubMenuItem=false}}isActive(e){const i=e.getAttribute("active");const t=i==="true";return t}getParentSection(e){let i=e.parentElement;while(i&&i.tagName.toUpperCase()!=="IFX-SIDEBAR"){if(i.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){return i}i=i.parentElement}return null}handleBorderIndicatorDisplacement(e){const i=(e,t)=>{const s=this.isActive(e);if(s){const e=this.handleClassList(t,"contains","open");const i=this.getActiveItemSection();if(!e){this.handleClassList(i,"add","active-section")}else{this.handleClassList(i,"remove","active-section")}}const n=this.getSidebarMenuItems(e);n.forEach((e=>i(e,t)))};const t=this.getSidebarMenuItems();t.forEach((t=>i(t,e)))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}getActiveItemSection(){const e=this.parentElementIsSidebar();if(e){const e=this.getNavItem(this.el.shadowRoot);return e}else{const e=this.getNavItem(this.el.shadowRoot);return e}}async setActiveClasses(){const e=this.getNavItem(this.el.shadowRoot);this.handleClassList(e,"add","active")}async expandMenu(e){const i=this.getSidebarMenuItem();const t=this.getExpandableMenu();this.handleClassList(t,"add","open");this.handleClassList(i,"add","open");if(e){this.handleClassList(t,"remove","active-section");this.handleClassList(i,"remove","active-section")}}async isItemExpandable(){return this.isExpandable}handleActiveState(){if(this.internalActiveState){this.setActiveClasses()}}handleKeyDown(e){if(e.key==="Enter"){this.toggleSubmenu()}}componentDidLoad(){this.handleActiveState();if(this.isExpandable){const e=this.getSidebarMenuItems();this.handleExpandableMenu(e)}}componentWillLoad(){this.internalActiveState=this.active;this.checkIfMenuItemIsNested();this.checkIfMenuItemIsSubMenu();this.setHref();const e=this.getSidebarMenuItems();if(e.length!==0){this.isExpandable=true}else{this.isExpandable=false}}componentWillUpdate(){if(this.active&&!this.internalActiveState){this.internalActiveState=this.active;this.ifxSidebarNavigationItem.emit(this.el)}}render(){var e,i;return t("div",{key:"3e35a92d13b0f05f15f8503b1ecd15171b842f0e"},t("a",{key:"0f0a859e7eae80830332c31fbde2106ee7cc5109",tabIndex:1,onKeyDown:e=>this.handleKeyDown(e),href:this.internalHref,onClick:()=>this.toggleSubmenu(),target:this.target,class:`sidebar__nav-item ${!this.isNested&&this.isExpandable?"header__section":""} ${this.isSubMenuItem?"submenu__item":""}`},this.icon&&t("div",{key:"9a8f270cb4f2102b6902ab6ba5ac0a261a08bbba",class:`sidebar__nav-item-icon-wrapper ${!this.hasIcon?"noIcon":""}`},t("ifx-icon",{key:"62b5c9569893abfbd68569fe6df317547135c0e9",icon:this.icon})),t("div",{key:"2a94c0e7ddc4d4648029ae77f70fc309d994fb26",class:"sidebar__nav-item-label"},t("slot",{key:"041327de83356d87d251150a61cc215976972bab"})),(this.isExpandable||((e=this.numberIndicator)===null||e===void 0?void 0:e.trim()))&&t("div",{key:"251376a9a98cbff9ee8399319e9771c6d42b3b86",class:"sidebar__nav-item-indicator"},this.isExpandable&&t("span",{key:"9d711269ce896b4b1e981447b505f7d7f71d5ca4",class:"item__arrow-wrapper"},t("ifx-icon",{key:"cb61d9d12efc1d628abd56f2db296e5e5e53f29a",icon:"chevron-down-12"})),((i=this.numberIndicator)===null||i===void 0?void 0:i.trim())&&!this.isExpandable&&!this.isNested&&t("span",{key:"5df812fe492f39872f43ae476ba947b285b18e15",class:"item__number-indicator"},t("ifx-number-indicator",{key:"280cd539c27c94f061178944287dfd891f27a479"},this.numberIndicator)))),this.isExpandable&&t("ul",{key:"ddbf8ff9992fe85b15cb81dad9645368c12ae6da",class:"expandable__submenu"}))}get el(){return s(this)}static get watchers(){return{active:["handleActiveChange"]}}};r.style=a;export{r as ifx_sidebar_item};
|
|
2
|
+
//# sourceMappingURL=p-4673aa07.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sidebarItemCss","IfxSidebarItemStyle0","SidebarItem","handleActiveChange","newValue","oldValue","this","isActionItem","internalActiveState","labelElement","getNavItem","el","shadowRoot","isExpandable","handleClassList","handleConsoleError","event","detail","hasIcon","handleEventEmission","ifxSidebarMenu","emit","type","className","classList","contains","getExpandableMenu","expandableSubmenu","querySelector","getSidebarMenuItems","sidebarItems","querySelectorAll","length","getSidebarMenuItem","sidebarItem","toggleSubmenu","menuItem","expandableMenu","ifxSidebarActionItem","ifxSidebarNavigationItem","handleItemClick","handleExpandableMenu","sidebarExpandableMenu","forEach","li","document","createElement","appendChild","parentElementIsSidebar","parentElement","tagName","toUpperCase","checkIfMenuItemIsNested","parentIsSidebar","isNested","checkIfMenuItemIsSubMenu","navItem","isSubMenuItem","isActive","iteratedComponent","activeAttributeValue","getAttribute","getParentSection","handleBorderIndicatorDisplacement","handleItem","item","isOpen","activeMenuItemSection","getActiveItemSection","children","child","topLevelItems","setHref","href","toLowerCase","trim","internalHref","undefined","setActiveClasses","activeMenuItem","expandMenu","ac","isItemExpandable","handleActiveState","handleKeyDown","key","componentDidLoad","componentWillLoad","active","componentWillUpdate","render","h","tabIndex","onKeyDown","onClick","target","class","icon","_a","numberIndicator","_b"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = true;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as i,h as t,g as s}from"./p-fd788b6a.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{position:relative}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .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: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)}.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}.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;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.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:16px 0px 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:Source Sans 3;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;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow: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 a=n;const r=class{constructor(t){e(this,t);this.ifxSidebarMenu=i(this,"ifxSidebarMenu",7);this.ifxSidebarNavigationItem=i(this,"ifxSidebarNavigationItem",7);this.ifxSidebarActionItem=i(this,"ifxSidebarActionItem",7);this.icon="";this.hasIcon=false;this.hasIconWrapper=false;this.href="";this.internalHref="";this.target="_self";this.isExpandable=false;this.isNested=true;this.isSubMenuItem=false;this.numberIndicator=undefined;this.active=false;this.isActionItem=false;this.internalActiveState=false;this.value="";this.handleItemClick=undefined}handleActiveChange(e,i){if(this.isActionItem){this.internalActiveState=false;return}this.internalActiveState=e;if(e!==i){let i=this.getNavItem(this.el.shadowRoot);if(!this.isExpandable&&!e){this.handleClassList(i,"remove","active")}if(!this.isExpandable&&e){this.handleClassList(i,"add","active")}}}handleConsoleError(e){if(e.detail){this.hasIcon=false}else{this.hasIcon=true}}handleEventEmission(){this.ifxSidebarMenu.emit(this.el)}handleClassList(e,i,t){e.classList[i](t);if(i==="contains"){return e.classList.contains(t)}}getExpandableMenu(){const e=this.el.shadowRoot.querySelector(".expandable__submenu");return e}getNavItem(e){return e===null||e===void 0?void 0:e.querySelector(".sidebar__nav-item")}getSidebarMenuItems(e=this.el){const i=e.querySelectorAll("ifx-sidebar-item");if(i.length===0){return e.shadowRoot.querySelectorAll("ifx-sidebar-item")}return i}getSidebarMenuItem(){const e=this.el.shadowRoot.querySelector(".sidebar__nav-item");return e}toggleSubmenu(){if(this.isExpandable){const e=this.getSidebarMenuItem();const i=this.getExpandableMenu();this.handleClassList(i,"toggle","open");this.handleClassList(e,"toggle","open");this.handleEventEmission()}else{if(this.isActionItem){this.ifxSidebarActionItem.emit(this.el);return}else{this.handleActiveChange(true,this.internalActiveState);this.ifxSidebarNavigationItem.emit(this.el)}if(this.handleItemClick){this.handleItemClick(this.el)}}}handleExpandableMenu(e){const i=this.getExpandableMenu();e.forEach((e=>{const t=document.createElement("li");t.appendChild(e);i.appendChild(t)}))}parentElementIsSidebar(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-SIDEBAR"){return true}else return false}checkIfMenuItemIsNested(){const e=this.parentElementIsSidebar();if(e){this.isNested=false}}checkIfMenuItemIsSubMenu(){const e=this.el.parentElement;const i=this.getNavItem(e.shadowRoot);if(e.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&!this.handleClassList(i,"contains","header__section")){this.isSubMenuItem=true}else{this.isSubMenuItem=false}}isActive(e){const i=e.getAttribute("active");const t=i==="true";return t}getParentSection(e){let i=e.parentElement;while(i&&i.tagName.toUpperCase()!=="IFX-SIDEBAR"){if(i.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){return i}i=i.parentElement}return null}handleBorderIndicatorDisplacement(e){const i=(e,t)=>{const s=this.isActive(e);if(s){const e=this.handleClassList(t,"contains","open");const i=this.getActiveItemSection();if(!e){this.handleClassList(i,"add","active-section")}else{this.handleClassList(i,"remove","active-section")}}const n=this.getSidebarMenuItems(e);n.forEach((e=>i(e,t)))};const t=this.getSidebarMenuItems();t.forEach((t=>i(t,e)))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}getActiveItemSection(){const e=this.parentElementIsSidebar();if(e){const e=this.getNavItem(this.el.shadowRoot);return e}else{const e=this.getNavItem(this.el.shadowRoot);return e}}async setActiveClasses(){const e=this.getNavItem(this.el.shadowRoot);this.handleClassList(e,"add","active")}async expandMenu(e){const i=this.getSidebarMenuItem();const t=this.getExpandableMenu();this.handleClassList(t,"add","open");this.handleClassList(i,"add","open");if(e){this.handleClassList(t,"remove","active-section");this.handleClassList(i,"remove","active-section")}}async isItemExpandable(){return this.isExpandable}handleActiveState(){if(this.internalActiveState){this.setActiveClasses()}}handleKeyDown(e){if(e.key==="Enter"){this.toggleSubmenu()}}componentDidLoad(){this.handleActiveState();if(this.isExpandable){const e=this.getSidebarMenuItems();this.handleExpandableMenu(e)}}componentWillLoad(){this.internalActiveState=this.active;this.checkIfMenuItemIsNested();this.checkIfMenuItemIsSubMenu();this.setHref();const e=this.getSidebarMenuItems();if(e.length!==0){this.isExpandable=true}else{this.isExpandable=false}}componentWillUpdate(){if(this.active&&!this.internalActiveState){this.internalActiveState=this.active;this.ifxSidebarNavigationItem.emit(this.el)}}render(){var e,i;return t("div",{key:"bc2389f99c66dfdfa4e8b63ebffc427b757c98d7"},t("a",{key:"d20b641971e654b4cdb892e969d329e9d42c00be",tabIndex:1,onKeyDown:e=>this.handleKeyDown(e),href:this.internalHref,onClick:()=>this.toggleSubmenu(),target:this.target,class:`sidebar__nav-item ${!this.isNested&&this.isExpandable?"header__section":""} ${this.isSubMenuItem?"submenu__item":""}`},this.icon&&t("div",{key:"9366cc5c9b2b73e033ce92cd4f13ad94b38e97cc",class:`sidebar__nav-item-icon-wrapper ${!this.hasIcon?"noIcon":""}`},t("ifx-icon",{key:"2d3136c68170220ed04ea3fc848b0da846e8bc8d",icon:this.icon})),t("div",{key:"8a8efe49cf7a4f936a2ed3d3d98840f443dc6901",class:"sidebar__nav-item-label"},t("slot",{key:"57272fbe261c4efab51a0f788e5a78985e2bb91b"})),(this.isExpandable||((e=this.numberIndicator)===null||e===void 0?void 0:e.trim()))&&t("div",{key:"f832760f64fd69926b6e777f6f7238752d069905",class:"sidebar__nav-item-indicator"},this.isExpandable&&t("span",{key:"f2ff438e8b5a235f400d7ba22a27f64312ef8365",class:"item__arrow-wrapper"},t("ifx-icon",{key:"f9f425678bae0c85b75009a29a75beedb7553cdc",icon:"chevron-down-12"})),((i=this.numberIndicator)===null||i===void 0?void 0:i.trim())&&!this.isExpandable&&!this.isNested&&t("span",{key:"e81ffe6b6fc0c2ef927ec1b1db5b11f835d2c25c",class:"item__number-indicator"},t("ifx-number-indicator",{key:"b3faaa09959e2073cbe557fafae2174899ea90e4"},this.numberIndicator)))),this.isExpandable&&t("ul",{key:"52fa10584b38ad7598ece885f9726a84a738433e",class:"expandable__submenu"}))}get el(){return s(this)}static get watchers(){return{active:["handleActiveChange"]}}};r.style=a;export{r as ifx_sidebar_item};
|
|
2
|
-
//# sourceMappingURL=p-1fd9b636.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["sidebarItemCss","IfxSidebarItemStyle0","SidebarItem","handleActiveChange","newValue","oldValue","this","isActionItem","internalActiveState","labelElement","getNavItem","el","shadowRoot","isExpandable","handleClassList","handleConsoleError","event","detail","hasIcon","handleEventEmission","ifxSidebarMenu","emit","type","className","classList","contains","getExpandableMenu","expandableSubmenu","querySelector","getSidebarMenuItems","sidebarItems","querySelectorAll","length","getSidebarMenuItem","sidebarItem","toggleSubmenu","menuItem","expandableMenu","ifxSidebarActionItem","ifxSidebarNavigationItem","handleItemClick","handleExpandableMenu","sidebarExpandableMenu","forEach","li","document","createElement","appendChild","parentElementIsSidebar","parentElement","tagName","toUpperCase","checkIfMenuItemIsNested","parentIsSidebar","isNested","checkIfMenuItemIsSubMenu","navItem","isSubMenuItem","isActive","iteratedComponent","activeAttributeValue","getAttribute","getParentSection","handleBorderIndicatorDisplacement","handleItem","item","isOpen","activeMenuItemSection","getActiveItemSection","children","child","topLevelItems","setHref","href","toLowerCase","trim","internalHref","undefined","setActiveClasses","activeMenuItem","expandMenu","ac","isItemExpandable","handleActiveState","handleKeyDown","key","componentDidLoad","componentWillLoad","active","componentWillUpdate","render","h","tabIndex","onKeyDown","onClick","target","class","icon","_a","numberIndicator","_b"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() hasIcon: boolean = false;\n @State() hasIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: string;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n @Prop() value: string = \"\"\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.hasIcon = false;\n } else {\n this.hasIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || this.numberIndicator?.trim()) && \n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-12\" />\n </span>\n }\n\n {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|