cmat 0.0.79 → 0.0.81

package/fesm2022/cmat-components-adapter.mjs

@@ -232,10 +232,10 @@ class CNativeDatetimeAdapter extends DatetimeAdapter {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CNativeDatetimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CNativeDatetimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CNativeDatetimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CNativeDatetimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CNativeDatetimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CNativeDatetimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -334,10 +334,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: "21.2.8", ngImport: i0, type: DayjsDatetimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DayjsDatetimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DayjsDatetimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DayjsDatetimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DayjsDatetimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DayjsDatetimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -519,10 +519,10 @@ class DayjsDateAdapter extends DateAdapter {
         dayjs.extend(localeData);
         this.setLocale(dateLocale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DayjsDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DayjsDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DayjsDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DayjsDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DayjsDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DayjsDateAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 

package/fesm2022/cmat-components-breadcrumb.mjs

@@ -6,10 +6,10 @@ import { ActivatedRoute, Router, GuardsCheckEnd, RouterLink } from '@angular/rou
 import { filter } from 'rxjs/operators';
 
 class CmatBreadcrumbItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatBreadcrumbItem]'
@@ -270,10 +270,10 @@ class CmatBreadcrumbService {
     _publishCurrentBreadcrumbs() {
         this._breadcrumbs.set(this._currentBreadcrumbs.filter(item => !item.skip));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -311,10 +311,10 @@ class CmatBreadcrumbComponent {
     get separator() {
         return this._separator;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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(); track\r\n      breadcrumb.routeLink ?? $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=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst, index: index, count: count }\"></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=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst, index: index, count: count }\"></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>\r\n", 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: "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: "21.2.9", ngImport: i0, type: CmatBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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(); track\r\n      breadcrumb.routeLink ?? $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=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst, index: index, count: count }\"></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=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst, index: index, count: count }\"></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>\r\n", 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: "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: "21.2.8", ngImport: i0, type: CmatBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-breadcrumb', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatBreadcrumb', imports: [NgClass, 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(); track\r\n      breadcrumb.routeLink ?? $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=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst, index: index, count: count }\"></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=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst, index: index, count: count }\"></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>\r\n", 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"] }]
         }], propDecorators: { itemTemplate: [{

package/fesm2022/cmat-components-card.mjs

@@ -26,10 +26,10 @@ class CmatCardComponent {
             this.flippable = coerceBooleanProperty(changes['flippable'].currentValue);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "\r\n@if (flippable) {\r\n\r\n<div class=\"cmat-card-front\">\r\n  <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n</div>\r\n\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\r\n@if (!flippable) {\r\n\r\n<ng-content></ng-content>\r\n\r\n@if (expanded) {\r\n<div class=\"cmat-card-expansion expand-collapse-animation\" animate.leave=\"expand-collapse-animation-leaving\">\r\n  <div>\r\n    <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n  </div>\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", ".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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: "\r\n@if (flippable) {\r\n\r\n<div class=\"cmat-card-front\">\r\n  <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n</div>\r\n\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\r\n@if (!flippable) {\r\n\r\n<ng-content></ng-content>\r\n\r\n@if (expanded) {\r\n<div class=\"cmat-card-expansion expand-collapse-animation\" animate.leave=\"expand-collapse-animation-leaving\">\r\n  <div>\r\n    <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n  </div>\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", ".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCard', imports: [], template: "\r\n@if (flippable) {\r\n\r\n<div class=\"cmat-card-front\">\r\n  <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n</div>\r\n\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\r\n@if (!flippable) {\r\n\r\n<ng-content></ng-content>\r\n\r\n@if (expanded) {\r\n<div class=\"cmat-card-expansion expand-collapse-animation\" animate.leave=\"expand-collapse-animation-leaving\">\r\n  <div>\r\n    <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n  </div>\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", ".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"] }]
         }], propDecorators: { expanded: [{

package/fesm2022/cmat-components-carousel.mjs

@@ -1,7 +1,7 @@
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, inject, TemplateRef, Input, Directive, ElementRef, NgZone, ChangeDetectorRef, Renderer2, DOCUMENT, EventEmitter, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { Component, inject, TemplateRef, Input, Directive, ElementRef, NgZone, signal, Renderer2, DOCUMENT, EventEmitter, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/material/icon';
@@ -10,10 +10,10 @@ 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: "21.2.8", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.2.9", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CmatCarouselHeaderComponent, isStandalone: true, selector: "cmat-carousel-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-carousel-header',
@@ -21,10 +21,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }]
         }] });
 class CmatCarouselFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.2.9", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CmatCarouselFooterComponent, isStandalone: true, selector: "cmat-carousel-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: "21.2.8", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatCarouselTemplate]'
@@ -92,7 +92,7 @@ class CmatCarouselComponent {
     constructor() {
         this.el = inject(ElementRef);
         this.zone = inject(NgZone);
-        this.cd = inject(ChangeDetectorRef);
+        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
         this.renderer = inject(Renderer2);
         this._document = inject(DOCUMENT);
         this.orientation = 'horizontal';
@@ -116,8 +116,16 @@ class CmatCarouselComponent {
         };
         this.defaultNumScroll = 1;
         this.defaultNumVisible = 1;
+        this.carouselStyle = null;
         this.isRemainingItemsAdded = false;
+        this.animationTimeout = null;
+        this.translateTimeout = null;
         this.remainingItems = 0;
+        this.startPos = null;
+        this.documentResizeListener = null;
+        this.clonedItemsForStarting = [];
+        this.clonedItemsForFinishing = [];
+        this.interval = null;
         this.swipeThreshold = 20;
         this._numVisible = 1;
         this._numScroll = 1;
@@ -154,7 +162,7 @@ class CmatCarouselComponent {
                 this.allowAutoplay = !!this.autoplayInterval;
             }
         }
-        this.cd.markForCheck();
+        this.refreshVersion.update(value => value + 1);
     }
     ngAfterContentInit() {
         this.id = `cmat-carousel-${NEXT_ID++}`;
@@ -193,7 +201,7 @@ class CmatCarouselComponent {
                     break;
             }
         });
