@fundamental-ngx/core 0.45.1 → 0.46.0-rc.0

package/fesm2022/fundamental-ngx-core-slider.mjs

@@ -1,25 +1,23 @@
 import * as i0 from '@angular/core';
 import { Directive, Optional, Input, forwardRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, ViewChild, ViewChildren, NgModule } from '@angular/core';
-import * as i5 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i7 from '@angular/forms';
+import { NgTemplateOutlet, NgIf, NgFor, AsyncPipe, CommonModule } from '@angular/common';
+import * as i6 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { __decorate, __metadata } from 'tslib';
 import { LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW, ENTER, SPACE } from '@angular/cdk/keycodes';
-import * as i1 from '@angular/cdk/platform';
+import * as i1$1 from '@angular/cdk/platform';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i2 from '@angular/cdk/a11y';
 import { Subject, BehaviorSubject, fromEvent, combineLatest, of } from 'rxjs';
 import { startWith, debounceTime, takeUntil, skip, map, switchMap, distinctUntilChanged, mapTo, take } from 'rxjs/operators';
-import * as i6 from '@fundamental-ngx/core/popover';
+import * as i5 from '@fundamental-ngx/core/popover';
 import { PopoverComponent, PopoverModule } from '@fundamental-ngx/core/popover';
-import * as i3 from '@fundamental-ngx/cdk/utils';
-import { KeyUtil, applyCssClass, OnlyDigitsModule } from '@fundamental-ngx/cdk/utils';
+import * as i1 from '@fundamental-ngx/cdk/utils';
+import { KeyUtil, OnlyDigitsDirective, applyCssClass, OnlyDigitsModule } from '@fundamental-ngx/cdk/utils';
 import { registerFormItemControl } from '@fundamental-ngx/core/form';
 import * as i4 from '@fundamental-ngx/core/content-density';
 import { contentDensityObserverProviders, ContentDensityMode, ContentDensityModule } from '@fundamental-ngx/core/content-density';
