@ng-nest/ui 17.0.11 → 18.0.0

package/fesm2022/ng-nest-ui-carousel.mjs

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, PLATFORM_ID, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Renderer2, ElementRef, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XInputNumber, XWithConfig, XInputBoolean, XConfigService, XResize, XIsChange, XIsUndefined, XIsEmpty, XDropAnimation } from '@ng-nest/ui/core';
-import { Subject, interval, BehaviorSubject, takeUntil as takeUntil$1 } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { model, input, Component, viewChild, signal, inject, PLATFORM_ID, computed, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, HostBinding, NgModule } from '@angular/core';
+import { XPropertyFunction, XToCssPixelValue, XToBoolean, XToNumber, XProperty, XIsEmpty, XResize, XIsChange, XIsUndefined, XDropAnimation } from '@ng-nest/ui/core';
+import { Subject, interval, takeUntil as takeUntil$1 } from 'rxjs';
+import { debounceTime, tap, takeUntil } from 'rxjs/operators';
 import { isPlatformBrowser, NgClass } from '@angular/common';
 import { XButtonComponent } from '@ng-nest/ui/button';
 import { XProgressComponent } from '@ng-nest/ui/progress';
@@ -14,99 +13,218 @@ import { XProgressComponent } from '@ng-nest/ui/progress';
  * @decorator component
  */
 const XCarouselPrefix = 'x-carousel';
-const X_CONFIG_NAME = 'carousel';
+const X_CAROUSEL_CONFIG_NAME = 'carousel';
 /**
  * Carousel Property
  */