-        this.cd.detectChanges();
+        this.refreshVersion.update(value => value + 1);
     }
     ngAfterContentChecked() {
         const isCircular = this.isCircular();
@@ -256,8 +264,18 @@ class CmatCarouselComponent {
         if (this.responsiveOptions) {
             this._unbindDocumentListeners();
         }
-        if (this.autoplayInterval) {
-            this._stopAutoplay();
+        this._stopAutoplay();
+        if (this.animationTimeout !== null) {
+            clearTimeout(this.animationTimeout);
+            this.animationTimeout = null;
+        }
+        if (this.translateTimeout !== null) {
+            clearTimeout(this.translateTimeout);
+            this.translateTimeout = null;
+        }
+        if (this.carouselStyle?.parentNode) {
+            this.carouselStyle.parentNode.removeChild(this.carouselStyle);
+            this.carouselStyle = null;
         }
     }
     firstIndex() {
@@ -377,6 +395,9 @@ class CmatCarouselComponent {
     }
     onTouchEnd(e) {
         let touchobj = e.changedTouches[0];
+        if (!this.startPos) {
+            return;
+        }
         if (this.isVertical()) {
             this._changePageOnTouch(e, touchobj.pageY - this.startPos.y);
         }
@@ -489,11 +510,14 @@ class CmatCarouselComponent {
         this.pageEvent.emit({
             page: this.page
         });
-        this.cd.markForCheck();
+        this.refreshVersion.update(value => value + 1);
         this._updateCarouselItemsAccessibility();
     }
     _startAutoplay() {
-        this.interval = setInterval(() => {
+        if (this.interval !== null) {
+            return;
+        }
+        this.interval = window.setInterval(() => {
             if (this.totalDots() > 0) {
                 if (this.page === this.totalDots() - 1) {
                     this._step(-1, 0);
@@ -504,17 +528,17 @@ class CmatCarouselComponent {
             }
         }, this.autoplayInterval);
         this.allowAutoplay = true;
-        this.cd.markForCheck();
+        this.refreshVersion.update(value => value + 1);
     }
     _stopAutoplay(changeAllow = true) {
-        if (this.interval) {
+        if (this.interval !== null) {
             clearInterval(this.interval);
-            this.interval = undefined;
+            this.interval = null;
             if (changeAllow) {
                 this.allowAutoplay = false;
             }
         }
-        this.cd.markForCheck();
+        this.refreshVersion.update(value => value + 1);
     }
     _findFocusedIndicatorIndex() {
         const indicators = [...Array.from(this.indicatorContent?.nativeElement.querySelectorAll('[data-pc-section="indicator"]'))];
@@ -524,7 +548,6 @@ class CmatCarouselComponent {
     _createStyle() {
         if (!this.carouselStyle) {
             this.carouselStyle = this.renderer.createElement('style');
-            this.carouselStyle.type = 'text/css';
             this.renderer.appendChild(this._document.head, this.carouselStyle);
         }
         let innerHTML = `
@@ -559,7 +582,9 @@ class CmatCarouselComponent {
                 `;
             }
         }
-        this.carouselStyle.innerHTML = innerHTML;
+        if (this.carouselStyle) {
+            this.carouselStyle.innerHTML = innerHTML;
+        }
     }
     _calculatePosition() {
         if (this.responsiveOptions) {
@@ -567,8 +592,8 @@ class CmatCarouselComponent {
                 numVisible: this.defaultNumVisible,
                 numScroll: this.defaultNumScroll
             };
-            if (typeof window !== 'undefined') {
-                let windowWidth = window.innerWidth;
+            if (this.window) {
+                let windowWidth = this.window.innerWidth;
                 for (const res of this.responsiveOptions) {
                     if (parseInt(res.breakpoint, 10) >= windowWidth) {
                         matchedResponsiveData = res;
@@ -593,7 +618,7 @@ class CmatCarouselComponent {
                 this._numVisible = matchedResponsiveData.numVisible;
                 this._setCloneItems();
             }
-            this.cd.markForCheck();
+            this.refreshVersion.update(value => value + 1);
         }
     }
     _updateSlideAccessibility(slide, isActive) {
@@ -618,12 +643,12 @@ class CmatCarouselComponent {
             this.clonedItemsForFinishing = [...this.data.slice(0, this._numVisible)];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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], suspendAutoPlay: ["suspendAutoPlay", "suspendAutoPlay", 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\" matIconButton  [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\" matIconButton  [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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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], suspendAutoPlay: ["suspendAutoPlay", "suspendAutoPlay", 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\" [attr.data-refresh]=\"refreshVersion()\"\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\" matIconButton  [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\" matIconButton  [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>\r\n", 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: "21.2.8", ngImport: i0, type: CmatCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatCarouselComponent, decorators: [{
             type: Component,
-            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\" matIconButton  [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\" matIconButton  [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\" [attr.data-refresh]=\"refreshVersion()\"\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\" matIconButton  [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\" matIconButton  [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>\r\n", 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: () => [], propDecorators: { page: [{
                 type: Input
             }], numVisible: [{