cmat 0.0.16 → 0.0.18

package/fesm2022/cmat-components-carousel.mjs

@@ -0,0 +1,711 @@
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, Directive, Input, EventEmitter, PLATFORM_ID, booleanAttribute, numberAttribute, ChangeDetectionStrategy, ViewEncapsulation, Inject, Output, ViewChild, ContentChild, ContentChildren } from '@angular/core';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { CmatArrowCursorDirective } from 'cmat/directives/arrow-cursor';
+
+/* eslint-disable @typescript-eslint/member-ordering */
+class CmatCarouselHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: CmatCarouselHeaderComponent, isStandalone: true, selector: "cmat-carousel-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cmat-carousel-header',
+                    template: '<ng-content></ng-content>'
+                }]
+        }] });
+class CmatCarouselFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: CmatCarouselFooterComponent, isStandalone: true, selector: "cmat-carousel-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cmat-carousel-footer',
+                    template: '<ng-content></ng-content>'
+                }]
+        }] });
+class CmatCarouselTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    getType() {
+        return this.name;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cmatCarouselTemplate]'
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { type: [{
+                type: Input
+            }], name: [{
+                type: Input,
+                args: ['cmatCarouselTemplate']
+            }] } });
+let NEXT_ID = 0;
+class CmatCarouselComponent {
+    get page() {
+        return this._page;
+    }
+    set page(val) {
+        if (this.isCreated && val !== this._page) {
+            if (this.autoplayInterval) {
+                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._numVisible;
+    }
+    set numScroll(val) {
+        this._numScroll = val;
+    }
+    get data() {
+        return this._data;
+    }
+    set data(val) {
+        this._data = val;
+    }
+    constructor(el, zone, cd, renderer, _document, _platformId) {
+        this.el = el;
+        this.zone = zone;
+        this.cd = cd;
+        this.renderer = renderer;
+        this._document = _document;
+        this._platformId = _platformId;
+        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.autoplayInterval = 0;
+        this.styleClass = '';
+        this.pageEvent = new EventEmitter();
+        this.prevState = {
+            numScroll: 0,
+            numVisible: 0,
+            value: []
+        };
+        this.defaultNumScroll = 1;
+        this.defaultNumVisible = 1;
+        this.isRemainingItemsAdded = false;
+        this.remainingItems = 0;
+        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 (isPlatformBrowser(this._platformId)) {
+            if (simpleChange.data) {
+                if (this.circular && this._data) {
+                    this._setCloneItems();
+                }
+            }
+            if (this.isCreated) {
+                if (simpleChange.numVisible) {
+                    if (this.responsiveOptions) {
+                        this.defaultNumVisible = this.numVisible;
+                    }
+                    if (this.isCircular()) {
+                        this._setCloneItems();
+                    }
+                    this._createStyle();
+                    this._calculatePosition();
+                }
+                if (simpleChange.numScroll) {
+                    if (this.responsiveOptions) {
+                        this.defaultNumScroll = this.numScroll;
+                    }
+                }
+                if (simpleChange.autoplayInterval) {
+                    this.allowAutoplay = !!this.autoplayInterval;
+                }
+            }
+        }
+        this.cd.markForCheck();
+    }
+    ngAfterContentInit() {
+        this.id = `cmat-carousel-${NEXT_ID++}`;
+        if (isPlatformBrowser(this._platformId)) {
+            this.allowAutoplay = !!this.autoplayInterval;
+            if (this.circular) {
+                this._setCloneItems();
+            }
+            if (this.responsiveOptions) {
+                this.defaultNumScroll = this._numScroll;
+                this.defaultNumVisible = this._numVisible;
+            }
+            this._createStyle();
+            this._calculatePosition();
+            if (this.responsiveOptions) {
+                this._bindDocumentListeners();
+            }
+        }
+        this.templates?.forEach((item) => {
+            switch (item.getType()) {
+                case 'item':
+                    this.itemTemplate = item.template;
+                    break;
+                case 'header':
+                    this.headerTemplate = item.template;
+                    break;
+                case 'footer':
+                    this.footerTemplate = item.template;
+                    break;
+                case 'previousicon':
+                    this.previousIconTemplate = item.template;
+                    break;
+                case 'nexticon':
+                    this.nextIconTemplate = item.template;
+                    break;
+                default:
+                    this.itemTemplate = item.template;
+                    break;
+            }
+        });
+        this.cd.detectChanges();
+    }
+    ngAfterContentChecked() {
+        if (isPlatformBrowser(this._platformId)) {
+            const isCircular = this.isCircular();
+            let totalShiftedItems = this.totalShiftedItems;
+            if (this.data && this.itemsContainer && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.data.length)) {
+                if (this.autoplayInterval) {
+                    this._stopAutoplay(false);
+                }
+                this.remainingItems = (this.data.length - this._numVisible) % this._numScroll;
+                let page = this._page;
+                if (this.totalDots() !== 0 && page >= this.totalDots()) {
+                    page = this.totalDots() - 1;
+                    this._page = page;
+                    this.pageEvent.emit({
+                        page: this.page
+                    });
+                }
+                totalShiftedItems = page * this._numScroll * -1;
+                if (isCircular) {
+                    totalShiftedItems -= this._numVisible;
+                }
+                if (page === this.totalDots() - 1 && this.remainingItems > 0) {
+                    totalShiftedItems += -1 * this.remainingItems + this._numScroll;
+                    this.isRemainingItemsAdded = true;
+                }
+                else {
+                    this.isRemainingItemsAdded = false;
+                }
+                if (totalShiftedItems !== this.totalShiftedItems) {
+                    this.totalShiftedItems = totalShiftedItems;
+                }
+                this._oldNumScroll = this._numScroll;
+                this.prevState.numScroll = this._numScroll;
+                this.prevState.numVisible = this._numVisible;
+                this.prevState.value = [...(this._data)];
+                if (this.totalDots() > 0 && this.itemsContainer.nativeElement) {
+                    this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
+                }
+                this.isCreated = true;
+                if (this.autoplayInterval && this.isAutoplay()) {
+                    this._startAutoplay();
+                }
+            }
+            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();
+        }
+        if (this.autoplayInterval) {
+            this._stopAutoplay();
+        }
+    }
+    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) {
+            this._step(-1, index);
+        }
+        if (this.autoplayInterval) {
+            this._stopAutoplay();
+        }
+        if (e?.cancelable) {
+            e.preventDefault();
+        }
+    }
+    navBackward(e, index) {
+        if (this.isCircular() || this._page !== 0) {
+            this._step(1, index);
+        }
+        if (this.autoplayInterval) {
+            this._stopAutoplay();
+        }
+        if (e?.cancelable) {
+            e.preventDefault();
+        }
+    }
+    onDotClick(e, index) {
+        let page = this._page;
+        if (this.autoplayInterval) {
+            this._stopAutoplay();
+        }
+        if (index > page) {
+            this.navForward(e, index);
+        }
+        else if (index < page) {
+            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
+        };
+    }
+    onTouchMove(e) {
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+    }
+    onTouchEnd(e) {
+        let touchobj = e.changedTouches[0];
+        if (this.isVertical()) {
+            this._changePageOnTouch(e, touchobj.pageY - this.startPos.y);
+        }
+        else {
+            this._changePageOnTouch(e, touchobj.pageX - this.startPos.x);
+        }
+    }
+    arrowCursorClick(cursorSide) {
+        switch (cursorSide) {
+            case 'left':
+            case 'up':
+                this.navBackward(null);
+                break;
+            case 'right':
+            case 'down':
+                this.navForward(null);
+                break;
+        }
+    }
+    _changePageOnTouch(e, diff) {
+        if (Math.abs(diff) > this.swipeThreshold) {
+            if (diff < 0) {
+                this.navForward(e);
+            }
+            else {
+                this.navBackward(e);
+            }
+        }
+    }
+    _bindDocumentListeners() {
+        if (isPlatformBrowser(this._platformId)) {
+            if (!this.documentResizeListener) {
+                this.documentResizeListener = this.renderer.listen(this.window, 'resize', () => {
+                    this._calculatePosition();
+                });
+            }
+        }
+    }
+    _unbindDocumentListeners() {
+        if (isPlatformBrowser(this._platformId)) {
+            if (this.documentResizeListener) {
+                this.documentResizeListener();
+                this.documentResizeListener = null;
+            }
+        }
+    }
+    _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() {
+        const activeIndex = this._findFocusedIndicatorIndex();
+        this._changedFocusedIndicator(activeIndex, 0);
+    }
+    _onEndKey() {
+        const indicators = [...Array.from(this.indicatorContent?.nativeElement.querySelectorAll('[data-pc-section="indicator"]'))];
+        const activeIndex = this._findFocusedIndicatorIndex();
+        this._changedFocusedIndicator(activeIndex, 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 ? this.indicatorContent?.nativeElement.querySelector('[data-pc-section="indicator"] > button[tabindex="0"]') : null;
+        const activeIndex = indicators.findIndex(ind => ind === activeIndicator.parentElement);
+        indicators[activeIndex].children[0].tabIndex = '-1';
+        indicators[highlightedIndex].children[0].tabIndex = '0';
+    }
+    _changedFocusedIndicator(prevInd, nextInd) {
+        const indicators = [...Array.from(this.indicatorContent?.nativeElement.querySelectorAll('[data-pc-section="indicator"]'))];
+        indicators[prevInd].children[0].tabIndex = '-1';
+        indicators[nextInd].children[0].tabIndex = '0';
+        indicators[nextInd].children[0].focus();
+    }
+    _step(dir, page) {
+        let totalShiftedItems = this.totalShiftedItems;
+        const isCircular = this.isCircular();
+        if (page != null) {
+            totalShiftedItems = this._numScroll * page * -1;
+            if (isCircular) {
+                totalShiftedItems -= this._numVisible;
+            }
+            this.isRemainingItemsAdded = false;
+        }
+        else {
+            totalShiftedItems += this._numScroll * dir;
+            if (this.isRemainingItemsAdded) {
+                totalShiftedItems += this.remainingItems - this._numScroll * dir;
+                this.isRemainingItemsAdded = false;
+            }
+            let originalShiftedItems = isCircular ? totalShiftedItems + this._numVisible : totalShiftedItems;
+            page = 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;
+        }
+        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;
+        }
+        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';
+        }
+        this.totalShiftedItems = totalShiftedItems;
+        this._page = page;
+        this.pageEvent.emit({
+            page: this.page
+        });
+        this.cd.markForCheck();
+        this._updateCarouselItemsAccessibility();
+    }
+    _startAutoplay() {
+        this.interval = setInterval(() => {
+            if (this.totalDots() > 0) {
+                if (this.page === this.totalDots() - 1) {
+                    this._step(-1, 0);
+                }
+                else {
+                    this._step(-1, this.page + 1);
+                }
+            }
+        }, this.autoplayInterval);
+        this.allowAutoplay = true;
+        this.cd.markForCheck();
+    }
+    _stopAutoplay(changeAllow = true) {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = undefined;
+            if (changeAllow) {
+                this.allowAutoplay = false;
+            }
+        }
+        this.cd.markForCheck();
+    }
+    _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);
+    }
+    _createStyle() {
+        if (!this.carouselStyle) {
+            this.carouselStyle = this.renderer.createElement('style');
+            this.carouselStyle.type = 'text/css';
+            this.renderer.appendChild(this._document.head, this.carouselStyle);
+        }
+        let innerHTML = `
+            #${this.id} .cmat-carousel-item {
+				flex: 1 0 ${100 / this.numVisible}%
+			}
+        `;
+        if (this.responsiveOptions) {
+            this.responsiveOptions.sort((data1, data2) => {
+                const value1 = data1.breakpoint;
+                const value2 = data2.breakpoint;
+                let result = null;
+                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;
+            });
+            for (const res of this.responsiveOptions) {
+                innerHTML += `
+                    @media screen and (max-width: ${res.breakpoint}) {
+                        #${this.id} .cmat-carousel-item {
+                            flex: 1 0 ${100 / res.numVisible}%
+                        }
+                    }
+                `;
+            }
+        }
+        this.carouselStyle.innerHTML = innerHTML;
+    }
+    _calculatePosition() {
+        if (this.responsiveOptions) {
+            let matchedResponsiveData = {
+                numVisible: this.defaultNumVisible,
+                numScroll: this.defaultNumScroll
+            };
+            if (typeof window !== 'undefined') {
+                let windowWidth = window.innerWidth;
+                for (const res of this.responsiveOptions) {
+                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
+                        matchedResponsiveData = res;
+                    }
+                }
+            }
+            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;
+                }
+                this.totalShiftedItems = totalShiftedItems;
+                this._numScroll = matchedResponsiveData.numScroll;
+                this._page = page;
+                this.pageEvent.emit({
+                    page: this.page
+                });
+            }
+            if (this._numVisible !== matchedResponsiveData.numVisible) {
+                this._numVisible = matchedResponsiveData.numVisible;
+                this._setCloneItems();
+            }
+            this.cd.markForCheck();
+        }
+    }
+    _updateSlideAccessibility(slide, isActive) {
+        const focusableElements = slide.querySelectorAll('a, button, input, select, textarea, [tabindex]');
+        focusableElements.forEach((element) => {
+            element.tabIndex = isActive ? 0 : -1;
+        });
+    }
+    _updateCarouselItemsAccessibility() {
+        const slides = this.el.nativeElement.querySelectorAll('.cmat-carousel-item');
+        slides.forEach((slide, index) => {
+            const isActive = index === this._page;
+            slide.setAttribute('aria-hidden', !isActive ? 'true' : 'false');
+            this._updateSlideAccessibility(slide, isActive);
+        });
+    }
+    _setCloneItems() {
+        this.clonedItemsForStarting = [];
+        this.clonedItemsForFinishing = [];
+        if (this.isCircular()) {
+            this.clonedItemsForStarting.push(...this.data.slice(-1 * this._numVisible));
+            this.clonedItemsForFinishing.push(...this.data.slice(0, this._numVisible));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CmatCarouselComponent, isStandalone: true, selector: "cmat-carousel", inputs: { page: "page", numVisible: "numVisible", numScroll: "numScroll", responsiveOptions: "responsiveOptions", orientation: "orientation", navigatorsType: "navigatorsType", verticalViewPortHeight: "verticalViewPortHeight", arrowSelector: "arrowSelector", contentClass: "contentClass", indicatorsContentClass: "indicatorsContentClass", indicatorsContentStyle: "indicatorsContentStyle", indicatorStyleClass: "indicatorStyleClass", indicatorStyle: "indicatorStyle", data: "data", circular: ["circular", "circular", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showNavigators: ["showNavigators", "showNavigators", booleanAttribute], autoplayInterval: ["autoplayInterval", "autoplayInterval", numberAttribute], style: "style", styleClass: "styleClass" }, outputs: { pageEvent: "pageEvent" }, queries: [{ propertyName: "headerFacet", first: true, predicate: CmatCarouselHeaderComponent, descendants: true }, { propertyName: "footerFacet", first: true, predicate: CmatCarouselFooterComponent, descendants: true }, { propertyName: "templates", predicate: CmatCarouselTemplateDirective }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div role=\"region\" [attr.id]=\"id\"\r\n    [ngClass]=\"{ 'cmat-carousel': true, 'cmat-carousel-vertical': isVertical(), 'cmat-carousel-horizontal': !isVertical() }\"\r\n    [ngStyle]=\"style\" [class]=\"styleClass\">\r\n\r\n    @if(headerFacet || headerTemplate){\r\n    <div class=\"cmat-carousel-header\">\r\n        <ng-content select=\"cmat-carousel-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n    <div [class]=\"contentClass\" [ngClass]=\"'items-center cmat-carousel-content'\">\r\n        <div class=\"cmat-carousel-container\" cmatArrowCursor [orientation]=\"orientation\" [selector]=\"arrowSelector\"\r\n            [enabled]=\"navigatorsType==='arrow'\" [attr.aria-live]=\"allowAutoplay ? 'polite' : 'off'\"\r\n            (clickEvent)=\"arrowCursorClick($event)\">\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-prev': true }\"\r\n                [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\r\n                @if(!previousIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-left'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-up'\"></mat-icon>\r\n                }\r\n                }\r\n                @else {\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n            <div class=\"cmat-carousel-items-content\"\r\n                [ngStyle]=\"{ height: isVertical() ? verticalViewPortHeight : 'auto' }\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\" (transitionend)=\"onTransitionEnd()\">\r\n                    @for (item of clonedItemsForStarting; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === data.length,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForStarting?.length??0 - 1 === $index\r\n                        }\" [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of data; track $index) {\r\n                    <div [ngClass]=\"{ 'cmat-carousel-item': true, 'cmat-carousel-item-active': firstIndex() <= $index && lastIndex() >= $index, 'cmat-carousel-item-start': firstIndex() === $index, 'cmat-carousel-item-end': lastIndex() === $index }\"\r\n                        [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of clonedItemsForFinishing; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === numVisible,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForFinishing?.length??0 - 1 === $index\r\n                        }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n            </div>\r\n\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-next': true}\"\r\n                [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\r\n                @if(!nextIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-down'\"></mat-icon>\r\n                }\r\n                }\r\n                @else{\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n        </div>\r\n        @if(showIndicators){\r\n        <ul #indicatorContent role=\"presentation\" [ngClass]=\"'cmat-carousel-indicators'\"\r\n            [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" (keydown)=\"onIndicatorKeydown($event)\">\r\n            @for (totalDot of totalDotsArray(); track $index) {\r\n            <li [ngClass]=\"{ 'cmat-carousel-indicator': true, 'cmat-carousel-indicator-active': page === $index }\"\r\n                [attr.data-pc-section]=\"'indicator'\">\r\n                <button type=\"button\" [ngClass]=\"'cmat-carousel-indicator-button'\" [class]=\"indicatorStyleClass\"\r\n                    [ngStyle]=\"indicatorStyle\" [attr.aria-current]=\"page === $index ? 'page' : undefined\"\r\n                    [tabindex]=\"page === $index ? 0 : -1\" (click)=\"onDotClick($event, $index)\">\r\n                </button>\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n\r\n    </div>\r\n    @if(footerFacet || footerTemplate){\r\n    <div class=\"cmat-carousel-footer\">\r\n        <ng-content select=\"cmat-carousel-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-carousel{display:flex;flex-direction:column}cmat-carousel .cmat-carousel-content{display:flex;flex-direction:column;overflow:hidden}cmat-carousel .cmat-carousel-prev,cmat-carousel .cmat-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:.25rem}cmat-carousel .cmat-carousel-container{display:flex;flex-direction:row;width:100%}cmat-carousel .cmat-carousel-items-content{overflow:hidden;width:100%}cmat-carousel .cmat-carousel-items-container{display:flex;flex-direction:row}cmat-carousel .cmat-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:1rem;gap:.5rem;margin:0;list-style:none}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator-active{background:var(--cmat-text-default)!important;opacity:1!important}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator{border:0 none;border-radius:6px;background:var(--cmat-text-disabled);transition:background .2s,color .2s,outline-color .2s,box-shadow .2s;opacity:.3}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator .cmat-carousel-indicator-button{display:flex;align-items:center;justify-content:center;width:2rem;height:.5rem;outline-color:transparent;padding:0;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer}cmat-carousel .cmat-carousel-vertical .cmat-carousel-container{flex-direction:column;width:auto}cmat-carousel .cmat-carousel-vertical .cmat-carousel-items-container{flex-direction:column;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: CmatArrowCursorDirective, selector: "[cmatArrowCursor]", inputs: ["animationDuration", "orientation", "enabled", "selector"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, MatIconModule, MatButtonModule, CmatArrowCursorDirective], template: "<div role=\"region\" [attr.id]=\"id\"\r\n    [ngClass]=\"{ 'cmat-carousel': true, 'cmat-carousel-vertical': isVertical(), 'cmat-carousel-horizontal': !isVertical() }\"\r\n    [ngStyle]=\"style\" [class]=\"styleClass\">\r\n\r\n    @if(headerFacet || headerTemplate){\r\n    <div class=\"cmat-carousel-header\">\r\n        <ng-content select=\"cmat-carousel-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n    <div [class]=\"contentClass\" [ngClass]=\"'items-center cmat-carousel-content'\">\r\n        <div class=\"cmat-carousel-container\" cmatArrowCursor [orientation]=\"orientation\" [selector]=\"arrowSelector\"\r\n            [enabled]=\"navigatorsType==='arrow'\" [attr.aria-live]=\"allowAutoplay ? 'polite' : 'off'\"\r\n            (clickEvent)=\"arrowCursorClick($event)\">\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-prev': true }\"\r\n                [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\r\n                @if(!previousIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-left'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-up'\"></mat-icon>\r\n                }\r\n                }\r\n                @else {\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n            <div class=\"cmat-carousel-items-content\"\r\n                [ngStyle]=\"{ height: isVertical() ? verticalViewPortHeight : 'auto' }\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\" (transitionend)=\"onTransitionEnd()\">\r\n                    @for (item of clonedItemsForStarting; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === data.length,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForStarting?.length??0 - 1 === $index\r\n                        }\" [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of data; track $index) {\r\n                    <div [ngClass]=\"{ 'cmat-carousel-item': true, 'cmat-carousel-item-active': firstIndex() <= $index && lastIndex() >= $index, 'cmat-carousel-item-start': firstIndex() === $index, 'cmat-carousel-item-end': lastIndex() === $index }\"\r\n                        [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of clonedItemsForFinishing; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === numVisible,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForFinishing?.length??0 - 1 === $index\r\n                        }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n            </div>\r\n\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-next': true}\"\r\n                [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\r\n                @if(!nextIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-down'\"></mat-icon>\r\n                }\r\n                }\r\n                @else{\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n        </div>\r\n        @if(showIndicators){\r\n        <ul #indicatorContent role=\"presentation\" [ngClass]=\"'cmat-carousel-indicators'\"\r\n            [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" (keydown)=\"onIndicatorKeydown($event)\">\r\n            @for (totalDot of totalDotsArray(); track $index) {\r\n            <li [ngClass]=\"{ 'cmat-carousel-indicator': true, 'cmat-carousel-indicator-active': page === $index }\"\r\n                [attr.data-pc-section]=\"'indicator'\">\r\n                <button type=\"button\" [ngClass]=\"'cmat-carousel-indicator-button'\" [class]=\"indicatorStyleClass\"\r\n                    [ngStyle]=\"indicatorStyle\" [attr.aria-current]=\"page === $index ? 'page' : undefined\"\r\n                    [tabindex]=\"page === $index ? 0 : -1\" (click)=\"onDotClick($event, $index)\">\r\n                </button>\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n\r\n    </div>\r\n    @if(footerFacet || footerTemplate){\r\n    <div class=\"cmat-carousel-footer\">\r\n        <ng-content select=\"cmat-carousel-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-carousel{display:flex;flex-direction:column}cmat-carousel .cmat-carousel-content{display:flex;flex-direction:column;overflow:hidden}cmat-carousel .cmat-carousel-prev,cmat-carousel .cmat-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:.25rem}cmat-carousel .cmat-carousel-container{display:flex;flex-direction:row;width:100%}cmat-carousel .cmat-carousel-items-content{overflow:hidden;width:100%}cmat-carousel .cmat-carousel-items-container{display:flex;flex-direction:row}cmat-carousel .cmat-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:1rem;gap:.5rem;margin:0;list-style:none}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator-active{background:var(--cmat-text-default)!important;opacity:1!important}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator{border:0 none;border-radius:6px;background:var(--cmat-text-disabled);transition:background .2s,color .2s,outline-color .2s,box-shadow .2s;opacity:.3}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator .cmat-carousel-indicator-button{display:flex;align-items:center;justify-content:center;width:2rem;height:.5rem;outline-color:transparent;padding:0;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer}cmat-carousel .cmat-carousel-vertical .cmat-carousel-container{flex-direction:column;width:auto}cmat-carousel .cmat-carousel-vertical .cmat-carousel-items-container{flex-direction:column;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { page: [{
+                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 }]
+            }], 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]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CmatCarouselComponent, CmatCarouselFooterComponent, CmatCarouselHeaderComponent, CmatCarouselTemplateDirective };
+//# sourceMappingURL=cmat-components-carousel.mjs.map