@ng-nest/ui 16.0.8 → 16.0.10

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

@@ -1,18 +1,21 @@
 import * as i4 from '@ng-nest/ui/tooltip';
 import { XTooltipDirective, XTooltipModule } from '@ng-nest/ui/tooltip';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostBinding, ViewChildren, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i1 from '@ng-nest/ui/core';
-import { XInputNumber, XInputBoolean, XIsEmpty, XResize, XClearClass, XIsUndefined } from '@ng-nest/ui/core';
+import { XInputNumber, XInputBoolean, XIsEmpty, XIsNull, XIsUndefined, XIsNumber, XIsArray, XResize, XClearClass } from '@ng-nest/ui/core';
 import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
+import * as i3 from '@angular/cdk/drag-drop';
+import { CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/cdk/drag-drop';
-import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i5 from '@ng-nest/ui/outlet';
+import { XOutletModule } from '@ng-nest/ui/outlet';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { XDragModule } from '@ng-nest/ui/drag';
 
 /**
  * SliderSelect
@@ -46,6 +49,11 @@ class XSliderSelectProperty extends XControlValueAccessor {
          * @en_US Display Tooltip prompts
          */
         this.showTooltip = true;
+        /**
+         * @zh_CN 刻度标记，key 为实际数字，在 [min,max] 内，可通过 style 设置样式
+         * @en_US Scale marking, key is the actual number, in [min, max], you can set style through style
+         */
+        this.marks = [];
         /**
          * @zh_CN 开始拖动的事件
          * @en_US Start drag event
@@ -63,7 +71,7 @@ class XSliderSelectProperty extends XControlValueAccessor {
         this.dragEndEmit = new EventEmitter();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XSliderSelectProperty, selector: "x-slider-select-property", inputs: { min: "min", max: "max", step: "step", precision: "precision", showTooltip: "showTooltip", reverse: "reverse" }, outputs: { dragStartEmit: "dragStartEmit", dragMoveEmit: "dragMoveEmit", dragEndEmit: "dragEndEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XSliderSelectProperty, selector: "x-slider-select-property", inputs: { min: "min", max: "max", step: "step", precision: "precision", showTooltip: "showTooltip", reverse: "reverse", vertical: "vertical", range: "range", customButton: "customButton", marks: "marks" }, outputs: { dragStartEmit: "dragStartEmit", dragMoveEmit: "dragMoveEmit", dragEndEmit: "dragEndEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputNumber()
@@ -83,6 +91,12 @@ __decorate([
 __decorate([
     XInputBoolean()
 ], XSliderSelectProperty.prototype, "reverse", void 0);
+__decorate([
+    XInputBoolean()
+], XSliderSelectProperty.prototype, "vertical", void 0);
+__decorate([
+    XInputBoolean()
+], XSliderSelectProperty.prototype, "range", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XSliderSelectPrefix}-property`, template: '' }]
@@ -98,6 +112,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImpor
                 type: Input
             }], reverse: [{
                 type: Input
+            }], vertical: [{
+                type: Input
+            }], range: [{
+                type: Input
+            }], customButton: [{
+                type: Input
+            }], marks: [{
+                type: Input
             }], dragStartEmit: [{
                 type: Output
             }], dragMoveEmit: [{
@@ -107,13 +129,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImpor
             }] } });
 
 class XSliderSelectComponent extends XSliderSelectProperty {
+    get getVertical() {
+        return this.vertical;
+    }
     get requiredIsEmpty() {
         return this.validator && this.required && (XIsEmpty(this.value) || this.value === 0);
     }
     writeValue(value) {
-        if (value === null)
-            value = 0;
+        if (XIsNull(value) || XIsUndefined(value)) {
+            if (this.range) {
+                value = [Number(this.min), Number(this.min)];
+            }
+            else {
+                value = Number(this.min);
+            }
+        }
         this.value = value;
+        this.isNumber = XIsNumber(this.value) && !XIsArray(this.value);
+        this.isArray = XIsArray(this.value);
         this.setLeft();
         this.setDisplayValue();
     }
@@ -123,16 +156,26 @@ class XSliderSelectComponent extends XSliderSelectProperty {
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.configService = configService;
-        this.offset = 0;
-        this.visible = false;
-        this.manual = false;
-        this.value = 0;
-        this.displayValue = '0';
+        this.value = Number(this.min);
+        this.startOffset = 0;
+        this.startVisible = false;
+        this.startManual = false;
+        this.startDisplayValue = '0';
+        this.showStartTooltip = true;
+        this.endOffset = 0;
+        this.endVisible = false;
+        this.endManual = false;
+        this.endDisplayValue = '0';
+        this.showEndTooltip = true;
+        this.markList = [];
         this._unSubject = new Subject();
+        this.isNumber = true;
+        this.isArray = false;
     }
     ngOnInit() {
         this.setFlex(this.sliderSelect.nativeElement, this.renderer, this.justify, this.align, this.direction);
         this.setPrecision();
+        this.setMarks();
         this.setClassMap();
     }
     ngAfterViewInit() {
@@ -144,6 +187,12 @@ class XSliderSelectComponent extends XSliderSelectProperty {
             this.setDisplayValue();
             this.cdr.detectChanges();
         });
+        if (this.tooltips.length > 0) {
+            this.tooltipStart = this.tooltips.first;
+        }
+        if (this.tooltips.length > 1) {
+            this.tooltipEnd = this.tooltips.last;
+        }
     }
     ngOnDestroy() {
         this._unSubject.next();
@@ -151,8 +200,22 @@ class XSliderSelectComponent extends XSliderSelectProperty {
         this._resizeObserver?.disconnect();
     }
     change() {
-        const val = Number(((Number(this.max) - Number(this.min)) * Number(this.offset)) / 100 + Number(this.min)).toFixed(Number(this.precision));
-        this.value = parseFloat(val);
+        const getVal = (offset) => {
+            return parseFloat(Number(((Number(this.max) - Number(this.min)) * Number(offset)) / 100 + Number(this.min)).toFixed(Number(this.precision)));
+        };
+        const startVal = getVal(this.startOffset);
+        if (this.isNumber) {
+            this.value = startVal;
+        }
+        else {
+            const endVal = getVal(this.endOffset);
+            if (endVal < startVal) {
+                this.value = [endVal, startVal];
+            }
+            else {
+                this.value = [startVal, endVal];
+            }
+        }
         this.setDisplayValue();
         if (this.onChange)
             this.onChange(this.value);
@@ -161,15 +224,47 @@ class XSliderSelectComponent extends XSliderSelectProperty {
         XClearClass(this.labelMap);
         this.labelMap[`x-text-align-${this.labelAlign}`] = this.labelAlign ? true : false;
     }
+    getOffset(val) {
+        return Math.round(((val + (this.reverse ? -Number(this.min) : Number(this.min))) * 100) /
+            (Number(this.max) - Number(this.min)));
+    }
     setLeft() {
-        this.offset = Math.round(((this.value + (this.reverse ? Number(this.min) : -Number(this.min))) * 100) / (Number(this.max) - Number(this.min)));
-        const start = this.offset;
+        let startVal = 0, endVal = 0;
+        if (this.isNumber) {
+            startVal = this.value;
+        }
+        else if (XIsArray(this.value) && this.value.length > 1) {
+            startVal = this.value[0];
+            endVal = this.value[1];
+            this.endOffset = this.getOffset(endVal);
+            const end = this.endOffset;
+            this.end = end;
+        }
+        this.startOffset = this.getOffset(startVal);
+        const start = this.startOffset;
         this.start = start;
         this.setDrag();
         this.cdr.detectChanges();
     }
     setDisplayValue() {
-        this.displayValue = Number(this.value).toFixed(Number(this.precision));
+        const displayVal = (val) => {
+            return Number(val).toFixed(Number(this.precision));
+        };
+        if (this.isNumber) {
+            this.startDisplayValue = displayVal(this.value);
+        }
+        else {
+            if (XIsArray(this.value) && this.value.length > 1) {
+                if (this.startOffset > this.endOffset) {
+                    this.startDisplayValue = displayVal(this.value[1]);
+                    this.endDisplayValue = displayVal(this.value[0]);
+                }
+                else {
+                    this.startDisplayValue = displayVal(this.value[0]);
+                    this.endDisplayValue = displayVal(this.value[1]);
+                }
+            }
+        }
         this.cdr.detectChanges();
     }
     setPrecision() {
@@ -184,98 +279,245 @@ class XSliderSelectComponent extends XSliderSelectProperty {
             }
         }
     }
-    onInnerClick(_$event) { }
-    started(drag) {
-        const start = this.offset;
-        this.start = start;
-        if (this.showTooltip) {
-            this.manual = true;
-            this.visible = true;
+    setMarks() {
+        if (!this.marks)
+            return;
+        for (let mark of this.marks) {
+            const mk = {
+                value: mark.value,
+                label: mark.label,
+                style: { ...mark.style }
+            };
+            mk.offset = this.getOffset(mark.value);
+            if (this.reverse) {
+                if (this.vertical) {
+                    mk.style['top'] = `${mk.offset}%`;
+                }
+                else {
+                    mk.style['right'] = `${mk.offset}%`;
+                }
+            }
+            else {
+                if (this.vertical) {
+                    mk.style['bottom'] = `${mk.offset}%`;
+                }
+                else {
+                    mk.style['left'] = `${mk.offset}%`;
+                }
+            }
+            this.markList.push(mk);
+        }
+    }
+    started(drag, type = 'start') {
+        if (['start', 'both'].includes(type)) {
+            const start = this.startOffset;
+            this.start = start;
+            if (this.showStartTooltip) {
+                this.startManual = true;
+                this.startVisible = true;
+            }
+        }
+        if (['end', 'both'].includes(type)) {
+            const end = this.endOffset;
+            this.end = end;
+            if (this.showEndTooltip) {
+                this.endManual = true;
+                this.endVisible = true;
+            }
         }
         this.cdr.detectChanges();
         this.formControlValidator();
         this.dragStartEmit.emit(drag);
     }
-    moved(drag) {
+    moved(drag, type = 'start') {
         let transform = drag.source.getFreeDragPosition();
-        this.setDrag(transform.x);
+        this.setDrag(this.vertical ? transform.y : transform.x, type);
         drag.source.reset();
-        if (this.showTooltip) {
-            this.tooltip.updatePortal();
+        if (['start', 'both'].includes(type) && this.showStartTooltip) {
+            this.tooltipStart.updatePortal();
+        }
+        if (['end', 'both'].includes(type) && this.showEndTooltip) {
+            this.tooltipEnd.updatePortal();
         }
         this.change();
         this.dragMoveEmit.emit(drag);
     }
-    ended(drag) {
-        if (this.showTooltip) {
-            this.manual = false;
-            this.visible = false;
+    ended(drag, type = 'start') {
+        if (['start', 'both'].includes(type)) {
+            if (this.showStartTooltip) {
+                this.startManual = false;
+                this.startVisible = false;
+            }
+        }
+        if (['end', 'both'].includes(type)) {
+            if (this.showEndTooltip) {
+                this.endManual = false;
+                this.endVisible = false;
+            }
         }
         this.cdr.detectChanges();
         this.dragEndEmit.emit(drag);
     }
-    setDrag(distance = 0) {
+    setDrag(distance = 0, type = 'both') {
         if (typeof this.railRef.nativeElement.getBoundingClientRect !== 'function')
             return;
         let railBox = this.railRef.nativeElement.getBoundingClientRect();
-        let stepWidth = railBox.width / ((Number(this.max) - Number(this.min)) / Number(this.step));
-        let offset = Math.abs(distance % stepWidth);
-        let dis = offset < stepWidth / 2
+        let railBoxLength = this.vertical ? railBox.height : railBox.width;
+        let stepLength = railBoxLength / ((Number(this.max) - Number(this.min)) / Number(this.step));
+        let offset = Math.abs(distance % stepLength);
+        let dis = offset < stepLength / 2
             ? distance > 0
                 ? distance - offset
                 : distance + offset
             : distance > 0
-                ? distance + stepWidth - offset
-                : distance - stepWidth + offset;
-        let x = (this.start / 100) * railBox.width + (this.reverse ? -dis : dis);
-        this.offset = Math.round((x / railBox.width) * 100);
-        if (this.reverse) {
-            this.renderer.setStyle(this.dragRef.nativeElement, 'right', `${this.offset}%`);
+                ? distance + stepLength - offset
+                : distance - stepLength + offset;
+        const setOffset = (d) => {
+            let x1 = (d / 100) * railBoxLength;
+            if (this.vertical) {
+                x1 += this.reverse ? dis : -dis;
+            }
+            else {
+                x1 += this.reverse ? -dis : dis;
+            }
+            return Math.round((x1 / railBoxLength) * 100);
+        };
+        if (type === 'both') {
+            this.startOffset = setOffset(this.start);
+            this.endOffset = setOffset(this.end);
+        }
+        else if (type === 'start') {
+            this.startOffset = setOffset(this.start);
+        }
+        else if (type === 'end') {
+            this.endOffset = setOffset(this.end);
+        }
+        this.setDragStyles();
+    }
+    setDragStyles() {
+        if (this.vertical) {
+            if (this.isArray) {
+                const wd = Math.abs(this.endOffset - this.startOffset);
+                const lt = this.endOffset > this.startOffset ? this.startOffset : this.endOffset;
+                if (this.reverse) {
+                    this.renderer.setStyle(this.dragStartRef.nativeElement, 'top', `${this.startOffset}%`);
+                    this.renderer.setStyle(this.dragEndRef.nativeElement, 'top', `${this.endOffset}%`);
+                    this.renderer.setStyle(this.processRef.nativeElement, 'top', `${lt}%`);
+                }
+                else {
+                    this.renderer.setStyle(this.dragStartRef.nativeElement, 'bottom', `${this.startOffset}%`);
+                    this.renderer.setStyle(this.dragEndRef.nativeElement, 'bottom', `${this.endOffset}%`);
+                    this.renderer.setStyle(this.processRef.nativeElement, 'bottom', `${lt}%`);
+                }
+                this.renderer.setStyle(this.processRef.nativeElement, 'height', `${wd}%`);
+            }
+            else {
+                if (this.reverse) {
+                    this.renderer.setStyle(this.dragStartRef.nativeElement, 'top', `${this.startOffset}%`);
+                }
+                else {
+                    this.renderer.setStyle(this.dragStartRef.nativeElement, 'bottom', `${this.startOffset}%`);
+                }
+                this.renderer.setStyle(this.processRef.nativeElement, 'height', `${this.startOffset}%`);
+            }
         }
         else {
-            this.renderer.setStyle(this.dragRef.nativeElement, 'left', `${this.offset}%`);
+            if (this.isArray) {
+                const wd = Math.abs(this.endOffset - this.startOffset);
+                const lt = this.endOffset > this.startOffset ? this.startOffset : this.endOffset;
+                if (this.reverse) {
+                    this.renderer.setStyle(this.dragStartRef.nativeElement, 'right', `${this.startOffset}%`);
+                    this.renderer.setStyle(this.dragEndRef.nativeElement, 'right', `${this.endOffset}%`);
+                    this.renderer.setStyle(this.processRef.nativeElement, 'right', `${lt}%`);
+                }
+                else {
+                    this.renderer.setStyle(this.dragStartRef.nativeElement, 'left', `${this.startOffset}%`);
+                    this.renderer.setStyle(this.dragEndRef.nativeElement, 'left', `${this.endOffset}%`);
+                    this.renderer.setStyle(this.processRef.nativeElement, 'left', `${lt}%`);
+                }
+                this.renderer.setStyle(this.processRef.nativeElement, 'width', `${wd}%`);
+            }
+            else {
+                if (this.reverse) {
+                    this.renderer.setStyle(this.dragStartRef.nativeElement, 'right', `${this.startOffset}%`);
+                }
+                else {
+                    this.renderer.setStyle(this.dragStartRef.nativeElement, 'left', `${this.startOffset}%`);
+                }
+                this.renderer.setStyle(this.processRef.nativeElement, 'width', `${this.startOffset}%`);
+            }
         }
-        this.renderer.setStyle(this.processRef.nativeElement, 'width', `${this.offset}%`);
-        this.renderer.removeStyle(this.dragRef.nativeElement, 'transform');
     }
     formControlChanges() {
         this.ngOnInit();
         this.cdr.detectChanges();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XSliderSelectComponent, selector: "x-slider-select", providers: [XValueAccessor(XSliderSelectComponent)], viewQueries: [{ propertyName: "sliderSelect", first: true, predicate: ["sliderSelect"], descendants: true, static: true }, { propertyName: "dragRef", first: true, predicate: ["dragRef"], descendants: true, static: true }, { propertyName: "railRef", first: true, predicate: ["railRef"], descendants: true, static: true }, { propertyName: "processRef", first: true, predicate: ["processRef"], descendants: true, static: true }, { propertyName: "tooltip", first: true, predicate: XTooltipDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #sliderSelect\r\n  class=\"x-slider-select\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [class.x-slider-select-reverse]=\"reverse\"\r\n>\r\n  <label *ngIf=\"label\" [class.x-slider-select-label-required]=\"required\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  <div class=\"x-slider-select-inner\" #innerRef (click)=\"onInnerClick($event)\">\r\n    <div class=\"x-slider-select-rail\" #railRef>\r\n      <div></div>\r\n    </div>\r\n    <div class=\"x-slider-select-track\" #trackRef>\r\n      <div class=\"x-slider-select-process\" #processRef></div>\r\n    </div>\r\n    <div class=\"x-slider-select-drags\">\r\n      <div\r\n        #dragRef\r\n        class=\"x-slider-select-drag\"\r\n        cdkDrag\r\n        cdkDragLockAxis=\"x\"\r\n        [cdkDragDisabled]=\"disabled\"\r\n        [cdkDragBoundary]=\"innerRef\"\r\n        (cdkDragStarted)=\"started($event)\"\r\n        (cdkDragEnded)=\"ended($event)\"\r\n        (cdkDragMoved)=\"moved($event)\"\r\n      >\r\n        <div\r\n          #tooltip\r\n          x-tooltip\r\n          class=\"x-slider-select-button\"\r\n          placement=\"top\"\r\n          [disabled]=\"!showTooltip\"\r\n          [content]=\"displayValue\"\r\n          [visible]=\"visible\"\r\n          [manual]=\"manual\"\r\n        ></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-slider-select{display:inline-block;width:12rem}.x-slider-select{margin:0;padding:0;width:100%}.x-slider-select.x-flex{display:flex}.x-slider-select.x-justify-start{justify-content:flex-start}.x-slider-select.x-justify-center{justify-content:center}.x-slider-select.x-justify-end{justify-content:flex-end}.x-slider-select.x-justify-space-between{justify-content:space-between}.x-slider-select.x-justify-space-around{justify-content:space-around}.x-slider-select.x-align-start{align-items:flex-start}.x-slider-select.x-align-center{align-items:center}.x-slider-select.x-align-end{align-items:flex-end}.x-slider-select.x-direction-column{flex-direction:column}.x-slider-select.x-direction-column-reverse{flex-direction:column-reverse}.x-slider-select.x-direction-row{flex-direction:row}.x-slider-select.x-direction-row-reverse{flex-direction:row-reverse}.x-slider-select>label{display:inline-block;white-space:nowrap;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);color:var(--x-text-300);font-weight:600}.x-slider-select>label.x-text-align-start{text-align:start}.x-slider-select>label.x-text-align-center{text-align:center}.x-slider-select>label.x-text-align-end{text-align:end}.x-slider-select-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-slider-select-inner{flex:1;position:relative;display:flex;align-items:center;padding-right:1rem}.x-slider-select-rail{position:absolute;margin-left:.5rem;width:calc(100% - 1rem);background-color:var(--x-border-100);height:calc(calc(var(--x-font-size) + .875rem) / 4);border-radius:var(--x-border-radius)}.x-slider-select-rail>div{width:100%;height:100%}.x-slider-select-track{margin-left:.5rem;width:calc(100% - 1rem);position:absolute}.x-slider-select-process{height:calc(calc(var(--x-font-size) + .875rem) / 4);background-color:var(--x-primary);border-radius:var(--x-border-radius);width:0%}.x-slider-select-drags{position:relative;width:100%;height:calc(var(--x-font-size) + .875rem);display:flex;align-items:center}.x-slider-select-drag{position:absolute;cursor:pointer}.x-slider-select-button{width:1rem;height:1rem;border-radius:1rem;border:calc(var(--x-border-width) * 2) solid var(--x-primary);background-color:var(--x-background-a100)}.x-slider-select.x-invalid>label,.x-slider-select.x-required>label{color:var(--x-danger)}.x-slider-select.x-invalid>.x-slider-select-row>x-icon,.x-slider-select.x-required>.x-slider-select-row>x-icon{color:var(--x-danger)}.x-slider-select.x-invalid>.x-slider-select-row:before,.x-slider-select.x-required>.x-slider-select-row:before{content:\" \";z-index:2;position:absolute;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);width:.125rem;background-color:var(--x-danger)}.x-slider-select.x-disabled .x-slider-select-rail{background-color:var(--x-border-300)}.x-slider-select.x-disabled .x-slider-select-process{background-color:var(--x-primary-400)}.x-slider-select.x-disabled .x-slider-select-drag{cursor:not-allowed}.x-slider-select.x-disabled .x-slider-select-button{border-color:var(--x-primary-400)}.x-slider-select.x-flex.x-direction-row>label{padding:0 .5rem 0 0}.x-slider-select.x-flex.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-slider-select.x-flex.x-direction-column,.x-slider-select.x-flex.x-direction-column-reverse{align-items:inherit}.x-slider-select-max-length{position:absolute;font-size:var(--x-font-size-small);color:var(--x-text-500);padding:0 var(--x-padding-medium);right:0}.x-slider-select:hover:not(.x-disabled) .x-slider-select-track{background-color:var(--x-border-100)}.x-slider-select:hover:not(.x-disabled) .x-slider-select-process{background-color:var(--x-primary-100)}.x-slider-select:hover:not(.x-disabled) .x-slider-select-button{border-color:var(--x-primary-100)}.x-slider-select-reverse .x-slider-select-inner{padding-right:0;padding-left:1rem}.x-slider-select-reverse .x-slider-select-rail{margin-left:-.5rem}.x-slider-select-reverse .x-slider-select-track{display:flex;justify-content:flex-end;margin-left:-.5rem}.x-slider-select-reverse .x-slider-select-drags{justify-content:flex-end;right:auto}.x-slider-select:not(.x-slider-select-reverse) .x-slider-select-drag{left:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.XTooltipDirective, selector: "[x-tooltip], x-tooltip" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XSliderSelectComponent, selector: "x-slider-select", host: { properties: { "class.x-slider-select-vertical": "this.getVertical" } }, providers: [XValueAccessor(XSliderSelectComponent)], viewQueries: [{ propertyName: "sliderSelect", first: true, predicate: ["sliderSelect"], descendants: true, static: true }, { propertyName: "dragStartRef", first: true, predicate: ["dragStartRef"], descendants: true, static: true }, { propertyName: "dragEndRef", first: true, predicate: ["dragEndRef"], descendants: true, static: true }, { propertyName: "railRef", first: true, predicate: ["railRef"], descendants: true, static: true }, { propertyName: "processRef", first: true, predicate: ["processRef"], descendants: true, static: true }, { propertyName: "cdkDrag", first: true, predicate: CdkDrag, descendants: true }, { propertyName: "tooltips", predicate: XTooltipDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #sliderSelect\r\n  class=\"x-slider-select\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [class.x-slider-select-reverse]=\"reverse\"\r\n  [class.x-slider-select-range]=\"range\"\r\n>\r\n  <label\r\n    *ngIf=\"label\"\r\n    [class.x-slider-select-label-required]=\"required\"\r\n    [style.width]=\"labelWidth\"\r\n    [ngClass]=\"labelMap\"\r\n    >{{ label }}</label\r\n  >\r\n  <div class=\"x-slider-select-inner\" #innerRef>\r\n    <div class=\"x-slider-select-rail\" #railRef>\r\n      <div></div>\r\n    </div>\r\n    <div class=\"x-slider-select-drags\">\r\n      <div class=\"x-slider-select-track\" #trackRef>\r\n        <div\r\n          #processRef\r\n          class=\"x-slider-select-process\"\r\n          cdkDrag\r\n          [cdkDragLockAxis]=\"vertical ? 'y' : 'x'\"\r\n          [cdkDragDisabled]=\"disabled || !range\"\r\n          [cdkDragBoundary]=\"trackRef\"\r\n          (cdkDragStarted)=\"started($event, 'both')\"\r\n          (cdkDragEnded)=\"ended($event, 'both')\"\r\n          (cdkDragMoved)=\"moved($event, 'both')\"\r\n        ></div>\r\n      </div>\r\n      <div class=\"x-slider-select-marks\">\r\n        <div class=\"x-slider-select-mark\" [ngStyle]=\"mark.style\" *ngFor=\"let mark of markList\">\r\n          <span class=\"x-slider-select-mark-label\">{{ mark.label }}</span>\r\n        </div>\r\n      </div>\r\n      <div\r\n        #dragStartRef\r\n        class=\"x-slider-select-drag\"\r\n        cdkDrag\r\n        [cdkDragLockAxis]=\"vertical ? 'y' : 'x'\"\r\n        [cdkDragDisabled]=\"disabled\"\r\n        [cdkDragBoundary]=\"innerRef\"\r\n        (cdkDragStarted)=\"started($event, 'start')\"\r\n        (cdkDragEnded)=\"ended($event, 'start')\"\r\n        (cdkDragMoved)=\"moved($event, 'start')\"\r\n      >\r\n        <div\r\n          #tooltipStart\r\n          x-tooltip\r\n          tabindex=\"0\"\r\n          class=\"x-slider-select-button\"\r\n          [class.x-slider-select-button-actived]=\"startVisible\"\r\n          [class.x-slider-select-custom-button]=\"customButton\"\r\n          placement=\"top\"\r\n          [disabled]=\"!showTooltip && !showStartTooltip\"\r\n          [content]=\"startDisplayValue\"\r\n          [visible]=\"startVisible\"\r\n          [manual]=\"startManual\"\r\n        >\r\n          <ng-container *xOutlet=\"customButton\">{{ customButton }}</ng-container>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [hidden]=\"!range\"\r\n        #dragEndRef\r\n        class=\"x-slider-select-drag\"\r\n        cdkDrag\r\n        [cdkDragLockAxis]=\"vertical ? 'y' : 'x'\"\r\n        [cdkDragDisabled]=\"disabled\"\r\n        [cdkDragBoundary]=\"innerRef\"\r\n        (cdkDragStarted)=\"started($event, 'end')\"\r\n        (cdkDragEnded)=\"ended($event, 'end')\"\r\n        (cdkDragMoved)=\"moved($event, 'end')\"\r\n      >\r\n        <div\r\n          #tooltipEnd\r\n          x-tooltip\r\n          tabindex=\"0\"\r\n          class=\"x-slider-select-button\"\r\n          [class.x-slider-select-button-actived]=\"endVisible\"\r\n          [class.x-slider-select-custom-button]=\"customButton\"\r\n          placement=\"top\"\r\n          [disabled]=\"!showTooltip && !showEndTooltip\"\r\n          [content]=\"endDisplayValue\"\r\n          [visible]=\"endVisible\"\r\n          [manual]=\"endManual\"\r\n        >\r\n          <ng-container *xOutlet=\"customButton\">{{ customButton }}</ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-slider-select{display:inline-block;width:12rem}.x-slider-select{margin:0;padding:0;width:100%}.x-slider-select.x-flex{display:flex}.x-slider-select.x-justify-start{justify-content:flex-start}.x-slider-select.x-justify-center{justify-content:center}.x-slider-select.x-justify-end{justify-content:flex-end}.x-slider-select.x-justify-space-between{justify-content:space-between}.x-slider-select.x-justify-space-around{justify-content:space-around}.x-slider-select.x-align-start{align-items:flex-start}.x-slider-select.x-align-center{align-items:center}.x-slider-select.x-align-end{align-items:flex-end}.x-slider-select.x-direction-column{flex-direction:column}.x-slider-select.x-direction-column-reverse{flex-direction:column-reverse}.x-slider-select.x-direction-row{flex-direction:row}.x-slider-select.x-direction-row-reverse{flex-direction:row-reverse}.x-slider-select>label{display:inline-block;white-space:nowrap;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);color:var(--x-text-300);font-weight:600}.x-slider-select>label.x-text-align-start{text-align:start}.x-slider-select>label.x-text-align-center{text-align:center}.x-slider-select>label.x-text-align-end{text-align:end}.x-slider-select-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-slider-select-inner{flex:1;position:relative;display:flex;align-items:center;padding-right:.875rem}.x-slider-select-rail{position:absolute;margin-left:.4375rem;width:calc(100% - .875rem);background-color:var(--x-border-100);height:calc(calc(var(--x-font-size) + .875rem) / 5);border-radius:var(--x-border-radius)}.x-slider-select-rail>div{width:100%;height:100%}.x-slider-select-track{margin-left:.4375rem;width:100%;border-radius:var(--x-border-radius);position:absolute}.x-slider-select-process{height:calc(calc(var(--x-font-size) + .875rem) / 5);background-color:var(--x-primary);border-radius:var(--x-border-radius);width:0%;position:relative}.x-slider-select-drags{position:relative;width:100%;height:calc(var(--x-font-size) + .875rem);display:flex;align-items:center}.x-slider-select-drag{position:absolute;cursor:pointer}.x-slider-select-marks{position:absolute;margin-left:.4375rem;width:100%;height:calc(var(--x-font-size) + .875rem);display:flex;align-items:center}.x-slider-select-mark{position:absolute;transform:translate(-50%);border-radius:.875rem;display:flex;align-items:center;justify-content:center}.x-slider-select-mark:before{content:\" \";position:absolute;width:.65625rem;height:.65625rem;border:calc(var(--x-border-width) * 2) solid var(--x-primary);background-color:var(--x-background-a100);border-radius:.875rem}.x-slider-select-mark-label{transform:translateY(.875rem)}.x-slider-select-button:not(.x-slider-select-custom-button){border-radius:.875rem;border:calc(var(--x-border-width) * 2) solid var(--x-primary);background-color:var(--x-background-a100)}.x-slider-select-button{width:.875rem;height:.875rem;display:flex;align-items:center;justify-content:center;transition:var(--x-animation-duration-base)}.x-slider-select-button:hover,.x-slider-select-button-actived{transform:scale(1.2)}.x-slider-select-bar{width:100%;height:100%}.x-slider-select.x-invalid>label,.x-slider-select.x-required>label{color:var(--x-danger)}.x-slider-select.x-invalid>.x-slider-select-row>x-icon,.x-slider-select.x-required>.x-slider-select-row>x-icon{color:var(--x-danger)}.x-slider-select.x-invalid>.x-slider-select-row:before,.x-slider-select.x-required>.x-slider-select-row:before{content:\" \";z-index:2;position:absolute;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);width:.125rem;background-color:var(--x-danger)}.x-slider-select.x-disabled .x-slider-select-rail{background-color:var(--x-border-300)}.x-slider-select.x-disabled .x-slider-select-process{background-color:var(--x-primary-400)}.x-slider-select.x-disabled .x-slider-select-drag{cursor:not-allowed}.x-slider-select.x-disabled .x-slider-select-button:not(.x-slider-select-custom-button){border-color:var(--x-primary-400)}.x-slider-select.x-flex.x-direction-row>label{padding:0 .5rem 0 0}.x-slider-select.x-flex.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-slider-select.x-flex.x-direction-column,.x-slider-select.x-flex.x-direction-column-reverse{align-items:inherit}.x-slider-select-max-length{position:absolute;font-size:var(--x-font-size-small);color:var(--x-text-500);padding:0 var(--x-padding-medium);right:0}.x-slider-select:hover:not(.x-disabled) .x-slider-select-process{background-color:var(--x-primary-100)}.x-slider-select:hover:not(.x-disabled) .x-slider-select-button{border-color:var(--x-primary-100)}.x-slider-select-reverse .x-slider-select-inner{padding-right:0;padding-left:.875rem}.x-slider-select-reverse .x-slider-select-rail{margin-left:-.4375rem}.x-slider-select-reverse .x-slider-select-marks{margin-right:.4375rem}.x-slider-select-reverse .x-slider-select-mark{transform:translate(50%)}.x-slider-select-reverse .x-slider-select-track{display:flex;justify-content:flex-end;margin-right:.4375rem}.x-slider-select-reverse .x-slider-select-drags{justify-content:flex-end;right:auto}.x-slider-select-vertical{width:initial;height:12rem}.x-slider-select-vertical .x-slider-select{height:100%}.x-slider-select-vertical .x-slider-select-inner{padding-right:initial;padding-top:.875rem;align-items:initial;justify-content:center;height:100%}.x-slider-select-vertical .x-slider-select-rail{margin-left:initial;margin-top:-.4375rem;height:calc(100% - .875rem);width:calc(calc(var(--x-font-size) + .875rem) / 5)}.x-slider-select-vertical .x-slider-select-track{display:flex;align-items:flex-end;margin-left:initial;margin-bottom:.4375rem;width:calc(calc(var(--x-font-size) + .875rem) / 5);height:100%}.x-slider-select-vertical .x-slider-select-marks{display:flex;align-items:flex-end;justify-content:center;margin-left:initial;margin-bottom:.4375rem;width:calc(calc(var(--x-font-size) + .875rem) / 5);height:100%}.x-slider-select-vertical .x-slider-select-mark{transform:translate(0) translateY(50%)}.x-slider-select-vertical .x-slider-select-mark-label{transform:translate(50%) translateY(0);margin-left:.875rem}.x-slider-select-vertical .x-slider-select-process{height:0%;width:calc(calc(var(--x-font-size) + .875rem) / 5)}.x-slider-select-vertical .x-slider-select-drags{height:100%;width:calc(var(--x-font-size) + .875rem);align-items:flex-end;justify-content:center;right:auto}.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-inner{padding-left:initial;padding-bottom:.875rem;padding-top:initial}.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-rail{margin-top:.4375rem}.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-track,.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-marks{align-items:flex-start;margin-bottom:-.4375rem;margin-right:initial}.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-mark{transform:translate(0) translateY(-50%)}.x-slider-select-range .x-slider-select-process{cursor:pointer}.x-slider-select:not(.x-slider-select-reverse) .x-slider-select-drag{left:auto}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.XTooltipDirective, selector: "[x-tooltip], x-tooltip" }, { kind: "directive", type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XSliderSelectPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XSliderSelectComponent)], template: "<div\r\n  #sliderSelect\r\n  class=\"x-slider-select\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [class.x-slider-select-reverse]=\"reverse\"\r\n>\r\n  <label *ngIf=\"label\" [class.x-slider-select-label-required]=\"required\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  <div class=\"x-slider-select-inner\" #innerRef (click)=\"onInnerClick($event)\">\r\n    <div class=\"x-slider-select-rail\" #railRef>\r\n      <div></div>\r\n    </div>\r\n    <div class=\"x-slider-select-track\" #trackRef>\r\n      <div class=\"x-slider-select-process\" #processRef></div>\r\n    </div>\r\n    <div class=\"x-slider-select-drags\">\r\n      <div\r\n        #dragRef\r\n        class=\"x-slider-select-drag\"\r\n        cdkDrag\r\n        cdkDragLockAxis=\"x\"\r\n        [cdkDragDisabled]=\"disabled\"\r\n        [cdkDragBoundary]=\"innerRef\"\r\n        (cdkDragStarted)=\"started($event)\"\r\n        (cdkDragEnded)=\"ended($event)\"\r\n        (cdkDragMoved)=\"moved($event)\"\r\n      >\r\n        <div\r\n          #tooltip\r\n          x-tooltip\r\n          class=\"x-slider-select-button\"\r\n          placement=\"top\"\r\n          [disabled]=\"!showTooltip\"\r\n          [content]=\"displayValue\"\r\n          [visible]=\"visible\"\r\n          [manual]=\"manual\"\r\n        ></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-slider-select{display:inline-block;width:12rem}.x-slider-select{margin:0;padding:0;width:100%}.x-slider-select.x-flex{display:flex}.x-slider-select.x-justify-start{justify-content:flex-start}.x-slider-select.x-justify-center{justify-content:center}.x-slider-select.x-justify-end{justify-content:flex-end}.x-slider-select.x-justify-space-between{justify-content:space-between}.x-slider-select.x-justify-space-around{justify-content:space-around}.x-slider-select.x-align-start{align-items:flex-start}.x-slider-select.x-align-center{align-items:center}.x-slider-select.x-align-end{align-items:flex-end}.x-slider-select.x-direction-column{flex-direction:column}.x-slider-select.x-direction-column-reverse{flex-direction:column-reverse}.x-slider-select.x-direction-row{flex-direction:row}.x-slider-select.x-direction-row-reverse{flex-direction:row-reverse}.x-slider-select>label{display:inline-block;white-space:nowrap;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);color:var(--x-text-300);font-weight:600}.x-slider-select>label.x-text-align-start{text-align:start}.x-slider-select>label.x-text-align-center{text-align:center}.x-slider-select>label.x-text-align-end{text-align:end}.x-slider-select-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-slider-select-inner{flex:1;position:relative;display:flex;align-items:center;padding-right:1rem}.x-slider-select-rail{position:absolute;margin-left:.5rem;width:calc(100% - 1rem);background-color:var(--x-border-100);height:calc(calc(var(--x-font-size) + .875rem) / 4);border-radius:var(--x-border-radius)}.x-slider-select-rail>div{width:100%;height:100%}.x-slider-select-track{margin-left:.5rem;width:calc(100% - 1rem);position:absolute}.x-slider-select-process{height:calc(calc(var(--x-font-size) + .875rem) / 4);background-color:var(--x-primary);border-radius:var(--x-border-radius);width:0%}.x-slider-select-drags{position:relative;width:100%;height:calc(var(--x-font-size) + .875rem);display:flex;align-items:center}.x-slider-select-drag{position:absolute;cursor:pointer}.x-slider-select-button{width:1rem;height:1rem;border-radius:1rem;border:calc(var(--x-border-width) * 2) solid var(--x-primary);background-color:var(--x-background-a100)}.x-slider-select.x-invalid>label,.x-slider-select.x-required>label{color:var(--x-danger)}.x-slider-select.x-invalid>.x-slider-select-row>x-icon,.x-slider-select.x-required>.x-slider-select-row>x-icon{color:var(--x-danger)}.x-slider-select.x-invalid>.x-slider-select-row:before,.x-slider-select.x-required>.x-slider-select-row:before{content:\" \";z-index:2;position:absolute;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);width:.125rem;background-color:var(--x-danger)}.x-slider-select.x-disabled .x-slider-select-rail{background-color:var(--x-border-300)}.x-slider-select.x-disabled .x-slider-select-process{background-color:var(--x-primary-400)}.x-slider-select.x-disabled .x-slider-select-drag{cursor:not-allowed}.x-slider-select.x-disabled .x-slider-select-button{border-color:var(--x-primary-400)}.x-slider-select.x-flex.x-direction-row>label{padding:0 .5rem 0 0}.x-slider-select.x-flex.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-slider-select.x-flex.x-direction-column,.x-slider-select.x-flex.x-direction-column-reverse{align-items:inherit}.x-slider-select-max-length{position:absolute;font-size:var(--x-font-size-small);color:var(--x-text-500);padding:0 var(--x-padding-medium);right:0}.x-slider-select:hover:not(.x-disabled) .x-slider-select-track{background-color:var(--x-border-100)}.x-slider-select:hover:not(.x-disabled) .x-slider-select-process{background-color:var(--x-primary-100)}.x-slider-select:hover:not(.x-disabled) .x-slider-select-button{border-color:var(--x-primary-100)}.x-slider-select-reverse .x-slider-select-inner{padding-right:0;padding-left:1rem}.x-slider-select-reverse .x-slider-select-rail{margin-left:-.5rem}.x-slider-select-reverse .x-slider-select-track{display:flex;justify-content:flex-end;margin-left:-.5rem}.x-slider-select-reverse .x-slider-select-drags{justify-content:flex-end;right:auto}.x-slider-select:not(.x-slider-select-reverse) .x-slider-select-drag{left:auto}\n"] }]
+            args: [{ selector: `${XSliderSelectPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XSliderSelectComponent)], template: "<div\r\n  #sliderSelect\r\n  class=\"x-slider-select\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [class.x-slider-select-reverse]=\"reverse\"\r\n  [class.x-slider-select-range]=\"range\"\r\n>\r\n  <label\r\n    *ngIf=\"label\"\r\n    [class.x-slider-select-label-required]=\"required\"\r\n    [style.width]=\"labelWidth\"\r\n    [ngClass]=\"labelMap\"\r\n    >{{ label }}</label\r\n  >\r\n  <div class=\"x-slider-select-inner\" #innerRef>\r\n    <div class=\"x-slider-select-rail\" #railRef>\r\n      <div></div>\r\n    </div>\r\n    <div class=\"x-slider-select-drags\">\r\n      <div class=\"x-slider-select-track\" #trackRef>\r\n        <div\r\n          #processRef\r\n          class=\"x-slider-select-process\"\r\n          cdkDrag\r\n          [cdkDragLockAxis]=\"vertical ? 'y' : 'x'\"\r\n          [cdkDragDisabled]=\"disabled || !range\"\r\n          [cdkDragBoundary]=\"trackRef\"\r\n          (cdkDragStarted)=\"started($event, 'both')\"\r\n          (cdkDragEnded)=\"ended($event, 'both')\"\r\n          (cdkDragMoved)=\"moved($event, 'both')\"\r\n        ></div>\r\n      </div>\r\n      <div class=\"x-slider-select-marks\">\r\n        <div class=\"x-slider-select-mark\" [ngStyle]=\"mark.style\" *ngFor=\"let mark of markList\">\r\n          <span class=\"x-slider-select-mark-label\">{{ mark.label }}</span>\r\n        </div>\r\n      </div>\r\n      <div\r\n        #dragStartRef\r\n        class=\"x-slider-select-drag\"\r\n        cdkDrag\r\n        [cdkDragLockAxis]=\"vertical ? 'y' : 'x'\"\r\n        [cdkDragDisabled]=\"disabled\"\r\n        [cdkDragBoundary]=\"innerRef\"\r\n        (cdkDragStarted)=\"started($event, 'start')\"\r\n        (cdkDragEnded)=\"ended($event, 'start')\"\r\n        (cdkDragMoved)=\"moved($event, 'start')\"\r\n      >\r\n        <div\r\n          #tooltipStart\r\n          x-tooltip\r\n          tabindex=\"0\"\r\n          class=\"x-slider-select-button\"\r\n          [class.x-slider-select-button-actived]=\"startVisible\"\r\n          [class.x-slider-select-custom-button]=\"customButton\"\r\n          placement=\"top\"\r\n          [disabled]=\"!showTooltip && !showStartTooltip\"\r\n          [content]=\"startDisplayValue\"\r\n          [visible]=\"startVisible\"\r\n          [manual]=\"startManual\"\r\n        >\r\n          <ng-container *xOutlet=\"customButton\">{{ customButton }}</ng-container>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [hidden]=\"!range\"\r\n        #dragEndRef\r\n        class=\"x-slider-select-drag\"\r\n        cdkDrag\r\n        [cdkDragLockAxis]=\"vertical ? 'y' : 'x'\"\r\n        [cdkDragDisabled]=\"disabled\"\r\n        [cdkDragBoundary]=\"innerRef\"\r\n        (cdkDragStarted)=\"started($event, 'end')\"\r\n        (cdkDragEnded)=\"ended($event, 'end')\"\r\n        (cdkDragMoved)=\"moved($event, 'end')\"\r\n      >\r\n        <div\r\n          #tooltipEnd\r\n          x-tooltip\r\n          tabindex=\"0\"\r\n          class=\"x-slider-select-button\"\r\n          [class.x-slider-select-button-actived]=\"endVisible\"\r\n          [class.x-slider-select-custom-button]=\"customButton\"\r\n          placement=\"top\"\r\n          [disabled]=\"!showTooltip && !showEndTooltip\"\r\n          [content]=\"endDisplayValue\"\r\n          [visible]=\"endVisible\"\r\n          [manual]=\"endManual\"\r\n        >\r\n          <ng-container *xOutlet=\"customButton\">{{ customButton }}</ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-slider-select{display:inline-block;width:12rem}.x-slider-select{margin:0;padding:0;width:100%}.x-slider-select.x-flex{display:flex}.x-slider-select.x-justify-start{justify-content:flex-start}.x-slider-select.x-justify-center{justify-content:center}.x-slider-select.x-justify-end{justify-content:flex-end}.x-slider-select.x-justify-space-between{justify-content:space-between}.x-slider-select.x-justify-space-around{justify-content:space-around}.x-slider-select.x-align-start{align-items:flex-start}.x-slider-select.x-align-center{align-items:center}.x-slider-select.x-align-end{align-items:flex-end}.x-slider-select.x-direction-column{flex-direction:column}.x-slider-select.x-direction-column-reverse{flex-direction:column-reverse}.x-slider-select.x-direction-row{flex-direction:row}.x-slider-select.x-direction-row-reverse{flex-direction:row-reverse}.x-slider-select>label{display:inline-block;white-space:nowrap;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);color:var(--x-text-300);font-weight:600}.x-slider-select>label.x-text-align-start{text-align:start}.x-slider-select>label.x-text-align-center{text-align:center}.x-slider-select>label.x-text-align-end{text-align:end}.x-slider-select-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-slider-select-inner{flex:1;position:relative;display:flex;align-items:center;padding-right:.875rem}.x-slider-select-rail{position:absolute;margin-left:.4375rem;width:calc(100% - .875rem);background-color:var(--x-border-100);height:calc(calc(var(--x-font-size) + .875rem) / 5);border-radius:var(--x-border-radius)}.x-slider-select-rail>div{width:100%;height:100%}.x-slider-select-track{margin-left:.4375rem;width:100%;border-radius:var(--x-border-radius);position:absolute}.x-slider-select-process{height:calc(calc(var(--x-font-size) + .875rem) / 5);background-color:var(--x-primary);border-radius:var(--x-border-radius);width:0%;position:relative}.x-slider-select-drags{position:relative;width:100%;height:calc(var(--x-font-size) + .875rem);display:flex;align-items:center}.x-slider-select-drag{position:absolute;cursor:pointer}.x-slider-select-marks{position:absolute;margin-left:.4375rem;width:100%;height:calc(var(--x-font-size) + .875rem);display:flex;align-items:center}.x-slider-select-mark{position:absolute;transform:translate(-50%);border-radius:.875rem;display:flex;align-items:center;justify-content:center}.x-slider-select-mark:before{content:\" \";position:absolute;width:.65625rem;height:.65625rem;border:calc(var(--x-border-width) * 2) solid var(--x-primary);background-color:var(--x-background-a100);border-radius:.875rem}.x-slider-select-mark-label{transform:translateY(.875rem)}.x-slider-select-button:not(.x-slider-select-custom-button){border-radius:.875rem;border:calc(var(--x-border-width) * 2) solid var(--x-primary);background-color:var(--x-background-a100)}.x-slider-select-button{width:.875rem;height:.875rem;display:flex;align-items:center;justify-content:center;transition:var(--x-animation-duration-base)}.x-slider-select-button:hover,.x-slider-select-button-actived{transform:scale(1.2)}.x-slider-select-bar{width:100%;height:100%}.x-slider-select.x-invalid>label,.x-slider-select.x-required>label{color:var(--x-danger)}.x-slider-select.x-invalid>.x-slider-select-row>x-icon,.x-slider-select.x-required>.x-slider-select-row>x-icon{color:var(--x-danger)}.x-slider-select.x-invalid>.x-slider-select-row:before,.x-slider-select.x-required>.x-slider-select-row:before{content:\" \";z-index:2;position:absolute;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);width:.125rem;background-color:var(--x-danger)}.x-slider-select.x-disabled .x-slider-select-rail{background-color:var(--x-border-300)}.x-slider-select.x-disabled .x-slider-select-process{background-color:var(--x-primary-400)}.x-slider-select.x-disabled .x-slider-select-drag{cursor:not-allowed}.x-slider-select.x-disabled .x-slider-select-button:not(.x-slider-select-custom-button){border-color:var(--x-primary-400)}.x-slider-select.x-flex.x-direction-row>label{padding:0 .5rem 0 0}.x-slider-select.x-flex.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-slider-select.x-flex.x-direction-column,.x-slider-select.x-flex.x-direction-column-reverse{align-items:inherit}.x-slider-select-max-length{position:absolute;font-size:var(--x-font-size-small);color:var(--x-text-500);padding:0 var(--x-padding-medium);right:0}.x-slider-select:hover:not(.x-disabled) .x-slider-select-process{background-color:var(--x-primary-100)}.x-slider-select:hover:not(.x-disabled) .x-slider-select-button{border-color:var(--x-primary-100)}.x-slider-select-reverse .x-slider-select-inner{padding-right:0;padding-left:.875rem}.x-slider-select-reverse .x-slider-select-rail{margin-left:-.4375rem}.x-slider-select-reverse .x-slider-select-marks{margin-right:.4375rem}.x-slider-select-reverse .x-slider-select-mark{transform:translate(50%)}.x-slider-select-reverse .x-slider-select-track{display:flex;justify-content:flex-end;margin-right:.4375rem}.x-slider-select-reverse .x-slider-select-drags{justify-content:flex-end;right:auto}.x-slider-select-vertical{width:initial;height:12rem}.x-slider-select-vertical .x-slider-select{height:100%}.x-slider-select-vertical .x-slider-select-inner{padding-right:initial;padding-top:.875rem;align-items:initial;justify-content:center;height:100%}.x-slider-select-vertical .x-slider-select-rail{margin-left:initial;margin-top:-.4375rem;height:calc(100% - .875rem);width:calc(calc(var(--x-font-size) + .875rem) / 5)}.x-slider-select-vertical .x-slider-select-track{display:flex;align-items:flex-end;margin-left:initial;margin-bottom:.4375rem;width:calc(calc(var(--x-font-size) + .875rem) / 5);height:100%}.x-slider-select-vertical .x-slider-select-marks{display:flex;align-items:flex-end;justify-content:center;margin-left:initial;margin-bottom:.4375rem;width:calc(calc(var(--x-font-size) + .875rem) / 5);height:100%}.x-slider-select-vertical .x-slider-select-mark{transform:translate(0) translateY(50%)}.x-slider-select-vertical .x-slider-select-mark-label{transform:translate(50%) translateY(0);margin-left:.875rem}.x-slider-select-vertical .x-slider-select-process{height:0%;width:calc(calc(var(--x-font-size) + .875rem) / 5)}.x-slider-select-vertical .x-slider-select-drags{height:100%;width:calc(var(--x-font-size) + .875rem);align-items:flex-end;justify-content:center;right:auto}.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-inner{padding-left:initial;padding-bottom:.875rem;padding-top:initial}.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-rail{margin-top:.4375rem}.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-track,.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-marks{align-items:flex-start;margin-bottom:-.4375rem;margin-right:initial}.x-slider-select-vertical .x-slider-select-reverse .x-slider-select-mark{transform:translate(0) translateY(-50%)}.x-slider-select-range .x-slider-select-process{cursor:pointer}.x-slider-select:not(.x-slider-select-reverse) .x-slider-select-drag{left:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { sliderSelect: [{
                 type: ViewChild,
                 args: ['sliderSelect', { static: true }]
-            }], dragRef: [{
+            }], dragStartRef: [{
+                type: ViewChild,
+                args: ['dragStartRef', { static: true }]
+            }], dragEndRef: [{
                 type: ViewChild,
-                args: ['dragRef', { static: true }]
+                args: ['dragEndRef', { static: true }]
             }], railRef: [{
                 type: ViewChild,
                 args: ['railRef', { static: true }]
             }], processRef: [{
                 type: ViewChild,
                 args: ['processRef', { static: true }]
-            }], tooltip: [{
+            }], getVertical: [{
+                type: HostBinding,
+                args: ['class.x-slider-select-vertical']
+            }], tooltips: [{
+                type: ViewChildren,
+                args: [XTooltipDirective]
+            }], cdkDrag: [{
                 type: ViewChild,
-                args: [XTooltipDirective, { static: true }]
+                args: [CdkDrag]
             }] } });
 
 class XSliderSelectModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectModule, declarations: [XSliderSelectComponent, XSliderSelectProperty], imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule, XTooltipModule, XBaseFormModule], exports: [XSliderSelectComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule, XTooltipModule, XBaseFormModule] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectModule, declarations: [XSliderSelectComponent, XSliderSelectProperty], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DragDropModule,
+            XTooltipModule,
+            XBaseFormModule,
+            XDragModule,
+            XOutletModule], exports: [XSliderSelectComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DragDropModule,
+            XTooltipModule,
+            XBaseFormModule,
+            XDragModule,
+            XOutletModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XSliderSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [XSliderSelectComponent, XSliderSelectProperty],
                     exports: [XSliderSelectComponent],
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule, XTooltipModule, XBaseFormModule]
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        DragDropModule,
+                        XTooltipModule,
+                        XBaseFormModule,
+                        XDragModule,
+                        XOutletModule
+                    ]
                 }]
         }] });