@ng-nest/ui 17.0.12 → 18.0.1

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

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XDataConvert, XWithConfig, XInputBoolean, XInputNumber, XConfigService, XIsChange, XIsEmpty, XResize, XIsUndefined, XSetData } from '@ng-nest/ui/core';
+import { input, model, output, Component, viewChild, ElementRef, signal, computed, inject, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { XPropertyFunction, XToDataArray, XToBoolean, XToCssPixelValue, XIsEmpty, XResize, XIsUndefined } from '@ng-nest/ui/core';
 import { Subject, of } from 'rxjs';
 import { debounceTime, takeUntil, delay } from 'rxjs/operators';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
@@ -16,172 +15,148 @@ import { XDropdownComponent } from '@ng-nest/ui/dropdown';
  * @decorator component
  */
 const XSliderPrefix = 'x-slider';
-const X_CONFIG_NAME = 'slider';
+const X_SLIDER_CONFIG_NAME = 'slider';
 /**
  * Slider Property
  */
-class XSliderProperty extends XProperty {
+class XSliderProperty extends XPropertyFunction(X_SLIDER_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 节点数据
          * @en_US Node data
          */
-        this.data = [];
+        this.data = input([], { transform: XToDataArray });
+        /**
+         * @zh_CN 滑动动画
+         * @en_US Sliding animation
+         */
+        this.animated = input(this.config?.animated ?? true, { transform: XToBoolean });
         /**
          * @zh_CN 当前激活的索引
          * @en_US Currently active index
          */
-        this.activatedIndex = 0;
+        this.activatedIndex = model(0);
+        /**
+         * @zh_CN 触发方式
+         * @en_US Trigger mode
+         */
+        this.trigger = input(this.config?.trigger ?? 'click');
         /**
          * @zh_CN 排列方式
          * @en_US Arrangement
          */
-        this.layout = 'row';
+        this.layout = input('row');
         /**
          * @zh_CN 对齐方式
          * @en_US Alignment
          */
-        this.justify = 'start';
+        this.justify = input('start');
         /**
          * @zh_CN 节点文字对齐方式
          * @en_US Node text alignment
          */
-        this.nodeJustify = 'center';
+        this.nodeJustify = input('center');
+        /**
+         * @zh_CN 节点自定义模板
+         * @en_US Node custom template
+         */
+        this.nodeTpl = input();
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         */
+        this.size = input(this.config?.size ?? 'medium');
+        /**
+         * @zh_CN 节点显示不下的时候显示展开所有的按钮，排列方式为 row 的时候生效
+         * @en_US When the node is not displayed, display all the buttons, and the arrangement is effective when the arrangement is row
+         */
+        this.showExpand = input(this.config?.showExpand ?? false, { transform: XToBoolean });
         /**
-         * @zh_CN 激活索引变化事件
-         * @en_US Activate index change event
+         * @zh_CN 节点显示不下的时候显示左右/上下的箭头
+         * @en_US Nodes can't show the show about/of the up and down arrow
+         */
+        this.autoShowArrow = input(this.config?.autoShowArrow ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 展开所有弹框的最大高度
+         * @en_US Expand the maximum height of all bomb frames
+         */
+        this.expandMaxHeight = input(this.config?.expandMaxHeight ?? '15rem', {
+            transform: XToCssPixelValue
+        });
+        /**
+         * @zh_CN 显示描点
+         * @en_US Show anchor
+         */
+        this.showAnchor = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 激活节点改变事件
+         * @en_US Activate node change event
          */
-        this.indexChange = new EventEmitter();
+        this.indexChange = output();
         /**
          * @zh_CN 激活节点改变事件
          * @en_US Activate node change event
          */
-        this.nodeChange = new EventEmitter();
+        this.nodeChange = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XSliderProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XSliderProperty, selector: "x-slider-property", inputs: { data: "data", animated: "animated", activatedIndex: "activatedIndex", trigger: "trigger", layout: "layout", justify: "justify", nodeJustify: "nodeJustify", nodeTpl: "nodeTpl", size: "size", showExpand: "showExpand", autoShowArrow: "autoShowArrow", expandMaxHeight: "expandMaxHeight", showAnchor: "showAnchor" }, outputs: { indexChange: "indexChange", nodeChange: "nodeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XSliderProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XSliderProperty, selector: "x-slider-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, activatedIndex: { classPropertyName: "activatedIndex", publicName: "activatedIndex", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, nodeJustify: { classPropertyName: "nodeJustify", publicName: "nodeJustify", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, autoShowArrow: { classPropertyName: "autoShowArrow", publicName: "autoShowArrow", isSignal: true, isRequired: false, transformFunction: null }, expandMaxHeight: { classPropertyName: "expandMaxHeight", publicName: "expandMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedIndex: "activatedIndexChange", indexChange: "indexChange", nodeChange: "nodeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XDataConvert()
-], XSliderProperty.prototype, "data", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XSliderProperty.prototype, "animated", void 0);
-__decorate([
-    XInputNumber()
-], XSliderProperty.prototype, "activatedIndex", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'click')
-], XSliderProperty.prototype, "trigger", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XSliderProperty.prototype, "size", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XSliderProperty.prototype, "showExpand", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XSliderProperty.prototype, "autoShowArrow", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '15rem')
-], XSliderProperty.prototype, "expandMaxHeight", void 0);
-__decorate([
-    XInputBoolean()
-], XSliderProperty.prototype, "showAnchor", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XSliderProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XSliderProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XSliderPrefix}-property`, template: '' }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], animated: [{
-                type: Input
-            }], activatedIndex: [{
-                type: Input
-            }], trigger: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }], nodeJustify: [{
-                type: Input
-            }], nodeTpl: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], showExpand: [{
-                type: Input
-            }], autoShowArrow: [{
-                type: Input
-            }], expandMaxHeight: [{
-                type: Input
-            }], showAnchor: [{
-                type: Input
-            }], indexChange: [{
-                type: Output
-            }], nodeChange: [{
-                type: Output
-            }] } });
+        }] });
 
 class XSliderComponent extends XSliderProperty {
     constructor() {
         super(...arguments);
-        this.nodes = [];
-        this.scrollClassMap = {};
-        this.nodeClassMap = {};
-        this.showArrow = false;
-        this.activatedId = '';
+        this.sliderScroll = viewChild.required('sliderScroll', { read: (ElementRef) });
+        this.sliderNodes = viewChild.required('sliderNodes', { read: (ElementRef) });
+        this.activated = signal(null);
+        this.showArrow = signal(false);
+        this.activatedId = signal('');
         this.hoverDelay = 200;
         this.hoverDelayUnsub = new Subject();
-        this._offset = 0;
-        this.direction = 'right';
-        this.maxOffset = 0;
-        this.highlightBox = {
-            width: '',
-            height: '',
-            left: '',
-            top: ''
-        };
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
+        this.offset = signal(0);
+        this.transform = computed(() => `translate${this.dir()}(-${this.offset()}px)`);
+        this.direction = signal('right');
+        this.maxOffset = signal(0);
+        this.dir = computed(() => (this.layout() === 'row' ? 'X' : 'Y'));
+        this.sizeName = computed(() => (this.layout() === 'row' ? 'Width' : 'Height'));
+        this.highlightBox = computed(() => {
+            this.resizeChanged();
+            if (!this.activated())
+                return {};
+            const activeEle = this.sliderNodes().nativeElement.querySelector(`li:nth-child(${this.activatedIndex() + 1})`);
+            if (!activeEle)
+                return {};
+            return {
+                width: `${activeEle.offsetWidth}px`,
+                height: `${activeEle.offsetHeight}px`,
+                left: `${activeEle.offsetLeft}px`,
+                top: `${activeEle.offsetTop}px`
+            };
+        });
+        this.resizeChanged = signal(null);
+        this.unSubject = new Subject();
         this.elementRef = inject(ElementRef);
-        this.configService = inject(XConfigService);
-    }
-    get offset() {
-        return this._offset;
-    }
-    set offset(value) {
-        this._offset = Math.floor(value);
-        this.transform = `translate${this.dir}(-${this._offset}px)`;
-        this.cdr.detectChanges();
-    }
-    get dir() {
-        return this.layout === 'row' ? 'X' : 'Y';
-    }
-    get sizeName() {
-        return this.layout === 'row' ? 'Width' : 'Height';
-    }
-    ngOnInit() {
-        this.setClassMap();
-    }
-    ngOnChanges(changes) {
-        const { data, layout, justify, nodeJustify, activatedIndex } = changes;
-        XIsChange(data) && this.setData();
-        XIsChange(layout) && this.setChange(this.classMap, layout);
-        XIsChange(justify) && this.setChange(this.scrollClassMap, justify, 'x-justify');
-        XIsChange(nodeJustify) && this.setChange(this.nodeClassMap, nodeJustify, 'x-justify');
-        XIsChange(activatedIndex) &&
-            this.setDirection(activatedIndex.currentValue, activatedIndex.previousValue) &&
-            this.setActivated();
+        this.classMap = computed(() => ({
+            [`${XSliderPrefix}-${this.layout()}`]: !XIsEmpty(this.layout()),
+            [`${XSliderPrefix}-show-arrow`]: this.showArrow()
+        }));
+        this.scrollClassMap = computed(() => ({
+            [`x-justify-${this.justify()}`]: !XIsEmpty(this.justify())
+        }));
+        this.nodeClassMap = computed(() => ({
+            [`x-justify-${this.nodeJustify()}`]: !XIsEmpty(this.nodeJustify()),
+            [`x-size-${this.size()}`]: !XIsEmpty(this.size())
+        }));
     }
     ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-        this._resizeObserver?.disconnect();
+        this.unSubject.next();
+        this.unSubject.complete();
+        this.resizeObserver?.disconnect();
         this.hoverDelayUnsub.next();
         this.hoverDelayUnsub.complete();
     }
@@ -189,30 +164,18 @@ class XSliderComponent extends XSliderProperty {
         this.setSubscribe();
         this.setActivated();
     }
-    setClassMap() {
-        this.classMap[`${XSliderPrefix}-${this.layout}`] = !XIsEmpty(this.layout);
-        this.scrollClassMap[`x-justify-${this.justify}`] = !XIsEmpty(this.justify);
-        this.nodeClassMap = {
-            [`x-justify-${this.nodeJustify}`]: !XIsEmpty(this.nodeJustify),
-            [`x-size-${this.size}`]: !XIsEmpty(this.size)
-        };
-    }
-    setChange(map, change, prefix = XSliderPrefix) {
-        map[`${prefix}-${change.previousValue}`] = false;
-        map[`${prefix}-${change.currentValue}`] = true;
-        this.cdr.detectChanges();
-    }
     setSubscribe() {
-        XResize(this.sliderScroll.nativeElement, this.sliderNodes.nativeElement)
-            .pipe(debounceTime(30), takeUntil(this._unSubject))
+        XResize(this.sliderScroll().nativeElement, this.sliderNodes().nativeElement)
+            .pipe(debounceTime(30), takeUntil(this.unSubject))
             .subscribe((x) => {
-            this._resizeObserver = x.resizeObserver;
+            this.resizeObserver = x.resizeObserver;
             this.sizeChecked();
             this.setActivated();
+            this.resizeChanged.set(x.entry?.contentRect || null);
         });
     }
     onEnter(event, node, index) {
-        if (node.disabled || this.trigger === 'click')
+        if (node.disabled || this.trigger() === 'click')
             return;
         of(true)
             .pipe(delay(this.hoverDelay), takeUntil(this.hoverDelayUnsub))
@@ -225,7 +188,7 @@ class XSliderComponent extends XSliderProperty {
         });
     }
     onLeave(node) {
-        if (node.disabled || this.trigger === 'click')
+        if (node.disabled || this.trigger() === 'click')
             return;
         this.hoverDelayUnsub.next();
     }
@@ -236,64 +199,61 @@ class XSliderComponent extends XSliderProperty {
         }
         if (node.disabled)
             return;
-        this.setDirection(index, Number(this.activatedIndex));
-        this.activatedIndex = index;
-        this.activated = node;
-        this.activatedId = node.id;
-        this.setHighlight();
+        this.setDirection(index, this.activatedIndex());
+        this.activatedIndex.set(index);
+        this.activated.set(node);
+        this.activatedId.set(node.id);
         this.setTranslate();
         this.indexChange.emit(index);
         this.nodeChange.emit(node);
     }
     dropdownClick(node) {
-        const index = this.nodes.indexOf(node);
+        const index = this.data().indexOf(node);
         this.nodeClick(null, node, index);
     }
     scrollPrev() {
-        if (this.offset === 0)
+        if (this.offset() === 0)
             return;
-        const scrollSize = this.sliderScroll.nativeElement[`offset${this.sizeName}`];
-        const currentOffset = this.offset;
+        const scrollSize = this.sliderScroll().nativeElement[`offset${this.sizeName()}`];
+        const currentOffset = this.offset();
         if (!currentOffset)
             return;
         const offset = currentOffset > scrollSize ? currentOffset - scrollSize : 0;
-        this.offset = offset;
+        this.offset.set(Math.floor(offset));
     }
     scrollNext() {
-        if (this.offset === this.maxOffset)
+        if (this.offset() === this.maxOffset())
             return;
-        const sliderSize = this.sliderNodes.nativeElement[`offset${this.sizeName}`];
-        const scrollSize = this.sliderScroll.nativeElement[`offset${this.sizeName}`];
-        const currentOffset = this.offset;
+        const sliderSize = this.sliderNodes().nativeElement[`offset${this.sizeName()}`];
+        const scrollSize = this.sliderScroll().nativeElement[`offset${this.sizeName()}`];
+        const currentOffset = this.offset();
         if (sliderSize - currentOffset <= scrollSize)
             return;
         const offset = sliderSize - currentOffset > scrollSize * 2 ? currentOffset + scrollSize : sliderSize - scrollSize;
-        this.offset = offset;
+        this.offset.set(Math.floor(offset));
     }
     setDirection(index, before) {
         const increase = index > before;
-        this.direction = this.layout === 'row' ? (increase ? 'right' : 'left') : increase ? 'bottom' : 'top';
-        return this.direction;
+        this.direction.set(this.layout() === 'row' ? (increase ? 'right' : 'left') : increase ? 'bottom' : 'top');
+        return this.direction();
     }
     setTranslate() {
-        if (XIsUndefined(this.sliderScroll) ||
-            XIsUndefined(this.sliderNodes) ||
-            typeof this.sliderScroll.nativeElement.getBoundingClientRect !== 'function')
+        if (XIsUndefined(this.sliderScroll()) ||
+            XIsUndefined(this.sliderNodes()) ||
+            typeof this.sliderScroll().nativeElement.getBoundingClientRect !== 'function')
             return;
-        const sliderRect = this.sliderScroll.nativeElement?.getBoundingClientRect();
-        const sliderNodesRect = this.sliderNodes.nativeElement?.getBoundingClientRect();
-        let moveIndex = ['bottom', 'right'].indexOf(this.direction) !== -1
-            ? Number(this.activatedIndex) + 2
-            : Number(this.activatedIndex);
-        moveIndex = moveIndex > this.nodes.length ? this.nodes.length : moveIndex === 0 ? 1 : moveIndex;
-        let moveEle = this.sliderNodes.nativeElement?.querySelector(`li:nth-child(${moveIndex})`);
+        const sliderRect = this.sliderScroll().nativeElement?.getBoundingClientRect();
+        const sliderNodesRect = this.sliderNodes().nativeElement?.getBoundingClientRect();
+        let moveIndex = ['bottom', 'right'].indexOf(this.direction()) !== -1 ? this.activatedIndex() + 2 : this.activatedIndex();
+        moveIndex = moveIndex > this.data().length ? this.data().length : moveIndex === 0 ? 1 : moveIndex;
+        let moveEle = this.sliderNodes().nativeElement?.querySelector(`li:nth-child(${moveIndex})`);
         let maxOffset = 0;
         if (XIsEmpty(moveEle))
             return;
         const moveRect = moveEle.getBoundingClientRect();
-        const currentOffset = this.offset;
+        const currentOffset = this.offset();
         let offset = currentOffset;
-        if (this.layout === 'row') {
+        if (this.layout() === 'row') {
             maxOffset = sliderNodesRect.width - sliderRect.width;
             if (moveRect.left < sliderRect.left) {
                 offset = currentOffset - (sliderRect.left - moveRect.left);
@@ -311,85 +271,60 @@ class XSliderComponent extends XSliderProperty {
                 offset = currentOffset + (moveRect.bottom - sliderRect.bottom);
             }
         }
-        this.maxOffset = Math.ceil(maxOffset);
+        this.maxOffset.set(Math.ceil(maxOffset));
         offset = Math.max(Math.ceil(offset), 0);
-        if ([this.maxOffset + 1, this.maxOffset - 1].includes(offset)) {
-            this.offset = this.maxOffset;
+        if (!this.showArrow()) {
+            this.offset.set(0);
         }
         else {
-            this.offset = Math.min(offset, this.maxOffset);
+            if ([this.maxOffset() + 1, this.maxOffset() - 1].includes(offset)) {
+                this.offset.set(this.maxOffset());
+            }
+            else {
+                this.offset.set(Math.min(offset, this.maxOffset()));
+            }
         }
     }
     sizeChecked() {
-        const size = this.sliderNodes.nativeElement[`offset${this.sizeName}`];
-        const scrollSize = this.sliderScroll.nativeElement[`offset${this.sizeName}`];
-        const showArrow = this.nodes.length > 1 && size > scrollSize;
-        if (this.showArrow !== showArrow) {
-            this.showArrow = showArrow;
-            this.classMap[`${XSliderPrefix}-show-arrow`] = this.showArrow;
-            if (!this.showArrow) {
-                this.offset = 0;
+        const size = this.sliderNodes().nativeElement[`offset${this.sizeName()}`];
+        const scrollSize = this.sliderScroll().nativeElement[`offset${this.sizeName()}`];
+        const showArrow = this.data().length > 1 && size > scrollSize;
+        if (this.showArrow() !== showArrow) {
+            this.showArrow.set(showArrow);
+            if (!this.showArrow()) {
+                this.offset.set(0);
             }
-            this.cdr.detectChanges();
         }
     }
     setActivated() {
-        if (this.nodes.length > 0) {
-            this.activated = this.nodes[Number(this.activatedIndex)];
-            if (this.activated) {
-                this.activatedId = this.activated.id;
+        if (this.data().length > 0) {
+            this.activated.set(this.data()[this.activatedIndex()]);
+            if (this.activated()) {
+                this.activatedId.set(this.activated()?.id);
             }
         }
         else {
-            this.activated = null;
+            this.activated.set(null);
         }
-        this.setHighlight();
         this.setTranslate();
     }
-    setHighlight() {
-        if (XIsUndefined(this.sliderNodes))
-            return;
-        const activeEle = this.sliderNodes.nativeElement.querySelector(`li:nth-child(${Number(this.activatedIndex) + 1})`);
-        if (!activeEle)
-            return;
-        this.highlightBox = {
-            width: `${activeEle.offsetWidth}px`,
-            height: `${activeEle.offsetHeight}px`,
-            left: `${activeEle.offsetLeft}px`,
-            top: `${activeEle.offsetTop}px`
-        };
-        this.cdr.detectChanges();
-    }
-    setData() {
-        XSetData(this.data, this._unSubject).subscribe((x) => {
-            this.nodes = x;
-            this.cdr.detectChanges();
-            setTimeout(() => this.setActivated());
-        });
-    }
     getActivated(index) {
-        return Number(this.activatedIndex) === index;
+        return this.activatedIndex() === index;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XSliderComponent, isStandalone: true, selector: "x-slider", viewQueries: [{ propertyName: "sliderScroll", first: true, predicate: ["sliderScroll"], descendants: true }, { propertyName: "sliderNodes", first: true, predicate: ["sliderNodes"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #slider class=\"x-slider\" [ngClass]=\"classMap\">\r\n  @if (autoShowArrow && showArrow) {\r\n    <x-link\r\n      [disabled]=\"offset === 0\"\r\n      class=\"x-slider-arrow-left\"\r\n      icon=\"fto-chevron-left\"\r\n      (click)=\"scrollPrev()\"\r\n    ></x-link>\r\n  }\r\n  <div class=\"x-slider-scroll\" #sliderScroll [ngClass]=\"scrollClassMap\">\r\n    <ul #sliderNodes [style.transform]=\"transform\">\r\n      @for (node of nodes; track node.id; let i = $index) {\r\n        <li [class.x-slider-activated]=\"getActivated(i)\" [class.x-slider-disabled]=\"node.disabled\" [title]=\"node.label\">\r\n          <x-link\r\n            (click)=\"nodeClick($event, node, i)\"\r\n            (mouseenter)=\"onEnter($event, node, i)\"\r\n            (mouseleave)=\"onLeave(node)\"\r\n            [ngClass]=\"nodeClassMap\"\r\n            [href]=\"showAnchor ? '#' + node.id : ''\"\r\n            [preventDefault]=\"showAnchor\"\r\n          >\r\n            <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n            @if (!nodeTpl) {\r\n              <ng-container *xOutlet=\"node.label\">{{ node.label }}</ng-container>\r\n            }\r\n          </x-link>\r\n        </li>\r\n      }\r\n      <li class=\"x-slider-highlight\" [class.x-slider-highlight-animated]=\"animated\" [ngStyle]=\"highlightBox\"></li>\r\n    </ul>\r\n  </div>\r\n  @if (autoShowArrow && showArrow) {\r\n    <x-link\r\n      [disabled]=\"offset === maxOffset\"\r\n      class=\"x-slider-arrow-right\"\r\n      icon=\"fto-chevron-right\"\r\n      (click)=\"scrollNext()\"\r\n    ></x-link>\r\n  }\r\n  @if (showExpand && showArrow && layout === 'row') {\r\n    <x-dropdown\r\n      class=\"x-slider-all\"\r\n      [data]=\"nodes\"\r\n      trigger=\"click\"\r\n      [(activatedId)]=\"activatedId\"\r\n      (nodeClick)=\"dropdownClick($event)\"\r\n      [portalMaxHeight]=\"expandMaxHeight\"\r\n    >\r\n      <x-button icon=\"fto-list\" onlyIcon [size]=\"size\"> </x-button>\r\n    </x-dropdown>\r\n  }\r\n</div>\r\n", styles: [".x-slider{margin:0;padding:0;position:relative;display:flex;align-items:center;height:100%}.x-slider-scroll{overflow:hidden;flex:1;display:inline-flex}.x-slider-scroll.x-justify-start{justify-content:flex-start}.x-slider-scroll.x-justify-center{justify-content:center}.x-slider-scroll.x-justify-end{justify-content:flex-end}.x-slider-scroll.x-justify-space-between{justify-content:space-between}.x-slider-scroll.x-justify-space-around{justify-content:space-around}.x-slider-scroll ul,.x-slider-scroll li{margin:0;padding:0;list-style:none}.x-slider-scroll>ul{display:inline-flex;align-items:center;position:relative;transition:transform var(--x-animation-duration-base)}.x-slider-scroll>ul>li{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:2}.x-slider-scroll>ul>li x-link{flex:1}.x-slider-scroll>ul>li x-link.x-justify-start{justify-content:flex-start}.x-slider-scroll>ul>li x-link.x-justify-center{justify-content:center}.x-slider-scroll>ul>li x-link.x-justify-end{justify-content:flex-end}.x-slider-scroll>ul>li x-link.x-justify-space-between{justify-content:space-between}.x-slider-scroll>ul>li x-link.x-justify-space-around{justify-content:space-around}.x-slider-scroll>ul>li x-link.x-size-big{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-slider-scroll>ul>li x-link.x-size-large{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-slider-scroll>ul>li x-link.x-size-medium{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-slider-scroll>ul>li x-link.x-size-small{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-slider-scroll>ul>li x-link.x-size-mini{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-slider-scroll>ul>li.x-slider-highlight{position:absolute;left:0;top:0;z-index:1;width:0;height:0;border-radius:var(--x-border-radius);background-color:#0000000d;border:.0625rem solid var(--x-border)}.x-slider-scroll>ul>li.x-slider-highlight-animated{transition:width var(--x-animation-duration-base),left var(--x-animation-duration-base),height var(--x-animation-duration-base),top var(--x-animation-duration-base)}.x-slider-activated{color:var(--x-primary)}.x-slider-disabled{color:var(--x-text-400)!important;cursor:not-allowed!important}.x-slider-disabled .x-link{cursor:not-allowed!important}.x-slider-disabled .x-link:hover{color:var(--x-text-400)!important}.x-slider-arrow-left,.x-slider-arrow-right{height:1.675rem;line-height:1.675rem}.x-slider-arrow-left>x-icon,.x-slider-arrow-right>x-icon{margin-right:0}.x-slider-arrow-left .x-link,.x-slider-arrow-right .x-link{padding:.5rem}.x-slider-show-arrow>.x-slider-scroll{justify-content:start!important}.x-slider-row>.x-slider-scroll>ul{flex-direction:row}.x-slider-column{display:inline-flex;flex-direction:column}.x-slider-column>.x-slider-scroll{display:inline-block}.x-slider-column>.x-slider-scroll>ul{flex-direction:column}.x-slider-column>.x-slider-scroll>ul>li{display:flex;width:100%}.x-slider-column>.x-slider-arrow-left,.x-slider-column>.x-slider-arrow-right{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XDropdownComponent, selector: "x-dropdown" }], 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: XSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XSliderComponent, isStandalone: true, selector: "x-slider", viewQueries: [{ propertyName: "sliderScroll", first: true, predicate: ["sliderScroll"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "sliderNodes", first: true, predicate: ["sliderNodes"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #slider class=\"x-slider\" [ngClass]=\"classMap()\">\r\n  @if (autoShowArrow() && showArrow()) {\r\n    <x-link\r\n      [disabled]=\"offset() === 0\"\r\n      class=\"x-slider-arrow-left\"\r\n      icon=\"fto-chevron-left\"\r\n      (click)=\"scrollPrev()\"\r\n    ></x-link>\r\n  }\r\n  <div class=\"x-slider-scroll\" #sliderScroll [ngClass]=\"scrollClassMap()\">\r\n    <ul #sliderNodes [style.transform]=\"transform()\">\r\n      @for (node of data(); track node.id; let i = $index) {\r\n        <li [class.x-slider-activated]=\"getActivated(i)\" [class.x-slider-disabled]=\"node.disabled\" [title]=\"node.label\">\r\n          <x-link\r\n            (click)=\"nodeClick($event, node, i)\"\r\n            (mouseenter)=\"onEnter($event, node, i)\"\r\n            (mouseleave)=\"onLeave(node)\"\r\n            [ngClass]=\"nodeClassMap()\"\r\n            [href]=\"showAnchor() ? '#' + node.id : ''\"\r\n            [preventDefault]=\"showAnchor()\"\r\n          >\r\n            <ng-container *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node }\"></ng-container>\r\n            @if (!nodeTpl()) {\r\n              <ng-container *xOutlet=\"node.label\">{{ node.label }}</ng-container>\r\n            }\r\n          </x-link>\r\n        </li>\r\n      }\r\n      <li class=\"x-slider-highlight\" [class.x-slider-highlight-animated]=\"animated()\" [ngStyle]=\"highlightBox()\"></li>\r\n    </ul>\r\n  </div>\r\n  @if (autoShowArrow() && showArrow()) {\r\n    <x-link\r\n      [disabled]=\"offset() === maxOffset()\"\r\n      class=\"x-slider-arrow-right\"\r\n      icon=\"fto-chevron-right\"\r\n      (click)=\"scrollNext()\"\r\n    ></x-link>\r\n  }\r\n  @if (showExpand() && showArrow() && layout() === 'row') {\r\n    <x-dropdown\r\n      class=\"x-slider-all\"\r\n      [data]=\"data()\"\r\n      trigger=\"click\"\r\n      [(activatedId)]=\"activatedId\"\r\n      (nodeClick)=\"dropdownClick($event)\"\r\n      [portalMaxHeight]=\"expandMaxHeight()\"\r\n    >\r\n      <x-button icon=\"fto-list\" onlyIcon flat plain [size]=\"size()\"> </x-button>\r\n    </x-dropdown>\r\n  }\r\n</div>\r\n", styles: [".x-slider{margin:0;padding:0;position:relative;display:flex;align-items:center;height:100%}.x-slider-scroll{overflow:hidden;flex:1;display:inline-flex}.x-slider-scroll.x-justify-start{justify-content:flex-start}.x-slider-scroll.x-justify-center{justify-content:center}.x-slider-scroll.x-justify-end{justify-content:flex-end}.x-slider-scroll.x-justify-space-between{justify-content:space-between}.x-slider-scroll.x-justify-space-around{justify-content:space-around}.x-slider-scroll ul,.x-slider-scroll li{margin:0;padding:0;list-style:none}.x-slider-scroll>ul{display:inline-flex;align-items:center;position:relative;transition:transform var(--x-animation-duration-base)}.x-slider-scroll>ul>li{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:2}.x-slider-scroll>ul>li x-link{flex:1}.x-slider-scroll>ul>li x-link.x-justify-start{justify-content:flex-start}.x-slider-scroll>ul>li x-link.x-justify-center{justify-content:center}.x-slider-scroll>ul>li x-link.x-justify-end{justify-content:flex-end}.x-slider-scroll>ul>li x-link.x-justify-space-between{justify-content:space-between}.x-slider-scroll>ul>li x-link.x-justify-space-around{justify-content:space-around}.x-slider-scroll>ul>li x-link.x-size-big{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-slider-scroll>ul>li x-link.x-size-large{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-slider-scroll>ul>li x-link.x-size-medium{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-slider-scroll>ul>li x-link.x-size-small{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-slider-scroll>ul>li x-link.x-size-mini{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-slider-scroll>ul>li.x-slider-highlight{position:absolute;left:0;top:0;z-index:1;width:0;height:0;border-radius:var(--x-border-small-radius);background-color:var(--x-background);box-shadow:0 .0625rem .1875rem .0625rem #0000000d}.x-slider-scroll>ul>li.x-slider-highlight-animated{transition:width var(--x-animation-duration-base),left var(--x-animation-duration-base),height var(--x-animation-duration-base),top var(--x-animation-duration-base)}.x-slider:not(.x-slider-show-arrow)>.x-slider-scroll>ul{background-color:var(--x-background-a200);border-radius:var(--x-border-radius);padding:.25rem}.x-slider-activated{color:var(--x-primary)}.x-slider-disabled{color:var(--x-text-400)!important;cursor:not-allowed!important}.x-slider-disabled .x-link{cursor:not-allowed!important}.x-slider-disabled .x-link:hover{color:var(--x-text-400)!important}.x-slider-arrow-left,.x-slider-arrow-right{height:1.675rem;line-height:1.675rem}.x-slider-arrow-left>x-icon,.x-slider-arrow-right>x-icon{margin-right:0}.x-slider-arrow-left .x-link,.x-slider-arrow-right .x-link{padding:.5rem}.x-slider-show-arrow{background-color:var(--x-background-a200);border-radius:var(--x-border-radius);padding:0 .25rem}.x-slider-show-arrow>.x-slider-scroll{justify-content:start!important;padding:.25rem 0}.x-slider-row>.x-slider-scroll>ul{flex-direction:row}.x-slider-column{display:inline-flex;flex-direction:column}.x-slider-column>.x-slider-scroll{display:inline-block}.x-slider-column>.x-slider-scroll>ul{flex-direction:column}.x-slider-column>.x-slider-scroll>ul>li{display:flex;width:100%}.x-slider-column>.x-slider-arrow-left,.x-slider-column>.x-slider-arrow-right{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XDropdownComponent, selector: "x-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XSliderPrefix}`, standalone: true, imports: [NgClass, NgStyle, NgTemplateOutlet, XLinkComponent, XButtonComponent, XOutletDirective, XDropdownComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #slider class=\"x-slider\" [ngClass]=\"classMap\">\r\n  @if (autoShowArrow && showArrow) {\r\n    <x-link\r\n      [disabled]=\"offset === 0\"\r\n      class=\"x-slider-arrow-left\"\r\n      icon=\"fto-chevron-left\"\r\n      (click)=\"scrollPrev()\"\r\n    ></x-link>\r\n  }\r\n  <div class=\"x-slider-scroll\" #sliderScroll [ngClass]=\"scrollClassMap\">\r\n    <ul #sliderNodes [style.transform]=\"transform\">\r\n      @for (node of nodes; track node.id; let i = $index) {\r\n        <li [class.x-slider-activated]=\"getActivated(i)\" [class.x-slider-disabled]=\"node.disabled\" [title]=\"node.label\">\r\n          <x-link\r\n            (click)=\"nodeClick($event, node, i)\"\r\n            (mouseenter)=\"onEnter($event, node, i)\"\r\n            (mouseleave)=\"onLeave(node)\"\r\n            [ngClass]=\"nodeClassMap\"\r\n            [href]=\"showAnchor ? '#' + node.id : ''\"\r\n            [preventDefault]=\"showAnchor\"\r\n          >\r\n            <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n            @if (!nodeTpl) {\r\n              <ng-container *xOutlet=\"node.label\">{{ node.label }}</ng-container>\r\n            }\r\n          </x-link>\r\n        </li>\r\n      }\r\n      <li class=\"x-slider-highlight\" [class.x-slider-highlight-animated]=\"animated\" [ngStyle]=\"highlightBox\"></li>\r\n    </ul>\r\n  </div>\r\n  @if (autoShowArrow && showArrow) {\r\n    <x-link\r\n      [disabled]=\"offset === maxOffset\"\r\n      class=\"x-slider-arrow-right\"\r\n      icon=\"fto-chevron-right\"\r\n      (click)=\"scrollNext()\"\r\n    ></x-link>\r\n  }\r\n  @if (showExpand && showArrow && layout === 'row') {\r\n    <x-dropdown\r\n      class=\"x-slider-all\"\r\n      [data]=\"nodes\"\r\n      trigger=\"click\"\r\n      [(activatedId)]=\"activatedId\"\r\n      (nodeClick)=\"dropdownClick($event)\"\r\n      [portalMaxHeight]=\"expandMaxHeight\"\r\n    >\r\n      <x-button icon=\"fto-list\" onlyIcon [size]=\"size\"> </x-button>\r\n    </x-dropdown>\r\n  }\r\n</div>\r\n", styles: [".x-slider{margin:0;padding:0;position:relative;display:flex;align-items:center;height:100%}.x-slider-scroll{overflow:hidden;flex:1;display:inline-flex}.x-slider-scroll.x-justify-start{justify-content:flex-start}.x-slider-scroll.x-justify-center{justify-content:center}.x-slider-scroll.x-justify-end{justify-content:flex-end}.x-slider-scroll.x-justify-space-between{justify-content:space-between}.x-slider-scroll.x-justify-space-around{justify-content:space-around}.x-slider-scroll ul,.x-slider-scroll li{margin:0;padding:0;list-style:none}.x-slider-scroll>ul{display:inline-flex;align-items:center;position:relative;transition:transform var(--x-animation-duration-base)}.x-slider-scroll>ul>li{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:2}.x-slider-scroll>ul>li x-link{flex:1}.x-slider-scroll>ul>li x-link.x-justify-start{justify-content:flex-start}.x-slider-scroll>ul>li x-link.x-justify-center{justify-content:center}.x-slider-scroll>ul>li x-link.x-justify-end{justify-content:flex-end}.x-slider-scroll>ul>li x-link.x-justify-space-between{justify-content:space-between}.x-slider-scroll>ul>li x-link.x-justify-space-around{justify-content:space-around}.x-slider-scroll>ul>li x-link.x-size-big{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-slider-scroll>ul>li x-link.x-size-large{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-slider-scroll>ul>li x-link.x-size-medium{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-slider-scroll>ul>li x-link.x-size-small{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-slider-scroll>ul>li x-link.x-size-mini{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-slider-scroll>ul>li.x-slider-highlight{position:absolute;left:0;top:0;z-index:1;width:0;height:0;border-radius:var(--x-border-radius);background-color:#0000000d;border:.0625rem solid var(--x-border)}.x-slider-scroll>ul>li.x-slider-highlight-animated{transition:width var(--x-animation-duration-base),left var(--x-animation-duration-base),height var(--x-animation-duration-base),top var(--x-animation-duration-base)}.x-slider-activated{color:var(--x-primary)}.x-slider-disabled{color:var(--x-text-400)!important;cursor:not-allowed!important}.x-slider-disabled .x-link{cursor:not-allowed!important}.x-slider-disabled .x-link:hover{color:var(--x-text-400)!important}.x-slider-arrow-left,.x-slider-arrow-right{height:1.675rem;line-height:1.675rem}.x-slider-arrow-left>x-icon,.x-slider-arrow-right>x-icon{margin-right:0}.x-slider-arrow-left .x-link,.x-slider-arrow-right .x-link{padding:.5rem}.x-slider-show-arrow>.x-slider-scroll{justify-content:start!important}.x-slider-row>.x-slider-scroll>ul{flex-direction:row}.x-slider-column{display:inline-flex;flex-direction:column}.x-slider-column>.x-slider-scroll{display:inline-block}.x-slider-column>.x-slider-scroll>ul{flex-direction:column}.x-slider-column>.x-slider-scroll>ul>li{display:flex;width:100%}.x-slider-column>.x-slider-arrow-left,.x-slider-column>.x-slider-arrow-right{transform:rotate(90deg)}\n"] }]
-        }], propDecorators: { sliderScroll: [{
-                type: ViewChild,
-                args: ['sliderScroll']
-            }], sliderNodes: [{
-                type: ViewChild,
-                args: ['sliderNodes']
-            }] } });
+            args: [{ selector: `${XSliderPrefix}`, standalone: true, imports: [NgClass, NgStyle, NgTemplateOutlet, XLinkComponent, XButtonComponent, XOutletDirective, XDropdownComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #slider class=\"x-slider\" [ngClass]=\"classMap()\">\r\n  @if (autoShowArrow() && showArrow()) {\r\n    <x-link\r\n      [disabled]=\"offset() === 0\"\r\n      class=\"x-slider-arrow-left\"\r\n      icon=\"fto-chevron-left\"\r\n      (click)=\"scrollPrev()\"\r\n    ></x-link>\r\n  }\r\n  <div class=\"x-slider-scroll\" #sliderScroll [ngClass]=\"scrollClassMap()\">\r\n    <ul #sliderNodes [style.transform]=\"transform()\">\r\n      @for (node of data(); track node.id; let i = $index) {\r\n        <li [class.x-slider-activated]=\"getActivated(i)\" [class.x-slider-disabled]=\"node.disabled\" [title]=\"node.label\">\r\n          <x-link\r\n            (click)=\"nodeClick($event, node, i)\"\r\n            (mouseenter)=\"onEnter($event, node, i)\"\r\n            (mouseleave)=\"onLeave(node)\"\r\n            [ngClass]=\"nodeClassMap()\"\r\n            [href]=\"showAnchor() ? '#' + node.id : ''\"\r\n            [preventDefault]=\"showAnchor()\"\r\n          >\r\n            <ng-container *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node }\"></ng-container>\r\n            @if (!nodeTpl()) {\r\n              <ng-container *xOutlet=\"node.label\">{{ node.label }}</ng-container>\r\n            }\r\n          </x-link>\r\n        </li>\r\n      }\r\n      <li class=\"x-slider-highlight\" [class.x-slider-highlight-animated]=\"animated()\" [ngStyle]=\"highlightBox()\"></li>\r\n    </ul>\r\n  </div>\r\n  @if (autoShowArrow() && showArrow()) {\r\n    <x-link\r\n      [disabled]=\"offset() === maxOffset()\"\r\n      class=\"x-slider-arrow-right\"\r\n      icon=\"fto-chevron-right\"\r\n      (click)=\"scrollNext()\"\r\n    ></x-link>\r\n  }\r\n  @if (showExpand() && showArrow() && layout() === 'row') {\r\n    <x-dropdown\r\n      class=\"x-slider-all\"\r\n      [data]=\"data()\"\r\n      trigger=\"click\"\r\n      [(activatedId)]=\"activatedId\"\r\n      (nodeClick)=\"dropdownClick($event)\"\r\n      [portalMaxHeight]=\"expandMaxHeight()\"\r\n    >\r\n      <x-button icon=\"fto-list\" onlyIcon flat plain [size]=\"size()\"> </x-button>\r\n    </x-dropdown>\r\n  }\r\n</div>\r\n", styles: [".x-slider{margin:0;padding:0;position:relative;display:flex;align-items:center;height:100%}.x-slider-scroll{overflow:hidden;flex:1;display:inline-flex}.x-slider-scroll.x-justify-start{justify-content:flex-start}.x-slider-scroll.x-justify-center{justify-content:center}.x-slider-scroll.x-justify-end{justify-content:flex-end}.x-slider-scroll.x-justify-space-between{justify-content:space-between}.x-slider-scroll.x-justify-space-around{justify-content:space-around}.x-slider-scroll ul,.x-slider-scroll li{margin:0;padding:0;list-style:none}.x-slider-scroll>ul{display:inline-flex;align-items:center;position:relative;transition:transform var(--x-animation-duration-base)}.x-slider-scroll>ul>li{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:2}.x-slider-scroll>ul>li x-link{flex:1}.x-slider-scroll>ul>li x-link.x-justify-start{justify-content:flex-start}.x-slider-scroll>ul>li x-link.x-justify-center{justify-content:center}.x-slider-scroll>ul>li x-link.x-justify-end{justify-content:flex-end}.x-slider-scroll>ul>li x-link.x-justify-space-between{justify-content:space-between}.x-slider-scroll>ul>li x-link.x-justify-space-around{justify-content:space-around}.x-slider-scroll>ul>li x-link.x-size-big{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-slider-scroll>ul>li x-link.x-size-large{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-slider-scroll>ul>li x-link.x-size-medium{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-slider-scroll>ul>li x-link.x-size-small{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-slider-scroll>ul>li x-link.x-size-mini{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-slider-scroll>ul>li.x-slider-highlight{position:absolute;left:0;top:0;z-index:1;width:0;height:0;border-radius:var(--x-border-small-radius);background-color:var(--x-background);box-shadow:0 .0625rem .1875rem .0625rem #0000000d}.x-slider-scroll>ul>li.x-slider-highlight-animated{transition:width var(--x-animation-duration-base),left var(--x-animation-duration-base),height var(--x-animation-duration-base),top var(--x-animation-duration-base)}.x-slider:not(.x-slider-show-arrow)>.x-slider-scroll>ul{background-color:var(--x-background-a200);border-radius:var(--x-border-radius);padding:.25rem}.x-slider-activated{color:var(--x-primary)}.x-slider-disabled{color:var(--x-text-400)!important;cursor:not-allowed!important}.x-slider-disabled .x-link{cursor:not-allowed!important}.x-slider-disabled .x-link:hover{color:var(--x-text-400)!important}.x-slider-arrow-left,.x-slider-arrow-right{height:1.675rem;line-height:1.675rem}.x-slider-arrow-left>x-icon,.x-slider-arrow-right>x-icon{margin-right:0}.x-slider-arrow-left .x-link,.x-slider-arrow-right .x-link{padding:.5rem}.x-slider-show-arrow{background-color:var(--x-background-a200);border-radius:var(--x-border-radius);padding:0 .25rem}.x-slider-show-arrow>.x-slider-scroll{justify-content:start!important;padding:.25rem 0}.x-slider-row>.x-slider-scroll>ul{flex-direction:row}.x-slider-column{display:inline-flex;flex-direction:column}.x-slider-column>.x-slider-scroll{display:inline-block}.x-slider-column>.x-slider-scroll>ul{flex-direction:column}.x-slider-column>.x-slider-scroll>ul>li{display:flex;width:100%}.x-slider-column>.x-slider-arrow-left,.x-slider-column>.x-slider-arrow-right{transform:rotate(90deg)}\n"] }]
+        }] });
 
 class XSliderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XSliderModule, imports: [XSliderComponent], exports: [XSliderComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XSliderModule, imports: [XSliderComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XSliderModule, imports: [XSliderComponent], exports: [XSliderComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XSliderModule, imports: [XSliderComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],