cmat 0.0.28 → 0.0.30

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 { 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, inject, TemplateRef, Input, Directive, ElementRef, NgZone, ChangeDetectorRef, 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 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.2", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", 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.2", 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.2", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", 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.2", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-carousel-footer',
@@ -32,21 +32,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 }]
         }] });
 class CmatCarouselTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject(TemplateRef);
     }
     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.2", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", 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.2", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatCarouselTemplate]'
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { type: [{
+        }], propDecorators: { type: [{
                 type: Input
             }], name: [{
                 type: Input,
@@ -89,13 +89,12 @@ class CmatCarouselComponent {
     set data(val) {
         this._data = val;
     }
-    constructor(el, zone, cd, renderer, _document, _platformId) {
-        this.el = el;
-        this.zone = zone;
-        this.cd = cd;
-        this.renderer = renderer;
-        this._document = _document;
-        this._platformId = _platformId;
+    constructor() {
+        this.el = inject(ElementRef);
+        this.zone = inject(NgZone);
+        this.cd = inject(ChangeDetectorRef);
+        this.renderer = inject(Renderer2);
+        this._document = inject(DOCUMENT);
         this.orientation = 'horizontal';
         this.navigatorsType = 'normal';
         this.verticalViewPortHeight = '300px';
@@ -127,51 +126,49 @@ class CmatCarouselComponent {
         this.window = this._document.defaultView;
     }
     ngOnChanges(simpleChange) {
-        if (isPlatformBrowser(this._platformId)) {
-            if (simpleChange.data) {
-                if (this.circular && this._data) {
+        if (simpleChange.data) {
+            if (this.circular && this._data) {
+                this._setCloneItems();
+            }
+        }
+        if (this.isCreated) {
+            if (simpleChange.circular) {
+                if (this.isCircular()) {
                     this._setCloneItems();
                 }
             }
-            if (this.isCreated) {
-                if (simpleChange.numVisible) {
-                    if (this.responsiveOptions) {
-                        this.defaultNumVisible = this.numVisible;
-                    }
-                    if (this.isCircular()) {
-                        this._setCloneItems();
-                    }
-                    this._createStyle();
-                    this._calculatePosition();
-                }
-                if (simpleChange.numScroll) {
-                    if (this.responsiveOptions) {
-                        this.defaultNumScroll = this.numScroll;
-                    }
+            if (simpleChange.numVisible) {
+                if (this.responsiveOptions) {
+                    this.defaultNumVisible = this.numVisible;
                 }
-                if (simpleChange.autoplayInterval) {
-                    this.allowAutoplay = !!this.autoplayInterval;
+                this._createStyle();
+                this._calculatePosition();
+            }
+            if (simpleChange.numScroll) {
+                if (this.responsiveOptions) {
+                    this.defaultNumScroll = this.numScroll;
                 }
             }
+            if (simpleChange.autoplayInterval) {
+                this.allowAutoplay = !!this.autoplayInterval;
+            }
         }
         this.cd.markForCheck();
     }
     ngAfterContentInit() {
         this.id = `cmat-carousel-${NEXT_ID++}`;
-        if (isPlatformBrowser(this._platformId)) {
-            this.allowAutoplay = !!this.autoplayInterval;
-            if (this.circular) {
-                this._setCloneItems();
-            }
-            if (this.responsiveOptions) {
-                this.defaultNumScroll = this._numScroll;
-                this.defaultNumVisible = this._numVisible;
-            }
-            this._createStyle();
-            this._calculatePosition();
-            if (this.responsiveOptions) {
-                this._bindDocumentListeners();
-            }
+        this.allowAutoplay = !!this.autoplayInterval;
+        if (this.circular) {
+            this._setCloneItems();
+        }
+        if (this.responsiveOptions) {
+            this.defaultNumScroll = this._numScroll;
+            this.defaultNumVisible = this._numVisible;
+        }
+        this._createStyle();
+        this._calculatePosition();
+        if (this.responsiveOptions) {
+            this._bindDocumentListeners();
         }
         this.templates?.forEach((item) => {
             switch (item.getType()) {
@@ -198,62 +195,60 @@ class CmatCarouselComponent {
         this.cd.detectChanges();
     }
     ngAfterContentChecked() {
-        if (isPlatformBrowser(this._platformId)) {
-            const isCircular = this.isCircular();
-            let totalShiftedItems = this.totalShiftedItems;
-            if (this.data && this.itemsContainer && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.data.length)) {
-                if (this.autoplayInterval) {
-                    this._stopAutoplay(false);
-                }
-                this.remainingItems = (this.data.length - this._numVisible) % this._numScroll;
-                let page = this._page;
-                if (this.totalDots() !== 0 && page >= this.totalDots()) {
-                    page = this.totalDots() - 1;
-                    this._page = page;
-                    this.pageEvent.emit({
-                        page: this.page
-                    });
-                }
-                totalShiftedItems = page * this._numScroll * -1;
-                if (isCircular) {
-                    totalShiftedItems -= this._numVisible;
-                }
-                if (page === this.totalDots() - 1 && this.remainingItems > 0) {
-                    totalShiftedItems += -1 * this.remainingItems + this._numScroll;
-                    this.isRemainingItemsAdded = true;
-                }
-                else {
-                    this.isRemainingItemsAdded = false;
-                }
-                if (totalShiftedItems !== this.totalShiftedItems) {
-                    this.totalShiftedItems = totalShiftedItems;
-                }
-                this._oldNumScroll = this._numScroll;
-                this.prevState.numScroll = this._numScroll;
-                this.prevState.numVisible = this._numVisible;
-                this.prevState.value = [...(this._data)];
-                if (this.totalDots() > 0 && this.itemsContainer.nativeElement) {
-                    this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
-                }
-                this.isCreated = true;
-                if (this.autoplayInterval && this.isAutoplay()) {
-                    this._startAutoplay();
-                }
+        const isCircular = this.isCircular();
+        let totalShiftedItems = this.totalShiftedItems;
+        if (this.data && this.itemsContainer && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.data.length)) {
+            if (this.autoplayInterval) {
+                this._stopAutoplay(false);
+            }
+            this.remainingItems = (this.data.length - this._numVisible) % this._numScroll;
+            let page = this._page;
+            if (this.totalDots() !== 0 && page >= this.totalDots()) {
+                page = this.totalDots() - 1;
+                this._page = page;
+                this.pageEvent.emit({
+                    page: this.page
+                });
             }
+            totalShiftedItems = page * this._numScroll * -1;
             if (isCircular) {
-                if (this.page === 0) {
-                    totalShiftedItems = -1 * this._numVisible;
-                }
-                else if (totalShiftedItems === 0) {
-                    totalShiftedItems = -1 * this.data.length;
-                    if (this.remainingItems > 0) {
-                        this.isRemainingItemsAdded = true;
-                    }
-                }
-                if (totalShiftedItems !== this.totalShiftedItems) {
-                    this.totalShiftedItems = totalShiftedItems;
+                totalShiftedItems -= this._numVisible;
+            }
+            if (page === this.totalDots() - 1 && this.remainingItems > 0) {
+                totalShiftedItems += -1 * this.remainingItems + this._numScroll;
+                this.isRemainingItemsAdded = true;
+            }
+            else {
+                this.isRemainingItemsAdded = false;
+            }
+            if (totalShiftedItems !== this.totalShiftedItems) {
+                this.totalShiftedItems = totalShiftedItems;
+            }
+            this._oldNumScroll = this._numScroll;
+            this.prevState.numScroll = this._numScroll;
+            this.prevState.numVisible = this._numVisible;
+            this.prevState.value = [...(this._data)];
+            if (this.totalDots() > 0 && this.itemsContainer.nativeElement) {
+                this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
+            }
+            this.isCreated = true;
+            if (this.autoplayInterval && this.isAutoplay()) {
+                this._startAutoplay();
+            }
+        }
+        if (isCircular) {
+            if (this.page === 0) {
+                totalShiftedItems = -1 * this._numVisible;
+            }
+            else if (totalShiftedItems === 0) {
+                totalShiftedItems = -1 * this.data.length;
+                if (this.remainingItems > 0) {
+                    this.isRemainingItemsAdded = true;
                 }
             }
+            if (totalShiftedItems !== this.totalShiftedItems) {
+                this.totalShiftedItems = totalShiftedItems;
+            }
         }
     }
     ngOnDestroy() {
@@ -411,20 +406,14 @@ 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() {
-        if (isPlatformBrowser(this._platformId)) {
-            if (this.documentResizeListener) {
-                this.documentResizeListener();
-                this.documentResizeListener = null;
-            }
+        if (this.documentResizeListener) {
+            this.documentResizeListener();
+            this.documentResizeListener = null;
         }
     }
     _onRightKey() {
@@ -628,19 +617,13 @@ 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.2", ngImport: i0, type: CmatCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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.2", 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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }], propDecorators: { page: [{
+            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: () => [], propDecorators: { page: [{
                 type: Input
             }], numVisible: [{
                 type: Input