cmat 0.0.28 → 0.0.29

package/directives/digit-only/index.d.ts

@@ -1,5 +1,54 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="cmat/directives/digit-only" />
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { OnChanges, ElementRef, SimpleChanges, OnInit } from '@angular/core';
+
+declare class CmatDigitOnlyDirective implements OnChanges {
+    el: ElementRef;
+    decimal: boolean;
+    decimalSeparator: string;
+    allowNegatives: boolean;
+    allowPaste: boolean;
+    negativeSign: string;
+    min: number;
+    max: number;
+    pattern?: string | RegExp;
+    inputElement: HTMLInputElement;
+    value: string;
+    private _regex;
+    private _hasDecimalPoint;
+    private _hasNegativeSign;
+    private _navigationKeys;
+    constructor(el: ElementRef);
+    onBeforeInput(e: InputEvent): any;
+    onInputChange(event: any): void;
+    onKeyDown(e: KeyboardEvent): any;
+    onPaste(event: any): void;
+    onDrop(event: DragEvent): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private _pasteData;
+    private _insertAtCursor;
+    private _triggerEvent;
+    private _sanitizeInput;
+    private _getNegativeSignRegExp;
+    private _isValidDecimal;
+    private _getSelection;
+    private _forecastValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDigitOnlyDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CmatDigitOnlyDirective, "[cmatDigitOnly]", never, { "decimal": { "alias": "decimal"; "required": false; }; "decimalSeparator": { "alias": "decimalSeparator"; "required": false; }; "allowNegatives": { "alias": "allowNegatives"; "required": false; }; "allowPaste": { "alias": "allowPaste"; "required": false; }; "negativeSign": { "alias": "negativeSign"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class CmatMaskDirective implements OnInit {
+    el: ElementRef;
+    inputElement: HTMLInputElement;
+    value: string;
+    regex: RegExp;
+    private _navigationKeys;
+    constructor(el: ElementRef);
+    onInputChange(event: any): void;
+    onKeyDown(e: KeyboardEvent): void;
+    ngOnInit(): void;
+    private _forecastValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatMaskDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CmatMaskDirective, "[cmatMask]", never, {}, {}, never, never, true, never>;
+}
+
+export { CmatDigitOnlyDirective, CmatMaskDirective };

package/directives/equal-validator/index.d.ts

@@ -1,5 +1,15 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="cmat/directives/equal-validator" />
-export * from './public-api';
+import { Validator, AbstractControl } from '@angular/forms';
+import * as i0 from '@angular/core';
+
+declare class CmatEqualValidatorDirective implements Validator {
+    private _validateEqual;
+    private _reverse;
+    constructor(_validateEqual: string, _reverse: string);
+    private static _validateNoReverse;
+    private static _validateReverse;
+    validate(c: AbstractControl): Record<string, any> | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatEqualValidatorDirective, [{ attribute: "cmatValidateEqual"; }, { attribute: "reverse"; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CmatEqualValidatorDirective, "[cmatValidateEqual][formControlName],[cmatValidateEqual][formControl],[cmatValidateEqual][ngModel]", never, {}, {}, never, never, true, never>;
+}
+
+export { CmatEqualValidatorDirective };

package/fesm2022/cmat-components-adapter.mjs

@@ -249,10 +249,10 @@ class CNativeDatetimeAdapter extends DatetimeAdapter {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CNativeDatetimeAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CNativeDatetimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CNativeDatetimeAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CNativeDatetimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CNativeDatetimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CNativeDatetimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -357,10 +357,10 @@ class DayjsDatetimeAdapter extends DatetimeAdapter {
     _getDateInNextMonth(date) {
         return super.clone(date).date(1).add(1, 'month');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DayjsDatetimeAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DayjsDatetimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DayjsDatetimeAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DayjsDatetimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DayjsDatetimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DayjsDatetimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -563,10 +563,10 @@ class DayjsDateAdapter extends DateAdapter {
         dayjs.extend(localeData);
         this.setLocale(dateLocale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DayjsDateAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: CMAT_DAYJS_DATE_ADAPTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DayjsDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DayjsDateAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: CMAT_DAYJS_DATE_ADAPTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DayjsDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DayjsDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DayjsDateAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional

package/fesm2022/cmat-components-breadcrumb.mjs

@@ -13,10 +13,10 @@ import { Subject, BehaviorSubject } from 'rxjs';
  * Usage: refer to the demo - app.component.html
  */
 class CmatBreadcrumbItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatBreadcrumbItem]',
@@ -340,10 +340,10 @@ class CmatBreadcrumbService {
         }
         return config || {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatBreadcrumbService, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatBreadcrumbService, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -414,10 +414,10 @@ class CmatBreadcrumbComponent {
             };
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatBreadcrumbComponent, deps: [{ token: CmatBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: CmatBreadcrumbComponent, isStandalone: true, selector: "cmat-breadcrumb", inputs: { autoGenerate: "autoGenerate", preserveQueryParams: "preserveQueryParams", preserveFragment: "preserveFragment", class: "class", anchorTarget: "anchorTarget", separator: "separator" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CmatBreadcrumbItemDirective, descendants: true, read: TemplateRef }], exportAs: ["cmatBreadcrumb"], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs$ | async; track\r\n      $index; let isLast = $last; let isFirst = $first; let index = $index; let count = $count) {\r\n      <li class=\"list-none\">\r\n        @if (!isLast) {\r\n          <a class=\"cmat-breadcrumb-link\"\r\n            rel=\"noopener noreferrer\"\r\n            [ngClass]=\"{ 'pointer-events-none cursor-not-allowed': breadcrumb.disable }\" [attr.aria-disabled]=\"breadcrumb.disable\"\r\n          [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\" [routerLink]=\"\r\n            breadcrumb.routeInterceptor\r\n              ? breadcrumb.routeInterceptor( breadcrumb,breadcrumb.routeLink)\r\n              : breadcrumb.routeLink\" [queryParams]=\"preserveQueryParams ? breadcrumb.queryParams : undefined\"\r\n            [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n            [target]=\"anchorTarget ? anchorTarget : '_self'\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n          @if (!itemTemplate) {\r\n            {{\r\n            breadcrumb.label\r\n            }}\r\n          }\r\n        </a>\r\n      }\r\n      @if (isLast) {\r\n        <span class=\"flex items-center\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n        @if (!itemTemplate) {\r\n          {{\r\n          breadcrumb.label\r\n          }}\r\n        }\r\n      </span>\r\n    }\r\n  </li>\r\n  @if (!isLast) {\r\n    <li class=\"flex select-none mx-4\" aria-hidden=\"true\" role=\"separator\">\r\n      <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n      @if (separatorTemplate===null) {\r\n        {{ separator }}\r\n      }\r\n    </li>\r\n  }\r\n}\r\n</ol>\r\n</nav>", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatBreadcrumbComponent, deps: [{ token: CmatBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: CmatBreadcrumbComponent, isStandalone: true, selector: "cmat-breadcrumb", inputs: { autoGenerate: "autoGenerate", preserveQueryParams: "preserveQueryParams", preserveFragment: "preserveFragment", class: "class", anchorTarget: "anchorTarget", separator: "separator" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CmatBreadcrumbItemDirective, descendants: true, read: TemplateRef }], exportAs: ["cmatBreadcrumb"], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs$ | async; track\r\n      $index; let isLast = $last; let isFirst = $first; let index = $index; let count = $count) {\r\n      <li class=\"list-none\">\r\n        @if (!isLast) {\r\n          <a class=\"cmat-breadcrumb-link\"\r\n            rel=\"noopener noreferrer\"\r\n            [ngClass]=\"{ 'pointer-events-none cursor-not-allowed': breadcrumb.disable }\" [attr.aria-disabled]=\"breadcrumb.disable\"\r\n          [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\" [routerLink]=\"\r\n            breadcrumb.routeInterceptor\r\n              ? breadcrumb.routeInterceptor( breadcrumb,breadcrumb.routeLink)\r\n              : breadcrumb.routeLink\" [queryParams]=\"preserveQueryParams ? breadcrumb.queryParams : undefined\"\r\n            [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n            [target]=\"anchorTarget ? anchorTarget : '_self'\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n          @if (!itemTemplate) {\r\n            {{\r\n            breadcrumb.label\r\n            }}\r\n          }\r\n        </a>\r\n      }\r\n      @if (isLast) {\r\n        <span class=\"flex items-center\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n        @if (!itemTemplate) {\r\n          {{\r\n          breadcrumb.label\r\n          }}\r\n        }\r\n      </span>\r\n    }\r\n  </li>\r\n  @if (!isLast) {\r\n    <li class=\"flex select-none mx-4\" aria-hidden=\"true\" role=\"separator\">\r\n      <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n      @if (separatorTemplate===null) {\r\n        {{ separator }}\r\n      }\r\n    </li>\r\n  }\r\n}\r\n</ol>\r\n</nav>", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-breadcrumb', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatBreadcrumb', imports: [NgClass, AsyncPipe, RouterLink, NgTemplateOutlet], template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs$ | async; track\r\n      $index; let isLast = $last; let isFirst = $first; let index = $index; let count = $count) {\r\n      <li class=\"list-none\">\r\n        @if (!isLast) {\r\n          <a class=\"cmat-breadcrumb-link\"\r\n            rel=\"noopener noreferrer\"\r\n            [ngClass]=\"{ 'pointer-events-none cursor-not-allowed': breadcrumb.disable }\" [attr.aria-disabled]=\"breadcrumb.disable\"\r\n          [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\" [routerLink]=\"\r\n            breadcrumb.routeInterceptor\r\n              ? breadcrumb.routeInterceptor( breadcrumb,breadcrumb.routeLink)\r\n              : breadcrumb.routeLink\" [queryParams]=\"preserveQueryParams ? breadcrumb.queryParams : undefined\"\r\n            [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n            [target]=\"anchorTarget ? anchorTarget : '_self'\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n          @if (!itemTemplate) {\r\n            {{\r\n            breadcrumb.label\r\n            }}\r\n          }\r\n        </a>\r\n      }\r\n      @if (isLast) {\r\n        <span class=\"flex items-center\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n        @if (!itemTemplate) {\r\n          {{\r\n          breadcrumb.label\r\n          }}\r\n        }\r\n      </span>\r\n    }\r\n  </li>\r\n  @if (!isLast) {\r\n    <li class=\"flex select-none mx-4\" aria-hidden=\"true\" role=\"separator\">\r\n      <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n      @if (separatorTemplate===null) {\r\n        {{ separator }}\r\n      }\r\n    </li>\r\n  }\r\n}\r\n</ol>\r\n</nav>", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"] }]
         }], ctorParameters: () => [{ type: CmatBreadcrumbService }], propDecorators: { itemTemplate: [{

package/fesm2022/cmat-components-card.mjs

@@ -31,10 +31,10 @@ class CmatCardComponent {
             this.flippable = coerceBooleanProperty(changes['flippable'].currentValue);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: CmatCardComponent, isStandalone: true, selector: "cmat-card", inputs: { expanded: "expanded", face: "face", flippable: "flippable" }, host: { properties: { "class": "this.classList" } }, exportAs: ["cmatCard"], usesOnChanges: true, ngImport: i0, template: "<!-- Flippable card -->\r\n@if (flippable) {\r\n  <!-- Front -->\r\n  <div class=\"cmat-card-front\">\r\n    <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n  </div>\r\n  <!-- Back -->\r\n  <div class=\"cmat-card-back overflow-y-auto scrollbar-custom\">\r\n    <ng-content select=\"[cmatCardBack]\"></ng-content>\r\n  </div>\r\n}\r\n\r\n<!-- Normal card -->\r\n@if (!flippable) {\r\n  <!-- Content -->\r\n  <ng-content></ng-content>\r\n  <!-- Expansion -->\r\n  @if (expanded) {\r\n    <div class=\"cmat-card-expansion\" [@expandCollapse]>\r\n      <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n    </div>\r\n  }\r\n}", styles: ["cmat-card{position:relative;display:flex;overflow:hidden;border-radius:1rem}cmat-card.cmat-card-flippable{border-width:0!important;border-radius:1rem;overflow:visible;transform-style:preserve-3d;transition:transform 1s;perspective:600px;background:transparent!important}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-front{visibility:hidden;opacity:0;transform:rotateY(180deg)}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-back{visibility:visible;opacity:1;transform:rotateY(360deg)}cmat-card.cmat-card-flippable .cmat-card-front,cmat-card.cmat-card-flippable .cmat-card-back{display:flex;flex-direction:column;flex:1 1 auto;z-index:10;transition:transform .5s ease-out 0s,visibility 0s ease-in .2s,opacity 0s ease-in .2s;backface-visibility:hidden;border-radius:1rem}cmat-card.cmat-card-flippable .cmat-card-front{position:relative;opacity:1;visibility:visible;transform:rotateY(0);overflow:hidden}cmat-card.cmat-card-flippable .cmat-card-back{position:absolute;inset:0;opacity:0;visibility:hidden;transform:rotateY(180deg)}\n"], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: CmatCardComponent, isStandalone: true, selector: "cmat-card", inputs: { expanded: "expanded", face: "face", flippable: "flippable" }, host: { properties: { "class": "this.classList" } }, exportAs: ["cmatCard"], usesOnChanges: true, ngImport: i0, template: "<!-- Flippable card -->\r\n@if (flippable) {\r\n  <!-- Front -->\r\n  <div class=\"cmat-card-front\">\r\n    <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n  </div>\r\n  <!-- Back -->\r\n  <div class=\"cmat-card-back overflow-y-auto scrollbar-custom\">\r\n    <ng-content select=\"[cmatCardBack]\"></ng-content>\r\n  </div>\r\n}\r\n\r\n<!-- Normal card -->\r\n@if (!flippable) {\r\n  <!-- Content -->\r\n  <ng-content></ng-content>\r\n  <!-- Expansion -->\r\n  @if (expanded) {\r\n    <div class=\"cmat-card-expansion\" [@expandCollapse]>\r\n      <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n    </div>\r\n  }\r\n}", styles: ["cmat-card{position:relative;display:flex;overflow:hidden;border-radius:1rem}cmat-card.cmat-card-flippable{border-width:0!important;border-radius:1rem;overflow:visible;transform-style:preserve-3d;transition:transform 1s;perspective:600px;background:transparent!important}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-front{visibility:hidden;opacity:0;transform:rotateY(180deg)}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-back{visibility:visible;opacity:1;transform:rotateY(360deg)}cmat-card.cmat-card-flippable .cmat-card-front,cmat-card.cmat-card-flippable .cmat-card-back{display:flex;flex-direction:column;flex:1 1 auto;z-index:10;transition:transform .5s ease-out 0s,visibility 0s ease-in .2s,opacity 0s ease-in .2s;backface-visibility:hidden;border-radius:1rem}cmat-card.cmat-card-flippable .cmat-card-front{position:relative;opacity:1;visibility:visible;transform:rotateY(0);overflow:hidden}cmat-card.cmat-card-flippable .cmat-card-back{position:absolute;inset:0;opacity:0;visibility:hidden;transform:rotateY(180deg)}\n"], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: cmatAnimations, exportAs: 'cmatCard', imports: [], template: "<!-- Flippable card -->\r\n@if (flippable) {\r\n  <!-- Front -->\r\n  <div class=\"cmat-card-front\">\r\n    <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n  </div>\r\n  <!-- Back -->\r\n  <div class=\"cmat-card-back overflow-y-auto scrollbar-custom\">\r\n    <ng-content select=\"[cmatCardBack]\"></ng-content>\r\n  </div>\r\n}\r\n\r\n<!-- Normal card -->\r\n@if (!flippable) {\r\n  <!-- Content -->\r\n  <ng-content></ng-content>\r\n  <!-- Expansion -->\r\n  @if (expanded) {\r\n    <div class=\"cmat-card-expansion\" [@expandCollapse]>\r\n      <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n    </div>\r\n  }\r\n}", styles: ["cmat-card{position:relative;display:flex;overflow:hidden;border-radius:1rem}cmat-card.cmat-card-flippable{border-width:0!important;border-radius:1rem;overflow:visible;transform-style:preserve-3d;transition:transform 1s;perspective:600px;background:transparent!important}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-front{visibility:hidden;opacity:0;transform:rotateY(180deg)}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-back{visibility:visible;opacity:1;transform:rotateY(360deg)}cmat-card.cmat-card-flippable .cmat-card-front,cmat-card.cmat-card-flippable .cmat-card-back{display:flex;flex-direction:column;flex:1 1 auto;z-index:10;transition:transform .5s ease-out 0s,visibility 0s ease-in .2s,opacity 0s ease-in .2s;backface-visibility:hidden;border-radius:1rem}cmat-card.cmat-card-flippable .cmat-card-front{position:relative;opacity:1;visibility:visible;transform:rotateY(0);overflow:hidden}cmat-card.cmat-card-flippable .cmat-card-back{position:absolute;inset:0;opacity:0;visibility:hidden;transform:rotateY(180deg)}\n"] }]
         }], propDecorators: { expanded: [{

package/fesm2022/cmat-components-carousel.mjs

@@ -1,19 +1,19 @@
-import * as i1 from '@angular/common';
-import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import * as i3 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, Directive, EventEmitter, PLATFORM_ID, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Inject, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
-import * as i3 from '@angular/material/button';
+import { Component, Input, Directive, EventEmitter, DOCUMENT, PLATFORM_ID, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Inject, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/icon';
+import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { CmatArrowCursorDirective } from 'cmat/directives/arrow-cursor';
 
 /* eslint-disable @typescript-eslint/member-ordering */
 class CmatCarouselHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: CmatCarouselHeaderComponent, isStandalone: true, selector: "cmat-carousel-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: CmatCarouselHeaderComponent, isStandalone: true, selector: "cmat-carousel-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-carousel-header',
@@ -21,10 +21,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 }]
         }] });
 class CmatCarouselFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: CmatCarouselFooterComponent, isStandalone: true, selector: "cmat-carousel-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: CmatCarouselFooterComponent, isStandalone: true, selector: "cmat-carousel-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-carousel-footer',
@@ -38,10 +38,10 @@ class CmatCarouselTemplateDirective {
     getType() {
         return this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatCarouselTemplate]'
@@ -412,11 +412,9 @@ class CmatCarouselComponent {
     }
     _bindDocumentListeners() {
         if (isPlatformBrowser(this._platformId)) {
-            if (!this.documentResizeListener) {
-                this.documentResizeListener = this.renderer.listen(this.window, 'resize', () => {
-                    this._calculatePosition();
-                });
-            }
+            this.documentResizeListener ??= this.renderer.listen(this.window, 'resize', () => {
+                this._calculatePosition();
+            });
         }
     }
     _unbindDocumentListeners() {
@@ -628,12 +626,12 @@ class CmatCarouselComponent {
             this.clonedItemsForFinishing.push(...this.data.slice(0, this._numVisible));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: CmatCarouselComponent, isStandalone: true, selector: "cmat-carousel", inputs: { page: "page", numVisible: "numVisible", numScroll: "numScroll", responsiveOptions: "responsiveOptions", orientation: "orientation", navigatorsType: "navigatorsType", verticalViewPortHeight: "verticalViewPortHeight", arrowSelector: "arrowSelector", contentClass: "contentClass", indicatorsContentClass: "indicatorsContentClass", indicatorsContentStyle: "indicatorsContentStyle", indicatorStyleClass: "indicatorStyleClass", indicatorStyle: "indicatorStyle", data: "data", circular: ["circular", "circular", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showNavigators: ["showNavigators", "showNavigators", booleanAttribute], autoplayInterval: ["autoplayInterval", "autoplayInterval", numberAttribute], style: "style", styleClass: "styleClass" }, outputs: { pageEvent: "pageEvent" }, queries: [{ propertyName: "headerFacet", first: true, predicate: CmatCarouselHeaderComponent, descendants: true }, { propertyName: "footerFacet", first: true, predicate: CmatCarouselFooterComponent, descendants: true }, { propertyName: "templates", predicate: CmatCarouselTemplateDirective }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div role=\"region\" [attr.id]=\"id\"\r\n    [ngClass]=\"{ 'cmat-carousel': true, 'cmat-carousel-vertical': isVertical(), 'cmat-carousel-horizontal': !isVertical() }\"\r\n    [ngStyle]=\"style\" [class]=\"styleClass\">\r\n\r\n    @if(headerFacet || headerTemplate){\r\n    <div class=\"cmat-carousel-header\">\r\n        <ng-content select=\"cmat-carousel-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n    <div [class]=\"contentClass\" [ngClass]=\"'items-center cmat-carousel-content'\">\r\n        <div class=\"cmat-carousel-container\" cmatArrowCursor [orientation]=\"orientation\" [selector]=\"arrowSelector\"\r\n            [enabled]=\"navigatorsType==='arrow'\" [attr.aria-live]=\"allowAutoplay ? 'polite' : 'off'\"\r\n            (clickEvent)=\"arrowCursorClick($event)\">\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-prev': true }\"\r\n                [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\r\n                @if(!previousIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-left'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-up'\"></mat-icon>\r\n                }\r\n                }\r\n                @else {\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n            <div class=\"cmat-carousel-items-content\"\r\n                [ngStyle]=\"{ height: isVertical() ? verticalViewPortHeight : 'auto' }\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\" (transitionend)=\"onTransitionEnd()\">\r\n                    @for (item of clonedItemsForStarting; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === data.length,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForStarting?.length??0 - 1 === $index\r\n                        }\" [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of data; track $index) {\r\n                    <div [ngClass]=\"{ 'cmat-carousel-item': true, 'cmat-carousel-item-active': firstIndex() <= $index && lastIndex() >= $index, 'cmat-carousel-item-start': firstIndex() === $index, 'cmat-carousel-item-end': lastIndex() === $index }\"\r\n                        [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of clonedItemsForFinishing; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === numVisible,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForFinishing?.length??0 - 1 === $index\r\n                        }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n            </div>\r\n\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-next': true}\"\r\n                [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\r\n                @if(!nextIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-down'\"></mat-icon>\r\n                }\r\n                }\r\n                @else{\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n        </div>\r\n        @if(showIndicators){\r\n        <ul #indicatorContent role=\"presentation\" [ngClass]=\"'cmat-carousel-indicators'\"\r\n            [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" (keydown)=\"onIndicatorKeydown($event)\">\r\n            @for (totalDot of totalDotsArray(); track $index) {\r\n            <li [ngClass]=\"{ 'cmat-carousel-indicator': true, 'cmat-carousel-indicator-active': page === $index }\"\r\n                [attr.data-pc-section]=\"'indicator'\">\r\n                <button type=\"button\" [ngClass]=\"'cmat-carousel-indicator-button'\" [class]=\"indicatorStyleClass\"\r\n                    [ngStyle]=\"indicatorStyle\" [attr.aria-current]=\"page === $index ? 'page' : undefined\"\r\n                    [tabindex]=\"page === $index ? 0 : -1\" (click)=\"onDotClick($event, $index)\">\r\n                </button>\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n\r\n    </div>\r\n    @if(footerFacet || footerTemplate){\r\n    <div class=\"cmat-carousel-footer\">\r\n        <ng-content select=\"cmat-carousel-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-carousel{display:flex;flex-direction:column}cmat-carousel .cmat-carousel-content{display:flex;flex-direction:column;overflow:hidden}cmat-carousel .cmat-carousel-prev,cmat-carousel .cmat-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:.25rem}cmat-carousel .cmat-carousel-container{display:flex;flex-direction:row;width:100%}cmat-carousel .cmat-carousel-items-content{overflow:hidden;width:100%}cmat-carousel .cmat-carousel-items-container{display:flex;flex-direction:row}cmat-carousel .cmat-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:1rem;gap:.5rem;margin:0;list-style:none}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator-active{background:var(--cmat-text-default)!important;opacity:1!important}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator{border:0 none;border-radius:6px;background:var(--cmat-text-disabled);transition:background .2s,color .2s,outline-color .2s,box-shadow .2s;opacity:.3}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator .cmat-carousel-indicator-button{display:flex;align-items:center;justify-content:center;width:2rem;height:.5rem;outline-color:transparent;padding:0;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer}cmat-carousel .cmat-carousel-vertical .cmat-carousel-container{flex-direction:column;width:auto}cmat-carousel .cmat-carousel-vertical .cmat-carousel-items-container{flex-direction:column;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: CmatArrowCursorDirective, selector: "[cmatArrowCursor]", inputs: ["animationDuration", "orientation", "enabled", "selector"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: CmatCarouselComponent, isStandalone: true, selector: "cmat-carousel", inputs: { page: "page", numVisible: "numVisible", numScroll: "numScroll", responsiveOptions: "responsiveOptions", orientation: "orientation", navigatorsType: "navigatorsType", verticalViewPortHeight: "verticalViewPortHeight", arrowSelector: "arrowSelector", contentClass: "contentClass", indicatorsContentClass: "indicatorsContentClass", indicatorsContentStyle: "indicatorsContentStyle", indicatorStyleClass: "indicatorStyleClass", indicatorStyle: "indicatorStyle", data: "data", circular: ["circular", "circular", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showNavigators: ["showNavigators", "showNavigators", booleanAttribute], autoplayInterval: ["autoplayInterval", "autoplayInterval", numberAttribute], style: "style", styleClass: "styleClass" }, outputs: { pageEvent: "pageEvent" }, queries: [{ propertyName: "headerFacet", first: true, predicate: CmatCarouselHeaderComponent, descendants: true }, { propertyName: "footerFacet", first: true, predicate: CmatCarouselFooterComponent, descendants: true }, { propertyName: "templates", predicate: CmatCarouselTemplateDirective }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div role=\"region\" [attr.id]=\"id\"\r\n    [ngClass]=\"{ 'cmat-carousel': true, 'cmat-carousel-vertical': isVertical(), 'cmat-carousel-horizontal': !isVertical() }\"\r\n    [ngStyle]=\"style\" [class]=\"styleClass\">\r\n\r\n    @if(headerFacet || headerTemplate){\r\n    <div class=\"cmat-carousel-header\">\r\n        <ng-content select=\"cmat-carousel-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n    <div [class]=\"contentClass\" [ngClass]=\"'items-center cmat-carousel-content'\">\r\n        <div class=\"cmat-carousel-container\" cmatArrowCursor [orientation]=\"orientation\" [selector]=\"arrowSelector\"\r\n            [enabled]=\"navigatorsType==='arrow'\" [attr.aria-live]=\"allowAutoplay ? 'polite' : 'off'\"\r\n            (clickEvent)=\"arrowCursorClick($event)\">\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-prev': true }\"\r\n                [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\r\n                @if(!previousIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-left'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-up'\"></mat-icon>\r\n                }\r\n                }\r\n                @else {\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n            <div class=\"cmat-carousel-items-content\"\r\n                [ngStyle]=\"{ height: isVertical() ? verticalViewPortHeight : 'auto' }\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\" (transitionend)=\"onTransitionEnd()\">\r\n                    @for (item of clonedItemsForStarting; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === data.length,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForStarting?.length??0 - 1 === $index\r\n                        }\" [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of data; track $index) {\r\n                    <div [ngClass]=\"{ 'cmat-carousel-item': true, 'cmat-carousel-item-active': firstIndex() <= $index && lastIndex() >= $index, 'cmat-carousel-item-start': firstIndex() === $index, 'cmat-carousel-item-end': lastIndex() === $index }\"\r\n                        [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of clonedItemsForFinishing; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === numVisible,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForFinishing?.length??0 - 1 === $index\r\n                        }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n            </div>\r\n\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-next': true}\"\r\n                [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\r\n                @if(!nextIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-down'\"></mat-icon>\r\n                }\r\n                }\r\n                @else{\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n        </div>\r\n        @if(showIndicators){\r\n        <ul #indicatorContent role=\"presentation\" [ngClass]=\"'cmat-carousel-indicators'\"\r\n            [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" (keydown)=\"onIndicatorKeydown($event)\">\r\n            @for (totalDot of totalDotsArray(); track $index) {\r\n            <li [ngClass]=\"{ 'cmat-carousel-indicator': true, 'cmat-carousel-indicator-active': page === $index }\"\r\n                [attr.data-pc-section]=\"'indicator'\">\r\n                <button type=\"button\" [ngClass]=\"'cmat-carousel-indicator-button'\" [class]=\"indicatorStyleClass\"\r\n                    [ngStyle]=\"indicatorStyle\" [attr.aria-current]=\"page === $index ? 'page' : undefined\"\r\n                    [tabindex]=\"page === $index ? 0 : -1\" (click)=\"onDotClick($event, $index)\">\r\n                </button>\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n\r\n    </div>\r\n    @if(footerFacet || footerTemplate){\r\n    <div class=\"cmat-carousel-footer\">\r\n        <ng-content select=\"cmat-carousel-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-carousel{display:flex;flex-direction:column}cmat-carousel .cmat-carousel-content{display:flex;flex-direction:column;overflow:hidden}cmat-carousel .cmat-carousel-prev,cmat-carousel .cmat-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:.25rem}cmat-carousel .cmat-carousel-container{display:flex;flex-direction:row;width:100%}cmat-carousel .cmat-carousel-items-content{overflow:hidden;width:100%}cmat-carousel .cmat-carousel-items-container{display:flex;flex-direction:row}cmat-carousel .cmat-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:1rem;gap:.5rem;margin:0;list-style:none}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator-active{background:var(--cmat-text-default)!important;opacity:1!important}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator{border:0 none;border-radius:6px;background:var(--cmat-text-disabled);transition:background .2s,color .2s,outline-color .2s,box-shadow .2s;opacity:.3}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator .cmat-carousel-indicator-button{display:flex;align-items:center;justify-content:center;width:2rem;height:.5rem;outline-color:transparent;padding:0;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer}cmat-carousel .cmat-carousel-vertical .cmat-carousel-container{flex-direction:column;width:auto}cmat-carousel .cmat-carousel-vertical .cmat-carousel-items-container{flex-direction:column;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CmatArrowCursorDirective, selector: "[cmatArrowCursor]", inputs: ["animationDuration", "orientation", "enabled", "selector"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CmatCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, MatIconModule, MatButtonModule, CmatArrowCursorDirective], template: "<div role=\"region\" [attr.id]=\"id\"\r\n    [ngClass]=\"{ 'cmat-carousel': true, 'cmat-carousel-vertical': isVertical(), 'cmat-carousel-horizontal': !isVertical() }\"\r\n    [ngStyle]=\"style\" [class]=\"styleClass\">\r\n\r\n    @if(headerFacet || headerTemplate){\r\n    <div class=\"cmat-carousel-header\">\r\n        <ng-content select=\"cmat-carousel-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n    <div [class]=\"contentClass\" [ngClass]=\"'items-center cmat-carousel-content'\">\r\n        <div class=\"cmat-carousel-container\" cmatArrowCursor [orientation]=\"orientation\" [selector]=\"arrowSelector\"\r\n            [enabled]=\"navigatorsType==='arrow'\" [attr.aria-live]=\"allowAutoplay ? 'polite' : 'off'\"\r\n            (clickEvent)=\"arrowCursorClick($event)\">\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-prev': true }\"\r\n                [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\r\n                @if(!previousIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-left'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-up'\"></mat-icon>\r\n                }\r\n                }\r\n                @else {\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n            <div class=\"cmat-carousel-items-content\"\r\n                [ngStyle]=\"{ height: isVertical() ? verticalViewPortHeight : 'auto' }\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\" (transitionend)=\"onTransitionEnd()\">\r\n                    @for (item of clonedItemsForStarting; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === data.length,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForStarting?.length??0 - 1 === $index\r\n                        }\" [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of data; track $index) {\r\n                    <div [ngClass]=\"{ 'cmat-carousel-item': true, 'cmat-carousel-item-active': firstIndex() <= $index && lastIndex() >= $index, 'cmat-carousel-item-start': firstIndex() === $index, 'cmat-carousel-item-end': lastIndex() === $index }\"\r\n                        [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of clonedItemsForFinishing; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === numVisible,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForFinishing?.length??0 - 1 === $index\r\n                        }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n            </div>\r\n\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-next': true}\"\r\n                [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\r\n                @if(!nextIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-down'\"></mat-icon>\r\n                }\r\n                }\r\n                @else{\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n        </div>\r\n        @if(showIndicators){\r\n        <ul #indicatorContent role=\"presentation\" [ngClass]=\"'cmat-carousel-indicators'\"\r\n            [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" (keydown)=\"onIndicatorKeydown($event)\">\r\n            @for (totalDot of totalDotsArray(); track $index) {\r\n            <li [ngClass]=\"{ 'cmat-carousel-indicator': true, 'cmat-carousel-indicator-active': page === $index }\"\r\n                [attr.data-pc-section]=\"'indicator'\">\r\n                <button type=\"button\" [ngClass]=\"'cmat-carousel-indicator-button'\" [class]=\"indicatorStyleClass\"\r\n                    [ngStyle]=\"indicatorStyle\" [attr.aria-current]=\"page === $index ? 'page' : undefined\"\r\n                    [tabindex]=\"page === $index ? 0 : -1\" (click)=\"onDotClick($event, $index)\">\r\n                </button>\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n\r\n    </div>\r\n    @if(footerFacet || footerTemplate){\r\n    <div class=\"cmat-carousel-footer\">\r\n        <ng-content select=\"cmat-carousel-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-carousel{display:flex;flex-direction:column}cmat-carousel .cmat-carousel-content{display:flex;flex-direction:column;overflow:hidden}cmat-carousel .cmat-carousel-prev,cmat-carousel .cmat-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:.25rem}cmat-carousel .cmat-carousel-container{display:flex;flex-direction:row;width:100%}cmat-carousel .cmat-carousel-items-content{overflow:hidden;width:100%}cmat-carousel .cmat-carousel-items-container{display:flex;flex-direction:row}cmat-carousel .cmat-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:1rem;gap:.5rem;margin:0;list-style:none}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator-active{background:var(--cmat-text-default)!important;opacity:1!important}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator{border:0 none;border-radius:6px;background:var(--cmat-text-disabled);transition:background .2s,color .2s,outline-color .2s,box-shadow .2s;opacity:.3}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator .cmat-carousel-indicator-button{display:flex;align-items:center;justify-content:center;width:2rem;height:.5rem;outline-color:transparent;padding:0;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer}cmat-carousel .cmat-carousel-vertical .cmat-carousel-container{flex-direction:column;width:auto}cmat-carousel .cmat-carousel-vertical .cmat-carousel-items-container{flex-direction:column;height:100%}\n"] }]
+            args: [{ selector: 'cmat-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatIconModule, MatButtonModule, CmatArrowCursorDirective, CommonModule], template: "<div role=\"region\" [attr.id]=\"id\"\r\n    [ngClass]=\"{ 'cmat-carousel': true, 'cmat-carousel-vertical': isVertical(), 'cmat-carousel-horizontal': !isVertical() }\"\r\n    [ngStyle]=\"style\" [class]=\"styleClass\">\r\n\r\n    @if(headerFacet || headerTemplate){\r\n    <div class=\"cmat-carousel-header\">\r\n        <ng-content select=\"cmat-carousel-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n    <div [class]=\"contentClass\" [ngClass]=\"'items-center cmat-carousel-content'\">\r\n        <div class=\"cmat-carousel-container\" cmatArrowCursor [orientation]=\"orientation\" [selector]=\"arrowSelector\"\r\n            [enabled]=\"navigatorsType==='arrow'\" [attr.aria-live]=\"allowAutoplay ? 'polite' : 'off'\"\r\n            (clickEvent)=\"arrowCursorClick($event)\">\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-prev': true }\"\r\n                [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\r\n                @if(!previousIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-left'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-up'\"></mat-icon>\r\n                }\r\n                }\r\n                @else {\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n            <div class=\"cmat-carousel-items-content\"\r\n                [ngStyle]=\"{ height: isVertical() ? verticalViewPortHeight : 'auto' }\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\" (transitionend)=\"onTransitionEnd()\">\r\n                    @for (item of clonedItemsForStarting; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === data.length,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForStarting?.length??0 - 1 === $index\r\n                        }\" [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of data; track $index) {\r\n                    <div [ngClass]=\"{ 'cmat-carousel-item': true, 'cmat-carousel-item-active': firstIndex() <= $index && lastIndex() >= $index, 'cmat-carousel-item-start': firstIndex() === $index, 'cmat-carousel-item-end': lastIndex() === $index }\"\r\n                        [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of clonedItemsForFinishing; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === numVisible,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForFinishing?.length??0 - 1 === $index\r\n                        }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n            </div>\r\n\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-next': true}\"\r\n                [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\r\n                @if(!nextIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-down'\"></mat-icon>\r\n                }\r\n                }\r\n                @else{\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n        </div>\r\n        @if(showIndicators){\r\n        <ul #indicatorContent role=\"presentation\" [ngClass]=\"'cmat-carousel-indicators'\"\r\n            [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" (keydown)=\"onIndicatorKeydown($event)\">\r\n            @for (totalDot of totalDotsArray(); track $index) {\r\n            <li [ngClass]=\"{ 'cmat-carousel-indicator': true, 'cmat-carousel-indicator-active': page === $index }\"\r\n                [attr.data-pc-section]=\"'indicator'\">\r\n                <button type=\"button\" [ngClass]=\"'cmat-carousel-indicator-button'\" [class]=\"indicatorStyleClass\"\r\n                    [ngStyle]=\"indicatorStyle\" [attr.aria-current]=\"page === $index ? 'page' : undefined\"\r\n                    [tabindex]=\"page === $index ? 0 : -1\" (click)=\"onDotClick($event, $index)\">\r\n                </button>\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n\r\n    </div>\r\n    @if(footerFacet || footerTemplate){\r\n    <div class=\"cmat-carousel-footer\">\r\n        <ng-content select=\"cmat-carousel-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-carousel{display:flex;flex-direction:column}cmat-carousel .cmat-carousel-content{display:flex;flex-direction:column;overflow:hidden}cmat-carousel .cmat-carousel-prev,cmat-carousel .cmat-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:.25rem}cmat-carousel .cmat-carousel-container{display:flex;flex-direction:row;width:100%}cmat-carousel .cmat-carousel-items-content{overflow:hidden;width:100%}cmat-carousel .cmat-carousel-items-container{display:flex;flex-direction:row}cmat-carousel .cmat-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:1rem;gap:.5rem;margin:0;list-style:none}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator-active{background:var(--cmat-text-default)!important;opacity:1!important}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator{border:0 none;border-radius:6px;background:var(--cmat-text-disabled);transition:background .2s,color .2s,outline-color .2s,box-shadow .2s;opacity:.3}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator .cmat-carousel-indicator-button{display:flex;align-items:center;justify-content:center;width:2rem;height:.5rem;outline-color:transparent;padding:0;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer}cmat-carousel .cmat-carousel-vertical .cmat-carousel-container{flex-direction:column;width:auto}cmat-carousel .cmat-carousel-vertical .cmat-carousel-items-container{flex-direction:column;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]