@coreui/angular 5.1.1 → 5.1.2

package/fesm2022/coreui-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, Directive, Input, TemplateRef, Renderer2, booleanAttribute, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, DestroyRef, signal, effect, RendererFactory2, PLATFORM_ID, Inject, afterNextRender, AfterRenderPhase, ViewChild, forwardRef, ContentChild, Optional, ViewContainerRef, computed, numberAttribute, ChangeDetectionStrategy, Pipe, input, model } from '@angular/core';
-import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, isPlatformServer, isPlatformBrowser, NgStyle } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT, NgClass, NgOptimizedImage, AsyncPipe, isPlatformServer, isPlatformBrowser, NgStyle } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
@@ -1292,6 +1292,11 @@ class AvatarComponent {
          * @default 'md'
          */
         this.size = 'md';
+        /**
+         * The alt attribute for the img element alternate text.
+         * @type string
+         */
+        this.alt = '';
     }
     get statusClass() {
         return {
@@ -1308,22 +1313,24 @@ class AvatarComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: AvatarComponent, isStandalone: true, selector: "c-avatar", inputs: { color: "color", shape: "shape", size: "size", src: "src", status: "status", textColor: "textColor" }, host: { properties: { "class": "this.hostClasses" } }, hostDirectives: [{ directive: TextColorDirective, inputs: ["cTextColor", "textColor"] }], ngImport: i0, template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\" />\n  @if (!!status) {\n    <span [ngClass]=\"statusClass\"></span>\n  }\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  @if (!!src) {\n    <img [src]=\"src\" class=\"avatar-img\" />\n  } @else {\n    <ng-content />\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: AvatarComponent, isStandalone: true, selector: "c-avatar", inputs: { color: "color", shape: "shape", size: "size", alt: "alt", src: "src", status: "status", textColor: "textColor" }, host: { properties: { "class": "this.hostClasses" } }, hostDirectives: [{ directive: TextColorDirective, inputs: ["cTextColor", "textColor"] }], ngImport: i0, template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\" />\n  @if (!!status) {\n    <span [ngClass]=\"statusClass\"></span>\n  }\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  @if (!!src) {\n    <img [ngSrc]=\"src\" fill class=\"avatar-img\" alt=\"{{alt}}\" />\n  } @else {\n    <ng-content />\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-avatar', standalone: true, imports: [
-                        NgTemplateOutlet,
-                        NgClass
-                    ], hostDirectives: [{
-                            directive: TextColorDirective, inputs: ['cTextColor: textColor']
-                        }], template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\" />\n  @if (!!status) {\n    <span [ngClass]=\"statusClass\"></span>\n  }\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  @if (!!src) {\n    <img [src]=\"src\" class=\"avatar-img\" />\n  } @else {\n    <ng-content />\n  }\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
+            args: [{ selector: 'c-avatar', standalone: true, imports: [NgTemplateOutlet, NgClass, NgOptimizedImage], hostDirectives: [
+                        {
+                            directive: TextColorDirective,
+                            inputs: ['cTextColor: textColor']
+                        }
+                    ], template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\" />\n  @if (!!status) {\n    <span [ngClass]=\"statusClass\"></span>\n  }\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  @if (!!src) {\n    <img [ngSrc]=\"src\" fill class=\"avatar-img\" alt=\"{{alt}}\" />\n  } @else {\n    <ng-content />\n  }\n</ng-template>\n" }]
+        }], propDecorators: { color: [{
                 type: Input
             }], shape: [{
                 type: Input
             }], size: [{
                 type: Input
+            }], alt: [{
+                type: Input
             }], src: [{
                 type: Input
             }], status: [{
@@ -3793,9 +3800,9 @@ class FooterComponent {
         /**
          * Default role for footer. [docs]
          * @type string
-         * @default 'footer'
+         * @default 'contentinfo'
          */
-        this.role = 'footer';
+        this.role = 'contentinfo';
     }
     get getClasses() {
         return {
@@ -3816,10 +3823,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
         }], propDecorators: { position: [{
                 type: Input
             }], role: [{
-                type: Input
-            }, {
                 type: HostBinding,
                 args: ['attr.role']
+            }, {
+                type: Input
             }], getClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -4721,9 +4728,9 @@ class HeaderComponent {
         /**
          * Default role for header. [docs]
          * @type string
-         * @default 'header'
+         * @default 'banner'
          */
-        this.role = 'header';
+        this.role = 'banner';
     }
     get getClasses() {
         return !!this.container ? this.containerClasses : this.headerClasses;
@@ -8182,7 +8189,7 @@ class SidebarNavGroupComponent {
         if (this.samePath(this.router.routerState.snapshot.url)) {
             this.openGroup(true);
         }
-        this.navGroupSubscription = this.sidebarNavGroupService.sidebarNavGroupState$.subscribe(next => {
+        this.navGroupSubscription = this.sidebarNavGroupService.sidebarNavGroupState$.subscribe((next) => {
             if (this.dropdownMode === 'close' && next.sidebarNavGroup && next.sidebarNavGroup !== this) {
                 if (next.sidebarNavGroup.item.url.startsWith(this.item.url)) {
                     return;
@@ -8236,7 +8243,7 @@ class SidebarNavGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SidebarNavGroupComponent, deps: [{ token: i1$1.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: SidebarNavHelper }, { token: SidebarNavGroupService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: SidebarNavGroupComponent, isStandalone: true, selector: "c-sidebar-nav-group", inputs: { item: "item", dropdownMode: "dropdownMode", show: "show", compact: ["compact", "compact", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, providers: [SidebarNavHelper, SidebarNavGroupService], viewQueries: [{ propertyName: "sidebarNav", first: true, predicate: i0.forwardRef(() => SidebarNavComponent), descendants: true, read: ElementRef }], ngImport: i0, template: "<a (click)=\"toggleGroup($event)\"\n   [cHtmlAttr]=\"item.attributes\"\n   class=\"nav-link nav-group-toggle\"\n   href>\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (@openClose.done)=\"onAnimationDone($event)\"\n  (@openClose.start)=\"onAnimationStart($event)\"\n  [@openClose]=\"open ? 'open' : 'closed'\"\n  [compact]=\"compact\"\n  [dropdownMode]=\"dropdownMode\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems\"\n  [ngStyle]=\"display\"\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n    <span [ngClass]=\"item.icon ?? ''\"></span>\n  </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"], dependencies: [{ 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: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavIconPipe), name: "cSidebarNavIcon" }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavBadgePipe), name: "cSidebarNavBadge" }, { kind: "component", type: i0.forwardRef(() => SidebarNavComponent), selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: SidebarNavGroupComponent, isStandalone: true, selector: "c-sidebar-nav-group", inputs: { item: "item", dropdownMode: "dropdownMode", show: "show", compact: ["compact", "compact", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, providers: [SidebarNavHelper, SidebarNavGroupService], viewQueries: [{ propertyName: "sidebarNav", first: true, predicate: i0.forwardRef(() => SidebarNavComponent), descendants: true, read: ElementRef }], ngImport: i0, template: "<a (click)=\"toggleGroup($event)\"\n   [cHtmlAttr]=\"item.attributes\"\n   class=\"nav-link nav-group-toggle\"\n   href>\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (@openClose.done)=\"onAnimationDone($event)\"\n  (@openClose.start)=\"onAnimationStart($event)\"\n  [@openClose]=\"open ? 'open' : 'closed'\"\n  [compact]=\"compact\"\n  [dropdownMode]=\"dropdownMode\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems\"\n  [ngStyle]=\"display\"\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n    <span [ngClass]=\"item.icon ?? ''\"></span>\n  </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"], dependencies: [{ 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: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavIconPipe), name: "cSidebarNavIcon" }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavBadgePipe), name: "cSidebarNavBadge" }, { kind: "component", type: i0.forwardRef(() => SidebarNavComponent), selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact", "role"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
             trigger('openClose', [
                 state('open', style({
                     height: '*'
@@ -8244,9 +8251,7 @@ class SidebarNavGroupComponent {
                 state('closed', style({
                     height: '0px'
                 })),
-                transition('open <=> closed', [
-                    animate('.15s ease')
-                ])
+                transition('open <=> closed', [animate('.15s ease')])
             ])
         ] }); }
 }
@@ -8269,9 +8274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                             state('closed', style({
                                 height: '0px'
                             })),
-                            transition('open <=> closed', [
-                                animate('.15s ease')
-                            ])
+                            transition('open <=> closed', [animate('.15s ease')])
                         ])
                     ], template: "<a (click)=\"toggleGroup($event)\"\n   [cHtmlAttr]=\"item.attributes\"\n   class=\"nav-link nav-group-toggle\"\n   href>\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (@openClose.done)=\"onAnimationDone($event)\"\n  (@openClose.start)=\"onAnimationStart($event)\"\n  [@openClose]=\"open ? 'open' : 'closed'\"\n  [compact]=\"compact\"\n  [dropdownMode]=\"dropdownMode\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems\"\n  [ngStyle]=\"display\"\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n    <span [ngClass]=\"item.icon ?? ''\"></span>\n  </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: SidebarNavHelper }, { type: SidebarNavGroupService }], propDecorators: { item: [{
@@ -8304,7 +8307,7 @@ class SidebarNavComponent {
         // get sidebarNavGroupItemsClass(): boolean {
         //   return !!this.groupItems;
         // }
-        this.role = 'nav';
+        this.role = 'navigation';
         this.navItemsArray = [];
     }
     get hostClasses() {
@@ -8324,7 +8327,7 @@ class SidebarNavComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SidebarNavComponent, deps: [{ token: SidebarComponent, optional: true }, { token: SidebarNavHelper }, { token: i1$1.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: SidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: SidebarNavComponent, isStandalone: true, selector: "c-sidebar-nav", inputs: { navItems: "navItems", dropdownMode: "dropdownMode", groupItems: ["groupItems", "groupItems", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, host: { properties: { "class": "this.hostClasses", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "@for (item of navItemsArray; track item) {\n  @switch (helper.itemType(item)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        #rla=\"routerLinkActive\"\n        [dropdownMode]=\"dropdownMode\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        routerLinkActive=\"show\"\n        [compact]=\"compact\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SidebarNavLinkComponent, selector: "c-sidebar-nav-link", inputs: ["item"], outputs: ["linkClick"] }, { kind: "component", type: SidebarNavLabelComponent, selector: "c-sidebar-nav-label", inputs: ["item"] }, { kind: "component", type: SidebarNavTitleComponent, selector: "c-sidebar-nav-title", inputs: ["item"] }, { kind: "component", type: SidebarNavDividerComponent, selector: "c-sidebar-nav-divider", inputs: ["item"] }, { kind: "component", type: SidebarNavGroupComponent, selector: "c-sidebar-nav-group", inputs: ["item", "dropdownMode", "show", "compact"] }, { kind: "pipe", type: SidebarNavItemClassPipe, name: "cSidebarNavItemClass" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: SidebarNavComponent, isStandalone: true, selector: "c-sidebar-nav", inputs: { navItems: "navItems", dropdownMode: "dropdownMode", groupItems: ["groupItems", "groupItems", booleanAttribute], compact: ["compact", "compact", booleanAttribute], role: "role" }, host: { properties: { "class": "this.hostClasses", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "@for (item of navItemsArray; track item) {\n  @switch (helper.itemType(item)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        #rla=\"routerLinkActive\"\n        [dropdownMode]=\"dropdownMode\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        routerLinkActive=\"show\"\n        [compact]=\"compact\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SidebarNavLinkComponent, selector: "c-sidebar-nav-link", inputs: ["item"], outputs: ["linkClick"] }, { kind: "component", type: SidebarNavLabelComponent, selector: "c-sidebar-nav-label", inputs: ["item"] }, { kind: "component", type: SidebarNavTitleComponent, selector: "c-sidebar-nav-title", inputs: ["item"] }, { kind: "component", type: SidebarNavDividerComponent, selector: "c-sidebar-nav-divider", inputs: ["item"] }, { kind: "component", type: SidebarNavGroupComponent, selector: "c-sidebar-nav-group", inputs: ["item", "dropdownMode", "show", "compact"] }, { kind: "pipe", type: SidebarNavItemClassPipe, name: "cSidebarNavItemClass" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SidebarNavComponent, decorators: [{
             type: Component,
@@ -8357,6 +8360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }, {
+                type: Input
             }] } });
 
 class SidebarModule {
@@ -8705,6 +8710,7 @@ class TabPaneComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.tabService = tabService;
         this._active = false;
+        this.role = 'tabpanel';
         this.subscribeTabService();
     }
     set active(value) {
@@ -8732,7 +8738,7 @@ class TabPaneComponent {
         if (subscribe) {
             this.tabServiceSubscription = this.tabService.activeTabPaneIdx$.subscribe((tabContentState) => {
                 if (tabContentState.tabContent === this.tabContent) {
-                    this.active = (tabContentState.activeIdx === this.tabPaneIdx);
+                    this.active = tabContentState.activeIdx === this.tabPaneIdx;
                 }
             });
         }
@@ -8741,7 +8747,7 @@ class TabPaneComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TabPaneComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TabService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TabPaneComponent, isStandalone: true, selector: "c-tab-pane", host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cTabPane"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TabPaneComponent, isStandalone: true, selector: "c-tab-pane", inputs: { role: "role" }, host: { properties: { "class": "this.hostClasses", "attr.role": "this.role" } }, exportAs: ["cTabPane"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TabPaneComponent, decorators: [{
             type: Component,
@@ -8749,6 +8755,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TabService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], role: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.role']
             }] } });
 
 class TabContentComponent {
@@ -8850,6 +8861,7 @@ class TabContentRefDirective {
          * @type number
          */
         this.tabPaneIdx = -1;
+        this.role = 'tab';
         this.subscribeTabService();
     }
     /**
@@ -8889,7 +8901,9 @@ class TabContentRefDirective {
     get attrDisabled() {
         return this.disabled ? '' : null;
     }
-    ;
+    get ariaSelected() {
+        return this.active;
+    }
     get getTabindex() {
         return this.disabled ? '-1' : null;
     }
@@ -8920,7 +8934,7 @@ class TabContentRefDirective {
         if (subscribe) {
             this.tabServiceSubscription = this.tabService.activeTabPaneIdx$.subscribe((tabContentState) => {
                 if (tabContentState.tabContent === this.tabContentRef) {
-                    this.active = (tabContentState.activeIdx === this.tabPaneIdx);
+                    this.active = tabContentState.activeIdx === this.tabPaneIdx;
                 }
             });
         }
@@ -8929,7 +8943,7 @@ class TabContentRefDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TabContentRefDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: TabService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.10", type: TabContentRefDirective, isStandalone: true, selector: "[cTabContent]", inputs: { tabContentRef: ["cTabContent", "tabContentRef"], active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabPaneIdx: ["tabPaneIdx", "tabPaneIdx", numberAttribute] }, host: { listeners: { "click": "toggleOpen($event)" }, properties: { "class": "this.hostClasses", "attr.aria-disabled": "this.isDisabled", "attr.disabled": "this.attrDisabled", "attr.tabindex": "this.getTabindex" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.10", type: TabContentRefDirective, isStandalone: true, selector: "[cTabContent]", inputs: { tabContentRef: ["cTabContent", "tabContentRef"], active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabPaneIdx: ["tabPaneIdx", "tabPaneIdx", numberAttribute], role: "role" }, host: { listeners: { "click": "toggleOpen($event)" }, properties: { "class": "this.hostClasses", "attr.aria-disabled": "this.isDisabled", "attr.disabled": "this.attrDisabled", "attr.aria-selected": "this.ariaSelected", "attr.role": "this.role", "attr.tabindex": "this.getTabindex" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TabContentRefDirective, decorators: [{
             type: Directive,
@@ -8958,6 +8972,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }], attrDisabled: [{
                 type: HostBinding,
                 args: ['attr.disabled']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], role: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.role']
             }], getTabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']