@coreui/angular-pro 5.0.0-alpha.6 → 5.0.0-alpha.8

package/fesm2022/coreui-angular-pro.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, ElementRef, inject, Renderer2, booleanAttribute, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, RendererFactory2, DestroyRef, Pipe, signal, computed, numberAttribute, ViewChildren, PLATFORM_ID, Inject, ViewChild, forwardRef, Optional, ContentChild, ChangeDetectionStrategy, NgZone, effect, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Directive, Input, ElementRef, inject, Renderer2, booleanAttribute, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, DestroyRef, signal, effect, RendererFactory2, Pipe, computed, numberAttribute, ViewChildren, PLATFORM_ID, Inject, ViewChild, forwardRef, Optional, ContentChild, ChangeDetectionStrategy, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i3 from '@angular/common';
-import { NgTemplateOutlet, NgIf, NgClass, DOCUMENT, NgForOf, AsyncPipe, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, isPlatformServer, CommonModule, formatDate, I18nPluralPipe, isPlatformBrowser, JsonPipe } from '@angular/common';
+import { NgTemplateOutlet, NgIf, DOCUMENT, NgClass, NgForOf, AsyncPipe, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, isPlatformServer, isPlatformBrowser, CommonModule, formatDate, I18nPluralPipe, JsonPipe } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animate, animation, style, useAnimation, state, transition, trigger, query, group } from '@angular/animations';
-import { Subject, BehaviorSubject, Observable, fromEvent, skip, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { fromEvent, Subject, BehaviorSubject, Observable, skip, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
 import * as i1$1 from '@angular/router';
-import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { RouterModule, NavigationEnd, ActivatedRoute, RouterLink } from '@angular/router';
 import { filter, tap, distinctUntilChanged, take, finalize, withLatestFrom, zipWith, debounceTime, map, delay, combineLatestWith } from 'rxjs/operators';
 import * as i1$2 from '@angular/cdk/a11y';
 import { FocusMonitor, A11yModule, FocusKeyManager } from '@angular/cdk/a11y';
@@ -979,6 +979,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }] });
 