-import * as i9 from '@fundamental-ngx/i18n';
-import { I18nModule } from '@fundamental-ngx/i18n';
+import { FdTranslatePipe, I18nModule } from '@fundamental-ngx/i18n';
 
 var SliderValueTargets;
 (function (SliderValueTargets) {
@@ -31,16 +29,19 @@ var SliderRangeHandles;
 (function (SliderRangeHandles) {
     SliderRangeHandles[SliderRangeHandles["First"] = 0] = "First";
     SliderRangeHandles[SliderRangeHandles["Second"] = 1] = "Second";
+    SliderRangeHandles[SliderRangeHandles["Both"] = 2] = "Both";
 })(SliderRangeHandles || (SliderRangeHandles = {}));
 
 const MIN_DISTANCE_BETWEEN_TICKS = 8;
 
 class SliderPositionDirective {
     /** @hidden */
-    constructor(_cd, _elementRef, _rtlService) {
-        this._cd = _cd;
+    constructor(_elementRef, _renderer, _rtlService) {
         this._elementRef = _elementRef;
+        this._renderer = _renderer;
         this._rtlService = _rtlService;
+        /** Whether the slider is rendered vertically. */
+        this.vertical = false;
         /** @hidden */
         this._isRtl = false;
     }
@@ -60,9 +61,12 @@ class SliderPositionDirective {
     }
     /** @hidden */
     _setPosition() {
-        const { style } = this._elementRef.nativeElement;
-        style.left = !this._isRtl ? `${this.position}%` : 'unset';
-        style.right = this._isRtl ? `${this.position}%` : 'unset';
+        if (this.vertical) {
+            this._renderer.setStyle(this._elementRef.nativeElement, 'bottom', `${this.position}%`);
+            return;
+        }
+        this._renderer.setStyle(this._elementRef.nativeElement, 'left', !this._isRtl ? `${this.position}%` : 'unset');
+        this._renderer.setStyle(this._elementRef.nativeElement, 'right', this._isRtl ? `${this.position}%` : 'unset');
     }
     /** @hidden Rtl change subscription */
     _subscribeToRtl() {
@@ -73,19 +77,22 @@ class SliderPositionDirective {
             this._setPosition();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SliderPositionDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i3.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: SliderPositionDirective, selector: "[fd-slider-position]", inputs: { position: "position" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SliderPositionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: SliderPositionDirective, isStandalone: true, selector: "[fd-slider-position]", inputs: { position: "position", vertical: "vertical" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SliderPositionDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[fd-slider-position]'
+                    selector: '[fd-slider-position]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i3.RtlService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.RtlService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { position: [{
                 type: Input
+            }], vertical: [{
+                type: Input
             }] } });
 
 const SLIDER_VALUE_ACCESSOR = {
@@ -180,6 +187,10 @@ class SliderComponent {
         this.hideProgressBar = false;
         /** Whether the control is disabled. */
         this.disabled = false;
+        /**
+         * Whether slider should have vertical alignment.
+         */
+        this.vertical = false;
         /** @hidden */
         this._position = 0;
         /** @hidden */
@@ -212,6 +223,8 @@ class SliderComponent {
          */
         this._useSliderValuePrefix = true;
         /** @hidden */
+        this._handles = SliderRangeHandles;
+        /** @hidden */
         this._min = 0;
         /** @hidden */
         this._max = 100;
@@ -246,6 +259,23 @@ class SliderComponent {
         this.onTouched = () => { };
         _contentDensityObserver.subscribe();
     }
+    /**
+     * @hidden
+     * CssClassBuilder interface implementation
+     * function must return single string
+     * function is responsible for order which css classes are applied
+     */
+    buildComponentCssClass() {
+        return [
+            'fd-slider',
+            this.disabled ? 'is-disabled' : '',
+            this._isRange ? 'fd-slider--range' : '',
+            this.showTicks && this.showTicksLabels ? 'fd-slider--with-labels' : '',
+            this.vertical ? 'fd-slider--vertical' : '',
+            this.class,
+            this._platform.EDGE || this._platform.TRIDENT ? 'fd-slider__alternative-tick-width' : ''
+        ];
+    }
     /** @hidden */
     ngOnInit() {
         this._subscribeToRtl();
@@ -274,10 +304,6 @@ class SliderComponent {
         this._onDestroy$.complete();
     }
     /** @hidden */
-    isRtl() {
-        return this._rtlService?.rtl.getValue();
-    }
-    /** @hidden */
     getValuenow(position, sliderValueTarget) {
         return this.customValues.length > 0
             ? this.customValues[position].label
@@ -291,22 +317,6 @@ class SliderComponent {
     get maxValue() {
         return this.customValues.length > 0 ? this.customValues[this.max].label : this.max;
     }
-    /**
-     * @hidden
-     * CssClassBuilder interface implementation
-     * function must return single string
-     * function is responsible for order which css classes are applied
-     */
-    buildComponentCssClass() {
-        return [
-            'fd-slider',
-            this.disabled ? 'is-disabled' : '',
-            this._isRange ? 'fd-slider--range' : '',
-            this.showTicks && this.showTicksLabels ? 'fd-slider--with-labels' : '',
-            this.class,
-            this._platform.EDGE || this._platform.TRIDENT ? 'fd-slider__alternative-tick-width' : ''
-        ];
-    }
     /** @hidden */
     registerOnChange(fn) {
         this.onChange = fn;
@@ -333,18 +343,43 @@ class SliderComponent {
         this.handle.nativeElement.focus();
     }
     /** @hidden */
-    onHandleClick(event) {
+    onHandleClick(event, group = false) {
         if (this.disabled) {
             return;
         }
+        let firstHandleCoords;
+        let rangeSliderStartCoords;
+        if (group) {
+            rangeSliderStartCoords = {
+                x: event.clientX,
+                y: event.clientY
+            };
+            const firstHandleRect = this.rangeHandle1.nativeElement.getBoundingClientRect();
+            firstHandleCoords = {
+                x: firstHandleRect.x + firstHandleRect.width / 2,
+                y: firstHandleRect.y + firstHandleRect.height / 2
+            };
+        }
         const unsubscribeFromMousemove = this._renderer.listen('document', 'mousemove', (moveEvent) => {
             this._updatePopoversPosition();
             if (!this._isRange) {
                 this._setValue(this._calculateValueFromPointerPosition(moveEvent));
                 return;
             }
+            let coords = {
+                clientX: moveEvent.clientX,
+                clientY: moveEvent.clientY
+            };
             let handleIndex;
-            if (event.target === this.rangeHandle1.nativeElement) {
+            if (group) {
+                handleIndex = SliderRangeHandles.Both;
+                // Mimic dragging first handle to calculate the difference between old and new values.
+                coords = {
+                    clientX: firstHandleCoords.x + (moveEvent.clientX - rangeSliderStartCoords.x),
+                    clientY: firstHandleCoords.y + (moveEvent.clientY - rangeSliderStartCoords.y)
+                };
+            }
+            else if (event.target === this.rangeHandle1.nativeElement) {
                 handleIndex = SliderRangeHandles.First;
             }
             else if (event.target === this.rangeHandle2.nativeElement) {
@@ -353,7 +388,7 @@ class SliderComponent {
             else {
                 return;
             }
-            const value = this._calculateValueFromPointerPosition(moveEvent, false);
+            const value = this._calculateValueFromPointerPosition(coords, false);
             this._setRangeHandleValueAndPosition(handleIndex, value);
             this._setValue(this._constructRangeModelValue());
         });
@@ -363,7 +398,7 @@ class SliderComponent {
         });
     }
     /** @hidden */
-    onKeyDown(event) {
+    onKeyDown(event, handle) {
         if (this.disabled) {
             return;
         }
@@ -372,47 +407,24 @@ class SliderComponent {
             return;
         }
         event.preventDefault();
-        const diff = event.shiftKey ? this.jump : this.step;
-        let newValue = null;
-        let prevValue = this._position;
-        let handleIndex;
-        if (this._isRange) {
-            if (event.target === this.rangeHandle1.nativeElement) {
-                prevValue = this._handle1Value;
-                handleIndex = SliderRangeHandles.First;
-            }
-            else if (event.target === this.rangeHandle2.nativeElement) {
-                prevValue = this._handle2Value;
-                handleIndex = SliderRangeHandles.Second;
-            }
-        }
-        if (this.isRtl()) {
-            if (KeyUtil.isKeyCode(event, LEFT_ARROW) || KeyUtil.isKeyCode(event, UP_ARROW)) {
-                newValue = prevValue + diff;
-            }
-            if (KeyUtil.isKeyCode(event, RIGHT_ARROW) || KeyUtil.isKeyCode(event, DOWN_ARROW)) {
-                newValue = prevValue - diff;
-            }
-        }
-        else {
-            if (KeyUtil.isKeyCode(event, LEFT_ARROW) || KeyUtil.isKeyCode(event, DOWN_ARROW)) {
-                newValue = prevValue - diff;
-            }
-            if (KeyUtil.isKeyCode(event, RIGHT_ARROW) || KeyUtil.isKeyCode(event, UP_ARROW)) {
-                newValue = prevValue + diff;
-            }
-        }
-        if (newValue === null) {
+        const upActionKey = KeyUtil.isKeyCode(event, [UP_ARROW, this._isRtl ? LEFT_ARROW : RIGHT_ARROW]);
+        const downActionKey = KeyUtil.isKeyCode(event, [DOWN_ARROW, this._isRtl ? RIGHT_ARROW : LEFT_ARROW]);
+        if (!upActionKey && !downActionKey) {
             return;
         }
-        newValue = this._processNewValue(newValue, !this._isRange);
+        const diff = event.shiftKey ? this.jump : this.step;
+        let newValue = null;
         if (!this._isRange) {
+            newValue = this._position + diff * (upActionKey ? 1 : -1);
+            if (newValue === null) {
+                return;
+            }
+            newValue = this._processNewValue(newValue, !this._isRange);
             this._setValue(newValue);
+            this._updatePopoversPosition();
+            return;
         }
-        else if (handleIndex) {
-            this._setRangeHandleValueAndPosition(handleIndex, newValue);
-            this._setValue(this._constructRangeModelValue());
-        }
+        this._handleRangeKeydown(handle === SliderRangeHandles.Both ? [SliderRangeHandles.First, SliderRangeHandles.Second] : handle, diff, upActionKey);
         this._updatePopoversPosition();
     }
     /** @hidden */
@@ -436,6 +448,27 @@ class SliderComponent {
         this._updatePopoversPosition();
     }
     /** @hidden */
+    _handleRangeKeydown(handles, diff, up) {
+        handles = Array.isArray(handles) ? handles : [handles];
+        const valueMap = new Map();
+        handles.forEach((handle) => {
+            const prevValue = handle === SliderRangeHandles.First ? this._handle1Value : this._handle2Value;
+            let newValue = prevValue + diff * (up ? 1 : -1);
+            if (newValue === null) {
+                return;
+            }
+            newValue = this._processNewValue(newValue, !this._isRange);
+            valueMap.set(handle, { prev: prevValue, current: newValue });
+        });
+        if (Array.from(valueMap.values()).some((entry) => entry.current === entry.prev)) {
+            return;
+        }
+        valueMap.forEach((entry, handle) => {
+            this._setRangeHandleValueAndPosition(handle, entry.current);
+        });
+        this._setValue(this._constructRangeModelValue());
+    }
+    /** @hidden */
     _setValue(value, emitEvent = true) {
         if (this._isRange) {
             this._initRangeMode((value ?? [0.0]));
@@ -455,9 +488,9 @@ class SliderComponent {
         this._popovers.forEach((popover) => popover.refreshPosition());
     }
     /** @hidden */
-    _calculateValueFromPointerPosition(event, takeCustomValue = true) {
-        const { left, width } = this.trackEl.nativeElement.getBoundingClientRect();
-        let percentage = (event.clientX - left) / width;
+    _calculateValueFromPointerPosition(coords, takeCustomValue = true) {
+        const { left, width, bottom, height } = this.trackEl.nativeElement.getBoundingClientRect();
+        let percentage = this.vertical ? (bottom - coords.clientY) / height : (coords.clientX - left) / width;
         if (this._isRtl) {
             percentage = 1 - percentage;
         }
@@ -493,10 +526,25 @@ class SliderComponent {
             this._handle1Value = value;
             this._handle1Position = position;
         }
-        if (handleIndex === SliderRangeHandles.Second) {
+        else if (handleIndex === SliderRangeHandles.Second) {
             this._handle2Value = value;
             this._handle2Position = position;
         }
+        else if (handleIndex === SliderRangeHandles.Both) {
+            // Calculate how much steps being skipped.
+            const oldValueIndex = this._valuesBySteps.indexOf(this._handle1Value);
+            const newValueIndex = this._valuesBySteps.indexOf(value);
+            const diff = oldValueIndex - newValueIndex;
+            const handle2ValueIndex = this._valuesBySteps.indexOf(this._handle2Value);
+            if (diff === 0 || this._valuesBySteps.length <= handle2ValueIndex - diff) {
+                return;
+            }
+            const positionShift = position - this._handle1Position;
+            this._handle1Position = position;
+            this._handle2Position = this._handle2Position + positionShift;
+            this._handle1Value = value;
+            this._handle2Value = this._valuesBySteps[handle2ValueIndex - diff];
+        }
         this._rangeProgress = Math.abs(this._handle2Position - this._handle1Position);
     }
     /** @hidden */
@@ -593,7 +641,8 @@ class SliderComponent {
         if (!this.trackEl || !this.trackEl.nativeElement) {
             return;
         }
-        return Math.floor(this.trackEl.nativeElement.getBoundingClientRect().width / MIN_DISTANCE_BETWEEN_TICKS);
+        const { width, height } = this.trackEl.nativeElement.getBoundingClientRect();
+        return Math.floor((this.vertical ? height : width) / MIN_DISTANCE_BETWEEN_TICKS);
     }
     /** @hidden */
     _calcProgress(value, skipRtl = false) {
@@ -759,8 +808,8 @@ class SliderComponent {
         }
         return of(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.Platform }, { token: i2.LiveAnnouncer }, { token: i3.RtlService, optional: true }, { token: i4.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SliderComponent, selector: "fd-slider", inputs: { id: "id", class: "class", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", min: "min", max: "max", step: "step", jump: "jump", tickmarksBetweenLabels: "tickmarksBetweenLabels", mode: "mode", showTicks: "showTicks", showTicksLabels: "showTicksLabels", customValues: "customValues", tooltipMode: "tooltipMode", hideProgressBar: "hideProgressBar", disabled: "disabled", value: "value" }, host: { listeners: { "mouseenter": "this._componentHovered$.next(true)", "mouseleave": "this._componentHovered$.next(false)", "focusout": "onTouched()" }, properties: { "attr.id": "this.id", "class.fd-slider--range": "this._isRange" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1$1.Platform }, { token: i2.LiveAnnouncer }, { token: i1.RtlService, optional: true }, { token: i4.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SliderComponent, isStandalone: true, selector: "fd-slider", inputs: { id: "id", class: "class", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", min: "min", max: "max", step: "step", jump: "jump", tickmarksBetweenLabels: "tickmarksBetweenLabels", mode: "mode", showTicks: "showTicks", showTicksLabels: "showTicksLabels", customValues: "customValues", tooltipMode: "tooltipMode", hideProgressBar: "hideProgressBar", disabled: "disabled", vertical: "vertical", value: "value" }, host: { listeners: { "mouseenter": "this._componentHovered$.next(true)", "mouseleave": "this._componentHovered$.next(false)", "focusout": "onTouched()" }, properties: { "attr.id": "this.id", "class.fd-slider--range": "this._isRange" } }, providers: [
             SLIDER_VALUE_ACCESSOR,
             registerFormItemControl(SliderComponent),
             contentDensityObserverProviders({
@@ -769,7 +818,7 @@ class SliderComponent {
                     [ContentDensityMode.COZY]: 'fd-slider--lg'
                 }
             })
-        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, read: ElementRef }, { propertyName: "handle", first: true, predicate: ["handle"], descendants: true, read: ElementRef }, { propertyName: "rangeHandle1", first: true, predicate: ["rangeHandle1"], descendants: true, read: ElementRef }, { propertyName: "rangeHandle2", first: true, predicate: ["rangeHandle2"], descendants: true, read: ElementRef }, { propertyName: "_popovers", predicate: PopoverComponent, descendants: true }, { propertyName: "_sliderTooltipWrappers", predicate: ["sliderTooltipWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-slider__inner\">\n    <ng-container *ngTemplateOutlet=\"_isRange ? rangeMode : singleMode\"></ng-container>\n\n    <div class=\"fd-slider__track\" (click)=\"onTrackClick($event)\" #track>\n        <ng-container *ngTemplateOutlet=\"_isRange ? rangeModeTrack : singleModeTrack\"></ng-container>\n    </div>\n\n    <div class=\"fd-slider__tick-wrapper\">\n        <div class=\"fd-slider__ticks\" (click)=\"onTrackClick($event)\">\n            <ng-container *ngIf=\"showTicks\">\n                <ng-container *ngFor=\"let tick of _tickMarks; index as i\">\n                    <div\n                        class=\"fd-slider__tick\"\n                        fd-slider-position\n                        [position]=\"tick.position || 0\"\n                        [class.fd-slider__tick--in-range]=\"\n                            !hideProgressBar &&\n                            (_isRange\n                                ? tick.value >= _position[0] && tick.value <= _position[1]\n                                : tick.value <= _position)\n                        \"\n                    ></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <div class=\"fd-slider__labels\" *ngIf=\"showTicks && showTicksLabels\">\n            <ng-container *ngFor=\"let tick of _tickMarks; index as i; last as last; first as first\">\n                <div\n                    *ngIf=\"first || last || i % tickmarksBetweenLabels === 0\"\n                    class=\"fd-slider__label\"\n                    fd-slider-position\n                    [position]=\"tick.position || 0\"\n                >\n                    {{ tick.label }}\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-template #singleModeTrack>\n    <div *ngIf=\"!hideProgressBar\" class=\"fd-slider__track-range\" [style.width.%]=\"_progress\"></div>\n</ng-template>\n\n<ng-template #rangeModeTrack>\n    <div\n        *ngIf=\"!hideProgressBar\"\n        class=\"fd-slider__track-range\"\n        [style.width.%]=\"_rangeProgress\"\n        fd-slider-position\n        [position]=\"_handle1Position < _handle2Position ? _handle1Position : _handle2Position\"\n    ></div>\n</ng-template>\n\n<ng-template #singleMode>\n    <div\n        #handle\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.singleMinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? singleSliderPopover : null\"\n        [attr.aria-valuemin]=\"'coreSlider.singleValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.singleValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.singleValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER) })\n                : getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.singleValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER) })\n                : getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER)\n        \"\n        fd-slider-position\n        [position]=\"_progress\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (focus)=\"_handleFocused$.next(true)\"\n        (blur)=\"_handleFocused$.next(false)\"\n        (keydown)=\"onKeyDown($event)\"\n    ></div>\n\n    <fd-popover\n        #singleSliderPopover\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"handle\"\n        [disabled]=\"!tooltipMode\"\n        class=\"fd-popover--slider\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.SINGLE_SLIDER, position: _position }\n            \"\n        ></ng-container>\n    </fd-popover>\n</ng-template>\n\n<ng-template #rangeMode>\n    <div\n        #rangeHandle1\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.multipleHandle1MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? rangeSliderPopover1 : null\"\n        [attr.aria-valuemin]=\"'coreSlider.multipleHandle1ValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.multipleHandle1ValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle1ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1) })\n                : getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle1ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1) })\n                : getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1)\n        \"\n        fd-slider-position\n        [position]=\"_handle1Position\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"_rangeHandle1Focused$.next(true)\"\n        (blur)=\"_rangeHandle1Focused$.next(false)\"\n    ></div>\n\n    <div\n        #rangeHandle2\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.multipleHandle2MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? rangeSliderPopover2 : null\"\n        [attr.aria-valuemin]=\"'coreSlider.multipleHandle2ValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.multipleHandle2ValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle2ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2) })\n                : getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle2ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2) })\n                : getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2)\n        \"\n        fd-slider-position\n        [position]=\"_handle2Position\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"_rangeHandle2Focused$.next(true)\"\n        (blur)=\"_rangeHandle2Focused$.next(false)\"\n    ></div>\n\n    <fd-popover\n        #rangeSliderPopover1\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"rangeHandle1\"\n        [disabled]=\"!tooltipMode\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        class=\"fd-popover--slider\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.RANGE_SLIDER1, position: _handle1Value }\n            \"\n        ></ng-container>\n    </fd-popover>\n\n    <fd-popover\n        #rangeSliderPopover2\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"rangeHandle2\"\n        [disabled]=\"!tooltipMode\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        class=\"fd-popover--slider\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.RANGE_SLIDER2, position: _handle2Value }\n            \"\n        ></ng-container>\n    </fd-popover>\n</ng-template>\n\n<ng-template #popoverInner let-target=\"target\" let-position=\"position\">\n    <div\n        #sliderTooltipWrapper\n        class=\"fd-slider--tooltip-wrapper\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\"\n        (mouseenter)=\"_popoverInputFieldHovered$.next(true)\"\n        (mouseleave)=\"_popoverInputFieldHovered$.next(false)\"\n    >\n        <div *ngIf=\"(customValues && customValues.length > 0) || tooltipMode === 'readonly'\" class=\"fd-slider--tooltip\">\n            {{ customValues && customValues.length > 0 ? customValues[position].label : _popoverValueRef[target] }}\n        </div>\n\n        <input\n            #popoverInputField\n            tabindex=\"-1\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            fdkOnlyDigits\n            [decimal]=\"true\"\n            [style.width.ch]=\"('' + _popoverValueRef[target]).length + 2\"\n            class=\"fd-input fd-slider--tooltip {{ _popoverInputFieldClass }}\"\n            *ngIf=\"customValues?.length === 0 && tooltipMode === 'editable'\"\n            [(ngModel)]=\"_popoverValueRef[target]\"\n            (blur)=\"_updateValueFromInput(popoverInputField.value, target)\"\n            (keydown.enter)=\"_updateValueFromInput(popoverInputField.value, target)\"\n            (focus)=\"_popoverInputFieldFocused$.next(true)\"\n            (blur)=\"_popoverInputFieldFocused$.next(false)\"\n        />\n    </div>\n</ng-template>\n", styles: [".fd-slider{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;min-width:4rem;padding:0;padding:1rem calc(var(--fdSlider_Handle_Width) * .5 + .125rem);position:relative}.fd-slider:after,.fd-slider:before{box-sizing:inherit;font-size:inherit}.fd-slider.is-disabled,.fd-slider:disabled,.fd-slider[aria-disabled=true]{cursor:not-allowed}.fd-slider--lg{padding-left:calc(var(--fdSlider_Mobile_Handle_Width) * .5 + .125rem);padding-right:calc(var(--fdSlider_Mobile_Handle_Width) * .5 + .125rem)}.fd-slider__inner{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__inner:after,.fd-slider__inner:before{-webkit-box-sizing:inherit;-webkit-box-sizing:border-box;-webkit-transform:translateY(-50%);background-color:var(--fdSlider_Endpoint_Active_Background);border:0;border:var(--fdSlider_Endpoint_Active_Border);border-radius:50%;box-sizing:inherit;box-sizing:border-box;color:var(--sapTextColor);content:\"\";font-family:var(--sapFontFamily);font-size:inherit;font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Endpoint_Size);left:-.7rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:var(--fdSlider_Endpoint_Size)}.fd-slider__inner:after:after,.fd-slider__inner:after:before,.fd-slider__inner:before:after,.fd-slider__inner:before:before{box-sizing:inherit;font-size:inherit}.fd-slider__inner:after{left:auto;right:-.7rem}.fd-slider__inner:after,.fd-slider__inner[dir=rtl]:before,[dir=rtl] .fd-slider__inner:before{background-color:var(--fdSlider_Endpoint_Background);border:var(--fdSlider_Endpoint_Border)}.fd-slider__inner[dir=rtl]:after,[dir=rtl] .fd-slider__inner:after{background-color:var(--fdSlider_Endpoint_Active_Background);border:var(--fdSlider_Endpoint_Active_Border)}.fd-slider__track{-webkit-box-sizing:border-box;-webkit-box-shadow:inset 0 0 0 var(--fdSlider_Track_Border_Width) var(--fdSlider_Track_Border_Color);background-color:var(--fdSlider_Track_Background);border:0;border-radius:var(--fdSlider_Track_BorderRadius);box-shadow:inset 0 0 0 var(--fdSlider_Track_Border_Width) var(--fdSlider_Track_Border_Color);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Track_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;width:100%;z-index:1}.fd-slider__track:after,.fd-slider__track:before{box-sizing:inherit;font-size:inherit}.fd-slider__track-range{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdSlider_Track_Active_Box_Shadow);background-color:var(--fdSlider_Track_Active_Background);border:0;border:.0625rem solid var(--fdSlider_Track_Active_Border);border-radius:.25rem;box-shadow:var(--fdSlider_Track_Active_Box_Shadow);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__track-range:after,.fd-slider__track-range:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick-wrapper{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:calc((var(--fdSlider_Track_Height) - var(--fdSlider_Tick_Height)) / 2);width:100%;z-index:2}.fd-slider__tick-wrapper:after,.fd-slider__tick-wrapper:before{box-sizing:inherit;font-size:inherit}.fd-slider__ticks{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-slider__ticks:after,.fd-slider__ticks:before{box-sizing:inherit;font-size:inherit}.fd-slider__labels{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;top:.5rem}.fd-slider__labels:after,.fd-slider__labels:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick{-webkit-box-sizing:border-box;border:0;border-left:.0625rem solid var(--fdSlider_Tick_Background);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Tick_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__tick:after,.fd-slider__tick:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick--in-range{border-color:var(--fdSlider_Active_Tick_Background)}.fd-slider__label{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;width:0}.fd-slider__label:after,.fd-slider__label:before{box-sizing:inherit;font-size:inherit}.fd-slider__handle{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-transform:translate(-50%,-50%);-webkit-box-shadow:var(--fdSlider_Handle_Box_Shadow);align-items:center;background-color:var(--fdSlider_Handle_Background);border:0;border:var(--fdSlider_Handle_Border);border-radius:var(--fdSlider_Handle_Border_Radius);box-shadow:var(--fdSlider_Handle_Box_Shadow);box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Handle_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--fdSlider_Handle_Width);z-index:3}.fd-slider__handle:after,.fd-slider__handle:before{box-sizing:inherit;font-size:inherit}.fd-slider__handle:before{-webkit-transform:translate(-50%,-50%);content:\"\";height:var(--fdSlider_Handle_Active_Height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--fdSlider_Handle_Active_Width)}.fd-slider__handle:after{color:var(--sapContent_Selected_ForegroundColor);content:\"\\e29c\";display:var(--fdSlider_Handle_Icon_Display);font-family:SAP-icons;font-size:.875rem;line-height:1}.fd-slider__handle.is-focus,.fd-slider__handle:focus{background-color:var(--fdSlider_Active_Handle_Background);border:var(--fdSlider_Hover_Handle_Border);outline:.0625rem var(--sapContent_FocusStyle) var(--fdSlider_Focus_Handle_Outline_Color);outline-offset:.0625rem;z-index:5}.fd-slider__handle.is-hover,.fd-slider__handle:hover{-webkit-box-shadow:var(--fdSlider_Hover_Handle_Box_Shadow);background-color:var(--fdSlider_Hover_Handle_Background);border:var(--fdSlider_Hover_Handle_Border);border-color:var(--fdSlider_Handle_Border_Hover_Color);box-shadow:var(--fdSlider_Hover_Handle_Box_Shadow)}.fd-slider__handle.is-active,.fd-slider__handle:active{-webkit-box-shadow:var(--fdSlider_Active_Handle_Box_Shadow);background-color:var(--fdSlider_Active_Handle_Background);border:var(--fdSlider_Hover_Handle_Border);box-shadow:var(--fdSlider_Active_Handle_Box_Shadow)}.fd-slider__handle--lg{height:var(--fdSlider_Mobile_Handle_Height);width:var(--fdSlider_Mobile_Handle_Width)}.fd-slider__handle--lg:before{height:var(--fdSlider_Mobile_Handle_Active_Size);width:var(--fdSlider_Mobile_Handle_Active_Size)}.fd-slider--range .fd-slider__inner:after,.fd-slider--range .fd-slider__inner:before,.fd-slider--range .fd-slider__inner[dir=rtl]:after,.fd-slider--range .fd-slider__inner[dir=rtl]:before,[dir=rtl] .fd-slider--range .fd-slider__inner:after,[dir=rtl] .fd-slider--range .fd-slider__inner:before{background-color:var(--fdSlider_Endpoint_Background);border:var(--fdSlider_Endpoint_Border)}.fd-slider--range .fd-slider__inner .fd-slider__handle{-webkit-box-shadow:var(--fdSlider_Range_Handle_Box_Shadow);background-color:var(--fdSlider_Range_Handle_Background);border:var(--fdSlider_Range_Handle_Border);box-shadow:var(--fdSlider_Range_Handle_Box_Shadow)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-hover,.fd-slider--range .fd-slider__inner .fd-slider__handle:hover{-webkit-box-shadow:var(--fdSlider_Range_Hover_Handle_Box_Shadow);background-color:var(--fdSlider_Range_Hover_Handle_Background);border-color:var(--fdSlider_Range_Hover_Handle_Border_Color);box-shadow:var(--fdSlider_Range_Hover_Handle_Box_Shadow)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-active,.fd-slider--range .fd-slider__inner .fd-slider__handle:active{-webkit-box-shadow:var(--fdSlider_Range_Active_Handle_Box_Shadow);background-color:var(--fdSlider_Range_Active_Handle_Background);border-color:var(--fdSlider_Range_Active_Handle_Border_Color);box-shadow:var(--fdSlider_Range_Active_Handle_Box_Shadow)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-active:after,.fd-slider--range .fd-slider__inner .fd-slider__handle:active:after{display:none}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-focus,.fd-slider--range .fd-slider__inner .fd-slider__handle:focus{-webkit-box-shadow:var(--fdSlider_Range_Focus_Handle_Box_Shadow);background-color:var(--fdSlider_Range_Focus_Handle_Background);border:var(--fdSlider_Range_Focus_Handle_Border);box-shadow:var(--fdSlider_Range_Focus_Handle_Box_Shadow);z-index:5}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-focus:after,.fd-slider--range .fd-slider__inner .fd-slider__handle:focus:after{display:none}/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:2.25rem;min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;padding:var(--fdInput_Field_Padding, 0 .625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input[class*=-compact],.fd-input[class*=-condensed],[class*=-compact] .fd-input:not([class*=-cozy]),[class*=-condensed] .fd-input:not([class*=-cozy]){box-sizing:border-box;height:1.625rem;margin:var(--fdInput_Field_Compact_Margin, .1875rem 0);min-height:1.625rem;min-width:var(--fdInput_Field_Compact_Min_Width, 2rem);padding:var(--fdInput_Field_Compact_Padding, 0 .5rem)}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius)}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-hover,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-hover,.fd-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);z-index:5}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover--slider{display:block!important}.fd-popover__body.fd-slider--tooltip-popover{top:-7px!important;overflow:hidden}.fd-popover__body.fd-slider--tooltip-popover .fd-slider--tooltip{padding:.25rem;min-width:2rem;text-align:center;height:1.375rem;line-height:1;direction:ltr;box-sizing:border-box;margin:0!important;border:0;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);font-size:.875rem;font-size:var(--sapFontSize)}.fd-slider{display:block}.fd-slider.fd-slider--with-labels{padding-bottom:2rem}.fd-slider__tick-wrapper .fd-slider__label,.fd-slider__tick-wrapper .fd-slider__tick{position:absolute}.fd-slider__ticks{height:var(--fdSlider_Tick_Height)}.fd-slider__track .fd-slider__handle:focus{z-index:2;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.fd-slider__track .fd-popover-custom{display:none}.fd-slider__labels .fd-slider__label{white-space:nowrap}.fd-slider__alternative-tick-width .fd-slider__tick{width:1px}[dir=rtl] .fd-slider__handle{transform:translate(50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.OnlyDigitsDirective, selector: "[fdkOnlyDigits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "directive", type: SliderPositionDirective, selector: "[fd-slider-position]", inputs: ["position"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, read: ElementRef, static: true }, { propertyName: "handle", first: true, predicate: ["handle"], descendants: true, read: ElementRef }, { propertyName: "rangeHandle1", first: true, predicate: ["rangeHandle1"], descendants: true, read: ElementRef }, { propertyName: "rangeHandle2", first: true, predicate: ["rangeHandle2"], descendants: true, read: ElementRef }, { propertyName: "_rangeGroupHandle", first: true, predicate: ["rangeGroupHandle"], descendants: true, read: ElementRef }, { propertyName: "_popovers", predicate: PopoverComponent, descendants: true }, { propertyName: "_sliderTooltipWrappers", predicate: ["sliderTooltipWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-slider__inner\">\n    <ng-container *ngTemplateOutlet=\"_isRange ? rangeMode : singleMode\"></ng-container>\n\n    <div class=\"fd-slider__track\" (click)=\"onTrackClick($event)\" #track>\n        <ng-container *ngTemplateOutlet=\"_isRange ? rangeModeTrack : singleModeTrack\"></ng-container>\n    </div>\n\n    <div class=\"fd-slider__tick-wrapper\">\n        <div class=\"fd-slider__ticks\" (click)=\"onTrackClick($event)\">\n            <ng-container *ngIf=\"showTicks\">\n                <ng-container *ngFor=\"let tick of _tickMarks; index as i\">\n                    <div\n                        class=\"fd-slider__tick\"\n                        fd-slider-position\n                        [vertical]=\"vertical\"\n                        [position]=\"tick.position || 0\"\n                        [class.fd-slider__tick--in-range]=\"\n                            !hideProgressBar &&\n                            (_isRange\n                                ? tick.value >= _position[0] && tick.value <= _position[1]\n                                : tick.value <= _position)\n                        \"\n                    ></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <div class=\"fd-slider__labels\" *ngIf=\"showTicks && showTicksLabels\">\n            <ng-container *ngFor=\"let tick of _tickMarks; index as i; last as last; first as first\">\n                <div\n                    *ngIf=\"first || last || i % tickmarksBetweenLabels === 0\"\n                    class=\"fd-slider__label\"\n                    fd-slider-position\n                    [vertical]=\"vertical\"\n                    [position]=\"tick.position || 0\"\n                >\n                    {{ tick.label }}\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-template #singleModeTrack>\n    <div\n        *ngIf=\"!hideProgressBar\"\n        class=\"fd-slider__track-range\"\n        [style.height.%]=\"vertical ? _progress : null\"\n        [style.width.%]=\"vertical ? null : _progress\"\n    ></div>\n</ng-template>\n\n<ng-template #rangeModeTrack>\n    <div\n        *ngIf=\"!hideProgressBar\"\n        class=\"fd-slider__track-range\"\n        [style.height.%]=\"vertical ? _rangeProgress : null\"\n        [style.width.%]=\"vertical ? null : _rangeProgress\"\n        fd-slider-position\n        [vertical]=\"vertical\"\n        [position]=\"_handle1Position < _handle2Position ? _handle1Position : _handle2Position\"\n    >\n        <div\n            class=\"fd-slider__track-focus-range\"\n            (mousedown)=\"onHandleClick($event, true)\"\n            (keydown)=\"onKeyDown($event, _handles.Both)\"\n            tabindex=\"0\"\n            #rangeGroupHandle\n        ></div>\n    </div>\n</ng-template>\n\n<ng-template #singleMode>\n    <div\n        #handle\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.singleMinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? singleSliderPopover : null\"\n        [attr.aria-valuemin]=\"'coreSlider.singleValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.singleValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.singleValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER) })\n                : getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.singleValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER) })\n                : getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER)\n        \"\n        fd-slider-position\n        [vertical]=\"vertical\"\n        [position]=\"_progress\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (focus)=\"_handleFocused$.next(true)\"\n        (blur)=\"_handleFocused$.next(false)\"\n        (keydown)=\"onKeyDown($event)\"\n    ></div>\n\n    <fd-popover\n        #singleSliderPopover\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"handle\"\n        [disabled]=\"!tooltipMode\"\n        class=\"fd-popover--slider\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.SINGLE_SLIDER, position: _position }\n            \"\n        ></ng-container>\n    </fd-popover>\n</ng-template>\n\n<ng-template #rangeMode>\n    <div\n        #rangeHandle1\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.multipleHandle1MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? rangeSliderPopover1 : null\"\n        [attr.aria-valuemin]=\"'coreSlider.multipleHandle1ValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.multipleHandle1ValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle1ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1) })\n                : getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle1ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1) })\n                : getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1)\n        \"\n        fd-slider-position\n        [vertical]=\"vertical\"\n        [position]=\"_handle1Position\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (keydown)=\"onKeyDown($event, _handles.First)\"\n        (focus)=\"_rangeHandle1Focused$.next(true)\"\n        (blur)=\"_rangeHandle1Focused$.next(false)\"\n    ></div>\n\n    <div\n        #rangeHandle2\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.multipleHandle2MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? rangeSliderPopover2 : null\"\n        [attr.aria-valuemin]=\"'coreSlider.multipleHandle2ValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.multipleHandle2ValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle2ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2) })\n                : getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle2ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2) })\n                : getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2)\n        \"\n        fd-slider-position\n        [vertical]=\"vertical\"\n        [position]=\"_handle2Position\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (keydown)=\"onKeyDown($event, _handles.Second)\"\n        (focus)=\"_rangeHandle2Focused$.next(true)\"\n        (blur)=\"_rangeHandle2Focused$.next(false)\"\n    ></div>\n\n    <fd-popover\n        #rangeSliderPopover1\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"rangeHandle1\"\n        [disabled]=\"!tooltipMode\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        class=\"fd-popover--slider\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.RANGE_SLIDER1, position: _handle1Value }\n            \"\n        ></ng-container>\n    </fd-popover>\n\n    <fd-popover\n        #rangeSliderPopover2\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"rangeHandle2\"\n        [disabled]=\"!tooltipMode\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        class=\"fd-popover--slider\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.RANGE_SLIDER2, position: _handle2Value }\n            \"\n        ></ng-container>\n    </fd-popover>\n</ng-template>\n\n<ng-template #popoverInner let-target=\"target\" let-position=\"position\">\n    <div\n        #sliderTooltipWrapper\n        class=\"fd-slider--tooltip-wrapper\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\"\n        (mouseenter)=\"_popoverInputFieldHovered$.next(true)\"\n        (mouseleave)=\"_popoverInputFieldHovered$.next(false)\"\n    >\n        <div *ngIf=\"(customValues && customValues.length > 0) || tooltipMode === 'readonly'\" class=\"fd-slider--tooltip\">\n            {{ customValues && customValues.length > 0 ? customValues[position].label : _popoverValueRef[target] }}\n        </div>\n\n        <input\n            #popoverInputField\n            tabindex=\"-1\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            fdkOnlyDigits\n            [decimal]=\"true\"\n            [style.width.ch]=\"('' + _popoverValueRef[target]).length + 2\"\n            class=\"fd-input fd-slider--tooltip {{ _popoverInputFieldClass }}\"\n            *ngIf=\"customValues?.length === 0 && tooltipMode === 'editable'\"\n            [(ngModel)]=\"_popoverValueRef[target]\"\n            (blur)=\"_updateValueFromInput(popoverInputField.value, target)\"\n            (keydown.enter)=\"_updateValueFromInput(popoverInputField.value, target)\"\n            (focus)=\"_popoverInputFieldFocused$.next(true)\"\n            (blur)=\"_popoverInputFieldFocused$.next(false)\"\n        />\n    </div>\n</ng-template>\n", styles: [".fd-slider{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;min-width:4rem;padding:0;padding:1rem calc(var(--fdSlider_Handle_Width) * .5 + .125rem);position:relative}.fd-slider:after,.fd-slider:before{box-sizing:inherit;font-size:inherit}.fd-slider.is-disabled,.fd-slider:disabled,.fd-slider[aria-disabled=true]{cursor:not-allowed}.fd-slider--lg{--fdSlider_Handle_Width:var(--fdSlider_Mobile_Handle_Width);--fdSlider_Handle_Height:var(--fdSlider_Mobile_Handle_Height);--fdSlider_Handle_Active_Width:var(--fdSlider_Mobile_Handle_Active_Size);--fdSlider_Handle_Active_Height:var(--fdSlider_Mobile_Handle_Active_Size);padding-left:calc(var(--fdSlider_Mobile_Handle_Width) * .5 + .125rem);padding-right:calc(var(--fdSlider_Mobile_Handle_Width) * .5 + .125rem)}.fd-slider__inner{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__inner:after,.fd-slider__inner:before{-webkit-box-sizing:inherit;-webkit-box-sizing:border-box;-webkit-transform:translateY(-50%);background-color:var(--fdSlider_Endpoint_Active_Background);border:0;border:var(--fdSlider_Endpoint_Active_Border);border-radius:50%;box-sizing:inherit;box-sizing:border-box;color:var(--sapTextColor);content:\"\";font-family:var(--sapFontFamily);font-size:inherit;font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Endpoint_Size);left:-.7rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:var(--fdSlider_Endpoint_Size)}.fd-slider__inner:after:after,.fd-slider__inner:after:before,.fd-slider__inner:before:after,.fd-slider__inner:before:before{box-sizing:inherit;font-size:inherit}.fd-slider__inner:after{left:auto;right:-.7rem}.fd-slider:not(.fd-slider--vertical):not(.fd-slider--range) .fd-slider__inner[dir=rtl]:before,.fd-slider__inner:after,[dir=rtl] .fd-slider:not(.fd-slider--vertical):not(.fd-slider--range) .fd-slider__inner:before{background-color:var(--fdSlider_Endpoint_Background);border:var(--fdSlider_Endpoint_Border)}.fd-slider:not(.fd-slider--vertical):not(.fd-slider--range) .fd-slider__inner[dir=rtl]:after,[dir=rtl] .fd-slider:not(.fd-slider--vertical):not(.fd-slider--range) .fd-slider__inner:after{background-color:var(--fdSlider_Endpoint_Active_Background);border:var(--fdSlider_Endpoint_Active_Border)}.fd-slider__track{-webkit-box-sizing:border-box;-webkit-box-shadow:inset 0 0 0 var(--fdSlider_Track_Border_Width) var(--fdSlider_Track_Border_Color);background-color:var(--fdSlider_Track_Background);border:0;border-radius:var(--fdSlider_Track_BorderRadius);box-shadow:inset 0 0 0 var(--fdSlider_Track_Border_Width) var(--fdSlider_Track_Border_Color);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Track_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;width:100%;z-index:1}.fd-slider__track:after,.fd-slider__track:before{box-sizing:inherit;font-size:inherit}.fd-slider__track-range{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdSlider_Track_Active_Box_Shadow);background-color:var(--fdSlider_Track_Active_Background);border:0;border:.0625rem solid var(--fdSlider_Track_Active_Border);border-radius:.25rem;box-shadow:var(--fdSlider_Track_Active_Box_Shadow);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__track-range:after,.fd-slider__track-range:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick-wrapper{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:calc((var(--fdSlider_Track_Height) - var(--fdSlider_Tick_Height)) / 2);width:100%;z-index:2}.fd-slider__tick-wrapper:after,.fd-slider__tick-wrapper:before{box-sizing:inherit;font-size:inherit}.fd-slider__ticks{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-slider__ticks:after,.fd-slider__ticks:before{box-sizing:inherit;font-size:inherit}.fd-slider__labels{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;top:.5rem}.fd-slider__labels:after,.fd-slider__labels:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick{-webkit-box-sizing:border-box;border:0;border-left:.0625rem solid var(--fdSlider_Tick_Background);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Tick_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__tick:after,.fd-slider__tick:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick--in-range{border-color:var(--fdSlider_Active_Tick_Background)}.fd-slider__label{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;width:0}.fd-slider__label:after,.fd-slider__label:before{box-sizing:inherit;font-size:inherit}.fd-slider__handle{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-transform:translate(-50%,-50%);align-items:center;background-color:var(--fdSlider_Handle_Background);border:0;border:var(--fdSlider_Handle_Border);border-radius:var(--fdSlider_Handle_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Handle_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--fdSlider_Handle_Width);z-index:3}.fd-slider__handle:after,.fd-slider__handle:before{box-sizing:inherit;font-size:inherit}.fd-slider__handle:before{-webkit-transform:translate(-50%,-50%);content:\"\";height:var(--fdSlider_Handle_Active_Height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--fdSlider_Handle_Active_Width)}.fd-slider__handle:after{color:var(--sapContent_Selected_ForegroundColor);content:\"\\e29c\";display:var(--fdSlider_Handle_Icon_Display);font-family:SAP-icons;font-size:.875rem;line-height:1}.fd-slider__handle.is-focus,.fd-slider__handle:focus{background-color:var(--fdSlider_Focus_Handle_Background);border:var(--fdSlider_Focus_Handle_Border);outline:none;z-index:5}.fd-slider__handle.is-focus:after,.fd-slider__handle:focus:after{display:none}.fd-slider__handle.is-hover,.fd-slider__handle:hover{background-color:var(--fdSlider_Hover_Handle_Background);border:var(--fdSlider_Hover_Handle_Border);border-color:var(--fdSlider_Handle_Border_Hover_Color)}.fd-slider__handle.is-hover.is-focus,.fd-slider__handle.is-hover:focus,.fd-slider__handle:hover.is-focus,.fd-slider__handle:hover:focus{background-color:var(--fdSlider_Focus_Handle_Background);border:var(--fdSlider_Focus_Handle_Border);outline:none;z-index:5}.fd-slider__handle.is-hover.is-focus:after,.fd-slider__handle.is-hover:focus:after,.fd-slider__handle:hover.is-focus:after,.fd-slider__handle:hover:focus:after{display:none}.fd-slider__handle.is-active,.fd-slider__handle:active{background-color:var(--fdSlider_Active_Handle_Background);border:var(--fdSlider_Active_Handle_Border)}.fd-slider__handle.is-active.is-focus,.fd-slider__handle.is-active:focus,.fd-slider__handle:active.is-focus,.fd-slider__handle:active:focus{background-color:var(--fdSlider_Focus_Handle_Background);border:var(--fdSlider_Focus_Handle_Border);outline:none;z-index:5}.fd-slider__handle.is-active.is-focus:after,.fd-slider__handle.is-active:focus:after,.fd-slider__handle:active.is-focus:after,.fd-slider__handle:active:focus:after{display:none}.fd-slider__track-focus-range{-webkit-box-sizing:border-box;-webkit-transform:translateY(-50%);border:0;border-radius:var(--fdSlider_Range_Track_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:calc(var(--fdSlider_Handle_Height) + .5rem);left:0;line-height:var(--sapContent_LineHeight);margin:0;margin:0 calc(var(--fdSlider_Handle_Height) * -1 / 1.1);padding:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.fd-slider__track-focus-range:after,.fd-slider__track-focus-range:before{box-sizing:inherit;font-size:inherit}.fd-slider__track-focus-range.is-focus,.fd-slider__track-focus-range:focus{outline:var(--fdSlider_Focus_Range_Outline);z-index:5}.fd-slider--range .fd-slider__inner:after,.fd-slider--range .fd-slider__inner:before{background-color:var(--fdSlider_Endpoint_Background);border:var(--fdSlider_Endpoint_Border)}.fd-slider--range .fd-slider__inner .fd-slider__handle{background-color:var(--fdSlider_Range_Handle_Background);border:var(--fdSlider_Range_Handle_Border)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-hover,.fd-slider--range .fd-slider__inner .fd-slider__handle:hover{background-color:var(--fdSlider_Range_Hover_Handle_Background);border-color:var(--fdSlider_Range_Hover_Handle_Border_Color)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-active,.fd-slider--range .fd-slider__inner .fd-slider__handle:active{background-color:var(--fdSlider_Range_Active_Handle_Background);border-color:var(--fdSlider_Range_Active_Handle_Border_Color)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-active:after,.fd-slider--range .fd-slider__inner .fd-slider__handle:active:after{display:var(--fdSlider_Focus_Handle_Display)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-focus,.fd-slider--range .fd-slider__inner .fd-slider__handle:focus{background-color:var(--fdSlider_Range_Focus_Handle_Background);border:var(--fdSlider_Range_Focus_Handle_Border);z-index:5}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-focus:after,.fd-slider--range .fd-slider__inner .fd-slider__handle:focus:after{display:var(--fdSlider_Focus_Handle_Display)}.fd-slider--vertical{height:100%}.fd-slider--vertical .fd-slider__inner{height:100%;width:var(--fdSlider_Track_Height)}.fd-slider--vertical .fd-slider__inner:after,.fd-slider--vertical .fd-slider__inner:before{-webkit-transform:translateX(-50%);left:50%;right:auto;top:auto;transform:translate(-50%)}.fd-slider--vertical .fd-slider__inner:before{bottom:-.7rem}.fd-slider--vertical .fd-slider__inner:after{top:-.7rem}.fd-slider--vertical .fd-slider__track{height:100%;width:var(--fdSlider_Track_Height)}.fd-slider--vertical .fd-slider__track-range{bottom:0;position:absolute;width:100%}.fd-slider--vertical .fd-slider__handle{-webkit-transform:translate(-50%,50%);bottom:0;height:var(--fdSlider_Handle_Width);left:50%;top:auto;transform:translate(-50%,50%);width:var(--fdSlider_Handle_Height)}.fd-slider--vertical .fd-slider__handle:after{transform:rotate(90deg)}.fd-slider--vertical .fd-slider__tick-wrapper{height:100%;left:calc((var(--fdSlider_Track_Height) - var(--fdSlider_Tick_Height)) / 2);right:calc((var(--fdSlider_Track_Height) - var(--fdSlider_Tick_Height)) / 2);top:0}.fd-slider--vertical .fd-slider__ticks{flex-direction:column-reverse;height:100%}.fd-slider--vertical .fd-slider__tick{border-left:none;border-top-style:solid;border-top-width:.0625rem;height:0;width:var(--fdSlider_Tick_Height)}.fd-slider--vertical .fd-slider__labels{flex-direction:column-reverse;height:100%;left:calc(var(--fdSlider_Handle_Width) * .5 + .125rem);position:absolute;top:-.55rem}.fd-slider--vertical .fd-slider__labels[dir=rtl],[dir=rtl] .fd-slider--vertical .fd-slider__labels{left:auto;right:calc(var(--fdSlider_Handle_Width) * .5 + .125rem)}.fd-slider--vertical .fd-slider__label{height:.0625rem;width:auto}.fd-slider--vertical.fd-slider--range .fd-slider__track-range{left:0}.fd-slider--vertical.fd-slider--range .fd-slider__track-focus-range{-webkit-transform:translateX(-50%);height:auto;inset:0 auto 0 50%;margin:calc(var(--fdSlider_Handle_Height) * -1 / 1.1) 0;transform:translate(-50%);width:calc(var(--fdSlider_Handle_Height) + .5rem)}/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--sapElement_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:var(--sapElement_Height);min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;padding:var(--fdInput_Field_Padding, 0 .625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input[class*=-compact],.fd-input[class*=-condensed],[class*=-compact] .fd-input:not([class*=-cozy]),[class*=-condensed] .fd-input:not([class*=-cozy]){box-sizing:border-box;height:var(--sapElement_Compact_Height);margin:var(--fdInput_Field_Compact_Margin, .1875rem 0);min-height:var(--sapElement_Compact_Height);min-width:var(--fdInput_Field_Compact_Min_Width, 2rem);padding:var(--fdInput_Field_Compact_Padding, 0 .5rem)}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-success.is-expanded,.fd-input.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-error.is-expanded,.fd-input.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-warning.is-expanded,.fd-input.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-alert.is-expanded,.fd-input.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-information.is-expanded,.fd-input.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-focus,.fd-input.is-readonly.is-hover,.fd-input.is-readonly:focus,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-focus,.fd-input[readonly].is-hover,.fd-input[readonly]:focus,.fd-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{z-index:5}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover--slider{display:block!important}.fd-popover__body.fd-slider--tooltip-popover{top:-7px!important;overflow:hidden}.fd-popover__body.fd-slider--tooltip-popover .fd-slider--tooltip{padding:.25rem;min-width:2rem;text-align:center;height:1.375rem;line-height:1;direction:ltr;box-sizing:border-box;margin:0!important;border:0;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);font-size:.875rem;font-size:var(--sapFontSize)}.fd-slider{display:block}.fd-slider.fd-slider--with-labels{padding-bottom:2rem}.fd-slider__tick-wrapper .fd-slider__label,.fd-slider__tick-wrapper .fd-slider__tick{position:absolute}.fd-slider__ticks{height:var(--fdSlider_Tick_Height)}.fd-slider__track .fd-slider__handle:focus{z-index:2;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.fd-slider__track .fd-popover-custom{display:none}.fd-slider__labels .fd-slider__label{white-space:nowrap}.fd-slider__alternative-tick-width .fd-slider__tick{width:1px}[dir=rtl] .fd-slider__handle{transform:translate(50%,-50%)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: SliderPositionDirective, selector: "[fd-slider-position]", inputs: ["position", "vertical"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i5.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OnlyDigitsDirective, selector: "[fdkOnlyDigits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     applyCssClass,
@@ -792,8 +841,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         '(mouseenter)': 'this._componentHovered$.next(true)',
                         '(mouseleave)': 'this._componentHovered$.next(false)',
                         '(focusout)': 'onTouched()'
-                    }, template: "<div class=\"fd-slider__inner\">\n    <ng-container *ngTemplateOutlet=\"_isRange ? rangeMode : singleMode\"></ng-container>\n\n    <div class=\"fd-slider__track\" (click)=\"onTrackClick($event)\" #track>\n        <ng-container *ngTemplateOutlet=\"_isRange ? rangeModeTrack : singleModeTrack\"></ng-container>\n    </div>\n\n    <div class=\"fd-slider__tick-wrapper\">\n        <div class=\"fd-slider__ticks\" (click)=\"onTrackClick($event)\">\n            <ng-container *ngIf=\"showTicks\">\n                <ng-container *ngFor=\"let tick of _tickMarks; index as i\">\n                    <div\n                        class=\"fd-slider__tick\"\n                        fd-slider-position\n                        [position]=\"tick.position || 0\"\n                        [class.fd-slider__tick--in-range]=\"\n                            !hideProgressBar &&\n                            (_isRange\n                                ? tick.value >= _position[0] && tick.value <= _position[1]\n                                : tick.value <= _position)\n                        \"\n                    ></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <div class=\"fd-slider__labels\" *ngIf=\"showTicks && showTicksLabels\">\n            <ng-container *ngFor=\"let tick of _tickMarks; index as i; last as last; first as first\">\n                <div\n                    *ngIf=\"first || last || i % tickmarksBetweenLabels === 0\"\n                    class=\"fd-slider__label\"\n                    fd-slider-position\n                    [position]=\"tick.position || 0\"\n                >\n                    {{ tick.label }}\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-template #singleModeTrack>\n    <div *ngIf=\"!hideProgressBar\" class=\"fd-slider__track-range\" [style.width.%]=\"_progress\"></div>\n</ng-template>\n\n<ng-template #rangeModeTrack>\n    <div\n        *ngIf=\"!hideProgressBar\"\n        class=\"fd-slider__track-range\"\n        [style.width.%]=\"_rangeProgress\"\n        fd-slider-position\n        [position]=\"_handle1Position < _handle2Position ? _handle1Position : _handle2Position\"\n    ></div>\n</ng-template>\n\n<ng-template #singleMode>\n    <div\n        #handle\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.singleMinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? singleSliderPopover : null\"\n        [attr.aria-valuemin]=\"'coreSlider.singleValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.singleValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.singleValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER) })\n                : getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.singleValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER) })\n                : getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER)\n        \"\n        fd-slider-position\n        [position]=\"_progress\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (focus)=\"_handleFocused$.next(true)\"\n        (blur)=\"_handleFocused$.next(false)\"\n        (keydown)=\"onKeyDown($event)\"\n    ></div>\n\n    <fd-popover\n        #singleSliderPopover\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"handle\"\n        [disabled]=\"!tooltipMode\"\n        class=\"fd-popover--slider\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.SINGLE_SLIDER, position: _position }\n            \"\n        ></ng-container>\n    </fd-popover>\n</ng-template>\n\n<ng-template #rangeMode>\n    <div\n        #rangeHandle1\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.multipleHandle1MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? rangeSliderPopover1 : null\"\n        [attr.aria-valuemin]=\"'coreSlider.multipleHandle1ValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.multipleHandle1ValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle1ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1) })\n                : getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle1ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1) })\n                : getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1)\n        \"\n        fd-slider-position\n        [position]=\"_handle1Position\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"_rangeHandle1Focused$.next(true)\"\n        (blur)=\"_rangeHandle1Focused$.next(false)\"\n    ></div>\n\n    <div\n        #rangeHandle2\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.multipleHandle2MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? rangeSliderPopover2 : null\"\n        [attr.aria-valuemin]=\"'coreSlider.multipleHandle2ValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.multipleHandle2ValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle2ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2) })\n                : getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle2ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2) })\n                : getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2)\n        \"\n        fd-slider-position\n        [position]=\"_handle2Position\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"_rangeHandle2Focused$.next(true)\"\n        (blur)=\"_rangeHandle2Focused$.next(false)\"\n    ></div>\n\n    <fd-popover\n        #rangeSliderPopover1\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"rangeHandle1\"\n        [disabled]=\"!tooltipMode\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        class=\"fd-popover--slider\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.RANGE_SLIDER1, position: _handle1Value }\n            \"\n        ></ng-container>\n    </fd-popover>\n\n    <fd-popover\n        #rangeSliderPopover2\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"rangeHandle2\"\n        [disabled]=\"!tooltipMode\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        class=\"fd-popover--slider\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.RANGE_SLIDER2, position: _handle2Value }\n            \"\n        ></ng-container>\n    </fd-popover>\n</ng-template>\n\n<ng-template #popoverInner let-target=\"target\" let-position=\"position\">\n    <div\n        #sliderTooltipWrapper\n        class=\"fd-slider--tooltip-wrapper\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\"\n        (mouseenter)=\"_popoverInputFieldHovered$.next(true)\"\n        (mouseleave)=\"_popoverInputFieldHovered$.next(false)\"\n    >\n        <div *ngIf=\"(customValues && customValues.length > 0) || tooltipMode === 'readonly'\" class=\"fd-slider--tooltip\">\n            {{ customValues && customValues.length > 0 ? customValues[position].label : _popoverValueRef[target] }}\n        </div>\n\n        <input\n            #popoverInputField\n            tabindex=\"-1\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            fdkOnlyDigits\n            [decimal]=\"true\"\n            [style.width.ch]=\"('' + _popoverValueRef[target]).length + 2\"\n            class=\"fd-input fd-slider--tooltip {{ _popoverInputFieldClass }}\"\n            *ngIf=\"customValues?.length === 0 && tooltipMode === 'editable'\"\n            [(ngModel)]=\"_popoverValueRef[target]\"\n            (blur)=\"_updateValueFromInput(popoverInputField.value, target)\"\n            (keydown.enter)=\"_updateValueFromInput(popoverInputField.value, target)\"\n            (focus)=\"_popoverInputFieldFocused$.next(true)\"\n            (blur)=\"_popoverInputFieldFocused$.next(false)\"\n        />\n    </div>\n</ng-template>\n", styles: [".fd-slider{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;min-width:4rem;padding:0;padding:1rem calc(var(--fdSlider_Handle_Width) * .5 + .125rem);position:relative}.fd-slider:after,.fd-slider:before{box-sizing:inherit;font-size:inherit}.fd-slider.is-disabled,.fd-slider:disabled,.fd-slider[aria-disabled=true]{cursor:not-allowed}.fd-slider--lg{padding-left:calc(var(--fdSlider_Mobile_Handle_Width) * .5 + .125rem);padding-right:calc(var(--fdSlider_Mobile_Handle_Width) * .5 + .125rem)}.fd-slider__inner{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__inner:after,.fd-slider__inner:before{-webkit-box-sizing:inherit;-webkit-box-sizing:border-box;-webkit-transform:translateY(-50%);background-color:var(--fdSlider_Endpoint_Active_Background);border:0;border:var(--fdSlider_Endpoint_Active_Border);border-radius:50%;box-sizing:inherit;box-sizing:border-box;color:var(--sapTextColor);content:\"\";font-family:var(--sapFontFamily);font-size:inherit;font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Endpoint_Size);left:-.7rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:var(--fdSlider_Endpoint_Size)}.fd-slider__inner:after:after,.fd-slider__inner:after:before,.fd-slider__inner:before:after,.fd-slider__inner:before:before{box-sizing:inherit;font-size:inherit}.fd-slider__inner:after{left:auto;right:-.7rem}.fd-slider__inner:after,.fd-slider__inner[dir=rtl]:before,[dir=rtl] .fd-slider__inner:before{background-color:var(--fdSlider_Endpoint_Background);border:var(--fdSlider_Endpoint_Border)}.fd-slider__inner[dir=rtl]:after,[dir=rtl] .fd-slider__inner:after{background-color:var(--fdSlider_Endpoint_Active_Background);border:var(--fdSlider_Endpoint_Active_Border)}.fd-slider__track{-webkit-box-sizing:border-box;-webkit-box-shadow:inset 0 0 0 var(--fdSlider_Track_Border_Width) var(--fdSlider_Track_Border_Color);background-color:var(--fdSlider_Track_Background);border:0;border-radius:var(--fdSlider_Track_BorderRadius);box-shadow:inset 0 0 0 var(--fdSlider_Track_Border_Width) var(--fdSlider_Track_Border_Color);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Track_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;width:100%;z-index:1}.fd-slider__track:after,.fd-slider__track:before{box-sizing:inherit;font-size:inherit}.fd-slider__track-range{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdSlider_Track_Active_Box_Shadow);background-color:var(--fdSlider_Track_Active_Background);border:0;border:.0625rem solid var(--fdSlider_Track_Active_Border);border-radius:.25rem;box-shadow:var(--fdSlider_Track_Active_Box_Shadow);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__track-range:after,.fd-slider__track-range:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick-wrapper{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:calc((var(--fdSlider_Track_Height) - var(--fdSlider_Tick_Height)) / 2);width:100%;z-index:2}.fd-slider__tick-wrapper:after,.fd-slider__tick-wrapper:before{box-sizing:inherit;font-size:inherit}.fd-slider__ticks{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-slider__ticks:after,.fd-slider__ticks:before{box-sizing:inherit;font-size:inherit}.fd-slider__labels{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;top:.5rem}.fd-slider__labels:after,.fd-slider__labels:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick{-webkit-box-sizing:border-box;border:0;border-left:.0625rem solid var(--fdSlider_Tick_Background);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Tick_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__tick:after,.fd-slider__tick:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick--in-range{border-color:var(--fdSlider_Active_Tick_Background)}.fd-slider__label{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;width:0}.fd-slider__label:after,.fd-slider__label:before{box-sizing:inherit;font-size:inherit}.fd-slider__handle{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-transform:translate(-50%,-50%);-webkit-box-shadow:var(--fdSlider_Handle_Box_Shadow);align-items:center;background-color:var(--fdSlider_Handle_Background);border:0;border:var(--fdSlider_Handle_Border);border-radius:var(--fdSlider_Handle_Border_Radius);box-shadow:var(--fdSlider_Handle_Box_Shadow);box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Handle_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--fdSlider_Handle_Width);z-index:3}.fd-slider__handle:after,.fd-slider__handle:before{box-sizing:inherit;font-size:inherit}.fd-slider__handle:before{-webkit-transform:translate(-50%,-50%);content:\"\";height:var(--fdSlider_Handle_Active_Height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--fdSlider_Handle_Active_Width)}.fd-slider__handle:after{color:var(--sapContent_Selected_ForegroundColor);content:\"\\e29c\";display:var(--fdSlider_Handle_Icon_Display);font-family:SAP-icons;font-size:.875rem;line-height:1}.fd-slider__handle.is-focus,.fd-slider__handle:focus{background-color:var(--fdSlider_Active_Handle_Background);border:var(--fdSlider_Hover_Handle_Border);outline:.0625rem var(--sapContent_FocusStyle) var(--fdSlider_Focus_Handle_Outline_Color);outline-offset:.0625rem;z-index:5}.fd-slider__handle.is-hover,.fd-slider__handle:hover{-webkit-box-shadow:var(--fdSlider_Hover_Handle_Box_Shadow);background-color:var(--fdSlider_Hover_Handle_Background);border:var(--fdSlider_Hover_Handle_Border);border-color:var(--fdSlider_Handle_Border_Hover_Color);box-shadow:var(--fdSlider_Hover_Handle_Box_Shadow)}.fd-slider__handle.is-active,.fd-slider__handle:active{-webkit-box-shadow:var(--fdSlider_Active_Handle_Box_Shadow);background-color:var(--fdSlider_Active_Handle_Background);border:var(--fdSlider_Hover_Handle_Border);box-shadow:var(--fdSlider_Active_Handle_Box_Shadow)}.fd-slider__handle--lg{height:var(--fdSlider_Mobile_Handle_Height);width:var(--fdSlider_Mobile_Handle_Width)}.fd-slider__handle--lg:before{height:var(--fdSlider_Mobile_Handle_Active_Size);width:var(--fdSlider_Mobile_Handle_Active_Size)}.fd-slider--range .fd-slider__inner:after,.fd-slider--range .fd-slider__inner:before,.fd-slider--range .fd-slider__inner[dir=rtl]:after,.fd-slider--range .fd-slider__inner[dir=rtl]:before,[dir=rtl] .fd-slider--range .fd-slider__inner:after,[dir=rtl] .fd-slider--range .fd-slider__inner:before{background-color:var(--fdSlider_Endpoint_Background);border:var(--fdSlider_Endpoint_Border)}.fd-slider--range .fd-slider__inner .fd-slider__handle{-webkit-box-shadow:var(--fdSlider_Range_Handle_Box_Shadow);background-color:var(--fdSlider_Range_Handle_Background);border:var(--fdSlider_Range_Handle_Border);box-shadow:var(--fdSlider_Range_Handle_Box_Shadow)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-hover,.fd-slider--range .fd-slider__inner .fd-slider__handle:hover{-webkit-box-shadow:var(--fdSlider_Range_Hover_Handle_Box_Shadow);background-color:var(--fdSlider_Range_Hover_Handle_Background);border-color:var(--fdSlider_Range_Hover_Handle_Border_Color);box-shadow:var(--fdSlider_Range_Hover_Handle_Box_Shadow)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-active,.fd-slider--range .fd-slider__inner .fd-slider__handle:active{-webkit-box-shadow:var(--fdSlider_Range_Active_Handle_Box_Shadow);background-color:var(--fdSlider_Range_Active_Handle_Background);border-color:var(--fdSlider_Range_Active_Handle_Border_Color);box-shadow:var(--fdSlider_Range_Active_Handle_Box_Shadow)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-active:after,.fd-slider--range .fd-slider__inner .fd-slider__handle:active:after{display:none}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-focus,.fd-slider--range .fd-slider__inner .fd-slider__handle:focus{-webkit-box-shadow:var(--fdSlider_Range_Focus_Handle_Box_Shadow);background-color:var(--fdSlider_Range_Focus_Handle_Background);border:var(--fdSlider_Range_Focus_Handle_Border);box-shadow:var(--fdSlider_Range_Focus_Handle_Box_Shadow);z-index:5}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-focus:after,.fd-slider--range .fd-slider__inner .fd-slider__handle:focus:after{display:none}/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:2.25rem;min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;padding:var(--fdInput_Field_Padding, 0 .625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input[class*=-compact],.fd-input[class*=-condensed],[class*=-compact] .fd-input:not([class*=-cozy]),[class*=-condensed] .fd-input:not([class*=-cozy]){box-sizing:border-box;height:1.625rem;margin:var(--fdInput_Field_Compact_Margin, .1875rem 0);min-height:1.625rem;min-width:var(--fdInput_Field_Compact_Min_Width, 2rem);padding:var(--fdInput_Field_Compact_Padding, 0 .5rem)}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius)}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-hover,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-hover,.fd-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);z-index:5}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover--slider{display:block!important}.fd-popover__body.fd-slider--tooltip-popover{top:-7px!important;overflow:hidden}.fd-popover__body.fd-slider--tooltip-popover .fd-slider--tooltip{padding:.25rem;min-width:2rem;text-align:center;height:1.375rem;line-height:1;direction:ltr;box-sizing:border-box;margin:0!important;border:0;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);font-size:.875rem;font-size:var(--sapFontSize)}.fd-slider{display:block}.fd-slider.fd-slider--with-labels{padding-bottom:2rem}.fd-slider__tick-wrapper .fd-slider__label,.fd-slider__tick-wrapper .fd-slider__tick{position:absolute}.fd-slider__ticks{height:var(--fdSlider_Tick_Height)}.fd-slider__track .fd-slider__handle:focus{z-index:2;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.fd-slider__track .fd-popover-custom{display:none}.fd-slider__labels .fd-slider__label{white-space:nowrap}.fd-slider__alternative-tick-width .fd-slider__tick{width:1px}[dir=rtl] .fd-slider__handle{transform:translate(50%,-50%)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1.Platform }, { type: i2.LiveAnnouncer }, { type: i3.RtlService, decorators: [{
+                    }, standalone: true, imports: [
+                        NgTemplateOutlet,
+                        NgIf,
+                        NgFor,
+                        SliderPositionDirective,
+                        PopoverModule,
+                        FormsModule,
+                        OnlyDigitsDirective,
+                        AsyncPipe,
+                        FdTranslatePipe
+                    ], template: "<div class=\"fd-slider__inner\">\n    <ng-container *ngTemplateOutlet=\"_isRange ? rangeMode : singleMode\"></ng-container>\n\n    <div class=\"fd-slider__track\" (click)=\"onTrackClick($event)\" #track>\n        <ng-container *ngTemplateOutlet=\"_isRange ? rangeModeTrack : singleModeTrack\"></ng-container>\n    </div>\n\n    <div class=\"fd-slider__tick-wrapper\">\n        <div class=\"fd-slider__ticks\" (click)=\"onTrackClick($event)\">\n            <ng-container *ngIf=\"showTicks\">\n                <ng-container *ngFor=\"let tick of _tickMarks; index as i\">\n                    <div\n                        class=\"fd-slider__tick\"\n                        fd-slider-position\n                        [vertical]=\"vertical\"\n                        [position]=\"tick.position || 0\"\n                        [class.fd-slider__tick--in-range]=\"\n                            !hideProgressBar &&\n                            (_isRange\n                                ? tick.value >= _position[0] && tick.value <= _position[1]\n                                : tick.value <= _position)\n                        \"\n                    ></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <div class=\"fd-slider__labels\" *ngIf=\"showTicks && showTicksLabels\">\n            <ng-container *ngFor=\"let tick of _tickMarks; index as i; last as last; first as first\">\n                <div\n                    *ngIf=\"first || last || i % tickmarksBetweenLabels === 0\"\n                    class=\"fd-slider__label\"\n                    fd-slider-position\n                    [vertical]=\"vertical\"\n                    [position]=\"tick.position || 0\"\n                >\n                    {{ tick.label }}\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-template #singleModeTrack>\n    <div\n        *ngIf=\"!hideProgressBar\"\n        class=\"fd-slider__track-range\"\n        [style.height.%]=\"vertical ? _progress : null\"\n        [style.width.%]=\"vertical ? null : _progress\"\n    ></div>\n</ng-template>\n\n<ng-template #rangeModeTrack>\n    <div\n        *ngIf=\"!hideProgressBar\"\n        class=\"fd-slider__track-range\"\n        [style.height.%]=\"vertical ? _rangeProgress : null\"\n        [style.width.%]=\"vertical ? null : _rangeProgress\"\n        fd-slider-position\n        [vertical]=\"vertical\"\n        [position]=\"_handle1Position < _handle2Position ? _handle1Position : _handle2Position\"\n    >\n        <div\n            class=\"fd-slider__track-focus-range\"\n            (mousedown)=\"onHandleClick($event, true)\"\n            (keydown)=\"onKeyDown($event, _handles.Both)\"\n            tabindex=\"0\"\n            #rangeGroupHandle\n        ></div>\n    </div>\n</ng-template>\n\n<ng-template #singleMode>\n    <div\n        #handle\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.singleMinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? singleSliderPopover : null\"\n        [attr.aria-valuemin]=\"'coreSlider.singleValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.singleValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.singleValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER) })\n                : getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.singleValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER) })\n                : getValuenow(_position, _sliderValueTargets.SINGLE_SLIDER)\n        \"\n        fd-slider-position\n        [vertical]=\"vertical\"\n        [position]=\"_progress\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (focus)=\"_handleFocused$.next(true)\"\n        (blur)=\"_handleFocused$.next(false)\"\n        (keydown)=\"onKeyDown($event)\"\n    ></div>\n\n    <fd-popover\n        #singleSliderPopover\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"handle\"\n        [disabled]=\"!tooltipMode\"\n        class=\"fd-popover--slider\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.SINGLE_SLIDER, position: _position }\n            \"\n        ></ng-container>\n    </fd-popover>\n</ng-template>\n\n<ng-template #rangeMode>\n    <div\n        #rangeHandle1\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.multipleHandle1MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? rangeSliderPopover1 : null\"\n        [attr.aria-valuemin]=\"'coreSlider.multipleHandle1ValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.multipleHandle1ValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle1ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1) })\n                : getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle1ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1) })\n                : getValuenow(_handle1Value, _sliderValueTargets.RANGE_SLIDER1)\n        \"\n        fd-slider-position\n        [vertical]=\"vertical\"\n        [position]=\"_handle1Position\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (keydown)=\"onKeyDown($event, _handles.First)\"\n        (focus)=\"_rangeHandle1Focused$.next(true)\"\n        (blur)=\"_rangeHandle1Focused$.next(false)\"\n    ></div>\n\n    <div\n        #rangeHandle2\n        class=\"fd-slider__handle\"\n        [class.fd-slider__handle--lg]=\"_contentDensityObserver.isCozy$ | async\"\n        [attr.tabindex]=\"disabled ? -1 : 0\"\n        role=\"slider\"\n        [attr.aria-label]=\"\n            ariaLabel || 'coreSlider.multipleHandle2MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }\n        \"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [fdPopoverTrigger]=\"tooltipMode ? rangeSliderPopover2 : null\"\n        [attr.aria-valuemin]=\"'coreSlider.multipleHandle2ValueminDetails' | fdTranslate : { value: minValue }\"\n        [attr.aria-valuemax]=\"'coreSlider.multipleHandle2ValuemaxDetails' | fdTranslate : { value: maxValue }\"\n        [attr.aria-valuenow]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle2ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2) })\n                : getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2)\n        \"\n        [attr.aria-valuetext]=\"\n            _useSliderValuePrefix\n                ? ('coreSlider.multipleHandle2ValueNowDetails'\n                  | fdTranslate : { value: getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2) })\n                : getValuenow(_handle2Value, _sliderValueTargets.RANGE_SLIDER2)\n        \"\n        fd-slider-position\n        [vertical]=\"vertical\"\n        [position]=\"_handle2Position\"\n        (mousedown)=\"onHandleClick($event); $event.stopPropagation()\"\n        (keydown)=\"onKeyDown($event, _handles.Second)\"\n        (focus)=\"_rangeHandle2Focused$.next(true)\"\n        (blur)=\"_rangeHandle2Focused$.next(false)\"\n    ></div>\n\n    <fd-popover\n        #rangeSliderPopover1\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"rangeHandle1\"\n        [disabled]=\"!tooltipMode\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        class=\"fd-popover--slider\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.RANGE_SLIDER1, position: _handle1Value }\n            \"\n        ></ng-container>\n    </fd-popover>\n\n    <fd-popover\n        #rangeSliderPopover2\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"false\"\n        [appendTo]=\"rangeHandle2\"\n        [disabled]=\"!tooltipMode\"\n        additionalBodyClass=\"fd-slider--tooltip-popover\"\n        class=\"fd-popover--slider\"\n        placement=\"top\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                popoverInner;\n                context: { target: _sliderValueTargets.RANGE_SLIDER2, position: _handle2Value }\n            \"\n        ></ng-container>\n    </fd-popover>\n</ng-template>\n\n<ng-template #popoverInner let-target=\"target\" let-position=\"position\">\n    <div\n        #sliderTooltipWrapper\n        class=\"fd-slider--tooltip-wrapper\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\"\n        (mouseenter)=\"_popoverInputFieldHovered$.next(true)\"\n        (mouseleave)=\"_popoverInputFieldHovered$.next(false)\"\n    >\n        <div *ngIf=\"(customValues && customValues.length > 0) || tooltipMode === 'readonly'\" class=\"fd-slider--tooltip\">\n            {{ customValues && customValues.length > 0 ? customValues[position].label : _popoverValueRef[target] }}\n        </div>\n\n        <input\n            #popoverInputField\n            tabindex=\"-1\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            fdkOnlyDigits\n            [decimal]=\"true\"\n            [style.width.ch]=\"('' + _popoverValueRef[target]).length + 2\"\n            class=\"fd-input fd-slider--tooltip {{ _popoverInputFieldClass }}\"\n            *ngIf=\"customValues?.length === 0 && tooltipMode === 'editable'\"\n            [(ngModel)]=\"_popoverValueRef[target]\"\n            (blur)=\"_updateValueFromInput(popoverInputField.value, target)\"\n            (keydown.enter)=\"_updateValueFromInput(popoverInputField.value, target)\"\n            (focus)=\"_popoverInputFieldFocused$.next(true)\"\n            (blur)=\"_popoverInputFieldFocused$.next(false)\"\n        />\n    </div>\n</ng-template>\n", styles: [".fd-slider{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;min-width:4rem;padding:0;padding:1rem calc(var(--fdSlider_Handle_Width) * .5 + .125rem);position:relative}.fd-slider:after,.fd-slider:before{box-sizing:inherit;font-size:inherit}.fd-slider.is-disabled,.fd-slider:disabled,.fd-slider[aria-disabled=true]{cursor:not-allowed}.fd-slider--lg{--fdSlider_Handle_Width:var(--fdSlider_Mobile_Handle_Width);--fdSlider_Handle_Height:var(--fdSlider_Mobile_Handle_Height);--fdSlider_Handle_Active_Width:var(--fdSlider_Mobile_Handle_Active_Size);--fdSlider_Handle_Active_Height:var(--fdSlider_Mobile_Handle_Active_Size);padding-left:calc(var(--fdSlider_Mobile_Handle_Width) * .5 + .125rem);padding-right:calc(var(--fdSlider_Mobile_Handle_Width) * .5 + .125rem)}.fd-slider__inner{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__inner:after,.fd-slider__inner:before{-webkit-box-sizing:inherit;-webkit-box-sizing:border-box;-webkit-transform:translateY(-50%);background-color:var(--fdSlider_Endpoint_Active_Background);border:0;border:var(--fdSlider_Endpoint_Active_Border);border-radius:50%;box-sizing:inherit;box-sizing:border-box;color:var(--sapTextColor);content:\"\";font-family:var(--sapFontFamily);font-size:inherit;font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Endpoint_Size);left:-.7rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:var(--fdSlider_Endpoint_Size)}.fd-slider__inner:after:after,.fd-slider__inner:after:before,.fd-slider__inner:before:after,.fd-slider__inner:before:before{box-sizing:inherit;font-size:inherit}.fd-slider__inner:after{left:auto;right:-.7rem}.fd-slider:not(.fd-slider--vertical):not(.fd-slider--range) .fd-slider__inner[dir=rtl]:before,.fd-slider__inner:after,[dir=rtl] .fd-slider:not(.fd-slider--vertical):not(.fd-slider--range) .fd-slider__inner:before{background-color:var(--fdSlider_Endpoint_Background);border:var(--fdSlider_Endpoint_Border)}.fd-slider:not(.fd-slider--vertical):not(.fd-slider--range) .fd-slider__inner[dir=rtl]:after,[dir=rtl] .fd-slider:not(.fd-slider--vertical):not(.fd-slider--range) .fd-slider__inner:after{background-color:var(--fdSlider_Endpoint_Active_Background);border:var(--fdSlider_Endpoint_Active_Border)}.fd-slider__track{-webkit-box-sizing:border-box;-webkit-box-shadow:inset 0 0 0 var(--fdSlider_Track_Border_Width) var(--fdSlider_Track_Border_Color);background-color:var(--fdSlider_Track_Background);border:0;border-radius:var(--fdSlider_Track_BorderRadius);box-shadow:inset 0 0 0 var(--fdSlider_Track_Border_Width) var(--fdSlider_Track_Border_Color);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Track_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;width:100%;z-index:1}.fd-slider__track:after,.fd-slider__track:before{box-sizing:inherit;font-size:inherit}.fd-slider__track-range{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdSlider_Track_Active_Box_Shadow);background-color:var(--fdSlider_Track_Active_Background);border:0;border:.0625rem solid var(--fdSlider_Track_Active_Border);border-radius:.25rem;box-shadow:var(--fdSlider_Track_Active_Box_Shadow);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__track-range:after,.fd-slider__track-range:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick-wrapper{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:calc((var(--fdSlider_Track_Height) - var(--fdSlider_Tick_Height)) / 2);width:100%;z-index:2}.fd-slider__tick-wrapper:after,.fd-slider__tick-wrapper:before{box-sizing:inherit;font-size:inherit}.fd-slider__ticks{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-slider__ticks:after,.fd-slider__ticks:before{box-sizing:inherit;font-size:inherit}.fd-slider__labels{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;top:.5rem}.fd-slider__labels:after,.fd-slider__labels:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick{-webkit-box-sizing:border-box;border:0;border-left:.0625rem solid var(--fdSlider_Tick_Background);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Tick_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-slider__tick:after,.fd-slider__tick:before{box-sizing:inherit;font-size:inherit}.fd-slider__tick--in-range{border-color:var(--fdSlider_Active_Tick_Background)}.fd-slider__label{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;width:0}.fd-slider__label:after,.fd-slider__label:before{box-sizing:inherit;font-size:inherit}.fd-slider__handle{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-transform:translate(-50%,-50%);align-items:center;background-color:var(--fdSlider_Handle_Background);border:0;border:var(--fdSlider_Handle_Border);border-radius:var(--fdSlider_Handle_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSlider_Handle_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--fdSlider_Handle_Width);z-index:3}.fd-slider__handle:after,.fd-slider__handle:before{box-sizing:inherit;font-size:inherit}.fd-slider__handle:before{-webkit-transform:translate(-50%,-50%);content:\"\";height:var(--fdSlider_Handle_Active_Height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--fdSlider_Handle_Active_Width)}.fd-slider__handle:after{color:var(--sapContent_Selected_ForegroundColor);content:\"\\e29c\";display:var(--fdSlider_Handle_Icon_Display);font-family:SAP-icons;font-size:.875rem;line-height:1}.fd-slider__handle.is-focus,.fd-slider__handle:focus{background-color:var(--fdSlider_Focus_Handle_Background);border:var(--fdSlider_Focus_Handle_Border);outline:none;z-index:5}.fd-slider__handle.is-focus:after,.fd-slider__handle:focus:after{display:none}.fd-slider__handle.is-hover,.fd-slider__handle:hover{background-color:var(--fdSlider_Hover_Handle_Background);border:var(--fdSlider_Hover_Handle_Border);border-color:var(--fdSlider_Handle_Border_Hover_Color)}.fd-slider__handle.is-hover.is-focus,.fd-slider__handle.is-hover:focus,.fd-slider__handle:hover.is-focus,.fd-slider__handle:hover:focus{background-color:var(--fdSlider_Focus_Handle_Background);border:var(--fdSlider_Focus_Handle_Border);outline:none;z-index:5}.fd-slider__handle.is-hover.is-focus:after,.fd-slider__handle.is-hover:focus:after,.fd-slider__handle:hover.is-focus:after,.fd-slider__handle:hover:focus:after{display:none}.fd-slider__handle.is-active,.fd-slider__handle:active{background-color:var(--fdSlider_Active_Handle_Background);border:var(--fdSlider_Active_Handle_Border)}.fd-slider__handle.is-active.is-focus,.fd-slider__handle.is-active:focus,.fd-slider__handle:active.is-focus,.fd-slider__handle:active:focus{background-color:var(--fdSlider_Focus_Handle_Background);border:var(--fdSlider_Focus_Handle_Border);outline:none;z-index:5}.fd-slider__handle.is-active.is-focus:after,.fd-slider__handle.is-active:focus:after,.fd-slider__handle:active.is-focus:after,.fd-slider__handle:active:focus:after{display:none}.fd-slider__track-focus-range{-webkit-box-sizing:border-box;-webkit-transform:translateY(-50%);border:0;border-radius:var(--fdSlider_Range_Track_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:calc(var(--fdSlider_Handle_Height) + .5rem);left:0;line-height:var(--sapContent_LineHeight);margin:0;margin:0 calc(var(--fdSlider_Handle_Height) * -1 / 1.1);padding:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.fd-slider__track-focus-range:after,.fd-slider__track-focus-range:before{box-sizing:inherit;font-size:inherit}.fd-slider__track-focus-range.is-focus,.fd-slider__track-focus-range:focus{outline:var(--fdSlider_Focus_Range_Outline);z-index:5}.fd-slider--range .fd-slider__inner:after,.fd-slider--range .fd-slider__inner:before{background-color:var(--fdSlider_Endpoint_Background);border:var(--fdSlider_Endpoint_Border)}.fd-slider--range .fd-slider__inner .fd-slider__handle{background-color:var(--fdSlider_Range_Handle_Background);border:var(--fdSlider_Range_Handle_Border)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-hover,.fd-slider--range .fd-slider__inner .fd-slider__handle:hover{background-color:var(--fdSlider_Range_Hover_Handle_Background);border-color:var(--fdSlider_Range_Hover_Handle_Border_Color)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-active,.fd-slider--range .fd-slider__inner .fd-slider__handle:active{background-color:var(--fdSlider_Range_Active_Handle_Background);border-color:var(--fdSlider_Range_Active_Handle_Border_Color)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-active:after,.fd-slider--range .fd-slider__inner .fd-slider__handle:active:after{display:var(--fdSlider_Focus_Handle_Display)}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-focus,.fd-slider--range .fd-slider__inner .fd-slider__handle:focus{background-color:var(--fdSlider_Range_Focus_Handle_Background);border:var(--fdSlider_Range_Focus_Handle_Border);z-index:5}.fd-slider--range .fd-slider__inner .fd-slider__handle.is-focus:after,.fd-slider--range .fd-slider__inner .fd-slider__handle:focus:after{display:var(--fdSlider_Focus_Handle_Display)}.fd-slider--vertical{height:100%}.fd-slider--vertical .fd-slider__inner{height:100%;width:var(--fdSlider_Track_Height)}.fd-slider--vertical .fd-slider__inner:after,.fd-slider--vertical .fd-slider__inner:before{-webkit-transform:translateX(-50%);left:50%;right:auto;top:auto;transform:translate(-50%)}.fd-slider--vertical .fd-slider__inner:before{bottom:-.7rem}.fd-slider--vertical .fd-slider__inner:after{top:-.7rem}.fd-slider--vertical .fd-slider__track{height:100%;width:var(--fdSlider_Track_Height)}.fd-slider--vertical .fd-slider__track-range{bottom:0;position:absolute;width:100%}.fd-slider--vertical .fd-slider__handle{-webkit-transform:translate(-50%,50%);bottom:0;height:var(--fdSlider_Handle_Width);left:50%;top:auto;transform:translate(-50%,50%);width:var(--fdSlider_Handle_Height)}.fd-slider--vertical .fd-slider__handle:after{transform:rotate(90deg)}.fd-slider--vertical .fd-slider__tick-wrapper{height:100%;left:calc((var(--fdSlider_Track_Height) - var(--fdSlider_Tick_Height)) / 2);right:calc((var(--fdSlider_Track_Height) - var(--fdSlider_Tick_Height)) / 2);top:0}.fd-slider--vertical .fd-slider__ticks{flex-direction:column-reverse;height:100%}.fd-slider--vertical .fd-slider__tick{border-left:none;border-top-style:solid;border-top-width:.0625rem;height:0;width:var(--fdSlider_Tick_Height)}.fd-slider--vertical .fd-slider__labels{flex-direction:column-reverse;height:100%;left:calc(var(--fdSlider_Handle_Width) * .5 + .125rem);position:absolute;top:-.55rem}.fd-slider--vertical .fd-slider__labels[dir=rtl],[dir=rtl] .fd-slider--vertical .fd-slider__labels{left:auto;right:calc(var(--fdSlider_Handle_Width) * .5 + .125rem)}.fd-slider--vertical .fd-slider__label{height:.0625rem;width:auto}.fd-slider--vertical.fd-slider--range .fd-slider__track-range{left:0}.fd-slider--vertical.fd-slider--range .fd-slider__track-focus-range{-webkit-transform:translateX(-50%);height:auto;inset:0 auto 0 50%;margin:calc(var(--fdSlider_Handle_Height) * -1 / 1.1) 0;transform:translate(-50%);width:calc(var(--fdSlider_Handle_Height) + .5rem)}/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--sapElement_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:var(--sapElement_Height);min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;padding:var(--fdInput_Field_Padding, 0 .625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input[class*=-compact],.fd-input[class*=-condensed],[class*=-compact] .fd-input:not([class*=-cozy]),[class*=-condensed] .fd-input:not([class*=-cozy]){box-sizing:border-box;height:var(--sapElement_Compact_Height);margin:var(--fdInput_Field_Compact_Margin, .1875rem 0);min-height:var(--sapElement_Compact_Height);min-width:var(--fdInput_Field_Compact_Min_Width, 2rem);padding:var(--fdInput_Field_Compact_Padding, 0 .5rem)}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-success.is-expanded,.fd-input.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-error.is-expanded,.fd-input.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-warning.is-expanded,.fd-input.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-alert.is-expanded,.fd-input.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-information.is-expanded,.fd-input.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-focus,.fd-input.is-readonly.is-hover,.fd-input.is-readonly:focus,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-focus,.fd-input[readonly].is-hover,.fd-input[readonly]:focus,.fd-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{z-index:5}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover--slider{display:block!important}.fd-popover__body.fd-slider--tooltip-popover{top:-7px!important;overflow:hidden}.fd-popover__body.fd-slider--tooltip-popover .fd-slider--tooltip{padding:.25rem;min-width:2rem;text-align:center;height:1.375rem;line-height:1;direction:ltr;box-sizing:border-box;margin:0!important;border:0;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);font-size:.875rem;font-size:var(--sapFontSize)}.fd-slider{display:block}.fd-slider.fd-slider--with-labels{padding-bottom:2rem}.fd-slider__tick-wrapper .fd-slider__label,.fd-slider__tick-wrapper .fd-slider__tick{position:absolute}.fd-slider__ticks{height:var(--fdSlider_Tick_Height)}.fd-slider__track .fd-slider__handle:focus{z-index:2;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.fd-slider__track .fd-popover-custom{display:none}.fd-slider__labels .fd-slider__label{white-space:nowrap}.fd-slider__alternative-tick-width .fd-slider__tick{width:1px}[dir=rtl] .fd-slider__handle{transform:translate(50%,-50%)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1$1.Platform }, { type: i2.LiveAnnouncer }, { type: i1.RtlService, decorators: [{
                     type: Optional
                 }] }, { type: i4.ContentDensityObserver }]; }, propDecorators: { id: [{
                 type: Input
@@ -830,13 +889,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], vertical: [{
+                type: Input
             }], value: [{
                 type: Input
             }], trackEl: [{
                 type: ViewChild,
-                args: ['track', {
-                        read: ElementRef
-                    }]
+                args: ['track', { read: ElementRef, static: true }]
             }], handle: [{
                 type: ViewChild,
                 args: ['handle', {
@@ -852,6 +911,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 args: ['rangeHandle2', {
                         read: ElementRef
                     }]
+            }], _rangeGroupHandle: [{
+                type: ViewChild,
+                args: ['rangeGroupHandle', { read: ElementRef, static: false }]
             }], _popovers: [{
                 type: ViewChildren,
                 args: [PopoverComponent]
@@ -863,17 +925,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 args: ['class.fd-slider--range']
             }], buildComponentCssClass: [] } });
 
+const EXPORTS = [SliderComponent, SliderPositionDirective];
 class SliderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: SliderModule, declarations: [SliderComponent, SliderPositionDirective], imports: [CommonModule, PopoverModule, FormsModule, OnlyDigitsModule, ContentDensityModule, I18nModule], exports: [SliderComponent, ContentDensityModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SliderModule, imports: [CommonModule, PopoverModule, FormsModule, OnlyDigitsModule, ContentDensityModule, I18nModule, ContentDensityModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: SliderModule, imports: [CommonModule, PopoverModule, FormsModule, OnlyDigitsModule, ContentDensityModule, I18nModule, SliderComponent, SliderPositionDirective], exports: [SliderComponent, SliderPositionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SliderModule, imports: [CommonModule, PopoverModule, FormsModule, OnlyDigitsModule, ContentDensityModule, I18nModule, SliderComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SliderModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SliderComponent, SliderPositionDirective],
-                    imports: [CommonModule, PopoverModule, FormsModule, OnlyDigitsModule, ContentDensityModule, I18nModule],
-                    exports: [SliderComponent, ContentDensityModule]
+                    imports: [CommonModule, PopoverModule, FormsModule, OnlyDigitsModule, ContentDensityModule, I18nModule, ...EXPORTS],
+                    exports: [...EXPORTS]
                 }]
         }] });