@coreui/angular 5.7.27 → 5.7.28

package/fesm2022/coreui-angular.mjs

@@ -4057,7 +4057,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 class FormFloatingDirective {
     /**
      * Enable floating labels
-     * @dafault boolean
+     * @returns boolean
+     * @default true
      */
     floating = input(true, { ...(ngDevMode ? { debugName: "floating" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'cFormFloating' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormFloatingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -5004,6 +5005,11 @@ class NavGroupService {
      */
     activeId = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether an active nav link opens the branch it sits in. Inherited by nested levels.
+     */
+    openOnActive = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOnActive" }] : /* istanbul ignore next */ []));
     /**
      * Opens the level owner within its own parent and cascades up to the root.
      * Replaced by the owning `c-nav-group`; stays a no-op for the root level.
@@ -5078,7 +5084,7 @@ class NavLinkDirective {
     #activeEffect = effect(() => {
         if (this.active()) {
             untracked(() => {
-                this.#navGroupService?.openBranch();
+                this.#openBranch();
             });
         }
     }, /* @ts-ignore */
@@ -5097,6 +5103,11 @@ class NavLinkDirective {
     ngOnDestroy() {
         this.#classObserver?.disconnect();
     }
+    #openBranch() {
+        if (this.#navGroupService?.openOnActive()) {
+            this.#navGroupService.openBranch();
+        }
+    }
     #observeActiveClass() {
         const host = this.#hostElement.nativeElement;
         if (!this.#navGroupService) {
@@ -5104,12 +5115,12 @@ class NavLinkDirective {
         }
         let wasActive = host.classList.contains('active');
         if (wasActive) {
-            this.#navGroupService.openBranch();
+            this.#openBranch();
         }
         this.#classObserver = new MutationObserver(() => {
             const active = host.classList.contains('active');
             if (active && !wasActive) {
-                this.#navGroupService?.openBranch();
+                this.#openBranch();
             }
             wasActive = active;
         });
@@ -5197,13 +5208,14 @@ class NavGroupComponent {
     visibleChange = output();
     #uncontrolledVisible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#uncontrolledVisible" }] : /* istanbul ignore next */ []));
-    display = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     visibleState = computed(() => {
         const parent = this.#parentNavGroupService;
         return parent ? parent.activeId() === this.#id : this.#uncontrolledVisible();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleState" }] : /* istanbul ignore next */ []));
+    // the group drops `show` in the same pass, hiding the items before cCollapse can measure them
+    display = linkedSignal({ ...(ngDevMode ? { debugName: "display" } : /* istanbul ignore next */ {}), source: this.visibleState,
+        computation: (visible, previous) => (previous?.source && !visible ? 'block' : null) });
     hostClasses = computed(() => {
         return {
             'nav-group': true,
@@ -5221,6 +5233,13 @@ class NavGroupComponent {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []));
+    #openOnActiveEffect = effect(() => {
+        const openOnActive = this.#parentNavGroupService?.openOnActive() ?? true;
+        untracked(() => {
+            this.#navGroupService.openOnActive.set(openOnActive);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#openOnActiveEffect" }] : /* istanbul ignore next */ []));
     toggleGroup(event) {
         event.preventDefault();
         const next = !this.visibleState();
@@ -8473,7 +8492,8 @@ class SidebarNavGroupComponent {
      * Determines when an inactive `c-sidebar-nav-group` closes.
      * - `path`: on an active route change only
      * - `close`: when another group is clicked
-     * - `none`: never, the group stays open
+     * - `none`: never, the group stays open — it stops reacting to the route altogether,
+     *   so a matching route neither opens it on init nor on a later navigation
      */
     dropdownMode = input('path', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dropdownMode" }] : /* istanbul ignore next */ []));
@@ -8512,7 +8532,7 @@ class SidebarNavGroupComponent {
                 this.openGroup(samePath);
             }
         });
-        if (this.samePath(this.#router.routerState.snapshot.url)) {
+        if (this.dropdownMode() !== 'none' && this.samePath(this.#router.routerState.snapshot.url)) {
             this.openGroup(true);
         }
         this.navGroupSubscription = this.#sidebarNavGroupService.sidebarNavGroupState$.subscribe((next) => {
@@ -8557,7 +8577,7 @@ class SidebarNavGroupComponent {
         this.display.set(state === 'collapsed' || state === 'open' ? null : 'block');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SidebarNavGroupComponent, isStandalone: true, selector: "c-sidebar-nav-group", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, providers: [SidebarNavHelper], ngImport: i0, template: "@let grpItem = item();\n<a\n  (click)=\"toggleGroup($event)\"\n  [cHtmlAttr]=\"$safeNavigationMigration(grpItem?.attributes)\"\n  class=\"nav-link nav-group-toggle\"\n  href\n>\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: grpItem }\" />\n  <ng-container>{{ grpItem?.name }}</ng-container>\n  @if (grpItem?.badge) {\n    <span [class]=\"grpItem | cSidebarNavBadge\">{{ grpItem?.badge?.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (collapseChange)=\"onCollapseChange($event)\"\n  [compact]=\"compact()\"\n  [dropdownMode]=\"dropdownMode()\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems()\"\n  [style.display]=\"display()\"\n  [visible]=\"!!open()\"\n  cCollapse\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [class]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [class]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"$safeNavigationMigration(item.iconComponent?.content)\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"$safeNavigationMigration(item.iconComponent?.name)\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [class]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-items{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => CollapseDirective), selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }, { kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavComponent), selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact", "role"] }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavIconPipe), name: "cSidebarNavIcon" }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavBadgePipe), name: "cSidebarNavBadge" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SidebarNavGroupComponent, isStandalone: true, selector: "c-sidebar-nav-group", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, providers: [SidebarNavHelper], ngImport: i0, template: "@let grpItem = item();\n<a\n  (click)=\"toggleGroup($event)\"\n  [cHtmlAttr]=\"$safeNavigationMigration(grpItem?.attributes)\"\n  class=\"nav-link nav-group-toggle\"\n  href\n>\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: grpItem }\" />\n  <ng-container>{{ grpItem?.name }}</ng-container>\n  @if (grpItem?.badge) {\n    <span [class]=\"grpItem | cSidebarNavBadge\">{{ grpItem?.badge?.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (collapseChange)=\"onCollapseChange($event)\"\n  [compact]=\"compact()\"\n  [dropdownMode]=\"dropdownMode()\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems()\"\n  [style.display]=\"display()\"\n  [visible]=\"!!open()\"\n  cCollapse\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [class]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [class]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"$safeNavigationMigration(item.iconComponent?.content)\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"$safeNavigationMigration(item.iconComponent?.name)\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [class]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-items{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => CollapseDirective), selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }, { kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavComponent), selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact", "role", "variant"] }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavIconPipe), name: "cSidebarNavIcon" }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavBadgePipe), name: "cSidebarNavBadge" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarNavGroupComponent, decorators: [{
             type: Component,
@@ -8580,6 +8600,7 @@ class SidebarNavComponent {
     #renderer = inject(Renderer2);
     #hostElement = inject(ElementRef);
     #sidebarService = inject(SidebarService);
+    #navGroupService = inject(NavGroupService);
     /**
      * Configuration object for sidebar-nav.
      * @returns INavData[] | undefined
@@ -8591,7 +8612,8 @@ class SidebarNavComponent {
      * Determines when an inactive `c-sidebar-nav-group` closes.
      * - `path`: on an active route change only
      * - `close`: when another group is clicked
-     * - `none`: never, the group stays open
+     * - `none`: never, the group stays open — it stops reacting to the route altogether,
+     *   so a matching route neither opens it on init nor on a later navigation
      */
     dropdownMode = input('path', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dropdownMode" }] : /* istanbul ignore next */ []));
@@ -8612,15 +8634,31 @@ class SidebarNavComponent {
      */
     role = input('navigation', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /**
+     * Set the sidebar nav variant to tree.
+     * @default undefined
+     * @since 5.7.28
+     */
+    variant = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => {
         const groupItems = this.groupItems();
+        const variant = this.variant();
         return {
             'sidebar-nav': !groupItems,
             'nav-group-items': groupItems,
-            compact: groupItems && this.compact()
+            [`sidebar-nav-${variant}`]: !groupItems && !!variant,
+            compact: this.compact()
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    #dropdownModeEffect = effect(() => {
+        const openOnActive = this.dropdownMode() !== 'none';
+        untracked(() => {
+            this.#navGroupService.openOnActive.set(openOnActive);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#dropdownModeEffect" }] : /* istanbul ignore next */ []));
     // @HostBinding('class.nav-group-items')
     // get sidebarNavGroupItemsClass(): boolean {
     //   return !!this.groupItems;
@@ -8638,7 +8676,7 @@ class SidebarNavComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SidebarNavComponent, isStandalone: true, selector: "c-sidebar-nav", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: true, isRequired: false, transformFunction: null }, groupItems: { classPropertyName: "groupItems", publicName: "groupItems", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" } }, providers: [NavGroupService, SidebarNavGroupService], usesOnChanges: true, ngImport: i0, template: "@for (nItem of navItemsArray(); track nItem) {\n  @switch (helper.itemType(nItem)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        [dropdownMode]=\"dropdownMode()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n        [compact]=\"compact()\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n", styles: [":host .nav-item{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavLinkComponent), selector: "c-sidebar-nav-link", inputs: ["item"], outputs: ["linkClick"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavLabelComponent), selector: "c-sidebar-nav-label", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavTitleComponent), selector: "c-sidebar-nav-title", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavDividerComponent), selector: "c-sidebar-nav-divider", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavGroupComponent), selector: "c-sidebar-nav-group", inputs: ["item", "dropdownMode", "show", "compact"] }, { kind: "ngmodule", type: i0.forwardRef(() => RouterModule) }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavItemClassPipe), name: "cSidebarNavItemClass" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SidebarNavComponent, isStandalone: true, selector: "c-sidebar-nav", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: true, isRequired: false, transformFunction: null }, groupItems: { classPropertyName: "groupItems", publicName: "groupItems", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" } }, providers: [NavGroupService, SidebarNavGroupService], usesOnChanges: true, ngImport: i0, template: "@for (nItem of navItemsArray(); track nItem) {\n  @switch (helper.itemType(nItem)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        [dropdownMode]=\"dropdownMode()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n        [compact]=\"compact()\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n", styles: [":host .nav-item{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavLinkComponent), selector: "c-sidebar-nav-link", inputs: ["item"], outputs: ["linkClick"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavLabelComponent), selector: "c-sidebar-nav-label", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavTitleComponent), selector: "c-sidebar-nav-title", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavDividerComponent), selector: "c-sidebar-nav-divider", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavGroupComponent), selector: "c-sidebar-nav-group", inputs: ["item", "dropdownMode", "show", "compact"] }, { kind: "ngmodule", type: i0.forwardRef(() => RouterModule) }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavItemClassPipe), name: "cSidebarNavItemClass" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarNavComponent, decorators: [{
             type: Component,
@@ -8655,7 +8693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         '[class]': 'hostClasses()',
                         '[attr.role]': 'role()'
                     }, providers: [NavGroupService, SidebarNavGroupService], template: "@for (nItem of navItemsArray(); track nItem) {\n  @switch (helper.itemType(nItem)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        [dropdownMode]=\"dropdownMode()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n        [compact]=\"compact()\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n", styles: [":host .nav-item{display:block}\n"] }]
-        }], propDecorators: { navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], dropdownMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMode", required: false }] }], groupItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupItems", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
+        }], propDecorators: { navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], dropdownMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMode", required: false }] }], groupItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupItems", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class SidebarModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });