@ng-nest/ui 14.0.3 → 14.0.6

package/fesm2020/ng-nest-ui-tabs.mjs

@@ -2,13 +2,14 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i1 from '@ng-nest/ui/core';
-import { XProperty, XInputNumber, XInputBoolean, XWithConfig, XIsChange, XIsEmpty, XSetData } from '@ng-nest/ui/core';
-import { Subject } from 'rxjs';
+import { XProperty, XInputNumber, XInputBoolean, XWithConfig, XIsChange, XResize, XIsEmpty, XSetData } from '@ng-nest/ui/core';
+import { Subject, takeUntil, distinctUntilChanged } from 'rxjs';
 import * as i3 from '@ng-nest/ui/slider';
 import { XSliderProperty, XSliderComponent, XSliderModule } from '@ng-nest/ui/slider';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { XIconModule } from '@ng-nest/ui/icon';
+import { XButtonModule } from '@ng-nest/ui/button';
 
 /**
  * Tabs
@@ -61,7 +62,7 @@ class XTabsProperty extends XProperty {
     }
 }
 /** @nocollapse */ XTabsProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTabsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTabsProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTabsProperty, selector: "ng-component", inputs: { data: "data", justify: "justify", type: "type", layout: "layout", activatedIndex: "activatedIndex", animated: "animated", nodeTpl: "nodeTpl", size: "size", nodeJustify: "nodeJustify", sliderHidden: "sliderHidden" }, outputs: { indexChange: "indexChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ XTabsProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTabsProperty, selector: "ng-component", inputs: { data: "data", justify: "justify", type: "type", layout: "layout", activatedIndex: "activatedIndex", animated: "animated", nodeTpl: "nodeTpl", size: "size", nodeJustify: "nodeJustify", sliderHidden: "sliderHidden", actionTpl: "actionTpl", showExpand: "showExpand", expandMaxHeight: "expandMaxHeight" }, outputs: { indexChange: "indexChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XInputNumber()
 ], XTabsProperty.prototype, "activatedIndex", void 0);
@@ -74,6 +75,13 @@ __decorate([
 __decorate([
     XInputBoolean()
 ], XTabsProperty.prototype, "sliderHidden", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, false),
+    XInputBoolean()
+], XTabsProperty.prototype, "showExpand", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, '15rem')
+], XTabsProperty.prototype, "expandMaxHeight", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTabsProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
@@ -97,6 +105,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], sliderHidden: [{
                 type: Input
+            }], actionTpl: [{
+                type: Input
+            }], showExpand: [{
+                type: Input
+            }], expandMaxHeight: [{
+                type: Input
             }], indexChange: [{
                 type: Output
             }] } });