+class AlignDirective {
+    get hostClasses() {
+        return {
+            [`align-${this.align}`]: !!this.align,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: AlignDirective, isStandalone: true, selector: "[cAlign]", inputs: { align: ["cAlign", "align"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AlignDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cAlign]',
+                    standalone: true
+                }]
+        }], propDecorators: { align: [{
+                type: Input,
+                args: ['cAlign']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class BgColorDirective {
     get hostClasses() {
         return {
@@ -1076,37 +1099,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 args: ['class']
             }] } });
 
-class TextColorDirective {
-    get hostClasses() {
-        const color = this.color;
-        return {
-            [`text-${color}`]: !!color
-        };
-    }
-    constructor() {
-        /**
-         * Set text-color of element
-         * @type TextColors
-         */
-        this.color = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: TextColorDirective, isStandalone: true, selector: "[cTextColor]", inputs: { color: ["cTextColor", "color"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextColorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cTextColor]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input,
-                args: ['cTextColor']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 class RoundedDirective {
     constructor() {
         /**
@@ -1171,59 +1163,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 args: ['class']
             }] } });
 
-class AlignDirective {
+class ShadowOnScrollDirective {
+    #destroyRef = inject(DestroyRef);
+    #document = inject(DOCUMENT);
+    #elementRef = inject(ElementRef);
+    #scrolled = signal(false);
+    #scrollEffect = effect(() => {
+        this.#elementRef.nativeElement.classList.toggle(this.#shadowClass, this.#scrolled());
+    });
+    #observable;
+    #shadowClass = 'shadow-sm';
+    constructor() {
+        this.#destroyRef.onDestroy(() => {
+            this.#scrollEffect?.destroy();
+        });
+    }
+    set cShadowOnScroll(value) {
+        this.#scrolled.set(false);
+        if (value) {
+            this.#shadowClass = value === true ? 'shadow' : `shadow-${value}`;
+            this.#observable = fromEvent(this.#document, 'scroll')
+                .pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe(scrolled => {
+                this.#scrolled.set(this.#document.documentElement.scrollTop > 0);
+            });
+        }
+        else {
+            this.#observable?.unsubscribe();
+        }
+    }
+    ;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ShadowOnScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ShadowOnScrollDirective, isStandalone: true, selector: "[cShadowOnScroll]", inputs: { cShadowOnScroll: "cShadowOnScroll" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ShadowOnScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cShadowOnScroll]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { cShadowOnScroll: [{
+                type: Input
+            }] } });
+
+class TextColorDirective {
     get hostClasses() {
+        const color = this.color;
         return {
-            [`align-${this.align}`]: !!this.align,
+            [`text-${color}`]: !!color
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: AlignDirective, isStandalone: true, selector: "[cAlign]", inputs: { align: ["cAlign", "align"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+    constructor() {
+        /**
+         * Set text-color of element
+         * @type TextColors
+         */
+        this.color = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: TextColorDirective, isStandalone: true, selector: "[cTextColor]", inputs: { color: ["cTextColor", "color"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AlignDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextColorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cAlign]',
+                    selector: '[cTextColor]',
                     standalone: true
                 }]
-        }], propDecorators: { align: [{
+        }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input,
-                args: ['cAlign']
+                args: ['cTextColor']
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
+const UTILITY_DIRECTIVES = [AlignDirective, BgColorDirective, BorderDirective, RoundedDirective, ShadowOnScrollDirective, TextColorDirective];
 class UtilitiesModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: UtilitiesModule, imports: [BgColorDirective,
-            BorderDirective,
-            RoundedDirective,
-            TextColorDirective,
-            AlignDirective], exports: [BgColorDirective,
-            BorderDirective,
-            RoundedDirective,
-            TextColorDirective,
-            AlignDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: UtilitiesModule, imports: [AlignDirective, BgColorDirective, BorderDirective, RoundedDirective, ShadowOnScrollDirective, TextColorDirective], exports: [AlignDirective, BgColorDirective, BorderDirective, RoundedDirective, ShadowOnScrollDirective, TextColorDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UtilitiesModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UtilitiesModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        BgColorDirective,
-                        BorderDirective,
-                        RoundedDirective,
-                        TextColorDirective,
-                        AlignDirective
-                    ],
-                    exports: [
-                        BgColorDirective,
-                        BorderDirective,
-                        RoundedDirective,
-                        TextColorDirective,
-                        AlignDirective
-                    ]
+                    imports: [...UTILITY_DIRECTIVES], exports: [...UTILITY_DIRECTIVES]
                 }]
         }] });
 
@@ -1250,17 +1273,16 @@ class AvatarComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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\"></ng-container>\n  <span *ngIf=\"!!status\" [ngClass]=\"statusClass\"></span>\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  <img *ngIf=\"!!src; else imageContent\" [src]=\"src\" class=\"avatar-img\" />\n  <ng-template #imageContent>\n    <ng-content></ng-content>\n  </ng-template>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", 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\"></ng-container>\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></ng-content>\n  }\n  <ng-template #imageContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-avatar', standalone: true, imports: [
                         NgTemplateOutlet,
-                        NgClass,
-                        NgIf
+                        NgClass
                     ], hostDirectives: [{
                             directive: TextColorDirective, inputs: ['cTextColor: textColor']
-                        }], template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\"></ng-container>\n  <span *ngIf=\"!!status\" [ngClass]=\"statusClass\"></span>\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  <img *ngIf=\"!!src; else imageContent\" [src]=\"src\" class=\"avatar-img\" />\n  <ng-template #imageContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n" }]
+                        }], template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\"></ng-container>\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></ng-content>\n  }\n  <ng-template #imageContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }], shape: [{
@@ -4068,6 +4090,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                     args: [DOCUMENT]
                 }] }, { type: i0.RendererFactory2 }] });
 