-class XCarouselProperty extends XProperty {
+class XCarouselProperty extends XPropertyFunction(X_CAROUSEL_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 当前激活的幻灯片索引
          * @en_US Index of the currently active slide
+         * @example
+         *
+         * ```html
+         * <x-carousel [active]="1" (activeChange)="activeChange($event)">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * <x-carousel [(active)]="active">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         * ```typescript
+         * active = signal(1)
+         * activeChange(active: number) {
+         *   console.log(active)
+         * }
+         * ```
+         *
          */
-        this.active = 0;
+        this.active = model(0);
+        /**
+         * @zh_CN 幻灯片高度
+         * @en_US Slide height
+         * @example
+         *
+         * ```html
+         * <x-carousel height="18rem">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.height = input(this.config?.height ?? '15rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 切换器触发方式
+         * @en_US Switcher trigger method
+         * @example
+         *
+         * ```html
+         * <x-carousel trigger="click">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.trigger = input(this.config?.trigger ?? 'hover');
+        /**
+         * @zh_CN 箭头显示隐藏方式
+         * @en_US Arrow shows how to hide
+         * @example
+         *
+         * ```html
+         * <x-carousel arrow="always">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * <x-carousel arrow="never">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.arrow = input(this.config?.arrow ?? 'hover');
+        /**
+         * @zh_CN 幻灯片轮播方向
+         * @en_US Slide rotation direction
+         * @example
+         *
+         * ```html
+         * <x-carousel direction="vertical">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.direction = input(this.config?.direction ?? 'horizontal');
         /**
          * @zh_CN 自动切换
          * @en_US Automatic switching
+         * @example
+         *
+         * ```html
+         * <x-carousel autoplay="false">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
          */
-        this.autoplay = true;
+        this.autoplay = input(true, { transform: XToBoolean });
         /**
-         * @zh_CN 自动切换时间间隔
-         * @en_US Automatic switching time interval
+         * @zh_CN 自动切换时间间隔，ms
+         * @en_US Automatic switching time interval. ms
+         * @example
+         *
+         * ```html
+         * <x-carousel interval="5000">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
          */
-        this.interval = 3000;
+        this.interval = input(3000, { transform: XToNumber });
         /**
-         * @zh_CN 激活的序号改变的事件
-         * @en_US The activated sequence number changed event
+         * @zh_CN 切换器是否显示在外面
+         * @en_US Whether the switcher is displayed outside
+         * @example
+         *
+         * ```html
+         * <x-carousel outside>
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
          */
-        this.activeChange = new EventEmitter();
+        this.outside = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 是否以卡片的方式显示幻灯片
+         * @en_US Whether to display the slideshow as a card
+         * @example
+         *
+         * ```html
+         * <x-carousel card>
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.card = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 显示文字
+         * @en_US Display text
+         * @example
+         *
+         * ```html
+         * <x-carousel text="text info">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.text = input('');
+        /**
+         * @zh_CN 显示进度条
+         * @en_US Show progress
+         * @example
+         *
+         * ```html
+         * <x-carousel progress>
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.progress = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 进度条颜色
+         * @en_US Progress color
+         * @example
+         *
+         * ```html
+         * <x-carousel progress progressColor="blue">
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.progressColor = input('');
+        /**
+         * @zh_CN 显示当前页面
+         * @en_US Show current page
+         * @example
+         *
+         * ```html
+         * <x-carousel current>
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.current = input(false, { transform: XToBoolean });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XCarouselProperty, selector: "x-carousel-property", inputs: { active: "active", height: "height", trigger: "trigger", arrow: "arrow", direction: "direction", autoplay: "autoplay", interval: "interval", outside: "outside", card: "card", text: "text", progress: "progress", progressColor: "progressColor", current: "current" }, outputs: { activeChange: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XCarouselProperty, selector: "x-carousel-property", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, outside: { classPropertyName: "outside", publicName: "outside", isSignal: true, isRequired: false, transformFunction: null }, card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressColor: { classPropertyName: "progressColor", publicName: "progressColor", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputNumber()
-], XCarouselProperty.prototype, "active", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '15rem')
-], XCarouselProperty.prototype, "height", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'hover')
-], XCarouselProperty.prototype, "trigger", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'hover')
-], XCarouselProperty.prototype, "arrow", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'horizontal')
-], XCarouselProperty.prototype, "direction", void 0);
-__decorate([
-    XInputBoolean()
-], XCarouselProperty.prototype, "autoplay", void 0);
-__decorate([
-    XInputBoolean()
-], XCarouselProperty.prototype, "outside", void 0);
-__decorate([
-    XInputBoolean()
-], XCarouselProperty.prototype, "card", void 0);
-__decorate([
-    XInputBoolean()
-], XCarouselProperty.prototype, "progress", void 0);
-__decorate([
-    XInputBoolean()
-], XCarouselProperty.prototype, "current", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCarouselPrefix}-property`, template: '' }]
-        }], propDecorators: { active: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], trigger: [{
-                type: Input
-            }], arrow: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], autoplay: [{
-                type: Input
-            }], interval: [{
-                type: Input
-            }], outside: [{
-                type: Input
-            }], card: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], progress: [{
-                type: Input
-            }], progressColor: [{
-                type: Input
-            }], current: [{
-                type: Input
-            }], activeChange: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * Carousel Panel
  * @selector x-carousel-panel
@@ -117,180 +235,199 @@ const XCarouselPanelPrefix = 'x-carousel-panel';
  * Carousel Panel Property
  */
 class XCarouselPanelProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselPanelProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XCarouselPanelProperty, selector: "x-carousel-panel-property", inputs: { active: "active" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 激活当前幻灯片
+         * @en_US Activate the current slide
+         * @example
+         *
+         * ```html
+         * <x-carousel>
+         *   <x-carousel-panel>0</x-carousel-panel>
+         *   <x-carousel-panel active>1</x-carousel-panel>
+         * </x-carousel>
+         * ```
+         *
+         */
+        this.active = input(false, { transform: XToBoolean });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselPanelProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XCarouselPanelProperty, selector: "x-carousel-panel-property", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputBoolean()
-], XCarouselPanelProperty.prototype, "active", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselPanelProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselPanelProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCarouselPanelPrefix}-property`, template: '' }]
-        }], propDecorators: { active: [{
-                type: Input
-            }] } });
+        }] });
 
 class XCarouselComponent extends XCarouselProperty {
     constructor() {
         super(...arguments);
-        this.start = -1;
-        this.panelChanges = [];
+        this.carousel = viewChild.required('carousel');
+        this.content = viewChild.required('content');
+        this.start = signal(-1);
+        this.before = signal(-1);
         this.platformId = inject(PLATFORM_ID);
-        this.isBrowser = true;
-        this.percent = 0;
-        this.count = 0;
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
-        this.configService = inject(XConfigService);
-    }
-    get page() {
-        return Number(this.active) + 1;
-    }
-    ngOnInit() {
         this.isBrowser = isPlatformBrowser(this.platformId);
-        this.setClassMap();
+        this.percent = signal(0);
+        this.count = signal(0);
+        this.panels = signal([]);
+        this.unSubject = new Subject();
+        this.classMap = computed(() => ({
+            [`${XCarouselPrefix}-${this.direction()}`]: !XIsEmpty(this.direction())
+        }));
+        this.updatePanel = new Subject();
+        this.page = computed(() => this.active() + 1);
     }
     ngAfterViewInit() {
-        this.autoplay && this.resetInterval();
-        XResize(this.content.nativeElement)
-            .pipe(debounceTime(30), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            this.panelChanges.forEach((sub) => sub.next(true));
-            this._resizeObserver = x.resizeObserver;
-            this.cdr.detectChanges();
-        });
+        this.autoplay() && this.resetInterval();
+        XResize(this.content().nativeElement)
+            .pipe(debounceTime(30), tap(({ resizeObserver }) => {
+            this.resizeObserver = resizeObserver;
+            this.updatePanel.next();
+        }), takeUntil(this.unSubject))
+            .subscribe();
     }
     ngOnChanges(simples) {
         const { active } = simples;
-        XIsChange(active) && this.setActiveItem(Number(this.active));
+        XIsChange(active) && this.setActiveItem(this.active());
     }
     ngOnDestroy() {
         this.timer?.unsubscribe();
         this.precentTimer?.unsubscribe();
-        this.panelChanges.forEach((x) => x.complete());
-        this._unSubject.complete();
-        this._unSubject.unsubscribe();
-        this._resizeObserver?.disconnect();
+        this.unSubject.next();
+        this.unSubject.complete();
+        this.resizeObserver?.disconnect();
+        this.updatePanel.complete();
     }
     action(index, increase, event) {
-        if (!XIsUndefined(event) && this.trigger !== event)
+        if (!XIsUndefined(event) && this.trigger() !== event)
             return;
-        this.autoplay && this.resetInterval();
-        this.setActiveItem(Number(index) + increase);
+        this.autoplay() && this.resetInterval();
+        this.setActiveItem(index + increase);
     }
     resetInterval() {
         if (!this.isBrowser)
             return;
         this.timer?.unsubscribe();
-        if (this.progress) {
+        if (this.progress()) {
             this.precentTimer?.unsubscribe();
-            this.percent = 0;
-            const js = Number(this.interval) / 100;
-            this.precentTimer = interval(js).subscribe(() => {
-                this.percent += 1;
-                this.cdr.markForCheck();
+            this.percent.set(0);
+            const js = this.interval() / 100;
+            this.precentTimer = interval(js)
+                .pipe(takeUntil(this.unSubject))
+                .subscribe(() => {
+                this.percent.update((x) => x + 1);
             });
         }
-        this.timer = interval(Number(this.interval)).subscribe(() => {
-            this.percent = 0;
-            this.setActiveItem(Number(this.active) + 1);
+        this.timer = interval(this.interval())
+            .pipe(takeUntil(this.unSubject))
+            .subscribe(() => {
+            this.percent.set(0);
+            this.setActiveItem(this.active() + 1);
         });
     }
     setActiveItem(index) {
-        if (this.start === -1)
+        if (this.start() === -1)
             return;
-        this.before = Number(this.active);
-        const nextValue = index > this.start ? 0 : index < 0 ? this.start : index;
-        this.active = nextValue;
-        this.panelChanges.forEach((sub) => sub.next(true));
-        this.activeChange.emit(this.active);
-        this.cdr.markForCheck();
-    }
-    setClassMap() {
-        this.classMap[`${XCarouselPrefix}-${this.direction}`] = !XIsEmpty(this.direction);
+        this.before.set(this.active());
+        const nextValue = index > this.start() ? 0 : index < 0 ? this.start() : index;
+        this.active.set(nextValue);
+        this.updatePanel.next();
     }
     getActivated(index) {
-        return Number(this.active) === index;
+        return this.active() === index;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XCarouselComponent, isStandalone: true, selector: "x-carousel", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #carousel\r\n  class=\"x-carousel\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-carousel-arrow-always]=\"arrow === 'always'\"\r\n  [class.x-carousel-has-current]=\"current\"\r\n  [class.x-carousel-indicator-outside]=\"outside || card\"\r\n>\r\n  <div #content class=\"x-carousel-content\" [style.height]=\"height\">\r\n    @if (arrow !== 'never' && direction !== 'vertical') {\r\n      <x-button class=\"arrow-left\" icon=\"fto-chevron-left\" (click)=\"action(active, -1)\"></x-button>\r\n      <x-button class=\"arrow-right\" icon=\"fto-chevron-right\" (click)=\"action(active, 1)\"></x-button>\r\n    }\r\n    <ng-content></ng-content>\r\n    @if (text) {\r\n      <div class=\"x-carousel-text\">{{ text }}</div>\r\n    }\r\n    @if (current) {\r\n      <div class=\"x-carousel-current\">\r\n        <span class=\"x-carousel-active\">{{ page }}</span> /\r\n        <span class=\"x-carousel-count\">{{ count }}</span>\r\n      </div>\r\n    }\r\n    @if (progress) {\r\n      <div class=\"x-carousel-progress\">\r\n        <x-progress [percent]=\"percent\" [color]=\"progressColor\" [info]=\"false\" height=\"0.325rem\"></x-progress>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"x-carousel-indicator\">\r\n    @for (panel of panelChanges; track i; let i = $index) {\r\n      <li [class.x-activated]=\"getActivated(i)\" (click)=\"action(i, 0, 'click')\" (mouseenter)=\"action(i, 0, 'hover')\">\r\n        <x-button type=\"text\"></x-button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-carousel{margin:0;padding:0;font-size:var(--x-font-size);box-sizing:border-box;position:relative}.x-carousel-content{position:relative}.x-carousel-content>x-button{opacity:0;visibility:hidden;top:50%;z-index:10;transform:translateY(-50%);position:absolute;transition:var(--x-animation-duration-base) ease-out}.x-carousel-content>x-button .x-button{border:none;outline:none;padding:0;margin:0;height:2.25rem;width:2.25rem;border-radius:50%;background-color:#1f2d3d26;color:var(--x-background-100);text-align:center}.x-carousel-content>x-button .x-button:hover{color:var(--x-background-100);background-color:#1f2d3d40}.x-carousel-content>x-button.arrow-left{left:1rem;transform:translate3D(-15px,-50%,0)}.x-carousel-content>x-button.arrow-right{right:1rem;transform:translate3D(15px,-50%,0)}.x-carousel-content>x-carousel-panel{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;background-color:var(--x-background-a100);z-index:0}.x-carousel-content>x-carousel-panel.x-carousel-animating{transition:.4s ease-in-out}.x-carousel-content>x-carousel-panel.x-carousel-card{width:50%}.x-carousel-content>x-carousel-panel.x-carousel-in-stage{cursor:pointer;z-index:1}.x-carousel-content>x-carousel-panel.x-carousel-in-stage .x-carousel-mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--x-background);opacity:.24;transition:.2s}.x-carousel-content>x-carousel-panel.x-carousel-in-stage:hover .x-carousel-mask{opacity:.12}.x-carousel-content>x-carousel-panel.x-activated{z-index:2}.x-carousel-indicator{bottom:.25rem;left:50%;transform:translate(-50%);position:absolute;z-index:2;display:inline-flex}.x-carousel-indicator>li{cursor:pointer;background-color:transparent;display:inline-flex;padding:.75rem .25rem}.x-carousel-indicator>li>x-button .x-button{padding:0;width:1.875rem;height:.125rem;background-color:#1f2d3d26;transition:.3s}.x-carousel-indicator>li:hover>x-button .x-button{background-color:#1f2d3d40}.x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#ffffffe6}.x-carousel-indicator-outside .x-carousel-indicator{position:static;transform:none;display:flex;align-items:center;justify-content:center}.x-carousel-indicator-outside .x-carousel-indicator>li>x-button .x-button{background-color:var(--x-text-700)}.x-carousel-indicator-outside .x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#00000080}.x-carousel:hover .x-carousel-content>x-button,.x-carousel-arrow-always .x-carousel-content>x-button{opacity:1;visibility:inherit}.x-carousel:hover .x-carousel-content>x-button.arrow-left,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-left{transform:translate3D(0,-50%,0)}.x-carousel:hover .x-carousel-content>x-button.arrow-right,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-right{transform:translate3D(0,-50%,0)}.x-carousel-horizontal,.x-carousel-vertical{overflow:hidden}.x-carousel-vertical>.x-carousel-indicator{right:0;top:50%;left:inherit;bottom:inherit;flex-direction:column;transform:translateY(-50%)}.x-carousel-vertical>.x-carousel-indicator>li{padding:.25rem .75rem}.x-carousel-vertical>.x-carousel-indicator>li>x-button .x-button{width:.125rem;height:1rem}.x-carousel-text{position:absolute;bottom:0;z-index:10;font-size:1rem;padding:.5rem .75rem}.x-carousel-progress{position:absolute;bottom:0;z-index:11;width:100%;height:.5rem}.x-carousel-progress x-progress{position:relative;height:.5rem;display:block;top:0}.x-carousel-progress x-progress .x-progress{position:relative;top:-.5625rem}.x-carousel-progress x-progress .x-progress-rail,.x-carousel-progress x-progress .x-progress-bg{border-radius:0}.x-carousel-progress x-progress .x-progress-rail{background-color:transparent}.x-carousel-current{position:absolute;bottom:0;right:0;z-index:11;padding:.5rem .75rem;font-size:var(--x-font-size-big)}.x-carousel-active{color:var(--x-primary);font-weight:600;font-size:1.5rem}.x-carousel-count{color:var(--x-text);font-weight:600}.x-carousel-has-current .x-carousel-text{padding-right:5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XCarouselComponent, isStandalone: true, selector: "x-carousel", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #carousel\r\n  class=\"x-carousel\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-carousel-arrow-always]=\"arrow() === 'always'\"\r\n  [class.x-carousel-has-current]=\"current()\"\r\n  [class.x-carousel-indicator-outside]=\"outside() || card()\"\r\n>\r\n  <div #content class=\"x-carousel-content\" [style.height]=\"height()\">\r\n    @if (arrow() !== 'never' && direction() !== 'vertical') {\r\n      <x-button class=\"arrow-left\" icon=\"fto-chevron-left\" (click)=\"action(active(), -1)\"></x-button>\r\n      <x-button class=\"arrow-right\" icon=\"fto-chevron-right\" (click)=\"action(active(), 1)\"></x-button>\r\n    }\r\n    <ng-content></ng-content>\r\n    @if (text()) {\r\n      <div class=\"x-carousel-text\">{{ text() }}</div>\r\n    }\r\n    @if (current()) {\r\n      <div class=\"x-carousel-current\">\r\n        <span class=\"x-carousel-active\">{{ page() }}</span> /\r\n        <span class=\"x-carousel-count\">{{ count() }}</span>\r\n      </div>\r\n    }\r\n    @if (progress()) {\r\n      <div class=\"x-carousel-progress\">\r\n        <x-progress [percent]=\"percent()\" [color]=\"progressColor()\" [info]=\"false\" height=\"0.325rem\"></x-progress>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"x-carousel-indicator\">\r\n    @for (panel of panels(); track $index) {\r\n      <li\r\n        [class.x-activated]=\"getActivated($index)\"\r\n        (click)=\"action($index, 0, 'click')\"\r\n        (mouseenter)=\"action($index, 0, 'hover')\"\r\n      >\r\n        <x-button type=\"text\"></x-button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-carousel{margin:0;padding:0;font-size:var(--x-font-size);box-sizing:border-box;position:relative}.x-carousel-content{position:relative;overflow:hidden}.x-carousel-content>x-button{opacity:0;visibility:hidden;top:50%;z-index:10;transform:translateY(-50%);position:absolute;transition:var(--x-animation-duration-base) ease-out}.x-carousel-content>x-button .x-button{border:none;outline:none;padding:0;margin:0;height:2.25rem;width:2.25rem;border-radius:50%;background-color:#1f2d3d26;color:var(--x-background-100);text-align:center}.x-carousel-content>x-button .x-button:hover{color:var(--x-background-100);background-color:#1f2d3d40}.x-carousel-content>x-button.arrow-left{left:1rem;transform:translate3D(-15px,-50%,0)}.x-carousel-content>x-button.arrow-right{right:1rem;transform:translate3D(15px,-50%,0)}.x-carousel-content>x-carousel-panel{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;background-color:var(--x-background-a100);z-index:0}.x-carousel-content>x-carousel-panel.x-carousel-animating{transition:.4s ease-in-out}.x-carousel-content>x-carousel-panel.x-carousel-card{width:50%}.x-carousel-content>x-carousel-panel.x-carousel-in-stage{cursor:pointer;z-index:1}.x-carousel-content>x-carousel-panel.x-carousel-in-stage .x-carousel-mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--x-background);opacity:.24;transition:.2s}.x-carousel-content>x-carousel-panel.x-carousel-in-stage:hover .x-carousel-mask{opacity:.12}.x-carousel-content>x-carousel-panel.x-activated{z-index:2}.x-carousel-indicator{bottom:.25rem;left:50%;transform:translate(-50%);position:absolute;z-index:2;display:inline-flex}.x-carousel-indicator>li{cursor:pointer;background-color:transparent;display:inline-flex;padding:.75rem .25rem}.x-carousel-indicator>li>x-button .x-button{padding:0;width:1.875rem;height:.125rem;background-color:#1f2d3d26;transition:.3s}.x-carousel-indicator>li:hover>x-button .x-button{background-color:#1f2d3d40}.x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#ffffffe6}.x-carousel-indicator-outside .x-carousel-indicator{position:static;transform:none;display:flex;align-items:center;justify-content:center}.x-carousel-indicator-outside .x-carousel-indicator>li>x-button .x-button{background-color:var(--x-text-700)}.x-carousel-indicator-outside .x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#00000080}.x-carousel:hover .x-carousel-content>x-button,.x-carousel-arrow-always .x-carousel-content>x-button{opacity:1;visibility:inherit}.x-carousel:hover .x-carousel-content>x-button.arrow-left,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-left{transform:translate3D(0,-50%,0)}.x-carousel:hover .x-carousel-content>x-button.arrow-right,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-right{transform:translate3D(0,-50%,0)}.x-carousel-horizontal,.x-carousel-vertical{overflow:hidden}.x-carousel-vertical>.x-carousel-indicator{right:0;top:50%;left:inherit;bottom:inherit;flex-direction:column;transform:translateY(-50%)}.x-carousel-vertical>.x-carousel-indicator>li{padding:.25rem .75rem}.x-carousel-vertical>.x-carousel-indicator>li>x-button .x-button{width:.125rem;height:1rem}.x-carousel-text{position:absolute;bottom:0;z-index:10;font-size:1rem;padding:.5rem .75rem}.x-carousel-progress{position:absolute;bottom:0;z-index:11;width:100%;height:.5rem}.x-carousel-progress x-progress{position:relative;height:.5rem;display:block;top:0}.x-carousel-progress x-progress .x-progress{position:relative;top:-.5625rem}.x-carousel-progress x-progress .x-progress-rail,.x-carousel-progress x-progress .x-progress-bg{border-radius:0}.x-carousel-progress x-progress .x-progress-rail{background-color:transparent}.x-carousel-current{position:absolute;bottom:0;right:0;z-index:11;padding:.5rem .75rem;font-size:var(--x-font-size-big)}.x-carousel-active{color:var(--x-primary);font-weight:600;font-size:1.5rem}.x-carousel-count{color:var(--x-text);font-weight:600}.x-carousel-has-current .x-carousel-text{padding-right:5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XCarouselPrefix}`, standalone: true, imports: [NgClass, XButtonComponent, XProgressComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #carousel\r\n  class=\"x-carousel\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-carousel-arrow-always]=\"arrow === 'always'\"\r\n  [class.x-carousel-has-current]=\"current\"\r\n  [class.x-carousel-indicator-outside]=\"outside || card\"\r\n>\r\n  <div #content class=\"x-carousel-content\" [style.height]=\"height\">\r\n    @if (arrow !== 'never' && direction !== 'vertical') {\r\n      <x-button class=\"arrow-left\" icon=\"fto-chevron-left\" (click)=\"action(active, -1)\"></x-button>\r\n      <x-button class=\"arrow-right\" icon=\"fto-chevron-right\" (click)=\"action(active, 1)\"></x-button>\r\n    }\r\n    <ng-content></ng-content>\r\n    @if (text) {\r\n      <div class=\"x-carousel-text\">{{ text }}</div>\r\n    }\r\n    @if (current) {\r\n      <div class=\"x-carousel-current\">\r\n        <span class=\"x-carousel-active\">{{ page }}</span> /\r\n        <span class=\"x-carousel-count\">{{ count }}</span>\r\n      </div>\r\n    }\r\n    @if (progress) {\r\n      <div class=\"x-carousel-progress\">\r\n        <x-progress [percent]=\"percent\" [color]=\"progressColor\" [info]=\"false\" height=\"0.325rem\"></x-progress>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"x-carousel-indicator\">\r\n    @for (panel of panelChanges; track i; let i = $index) {\r\n      <li [class.x-activated]=\"getActivated(i)\" (click)=\"action(i, 0, 'click')\" (mouseenter)=\"action(i, 0, 'hover')\">\r\n        <x-button type=\"text\"></x-button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-carousel{margin:0;padding:0;font-size:var(--x-font-size);box-sizing:border-box;position:relative}.x-carousel-content{position:relative}.x-carousel-content>x-button{opacity:0;visibility:hidden;top:50%;z-index:10;transform:translateY(-50%);position:absolute;transition:var(--x-animation-duration-base) ease-out}.x-carousel-content>x-button .x-button{border:none;outline:none;padding:0;margin:0;height:2.25rem;width:2.25rem;border-radius:50%;background-color:#1f2d3d26;color:var(--x-background-100);text-align:center}.x-carousel-content>x-button .x-button:hover{color:var(--x-background-100);background-color:#1f2d3d40}.x-carousel-content>x-button.arrow-left{left:1rem;transform:translate3D(-15px,-50%,0)}.x-carousel-content>x-button.arrow-right{right:1rem;transform:translate3D(15px,-50%,0)}.x-carousel-content>x-carousel-panel{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;background-color:var(--x-background-a100);z-index:0}.x-carousel-content>x-carousel-panel.x-carousel-animating{transition:.4s ease-in-out}.x-carousel-content>x-carousel-panel.x-carousel-card{width:50%}.x-carousel-content>x-carousel-panel.x-carousel-in-stage{cursor:pointer;z-index:1}.x-carousel-content>x-carousel-panel.x-carousel-in-stage .x-carousel-mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--x-background);opacity:.24;transition:.2s}.x-carousel-content>x-carousel-panel.x-carousel-in-stage:hover .x-carousel-mask{opacity:.12}.x-carousel-content>x-carousel-panel.x-activated{z-index:2}.x-carousel-indicator{bottom:.25rem;left:50%;transform:translate(-50%);position:absolute;z-index:2;display:inline-flex}.x-carousel-indicator>li{cursor:pointer;background-color:transparent;display:inline-flex;padding:.75rem .25rem}.x-carousel-indicator>li>x-button .x-button{padding:0;width:1.875rem;height:.125rem;background-color:#1f2d3d26;transition:.3s}.x-carousel-indicator>li:hover>x-button .x-button{background-color:#1f2d3d40}.x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#ffffffe6}.x-carousel-indicator-outside .x-carousel-indicator{position:static;transform:none;display:flex;align-items:center;justify-content:center}.x-carousel-indicator-outside .x-carousel-indicator>li>x-button .x-button{background-color:var(--x-text-700)}.x-carousel-indicator-outside .x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#00000080}.x-carousel:hover .x-carousel-content>x-button,.x-carousel-arrow-always .x-carousel-content>x-button{opacity:1;visibility:inherit}.x-carousel:hover .x-carousel-content>x-button.arrow-left,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-left{transform:translate3D(0,-50%,0)}.x-carousel:hover .x-carousel-content>x-button.arrow-right,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-right{transform:translate3D(0,-50%,0)}.x-carousel-horizontal,.x-carousel-vertical{overflow:hidden}.x-carousel-vertical>.x-carousel-indicator{right:0;top:50%;left:inherit;bottom:inherit;flex-direction:column;transform:translateY(-50%)}.x-carousel-vertical>.x-carousel-indicator>li{padding:.25rem .75rem}.x-carousel-vertical>.x-carousel-indicator>li>x-button .x-button{width:.125rem;height:1rem}.x-carousel-text{position:absolute;bottom:0;z-index:10;font-size:1rem;padding:.5rem .75rem}.x-carousel-progress{position:absolute;bottom:0;z-index:11;width:100%;height:.5rem}.x-carousel-progress x-progress{position:relative;height:.5rem;display:block;top:0}.x-carousel-progress x-progress .x-progress{position:relative;top:-.5625rem}.x-carousel-progress x-progress .x-progress-rail,.x-carousel-progress x-progress .x-progress-bg{border-radius:0}.x-carousel-progress x-progress .x-progress-rail{background-color:transparent}.x-carousel-current{position:absolute;bottom:0;right:0;z-index:11;padding:.5rem .75rem;font-size:var(--x-font-size-big)}.x-carousel-active{color:var(--x-primary);font-weight:600;font-size:1.5rem}.x-carousel-count{color:var(--x-text);font-weight:600}.x-carousel-has-current .x-carousel-text{padding-right:5rem}\n"] }]
-        }], propDecorators: { carousel: [{
-                type: ViewChild,
-                args: ['carousel']
-            }], content: [{
-                type: ViewChild,
-                args: ['content']
-            }] } });
+            args: [{ selector: `${XCarouselPrefix}`, standalone: true, imports: [NgClass, XButtonComponent, XProgressComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #carousel\r\n  class=\"x-carousel\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-carousel-arrow-always]=\"arrow() === 'always'\"\r\n  [class.x-carousel-has-current]=\"current()\"\r\n  [class.x-carousel-indicator-outside]=\"outside() || card()\"\r\n>\r\n  <div #content class=\"x-carousel-content\" [style.height]=\"height()\">\r\n    @if (arrow() !== 'never' && direction() !== 'vertical') {\r\n      <x-button class=\"arrow-left\" icon=\"fto-chevron-left\" (click)=\"action(active(), -1)\"></x-button>\r\n      <x-button class=\"arrow-right\" icon=\"fto-chevron-right\" (click)=\"action(active(), 1)\"></x-button>\r\n    }\r\n    <ng-content></ng-content>\r\n    @if (text()) {\r\n      <div class=\"x-carousel-text\">{{ text() }}</div>\r\n    }\r\n    @if (current()) {\r\n      <div class=\"x-carousel-current\">\r\n        <span class=\"x-carousel-active\">{{ page() }}</span> /\r\n        <span class=\"x-carousel-count\">{{ count() }}</span>\r\n      </div>\r\n    }\r\n    @if (progress()) {\r\n      <div class=\"x-carousel-progress\">\r\n        <x-progress [percent]=\"percent()\" [color]=\"progressColor()\" [info]=\"false\" height=\"0.325rem\"></x-progress>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"x-carousel-indicator\">\r\n    @for (panel of panels(); track $index) {\r\n      <li\r\n        [class.x-activated]=\"getActivated($index)\"\r\n        (click)=\"action($index, 0, 'click')\"\r\n        (mouseenter)=\"action($index, 0, 'hover')\"\r\n      >\r\n        <x-button type=\"text\"></x-button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-carousel{margin:0;padding:0;font-size:var(--x-font-size);box-sizing:border-box;position:relative}.x-carousel-content{position:relative;overflow:hidden}.x-carousel-content>x-button{opacity:0;visibility:hidden;top:50%;z-index:10;transform:translateY(-50%);position:absolute;transition:var(--x-animation-duration-base) ease-out}.x-carousel-content>x-button .x-button{border:none;outline:none;padding:0;margin:0;height:2.25rem;width:2.25rem;border-radius:50%;background-color:#1f2d3d26;color:var(--x-background-100);text-align:center}.x-carousel-content>x-button .x-button:hover{color:var(--x-background-100);background-color:#1f2d3d40}.x-carousel-content>x-button.arrow-left{left:1rem;transform:translate3D(-15px,-50%,0)}.x-carousel-content>x-button.arrow-right{right:1rem;transform:translate3D(15px,-50%,0)}.x-carousel-content>x-carousel-panel{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;background-color:var(--x-background-a100);z-index:0}.x-carousel-content>x-carousel-panel.x-carousel-animating{transition:.4s ease-in-out}.x-carousel-content>x-carousel-panel.x-carousel-card{width:50%}.x-carousel-content>x-carousel-panel.x-carousel-in-stage{cursor:pointer;z-index:1}.x-carousel-content>x-carousel-panel.x-carousel-in-stage .x-carousel-mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--x-background);opacity:.24;transition:.2s}.x-carousel-content>x-carousel-panel.x-carousel-in-stage:hover .x-carousel-mask{opacity:.12}.x-carousel-content>x-carousel-panel.x-activated{z-index:2}.x-carousel-indicator{bottom:.25rem;left:50%;transform:translate(-50%);position:absolute;z-index:2;display:inline-flex}.x-carousel-indicator>li{cursor:pointer;background-color:transparent;display:inline-flex;padding:.75rem .25rem}.x-carousel-indicator>li>x-button .x-button{padding:0;width:1.875rem;height:.125rem;background-color:#1f2d3d26;transition:.3s}.x-carousel-indicator>li:hover>x-button .x-button{background-color:#1f2d3d40}.x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#ffffffe6}.x-carousel-indicator-outside .x-carousel-indicator{position:static;transform:none;display:flex;align-items:center;justify-content:center}.x-carousel-indicator-outside .x-carousel-indicator>li>x-button .x-button{background-color:var(--x-text-700)}.x-carousel-indicator-outside .x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#00000080}.x-carousel:hover .x-carousel-content>x-button,.x-carousel-arrow-always .x-carousel-content>x-button{opacity:1;visibility:inherit}.x-carousel:hover .x-carousel-content>x-button.arrow-left,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-left{transform:translate3D(0,-50%,0)}.x-carousel:hover .x-carousel-content>x-button.arrow-right,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-right{transform:translate3D(0,-50%,0)}.x-carousel-horizontal,.x-carousel-vertical{overflow:hidden}.x-carousel-vertical>.x-carousel-indicator{right:0;top:50%;left:inherit;bottom:inherit;flex-direction:column;transform:translateY(-50%)}.x-carousel-vertical>.x-carousel-indicator>li{padding:.25rem .75rem}.x-carousel-vertical>.x-carousel-indicator>li>x-button .x-button{width:.125rem;height:1rem}.x-carousel-text{position:absolute;bottom:0;z-index:10;font-size:1rem;padding:.5rem .75rem}.x-carousel-progress{position:absolute;bottom:0;z-index:11;width:100%;height:.5rem}.x-carousel-progress x-progress{position:relative;height:.5rem;display:block;top:0}.x-carousel-progress x-progress .x-progress{position:relative;top:-.5625rem}.x-carousel-progress x-progress .x-progress-rail,.x-carousel-progress x-progress .x-progress-bg{border-radius:0}.x-carousel-progress x-progress .x-progress-rail{background-color:transparent}.x-carousel-current{position:absolute;bottom:0;right:0;z-index:11;padding:.5rem .75rem;font-size:var(--x-font-size-big)}.x-carousel-active{color:var(--x-primary);font-weight:600;font-size:1.5rem}.x-carousel-count{color:var(--x-text);font-weight:600}.x-carousel-has-current .x-carousel-text{padding-right:5rem}\n"] }]
+        }] });
 
 class XCarouselPanelComponent extends XCarouselPanelProperty {
     constructor() {
         super(...arguments);
-        this.cardScale = 0.83;
-        this.scale = 1;
-        this.inStage = false;
-        this.updateSub = new BehaviorSubject(false);
+        this.index = signal(0);
+        this.animating = signal(false);
+        this.cardScale = signal(0.83);
+        this.scale = signal(1);
+        this.translate = signal(0);
+        this.translateType = signal('translateX');
+        this.inStage = signal(false);
         this.unSubject = new Subject();
         this.carousel = inject(XCarouselComponent, { optional: true, host: true });
-        this.renderer = inject(Renderer2);
+        this.activeSignal = signal(this.active());
+        this.card = computed(() => this.carousel?.card() ?? false);
         this.elementRef = inject(ElementRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.configService = inject(XConfigService);
+    }
+    get getCard() {
+        return !!this.carousel?.card();
+    }
+    get getActivated() {
+        return this.activeSignal();
+    }
+    get getInStage() {
+        return this.inStage();
+    }
+    get getAnimating() {
+        return this.animating();
+    }
+    get getTransform() {
+        return `${this.translateType()}(${this.translate()}px) scale(${this.scale()})`;
     }
     ngOnInit() {
-        if (this.carousel) {
-            this.carousel.count++;
-            this.carousel.start++;
-            this.index = this.carousel.start;
-            this.setClass('x-carousel-card', Boolean(this.carousel.card));
-            this.carousel.panelChanges.push(this.updateSub);
-        }
-        this.updateSub.pipe(takeUntil$1(this.unSubject)).subscribe((x) => {
-            if (x)
-                this.update();
+        if (!this.carousel)
+            return;
+        this.carousel.count.update((x) => x + 1);
+        this.carousel.start.update((x) => x + 1);
+        this.index.set(this.carousel.start());
+        this.carousel.panels.update((x) => {
+            x.push(this.elementRef);
+            return [...x];
+        });
+        this.carousel.updatePanel.pipe(takeUntil$1(this.unSubject)).subscribe(() => {
+            this.update();
         });
     }
     ngOnDestroy() {
-        if (this.carousel) {
-            this.carousel.start--;
-            const idx = this.carousel.panelChanges.indexOf(this.updateSub);
-            this.carousel.panelChanges.splice(idx, 1);
-        }
-        this.unSubject.next();
-        this.unSubject.complete();
+        if (!this.carousel)
+            return;
+        this.carousel.start.update((x) => x - 1);
+        const idx = this.carousel.panels().indexOf(this.elementRef);
+        this.carousel.panels.update((x) => {
+            x.splice(idx, 1);
+            return [...x];
+        });
     }
     setActive() {
-        const isActive = this.carousel?.active === this.index;
-        if (this.active !== isActive) {
-            this.active = isActive;
-            this.setClass('x-activated', this.active);
+        if (!this.carousel)
+            return;
+        const isActive = this.carousel.active() === this.index();
+        if (this.activeSignal() !== isActive) {
+            this.activeSignal.set(isActive);
         }
     }
     setStyles() {
         if (!this.carousel)
             return;
-        this.width = this.elementRef.nativeElement.offsetWidth;
-        this.height = this.elementRef.nativeElement.offsetHeight;
-        let translate;
-        let offset = Number(this.carousel.active) - this.index;
-        let distance = this.width;
-        let translateType = 'translateX';
-        if (this.carousel.card) {
-            if (this.carousel.direction === 'vertical') {
+        const width = this.elementRef.nativeElement.offsetWidth;
+        const height = this.elementRef.nativeElement.offsetHeight;
+        let offset = this.carousel.active() - this.index();
+        let distance = width;
+        if (this.carousel.card()) {
+            if (this.carousel.direction() === 'vertical') {
                 console.warn('[x-carousel] vertical direction is not supported in card mode');
             }
-            this.inStage = Math.round(Math.abs(offset)) <= 1;
-            this.setClass('x-carousel-in-stage', this.inStage);
-            translate = this.calcCardTranslate(this.index, Number(this.carousel.active));
-            this.scale = offset === 0 ? 1 : this.cardScale;
+            this.inStage.set(Math.round(Math.abs(offset)) <= 1);
+            this.translate.set(this.calcCardTranslate(this.index(), this.carousel.active()));
+            this.scale.set(offset === 0 ? 1 : this.cardScale());
         }
         else {
-            if (this.carousel?.direction === 'vertical') {
-                distance = this.height;
-                translateType = 'translateY';
+            if (this.carousel?.direction() === 'vertical') {
+                distance = height;
+                this.translateType.set('translateY');
             }
             const map = {
                 '-2': -distance,
@@ -300,67 +437,72 @@ class XCarouselPanelComponent extends XCarouselPanelProperty {
                 '2': distance
             };
             offset = offset < -2 ? -2 : offset > 2 ? 2 : offset;
-            translate = map[offset];
+            this.translate.set(map[offset]);
         }
-        this.animating =
-            this.carousel.active === this.index ||
-                this.carousel.before === this.index ||
-                this.carousel.start === Math.abs(offset) ||
-                Boolean(this.carousel.card);
-        this.setClass('x-carousel-animating', this.animating);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', `${translateType}(${translate}px) scale(${this.scale})`);
+        this.animating.set(this.carousel.active() === this.index() ||
+            this.carousel.before() === this.index() ||
+            this.carousel.start() === Math.abs(offset) ||
+            this.carousel.card());
     }
     calcCardTranslate(index, activeIndex) {
         if (!this.carousel)
             return;
-        const parentWidth = this.carousel.carousel.nativeElement.offsetWidth;
+        const parentWidth = this.carousel.carousel().nativeElement.offsetWidth;
         let offset = index - activeIndex;
-        let activeFirstOrLast = this.carousel.start > 1 && this.carousel.start === Math.abs(offset);
-        if (this.inStage || activeFirstOrLast) {
+        let activeFirstOrLast = this.carousel.start() > 1 && this.carousel.start() === Math.abs(offset);
+        if (this.inStage() || activeFirstOrLast) {
             if (activeFirstOrLast)
                 offset = offset < 0 ? 1 : -1;
-            return (parentWidth * ((2 - this.cardScale) * offset + 1)) / 4;
+            return (parentWidth * ((2 - this.cardScale()) * offset + 1)) / 4;
         }
         else if (index < activeIndex) {
-            return (-(1 + this.cardScale) * parentWidth) / 4;
+            return (-(1 + this.cardScale()) * parentWidth) / 4;
         }
         else {
-            return ((3 + this.cardScale) * parentWidth) / 4;
+            return ((3 + this.cardScale()) * parentWidth) / 4;
         }
     }
     update() {
         this.setActive();
         this.setStyles();
-        this.cdr.detectChanges();
     }
     panelClick() {
         if (!this.carousel)
             return;
-        if (this.carousel.card && this.carousel.active !== this.index) {
-            this.carousel.autoplay && this.carousel.resetInterval();
-            this.carousel.setActiveItem(this.index);
+        if (this.carousel.card() && this.carousel.active() !== this.index()) {
+            this.carousel.autoplay() && this.carousel.resetInterval();
+            this.carousel.setActiveItem(this.index());
         }
     }
-    setClass(cls, value) {
-        if (value)
-            this.renderer.addClass(this.elementRef.nativeElement, cls);
-        else
-            this.renderer.removeClass(this.elementRef.nativeElement, cls);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XCarouselPanelComponent, isStandalone: true, selector: "x-carousel-panel", usesInheritance: true, ngImport: i0, template: "<div #carouselPanel class=\"x-carousel-panel\" (click)=\"panelClick()\">\r\n  @if (carousel?.card) {\r\n    <div [hidden]=\"active\" class=\"x-carousel-mask\"></div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-carousel-panel{margin:0;padding:0;box-sizing:border-box;width:100%;height:100%;display:inline-block}\n"], animations: [XDropAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XCarouselPanelComponent, isStandalone: true, selector: "x-carousel-panel", host: { properties: { "class.x-carousel-card": "this.getCard", "class.x-activated": "this.getActivated", "class.x-carousel-in-stage": "this.getInStage", "class.x-carousel-animating": "this.getAnimating", "style.transform": "this.getTransform" } }, usesInheritance: true, ngImport: i0, template: "<div #carouselPanel class=\"x-carousel-panel\" (click)=\"panelClick()\">\r\n  @if (card()) {\r\n    <div [hidden]=\"activeSignal()\" class=\"x-carousel-mask\"></div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-carousel-panel{margin:0;padding:0;box-sizing:border-box;width:100%;height:100%;display:inline-block}\n"], animations: [XDropAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XCarouselPanelPrefix}`, standalone: true, animations: [XDropAnimation], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #carouselPanel class=\"x-carousel-panel\" (click)=\"panelClick()\">\r\n  @if (carousel?.card) {\r\n    <div [hidden]=\"active\" class=\"x-carousel-mask\"></div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-carousel-panel{margin:0;padding:0;box-sizing:border-box;width:100%;height:100%;display:inline-block}\n"] }]
-        }] });
+            args: [{ selector: `${XCarouselPanelPrefix}`, standalone: true, animations: [XDropAnimation], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #carouselPanel class=\"x-carousel-panel\" (click)=\"panelClick()\">\r\n  @if (card()) {\r\n    <div [hidden]=\"activeSignal()\" class=\"x-carousel-mask\"></div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-carousel-panel{margin:0;padding:0;box-sizing:border-box;width:100%;height:100%;display:inline-block}\n"] }]
+        }], propDecorators: { getCard: [{
+                type: HostBinding,
+                args: ['class.x-carousel-card']
+            }], getActivated: [{
+                type: HostBinding,
+                args: ['class.x-activated']
+            }], getInStage: [{
+                type: HostBinding,
+                args: ['class.x-carousel-in-stage']
+            }], getAnimating: [{
+                type: HostBinding,
+                args: ['class.x-carousel-animating']
+            }], getTransform: [{
+                type: HostBinding,
+                args: ['style.transform']
+            }] } });
 
 class XCarouselModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XCarouselModule, imports: [XCarouselComponent, XCarouselPanelComponent], exports: [XCarouselComponent, XCarouselPanelComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselModule, imports: [XCarouselComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XCarouselModule, imports: [XCarouselComponent, XCarouselPanelComponent], exports: [XCarouselComponent, XCarouselPanelComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselModule, imports: [XCarouselComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XCarouselComponent, XCarouselPanelComponent],