@@ -161,13 +175,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class XTabsComponent extends XTabsProperty {
-    constructor(cdr, configService) {
+    constructor(cdr, configService, renderer) {
         super();
         this.cdr = cdr;
         this.configService = configService;
+        this.renderer = renderer;
         this.sliderOption = new XSliderProperty();
         this.tabs = [];
         this._unSubject = new Subject();
+        this._tabsContentChange = new Subject();
     }
     get activeIndex() {
         return Number(this.activatedIndex);
@@ -176,6 +192,8 @@ class XTabsComponent extends XTabsProperty {
         this.setClassMap();
         this.setSliderOption();
         this.setNodeJustify();
+        this.setSubject();
+        this.setData();
     }
     ngOnChanges(changes) {
         const { data, layout, justify, activatedIndex } = changes;
@@ -187,9 +205,30 @@ class XTabsComponent extends XTabsProperty {
     ngOnDestroy() {
         this._unSubject.next();
         this._unSubject.unsubscribe();
+        this._resizeObserver?.disconnect();
+    }
+    ngAfterContentChecked() {
+        if (this.tabs.length !== this.listTabs.length) {
+            this._tabsContentChange.next(`${this.tabs.length}-${this.listTabs.length}`);
+        }
     }
     ngAfterViewInit() {
-        this.setData();
+        this.setSliderWidth();
+    }
+    setSliderWidth() {
+        if (this.slider && this.actionsRef) {
+            XResize(this.actionsRef.nativeElement)
+                .pipe(takeUntil(this._unSubject))
+                .subscribe((x) => {
+                this._resizeObserver = x.resizeObserver;
+                this.renderer.setStyle(this.slider.elementRef.nativeElement, 'width', `calc(100% - ${this.actionsRef.nativeElement.clientWidth}px)`);
+            });
+        }
+    }
+    setSubject() {
+        this._tabsContentChange.pipe(distinctUntilChanged(), takeUntil(this._unSubject)).subscribe(() => {
+            this.setData();
+        });
     }
     activatedChange(index) {
         this.activatedIndex = index;
@@ -224,25 +263,27 @@ class XTabsComponent extends XTabsProperty {
         this.nodeJustify = this.nodeJustify ? this.nodeJustify : this.layout === 'left' ? 'end' : this.layout === 'right' ? 'start' : 'center';
     }
     setData() {
+        let data = [];
         if (XIsEmpty(this.data)) {
             if (this.listTabs && this.listTabs.length > 0) {
                 let _data = [];
-                this.listTabs.forEach((x, index) => {
-                    _data = [..._data, { id: index + 1, label: x.label, disabled: x.disabled }];
+                this.listTabs.forEach((x) => {
+                    _data = [..._data, { id: x.label, label: x.label, disabled: x.disabled }];
                 });
-                this.data = _data;
+                data = _data;
             }
             else {
+                data = [];
                 return;
             }
         }
-        XSetData(this.data, this._unSubject).subscribe((x) => {
+        XSetData(data, this._unSubject).subscribe((x) => {
             this.tabs = x;
-            if (!this.sliderHidden) {
+            if (!this.sliderHidden && !this.actionTpl) {
                 this.sliderHidden = this.tabs.length <= 1;
             }
             this.sliderOption.data = this.tabs;
-            this.setFirstAndLast();
+            this.setActivatedIndex();
             this.cdr.detectChanges();
         });
     }
@@ -254,30 +295,33 @@ class XTabsComponent extends XTabsProperty {
         this.classMap[`${XTabsPrefix}-is-last`] = this.activatedIndex === this.tabs?.length - 1;
     }
 }
-/** @nocollapse */ XTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTabsComponent, selector: "x-tabs", queries: [{ propertyName: "listTabs", predicate: XTabComponent }], viewQueries: [{ propertyName: "slider", first: true, predicate: XSliderComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-tabs\" [ngClass]=\"classMap\">\r\n  <div #list class=\"x-tabs-list\" *ngIf=\"!sliderHidden\">\r\n    <x-slider\r\n      #slider\r\n      [animated]=\"animated && type !== 'tag'\"\r\n      [justify]=\"justify\"\r\n      [nodeJustify]=\"nodeJustify\"\r\n      [data]=\"sliderOption.data\"\r\n      [layout]=\"sliderOption.layout\"\r\n      [size]=\"size\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [activatedIndex]=\"sliderOption.activatedIndex\"\r\n      (indexChange)=\"activatedChange($event)\"\r\n    ></x-slider>\r\n  </div>\r\n  <div #content class=\"x-tabs-contents\" [class.x-tabs-contents-animated]=\"animated && (layout === 'top' || layout === 'bottom')\">\r\n    <x-tab-content\r\n      *ngFor=\"let tab of listTabs; index as i\"\r\n      [active]=\"activeIndex == i\"\r\n      [content]=\"tab.content\"\r\n      [class.x-tab-content-unactivated]=\"activeIndex != i\"\r\n      [class.x-tab-content-disabled]=\"tab.disabled\"\r\n      [style.transform]=\"'translate(' + (-activeIndex || 0) * 100 + '%, 0px)'\"\r\n    >\r\n    </x-tab-content>\r\n  </div>\r\n</div>\r\n", styles: [".x-tabs{margin:0;padding:0;display:flex;overflow:hidden}.x-tabs-contents{flex:1;display:flex;overflow:hidden;flex-direction:row}.x-tabs-contents>.x-tab-content{flex-shrink:0;width:100%;opacity:1;height:-moz-fit-content;height:fit-content}.x-tabs-contents>.x-tab-content.x-tab-content-unactivated{transition:height 0s,opacity 0s;height:0;opacity:0}.x-tabs-contents-animated>.x-tab-content{transition:transform var(--x-animation-duration-slow) cubic-bezier(.645,.045,.355,1),height 0s,opacity var(--x-animation-duration-slow)}.x-tabs-contents-animated>.x-tab-content.x-tab-content-unactivated{display:inherit}.x-tabs-list{display:flex}.x-tabs-top{flex-direction:column}.x-tabs-right{flex-direction:row-reverse}.x-tabs-bottom{flex-direction:column-reverse}.x-tabs-left{flex-direction:row}.x-tabs-block.x-tabs-top>.x-tabs-list{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-top>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-top>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.x-tabs-block.x-tabs-right>.x-tabs-list{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-right>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-right>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.x-tabs-block.x-tabs-bottom>.x-tabs-list{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-bottom>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-bottom>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.x-tabs-block.x-tabs-left>.x-tabs-list{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-left>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-left>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.x-tabs-tag.x-tabs-top .x-tabs-list{border-bottom:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;bottom:0;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-left-radius:.125rem}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-top-right-radius:.125rem}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-left:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-bottom-color:var(--x-background)}.x-tabs-tag.x-tabs-right .x-tabs-list{border-left:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;left:0;height:100%;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-right-radius:.125rem}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-right-radius:.125rem}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-top:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-left-color:var(--x-background)}.x-tabs-tag.x-tabs-bottom .x-tabs-list{border-bottom:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;top:0;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-bottom-left-radius:.125rem}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-right-radius:.125rem}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-left:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-top-color:var(--x-background)}.x-tabs-tag.x-tabs-left .x-tabs-list{border-right:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;right:0;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-left-radius:.125rem}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-left-radius:.125rem}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-top:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-right-color:var(--x-background)}.x-tabs-card.x-tabs-top{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-top .x-tabs-list{border-bottom:none}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:after{top:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:before{bottom:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-bottom-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-arrow-right{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-left:none}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-right:none}.x-tabs-card.x-tabs-right{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-right .x-tabs-list{border-left:none}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;height:100%;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:after{left:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:before{right:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-left-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-left-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-arrow-right{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-top:none}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-bottom:none}.x-tabs-card.x-tabs-bottom{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-bottom .x-tabs-list{border-top:none}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;width:100%;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:after{top:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:before{bottom:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-top-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-top-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-arrow-right{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-left:none}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-right:none}.x-tabs-card.x-tabs-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-left .x-tabs-list{border-right:none}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:after{left:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:before{right:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-right-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-arrow-right{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-top:none}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XSliderComponent, selector: "x-slider" }, { kind: "component", type: XTabContentComponent, selector: "x-tab-content", inputs: ["content", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTabsComponent, selector: "x-tabs", queries: [{ propertyName: "listTabs", predicate: XTabComponent }], viewQueries: [{ propertyName: "slider", first: true, predicate: XSliderComponent, descendants: true }, { propertyName: "actionsRef", first: true, predicate: ["actionsRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-tabs\" [ngClass]=\"classMap\">\r\n  <div #list class=\"x-tabs-list\" *ngIf=\"!sliderHidden\">\r\n    <x-slider\r\n      #slider\r\n      [animated]=\"animated && type !== 'tag'\"\r\n      [justify]=\"justify\"\r\n      [nodeJustify]=\"nodeJustify\"\r\n      [data]=\"sliderOption.data\"\r\n      [layout]=\"sliderOption.layout\"\r\n      [size]=\"size\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [activatedIndex]=\"sliderOption.activatedIndex\"\r\n      [showExpand]=\"showExpand\"\r\n      [expandMaxHeight]=\"expandMaxHeight\"\r\n      (indexChange)=\"activatedChange($event)\"\r\n    ></x-slider>\r\n    <div #actionsRef class=\"x-tabs-actions\" *ngIf=\"actionTpl\">\r\n      <ng-container *ngTemplateOutlet=\"actionTpl\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div #content class=\"x-tabs-contents\" [class.x-tabs-contents-animated]=\"animated && (layout === 'top' || layout === 'bottom')\">\r\n    <x-tab-content\r\n      *ngFor=\"let tab of listTabs; index as i\"\r\n      [active]=\"activeIndex == i\"\r\n      [content]=\"tab.content\"\r\n      [class.x-tab-content-unactivated]=\"activeIndex != i\"\r\n      [class.x-tab-content-disabled]=\"tab.disabled\"\r\n      [style.transform]=\"'translate(' + (-activeIndex || 0) * 100 + '%, 0px)'\"\r\n    >\r\n    </x-tab-content>\r\n  </div>\r\n</div>\r\n", styles: [".x-tabs{margin:0;padding:0;display:flex;overflow:hidden}.x-tabs-contents{flex:1;display:flex;overflow:hidden;flex-direction:row}.x-tabs-contents>.x-tab-content{flex-shrink:0;width:100%;opacity:1;height:-moz-fit-content;height:fit-content}.x-tabs-contents>.x-tab-content.x-tab-content-unactivated{transition:height 0s,opacity 0s;height:0;opacity:0}.x-tabs-contents-animated>.x-tab-content{transition:transform var(--x-animation-duration-slow) cubic-bezier(.645,.045,.355,1),height 0s,opacity var(--x-animation-duration-slow)}.x-tabs-contents-animated>.x-tab-content.x-tab-content-unactivated{display:inherit}.x-tabs-list{display:flex}.x-tabs-top{flex-direction:column}.x-tabs-right{flex-direction:row-reverse}.x-tabs-bottom{flex-direction:column-reverse}.x-tabs-left{flex-direction:row}.x-tabs-actions{display:flex;align-items:center}.x-tabs-card .x-tabs-actions{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag .x-tabs-actions{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-top>.x-tabs-list{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-top>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-top>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.x-tabs-block.x-tabs-right>.x-tabs-list{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-right>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-right>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.x-tabs-block.x-tabs-bottom>.x-tabs-list{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-bottom>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-bottom>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.x-tabs-block.x-tabs-left>.x-tabs-list{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-left>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-left>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.x-tabs-tag.x-tabs-top .x-tabs-list{border-bottom:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;bottom:0;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-left-radius:.125rem}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-top-right-radius:.125rem}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-left:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-bottom-color:var(--x-background)}.x-tabs-tag.x-tabs-right .x-tabs-list{border-left:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;left:0;height:100%;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-right-radius:.125rem}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-right-radius:.125rem}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-top:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-left-color:var(--x-background)}.x-tabs-tag.x-tabs-bottom .x-tabs-list{border-bottom:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;top:0;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-bottom-left-radius:.125rem}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-right-radius:.125rem}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-left:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-top-color:var(--x-background)}.x-tabs-tag.x-tabs-left .x-tabs-list{border-right:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;right:0;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-left-radius:.125rem}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-left-radius:.125rem}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-top:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-right-color:var(--x-background)}.x-tabs-card.x-tabs-top{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-top .x-tabs-list{border-bottom:none}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:after{top:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:before{bottom:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-bottom-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-arrow-right{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-left:none}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-right:none}.x-tabs-card.x-tabs-right{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-right .x-tabs-list{border-left:none}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;height:100%;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:after{left:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:before{right:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-left-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-left-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-arrow-right{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-top:none}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-bottom:none}.x-tabs-card.x-tabs-bottom{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-bottom .x-tabs-list{border-top:none}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;width:100%;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:after{top:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:before{bottom:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-top-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-top-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-arrow-right{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-left:none}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-right:none}.x-tabs-card.x-tabs-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-left .x-tabs-list{border-right:none}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:after{left:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:before{right:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-right-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-arrow-right{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-top:none}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.XSliderComponent, selector: "x-slider" }, { kind: "component", type: XTabContentComponent, selector: "x-tab-content", inputs: ["content", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTabsPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-tabs\" [ngClass]=\"classMap\">\r\n  <div #list class=\"x-tabs-list\" *ngIf=\"!sliderHidden\">\r\n    <x-slider\r\n      #slider\r\n      [animated]=\"animated && type !== 'tag'\"\r\n      [justify]=\"justify\"\r\n      [nodeJustify]=\"nodeJustify\"\r\n      [data]=\"sliderOption.data\"\r\n      [layout]=\"sliderOption.layout\"\r\n      [size]=\"size\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [activatedIndex]=\"sliderOption.activatedIndex\"\r\n      (indexChange)=\"activatedChange($event)\"\r\n    ></x-slider>\r\n  </div>\r\n  <div #content class=\"x-tabs-contents\" [class.x-tabs-contents-animated]=\"animated && (layout === 'top' || layout === 'bottom')\">\r\n    <x-tab-content\r\n      *ngFor=\"let tab of listTabs; index as i\"\r\n      [active]=\"activeIndex == i\"\r\n      [content]=\"tab.content\"\r\n      [class.x-tab-content-unactivated]=\"activeIndex != i\"\r\n      [class.x-tab-content-disabled]=\"tab.disabled\"\r\n      [style.transform]=\"'translate(' + (-activeIndex || 0) * 100 + '%, 0px)'\"\r\n    >\r\n    </x-tab-content>\r\n  </div>\r\n</div>\r\n", styles: [".x-tabs{margin:0;padding:0;display:flex;overflow:hidden}.x-tabs-contents{flex:1;display:flex;overflow:hidden;flex-direction:row}.x-tabs-contents>.x-tab-content{flex-shrink:0;width:100%;opacity:1;height:-moz-fit-content;height:fit-content}.x-tabs-contents>.x-tab-content.x-tab-content-unactivated{transition:height 0s,opacity 0s;height:0;opacity:0}.x-tabs-contents-animated>.x-tab-content{transition:transform var(--x-animation-duration-slow) cubic-bezier(.645,.045,.355,1),height 0s,opacity var(--x-animation-duration-slow)}.x-tabs-contents-animated>.x-tab-content.x-tab-content-unactivated{display:inherit}.x-tabs-list{display:flex}.x-tabs-top{flex-direction:column}.x-tabs-right{flex-direction:row-reverse}.x-tabs-bottom{flex-direction:column-reverse}.x-tabs-left{flex-direction:row}.x-tabs-block.x-tabs-top>.x-tabs-list{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-top>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-top>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.x-tabs-block.x-tabs-right>.x-tabs-list{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-right>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-right>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.x-tabs-block.x-tabs-bottom>.x-tabs-list{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-bottom>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-bottom>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.x-tabs-block.x-tabs-left>.x-tabs-list{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-left>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-left>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.x-tabs-tag.x-tabs-top .x-tabs-list{border-bottom:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;bottom:0;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-left-radius:.125rem}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-top-right-radius:.125rem}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-left:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-bottom-color:var(--x-background)}.x-tabs-tag.x-tabs-right .x-tabs-list{border-left:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;left:0;height:100%;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-right-radius:.125rem}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-right-radius:.125rem}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-top:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-left-color:var(--x-background)}.x-tabs-tag.x-tabs-bottom .x-tabs-list{border-bottom:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;top:0;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-bottom-left-radius:.125rem}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-right-radius:.125rem}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-left:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-top-color:var(--x-background)}.x-tabs-tag.x-tabs-left .x-tabs-list{border-right:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;right:0;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-left-radius:.125rem}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-left-radius:.125rem}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-top:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-right-color:var(--x-background)}.x-tabs-card.x-tabs-top{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-top .x-tabs-list{border-bottom:none}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:after{top:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:before{bottom:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-bottom-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-arrow-right{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-left:none}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-right:none}.x-tabs-card.x-tabs-right{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-right .x-tabs-list{border-left:none}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;height:100%;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:after{left:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:before{right:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-left-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-left-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-arrow-right{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-top:none}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-bottom:none}.x-tabs-card.x-tabs-bottom{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-bottom .x-tabs-list{border-top:none}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;width:100%;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:after{top:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:before{bottom:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-top-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-top-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-arrow-right{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-left:none}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-right:none}.x-tabs-card.x-tabs-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-left .x-tabs-list{border-right:none}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:after{left:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:before{right:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-right-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-arrow-right{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-top:none}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-bottom:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { listTabs: [{
+            args: [{ selector: `${XTabsPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-tabs\" [ngClass]=\"classMap\">\r\n  <div #list class=\"x-tabs-list\" *ngIf=\"!sliderHidden\">\r\n    <x-slider\r\n      #slider\r\n      [animated]=\"animated && type !== 'tag'\"\r\n      [justify]=\"justify\"\r\n      [nodeJustify]=\"nodeJustify\"\r\n      [data]=\"sliderOption.data\"\r\n      [layout]=\"sliderOption.layout\"\r\n      [size]=\"size\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [activatedIndex]=\"sliderOption.activatedIndex\"\r\n      [showExpand]=\"showExpand\"\r\n      [expandMaxHeight]=\"expandMaxHeight\"\r\n      (indexChange)=\"activatedChange($event)\"\r\n    ></x-slider>\r\n    <div #actionsRef class=\"x-tabs-actions\" *ngIf=\"actionTpl\">\r\n      <ng-container *ngTemplateOutlet=\"actionTpl\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div #content class=\"x-tabs-contents\" [class.x-tabs-contents-animated]=\"animated && (layout === 'top' || layout === 'bottom')\">\r\n    <x-tab-content\r\n      *ngFor=\"let tab of listTabs; index as i\"\r\n      [active]=\"activeIndex == i\"\r\n      [content]=\"tab.content\"\r\n      [class.x-tab-content-unactivated]=\"activeIndex != i\"\r\n      [class.x-tab-content-disabled]=\"tab.disabled\"\r\n      [style.transform]=\"'translate(' + (-activeIndex || 0) * 100 + '%, 0px)'\"\r\n    >\r\n    </x-tab-content>\r\n  </div>\r\n</div>\r\n", styles: [".x-tabs{margin:0;padding:0;display:flex;overflow:hidden}.x-tabs-contents{flex:1;display:flex;overflow:hidden;flex-direction:row}.x-tabs-contents>.x-tab-content{flex-shrink:0;width:100%;opacity:1;height:-moz-fit-content;height:fit-content}.x-tabs-contents>.x-tab-content.x-tab-content-unactivated{transition:height 0s,opacity 0s;height:0;opacity:0}.x-tabs-contents-animated>.x-tab-content{transition:transform var(--x-animation-duration-slow) cubic-bezier(.645,.045,.355,1),height 0s,opacity var(--x-animation-duration-slow)}.x-tabs-contents-animated>.x-tab-content.x-tab-content-unactivated{display:inherit}.x-tabs-list{display:flex}.x-tabs-top{flex-direction:column}.x-tabs-right{flex-direction:row-reverse}.x-tabs-bottom{flex-direction:column-reverse}.x-tabs-left{flex-direction:row}.x-tabs-actions{display:flex;align-items:center}.x-tabs-card .x-tabs-actions{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag .x-tabs-actions{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-top>.x-tabs-list{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-top>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-top>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.x-tabs-block.x-tabs-right>.x-tabs-list{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-right>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-right>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.x-tabs-block.x-tabs-bottom>.x-tabs-list{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-bottom>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-bottom>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.x-tabs-block.x-tabs-left>.x-tabs-list{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-block.x-tabs-left>.x-tabs-list>x-slider{width:100%}.x-tabs-block.x-tabs-left>.x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.x-tabs-tag.x-tabs-top .x-tabs-list{border-bottom:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;bottom:0;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-left-radius:.125rem}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-top-right-radius:.125rem}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-left:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-bottom-color:var(--x-background)}.x-tabs-tag.x-tabs-right .x-tabs-list{border-left:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;left:0;height:100%;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-right-radius:.125rem}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-right-radius:.125rem}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-top:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-left-color:var(--x-background)}.x-tabs-tag.x-tabs-bottom .x-tabs-list{border-bottom:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;top:0;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-bottom-left-radius:.125rem}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-right-radius:.125rem}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-left:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-top-color:var(--x-background)}.x-tabs-tag.x-tabs-left .x-tabs-list{border-right:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider{width:100%}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider:before{content:\" \";position:absolute;right:0;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li{border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background)}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:first-child{border-top-left-radius:.125rem}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:nth-last-child(2){border-bottom-left-radius:.125rem}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li:not(:first-child){border-top:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{display:none}.x-tabs-tag.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-right-color:var(--x-background)}.x-tabs-card.x-tabs-top{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-top .x-tabs-list{border-bottom:none}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;width:100%;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:after{top:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll:before{bottom:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-bottom-color:var(--x-background)}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:0}.x-tabs-card.x-tabs-top .x-tabs-list>x-slider .x-slider-arrow-right{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-left:none}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-top.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-right:none}.x-tabs-card.x-tabs-right{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-right .x-tabs-list{border-left:none}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;height:100%;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:after{left:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll:before{right:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-left-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-left-color:var(--x-background)}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0}.x-tabs-card.x-tabs-right .x-tabs-list>x-slider .x-slider-arrow-right{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-top:none}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-right.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-bottom:none}.x-tabs-card.x-tabs-bottom{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-bottom .x-tabs-list{border-top:none}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;width:100%;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:after{top:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll:before{bottom:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-top-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-top-color:var(--x-background)}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:0}.x-tabs-card.x-tabs-bottom .x-tabs-list>x-slider .x-slider-arrow-right{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-left:none}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-bottom.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-right:none}.x-tabs-card.x-tabs-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:none;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tabs-card.x-tabs-left .x-tabs-list{border-right:none}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider{width:100%}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll{background-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:after,.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:before{content:\" \";position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:after{left:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll:before{right:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul{z-index:1}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right-color:var(--x-background);background-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-scroll>ul>li.x-slider-activated{border-right-color:var(--x-background)}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-arrow-left{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0}.x-tabs-card.x-tabs-left .x-tabs-list>x-slider .x-slider-arrow-right{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-top:none}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-first .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-start ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-center ul li.x-slider-highlight{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tabs-card.x-tabs-left.x-tabs-is-last .x-tabs-list>x-slider .x-slider-scroll.x-justify-end ul li.x-slider-highlight{border-bottom:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: i0.Renderer2 }]; }, propDecorators: { listTabs: [{
                 type: ContentChildren,
                 args: [XTabComponent]
             }], slider: [{
                 type: ViewChild,
                 args: [XSliderComponent, { static: false }]
+            }], actionsRef: [{
+                type: ViewChild,
+                args: ['actionsRef', { static: false }]
             }] } });
 
 class XTabsModule {
 }
 /** @nocollapse */ XTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ XTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: XTabsModule, declarations: [XTabsComponent, XTabContentComponent, XTabComponent, XTabsProperty, XTabProperty], imports: [CommonModule, XSliderModule, XIconModule], exports: [XTabsComponent, XTabContentComponent, XTabComponent] });
-/** @nocollapse */ XTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTabsModule, imports: [CommonModule, XSliderModule, XIconModule] });
+/** @nocollapse */ XTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: XTabsModule, declarations: [XTabsComponent, XTabContentComponent, XTabComponent, XTabsProperty, XTabProperty], imports: [CommonModule, XSliderModule, XButtonModule, XIconModule], exports: [XTabsComponent, XTabContentComponent, XTabComponent] });
+/** @nocollapse */ XTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTabsModule, imports: [CommonModule, XSliderModule, XButtonModule, XIconModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [XTabsComponent, XTabContentComponent, XTabComponent, XTabsProperty, XTabProperty],
                     exports: [XTabsComponent, XTabContentComponent, XTabComponent],
-                    imports: [CommonModule, XSliderModule, XIconModule]
+                    imports: [CommonModule, XSliderModule, XButtonModule, XIconModule]
                 }]
         }] });
 

package/fesm2020/ng-nest-ui-tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-tabs.mjs","sources":["../../../../lib/ng-nest/ui/tabs/tabs.property.ts","../../../../lib/ng-nest/ui/tabs/tab.component.ts","../../../../lib/ng-nest/ui/tabs/tab.component.html","../../../../lib/ng-nest/ui/tabs/tab-content.component.ts","../../../../lib/ng-nest/ui/tabs/tab-content.component.html","../../../../lib/ng-nest/ui/tabs/tabs.component.ts","../../../../lib/ng-nest/ui/tabs/tabs.component.html","../../../../lib/ng-nest/ui/tabs/tabs.module.ts","../../../../lib/ng-nest/ui/tabs/ng-nest-ui-tabs.ts"],"sourcesContent":["import {\r\n  XData,\r\n  XJustify,\r\n  XProperty,\r\n  XInputBoolean,\r\n  XSize,\r\n  XIdentityProperty,\r\n  XTemplate,\r\n  XInputNumber,\r\n  XNumber,\r\n  XBoolean,\r\n  XWithConfig\r\n} from '@ng-nest/ui/core';\r\nimport { Input, TemplateRef, Output, EventEmitter, Component } from '@angular/core';\r\n\r\n/**\r\n * Tabs\r\n * @selector x-tabs\r\n * @decorator component\r\n */\r\nexport const XTabsPrefix = 'x-tabs';\r\nconst X_CONFIG_NAME = 'tabs';\r\n\r\n/**\r\n * Tabs Property\r\n */\r\n@Component({ template: '' })\r\nexport class XTabsProperty extends XProperty {\r\n  /**\r\n   * @zh_CN Data 数据\r\n   * @en_US Data\r\n   */\r\n  @Input() data: XData<XTabsNode> = [];\r\n  /**\r\n   * @zh_CN 对齐方式\r\n   * @en_US Alignment\r\n   */\r\n  @Input() justify: XJustify = 'start';\r\n  /**\r\n   * @zh_CN 样式\r\n   * @en_US Style\r\n   */\r\n  @Input() type: XTabsType = 'block';\r\n  /**\r\n   * @zh_CN 布局方式\r\n   * @en_US Layout\r\n   */\r\n  @Input() layout: XTabsLayout = 'top';\r\n  /**\r\n   * @zh_CN 激活的序号\r\n   * @en_US Activation number\r\n   */\r\n  @Input() @XInputNumber() activatedIndex: XNumber = 0;\r\n  /**\r\n   * @zh_CN 动画\r\n   * @en_US Animation\r\n   */\r\n  @Input() @XInputBoolean() animated: XBoolean = true;\r\n  /**\r\n   * @zh_CN 节点模板\r\n   * @en_US Node template\r\n   */\r\n  @Input() nodeTpl!: TemplateRef<any>;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  @Input() @XWithConfig<XSize>(X_CONFIG_NAME, 'medium') size?: XSize;\r\n  /**\r\n   * @zh_CN 节点排列方式\r\n   * @en_US Node arrangement\r\n   */\r\n  @Input() nodeJustify?: XJustify;\r\n  /**\r\n   * @zh_CN 隐藏标签栏\r\n   * @en_US Hide tab bar\r\n   */\r\n  @Input() @XInputBoolean() sliderHidden?: XBoolean;\r\n  /**\r\n   * @zh_CN 标签切换变化的事件\r\n   * @en_US Label switching event\r\n   */\r\n  @Output() indexChange = new EventEmitter<XActivatedTab>();\r\n}\r\n\r\n/**\r\n * @zh_CN Tabs 数据对象\r\n * @en_US Tabs data object\r\n */\r\nexport interface XTabsNode extends XIdentityProperty {\r\n  /**\r\n   * @zh_CN 禁用节点\r\n   * @en_US Node disabled\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * @zh_CN 自定义属性\r\n   * @en_US Custom properties\r\n   */\r\n  [property: string]: any;\r\n}\r\n\r\n/**\r\n * @zh_CN 激活的tab\r\n * @en_US Active tab\r\n */\r\nexport interface XActivatedTab {\r\n  activatedIndex?: number;\r\n  activatedTab?: XTabsNode;\r\n}\r\n\r\n/**\r\n * @zh_CN 样式类型\r\n * @en_US Style type\r\n */\r\nexport type XTabsType = 'block' | 'tag' | 'card';\r\n\r\n/**\r\n * @zh_CN 布局方式\r\n * @en_US Layout\r\n */\r\nexport type XTabsLayout = 'top' | 'right' | 'bottom' | 'left';\r\n\r\n/**\r\n * Tab\r\n * @selector x-tab\r\n * @decorator component\r\n */\r\nexport const XTabPrefix = 'x-tab';\r\n\r\n/**\r\n * Tab Property\r\n */\r\n@Component({ template: '' })\r\nexport class XTabProperty {\r\n  /**\r\n   * @zh_CN 标签名称，支持自定义模板\r\n   * @en_US Label name, support custom template\r\n   */\r\n  @Input() label?: XTemplate;\r\n  /**\r\n   * @zh_CN 禁用\r\n   * @en_US Disabeld\r\n   */\r\n  @Input() @XInputBoolean() disabled?: XBoolean;\r\n}\r\n","import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';\r\nimport { XTabPrefix, XTabProperty } from './tabs.property';\r\nimport { XConfigService } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n  selector: `${XTabPrefix}`,\r\n  templateUrl: './tab.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTabComponent extends XTabProperty {\r\n  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<void>;\r\n\r\n  constructor(public configService: XConfigService) {\r\n    super();\r\n  }\r\n}\r\n","<ng-template>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  Input,\r\n  TemplateRef,\r\n  ViewEncapsulation,\r\n  ElementRef,\r\n  Renderer2\r\n} from '@angular/core';\r\nimport { XBoolean } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n  selector: 'x-tab-content',\r\n  preserveWhitespaces: false,\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './tab-content.component.html'\r\n})\r\nexport class XTabContentComponent {\r\n  @Input() content!: TemplateRef<void>;\r\n  @Input() active: XBoolean = false;\r\n  constructor(private elementRef: ElementRef, private renderer: Renderer2) {\r\n    this.renderer.addClass(this.elementRef.nativeElement, 'x-tab-content');\r\n  }\r\n}\r\n","<ng-container>\r\n  <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\r\n</ng-container>\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ChangeDetectionStrategy,\r\n  OnChanges,\r\n  SimpleChanges,\r\n  ChangeDetectorRef,\r\n  ContentChildren,\r\n  ViewChild,\r\n  ViewEncapsulation,\r\n  SimpleChange,\r\n  QueryList\r\n} from '@angular/core';\r\nimport { XTabsPrefix, XTabsNode, XTabsProperty } from './tabs.property';\r\nimport { XIsChange, XSetData, XIsEmpty, XConfigService } from '@ng-nest/ui/core';\r\nimport { Subject } from 'rxjs';\r\nimport { XSliderComponent, XSliderProperty } from '@ng-nest/ui/slider';\r\nimport { XTabComponent } from './tab.component';\r\n\r\n@Component({\r\n  selector: `${XTabsPrefix}`,\r\n  templateUrl: './tabs.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTabsComponent extends XTabsProperty implements OnInit, OnChanges {\r\n  sliderOption = new XSliderProperty();\r\n  tabs: XTabsNode[] = [];\r\n  private _unSubject = new Subject<void>();\r\n\r\n  get activeIndex() {\r\n    return Number(this.activatedIndex);\r\n  }\r\n\r\n  @ContentChildren(XTabComponent) listTabs!: QueryList<XTabComponent>;\r\n\r\n  @ViewChild(XSliderComponent, { static: false }) slider!: XSliderComponent;\r\n\r\n  constructor(private cdr: ChangeDetectorRef, public configService: XConfigService) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.setClassMap();\r\n    this.setSliderOption();\r\n    this.setNodeJustify();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    const { data, layout, justify, activatedIndex } = changes;\r\n    XIsChange(data) && this.setData();\r\n    XIsChange(layout) && this.setLayout(layout);\r\n    XIsChange(justify) && this.cdr.detectChanges();\r\n    XIsChange(activatedIndex) && this.setActivatedIndex();\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this._unSubject.next();\r\n    this._unSubject.unsubscribe();\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.setData();\r\n  }\r\n\r\n  activatedChange(index: number) {\r\n    this.activatedIndex = index;\r\n    this.indexChange.emit({\r\n      activatedIndex: index,\r\n      activatedTab: this.tabs[index]\r\n    });\r\n    this.setFirstAndLast();\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  setActivatedIndex() {\r\n    if (typeof this.sliderOption === 'undefined') {\r\n      this.sliderOption = new XSliderProperty();\r\n    }\r\n    this.sliderOption.activatedIndex = this.activatedIndex;\r\n    this.setFirstAndLast();\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private setClassMap() {\r\n    this.classMap = {\r\n      [`${XTabsPrefix}-${this.layout}`]: !XIsEmpty(this.layout),\r\n      [`${XTabsPrefix}-${this.type}`]: !XIsEmpty(this.type)\r\n    };\r\n  }\r\n\r\n  private setLayout(layout: SimpleChange) {\r\n    this.classMap[`${XTabsPrefix}-${layout.previousValue}`] = false;\r\n    this.classMap[`${XTabsPrefix}-${layout.currentValue}`] = true;\r\n    this.setSliderOption();\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private setNodeJustify() {\r\n    this.nodeJustify = this.nodeJustify ? this.nodeJustify : this.layout === 'left' ? 'end' : this.layout === 'right' ? 'start' : 'center';\r\n  }\r\n\r\n  private setData() {\r\n    if (XIsEmpty(this.data)) {\r\n      if (this.listTabs && this.listTabs.length > 0) {\r\n        let _data: any[] = [];\r\n        this.listTabs.forEach((x, index) => {\r\n          _data = [...(_data as XTabsNode[]), { id: index + 1, label: x.label, disabled: x.disabled }];\r\n        });\r\n        this.data = _data;\r\n      } else {\r\n        return;\r\n      }\r\n    }\r\n    XSetData<XTabsNode>(this.data, this._unSubject).subscribe((x) => {\r\n      this.tabs = x;\r\n      if (!this.sliderHidden) {\r\n        this.sliderHidden = this.tabs.length <= 1;\r\n      }\r\n      this.sliderOption.data = this.tabs;\r\n      this.setFirstAndLast();\r\n      this.cdr.detectChanges();\r\n    });\r\n  }\r\n\r\n  private setSliderOption() {\r\n    this.sliderOption.layout = ['top', 'bottom'].indexOf(this.layout) !== -1 ? 'row' : 'column';\r\n  }\r\n\r\n  private setFirstAndLast() {\r\n    this.classMap[`${XTabsPrefix}-is-first`] = this.activatedIndex === 0;\r\n    this.classMap[`${XTabsPrefix}-is-last`] = this.activatedIndex === this.tabs?.length - 1;\r\n  }\r\n}\r\n","<div class=\"x-tabs\" [ngClass]=\"classMap\">\r\n  <div #list class=\"x-tabs-list\" *ngIf=\"!sliderHidden\">\r\n    <x-slider\r\n      #slider\r\n      [animated]=\"animated && type !== 'tag'\"\r\n      [justify]=\"justify\"\r\n      [nodeJustify]=\"nodeJustify\"\r\n      [data]=\"sliderOption.data\"\r\n      [layout]=\"sliderOption.layout\"\r\n      [size]=\"size\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [activatedIndex]=\"sliderOption.activatedIndex\"\r\n      (indexChange)=\"activatedChange($event)\"\r\n    ></x-slider>\r\n  </div>\r\n  <div #content class=\"x-tabs-contents\" [class.x-tabs-contents-animated]=\"animated && (layout === 'top' || layout === 'bottom')\">\r\n    <x-tab-content\r\n      *ngFor=\"let tab of listTabs; index as i\"\r\n      [active]=\"activeIndex == i\"\r\n      [content]=\"tab.content\"\r\n      [class.x-tab-content-unactivated]=\"activeIndex != i\"\r\n      [class.x-tab-content-disabled]=\"tab.disabled\"\r\n      [style.transform]=\"'translate(' + (-activeIndex || 0) * 100 + '%, 0px)'\"\r\n    >\r\n    </x-tab-content>\r\n  </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { XTabsComponent } from './tabs.component';\r\nimport { XIconModule } from '@ng-nest/ui/icon';\r\nimport { XSliderModule } from '@ng-nest/ui/slider';\r\nimport { XTabComponent } from './tab.component';\r\nimport { XTabContentComponent } from './tab-content.component';\r\nimport { XTabsProperty, XTabProperty } from './tabs.property';\r\n\r\n@NgModule({\r\n  declarations: [XTabsComponent, XTabContentComponent, XTabComponent, XTabsProperty, XTabProperty],\r\n  exports: [XTabsComponent, XTabContentComponent, XTabComponent],\r\n  imports: [CommonModule, XSliderModule, XIconModule]\r\n})\r\nexport class XTabsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1","i4.XTabContentComponent"],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-tabs.mjs","sources":["../../../../lib/ng-nest/ui/tabs/tabs.property.ts","../../../../lib/ng-nest/ui/tabs/tab.component.ts","../../../../lib/ng-nest/ui/tabs/tab.component.html","../../../../lib/ng-nest/ui/tabs/tab-content.component.ts","../../../../lib/ng-nest/ui/tabs/tab-content.component.html","../../../../lib/ng-nest/ui/tabs/tabs.component.ts","../../../../lib/ng-nest/ui/tabs/tabs.component.html","../../../../lib/ng-nest/ui/tabs/tabs.module.ts","../../../../lib/ng-nest/ui/tabs/ng-nest-ui-tabs.ts"],"sourcesContent":["import {\r\n  XData,\r\n  XJustify,\r\n  XProperty,\r\n  XInputBoolean,\r\n  XSize,\r\n  XIdentityProperty,\r\n  XTemplate,\r\n  XInputNumber,\r\n  XNumber,\r\n  XBoolean,\r\n  XWithConfig\r\n} from '@ng-nest/ui/core';\r\nimport { Input, TemplateRef, Output, EventEmitter, Component } from '@angular/core';\r\n\r\n/**\r\n * Tabs\r\n * @selector x-tabs\r\n * @decorator component\r\n */\r\nexport const XTabsPrefix = 'x-tabs';\r\nconst X_CONFIG_NAME = 'tabs';\r\n\r\n/**\r\n * Tabs Property\r\n */\r\n@Component({ template: '' })\r\nexport class XTabsProperty extends XProperty {\r\n  /**\r\n   * @zh_CN Data 数据\r\n   * @en_US Data\r\n   */\r\n  @Input() data: XData<XTabsNode> = [];\r\n  /**\r\n   * @zh_CN 对齐方式\r\n   * @en_US Alignment\r\n   */\r\n  @Input() justify: XJustify = 'start';\r\n  /**\r\n   * @zh_CN 样式\r\n   * @en_US Style\r\n   */\r\n  @Input() type: XTabsType = 'block';\r\n  /**\r\n   * @zh_CN 布局方式\r\n   * @en_US Layout\r\n   */\r\n  @Input() layout: XTabsLayout = 'top';\r\n  /**\r\n   * @zh_CN 激活的序号\r\n   * @en_US Activation number\r\n   */\r\n  @Input() @XInputNumber() activatedIndex: XNumber = 0;\r\n  /**\r\n   * @zh_CN 动画\r\n   * @en_US Animation\r\n   */\r\n  @Input() @XInputBoolean() animated: XBoolean = true;\r\n  /**\r\n   * @zh_CN 节点模板\r\n   * @en_US Node template\r\n   */\r\n  @Input() nodeTpl!: TemplateRef<any>;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  @Input() @XWithConfig<XSize>(X_CONFIG_NAME, 'medium') size?: XSize;\r\n  /**\r\n   * @zh_CN 节点排列方式\r\n   * @en_US Node arrangement\r\n   */\r\n  @Input() nodeJustify?: XJustify;\r\n  /**\r\n   * @zh_CN 隐藏标签栏，只有一个标签页时候默认隐藏（存在自定义操作模版的时候不会）\r\n   * @en_US Hide the label bar, there is only one tab, the default hidden\r\n   */\r\n  @Input() @XInputBoolean() sliderHidden?: XBoolean;\r\n  /**\r\n   * @zh_CN 标签栏上的自定义操作模版\r\n   * @en_US Custom template on the label bar\r\n   */\r\n  @Input() actionTpl?: TemplateRef<void>;\r\n  /**\r\n   * @zh_CN 标签页显示不下的时候显示展开所有的按钮，布局为 top 、bottom 的时候生效\r\n   * @en_US When the node is not displayed, display all the buttons, and the arrangement is effective when the arrangement is row\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME, false) @XInputBoolean() showExpand?: XBoolean;\r\n  /**\r\n   * @zh_CN 展开所有弹框的最大高度\r\n   * @en_US Expand the maximum height of all bomb frames\r\n   */\r\n  @Input() @XWithConfig<string>(X_CONFIG_NAME, '15rem') expandMaxHeight?: string;\r\n  /**\r\n   * @zh_CN 标签切换变化的事件\r\n   * @en_US Label switching event\r\n   */\r\n  @Output() indexChange = new EventEmitter<XActivatedTab>();\r\n}\r\n\r\n/**\r\n * @zh_CN Tabs 数据对象\r\n * @en_US Tabs data object\r\n */\r\nexport interface XTabsNode extends XIdentityProperty {\r\n  /**\r\n   * @zh_CN 禁用节点\r\n   * @en_US Node disabled\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * @zh_CN 自定义属性\r\n   * @en_US Custom properties\r\n   */\r\n  [property: string]: any;\r\n}\r\n\r\n/**\r\n * @zh_CN 激活的tab\r\n * @en_US Active tab\r\n */\r\nexport interface XActivatedTab {\r\n  activatedIndex?: number;\r\n  activatedTab?: XTabsNode;\r\n}\r\n\r\n/**\r\n * @zh_CN 样式类型\r\n * @en_US Style type\r\n */\r\nexport type XTabsType = 'block' | 'tag' | 'card';\r\n\r\n/**\r\n * @zh_CN 布局方式\r\n * @en_US Layout\r\n */\r\nexport type XTabsLayout = 'top' | 'right' | 'bottom' | 'left';\r\n\r\n/**\r\n * Tab\r\n * @selector x-tab\r\n * @decorator component\r\n */\r\nexport const XTabPrefix = 'x-tab';\r\n\r\n/**\r\n * Tab Property\r\n */\r\n@Component({ template: '' })\r\nexport class XTabProperty {\r\n  /**\r\n   * @zh_CN 标签名称，支持自定义模板\r\n   * @en_US Label name, support custom template\r\n   */\r\n  @Input() label?: XTemplate;\r\n  /**\r\n   * @zh_CN 禁用\r\n   * @en_US Disabeld\r\n   */\r\n  @Input() @XInputBoolean() disabled?: XBoolean;\r\n}\r\n","import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';\r\nimport { XTabPrefix, XTabProperty } from './tabs.property';\r\nimport { XConfigService } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n  selector: `${XTabPrefix}`,\r\n  templateUrl: './tab.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTabComponent extends XTabProperty {\r\n  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<void>;\r\n\r\n  constructor(public configService: XConfigService) {\r\n    super();\r\n  }\r\n}\r\n","<ng-template>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  Input,\r\n  TemplateRef,\r\n  ViewEncapsulation,\r\n  ElementRef,\r\n  Renderer2\r\n} from '@angular/core';\r\nimport { XBoolean } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n  selector: 'x-tab-content',\r\n  preserveWhitespaces: false,\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './tab-content.component.html'\r\n})\r\nexport class XTabContentComponent {\r\n  @Input() content!: TemplateRef<void>;\r\n  @Input() active: XBoolean = false;\r\n  constructor(private elementRef: ElementRef, private renderer: Renderer2) {\r\n    this.renderer.addClass(this.elementRef.nativeElement, 'x-tab-content');\r\n  }\r\n}\r\n","<ng-container>\r\n  <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\r\n</ng-container>\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ChangeDetectionStrategy,\r\n  OnChanges,\r\n  SimpleChanges,\r\n  ChangeDetectorRef,\r\n  ContentChildren,\r\n  ViewChild,\r\n  ViewEncapsulation,\r\n  SimpleChange,\r\n  QueryList,\r\n  ElementRef,\r\n  Renderer2\r\n} from '@angular/core';\r\nimport { XTabsPrefix, XTabsNode, XTabsProperty } from './tabs.property';\r\nimport { XIsChange, XSetData, XIsEmpty, XConfigService, XResize } from '@ng-nest/ui/core';\r\nimport { Subject, takeUntil, distinctUntilChanged } from 'rxjs';\r\nimport { XSliderComponent, XSliderProperty } from '@ng-nest/ui/slider';\r\nimport { XTabComponent } from './tab.component';\r\n\r\n@Component({\r\n  selector: `${XTabsPrefix}`,\r\n  templateUrl: './tabs.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTabsComponent extends XTabsProperty implements OnInit, OnChanges {\r\n  sliderOption = new XSliderProperty();\r\n  tabs: XTabsNode[] = [];\r\n  private _unSubject = new Subject<void>();\r\n  private _tabsContentChange = new Subject<string>();\r\n  private _resizeObserver!: ResizeObserver;\r\n\r\n  get activeIndex() {\r\n    return Number(this.activatedIndex);\r\n  }\r\n\r\n  @ContentChildren(XTabComponent) listTabs!: QueryList<XTabComponent>;\r\n\r\n  @ViewChild(XSliderComponent, { static: false }) slider!: XSliderComponent;\r\n  @ViewChild('actionsRef', { static: false }) actionsRef!: ElementRef;\r\n\r\n  constructor(private cdr: ChangeDetectorRef, public configService: XConfigService, public renderer: Renderer2) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.setClassMap();\r\n    this.setSliderOption();\r\n    this.setNodeJustify();\r\n    this.setSubject();\r\n    this.setData();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    const { data, layout, justify, activatedIndex } = changes;\r\n    XIsChange(data) && this.setData();\r\n    XIsChange(layout) && this.setLayout(layout);\r\n    XIsChange(justify) && this.cdr.detectChanges();\r\n    XIsChange(activatedIndex) && this.setActivatedIndex();\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this._unSubject.next();\r\n    this._unSubject.unsubscribe();\r\n    this._resizeObserver?.disconnect();\r\n  }\r\n\r\n  ngAfterContentChecked(): void {\r\n    if (this.tabs.length !== this.listTabs.length) {\r\n      this._tabsContentChange.next(`${this.tabs.length}-${this.listTabs.length}`);\r\n    }\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.setSliderWidth();\r\n  }\r\n\r\n  setSliderWidth() {\r\n    if (this.slider && this.actionsRef) {\r\n      XResize(this.actionsRef.nativeElement)\r\n        .pipe(takeUntil(this._unSubject))\r\n        .subscribe((x) => {\r\n          this._resizeObserver = x.resizeObserver;\r\n          this.renderer.setStyle(\r\n            this.slider.elementRef.nativeElement,\r\n            'width',\r\n            `calc(100% - ${this.actionsRef.nativeElement.clientWidth}px)`\r\n          );\r\n        });\r\n    }\r\n  }\r\n\r\n  setSubject() {\r\n    this._tabsContentChange.pipe(distinctUntilChanged(), takeUntil(this._unSubject)).subscribe(() => {\r\n      this.setData();\r\n    });\r\n  }\r\n\r\n  activatedChange(index: number) {\r\n    this.activatedIndex = index;\r\n    this.indexChange.emit({\r\n      activatedIndex: index,\r\n      activatedTab: this.tabs[index]\r\n    });\r\n    this.setFirstAndLast();\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  setActivatedIndex() {\r\n    if (typeof this.sliderOption === 'undefined') {\r\n      this.sliderOption = new XSliderProperty();\r\n    }\r\n    this.sliderOption.activatedIndex = this.activatedIndex;\r\n    this.setFirstAndLast();\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private setClassMap() {\r\n    this.classMap = {\r\n      [`${XTabsPrefix}-${this.layout}`]: !XIsEmpty(this.layout),\r\n      [`${XTabsPrefix}-${this.type}`]: !XIsEmpty(this.type)\r\n    };\r\n  }\r\n\r\n  private setLayout(layout: SimpleChange) {\r\n    this.classMap[`${XTabsPrefix}-${layout.previousValue}`] = false;\r\n    this.classMap[`${XTabsPrefix}-${layout.currentValue}`] = true;\r\n    this.setSliderOption();\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private setNodeJustify() {\r\n    this.nodeJustify = this.nodeJustify ? this.nodeJustify : this.layout === 'left' ? 'end' : this.layout === 'right' ? 'start' : 'center';\r\n  }\r\n\r\n  private setData() {\r\n    let data = [];\r\n    if (XIsEmpty(this.data)) {\r\n      if (this.listTabs && this.listTabs.length > 0) {\r\n        let _data: any[] = [];\r\n        this.listTabs.forEach((x) => {\r\n          _data = [...(_data as XTabsNode[]), { id: x.label, label: x.label, disabled: x.disabled }];\r\n        });\r\n        data = _data;\r\n      } else {\r\n        data = [];\r\n        return;\r\n      }\r\n    }\r\n    XSetData<XTabsNode>(data, this._unSubject).subscribe((x) => {\r\n      this.tabs = x;\r\n      if (!this.sliderHidden && !this.actionTpl) {\r\n        this.sliderHidden = this.tabs.length <= 1;\r\n      }\r\n      this.sliderOption.data = this.tabs;\r\n      this.setActivatedIndex();\r\n      this.cdr.detectChanges();\r\n    });\r\n  }\r\n\r\n  private setSliderOption() {\r\n    this.sliderOption.layout = ['top', 'bottom'].indexOf(this.layout) !== -1 ? 'row' : 'column';\r\n  }\r\n\r\n  private setFirstAndLast() {\r\n    this.classMap[`${XTabsPrefix}-is-first`] = this.activatedIndex === 0;\r\n    this.classMap[`${XTabsPrefix}-is-last`] = this.activatedIndex === this.tabs?.length - 1;\r\n  }\r\n}\r\n","<div class=\"x-tabs\" [ngClass]=\"classMap\">\r\n  <div #list class=\"x-tabs-list\" *ngIf=\"!sliderHidden\">\r\n    <x-slider\r\n      #slider\r\n      [animated]=\"animated && type !== 'tag'\"\r\n      [justify]=\"justify\"\r\n      [nodeJustify]=\"nodeJustify\"\r\n      [data]=\"sliderOption.data\"\r\n      [layout]=\"sliderOption.layout\"\r\n      [size]=\"size\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [activatedIndex]=\"sliderOption.activatedIndex\"\r\n      [showExpand]=\"showExpand\"\r\n      [expandMaxHeight]=\"expandMaxHeight\"\r\n      (indexChange)=\"activatedChange($event)\"\r\n    ></x-slider>\r\n    <div #actionsRef class=\"x-tabs-actions\" *ngIf=\"actionTpl\">\r\n      <ng-container *ngTemplateOutlet=\"actionTpl\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div #content class=\"x-tabs-contents\" [class.x-tabs-contents-animated]=\"animated && (layout === 'top' || layout === 'bottom')\">\r\n    <x-tab-content\r\n      *ngFor=\"let tab of listTabs; index as i\"\r\n      [active]=\"activeIndex == i\"\r\n      [content]=\"tab.content\"\r\n      [class.x-tab-content-unactivated]=\"activeIndex != i\"\r\n      [class.x-tab-content-disabled]=\"tab.disabled\"\r\n      [style.transform]=\"'translate(' + (-activeIndex || 0) * 100 + '%, 0px)'\"\r\n    >\r\n    </x-tab-content>\r\n  </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { XTabsComponent } from './tabs.component';\r\nimport { XIconModule } from '@ng-nest/ui/icon';\r\nimport { XSliderModule } from '@ng-nest/ui/slider';\r\nimport { XTabComponent } from './tab.component';\r\nimport { XTabContentComponent } from './tab-content.component';\r\nimport { XTabsProperty, XTabProperty } from './tabs.property';\r\nimport { XButtonModule } from '@ng-nest/ui/button';\r\n\r\n@NgModule({\r\n  declarations: [XTabsComponent, XTabContentComponent, XTabComponent, XTabsProperty, XTabProperty],\r\n  exports: [XTabsComponent, XTabContentComponent, XTabComponent],\r\n  imports: [CommonModule, XSliderModule, XButtonModule, XIconModule]\r\n})\r\nexport class XTabsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1","i4.XTabContentComponent"],"mappings":"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"}

package/fesm2020/ng-nest-ui-timeline.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i1 from '@ng-nest/ui/core';
-import { XProperty, XDataConvert, XWithConfig, XIsChange, XSetData } from '@ng-nest/ui/core';
+import { XProperty, XDataConvert, XWithConfig, XIsChange, XClearClass, XSetData } from '@ng-nest/ui/core';
 import { Subject } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -36,13 +36,16 @@ class XTimelineProperty extends XProperty {
     }
 }
 /** @nocollapse */ XTimelineProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTimelineProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTimelineProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTimelineProperty, selector: "ng-component", inputs: { data: "data", type: "type", size: "size", wrapper: "wrapper" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ XTimelineProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTimelineProperty, selector: "ng-component", inputs: { data: "data", type: "type", size: "size", wrapper: "wrapper", mode: "mode" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XDataConvert()
 ], XTimelineProperty.prototype, "data", void 0);
 __decorate([
     XWithConfig(X_CONFIG_NAME, 'medium')
 ], XTimelineProperty.prototype, "size", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 'left')
+], XTimelineProperty.prototype, "mode", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTimelineProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
@@ -54,6 +57,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], wrapper: [{
                 type: Input
+            }], mode: [{
+                type: Input
             }] } });
 
 class XTimelineComponent extends XTimelineProperty {
@@ -68,13 +73,19 @@ class XTimelineComponent extends XTimelineProperty {
     }
     ngOnInit() { }
     ngOnChanges(changes) {
-        const { data } = changes;
+        const { data, mode } = changes;
         XIsChange(data) && this.setData();
+        XIsChange(mode) && this.setClassMap();
     }
     ngOnDestroy() {
         this._unSubject.next();
         this._unSubject.unsubscribe();
     }
+    setClassMap() {
+        XClearClass(this.classMap);
+        this.classMap[`${XTimelinePrefix}-${this.mode}`] = this.mode ? true : false;
+        this.cdr.detectChanges();
+    }
     trackByNode(_index, item) {
         return item.id;
     }
@@ -103,10 +114,10 @@ class XTimelineComponent extends XTimelineProperty {
     }
 }
 /** @nocollapse */ XTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTimelineComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTimelineComponent, selector: "x-timeline", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #timeline class=\"x-timeline\" [ngClass]=\"classMap\">\r\n  <ul>\r\n    <li *ngFor=\"let node of nodes; trackBy: trackByNode\" [class.x-timeline-loading]=\"node.loading\">\r\n      <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n      <div\r\n        class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{ node.size ? 'x-timeline-' + node.size : '' }}\"\r\n        [style.background-color]=\"node.color\"\r\n      >\r\n        <x-icon *ngIf=\"node.icon && !node.loading\" [type]=\"node.icon\"></x-icon>\r\n        <x-icon *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n      </div>\r\n      <div class=\"x-timeline-wrapper\">\r\n        <ng-container *xOutlet=\"wrapper; context: { $node: node }\">\r\n          <div class=\"x-timeline-label\">\r\n            <x-link *ngIf=\"node.label\">{{ node.label }}</x-link>\r\n            <span class=\"x-timeline-time\">{{ node.time | xTimeAgo }}</span>\r\n          </div>\r\n          <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n        </ng-container>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0;display:block}.x-timeline>ul{padding-left:.625rem}.x-timeline>ul>li{padding-bottom:1rem;position:relative}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.375rem;height:1.375rem;border:.0625rem solid var(--x-background-100);left:-.625rem}.x-timeline-wrapper{position:relative;padding-left:1.625rem}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:.75rem;color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big{width:2.175rem;height:2.175rem;left:-1.025rem;font-size:1.55rem}.x-timeline-large{width:1.875rem;height:1.875rem;left:-.875rem;font-size:1.25rem}.x-timeline-medium{width:1.675rem;height:1.675rem;left:-.775rem;font-size:1.05rem}.x-timeline-small{width:1.5rem;height:1.5rem;left:-.6875rem;font-size:.875rem}.x-timeline-mini{width:1.375rem;height:1.375rem;left:-.625rem;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XIconComponent, selector: "x-icon" }, { kind: "component", type: i4.XLinkComponent, selector: "x-link" }, { kind: "directive", type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "pipe", type: i6.XTimeAgoPipe, name: "xTimeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTimelineComponent, selector: "x-timeline", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #timeline class=\"x-timeline\" [ngClass]=\"classMap\">\r\n  <ul>\r\n    <li *ngFor=\"let node of nodes; trackBy: trackByNode\" [class.x-timeline-loading]=\"node.loading\">\r\n      <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n      <div\r\n        class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{ node.size ? 'x-timeline-' + node.size : '' }}\"\r\n        [style.background-color]=\"node.color\"\r\n      >\r\n        <x-icon *ngIf=\"node.icon && !node.loading\" [type]=\"node.icon\"></x-icon>\r\n        <x-icon *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n      </div>\r\n      <div class=\"x-timeline-wrapper\">\r\n        <ng-container *xOutlet=\"wrapper; context: { $node: node }\">\r\n          <div class=\"x-timeline-label\">\r\n            <x-link *ngIf=\"node.label\">{{ node.label }}</x-link>\r\n            <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{ node.time | xTimeAgo }}</span>\r\n          </div>\r\n          <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n        </ng-container>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0;display:block}.x-timeline>ul{padding-left:.625rem}.x-timeline>ul>li{padding-bottom:1rem;position:relative}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.375rem;height:1.375rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:.75rem;color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-left .x-timeline-icon{left:-.625rem}.x-timeline-left .x-timeline-wrapper{padding-left:1.625rem}.x-timeline-right .x-timeline-icon{right:-.625rem}.x-timeline-right .x-timeline-wrapper{padding-right:1.625rem;text-align:right}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon{left:50%;margin-left:-.6875rem}.x-timeline-alternate .x-timeline-tail{left:50%;margin-left:-.0625rem}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;padding-right:1.625rem;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(even) .x-timeline-wrapper{left:calc(50% - .6875rem);width:50%;padding-left:1.625rem}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big{width:2.175rem;height:2.175rem;left:-1.025rem;font-size:1.55rem}.x-timeline-large{width:1.875rem;height:1.875rem;left:-.875rem;font-size:1.25rem}.x-timeline-medium{width:1.675rem;height:1.675rem;left:-.775rem;font-size:1.05rem}.x-timeline-small{width:1.5rem;height:1.5rem;left:-.6875rem;font-size:.875rem}.x-timeline-mini{width:1.375rem;height:1.375rem;left:-.625rem;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XIconComponent, selector: "x-icon" }, { kind: "component", type: i4.XLinkComponent, selector: "x-link" }, { kind: "directive", type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i6.XTimeAgoPipe, name: "xTimeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTimelinePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #timeline class=\"x-timeline\" [ngClass]=\"classMap\">\r\n  <ul>\r\n    <li *ngFor=\"let node of nodes; trackBy: trackByNode\" [class.x-timeline-loading]=\"node.loading\">\r\n      <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n      <div\r\n        class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{ node.size ? 'x-timeline-' + node.size : '' }}\"\r\n        [style.background-color]=\"node.color\"\r\n      >\r\n        <x-icon *ngIf=\"node.icon && !node.loading\" [type]=\"node.icon\"></x-icon>\r\n        <x-icon *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n      </div>\r\n      <div class=\"x-timeline-wrapper\">\r\n        <ng-container *xOutlet=\"wrapper; context: { $node: node }\">\r\n          <div class=\"x-timeline-label\">\r\n            <x-link *ngIf=\"node.label\">{{ node.label }}</x-link>\r\n            <span class=\"x-timeline-time\">{{ node.time | xTimeAgo }}</span>\r\n          </div>\r\n          <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n        </ng-container>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0;display:block}.x-timeline>ul{padding-left:.625rem}.x-timeline>ul>li{padding-bottom:1rem;position:relative}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.375rem;height:1.375rem;border:.0625rem solid var(--x-background-100);left:-.625rem}.x-timeline-wrapper{position:relative;padding-left:1.625rem}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:.75rem;color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big{width:2.175rem;height:2.175rem;left:-1.025rem;font-size:1.55rem}.x-timeline-large{width:1.875rem;height:1.875rem;left:-.875rem;font-size:1.25rem}.x-timeline-medium{width:1.675rem;height:1.675rem;left:-.775rem;font-size:1.05rem}.x-timeline-small{width:1.5rem;height:1.5rem;left:-.6875rem;font-size:.875rem}.x-timeline-mini{width:1.375rem;height:1.375rem;left:-.625rem;font-size:.75rem}\n"] }]
+            args: [{ selector: `${XTimelinePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #timeline class=\"x-timeline\" [ngClass]=\"classMap\">\r\n  <ul>\r\n    <li *ngFor=\"let node of nodes; trackBy: trackByNode\" [class.x-timeline-loading]=\"node.loading\">\r\n      <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n      <div\r\n        class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{ node.size ? 'x-timeline-' + node.size : '' }}\"\r\n        [style.background-color]=\"node.color\"\r\n      >\r\n        <x-icon *ngIf=\"node.icon && !node.loading\" [type]=\"node.icon\"></x-icon>\r\n        <x-icon *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n      </div>\r\n      <div class=\"x-timeline-wrapper\">\r\n        <ng-container *xOutlet=\"wrapper; context: { $node: node }\">\r\n          <div class=\"x-timeline-label\">\r\n            <x-link *ngIf=\"node.label\">{{ node.label }}</x-link>\r\n            <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{ node.time | xTimeAgo }}</span>\r\n          </div>\r\n          <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n        </ng-container>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0;display:block}.x-timeline>ul{padding-left:.625rem}.x-timeline>ul>li{padding-bottom:1rem;position:relative}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.375rem;height:1.375rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:.75rem;color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-left .x-timeline-icon{left:-.625rem}.x-timeline-left .x-timeline-wrapper{padding-left:1.625rem}.x-timeline-right .x-timeline-icon{right:-.625rem}.x-timeline-right .x-timeline-wrapper{padding-right:1.625rem;text-align:right}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon{left:50%;margin-left:-.6875rem}.x-timeline-alternate .x-timeline-tail{left:50%;margin-left:-.0625rem}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;padding-right:1.625rem;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(even) .x-timeline-wrapper{left:calc(50% - .6875rem);width:50%;padding-left:1.625rem}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big{width:2.175rem;height:2.175rem;left:-1.025rem;font-size:1.55rem}.x-timeline-large{width:1.875rem;height:1.875rem;left:-.875rem;font-size:1.25rem}.x-timeline-medium{width:1.675rem;height:1.675rem;left:-.775rem;font-size:1.05rem}.x-timeline-small{width:1.5rem;height:1.5rem;left:-.6875rem;font-size:.875rem}.x-timeline-mini{width:1.375rem;height:1.375rem;left:-.625rem;font-size:.75rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; } });
 
 class XTimelineModule {