+class InMemoryStorageService {
+    #storage = new Map();
+    constructor() { }
+    setItem(key, data) {
+        this.#storage.set(key, JSON.stringify(data));
+    }
+    getItem(key) {
+        return this.#storage.has(key) ? JSON.parse(this.#storage.get(key) ?? 'null') : undefined;
+    }
+    removeItem(key) {
+        this.#storage.delete(key);
+    }
+    clear() {
+        this.#storage.clear();
+    }
+    get length() {
+        return this.#storage.size;
+    }
+    key(index) {
+        return Array.from(this.#storage.keys())[index];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InMemoryStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InMemoryStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InMemoryStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class LocalStorageService {
+    constructor(platformId, document) {
+        this.platformId = platformId;
+        this.document = document;
+        this.#data$ = new BehaviorSubject(null);
+        this.data$ = this.#data$.asObservable();
+        this.localStorage = isPlatformBrowser(this.platformId) && this.document.defaultView ? this.document.defaultView?.localStorage : new InMemoryStorageService();
+    }
+    #data$;
+    setItem(key, data) {
+        this.localStorage.setItem(key, JSON.stringify(data));
+        this.#data$.next({ key, data });
+    }
+    getItem(key) {
+        const data = JSON.parse(this.localStorage.getItem(key) ?? 'null');
+        this.#data$.next({ key, data });
+        return data;
+    }
+    removeItem(key) {
+        this.localStorage.removeItem(key);
+        this.#data$.next({ key, data: null });
+    }
+    clear() {
+        this.localStorage.clear();
+        this.#data$.next(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalStorageService, deps: [{ token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+class ColorModeService {
+    #destroyRef;
+    #document;
+    #window;
+    #activatedRoute;
+    #localStorage;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#window = this.#document.defaultView;
+        this.#activatedRoute = inject(ActivatedRoute);
+        this.#localStorage = inject(LocalStorageService);
+        this.eventName = signal('ColorSchemeChange');
+        this.localStorageItemName = signal('coreui-angular-color-scheme');
+        this.localStorageItemName$ = toObservable(this.localStorageItemName);
+        this.colorMode = signal('light');
+        this.colorModeEffect = effect(() => {
+            if (this.colorMode()) {
+                this.setStoredTheme(this.localStorageItemName(), this.colorMode());
+                this.setTheme(this.colorMode());
+            }
+        });
+        this.#activatedRoute.queryParams
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(params => {
+            const theme = params['theme']?.match(/^[A-Za-z0-9\s]+/)[0];
+            if (theme) {
+                this.colorMode.set(theme);
+            }
+        }))
+            .subscribe();
+        this.localStorageItemName$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(params => {
+            this.colorMode.set(this.getPreferredColorScheme(params));
+        }))
+            .subscribe();
+    }
+    getStoredTheme(localStorageItemName) {
+        return this.#localStorage.getItem(localStorageItemName);
+    }
+    setStoredTheme(localStorageItemName, colorMode) {
+        return this.#localStorage.setItem(localStorageItemName, colorMode);
+    }
+    getPreferredColorScheme(localStorageItemName) {
+        if (this.#window === undefined) {
+            return 'light';
+        }
+        const storedTheme = this.getStoredTheme(localStorageItemName);
+        if (storedTheme) {
+            return storedTheme;
+        }
+        return this.#window?.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    ;
+    setTheme(colorMode) {
+        this.#document.documentElement.dataset['coreuiTheme'] =
+            colorMode === 'auto' && this.#document.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : colorMode;
+        const event = new Event(this.eventName());
+        this.#document.documentElement.dispatchEvent(event);
+    }
+    ;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ColorModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ColorModeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ColorModeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class CarouselService {
     constructor() {
         this.carouselIndex = new BehaviorSubject({});
@@ -8592,14 +8759,14 @@ class RowDirective {
         const cols = this.xs;
         const classes = {
             row: true,
-            [`row-cols-${cols}`]: !!cols,
+            [`row-cols-${cols}`]: !!cols
         };
         Object.keys(BreakpointInfix).forEach(breakpoint => {
             // @ts-ignore
             const value = this[breakpoint];
             if ((typeof value === 'number') || (typeof value === 'string')) {
-                const infix = breakpoint === 'xs' ? '' : breakpoint;
-                classes[`row-cols-${infix}-${value}`] = !!value;
+                const infix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
+                classes[`row-cols${infix}-${value}`] = !!value;
             }
         });
         return classes;
@@ -8759,11 +8926,11 @@ class HeaderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: HeaderComponent, isStandalone: true, selector: "c-header, [c-header]", inputs: { container: "container", position: "position", role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.getClasses" } }, ngImport: i0, template: "<div [ngClass]=\"headerClasses\" *ngIf=\"!!container; else elseBlock\">\n  <ng-content></ng-content>\n</div>\n<ng-template #elseBlock>\n  <ng-content></ng-content>\n</ng-template>\n\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: HeaderComponent, isStandalone: true, selector: "c-header, [c-header]", inputs: { container: "container", position: "position", role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.getClasses" } }, ngImport: i0, template: "@if (!!container) {\n  <div [ngClass]=\"headerClasses\">\n    <ng-content />\n  </div>\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-header, [c-header]', standalone: true, imports: [NgClass, NgIf], template: "<div [ngClass]=\"headerClasses\" *ngIf=\"!!container; else elseBlock\">\n  <ng-content></ng-content>\n</div>\n<ng-template #elseBlock>\n  <ng-content></ng-content>\n</ng-template>\n\n\n" }]
+            args: [{ selector: 'c-header, [c-header]', standalone: true, imports: [NgClass], template: "@if (!!container) {\n  <div [ngClass]=\"headerClasses\">\n    <ng-content />\n  </div>\n} @else {\n  <ng-content />\n}\n" }]
         }], propDecorators: { container: [{
                 type: Input
             }], position: [{
@@ -13550,7 +13717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
-class SidebarTogglerComponent {
+class SidebarTogglerDirective {
     constructor() {
         this.role = 'button';
         this.sidebarTogglerClass = true;
@@ -13559,17 +13726,18 @@ class SidebarTogglerComponent {
         return {
             appearance: 'button',
             'align-items': 'flex-start',
+            cursor: 'pointer'
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarTogglerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarTogglerComponent, isStandalone: true, selector: "c-sidebar-toggler", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role", "class.sidebar-toggler": "this.sidebarTogglerClass", "style": "this.getStyles" } }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarTogglerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: SidebarTogglerDirective, isStandalone: true, selector: "[cSidebarToggler]", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role", "class.sidebar-toggler": "this.sidebarTogglerClass", "style": "this.getStyles" } }, hostDirectives: [{ directive: SidebarToggleDirective, inputs: ["cSidebarToggle", "cSidebarToggler", "toggle", "toggle"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarTogglerComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarTogglerDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'c-sidebar-toggler',
-                    template: ``,
-                    standalone: true
+                    selector: '[cSidebarToggler]',
+                    standalone: true,
+                    hostDirectives: [{ directive: SidebarToggleDirective, inputs: ['cSidebarToggle: cSidebarToggler', 'toggle'] }]
                 }]
         }], propDecorators: { role: [{
                 type: HostBinding,
@@ -14232,9 +14400,9 @@ class SidebarModule {
             SidebarNavLinkPipe,
             SidebarNavTitleComponent,
             SidebarToggleDirective,
-            SidebarTogglerComponent], exports: [SidebarComponent,
+            SidebarTogglerDirective], exports: [SidebarComponent,
             SidebarToggleDirective,
-            SidebarTogglerComponent,
+            SidebarTogglerDirective,
             SidebarBrandComponent,
             SidebarNavComponent,
             SidebarHeaderComponent,
@@ -14267,12 +14435,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                         SidebarNavLinkPipe,
                         SidebarNavTitleComponent,
                         SidebarToggleDirective,
-                        SidebarTogglerComponent
+                        SidebarTogglerDirective
                     ],
                     exports: [
                         SidebarComponent,
                         SidebarToggleDirective,
-                        SidebarTogglerComponent,
+                        SidebarTogglerDirective,
                         SidebarBrandComponent,
                         SidebarNavComponent,
                         SidebarHeaderComponent,
@@ -17221,5 +17389,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalendarComponent, CalendarModule, CalendarMonthComponent, CalendarNavigationComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DatePickerComponent, DatePickerModule, DateRangePickerComponent, DateRangePickerModule, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementCoverComponent, ElementCoverModule, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LoadingButtonComponent, LoadingButtonModule, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SmartPaginationComponent, SmartPaginationModule, SmartTableComponent, SmartTableFilterComponent, SmartTableModule, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ThemeDirective, TimePickerComponent, TimePickerModule, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
+export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalendarComponent, CalendarModule, CalendarMonthComponent, CalendarNavigationComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ColorModeService, ContainerComponent, DatePickerComponent, DatePickerModule, DateRangePickerComponent, DateRangePickerModule, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementCoverComponent, ElementCoverModule, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InMemoryStorageService, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LoadingButtonComponent, LoadingButtonModule, LocalStorageService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, ShadowOnScrollDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerDirective, SmartPaginationComponent, SmartPaginationModule, SmartTableComponent, SmartTableFilterComponent, SmartTableModule, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ThemeDirective, TimePickerComponent, TimePickerModule, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
 //# sourceMappingURL=coreui-angular-pro.mjs.map