ecabs-components 1.1.3 → 1.1.5

package/fesm2022/ecabs-components.mjs

@@ -50,7 +50,9 @@ import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$3 from '@angular/material/paginator';
 import { map as map$1 } from 'rxjs/operators';
-import * as i3$3 from '@angular/platform-browser';
+import * as i3$3 from '@angular-slider/ngx-slider';
+import { NgxSliderModule } from '@angular-slider/ngx-slider';
+import * as i3$4 from '@angular/platform-browser';
 import { MatSidenavModule } from '@angular/material/sidenav';
 
 class EcabsSpinnerComponent {
@@ -878,7 +880,7 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsInputComponent,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      appDigitsOnly\r\n      [digitsOnly]=\"digitsOnly\"\r\n      [decimal]=\"allowDecimal\"\r\n      [allowHyphen]=\"allowHyphen\"\r\n      class=\"form-field__input\"\r\n      [type]=\"type\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [mini]=\"mini\"\r\n      [maxi]=\"maxi\"\r\n      [disabled]=\"disabled\"\r\n      [maxlength]=\"maxLength\"\r\n      [max]=\"max\"\r\n      [step]=\"step\"\r\n      (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: MinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: MaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      appDigitsOnly\r\n      [digitsOnly]=\"digitsOnly\"\r\n      [decimal]=\"allowDecimal\"\r\n      [allowHyphen]=\"allowHyphen\"\r\n      class=\"form-field__input\"\r\n      [type]=\"type\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      [mini]=\"mini\"\r\n      [maxi]=\"maxi\"\r\n      [disabled]=\"disabled\"\r\n      [maxlength]=\"maxLength\"\r\n      [max]=\"max\"\r\n      [step]=\"step\"\r\n      (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: MinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: MaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputComponent, decorators: [{
             type: Component,
@@ -888,7 +890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsInputComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      appDigitsOnly\r\n      [digitsOnly]=\"digitsOnly\"\r\n      [decimal]=\"allowDecimal\"\r\n      [allowHyphen]=\"allowHyphen\"\r\n      class=\"form-field__input\"\r\n      [type]=\"type\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [mini]=\"mini\"\r\n      [maxi]=\"maxi\"\r\n      [disabled]=\"disabled\"\r\n      [maxlength]=\"maxLength\"\r\n      [max]=\"max\"\r\n      [step]=\"step\"\r\n      (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      appDigitsOnly\r\n      [digitsOnly]=\"digitsOnly\"\r\n      [decimal]=\"allowDecimal\"\r\n      [allowHyphen]=\"allowHyphen\"\r\n      class=\"form-field__input\"\r\n      [type]=\"type\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      [mini]=\"mini\"\r\n      [maxi]=\"maxi\"\r\n      [disabled]=\"disabled\"\r\n      [maxlength]=\"maxLength\"\r\n      [max]=\"max\"\r\n      [step]=\"step\"\r\n      (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { digitsOnly: [{
                 type: Input
             }], allowDecimal: [{
@@ -1392,7 +1394,7 @@ class EcabsSelectComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsSelectComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                appTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  appTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipIfTruncatedDirective, selector: "[matTooltip][appTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                appTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  appTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipIfTruncatedDirective, selector: "[matTooltip][appTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectComponent, decorators: [{
             type: Component,
@@ -5270,6 +5272,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class EcabsSliderComponent extends EcabsElementBaseComponent {
+    injector;
+    slider;
+    max;
+    point;
+    pointsConfig;
+    pointUpdated = new EventEmitter();
+    sliderForm;
+    slideSub;
+    options = {
+        floor: 0,
+        ceil: 0,
+        enforceRange: true,
+        enforceStep: true,
+    };
+    constructor(injector) {
+        super();
+        this.injector = injector;
+    }
+    get value() {
+        return this.sliderForm.get('slider').value;
+    }
+    set value(val) {
+        if (val !== undefined && this.value !== val) {
+            this.sliderForm.setValue({ slider: val });
+            this.onChange(val);
+            this.onTouch(val);
+        }
+    }
+    ngOnInit() {
+        this.sliderForm = new UntypedFormGroup({
+            slider: new UntypedFormControl({ value: 0 }),
+        });
+    }
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+        }
+        this.slideSub = this.sliderForm.valueChanges.subscribe((formVal) => {
+            this.value = formVal?.slider;
+            this.onChange(this.value);
+            this.onTouch(this.value);
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['max'] && changes['max']?.currentValue != changes['max']?.previousValue) {
+            this.options = {
+                floor: this.pointsConfig.floor,
+                ceil: this.pointsConfig.ceil,
+                step: this.pointsConfig.step,
+                maxLimit: this.max,
+                tickStep: this.pointsConfig.tickStep,
+                showTicks: true,
+                enforceRange: true,
+                enforceStep: true,
+            };
+        }
+    }
+    onChangeValue($event) {
+        this.pointUpdated.emit($event.value);
+    }
+    ngOnDestroy() {
+        this.slideSub?.unsubscribe();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouch = () => { };
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSliderComponent, selector: "ecabs-slider", inputs: { max: "max", point: "point", pointsConfig: "pointsConfig" }, outputs: { pointUpdated: "pointUpdated" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: EcabsSliderComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\r\n    <ngx-slider\r\n      #slider\r\n      class=\"custom-slider\"\r\n      [formControlName]=\"'slider'\"\r\n      [value]=\"point\"\r\n      name=\"slider\"\r\n      (userChangeEnd)=\"onChangeValue($event)\"\r\n      [options]=\"options\"\r\n    ></ngx-slider>\r\n  </form>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: EcabsSliderComponent,
+                            multi: true,
+                        },
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\r\n    <ngx-slider\r\n      #slider\r\n      class=\"custom-slider\"\r\n      [formControlName]=\"'slider'\"\r\n      [value]=\"point\"\r\n      name=\"slider\"\r\n      (userChangeEnd)=\"onChangeValue($event)\"\r\n      [options]=\"options\"\r\n    ></ngx-slider>\r\n  </form>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { slider: [{
+                type: ViewChild,
+                args: ['slider']
+            }], max: [{
+                type: Input
+            }], point: [{
+                type: Input
+            }], pointsConfig: [{
+                type: Input
+            }], pointUpdated: [{
+                type: Output
+            }] } });
+
+class EcabsSliderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderModule, declarations: [EcabsSliderComponent], imports: [CommonModule, ElementWrapperModule, FormsModule, ReactiveFormsModule, NgxSliderModule], exports: [EcabsSliderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderModule, imports: [CommonModule, ElementWrapperModule, FormsModule, ReactiveFormsModule, NgxSliderModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsSliderComponent],
+                    imports: [CommonModule, ElementWrapperModule, FormsModule, ReactiveFormsModule, NgxSliderModule],
+                    exports: [EcabsSliderComponent],
+                }]
+        }] });
+
 class EcabsTruncatePipe {
     transform(value, limit = 24, trimAtWords = false, trail = '...') {
         if (trimAtWords) {
@@ -5425,13 +5550,13 @@ class EcabsMenuItemsComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, deps: [{ token: UnsubscribeService }, { token: i5.MatIconRegistry }, { token: i3$3.DomSanitizer }, { token: i4$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, deps: [{ token: UnsubscribeService }, { token: i5.MatIconRegistry }, { token: i3$4.DomSanitizer }, { token: i4$3.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: { menuItems: "menuItems", minimizeSidebar: "minimizeSidebar", truncateTo: "truncateTo" }, outputs: { toggleSidebar: "toggleSidebar" }, providers: [UnsubscribeService], usesOnChanges: true, ngImport: i0, template: "<ul>\r\n  <li\r\n    *ngFor=\"let item of menuItems; let i = index\"\r\n    class=\"mb-2 hover:text-brand-dark cursor-pointer\"\r\n    [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\r\n  >\r\n    <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\r\n      [routerLink]=\"item.url ? [item.url] : []\"\r\n      class=\"p-4 flex items-center h-max\"\r\n      [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\r\n    >\r\n      <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\r\n                class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\r\n        {{ item.icon }}\r\n      </mat-icon>\r\n      <span *ngIf=\"!minimizeSidebar\"\r\n            class=\"inline-block align-middle\">\r\n        {{ item.title }}\r\n      </span>\r\n    </a>\r\n    <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n      <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\r\n    </ng-container>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #firstChildren let-subItems=\"subItems\">\r\n  <ng-container *ngIf=\"!minimizeSidebar\">\r\n    <ul class=\"ml-12\">\r\n      <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\r\n        <a #rla=\"routerLinkActive\"\r\n           (click)=\"toggleSubItem(item, subItems)\"\r\n           class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\r\n           [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n           [routerLink]=\"item.url ? [item.url] : []\"\r\n           [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n        >\r\n          <span [title]=\"item.title\">\r\n            {{ item.title | truncate: truncateTo }}\r\n          </span>\r\n          <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\r\n            <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\r\n              keyboard_arrow_right\r\n            </mat-icon>\r\n          </div>\r\n        </a>\r\n        <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\r\n        </ng-container>\r\n      </li>\r\n    </ul>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #secondChildren let-subItems=\"subItems\">\r\n  <ul class=\"ml-3\">\r\n    <li *ngFor=\"let item of subItems\">\r\n      <a #rla=\"routerLinkActive\"\r\n         [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n         [routerLink]=\"item.url ? [item.url] : []\"\r\n         [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n         class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\r\n        <span>{{ item.title }}</span>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecabs-menu-items', providers: [UnsubscribeService], template: "<ul>\r\n  <li\r\n    *ngFor=\"let item of menuItems; let i = index\"\r\n    class=\"mb-2 hover:text-brand-dark cursor-pointer\"\r\n    [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\r\n  >\r\n    <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\r\n      [routerLink]=\"item.url ? [item.url] : []\"\r\n      class=\"p-4 flex items-center h-max\"\r\n      [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\r\n    >\r\n      <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\r\n                class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\r\n        {{ item.icon }}\r\n      </mat-icon>\r\n      <span *ngIf=\"!minimizeSidebar\"\r\n            class=\"inline-block align-middle\">\r\n        {{ item.title }}\r\n      </span>\r\n    </a>\r\n    <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n      <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\r\n    </ng-container>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #firstChildren let-subItems=\"subItems\">\r\n  <ng-container *ngIf=\"!minimizeSidebar\">\r\n    <ul class=\"ml-12\">\r\n      <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\r\n        <a #rla=\"routerLinkActive\"\r\n           (click)=\"toggleSubItem(item, subItems)\"\r\n           class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\r\n           [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n           [routerLink]=\"item.url ? [item.url] : []\"\r\n           [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n        >\r\n          <span [title]=\"item.title\">\r\n            {{ item.title | truncate: truncateTo }}\r\n          </span>\r\n          <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\r\n            <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\r\n              keyboard_arrow_right\r\n            </mat-icon>\r\n          </div>\r\n        </a>\r\n        <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\r\n        </ng-container>\r\n      </li>\r\n    </ul>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #secondChildren let-subItems=\"subItems\">\r\n  <ul class=\"ml-3\">\r\n    <li *ngFor=\"let item of subItems\">\r\n      <a #rla=\"routerLinkActive\"\r\n         [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n         [routerLink]=\"item.url ? [item.url] : []\"\r\n         [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n         class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\r\n        <span>{{ item.title }}</span>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}\n"] }]
-        }], ctorParameters: function () { return [{ type: UnsubscribeService }, { type: i5.MatIconRegistry }, { type: i3$3.DomSanitizer }, { type: i4$3.Router }]; }, propDecorators: { menuItems: [{
+        }], ctorParameters: function () { return [{ type: UnsubscribeService }, { type: i5.MatIconRegistry }, { type: i3$4.DomSanitizer }, { type: i4$3.Router }]; }, propDecorators: { menuItems: [{
                 type: Input
             }], minimizeSidebar: [{
                 type: Input
@@ -5980,5 +6105,5 @@ const removeEmpty = (o, exceptProperties = []) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonsComponent, DynamicBgColorDirective, DynamicBgColorDirectiveModule, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsSidebarComponent, EcabsSidebarModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTruncatePipe, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, MaskTimeDirective, MaskTimeDirectiveModule, MaxDirective, MinDirective, MinMaxDirectiveModule, TableComponent, TooltipIfTruncatedDirective, TooltipIfTruncatedDirectiveModule, UnsubscribeService, ValidationComponent, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
+export { ButtonsComponent, DynamicBgColorDirective, DynamicBgColorDirectiveModule, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTruncatePipe, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, MaskTimeDirective, MaskTimeDirectiveModule, MaxDirective, MinDirective, MinMaxDirectiveModule, TableComponent, TooltipIfTruncatedDirective, TooltipIfTruncatedDirectiveModule, UnsubscribeService, ValidationComponent, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
 //# sourceMappingURL=ecabs-components.mjs.map