cmat 0.0.86 → 0.0.88

package/fesm2022/cmat-components-carousel.mjs

@@ -1,409 +1,291 @@
 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, signal, Renderer2, DOCUMENT, EventEmitter, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { Component, inject, TemplateRef, input, Directive, ElementRef, model, numberAttribute, booleanAttribute, output, viewChild, contentChild, contentChildren, signal, computed, DOCUMENT, Renderer2, effect, untracked, 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';
 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: "21.2.10", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", 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: "22.0.2", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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: "21.2.10", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-carousel-header',
-                    template: '<ng-content></ng-content>'
+                    template: '<ng-content></ng-content>',
                 }]
         }] });
 class CmatCarouselFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", 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: "22.0.2", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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: "21.2.10", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-carousel-footer',
-                    template: '<ng-content></ng-content>'
+                    template: '<ng-content></ng-content>',
                 }]
         }] });
 class CmatCarouselTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
+        this.type = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
+        this.name = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
     }
-    getType() {
-        return this.name;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cmatCarouselTemplate]'
+                    selector: '[cmatCarouselTemplate]',
                 }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], name: [{
-                type: Input,
-                args: ['cmatCarouselTemplate']
-            }] } });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
 let NEXT_ID = 0;
 class CmatCarouselComponent {
-    get page() {
-        return this._page;
-    }
-    set page(val) {
-        if (this.isCreated && val !== this._page) {
-            if (this.autoplayInterval && this.suspendAutoPlay) {
-                this._stopAutoplay();
-            }
-            if (val > this._page && val <= this.totalDots() - 1) {
-                this._step(-1, val);
-            }
-            else if (val < this._page) {
-                this._step(1, val);
-            }
-        }
-        this._page = val ?? 0;
-    }
-    get numVisible() {
-        return this._numVisible;
-    }
-    set numVisible(val) {
-        this._numVisible = val;
-    }
-    get numScroll() {
-        return this._numScroll;
-    }
-    set numScroll(val) {
-        this._numScroll = val;
-    }
-    get data() {
-        return this._data;
-    }
-    set data(val) {
-        this._data = val;
-    }
     constructor() {
         this.el = inject(ElementRef);
-        this.zone = inject(NgZone);
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
-        this.renderer = inject(Renderer2);
-        this._document = inject(DOCUMENT);
-        this.orientation = 'horizontal';
-        this.navigatorsType = 'normal';
-        this.verticalViewPortHeight = '300px';
-        this.arrowSelector = '.carousel-arrow-cursor';
-        this.contentClass = '';
-        this.indicatorsContentClass = '';
-        this.indicatorStyleClass = '';
-        this.circular = false;
-        this.showIndicators = true;
-        this.showNavigators = true;
-        this.suspendAutoPlay = true;
-        this.autoplayInterval = 0;
-        this.styleClass = '';
-        this.pageEvent = new EventEmitter();
-        this.prevState = {
-            numScroll: 0,
-            numVisible: 0,
-            value: []
-        };
-        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;
-        this._oldNumScroll = 0;
-        this._page = 0;
-        this.totalShiftedItems = this.page * this.numScroll * -1;
-        this.window = this._document.defaultView;
-    }
-    ngOnChanges(simpleChange) {
-        if (simpleChange.data) {
-            if (this.circular && this._data) {
-                this._setCloneItems();
-            }
-        }
-        if (this.isCreated) {
-            if (simpleChange.circular) {
-                if (this.isCircular()) {
-                    this._setCloneItems();
-                }
-            }
-            if (simpleChange.numVisible) {
-                if (this.responsiveOptions) {
-                    this.defaultNumVisible = this.numVisible;
-                }
-                this._createStyle();
-                this._calculatePosition();
-            }
-            if (simpleChange.numScroll) {
-                if (this.responsiveOptions) {
-                    this.defaultNumScroll = this.numScroll;
+        this.page = model(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        this.numVisible = model(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numVisible" }] : /* istanbul ignore next */ []));
+        this.numScroll = model(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numScroll" }] : /* istanbul ignore next */ []));
+        this.autoplayInterval = input(0, { ...(ngDevMode ? { debugName: "autoplayInterval" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.responsiveOptions = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "responsiveOptions" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.navigatorsType = input('normal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigatorsType" }] : /* istanbul ignore next */ []));
+        this.verticalViewPortHeight = input('300px', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalViewPortHeight" }] : /* istanbul ignore next */ []));
+        this.arrowSelector = input('.carousel-arrow-cursor', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrowSelector" }] : /* istanbul ignore next */ []));
+        this.contentClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+        this.indicatorsContentClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorsContentClass" }] : /* istanbul ignore next */ []));
+        this.indicatorsContentStyle = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorsContentStyle" }] : /* istanbul ignore next */ []));
+        this.indicatorStyleClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorStyleClass" }] : /* istanbul ignore next */ []));
+        this.indicatorStyle = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorStyle" }] : /* istanbul ignore next */ []));
+        this.data = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.circular = input(false, { ...(ngDevMode ? { debugName: "circular" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.showIndicators = input(true, { ...(ngDevMode ? { debugName: "showIndicators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.showNavigators = input(true, { ...(ngDevMode ? { debugName: "showNavigators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.suspendAutoPlay = input(true, { ...(ngDevMode ? { debugName: "suspendAutoPlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.style = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+        this.styleClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+        this.pageEvent = output();
+        this.itemsContainer = viewChild('itemsContainer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemsContainer" }] : /* istanbul ignore next */ []));
+        this.indicatorContent = viewChild('indicatorContent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorContent" }] : /* istanbul ignore next */ []));
+        this.headerFacet = contentChild(CmatCarouselHeaderComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerFacet" }] : /* istanbul ignore next */ []));
+        this.footerFacet = contentChild(CmatCarouselFooterComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerFacet" }] : /* istanbul ignore next */ []));
+        this.templates = contentChildren(CmatCarouselTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+        this.id = `cmat-carousel-${NEXT_ID++}`;
+        this.carouselStyle = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "carouselStyle" }] : /* istanbul ignore next */ []));
+        this.startPos = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startPos" }] : /* istanbul ignore next */ []));
+        this.clonedItemsForStarting = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clonedItemsForStarting" }] : /* istanbul ignore next */ []));
+        this.clonedItemsForFinishing = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clonedItemsForFinishing" }] : /* istanbul ignore next */ []));
+        this.isUserInteracted = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isUserInteracted" }] : /* istanbul ignore next */ []));
+        this.swipeThreshold = signal(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "swipeThreshold" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+        this.footerTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+        this.previousIconTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previousIconTemplate" }] : /* istanbul ignore next */ []));
+        this.nextIconTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextIconTemplate" }] : /* istanbul ignore next */ []));
+        this.isVertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
+        this.allowAutoplay = computed(() => {
+            return this.autoplayInterval() > 0 && !this.isUserInteracted();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowAutoplay" }] : /* istanbul ignore next */ []));
+        this.verticalViewContainerHeight = computed(() => {
+            if (!this.isVertical()) {
+                return undefined;
+            }
+            const container = this.itemsContainer()?.nativeElement;
+            if (container) {
+                const firstItem = container.querySelector('.cmat-carousel-item');
+                if (firstItem) {
+                    return `${firstItem.offsetHeight * this.numVisible()}px`;
                 }
             }
-            if (simpleChange.autoplayInterval) {
-                this.allowAutoplay = !!this.autoplayInterval;
-            }
-        }
-        this.refreshVersion.update(value => value + 1);
+            return this.verticalViewPortHeight();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalViewContainerHeight" }] : /* istanbul ignore next */ []));
+        this.totalShiftedItems = computed(() => {
+            const page = this.page();
+            const ns = this.numScroll();
+            const nv = this.numVisible();
+            let total = page * ns * -1;
+            if (this.isCircular()) {
+                total -= nv;
+            }
+            if (page === this.totalDots() - 1 && this.remainingItems() > 0) {
+                total += -1 * this.remainingItems() + ns;
+            }
+            return total;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalShiftedItems" }] : /* istanbul ignore next */ []));
+        this.remainingItems = computed(() => {
+            const d = this.data() ?? [];
+            const nv = this.numVisible();
+            const ns = this.numScroll();
+            if (!d.length || ns <= 0 || nv >= d.length)
+                return 0;
+            const remainder = (d.length - nv) % ns;
+            return remainder < 0 ? remainder + ns : remainder;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "remainingItems" }] : /* istanbul ignore next */ []));
+        this.totalDots = computed(() => {
+            const nv = this.numVisible();
+            const ns = this.numScroll();
+            if (nv > 0 && ns > 0) {
+                if (!this.data() || this.data().length === 0)
+                    return 0;
+                return Math.max(1, Math.ceil((this.data().length - nv) / ns) + 1);
+            }
+            return 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalDots" }] : /* istanbul ignore next */ []));
+        this.isRemainingItemsAdded = computed(() => {
+            return this.page() === this.totalDots() - 1 && this.remainingItems() > 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRemainingItemsAdded" }] : /* istanbul ignore next */ []));
+        this.isCircular = computed(() => {
+            const data = this.data();
+            return this.circular() && !!data && data.length >= this.numVisible();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCircular" }] : /* istanbul ignore next */ []));
+        this.isEmpty = computed(() => {
+            const data = this.data();
+            return !data || data.length === 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        this.getTotalDotsArray = computed(() => {
+            const dots = this.totalDots();
+            return dots > 0 ? Array.from({ length: dots }, (_, i) => i) : [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "getTotalDotsArray" }] : /* istanbul ignore next */ []));
+        this.firstIndex = computed(() => this.page() * this.numScroll(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstIndex" }] : /* istanbul ignore next */ []));
+        this.lastIndex = computed(() => Math.min(this.page() * this.numScroll() + this.numVisible() - 1, (this.data()?.length ?? 0) - 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastIndex" }] : /* istanbul ignore next */ []));
+        this._document = inject(DOCUMENT);
+        this.renderer = inject(Renderer2);
+        this.documentResizeListener = null;
+        this._initResponsiveEffect();
+        this._initAutoplayEffect();
+        this._initCloneItemsEffect();
     }
     ngAfterContentInit() {
-        this.id = `cmat-carousel-${NEXT_ID++}`;
-        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._createStyle();
+        if (this.responsiveOptions()) {
             this._bindDocumentListeners();
         }
-        this.templates?.forEach((item) => {
-            switch (item.getType()) {
+        this.templates()?.forEach((item) => {
+            switch (item.name()) {
                 case 'item':
-                    this.itemTemplate = item.template;
+                    this.itemTemplate.set(item.template);
                     break;
                 case 'header':
-                    this.headerTemplate = item.template;
+                    this.headerTemplate.set(item.template);
                     break;
                 case 'footer':
-                    this.footerTemplate = item.template;
+                    this.footerTemplate.set(item.template);
                     break;
                 case 'previousicon':
-                    this.previousIconTemplate = item.template;
+                    this.previousIconTemplate.set(item.template);
                     break;
                 case 'nexticon':
-                    this.nextIconTemplate = item.template;
+                    this.nextIconTemplate.set(item.template);
                     break;
                 default:
-                    this.itemTemplate = item.template;
+                    this.itemTemplate.set(item.template);
                     break;
             }
         });
-        this.refreshVersion.update(value => value + 1);
-    }
-    ngAfterContentChecked() {
-        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 ?? 0;
-                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();
-            }
-        }
-        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() {
-        if (this.responsiveOptions) {
-            this._unbindDocumentListeners();
+        this._unbindDocumentListeners();
+        this.stopAutoplay();
+        if (this.carouselStyle()) {
+            const el = this.carouselStyle();
+            if (el.parentNode)
+                el.parentNode.removeChild(el);
+            this.carouselStyle.set(null);
         }
-        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() {
-        return this.isCircular() ? -1 * (this.totalShiftedItems + this.numVisible) : this.totalShiftedItems * -1;
-    }
-    lastIndex() {
-        return this.firstIndex() + this.numVisible - 1;
-    }
-    totalDots() {
-        if (this._numVisible > 0 && this._numScroll > 0)
-            return this.data?.length ? Math.ceil((this.data.length - this._numVisible) / this._numScroll) + 1 : 0;
-        return 0;
-    }
-    totalDotsArray() {
-        const totalDots = this.totalDots();
-        return totalDots <= 0 ? [] : Array(totalDots).fill(0);
-    }
-    isVertical() {
-        return this.orientation === 'vertical';
-    }
-    isCircular() {
-        return this.circular && this.data && this.data.length >= this.numVisible;
-    }
-    isAutoplay() {
-        if (this.autoplayInterval) {
-            return this.allowAutoplay;
-        }
-        return false;
-    }
-    isForwardNavDisabled() {
-        return this.isEmpty() || (this._page >= this.totalDots() - 1 && !this.isCircular());
-    }
-    isBackwardNavDisabled() {
-        return this.isEmpty() || (this._page <= 0 && !this.isCircular());
-    }
-    isEmpty() {
-        return !this.data || this.data.length === 0;
     }
     navForward(e, index) {
-        if (this.isCircular() || this._page < this.totalDots() - 1) {
+        if (this.isCircular() || this.page() < this.totalDots() - 1) {
             this._step(-1, index);
         }
-        if (this.autoplayInterval && this.suspendAutoPlay) {
-            this._stopAutoplay();
-        }
-        if (e?.cancelable) {
-            e.preventDefault();
-        }
+        this._handleInteractionStopAutoplay();
+        e?.cancelable && e.preventDefault();
     }
     navBackward(e, index) {
-        if (this.isCircular() || this._page !== 0) {
+        if (this.isCircular() || this.page() !== 0) {
             this._step(1, index);
         }
-        if (this.autoplayInterval && this.suspendAutoPlay) {
-            this._stopAutoplay();
-        }
-        if (e?.cancelable) {
-            e.preventDefault();
-        }
+        this._handleInteractionStopAutoplay();
+        e?.cancelable && e.preventDefault();
     }
     onDotClick(e, index) {
-        let page = this._page;
-        if (this.autoplayInterval && this.suspendAutoPlay) {
-            this._stopAutoplay();
-        }
-        if (index > page) {
+        this._handleInteractionStopAutoplay();
+        const currentPage = this.page();
+        if (index > currentPage) {
             this.navForward(e, index);
         }
-        else if (index < page) {
+        else if (index < currentPage) {
             this.navBackward(e, index);
         }
     }
-    onIndicatorKeydown(event) {
-        switch (event.code) {
-            case 'ArrowRight':
-                this._onRightKey();
-                break;
-            case 'ArrowLeft':
-                this._onLeftKey();
-                break;
-            case 'Home': {
-                this._onHomeKey();
-                break;
-            }
-            case 'End': {
-                this._onEndKey();
-                break;
-            }
-            case 'Tab': {
-                this._onTabKey();
-                break;
-            }
-        }
-    }
-    isPlaying() {
-        return !!this.interval;
-    }
-    onTransitionEnd() {
-        if (this.itemsContainer) {
-            this.itemsContainer.nativeElement.style.transition = '';
-            if ((this.page === 0 || this.page === this.totalDots() - 1) && this.isCircular()) {
-                this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${this.totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${this.totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
-            }
-        }
-    }
     onTouchStart(e) {
-        let touchobj = e.changedTouches[0];
-        this.startPos = {
-            x: touchobj.pageX,
-            y: touchobj.pageY
-        };
+        const touchobj = e.changedTouches[0];
+        this.startPos.set({ x: touchobj.pageX, y: touchobj.pageY });
     }
     onTouchMove(e) {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
+        e.cancelable && e.preventDefault();
     }
     onTouchEnd(e) {
-        let touchobj = e.changedTouches[0];
-        if (!this.startPos) {
+        const touchobj = e.changedTouches[0];
+        const start = this.startPos();
+        if (!start)
             return;
-        }
-        if (this.isVertical()) {
-            this._changePageOnTouch(e, touchobj.pageY - this.startPos.y);
-        }
-        else {
-            this._changePageOnTouch(e, touchobj.pageX - this.startPos.x);
-        }
+        const diff = this.isVertical()
+            ? touchobj.pageY - start.y
+            : touchobj.pageX - start.x;
+        this._changePageOnTouch(e, diff);
     }
     arrowCursorClick(cursorSide) {
         switch (cursorSide) {
@@ -417,162 +299,194 @@ class CmatCarouselComponent {
                 break;
         }
     }
-    _changePageOnTouch(e, diff) {
-        if (Math.abs(diff) > this.swipeThreshold) {
-            if (diff < 0) {
-                this.navForward(e);
-            }
-            else {
-                this.navBackward(e);
+    onTransitionEnd() {
+        if (this.itemsContainer()) {
+            this.itemsContainer().nativeElement.style.transition = '';
+            if ((this.page() === 0 || this.page() === this.totalDots() - 1) && this.isCircular()) {
+                this._applyTransform(this.totalShiftedItems());
             }
         }
     }
-    _bindDocumentListeners() {
-        this.documentResizeListener ??= this.renderer.listen(this.window, 'resize', () => {
-            this._calculatePosition();
-        });
+    stopAutoplay() {
+        this.isUserInteracted.set(true);
     }
-    _unbindDocumentListeners() {
-        if (this.documentResizeListener) {
-            this.documentResizeListener();
-            this.documentResizeListener = null;
-        }
+    startAutoplay() {
+        this.isUserInteracted.set(false);
     }
-    _onRightKey() {
-        const indicators = [...Array.from(this.indicatorContent?.nativeElement.querySelectorAll('[data-pc-section="indicator"]') ?? [])];
-        const activeIndex = this._findFocusedIndicatorIndex();
-        this._changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+    isFirstItemActive(index) {
+        return index === this.firstIndex();
     }
-    _onLeftKey() {
-        const activeIndex = this._findFocusedIndicatorIndex();
-        this._changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+    isLastItemActive(index) {
+        return index === this.lastIndex();
     }
-    _onHomeKey() {
-        const activeIndex = this._findFocusedIndicatorIndex();
-        this._changedFocusedIndicator(activeIndex, 0);
+    isMiddleItemActive(index) {
+        const first = this.firstIndex();
+        const last = this.lastIndex();
+        return index > first && index < last;
     }
-    _onEndKey() {
-        const indicators = [...Array.from(this.indicatorContent?.nativeElement.querySelectorAll('[data-pc-section="indicator"]') ?? [])];
-        const activeIndex = this._findFocusedIndicatorIndex();
-        this._changedFocusedIndicator(activeIndex, indicators.length - 1);
+    onIndicatorKeydown(event) {
+        switch (event.code) {
+            case 'ArrowRight':
+                this._onRightKey();
+                break;
+            case 'ArrowLeft':
+                this._onLeftKey();
+                break;
+            case 'Home':
+                this._onHomeKey();
+                break;
+            case 'End':
+                this._onEndKey();
+                break;
+            case 'Tab':
+                this._onTabKey();
+                break;
+        }
     }
-    _onTabKey() {
-        const indicators = Array.from(this.indicatorContent?.nativeElement.querySelectorAll('[data-pc-section="indicator"]') ?? []);
-        const highlightedIndex = indicators.findIndex((ind) => ind.getAttribute('cmat-carousel-highlight') !== undefined);
-        const activeIndicator = this.indicatorContent?.nativeElement ? this.indicatorContent?.nativeElement.querySelector('[data-pc-section="indicator"] > button[tabindex="0"]') : null;
-        const activeIndex = indicators.findIndex((ind) => ind === activeIndicator?.parentElement);
-        indicators[activeIndex]?.children[0] && (indicators[activeIndex].children[0].tabIndex = -1);
-        indicators[highlightedIndex]?.children[0] && (indicators[highlightedIndex].children[0].tabIndex = 0);
+    _handleInteractionStopAutoplay() {
+        if (this.autoplayInterval() && this.suspendAutoPlay()) {
+            this.stopAutoplay();
+        }
     }
-    _changedFocusedIndicator(prevInd, nextInd) {
-        const indicators = Array.from(this.indicatorContent?.nativeElement.querySelectorAll('[data-pc-section="indicator"]') ?? []);
-        indicators[prevInd]?.children[0] && (indicators[prevInd].children[0].tabIndex = -1);
-        indicators[nextInd]?.children[0] && (indicators[nextInd].children[0].tabIndex = 0);
-        indicators[nextInd]?.children[0]?.focus();
+    _changePageOnTouch(e, diff) {
+        if (Math.abs(diff) > this.swipeThreshold()) {
+            if (diff < 0) {
+                this.navForward(e);
+            }
+            else {
+                this.navBackward(e);
+            }
+        }
     }
     _step(dir, page) {
-        let totalShiftedItems = this.totalShiftedItems;
+        let totalShiftedItems = this.totalShiftedItems();
         const isCircular = this.isCircular();
+        let nextPage;
         if (page != null) {
-            totalShiftedItems = this._numScroll * page * -1;
+            totalShiftedItems = this.numScroll() * page * -1;
             if (isCircular) {
-                totalShiftedItems -= this._numVisible;
+                totalShiftedItems -= this.numVisible();
             }
-            this.isRemainingItemsAdded = false;
+            nextPage = page;
         }
         else {
-            totalShiftedItems += this._numScroll * dir;
-            if (this.isRemainingItemsAdded) {
-                totalShiftedItems += this.remainingItems - this._numScroll * dir;
-                this.isRemainingItemsAdded = false;
+            totalShiftedItems += this.numScroll() * dir;
+            if (this.isRemainingItemsAdded()) {
+                totalShiftedItems += this.remainingItems() - this.numScroll() * dir;
             }
-            let originalShiftedItems = isCircular ? totalShiftedItems + this._numVisible : totalShiftedItems;
-            page = Math.abs(Math.floor(originalShiftedItems / this._numScroll));
+            const originalShiftedItems = isCircular ? totalShiftedItems + this.numVisible() : totalShiftedItems;
+            nextPage = Math.abs(Math.floor(originalShiftedItems / this.numScroll()));
         }
-        if (isCircular && this.page === this.totalDots() - 1 && dir === -1) {
-            totalShiftedItems = -1 * (this.data.length + this._numVisible);
-            page = 0;
+        if (isCircular && this.page() === this.totalDots() - 1 && dir === -1) {
+            const data = this.data();
+            if (data) {
+                totalShiftedItems = -1 * (data.length + this.numVisible());
+            }
+            nextPage = 0;
         }
-        else if (isCircular && this.page === 0 && dir === 1) {
+        else if (isCircular && this.page() === 0 && dir === 1) {
             totalShiftedItems = 0;
-            page = this.totalDots() - 1;
-        }
-        else if (page === this.totalDots() - 1 && this.remainingItems > 0) {
-            totalShiftedItems += this.remainingItems * -1 - this._numScroll * dir;
-            this.isRemainingItemsAdded = true;
+            nextPage = this.totalDots() - 1;
         }
-        if (this.itemsContainer) {
-            this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
-            this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
+        else if (nextPage === this.totalDots() - 1 && this.remainingItems() > 0) {
+            totalShiftedItems += this.remainingItems() * -1 - this.numScroll() * dir;
         }
-        this.totalShiftedItems = totalShiftedItems;
-        this._page = page ?? 0;
-        this.pageEvent.emit({
-            page: this.page
-        });
-        this.refreshVersion.update(value => value + 1);
+        this._applyTransform(totalShiftedItems, true);
+        this.page.set(nextPage);
+        this.pageEvent.emit({ page: this.page() });
         this._updateCarouselItemsAccessibility();
     }
-    _startAutoplay() {
-        if (this.interval !== null) {
+    _applyTransform(shiftedItems, withTransition = false) {
+        if (!this.itemsContainer())
             return;
-        }
-        this.interval = window.setInterval(() => {
-            if (this.totalDots() > 0) {
-                if (this.page === this.totalDots() - 1) {
-                    this._step(-1, 0);
-                }
-                else {
-                    this._step(-1, this.page + 1);
-                }
+        const nv = this.numVisible();
+        if (nv === 0)
+            return;
+        const transform = this.isVertical()
+            ? `translate3d(0, ${shiftedItems * (100 / nv)}%, 0)`
+            : `translate3d(${shiftedItems * (100 / nv)}%, 0, 0)`;
+        const el = this.itemsContainer()?.nativeElement;
+        if (el) {
+            el.style.transform = transform;
+            el.style.transition = withTransition ? 'transform 500ms ease 0s' : '';
+        }
+    }
+    _initResponsiveEffect() {
+        effect(() => {
+            this._createStyle();
+            this._calculatePosition();
+            if (this.responsiveOptions()) {
+                this._bindDocumentListeners();
             }
-        }, this.autoplayInterval);
-        this.allowAutoplay = true;
-        this.refreshVersion.update(value => value + 1);
-    }
-    _stopAutoplay(changeAllow = true) {
-        if (this.interval !== null) {
-            clearInterval(this.interval);
-            this.interval = null;
-            if (changeAllow) {
-                this.allowAutoplay = false;
+            else {
+                this._unbindDocumentListeners();
             }
-        }
-        this.refreshVersion.update(value => value + 1);
+        });
     }
-    _findFocusedIndicatorIndex() {
-        const indicators = Array.from(this.indicatorContent?.nativeElement.querySelectorAll('[data-pc-section="indicator"]') ?? []);
-        const activeIndicator = this.indicatorContent?.nativeElement ? this.indicatorContent?.nativeElement.querySelector('[data-pc-section="indicator"] > button[tabindex="0"]') : null;
-        return indicators.findIndex((ind) => ind === activeIndicator?.parentElement);
+    _initCloneItemsEffect() {
+        effect(() => {
+            this._setCloneItems();
+        });
+    }
+    _initAutoplayEffect() {
+        effect((onCleanup) => {
+            const interval = this.autoplayInterval();
+            const isAllowed = this.allowAutoplay();
+            let intervalId = null;
+            if (interval > 0 && isAllowed) {
+                intervalId = window.setInterval(() => {
+                    untracked(() => {
+                        const currentPage = this.page();
+                        const dots = this.totalDots();
+                        if (dots > 0) {
+                            if (currentPage === dots - 1) {
+                                this._step(-1, 0);
+                            }
+                            else {
+                                this._step(-1, currentPage + 1);
+                            }
+                        }
+                    });
+                }, interval);
+            }
+            onCleanup(() => {
+                if (intervalId) {
+                    clearInterval(intervalId);
+                }
+            });
+        });
+    }
+    _bindDocumentListeners() {
+        if (this.documentResizeListener)
+            return;
+        this.documentResizeListener = this.renderer.listen('window', 'resize', () => {
+            this._calculatePosition();
+        });
+    }
+    _unbindDocumentListeners() {
+        if (this.documentResizeListener) {
+            this.documentResizeListener();
+            this.documentResizeListener = null;
+        }
     }
     _createStyle() {
-        if (!this.carouselStyle) {
-            this.carouselStyle = this.renderer.createElement('style');
-            this.renderer.appendChild(this._document.head, this.carouselStyle);
+        if (!this.carouselStyle()) {
+            const styleEl = this.renderer.createElement('style');
+            this.carouselStyle.set(styleEl);
+            this.renderer.appendChild(this._document.head, styleEl);
         }
         let innerHTML = `
             #${this.id} .cmat-carousel-item {
-				flex: 1 0 ${100 / this.numVisible}%
-			}
+                flex: 1 0 ${100 / this.numVisible()}%
+            }
         `;
-        if (this.responsiveOptions) {
-            this.responsiveOptions.sort((data1, data2) => {
-                const value1 = data1.breakpoint;
-                const value2 = data2.breakpoint;
-                let result;
-                if (value1 === null && value2 !== null)
-                    result = -1;
-                else if (value1 !== null && value2 === null)
-                    result = 1;
-                else if (value1 === null && value2 === null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-                return -1 * result;
+        if (this.responsiveOptions()) {
+            const sortedOptions = [...this.responsiveOptions()].sort((a, b) => {
+                const bpA = a.breakpoint === null ? Infinity : parseInt(a.breakpoint, 10);
+                const bpB = b.breakpoint === null ? Infinity : parseInt(b.breakpoint, 10);
+                return bpB - bpA; // Descending
             });
-            for (const res of this.responsiveOptions) {
+            for (const res of sortedOptions) {
                 innerHTML += `
                     @media screen and (max-width: ${res.breakpoint}) {
                         #${this.id} .cmat-carousel-item {
@@ -582,138 +496,135 @@ class CmatCarouselComponent {
                 `;
             }
         }
-        if (this.carouselStyle) {
-            this.renderer.setProperty(this.carouselStyle, 'textContent', innerHTML);
+        if (this.carouselStyle()) {
+            this.renderer.setProperty(this.carouselStyle(), 'textContent', innerHTML);
         }
     }
     _calculatePosition() {
-        if (this.responsiveOptions) {
-            let matchedResponsiveData = {
-                numVisible: this.defaultNumVisible,
-                numScroll: this.defaultNumScroll
-            };
-            if (this.window) {
-                let windowWidth = this.window.innerWidth;
-                for (const res of this.responsiveOptions) {
-                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
-                        matchedResponsiveData = res;
-                    }
-                }
+        if (!this.responsiveOptions() || this.responsiveOptions().length === 0) {
+            return;
+        }
+        const windowWidth = this._document.defaultView?.innerWidth ?? 0;
+        let matchedResponsiveData = null;
+        const sortedOptions = [...this.responsiveOptions()].sort((a, b) => {
+            const bpA = a.breakpoint === null || a.breakpoint === undefined ? Infinity : parseInt(a.breakpoint, 10);
+            const bpB = b.breakpoint === null || b.breakpoint === undefined ? Infinity : parseInt(b.breakpoint, 10);
+            return bpB - bpA;
+        });
+        for (const res of sortedOptions) {
+            const bp = parseInt(res.breakpoint, 10);
+            if (!isNaN(bp) && bp >= windowWidth) {
+                matchedResponsiveData = res;
+                break;
             }
-            if (this._numScroll !== matchedResponsiveData.numScroll) {
-                let page = this._page;
-                page = Math.floor((page * this._numScroll) / matchedResponsiveData.numScroll);
-                let totalShiftedItems = matchedResponsiveData.numScroll * this.page * -1;
-                if (this.isCircular()) {
-                    totalShiftedItems -= matchedResponsiveData.numVisible;
+        }
+        if (matchedResponsiveData) {
+            if (this.numScroll() !== matchedResponsiveData.numScroll) {
+                const oldNumScroll = this.numScroll();
+                const newNumScroll = matchedResponsiveData.numScroll;
+                let page = this.page();
+                if (oldNumScroll > 0) {
+                    page = Math.floor((page * oldNumScroll) / newNumScroll);
                 }
-                this.totalShiftedItems = totalShiftedItems;
-                this._numScroll = matchedResponsiveData.numScroll;
-                this._page = page;
-                this.pageEvent.emit({
-                    page: this.page
-                });
+                this.numScroll.set(newNumScroll);
+                this.page.set(page);
+                this.pageEvent.emit({ page: this.page() });
             }
-            if (this._numVisible !== matchedResponsiveData.numVisible) {
-                this._numVisible = matchedResponsiveData.numVisible;
+            if (this.numVisible() !== matchedResponsiveData.numVisible) {
+                this.numVisible.set(matchedResponsiveData.numVisible);
                 this._setCloneItems();
             }
-            this.refreshVersion.update(value => value + 1);
         }
-    }
-    _updateSlideAccessibility(slide, isActive) {
-        const focusableElements = slide.querySelectorAll('a, button, input, select, textarea, [tabindex]');
-        focusableElements.forEach((element) => {
-            element.tabIndex = isActive ? 0 : -1;
-        });
+        if (matchedResponsiveData) {
+            this._createStyle();
+        }
     }
     _updateCarouselItemsAccessibility() {
         const slides = this.el.nativeElement.querySelectorAll('.cmat-carousel-item');
-        slides.forEach((slide, index) => {
-            const isActive = index === this._page;
+        const currentPage = this.page();
+        const nv = this.numVisible();
+        const ns = this.numScroll();
+        const isCircular = this.isCircular();
+        if (isCircular) {
+            slides.forEach((slide) => {
+                slide.removeAttribute('aria-hidden');
+                const focusableElements = slide.querySelectorAll('a, button, input, select, textarea, [tabindex]');
+                focusableElements.forEach((el) => {
+                    el.removeAttribute('tabindex');
+                });
+            });
+            return;
+        }
+        const startIdx = currentPage * ns;
+        const endIdx = startIdx + nv;
+        slides.forEach((slide, domIndex) => {
+            const isActive = domIndex >= startIdx && domIndex < endIdx;
             slide.setAttribute('aria-hidden', !isActive ? 'true' : 'false');
-            this._updateSlideAccessibility(slide, isActive);
+            const focusableElements = slide.querySelectorAll('a, button, input, select, textarea, [tabindex]');
+            focusableElements.forEach((el) => {
+                el.tabIndex = isActive ? 0 : -1;
+            });
         });
     }
     _setCloneItems() {
-        this.clonedItemsForStarting = [];
-        this.clonedItemsForFinishing = [];
+        this.clonedItemsForStarting.set([]);
+        this.clonedItemsForFinishing.set([]);
         if (this.isCircular()) {
-            this.clonedItemsForStarting = [...this.data.slice(-1 * this._numVisible)];
-            this.clonedItemsForFinishing = [...this.data.slice(0, this._numVisible)];
+            const data = this.data() ?? [];
+            const nv = this.numVisible();
+            if (data.length >= nv) {
+                this.clonedItemsForStarting.set([...data.slice(-1 * nv)]);
+                this.clonedItemsForFinishing.set([...data.slice(0, nv)]);
+            }
+        }
+    }
+    _findFocusedIndicatorIndex() {
+        const indicators = Array.from(this.indicatorContent()?.nativeElement?.querySelectorAll('[data-pc-section="indicator"]') ?? []);
+        const activeIndicator = this.indicatorContent()?.nativeElement?.querySelector('[data-pc-section="indicator"] > button[tabindex="0"]');
+        return indicators.findIndex(ind => ind === activeIndicator?.parentElement);
+    }
+    _changedFocusedIndicator(prevInd, nextInd) {
+        const indicators = Array.from(this.indicatorContent()?.nativeElement?.querySelectorAll('[data-pc-section="indicator"]') ?? []);
+        if (indicators[prevInd]?.children[0])
+            indicators[prevInd].children[0].tabIndex = -1;
+        if (indicators[nextInd]?.children[0]) {
+            indicators[nextInd].children[0].tabIndex = 0;
+            indicators[nextInd].children[0].focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 }); }
+    _onRightKey() {
+        const indicators = Array.from(this.indicatorContent()?.nativeElement?.querySelectorAll('[data-pc-section="indicator"]') ?? []);
+        const activeIndex = this._findFocusedIndicatorIndex();
+        this._changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+    }
+    _onLeftKey() {
+        const activeIndex = this._findFocusedIndicatorIndex();
+        this._changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+    }
+    _onHomeKey() {
+        this._changedFocusedIndicator(this._findFocusedIndicatorIndex(), 0);
+    }
+    _onEndKey() {
+        const indicators = Array.from(this.indicatorContent()?.nativeElement?.querySelectorAll('[data-pc-section="indicator"]') ?? []);
+        this._changedFocusedIndicator(this._findFocusedIndicatorIndex(), indicators.length - 1);
+    }
+    _onTabKey() {
+        const indicators = Array.from(this.indicatorContent()?.nativeElement?.querySelectorAll('[data-pc-section="indicator"]') ?? []);
+        const highlightedIndex = indicators.findIndex(ind => ind.getAttribute('cmat-carousel-highlight') !== undefined);
+        const activeIndicator = this.indicatorContent()?.nativeElement?.querySelector('[data-pc-section="indicator"] > button[tabindex="0"]');
+        const activeIndex = indicators.findIndex(ind => ind === activeIndicator?.parentElement);
+        if (indicators[activeIndex]?.children[0])
+            indicators[activeIndex].children[0].tabIndex = -1;
+        if (indicators[highlightedIndex]?.children[0])
+            indicators[highlightedIndex].children[0].tabIndex = 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatCarouselComponent, isStandalone: true, selector: "cmat-carousel", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, numVisible: { classPropertyName: "numVisible", publicName: "numVisible", isSignal: true, isRequired: false, transformFunction: null }, numScroll: { classPropertyName: "numScroll", publicName: "numScroll", isSignal: true, isRequired: false, transformFunction: null }, autoplayInterval: { classPropertyName: "autoplayInterval", publicName: "autoplayInterval", isSignal: true, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, navigatorsType: { classPropertyName: "navigatorsType", publicName: "navigatorsType", isSignal: true, isRequired: false, transformFunction: null }, verticalViewPortHeight: { classPropertyName: "verticalViewPortHeight", publicName: "verticalViewPortHeight", isSignal: true, isRequired: false, transformFunction: null }, arrowSelector: { classPropertyName: "arrowSelector", publicName: "arrowSelector", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null }, indicatorsContentClass: { classPropertyName: "indicatorsContentClass", publicName: "indicatorsContentClass", isSignal: true, isRequired: false, transformFunction: null }, indicatorsContentStyle: { classPropertyName: "indicatorsContentStyle", publicName: "indicatorsContentStyle", isSignal: true, isRequired: false, transformFunction: null }, indicatorStyleClass: { classPropertyName: "indicatorStyleClass", publicName: "indicatorStyleClass", isSignal: true, isRequired: false, transformFunction: null }, indicatorStyle: { classPropertyName: "indicatorStyle", publicName: "indicatorStyle", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, showNavigators: { classPropertyName: "showNavigators", publicName: "showNavigators", isSignal: true, isRequired: false, transformFunction: null }, suspendAutoPlay: { classPropertyName: "suspendAutoPlay", publicName: "suspendAutoPlay", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", numVisible: "numVisibleChange", numScroll: "numScrollChange", pageEvent: "pageEvent" }, queries: [{ propertyName: "headerFacet", first: true, predicate: CmatCarouselHeaderComponent, descendants: true, isSignal: true }, { propertyName: "footerFacet", first: true, predicate: CmatCarouselFooterComponent, descendants: true, isSignal: true }, { propertyName: "templates", predicate: CmatCarouselTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, isSignal: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<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]=\"!isCircular() && page() === 0\" (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\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\"\r\n                    [style.height]=\"isVertical() ? verticalViewContainerHeight() : 'auto'\"\r\n                    (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) - 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 - 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]=\"!isCircular() && page() >= totalDots() - 1\" (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 getTotalDotsArray(); 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: "21.2.10", ngImport: i0, type: CmatCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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\" [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: [{
-                type: Input
-            }], numScroll: [{
-                type: Input
-            }], responsiveOptions: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], navigatorsType: [{
-                type: Input
-            }], verticalViewPortHeight: [{
-                type: Input
-            }], arrowSelector: [{
-                type: Input
-            }], contentClass: [{
-                type: Input
-            }], indicatorsContentClass: [{
-                type: Input
-            }], indicatorsContentStyle: [{
-                type: Input
-            }], indicatorStyleClass: [{
-                type: Input
-            }], indicatorStyle: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], circular: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showIndicators: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showNavigators: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], suspendAutoPlay: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], autoplayInterval: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], style: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], pageEvent: [{
-                type: Output
-            }], itemsContainer: [{
-                type: ViewChild,
-                args: ['itemsContainer']
-            }], indicatorContent: [{
-                type: ViewChild,
-                args: ['indicatorContent']
-            }], headerFacet: [{
-                type: ContentChild,
-                args: [CmatCarouselHeaderComponent]
-            }], footerFacet: [{
-                type: ContentChild,
-                args: [CmatCarouselFooterComponent]
-            }], templates: [{
-                type: ContentChildren,
-                args: [CmatCarouselTemplateDirective]
-            }] } });
+            args: [{ selector: 'cmat-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatIconModule, MatButtonModule, CmatArrowCursorDirective, CommonModule], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<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]=\"!isCircular() && page() === 0\" (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\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\"\r\n                    [style.height]=\"isVertical() ? verticalViewContainerHeight() : 'auto'\"\r\n                    (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) - 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 - 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]=\"!isCircular() && page() >= totalDots() - 1\" (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 getTotalDotsArray(); 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: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], numVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "numVisible", required: false }] }, { type: i0.Output, args: ["numVisibleChange"] }], numScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "numScroll", required: false }] }, { type: i0.Output, args: ["numScrollChange"] }], autoplayInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplayInterval", required: false }] }], responsiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveOptions", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], navigatorsType: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatorsType", required: false }] }], verticalViewPortHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalViewPortHeight", required: false }] }], arrowSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowSelector", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], indicatorsContentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorsContentClass", required: false }] }], indicatorsContentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorsContentStyle", required: false }] }], indicatorStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorStyleClass", required: false }] }], indicatorStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorStyle", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], showNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigators", required: false }] }], suspendAutoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "suspendAutoPlay", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], pageEvent: [{ type: i0.Output, args: ["pageEvent"] }], itemsContainer: [{ type: i0.ViewChild, args: ['itemsContainer', { isSignal: true }] }], indicatorContent: [{ type: i0.ViewChild, args: ['indicatorContent', { isSignal: true }] }], headerFacet: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CmatCarouselHeaderComponent), { isSignal: true }] }], footerFacet: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CmatCarouselFooterComponent), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CmatCarouselTemplateDirective), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.