@open-rlb/ng-bootstrap 3.1.6 → 3.1.7

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -337,8 +337,6 @@ class AccordionItemComponent extends ToggleAbstractComponent {
         this.expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : {}), alias: 'expanded', transform: booleanAttribute });
         this.cssClass = input('', { ...(ngDevMode ? { debugName: "cssClass" } : {}), alias: 'class' });
         this.style = input(undefined, { ...(ngDevMode ? { debugName: "style" } : {}), alias: 'style' });
-        // We use a property for status because the base class updates it.
-        // We'll sync it with an input via effect if provided.
         this.status = 'hidden';
         this.statusChange = output({ alias: 'statusChange' });
         this.header = contentChild(AccordionHeaderComponent, ...(ngDevMode ? [{ debugName: "header" }] : []));
@@ -377,6 +375,25 @@ class AccordionItemComponent extends ToggleAbstractComponent {
         if (this.expanded()) {
             this.open();
         }
+        // Reactively push the native Bootstrap state into Signals
+        this.statusSub = this.statusChange.subscribe(status => {
+            const isOpen = status === 'show' || status === 'shown';
+            const header = this.header();
+            const body = this.body();
+            if (header) {
+                header.expanded.set(isOpen);
+            }
+            if (body) {
+                body.expanded.set(isOpen);
+            }
+        });
+    }
+    ngOnDestroy() {
+        // Pass the correct element so abstract class prevents memory leaks
+        const element = this.elementRef?.nativeElement.querySelector('.accordion-collapse');
+        super.ngOnDestroy(element);
+        // Clean up subscription
+        this.statusSub?.unsubscribe();
     }
     getOrCreateInstance(element) {
         return Collapse.getOrCreateInstance(element, { toggle: false });
@@ -399,7 +416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     <ng-content select="[rlb-accordion-body]"></ng-content>
   `,
                     host: { class: 'accordion-item' },
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: UniqueIdService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], statusChange: [{ type: i0.Output, args: ["statusChange"] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AccordionHeaderComponent), { isSignal: true }] }], body: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AccordionBodyComponent), { isSignal: true }] }] } });
 
@@ -413,6 +430,7 @@ class AccordionComponent {
         this.effectiveId = computed(() => this.id() || this._internalId(), ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
         this.subs = [];
         this.items = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.cardStyle = input(true, { ...(ngDevMode ? { debugName: "cardStyle" } : {}), alias: 'card-style', transform: booleanAttribute });
         this._internalId.set(`accordion${this.idService.id}`);
         effect(() => {
             this.syncItems();
@@ -422,7 +440,7 @@ class AccordionComponent {
         const items = this.items();
         const id = this.effectiveId();
         const alwaysOpen = this.alwaysOpen();
-        items.forEach((item) => {
+        items.forEach(item => {
             item.parentId.set(id);
             item.alwaysOpen.set(alwaysOpen);
         });
@@ -437,12 +455,12 @@ class AccordionComponent {
         const items = this.items();
         const alwaysOpen = this.alwaysOpen();
         const id = this.effectiveId();
-        items.forEach((item) => {
+        items.forEach(item => {
             item.parentId.set(id);
             item.alwaysOpen.set(alwaysOpen);
-            const sub = item.statusChange.subscribe((ev) => {
+            const sub = item.statusChange.subscribe(ev => {
                 if (!alwaysOpen && (ev === 'show' || ev === 'shown')) {
-                    items.forEach((other) => {
+                    items.forEach(other => {
                         if (other !== item && (other.status === 'show' || other.status === 'shown')) {
                             other.close();
                         }
@@ -459,31 +477,36 @@ class AccordionComponent {
         if (this.alwaysOpen()) {
             return;
         }
-        const opened = items.filter((i) => i.expanded() || i.status === 'show' || i.status === 'shown');
+        const opened = items.filter(i => i.expanded() || i.status === 'show' || i.status === 'shown');
         if (opened.length > 1) {
-            opened.slice(1).forEach((i) => i.close());
+            opened.slice(1).forEach(i => i.close());
         }
     }
     cleanup() {
-        this.subs.forEach((s) => s.unsubscribe());
+        this.subs.forEach(s => s.unsubscribe());
         this.subs = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionComponent, deps: [{ token: UniqueIdService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: AccordionComponent, isStandalone: false, selector: "rlb-accordion", inputs: { flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, alwaysOpen: { classPropertyName: "alwaysOpen", publicName: "always-open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.accordion-flush": "flush()", "id": "effectiveId()" }, classAttribute: "accordion" }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: `<ng-content select="[rlb-accordion-item]"></ng-content>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: AccordionComponent, isStandalone: false, selector: "rlb-accordion", inputs: { flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, alwaysOpen: { classPropertyName: "alwaysOpen", publicName: "always-open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, cardStyle: { classPropertyName: "cardStyle", publicName: "card-style", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.accordion-flush": "flush()", "class.accordion-card-style": "cardStyle()", "id": "effectiveId()" }, classAttribute: "accordion" }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: `
+    <ng-content select="[rlb-accordion-item]"></ng-content>
+  `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rlb-accordion',
-                    template: `<ng-content select="[rlb-accordion-item]"></ng-content>`,
+                    template: `
+    <ng-content select="[rlb-accordion-item]"></ng-content>
+  `,
                     host: {
                         class: 'accordion',
                         '[class.accordion-flush]': 'flush()',
+                        '[class.accordion-card-style]': 'cardStyle()',
                         '[id]': 'effectiveId()',
                     },
-                    standalone: false
+                    standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: UniqueIdService }], propDecorators: { flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], alwaysOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "always-open", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [{ type: UniqueIdService }], propDecorators: { flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], alwaysOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "always-open", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { isSignal: true }] }], cardStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "card-style", required: false }] }] } });
 
 class AlertComponent {
     constructor(viewContainerRef) {
@@ -605,6 +628,7 @@ class BadgeDirective {
         this.start = input(undefined, { ...(ngDevMode ? { debugName: "start" } : {}), alias: 'badge-start',
             transform: numberAttribute });
         this.color = input('danger', { ...(ngDevMode ? { debugName: "color" } : {}), alias: 'badge-color' });
+        this.textColor = input('light', { ...(ngDevMode ? { debugName: "textColor" } : {}), alias: 'badge-text-color' });
         this.hiddenText = input(undefined, { ...(ngDevMode ? { debugName: "hiddenText" } : {}), alias: 'hidden-text' });
         this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : {}), alias: 'badge-dot', transform: booleanAttribute });
         effect(() => {
@@ -642,6 +666,7 @@ class BadgeDirective {
         const border = this.border();
         const hiddenText = this.hiddenText();
         const badgeValue = this.castToString(this.badge());
+        const textColor = this.textColor();
         if (top || start || top === 0 || start === 0) {
             this.renderer.addClass(this.badgeElement, 'position-absolute');
             if (top || top === 0) {
@@ -662,6 +687,9 @@ class BadgeDirective {
         if (color) {
             this.renderer.addClass(this.badgeElement, `bg-${color}`);
         }
+        if (textColor) {
+            this.renderer.addClass(this.badgeElement, `text-${textColor}`);
+        }
         if (badgeValue) {
             this.badgeContent = this.renderer.createText(badgeValue);
             this.renderer.appendChild(this.badgeElement, this.badgeContent);
@@ -703,7 +731,7 @@ class BadgeDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: BadgeDirective, isStandalone: false, selector: "[badge]", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "badge-pill", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "badge-border", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "badge-top", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "badge-start", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "badge-color", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hidden-text", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "badge-dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: BadgeDirective, isStandalone: false, selector: "[badge]", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "badge-pill", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "badge-border", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "badge-top", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "badge-start", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "badge-color", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "badge-text-color", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hidden-text", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "badge-dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BadgeDirective, decorators: [{
             type: Directive,
@@ -711,7 +739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     selector: '[badge]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-pill", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-border", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-top", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-start", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-color", required: false }] }], hiddenText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden-text", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-dot", required: false }] }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-pill", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-border", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-top", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-start", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-color", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-text-color", required: false }] }], hiddenText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden-text", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-dot", required: false }] }] } });
 
 class BreadcrumbComponent {
     constructor() {
@@ -5044,41 +5072,50 @@ class SidebarItemComponent {
         this.badgeCounter = input(undefined, ...(ngDevMode ? [{ debugName: "badgeCounter" }] : []));
         this.click = output();
         this.children = contentChildren(SidebarItemComponent, ...(ngDevMode ? [{ debugName: "children" }] : []));
+        this.template = viewChild.required('template');
         this.collapseComponent = ViewChild(CollapseComponent);
+        this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
         this._id = '';
     }
     ngOnInit() {
-        const templateView = this.viewContainerRef.createEmbeddedView(this.template);
+        const templateView = this.viewContainerRef.createEmbeddedView(this.template());
         this.element = templateView.rootNodes[0];
         this.viewContainerRef.element.nativeElement.remove();
         this._id = this.uniqueIdService.id;
     }
     onItemClick(event) {
-        event.stopPropagation();
         this.click.emit(event);
+        if (this.children().length > 0) {
+            this.isExpanded.update(v => !v);
+        }
         if (!this.title() && this.children().length === 0) {
             this.sidebarService.notifyItemClicked();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SidebarItemComponent, deps: [{ token: i0.ViewContainerRef }, { token: UniqueIdService }, { token: i2.Router }, { token: SidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SidebarItemComponent, isStandalone: false, selector: "rlb-sidebar-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, badgeCounter: { classPropertyName: "badgeCounter", publicName: "badgeCounter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "children", predicate: SidebarItemComponent, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SidebarItemComponent, isStandalone: false, selector: "rlb-sidebar-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, badgeCounter: { classPropertyName: "badgeCounter", publicName: "badgeCounter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "children", predicate: SidebarItemComponent, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #template>
       @if (title()) {
-        <li (click)="onItemClick($event)" class="menu-title">{{ title() }}</li>
+        <li
+          (click)="onItemClick($event)"
+          class="menu-title"
+        >
+          {{ title() }}
+        </li>
       }
       @if (!title()) {
-        <li (click)="onItemClick($event)">
+        <li>
           @if (children().length) {
             <a
               [badge]="
-                badgeCounter() && badgeCounter()! > 0
-                  ? badgeCounter()!.toString()
-                  : undefined
+                badgeCounter() && badgeCounter()! > 0 ? badgeCounter()!.toString() : undefined
               "
               href="javascript:void(0);"
               class="is-parent has-arrow"
               toggle="collapse"
               [toggle-target]="'side-item' + _id"
+              [collapsed]="!isExpanded()"
+              (click)="onItemClick($event)"
             >
               @if (icon()) {
                 <i [class]="icon()"></i>
@@ -5087,20 +5124,20 @@ class SidebarItemComponent {
             </a>
           }
           <rlb-collapse [id]="'side-item' + _id">
-            <ul class="sub-menu" aria-expanded="false">
+            <ul
+              class="sub-menu"
+              aria-expanded="false"
+            >
               <ng-content select="rlb-sidebar-item"></ng-content>
             </ul>
           </rlb-collapse>
           @if (!children().length) {
             <a
               [routerLink]="link()"
-              [badge]="
-                badgeCounter() && badgeCounter()! > 0
-                  ? badgeCounter()
-                  : undefined
-              "
+              [badge]="badgeCounter() && badgeCounter()! > 0 ? badgeCounter() : undefined"
               class="side-nav-link-ref"
               routerLinkActive="active"
+              (click)="onItemClick($event)"
             >
               @if (icon()) {
                 <i [class]="icon()"></i>
@@ -5111,7 +5148,7 @@ class SidebarItemComponent {
         </li>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: BadgeDirective, selector: "[badge]", inputs: ["badge", "badge-pill", "badge-border", "badge-top", "badge-start", "badge-color", "hidden-text", "badge-dot"] }, { kind: "component", type: CollapseComponent, selector: "rlb-collapse", inputs: ["id", "orientation"], outputs: ["statusChange"] }, { kind: "directive", type: ToggleDirective, selector: "\n    button[toggle],\n    a[toggle],\n    rlb-navbar-item[toggle],\n    rlb-button-toolbar[toggle]", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: BadgeDirective, selector: "[badge]", inputs: ["badge", "badge-pill", "badge-border", "badge-top", "badge-start", "badge-color", "badge-text-color", "hidden-text", "badge-dot"] }, { kind: "component", type: CollapseComponent, selector: "rlb-collapse", inputs: ["id", "orientation"], outputs: ["statusChange"] }, { kind: "directive", type: ToggleDirective, selector: "\n    button[toggle],\n    a[toggle],\n    rlb-navbar-item[toggle],\n    rlb-button-toolbar[toggle]", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
@@ -5120,21 +5157,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     template: `
     <ng-template #template>
       @if (title()) {
-        <li (click)="onItemClick($event)" class="menu-title">{{ title() }}</li>
+        <li
+          (click)="onItemClick($event)"
+          class="menu-title"
+        >
+          {{ title() }}
+        </li>
       }
       @if (!title()) {
-        <li (click)="onItemClick($event)">
+        <li>
           @if (children().length) {
             <a
               [badge]="
-                badgeCounter() && badgeCounter()! > 0
-                  ? badgeCounter()!.toString()
-                  : undefined
+                badgeCounter() && badgeCounter()! > 0 ? badgeCounter()!.toString() : undefined
               "
               href="javascript:void(0);"
               class="is-parent has-arrow"
               toggle="collapse"
               [toggle-target]="'side-item' + _id"
+              [collapsed]="!isExpanded()"
+              (click)="onItemClick($event)"
             >
               @if (icon()) {
                 <i [class]="icon()"></i>
@@ -5143,20 +5185,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             </a>
           }
           <rlb-collapse [id]="'side-item' + _id">
-            <ul class="sub-menu" aria-expanded="false">
+            <ul
+              class="sub-menu"
+              aria-expanded="false"
+            >
               <ng-content select="rlb-sidebar-item"></ng-content>
             </ul>
           </rlb-collapse>
           @if (!children().length) {
             <a
               [routerLink]="link()"
-              [badge]="
-                badgeCounter() && badgeCounter()! > 0
-                  ? badgeCounter()
-                  : undefined
-              "
+              [badge]="badgeCounter() && badgeCounter()! > 0 ? badgeCounter() : undefined"
               class="side-nav-link-ref"
               routerLinkActive="active"
+              (click)="onItemClick($event)"
             >
               @if (icon()) {
                 <i [class]="icon()"></i>
@@ -5170,10 +5212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
   `,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: UniqueIdService }, { type: i2.Router }, { type: SidebarService }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], badgeCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeCounter", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], children: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SidebarItemComponent), { isSignal: true }] }], template: [{
-                type: ViewChild,
-                args: ['template', { static: true }]
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: UniqueIdService }, { type: i2.Router }, { type: SidebarService }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], badgeCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeCounter", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], children: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SidebarItemComponent), { isSignal: true }] }], template: [{ type: i0.ViewChild, args: ['template', { isSignal: true }] }] } });
 
 class TooltipDirective {
     constructor(elementRef) {
@@ -5228,6 +5267,7 @@ class SidebarComponent {
         this.sidebarService = sidebarService;
         this.breakpointService = breakpointService;
         this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+        this.dark = input(true, { ...(ngDevMode ? { debugName: "dark" } : {}), alias: 'dark', transform: booleanAttribute });
         this.subscription = new Subscription();
         this.rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : {}), alias: 'rounded', transform: booleanAttribute });
         this.isMobile = toSignal(this.breakpointService.isMobile$);
@@ -5259,53 +5299,86 @@ class SidebarComponent {
         sidebar?.classList.toggle('collapsed', collapsed);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SidebarComponent, deps: [{ token: SidebarService }, { token: BreakpointService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: SidebarComponent, isStandalone: false, selector: "rlb-sidebar", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true }], ngImport: i0, template: `
-		<div class="vertical-menu" [class.rounded-2]="rounded()">
-			<div id="sidebar-menu" class="w-100 h-100 overflow-y-auto">
-				<ul class="metismenu list-unstyled" id="side-menu" #sideMenu>
-					<ng-content select="rlb-sidebar-item"></ng-content>
-				</ul>
-			</div>
-		</div>
-		<div role="button"
-				 class="sidebar-toggle"
-				 [tooltip]="!isCollapsed() ? 'Hide' : 'Show'"
-				 [tooltip-placement]="!isCollapsed() ? 'top' : 'left'"
-				 [tooltip-class]="'sidebar-toggler-tooltip'"
-				 (click)="toggleSidebar()">
-			<i [class.bi-chevron-double-left]="!isCollapsed()" [class.bi-chevron-double-right]="isCollapsed()"
-				 class="bi "></i>
-		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: SidebarComponent, isStandalone: false, selector: "rlb-sidebar", inputs: { dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-bs-theme": "dark() ? 'dark' : 'light'" } }, viewQueries: [{ propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true }], ngImport: i0, template: `
+    <div
+      class="vertical-menu"
+      [class.rounded-2]="rounded()"
+    >
+      <div
+        id="sidebar-menu"
+        class="w-100 h-100 overflow-y-auto"
+      >
+        <ul
+          class="metismenu list-unstyled"
+          id="side-menu"
+          #sideMenu
+        >
+          <ng-content select="rlb-sidebar-item"></ng-content>
+        </ul>
+      </div>
+    </div>
+    <div
+      role="button"
+      class="sidebar-toggle"
+      [tooltip]="!isCollapsed() ? 'Hide' : 'Show'"
+      [tooltip-placement]="!isCollapsed() ? 'top' : 'left'"
+      [tooltip-class]="'sidebar-toggler-tooltip'"
+      (click)="toggleSidebar()"
+    >
+      <i
+        [class.bi-chevron-double-left]="!isCollapsed()"
+        [class.bi-chevron-double-right]="isCollapsed()"
+        class="bi "
+      ></i>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rlb-sidebar',
                     template: `
-		<div class="vertical-menu" [class.rounded-2]="rounded()">
-			<div id="sidebar-menu" class="w-100 h-100 overflow-y-auto">
-				<ul class="metismenu list-unstyled" id="side-menu" #sideMenu>
-					<ng-content select="rlb-sidebar-item"></ng-content>
-				</ul>
-			</div>
-		</div>
-		<div role="button"
-				 class="sidebar-toggle"
-				 [tooltip]="!isCollapsed() ? 'Hide' : 'Show'"
-				 [tooltip-placement]="!isCollapsed() ? 'top' : 'left'"
-				 [tooltip-class]="'sidebar-toggler-tooltip'"
-				 (click)="toggleSidebar()">
-			<i [class.bi-chevron-double-left]="!isCollapsed()" [class.bi-chevron-double-right]="isCollapsed()"
-				 class="bi "></i>
-		</div>
-	`,
-                    standalone: false
+    <div
+      class="vertical-menu"
+      [class.rounded-2]="rounded()"
+    >
+      <div
+        id="sidebar-menu"
+        class="w-100 h-100 overflow-y-auto"
+      >
+        <ul
+          class="metismenu list-unstyled"
+          id="side-menu"
+          #sideMenu
+        >
+          <ng-content select="rlb-sidebar-item"></ng-content>
+        </ul>
+      </div>
+    </div>
+    <div
+      role="button"
+      class="sidebar-toggle"
+      [tooltip]="!isCollapsed() ? 'Hide' : 'Show'"
+      [tooltip-placement]="!isCollapsed() ? 'top' : 'left'"
+      [tooltip-class]="'sidebar-toggler-tooltip'"
+      (click)="toggleSidebar()"
+    >
+      <i
+        [class.bi-chevron-double-left]="!isCollapsed()"
+        [class.bi-chevron-double-right]="isCollapsed()"
+        class="bi "
+      ></i>
+    </div>
+  `,
+                    host: {
+                        '[attr.data-bs-theme]': "dark() ? 'dark' : 'light'",
+                    },
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: SidebarService }, { type: BreakpointService }], propDecorators: { sideMenu: [{
                 type: ViewChild,
                 args: ['sideMenu']
-            }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+            }], dark: [{ type: i0.Input, args: [{ isSignal: true, alias: "dark", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 
 class TabContentComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -6256,7 +6329,7 @@ class DataTableComponent {
         this.paginationMode = input('none', { ...(ngDevMode ? { debugName: "paginationMode" } : {}), alias: 'pagination-mode' });
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
         this.tableHover = input(false, { ...(ngDevMode ? { debugName: "tableHover" } : {}), alias: 'table-hover', transform: booleanAttribute });
-        this.tableStriped = input(true, { ...(ngDevMode ? { debugName: "tableStriped" } : {}), alias: 'table-striped', transform: booleanAttribute });
+        this.tableStriped = input(false, { ...(ngDevMode ? { debugName: "tableStriped" } : {}), alias: 'table-striped', transform: booleanAttribute });
         this.tableStripedColumns = input(false, { ...(ngDevMode ? { debugName: "tableStripedColumns" } : {}), alias: 'table-striped-columns',
             transform: booleanAttribute });
         this.tableBordered = input(false, { ...(ngDevMode ? { debugName: "tableBordered" } : {}), alias: 'table-bordered', transform: booleanAttribute });
@@ -6268,6 +6341,7 @@ class DataTableComponent {
         this.pageSize = input(undefined, { ...(ngDevMode ? { debugName: "pageSize" } : {}), alias: 'page-size', transform: numberAttribute });
         this.showActions = input('row', ...(ngDevMode ? [{ debugName: "showActions" }] : []));
         this.loadMoreLabel = input('Load more', ...(ngDevMode ? [{ debugName: "loadMoreLabel" }] : []));
+        this.cardStyle = input(true, { ...(ngDevMode ? { debugName: "cardStyle" } : {}), alias: 'card-style', transform: booleanAttribute });
         this.createItem = output({ alias: 'create-item' });
         this.refreshItem = output({ alias: 'refresh-item' });
         this.loadMore = output({ alias: 'load-more' });
@@ -6423,12 +6497,16 @@ class DataTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DataTableComponent, isStandalone: false, selector: "rlb-dt-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, creationStrategy: { classPropertyName: "creationStrategy", publicName: "creation-strategy", isSignal: true, isRequired: false, transformFunction: null }, creationUrl: { classPropertyName: "creationUrl", publicName: "creation-url", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, paginationMode: { classPropertyName: "paginationMode", publicName: "pagination-mode", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tableHover: { classPropertyName: "tableHover", publicName: "table-hover", isSignal: true, isRequired: false, transformFunction: null }, tableStriped: { classPropertyName: "tableStriped", publicName: "table-striped", isSignal: true, isRequired: false, transformFunction: null }, tableStripedColumns: { classPropertyName: "tableStripedColumns", publicName: "table-striped-columns", isSignal: true, isRequired: false, transformFunction: null }, tableBordered: { classPropertyName: "tableBordered", publicName: "table-bordered", isSignal: true, isRequired: false, transformFunction: null }, tableBorderless: { classPropertyName: "tableBorderless", publicName: "table-borderless", isSignal: true, isRequired: false, transformFunction: null }, tableSmall: { classPropertyName: "tableSmall", publicName: "table-small", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "show-refresh", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "total-items", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "current-page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "page-size", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createItem: "create-item", refreshItem: "refresh-item", loadMore: "load-more", currentPageChange: "current-pageChange", pageSizeChange: "page-sizeChange", pagination: "pagination" }, queries: [{ propertyName: "rows", predicate: DataTableRowComponent, isSignal: true }, { propertyName: "columns", predicate: DataTableHeaderComponent, isSignal: true }, { propertyName: "noItemsBlock", predicate: DataTableNoItemsComponent, isSignal: true }, { propertyName: "loadingBlock", predicate: DataTableLoadingComponent, isSignal: true }], viewQueries: [{ propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_projectedNoItems", first: true, predicate: ["projectedNoItems"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_projectedLoading", first: true, predicate: ["projectedLoading"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_projectedRows", first: true, predicate: ["projectedRows"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (creationStrategy() !== 'none' || title() || showRefresh()) {\n<div class=\"row\">\n  <div class=\"col\">\n    @if (title()) {\n    <h3 class=\"float-start\">{{ title() }}</h3>\n    }\n    @if (showRefresh()) {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n      [disabled]=\"loading()\">\n      <i class=\"fa-solid fa-arrows-rotate\"></i>\n    </button>\n    }\n    @if (creationStrategy() === 'page') {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl()\">\n      <i class=\"fa-solid fa-plus\"></i>\n    </button>\n    }\n    @if (creationStrategy() === 'modal') {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n      <i class=\"fa-solid fa-plus\"></i>\n    </button>\n    }\n  </div>\n</div>\n}\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n    <thead>\n      <tr>\n        <ng-container #projectedDisplayColumns></ng-container>\n        @if (hasActions()) {\n        <th>\n          <span class=\"float-end pe-2\">\n            Actions\n          </span>\n        </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n        @if (!loading()) {\n            <!-- ng-container for standard structural projected rows -->\n            <ng-container #projectedRows></ng-container>\n        }\n\n    <!-- 2. For internal states native HTML tr/td -->\n        @if (!loading() && items().length === 0 && rows().length === 0) {\n            <tr class=\"text-center\">\n                <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n                    <ng-container #projectedNoItems></ng-container>\n                </td>\n            </tr>\n        }\n\n        @if (loading()) {\n            <tr class=\"text-center\">\n                <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n                    <ng-container #projectedLoading></ng-container>\n                </td>\n            </tr>\n        }\n    </tbody>\n    @if (paginationMode() !== 'none') {\n    <tfoot>\n      <tr>\n          <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n            @if (paginationMode() === 'load-more') {\n            <button type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\" [disabled]=\"loading()\"\n              (click)=\"loadMore.emit()\">\n              {{ loadMoreLabel() }}\n            </button>\n            }\n            @if (paginationMode() === 'pages') {\n            <nav aria-label=\"Page navigation example\">\n              <ul class=\"pagination float-end pagination-sm\">\n                <li class=\"page-item\">\n                  <a class=\"page-link d-block\" [class.disabled]=\"currentPage() === 1\" href=\"#\" aria-label=\"Previous\"\n                    (click)=\"prev($event)\">\n                    <span aria-hidden=\"true\">&laquo;</span>\n                  </a>\n                </li>\n                @for (page of visiblePages(); track page) {\n                <li class=\"page-item\" [class.active]=\"currentPage() === page\" [class.disabled]=\"page === '...'\">\n                  <a class=\"page-link d-block\" href=\"#\" (click)=\"selectPage($event, page)\">\n                    {{ page }}\n                  </a>\n                </li>\n                }\n                <li class=\"page-item\">\n                  <a class=\"page-link d-block\" [class.disabled]=\"currentPage() === pages()\" href=\"#\" aria-label=\"Next\"\n                    (click)=\"next($event)\">\n                    <span aria-hidden=\"true\">&raquo;</span>\n                  </a>\n                </li>\n              </ul>\n              <ul class=\"ps-0 float-end me-3\">\n                <rlb-select size=\"small\" [ngModel]=\"pageSize()\" (ngModelChange)=\"onPageSizeChange($event)\"\n                  [disabled]=\"items().length === 0\">\n                  <rlb-option [value]=\"10\">10</rlb-option>\n                  <rlb-option [value]=\"20\">20</rlb-option>\n                  <rlb-option [value]=\"50\">50</rlb-option>\n                  <rlb-option [value]=\"100\">100</rlb-option>\n                </rlb-select>\n              </ul>\n            </nav>\n            }\n        </td>\n      </tr>\n    </tfoot>\n    }\n  </table>\n</div>", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DataTableComponent, isStandalone: false, selector: "rlb-dt-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, creationStrategy: { classPropertyName: "creationStrategy", publicName: "creation-strategy", isSignal: true, isRequired: false, transformFunction: null }, creationUrl: { classPropertyName: "creationUrl", publicName: "creation-url", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, paginationMode: { classPropertyName: "paginationMode", publicName: "pagination-mode", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tableHover: { classPropertyName: "tableHover", publicName: "table-hover", isSignal: true, isRequired: false, transformFunction: null }, tableStriped: { classPropertyName: "tableStriped", publicName: "table-striped", isSignal: true, isRequired: false, transformFunction: null }, tableStripedColumns: { classPropertyName: "tableStripedColumns", publicName: "table-striped-columns", isSignal: true, isRequired: false, transformFunction: null }, tableBordered: { classPropertyName: "tableBordered", publicName: "table-bordered", isSignal: true, isRequired: false, transformFunction: null }, tableBorderless: { classPropertyName: "tableBorderless", publicName: "table-borderless", isSignal: true, isRequired: false, transformFunction: null }, tableSmall: { classPropertyName: "tableSmall", publicName: "table-small", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "show-refresh", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "total-items", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "current-page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "page-size", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, cardStyle: { classPropertyName: "cardStyle", publicName: "card-style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createItem: "create-item", refreshItem: "refresh-item", loadMore: "load-more", currentPageChange: "current-pageChange", pageSizeChange: "page-sizeChange", pagination: "pagination" }, host: { properties: { "class.dt-card-style": "cardStyle()" } }, queries: [{ propertyName: "rows", predicate: DataTableRowComponent, isSignal: true }, { propertyName: "columns", predicate: DataTableHeaderComponent, isSignal: true }, { propertyName: "noItemsBlock", predicate: DataTableNoItemsComponent, isSignal: true }, { propertyName: "loadingBlock", predicate: DataTableLoadingComponent, isSignal: true }], viewQueries: [{ propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_projectedNoItems", first: true, predicate: ["projectedNoItems"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_projectedLoading", first: true, predicate: ["projectedLoading"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_projectedRows", first: true, predicate: ["projectedRows"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (creationStrategy() !== 'none' || title() || showRefresh()) {\n<div class=\"row mb-3\">\n  <div class=\"col\">\n    @if (title()) {\n    <h3 class=\"float-start\">{{ title() }}</h3>\n    }\n    @if (showRefresh()) {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n      [disabled]=\"loading()\">\n      <i class=\"fa-solid fa-arrows-rotate\"></i>\n    </button>\n    }\n    @if (creationStrategy() === 'page') {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl()\">\n      <i class=\"fa-solid fa-plus\"></i>\n    </button>\n    }\n    @if (creationStrategy() === 'modal') {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n      <i class=\"fa-solid fa-plus\"></i>\n    </button>\n    }\n  </div>\n</div>\n}\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n    <thead>\n      <tr>\n        <ng-container #projectedDisplayColumns></ng-container>\n        @if (hasActions()) {\n        <th>\n          <span class=\"float-end pe-2\">\n            Actions\n          </span>\n        </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n        @if (!loading()) {\n            <!-- ng-container for standard structural projected rows -->\n            <ng-container #projectedRows></ng-container>\n        }\n\n    <!-- 2. For internal states native HTML tr/td -->\n        @if (!loading() && items().length === 0 && rows().length === 0) {\n            <tr class=\"text-center\">\n                <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n                    <ng-container #projectedNoItems></ng-container>\n                </td>\n            </tr>\n        }\n\n        @if (loading()) {\n            <tr class=\"text-center\">\n                <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n                    <ng-container #projectedLoading></ng-container>\n                </td>\n            </tr>\n        }\n    </tbody>\n    @if (paginationMode() !== 'none') {\n    <tfoot>\n      <tr>\n          <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n            @if (paginationMode() === 'load-more') {\n            <button type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\" [disabled]=\"loading()\"\n              (click)=\"loadMore.emit()\">\n              {{ loadMoreLabel() }}\n            </button>\n            }\n            @if (paginationMode() === 'pages') {\n            <nav aria-label=\"Page navigation example\">\n              <ul class=\"pagination float-end pagination-sm\">\n                <li class=\"page-item\">\n                  <a class=\"page-link d-block\" [class.disabled]=\"currentPage() === 1\" href=\"#\" aria-label=\"Previous\"\n                    (click)=\"prev($event)\">\n                    <span aria-hidden=\"true\">&laquo;</span>\n                  </a>\n                </li>\n                @for (page of visiblePages(); track page) {\n                <li class=\"page-item\" [class.active]=\"currentPage() === page\" [class.disabled]=\"page === '...'\">\n                  <a class=\"page-link d-block\" href=\"#\" (click)=\"selectPage($event, page)\">\n                    {{ page }}\n                  </a>\n                </li>\n                }\n                <li class=\"page-item\">\n                  <a class=\"page-link d-block\" [class.disabled]=\"currentPage() === pages()\" href=\"#\" aria-label=\"Next\"\n                    (click)=\"next($event)\">\n                    <span aria-hidden=\"true\">&raquo;</span>\n                  </a>\n                </li>\n              </ul>\n              <ul class=\"ps-0 float-end me-3\">\n                <rlb-select size=\"small\" [ngModel]=\"pageSize()\" (ngModelChange)=\"onPageSizeChange($event)\"\n                  [disabled]=\"items().length === 0\">\n                  <rlb-option [value]=\"10\">10</rlb-option>\n                  <rlb-option [value]=\"20\">20</rlb-option>\n                  <rlb-option [value]=\"50\">50</rlb-option>\n                  <rlb-option [value]=\"100\">100</rlb-option>\n                </rlb-select>\n              </ul>\n            </nav>\n            }\n        </td>\n      </tr>\n    </tfoot>\n    }\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-dt-table', standalone: false, template: "@if (creationStrategy() !== 'none' || title() || showRefresh()) {\n<div class=\"row\">\n  <div class=\"col\">\n    @if (title()) {\n    <h3 class=\"float-start\">{{ title() }}</h3>\n    }\n    @if (showRefresh()) {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n      [disabled]=\"loading()\">\n      <i class=\"fa-solid fa-arrows-rotate\"></i>\n    </button>\n    }\n    @if (creationStrategy() === 'page') {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl()\">\n      <i class=\"fa-solid fa-plus\"></i>\n    </button>\n    }\n    @if (creationStrategy() === 'modal') {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n      <i class=\"fa-solid fa-plus\"></i>\n    </button>\n    }\n  </div>\n</div>\n}\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n    <thead>\n      <tr>\n        <ng-container #projectedDisplayColumns></ng-container>\n        @if (hasActions()) {\n        <th>\n          <span class=\"float-end pe-2\">\n            Actions\n          </span>\n        </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n        @if (!loading()) {\n            <!-- ng-container for standard structural projected rows -->\n            <ng-container #projectedRows></ng-container>\n        }\n\n    <!-- 2. For internal states native HTML tr/td -->\n        @if (!loading() && items().length === 0 && rows().length === 0) {\n            <tr class=\"text-center\">\n                <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n                    <ng-container #projectedNoItems></ng-container>\n                </td>\n            </tr>\n        }\n\n        @if (loading()) {\n            <tr class=\"text-center\">\n                <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n                    <ng-container #projectedLoading></ng-container>\n                </td>\n            </tr>\n        }\n    </tbody>\n    @if (paginationMode() !== 'none') {\n    <tfoot>\n      <tr>\n          <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n            @if (paginationMode() === 'load-more') {\n            <button type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\" [disabled]=\"loading()\"\n              (click)=\"loadMore.emit()\">\n              {{ loadMoreLabel() }}\n            </button>\n            }\n            @if (paginationMode() === 'pages') {\n            <nav aria-label=\"Page navigation example\">\n              <ul class=\"pagination float-end pagination-sm\">\n                <li class=\"page-item\">\n                  <a class=\"page-link d-block\" [class.disabled]=\"currentPage() === 1\" href=\"#\" aria-label=\"Previous\"\n                    (click)=\"prev($event)\">\n                    <span aria-hidden=\"true\">&laquo;</span>\n                  </a>\n                </li>\n                @for (page of visiblePages(); track page) {\n                <li class=\"page-item\" [class.active]=\"currentPage() === page\" [class.disabled]=\"page === '...'\">\n                  <a class=\"page-link d-block\" href=\"#\" (click)=\"selectPage($event, page)\">\n                    {{ page }}\n                  </a>\n                </li>\n                }\n                <li class=\"page-item\">\n                  <a class=\"page-link d-block\" [class.disabled]=\"currentPage() === pages()\" href=\"#\" aria-label=\"Next\"\n                    (click)=\"next($event)\">\n                    <span aria-hidden=\"true\">&raquo;</span>\n                  </a>\n                </li>\n              </ul>\n              <ul class=\"ps-0 float-end me-3\">\n                <rlb-select size=\"small\" [ngModel]=\"pageSize()\" (ngModelChange)=\"onPageSizeChange($event)\"\n                  [disabled]=\"items().length === 0\">\n                  <rlb-option [value]=\"10\">10</rlb-option>\n                  <rlb-option [value]=\"20\">20</rlb-option>\n                  <rlb-option [value]=\"50\">50</rlb-option>\n                  <rlb-option [value]=\"100\">100</rlb-option>\n                </rlb-select>\n              </ul>\n            </nav>\n            }\n        </td>\n      </tr>\n    </tfoot>\n    }\n  </table>\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], creationStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "creation-strategy", required: false }] }], creationUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "creation-url", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], paginationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination-mode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], tableHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-hover", required: false }] }], tableStriped: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-striped", required: false }] }], tableStripedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-striped-columns", required: false }] }], tableBordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-bordered", required: false }] }], tableBorderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-borderless", required: false }] }], tableSmall: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-small", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-refresh", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "total-items", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "current-page", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "page-size", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], loadMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreLabel", required: false }] }], createItem: [{ type: i0.Output, args: ["create-item"] }], refreshItem: [{ type: i0.Output, args: ["refresh-item"] }], loadMore: [{ type: i0.Output, args: ["load-more"] }], currentPageChange: [{ type: i0.Output, args: ["current-pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["page-sizeChange"] }], pagination: [{ type: i0.Output, args: ["pagination"] }], _projectedDisplayColumns: [{ type: i0.ViewChild, args: ['projectedDisplayColumns', { ...{
+            args: [{ selector: 'rlb-dt-table', standalone: false, host: {
+                        // This automatically adds the 'dt-card-style' class to the <rlb-dt-table>
+                        // element in the DOM if cardStyle() is true.
+                        '[class.dt-card-style]': 'cardStyle()',
+                    }, template: "@if (creationStrategy() !== 'none' || title() || showRefresh()) {\n<div class=\"row mb-3\">\n  <div class=\"col\">\n    @if (title()) {\n    <h3 class=\"float-start\">{{ title() }}</h3>\n    }\n    @if (showRefresh()) {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n      [disabled]=\"loading()\">\n      <i class=\"fa-solid fa-arrows-rotate\"></i>\n    </button>\n    }\n    @if (creationStrategy() === 'page') {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl()\">\n      <i class=\"fa-solid fa-plus\"></i>\n    </button>\n    }\n    @if (creationStrategy() === 'modal') {\n    <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n      <i class=\"fa-solid fa-plus\"></i>\n    </button>\n    }\n  </div>\n</div>\n}\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n    <thead>\n      <tr>\n        <ng-container #projectedDisplayColumns></ng-container>\n        @if (hasActions()) {\n        <th>\n          <span class=\"float-end pe-2\">\n            Actions\n          </span>\n        </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n        @if (!loading()) {\n            <!-- ng-container for standard structural projected rows -->\n            <ng-container #projectedRows></ng-container>\n        }\n\n    <!-- 2. For internal states native HTML tr/td -->\n        @if (!loading() && items().length === 0 && rows().length === 0) {\n            <tr class=\"text-center\">\n                <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n                    <ng-container #projectedNoItems></ng-container>\n                </td>\n            </tr>\n        }\n\n        @if (loading()) {\n            <tr class=\"text-center\">\n                <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n                    <ng-container #projectedLoading></ng-container>\n                </td>\n            </tr>\n        }\n    </tbody>\n    @if (paginationMode() !== 'none') {\n    <tfoot>\n      <tr>\n          <td [attr.colspan]=\"cols()\" style=\"border: 0\">\n            @if (paginationMode() === 'load-more') {\n            <button type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\" [disabled]=\"loading()\"\n              (click)=\"loadMore.emit()\">\n              {{ loadMoreLabel() }}\n            </button>\n            }\n            @if (paginationMode() === 'pages') {\n            <nav aria-label=\"Page navigation example\">\n              <ul class=\"pagination float-end pagination-sm\">\n                <li class=\"page-item\">\n                  <a class=\"page-link d-block\" [class.disabled]=\"currentPage() === 1\" href=\"#\" aria-label=\"Previous\"\n                    (click)=\"prev($event)\">\n                    <span aria-hidden=\"true\">&laquo;</span>\n                  </a>\n                </li>\n                @for (page of visiblePages(); track page) {\n                <li class=\"page-item\" [class.active]=\"currentPage() === page\" [class.disabled]=\"page === '...'\">\n                  <a class=\"page-link d-block\" href=\"#\" (click)=\"selectPage($event, page)\">\n                    {{ page }}\n                  </a>\n                </li>\n                }\n                <li class=\"page-item\">\n                  <a class=\"page-link d-block\" [class.disabled]=\"currentPage() === pages()\" href=\"#\" aria-label=\"Next\"\n                    (click)=\"next($event)\">\n                    <span aria-hidden=\"true\">&raquo;</span>\n                  </a>\n                </li>\n              </ul>\n              <ul class=\"ps-0 float-end me-3\">\n                <rlb-select size=\"small\" [ngModel]=\"pageSize()\" (ngModelChange)=\"onPageSizeChange($event)\"\n                  [disabled]=\"items().length === 0\">\n                  <rlb-option [value]=\"10\">10</rlb-option>\n                  <rlb-option [value]=\"20\">20</rlb-option>\n                  <rlb-option [value]=\"50\">50</rlb-option>\n                  <rlb-option [value]=\"100\">100</rlb-option>\n                </rlb-select>\n              </ul>\n            </nav>\n            }\n        </td>\n      </tr>\n    </tfoot>\n    }\n  </table>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], creationStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "creation-strategy", required: false }] }], creationUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "creation-url", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], paginationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination-mode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], tableHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-hover", required: false }] }], tableStriped: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-striped", required: false }] }], tableStripedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-striped-columns", required: false }] }], tableBordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-bordered", required: false }] }], tableBorderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-borderless", required: false }] }], tableSmall: [{ type: i0.Input, args: [{ isSignal: true, alias: "table-small", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-refresh", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "total-items", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "current-page", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "page-size", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], loadMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreLabel", required: false }] }], cardStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "card-style", required: false }] }], createItem: [{ type: i0.Output, args: ["create-item"] }], refreshItem: [{ type: i0.Output, args: ["refresh-item"] }], loadMore: [{ type: i0.Output, args: ["load-more"] }], currentPageChange: [{ type: i0.Output, args: ["current-pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["page-sizeChange"] }], pagination: [{ type: i0.Output, args: ["pagination"] }], _projectedDisplayColumns: [{ type: i0.ViewChild, args: ['projectedDisplayColumns', { ...{
                             read: ViewContainerRef,
                         }, isSignal: true }] }], rows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataTableRowComponent), { isSignal: true }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataTableHeaderComponent), { isSignal: true }] }], _projectedNoItems: [{ type: i0.ViewChild, args: ['projectedNoItems', { ...{ read: ViewContainerRef }, isSignal: true }] }], _projectedLoading: [{ type: i0.ViewChild, args: ['projectedLoading', { ...{ read: ViewContainerRef }, isSignal: true }] }], _projectedRows: [{ type: i0.ViewChild, args: ['projectedRows', { ...{ read: ViewContainerRef }, isSignal: true }] }], noItemsBlock: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataTableNoItemsComponent), { isSignal: true }] }], loadingBlock: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataTableLoadingComponent), { isSignal: true }] }] } });