@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-slider.mjs

@@ -1,391 +1,742 @@
-import * as i1 from '@angular/common';
-import { DecimalPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, EventEmitter, output, signal, computed, inject, ChangeDetectorRef, DestroyRef, NgZone, viewChild, ElementRef, afterNextRender, forwardRef, Output, Input, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i3 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import * as i4 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i2 from '@angular/material/slider';
-import { MatSlider, MatSliderModule } from '@angular/material/slider';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
-import { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import * as i5 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-
-class SliderComponent {
-    get startThumbTestId() {
-        return this.testId ? `${this.testId}-start` : 'slider-start-thumb';
-    }
-    get endThumbTestId() {
-        return this.testId ? `${this.testId}-end` : 'slider-end-thumb';
-    }
-    get startInputTestId() {
-        return this.testId ? `${this.testId}-input-start` : 'slider.input-start';
-    }
-    get endInputTestId() {
-        return this.testId ? `${this.testId}-input-end` : 'slider.input-end';
-    }
-    constructor(defaultAppTheme) {
-        this.defaultAppTheme = defaultAppTheme;
-        /**
-         * The maximum value of the slider.
-         *
-         * @type {number}
-         * @default 100
-         */
-        this.max = 100;
-        /**
-         * The minimum value of the slider.
-         *
-         * @type {number}
-         * @default 0
-         */
-        this.min = 0;
-        /**
-         * A flag indicating whether the slider displays values as percentages.
-         *
-         * @type {boolean}
-         * @default true
-         */
-        this.percentage = false;
-        /**
-         * A flag indicating whether the slider is disabled.
-         *
-         * @type {boolean}
-         * @default true
-         */
-        this.disabled = false;
-        /**
-         * The starting value of the slider.
-         *
-         * @type {number}
-         * @default 0
-         */
-        this.sliderStart = 0;
-        /**
-         * The ending value of the slider.
-         *
-         * @type {number}
-         * @default 100
-         */
-        this.sliderEnd = 100;
-        /**
-         * The label for the slider.
-         *
-         * @type {string}
-         * @default ''
-         */
-        this.label = '';
-        /**
-         * Show slider inputs.
-         *
-         * @type {boolean}
-         * @default true
-         */
-        this.showInputs = true;
-        /**
-         * Step number.
-         *
-         * @type {number}
-         * @default 1
-         */
-        this.step = 1;
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof SliderComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         *
-         * Defines the variant slider
-         *
-         * @type {SliderVariant}
-         * @memberof SliderComponent
-         */
-        this.variant = 'range';
-        this.testId = null;
-        /**
-         * Controls whether decimal values are allowed in the input fields.
-         * When true, inputs accept decimal numbers (up to 2 decimal places).
-         * When false, inputs only accept whole numbers.
-         */
-        this.useDecimal = input(false, ...(ngDevMode ? [{ debugName: "useDecimal" }] : /* istanbul ignore next */ []));
-        /**
-         * Controls whether numbers are displayed with thousands separators.
-         * When true, displays numbers like "100,000" instead of "100000".
-         * This is independent of useDecimal - you can have thousands separators
-         * without decimals, or decimals without thousands separators.
-         */
-        this.useThousandsSeparator = input(false, ...(ngDevMode ? [{ debugName: "useThousandsSeparator" }] : /* istanbul ignore next */ []));
-        this.minLabel = input(...(ngDevMode ? [undefined, { debugName: "minLabel" }] : /* istanbul ignore next */ []));
-        this.maxLabel = input(...(ngDevMode ? [undefined, { debugName: "maxLabel" }] : /* istanbul ignore next */ []));
-        this.inputWidth = input(80, ...(ngDevMode ? [{ debugName: "inputWidth" }] : /* istanbul ignore next */ []));
-        /**
-         * Controls whether the value bubble pops above the thumb on hover and while dragging.
-         * Set it to false for scrubber-style sliders whose designs do not show one.
-         * Applies to both the basic and the range variant.
-         */
-        this.showValueBubble = input(true, { ...(ngDevMode ? { debugName: "showValueBubble" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.sliderValueChange = new EventEmitter();
-        /**
-         * Emitted with the current value when the user starts dragging the thumb.
-         * Basic variant only, and never emitted for programmatic value writes, so a consumer
-         * that also drives the slider on a timer can tell a user drag apart from its own write.
-         */
-        this.dragStart = output();
-        /**
-         * Emitted with the released value when the user stops dragging the thumb.
-         * Basic variant only. See {@link dragStart}.
-         */
-        this.dragEnd = output();
-        /**
-         * Emitted with the thumb's current value on every move while the user is dragging it.
-         * Basic variant only, and pointer drag only: keyboard seeks and programmatic writes never
-         * emit it and keep arriving through `sliderValueChange`. See {@link dragStart}.
-         */
-        this.dragMove = output();
-        // Keyboard seeks and writeValue also update ngModel, so only a live pointer drag may emit dragMove.
-        this.isDragging = false;
-        /**
-         * Tracks hover, so the value bubble markup is only mounted while the pointer is over the slider.
-         * Starts true to keep the at-rest markup identical to what the component shipped before
-         * `showValueBubble` existed: Material leaves the bubble invisible until the thumb is active, and
-         * unmounting it changes how the disabled slider's opacity layer rasterises its text.
-         */
-        this.isHovered = signal(true, ...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
-        /** Material renders the value bubble only while `discrete` is set, so gate it on both hover and the input. */
-        this.isDiscrete = computed(() => this.showValueBubble() && this.isHovered(), ...(ngDevMode ? [{ debugName: "isDiscrete" }] : /* istanbul ignore next */ []));
-        this.cdr = inject(ChangeDetectorRef);
-        this.decimalPipe = inject(DecimalPipe);
-        this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
-        this.matSlider = viewChild(MatSlider, ...(ngDevMode ? [{ debugName: "matSlider" }] : /* istanbul ignore next */ []));
-        this.matSliderElement = viewChild(MatSlider, { ...(ngDevMode ? { debugName: "matSliderElement" } : /* istanbul ignore next */ {}), read: ElementRef });
-        this.value = { start: 0, end: 100 };
-        this.translationContext = 'SLIDER.';
-        this.touchedControlName = '';
-        this.onChange = () => { };
-        this.onTouch = () => { };
-        if (defaultAppTheme) {
-            this.applicationTheme = defaultAppTheme;
-            this.cdr.markForCheck();
-        }
-        this.formatLabel = this.formatLabel.bind(this);
-        // Runs after MatSlider has created its own observer, and only in the browser.
-        afterNextRender(() => this.observeRangeResize());
-    }
-    /**
-     * Works around MatSlider's resize handling for the range variant. On a resize, `_onResize()`
-     * repositions the end thumb before the start thumb, and clamps the end thumb so it cannot sit
-     * left of the start thumb's position — which at that point is still the pre-resize one. When the
-     * slider shrinks to under about half its width, the end thumb is clamped to that stale position
-     * and stays there, because nothing repositions it afterwards. Running the resize step once more,
-     * after Material's own observer, places the end thumb against the start thumb's new position.
-     * Growing the slider never clamps, so the extra pass is a no-op there.
-     */
-    observeRangeResize() {
-        const host = this.matSliderElement()?.nativeElement;
-        if (!host || typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        // Created after MatSlider's own observer (afterNextRender runs once its view has initialised), and ResizeObserver
-        // delivers to observers in creation order, so this always runs after Material's pass.
-        const observer = this.ngZone.runOutsideAngular(() => new ResizeObserver(() => {
-            // A single thumb has no sibling to clamp against. Checked here, as `variant` can change later.
-            if (this.isBasicSlider) {
-                return;
-            }
-            const slider = this.matSlider();
-            /* eslint-disable no-underscore-dangle -- MatSlider internals: _onResize repositions the thumbs, _isActive reports a drag */
-            // Material skips resizes mid-drag too; repositioning a thumb under the pointer would make it jump.
-            if (slider?._isActive?.()) {
-                return;
-            }
-            slider?._onResize?.();
-            /* eslint-enable no-underscore-dangle */
-        }));
-        observer.observe(host);
-        this.destroyRef.onDestroy(() => observer.disconnect());
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    writeValue(value) {
-        this.value = value;
-        this.sliderEnd = value.end;
-        this.cdr.markForCheck();
-        // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider
-        setTimeout(() => {
-            this.sliderStart = value.start;
-            this.cdr.markForCheck();
-            if (this.control) {
-                this.control.updateValueAndValidity({ emitEvent: false });
-            }
-        });
-    }
-    onValueChange(ev) {
-        const value = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };
-        if (ev) {
-            value.start = ev;
-            value.end = 0;
-        }
-        this.value = value;
-        this.onChange(value);
-        this.sliderValueChange.emit(value);
-        this.cdr.markForCheck();
-        this.onTouch();
-    }
-    onSliderHover(isHovered) {
-        this.isHovered.set(isHovered);
-    }
-    onDragStart(event) {
-        this.isDragging = true;
-        this.dragStart.emit(event.value);
-    }
-    onDragMove(value) {
-        if (this.isDragging) {
-            this.dragMove.emit(value);
-        }
-    }
-    onDragEnd(event) {
-        this.isDragging = false;
-        this.dragEnd.emit(event.value);
-    }
-    onInputBlur(inputName) {
-        this.touchedControlName = inputName;
-        const value = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };
-        if (this.isValueChanged(value)) {
-            this.onValueChange();
-        }
-    }
-    onInputFocus() {
-        this.touchedControlName = '';
-        this.cdr.markForCheck();
-    }
-    isValueChanged(value) {
-        return this.value.start !== value.start || this.value.end !== value.end;
-    }
-    get hasError() {
-        return (this.max < Number(this.sliderEnd) ||
-            this.min > Number(this.sliderStart) ||
-            this.min > Number(this.sliderEnd) ||
-            this.max < Number(this.sliderStart) ||
-            Number(this.sliderEnd) < Number(this.sliderStart));
-    }
-    get isBasicSlider() {
-        return this.variant === 'basic';
-    }
-    formatLabel(value) {
-        return this.useThousandsSeparator()
-            ? (this.decimalPipe.transform(value, '1.0-0') ?? value.toString())
-            : value.toString();
-    }
-    validate(control) {
-        this.control = control;
-        return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SliderComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SliderComponent, isStandalone: true, selector: "ui-slider", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, sliderStart: { classPropertyName: "sliderStart", publicName: "sliderStart", isSignal: false, isRequired: false, transformFunction: null }, sliderEnd: { classPropertyName: "sliderEnd", publicName: "sliderEnd", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, showInputs: { classPropertyName: "showInputs", publicName: "showInputs", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: false, isRequired: false, transformFunction: null }, useDecimal: { classPropertyName: "useDecimal", publicName: "useDecimal", isSignal: true, isRequired: false, transformFunction: null }, useThousandsSeparator: { classPropertyName: "useThousandsSeparator", publicName: "useThousandsSeparator", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null }, inputWidth: { classPropertyName: "inputWidth", publicName: "inputWidth", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliderValueChange: "sliderValueChange", dragStart: "dragStart", dragEnd: "dragEnd", dragMove: "dragMove" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SliderComponent),
-                multi: true,
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => SliderComponent),
-                multi: true,
-            },
-            provideNgxMask(),
-            DecimalPipe,
-        ], viewQueries: [{ propertyName: "matSlider", first: true, predicate: MatSlider, descendants: true, isSignal: true }, { propertyName: "matSliderElement", first: true, predicate: MatSlider, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [discrete]=\"isDiscrete()\"\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"onSliderHover(true)\"\n        (mouseleave)=\"onSliderHover(false)\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            (dragStart)=\"onDragStart($event)\"\n            (dragEnd)=\"onDragEnd($event)\"\n            [(ngModel)]=\"sliderStart\"\n            (ngModelChange)=\"onDragMove($event)\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            [attr.data-testid]=\"startThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            [attr.data-testid]=\"endThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              [attr.data-testid]=\"endInputTestId\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              [attr.data-testid]=\"endInputTestId\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SliderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-slider', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SliderComponent),
-                            multi: true,
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => SliderComponent),
-                            multi: true,
-                        },
-                        provideNgxMask(),
-                        DecimalPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        MatSliderModule,
-                        FormsModule,
-                        MatInputModule,
-                        MatTooltipModule,
-                        IconComponentModule,
-                        UiTranslatePipe,
-                        NgxMaskDirective,
-                    ], template: "<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [discrete]=\"isDiscrete()\"\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"onSliderHover(true)\"\n        (mouseleave)=\"onSliderHover(false)\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            (dragStart)=\"onDragStart($event)\"\n            (dragEnd)=\"onDragEnd($event)\"\n            [(ngModel)]=\"sliderStart\"\n            (ngModelChange)=\"onDragMove($event)\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            [attr.data-testid]=\"startThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            [attr.data-testid]=\"endThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              [attr.data-testid]=\"endInputTestId\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              [attr.data-testid]=\"endInputTestId\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }], propDecorators: { max: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], percentage: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], sliderStart: [{
-                type: Input
-            }], sliderEnd: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], showInputs: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], applicationTheme: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], useDecimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDecimal", required: false }] }], useThousandsSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "useThousandsSeparator", required: false }] }], minLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLabel", required: false }] }], maxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabel", required: false }] }], inputWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputWidth", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], sliderValueChange: [{
-                type: Output
-            }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], matSlider: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSlider), { isSignal: true }] }], matSliderElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSlider), { ...{ read: ElementRef }, isSignal: true }] }] } });
-
-class SliderComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SliderComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: SliderComponentModule, imports: [SliderComponent], exports: [SliderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SliderComponentModule, imports: [SliderComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SliderComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [SliderComponent],
-                    exports: [SliderComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i1 from "@angular/common";
+import { CommonModule, DecimalPipe } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, ElementRef, EventEmitter, Inject, Input, NgModule, NgZone, Optional, Output, afterNextRender, booleanAttribute, computed, forwardRef, inject, input, output, signal, viewChild } from "@angular/core";
+import * as i3 from "@angular/forms";
+import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
+import * as i4 from "@angular/material/input";
+import { MatInputModule } from "@angular/material/input";
+import * as i2 from "@angular/material/slider";
+import { MatSlider, MatSliderModule } from "@angular/material/slider";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { NgxMaskDirective, provideNgxMask } from "ngx-mask";
+import { UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i5 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+var SliderComponent = class SliderComponent {
+	get startThumbTestId() {
+		return this.testId ? `${this.testId}-start` : "slider-start-thumb";
+	}
+	get endThumbTestId() {
+		return this.testId ? `${this.testId}-end` : "slider-end-thumb";
+	}
+	get startInputTestId() {
+		return this.testId ? `${this.testId}-input-start` : "slider.input-start";
+	}
+	get endInputTestId() {
+		return this.testId ? `${this.testId}-input-end` : "slider.input-end";
+	}
+	constructor(defaultAppTheme) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.max = 100;
+		this.min = 0;
+		this.percentage = false;
+		this.disabled = false;
+		this.sliderStart = 0;
+		this.sliderEnd = 100;
+		this.label = "";
+		this.showInputs = true;
+		this.step = 1;
+		this.applicationTheme = "light";
+		this.variant = "range";
+		this.testId = null;
+		this.useDecimal = input(false, ...ngDevMode ? [{ debugName: "useDecimal" }] : /* istanbul ignore next */ []);
+		this.useThousandsSeparator = input(false, ...ngDevMode ? [{ debugName: "useThousandsSeparator" }] : /* istanbul ignore next */ []);
+		this.minLabel = input(...ngDevMode ? [void 0, { debugName: "minLabel" }] : /* istanbul ignore next */ []);
+		this.maxLabel = input(...ngDevMode ? [void 0, { debugName: "maxLabel" }] : /* istanbul ignore next */ []);
+		this.inputWidth = input(80, ...ngDevMode ? [{ debugName: "inputWidth" }] : /* istanbul ignore next */ []);
+		this.showValueBubble = input(true, {
+			...ngDevMode ? { debugName: "showValueBubble" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.sliderValueChange = new EventEmitter();
+		this.dragStart = output();
+		this.dragEnd = output();
+		this.dragMove = output();
+		this.isDragging = false;
+		this.isHovered = signal(true, ...ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []);
+		this.isDiscrete = computed(() => this.showValueBubble() && this.isHovered(), ...ngDevMode ? [{ debugName: "isDiscrete" }] : /* istanbul ignore next */ []);
+		this.cdr = inject(ChangeDetectorRef);
+		this.decimalPipe = inject(DecimalPipe);
+		this.destroyRef = inject(DestroyRef);
+		this.ngZone = inject(NgZone);
+		this.matSlider = viewChild(MatSlider, ...ngDevMode ? [{ debugName: "matSlider" }] : /* istanbul ignore next */ []);
+		this.matSliderElement = viewChild(MatSlider, {
+			...ngDevMode ? { debugName: "matSliderElement" } : /* istanbul ignore next */ {},
+			read: ElementRef
+		});
+		this.value = {
+			start: 0,
+			end: 100
+		};
+		this.translationContext = "SLIDER.";
+		this.touchedControlName = "";
+		this.onChange = () => {};
+		this.onTouch = () => {};
+		if (defaultAppTheme) {
+			this.applicationTheme = defaultAppTheme;
+			this.cdr.markForCheck();
+		}
+		this.formatLabel = this.formatLabel.bind(this);
+		afterNextRender(() => this.observeRangeResize());
+	}
+	observeRangeResize() {
+		const host = this.matSliderElement()?.nativeElement;
+		if (!host || typeof ResizeObserver === "undefined") return;
+		const observer = this.ngZone.runOutsideAngular(() => new ResizeObserver(() => {
+			if (this.isBasicSlider) return;
+			const slider = this.matSlider();
+			if (slider?._isActive?.()) return;
+			slider?._onResize?.();
+		}));
+		observer.observe(host);
+		this.destroyRef.onDestroy(() => observer.disconnect());
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouch = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	writeValue(value) {
+		this.value = value;
+		this.sliderEnd = value.end;
+		this.cdr.markForCheck();
+		setTimeout(() => {
+			this.sliderStart = value.start;
+			this.cdr.markForCheck();
+			if (this.control) this.control.updateValueAndValidity({ emitEvent: false });
+		});
+	}
+	onValueChange(ev) {
+		const value = {
+			start: Number(this.sliderStart),
+			end: Number(this.sliderEnd)
+		};
+		if (ev) {
+			value.start = ev;
+			value.end = 0;
+		}
+		this.value = value;
+		this.onChange(value);
+		this.sliderValueChange.emit(value);
+		this.cdr.markForCheck();
+		this.onTouch();
+	}
+	onSliderHover(isHovered) {
+		this.isHovered.set(isHovered);
+	}
+	onDragStart(event) {
+		this.isDragging = true;
+		this.dragStart.emit(event.value);
+	}
+	onDragMove(value) {
+		if (this.isDragging) this.dragMove.emit(value);
+	}
+	onDragEnd(event) {
+		this.isDragging = false;
+		this.dragEnd.emit(event.value);
+	}
+	onInputBlur(inputName) {
+		this.touchedControlName = inputName;
+		const value = {
+			start: Number(this.sliderStart),
+			end: Number(this.sliderEnd)
+		};
+		if (this.isValueChanged(value)) this.onValueChange();
+	}
+	onInputFocus() {
+		this.touchedControlName = "";
+		this.cdr.markForCheck();
+	}
+	isValueChanged(value) {
+		return this.value.start !== value.start || this.value.end !== value.end;
+	}
+	get hasError() {
+		return this.max < Number(this.sliderEnd) || this.min > Number(this.sliderStart) || this.min > Number(this.sliderEnd) || this.max < Number(this.sliderStart) || Number(this.sliderEnd) < Number(this.sliderStart);
+	}
+	get isBasicSlider() {
+		return this.variant === "basic";
+	}
+	formatLabel(value) {
+		return this.useThousandsSeparator() ? this.decimalPipe.transform(value, "1.0-0") ?? value.toString() : value.toString();
+	}
+	validate(control) {
+		this.control = control;
+		return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SliderComponent,
+			deps: [{
+				token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
+				optional: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: SliderComponent,
+			isStandalone: true,
+			selector: "ui-slider",
+			inputs: {
+				max: {
+					classPropertyName: "max",
+					publicName: "max",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				min: {
+					classPropertyName: "min",
+					publicName: "min",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				percentage: {
+					classPropertyName: "percentage",
+					publicName: "percentage",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				sliderStart: {
+					classPropertyName: "sliderStart",
+					publicName: "sliderStart",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				sliderEnd: {
+					classPropertyName: "sliderEnd",
+					publicName: "sliderEnd",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				showInputs: {
+					classPropertyName: "showInputs",
+					publicName: "showInputs",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				step: {
+					classPropertyName: "step",
+					publicName: "step",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				variant: {
+					classPropertyName: "variant",
+					publicName: "variant",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				useDecimal: {
+					classPropertyName: "useDecimal",
+					publicName: "useDecimal",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				useThousandsSeparator: {
+					classPropertyName: "useThousandsSeparator",
+					publicName: "useThousandsSeparator",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				minLabel: {
+					classPropertyName: "minLabel",
+					publicName: "minLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxLabel: {
+					classPropertyName: "maxLabel",
+					publicName: "maxLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				inputWidth: {
+					classPropertyName: "inputWidth",
+					publicName: "inputWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showValueBubble: {
+					classPropertyName: "showValueBubble",
+					publicName: "showValueBubble",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				sliderValueChange: "sliderValueChange",
+				dragStart: "dragStart",
+				dragEnd: "dragEnd",
+				dragMove: "dragMove"
+			},
+			providers: [
+				{
+					provide: NG_VALUE_ACCESSOR,
+					useExisting: forwardRef(() => SliderComponent),
+					multi: true
+				},
+				{
+					provide: NG_VALIDATORS,
+					useExisting: forwardRef(() => SliderComponent),
+					multi: true
+				},
+				provideNgxMask(),
+				DecimalPipe
+			],
+			viewQueries: [{
+				propertyName: "matSlider",
+				first: true,
+				predicate: MatSlider,
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "matSliderElement",
+				first: true,
+				predicate: MatSlider,
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [discrete]=\"isDiscrete()\"\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"onSliderHover(true)\"\n        (mouseleave)=\"onSliderHover(false)\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            (dragStart)=\"onDragStart($event)\"\n            (dragEnd)=\"onDragEnd($event)\"\n            [(ngModel)]=\"sliderStart\"\n            (ngModelChange)=\"onDragMove($event)\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            [attr.data-testid]=\"startThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            [attr.data-testid]=\"endThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              [attr.data-testid]=\"endInputTestId\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              [attr.data-testid]=\"endInputTestId\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: CommonModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "directive",
+					type: i1.NgStyle,
+					selector: "[ngStyle]",
+					inputs: ["ngStyle"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatSliderModule
+				},
+				{
+					kind: "component",
+					type: i2.MatSlider,
+					selector: "mat-slider",
+					inputs: [
+						"disabled",
+						"discrete",
+						"showTickMarks",
+						"min",
+						"color",
+						"disableRipple",
+						"max",
+						"step",
+						"displayWith"
+					],
+					exportAs: ["matSlider"]
+				},
+				{
+					kind: "directive",
+					type: i2.MatSliderThumb,
+					selector: "input[matSliderThumb]",
+					inputs: ["value"],
+					outputs: [
+						"valueChange",
+						"dragStart",
+						"dragEnd"
+					],
+					exportAs: ["matSliderThumb"]
+				},
+				{
+					kind: "directive",
+					type: i2.MatSliderRangeThumb,
+					selector: "input[matSliderStartThumb], input[matSliderEndThumb]",
+					exportAs: ["matSliderRangeThumb"]
+				},
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i3.DefaultValueAccessor,
+					selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+				},
+				{
+					kind: "directive",
+					type: i3.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i3.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatInputModule
+				},
+				{
+					kind: "directive",
+					type: i4.MatInput,
+					selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+					inputs: [
+						"disabled",
+						"id",
+						"placeholder",
+						"name",
+						"required",
+						"type",
+						"errorStateMatcher",
+						"aria-describedby",
+						"value",
+						"readonly",
+						"disabledInteractive"
+					],
+					exportAs: ["matInput"]
+				},
+				{
+					kind: "component",
+					type: i4.MatFormField,
+					selector: "mat-form-field",
+					inputs: [
+						"hideRequiredMarker",
+						"color",
+						"floatLabel",
+						"appearance",
+						"subscriptSizing",
+						"hintLabel"
+					],
+					exportAs: ["matFormField"]
+				},
+				{
+					kind: "directive",
+					type: i4.MatLabel,
+					selector: "mat-label"
+				},
+				{
+					kind: "directive",
+					type: i4.MatError,
+					selector: "mat-error, [matError]",
+					inputs: ["id"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatTooltipModule
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i5.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "directive",
+					type: NgxMaskDirective,
+					selector: "input[mask], textarea[mask]",
+					inputs: [
+						"mask",
+						"specialCharacters",
+						"patterns",
+						"prefix",
+						"suffix",
+						"thousandSeparator",
+						"decimalMarker",
+						"dropSpecialCharacters",
+						"hiddenInput",
+						"showMaskTyped",
+						"placeHolderCharacter",
+						"shownMaskExpression",
+						"clearIfNotMatch",
+						"validation",
+						"separatorLimit",
+						"allowNegativeNumbers",
+						"leadZeroDateTime",
+						"leadZero",
+						"triggerOnMaskChange",
+						"apm",
+						"inputTransformFn",
+						"outputTransformFn",
+						"keepCharacterPositions",
+						"instantPrefix"
+					],
+					outputs: ["maskFilled"],
+					exportAs: ["mask", "ngxMask"]
+				},
+				{
+					kind: "pipe",
+					type: i1.AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: i1.DecimalPipe,
+					name: "number"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SliderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-slider",
+			providers: [
+				{
+					provide: NG_VALUE_ACCESSOR,
+					useExisting: forwardRef(() => SliderComponent),
+					multi: true
+				},
+				{
+					provide: NG_VALIDATORS,
+					useExisting: forwardRef(() => SliderComponent),
+					multi: true
+				},
+				provideNgxMask(),
+				DecimalPipe
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				CommonModule,
+				MatSliderModule,
+				FormsModule,
+				MatInputModule,
+				MatTooltipModule,
+				IconComponentModule,
+				UiTranslatePipe,
+				NgxMaskDirective
+			],
+			template: "<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [discrete]=\"isDiscrete()\"\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"onSliderHover(true)\"\n        (mouseleave)=\"onSliderHover(false)\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            (dragStart)=\"onDragStart($event)\"\n            (dragEnd)=\"onDragEnd($event)\"\n            [(ngModel)]=\"sliderStart\"\n            (ngModelChange)=\"onDragMove($event)\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            [attr.data-testid]=\"startThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            [attr.data-testid]=\"endThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              [attr.data-testid]=\"endInputTestId\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              [attr.data-testid]=\"endInputTestId\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: void 0,
+		decorators: [{ type: Optional }, {
+			type: Inject,
+			args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+		}]
+	}],
+	propDecorators: {
+		max: [{ type: Input }],
+		min: [{ type: Input }],
+		percentage: [{ type: Input }],
+		disabled: [{ type: Input }],
+		sliderStart: [{ type: Input }],
+		sliderEnd: [{ type: Input }],
+		label: [{ type: Input }],
+		showInputs: [{ type: Input }],
+		step: [{ type: Input }],
+		applicationTheme: [{ type: Input }],
+		variant: [{ type: Input }],
+		testId: [{ type: Input }],
+		useDecimal: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "useDecimal",
+				required: false
+			}]
+		}],
+		useThousandsSeparator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "useThousandsSeparator",
+				required: false
+			}]
+		}],
+		minLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minLabel",
+				required: false
+			}]
+		}],
+		maxLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLabel",
+				required: false
+			}]
+		}],
+		inputWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputWidth",
+				required: false
+			}]
+		}],
+		showValueBubble: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValueBubble",
+				required: false
+			}]
+		}],
+		sliderValueChange: [{ type: Output }],
+		dragStart: [{
+			type: i0.Output,
+			args: ["dragStart"]
+		}],
+		dragEnd: [{
+			type: i0.Output,
+			args: ["dragEnd"]
+		}],
+		dragMove: [{
+			type: i0.Output,
+			args: ["dragMove"]
+		}],
+		matSlider: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => MatSlider), { isSignal: true }]
+		}],
+		matSliderElement: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => MatSlider), {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var SliderComponentModule = class SliderComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SliderComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SliderComponentModule,
+			imports: [SliderComponent],
+			exports: [SliderComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SliderComponentModule,
+			imports: [SliderComponent]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SliderComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [SliderComponent],
+			exports: [SliderComponent]
+		}]
+	}]
+});
 export { SliderComponent, SliderComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-slider.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-slider.mjs.map