npm - @fundamental-ngx/core - Versions diffs - 0.37.0-rc.8 → 0.37.0 - Mend

@fundamental-ngx/core 0.37.0-rc.8 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (369) hide show

package/fesm2015/fundamental-ngx-core-side-navigation.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fundamental-ngx-core-side-navigation.mjs","sources":["../../../../libs/core/src/lib/side-navigation/side-navigation-utility.directive.ts","../../../../libs/core/src/lib/side-navigation/side-navigation-main.directive.ts","../../../../libs/core/src/lib/side-navigation/side-navigation.component.ts","../../../../libs/core/src/lib/side-navigation/side-navigation.component.html","../../../../libs/core/src/lib/side-navigation/side-navigation.module.ts","../../../../libs/core/src/lib/side-navigation/fundamental-ngx-core-side-navigation.ts"],"sourcesContent":["import { ContentChild, Directive, HostBinding } from '@angular/core';\nimport { NestedListDirective } from '@fundamental-ngx/core/nested-list';\n\n@Directive({\n selector: '[fdSideNavigationUtility], [fd-side-nav-utility]'\n})\nexport class SideNavigationUtilityDirective {\n /** @hidden /\n @ContentChild(NestedListDirective)\n list: NestedListDirective;\n\n /* @hidden /\n @HostBinding('class.fd-side-nav__utility')\n classSideNavUtility = true;\n}\n","import { ContentChild, Directive, HostBinding } from '@angular/core';\nimport { NestedListDirective } from '@fundamental-ngx/core/nested-list';\n\n@Directive({\n selector: '[fdSideNavigationMain], [fd-side-nav-main]'\n})\nexport class SideNavigationMainDirective {\n /* @hidden /\n @ContentChild(NestedListDirective)\n list: NestedListDirective;\n\n /* @hidden /\n @HostBinding('class.fd-side-nav__main-navigation')\n classSideNavMainNavigation = true;\n}\n","import {\n AfterContentInit,\n AfterViewInit,\n Component,\n ContentChild,\n HostBinding,\n HostListener,\n Input,\n OnInit,\n QueryList,\n ViewChildren,\n ViewEncapsulation\n} from '@angular/core';\nimport { NestedListDirective } from '@fundamental-ngx/core/nested-list';\nimport { NestedListKeyboardService } from '@fundamental-ngx/core/nested-list';\nimport { SideNavigationUtilityDirective } from './side-navigation-utility.directive';\nimport { SideNavigationMainDirective } from './side-navigation-main.directive';\nimport { SideNavigationModel } from './side-navigation-model';\nimport { PreparedNestedListComponent } from '@fundamental-ngx/core/nested-list';\nimport { NestedListStateService } from '@fundamental-ngx/core/nested-list';\n\n/\n The side-navigation is a wrapping component representing\n * a left navigation that can always display or expand/collapse using the menu icon within the global navigation.\n /\n@Component({\n templateUrl: './side-navigation.component.html',\n selector: 'fd-side-nav',\n styleUrls: ['side-navigation.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [NestedListKeyboardService, NestedListStateService]\n})\nexport class SideNavigationComponent implements AfterContentInit, AfterViewInit, OnInit {\n /\n Side navigation configuration, to pass whole model object, instead of creating HTML from scratch\n /\n @Input()\n sideNavigationConfiguration: SideNavigationModel;\n\n /* Whether condensed mode is included /\n @Input()\n @HostBinding('class.fd-side-nav--condensed')\n condensed = false;\n\n /\n The screen width, in pixels, at which to automatically collapse the side navigation on window resize.\n /\n @Input()\n collapseWidth: number;\n\n /* Whether clicking on elements should change selected state of items /\n @Input()\n set selectable(selectable: boolean) {\n this.nestedListState.selectable = selectable;\n }\n\n /* @hidden /\n @ContentChild(SideNavigationUtilityDirective)\n sideNavUtility: SideNavigationUtilityDirective;\n\n /* @hidden /\n @ContentChild(SideNavigationMainDirective)\n sideNavMain: SideNavigationMainDirective;\n\n /* @hidden /\n @ViewChildren(PreparedNestedListComponent)\n preparedNestedList: QueryList<PreparedNestedListComponent>;\n\n /* @hidden /\n constructor(private keyboardService: NestedListKeyboardService, private nestedListState: NestedListStateService) {\n this.keyboardService.refresh$.subscribe(() => {\n /* Refresh list of elements, that are being supported by keyboard /\n this.keyboardService.refreshItems(this.getLists());\n });\n }\n\n /* @hidden /\n ngOnInit(): void {\n /* Set up condensed state /\n this.nestedListState.condensed =\n this.condensed \|\| !!(this.sideNavigationConfiguration && this.sideNavigationConfiguration.condensed);\n\n if (this.collapseWidth) {\n this.onResize();\n }\n }\n\n /* @hidden /\n ngAfterContentInit(): void {\n if (!this.sideNavigationConfiguration) {\n this.keyboardService.refreshItems(this.getLists());\n }\n }\n\n /* @hidden /\n ngAfterViewInit(): void {\n if (this.sideNavigationConfiguration) {\n this.keyboardService.refreshItems(this.getLists());\n }\n }\n\n /* @hidden /\n @HostListener('window:resize')\n onResize(): void {\n if (this.collapseWidth) {\n this.condensed = window.innerWidth <= this.collapseWidth;\n }\n }\n\n /\n @hidden\n * Method that returns 1 deep level of lists.\n /\n private getLists(): NestedListDirective[] {\n const lists: NestedListDirective[] = [];\n\n if (this.sideNavMain) {\n lists.push(this.sideNavMain.list);\n }\n if (this.sideNavUtility) {\n lists.push(this.sideNavUtility.list);\n }\n if (this.preparedNestedList) {\n lists.push(...this.preparedNestedList.map((preparedNested) => preparedNested.nestedListDirective));\n }\n\n return lists;\n }\n}\n","<nav class=\"fd-side-nav\" [class.fd-side-nav--condensed]=\"condensed \|\| sideNavigationConfiguration?.condensed\">\n <ng-container ngIf=\"!sideNavigationConfiguration\">\n <ng-content></ng-content>\n </ng-container>\n <ng-container ngIf=\"sideNavigationConfiguration\">\n <div fd-side-nav-main ngIf=\"sideNavigationConfiguration.mainNavigation\">\n <fd-prepared-nested-list\n [condensed]=\"condensed \|\| !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.mainNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n <div fd-side-nav-utility ngIf=\"sideNavigationConfiguration.utilityNavigation\">\n <fd-prepared-nested-list\n [condensed]=\"condensed \|\| !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.utilityNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n </ng-container>\n</nav>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SideNavigationComponent } from './side-navigation.component';\nimport { SideNavigationMainDirective } from './side-navigation-main.directive';\nimport { SideNavigationUtilityDirective } from './side-navigation-utility.directive';\nimport { NestedListModule } from '@fundamental-ngx/core/nested-list';\n\n@NgModule({\n imports: [CommonModule, NestedListModule],\n exports: [SideNavigationComponent, SideNavigationMainDirective, SideNavigationUtilityDirective, NestedListModule],\n declarations: [SideNavigationComponent, SideNavigationMainDirective, SideNavigationUtilityDirective]\n})\nexport class SideNavigationModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i3.SideNavigationMainDirective","i4.SideNavigationUtilityDirective"],"mappings":"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"}
1	+ {"version":3,"file":"fundamental-ngx-core-side-navigation.mjs","sources":["../../../../libs/core/src/lib/side-navigation/side-navigation-utility.directive.ts","../../../../libs/core/src/lib/side-navigation/side-navigation-main.directive.ts","../../../../libs/core/src/lib/side-navigation/side-navigation.component.ts","../../../../libs/core/src/lib/side-navigation/side-navigation.component.html","../../../../libs/core/src/lib/side-navigation/side-navigation.module.ts","../../../../libs/core/src/lib/side-navigation/fundamental-ngx-core-side-navigation.ts"],"sourcesContent":["import { ContentChild, Directive, HostBinding } from '@angular/core';\nimport { NestedListDirective } from '@fundamental-ngx/core/nested-list';\n\n@Directive({\n selector: '[fdSideNavigationUtility], [fd-side-nav-utility]'\n})\nexport class SideNavigationUtilityDirective {\n /** @hidden /\n @ContentChild(NestedListDirective)\n list: NestedListDirective;\n\n /* @hidden /\n @HostBinding('class.fd-side-nav__utility')\n classSideNavUtility = true;\n}\n","import { ContentChild, Directive, HostBinding } from '@angular/core';\nimport { NestedListDirective } from '@fundamental-ngx/core/nested-list';\n\n@Directive({\n selector: '[fdSideNavigationMain], [fd-side-nav-main]'\n})\nexport class SideNavigationMainDirective {\n /* @hidden /\n @ContentChild(NestedListDirective)\n list: NestedListDirective;\n\n /* @hidden /\n @HostBinding('class.fd-side-nav__main-navigation')\n classSideNavMainNavigation = true;\n}\n","import {\n AfterContentInit,\n AfterViewInit,\n Component,\n ContentChild,\n HostBinding,\n HostListener,\n Input,\n OnInit,\n QueryList,\n ViewChildren,\n ViewEncapsulation\n} from '@angular/core';\nimport { NestedListDirective } from '@fundamental-ngx/core/nested-list';\nimport { NestedListKeyboardService } from '@fundamental-ngx/core/nested-list';\nimport { SideNavigationUtilityDirective } from './side-navigation-utility.directive';\nimport { SideNavigationMainDirective } from './side-navigation-main.directive';\nimport { SideNavigationModel } from './side-navigation-model';\nimport { PreparedNestedListComponent } from '@fundamental-ngx/core/nested-list';\nimport { NestedListStateService } from '@fundamental-ngx/core/nested-list';\n\n/\n The side-navigation is a wrapping component representing\n * a left navigation that can always display or expand/collapse using the menu icon within the global navigation.\n /\n@Component({\n templateUrl: './side-navigation.component.html',\n selector: 'fd-side-nav',\n styleUrls: ['side-navigation.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [NestedListKeyboardService, NestedListStateService]\n})\nexport class SideNavigationComponent implements AfterContentInit, AfterViewInit, OnInit {\n /\n Side navigation configuration, to pass whole model object, instead of creating HTML from scratch\n /\n @Input()\n sideNavigationConfiguration: SideNavigationModel;\n\n /* Whether condensed mode is included /\n @Input()\n @HostBinding('class.fd-side-nav--condensed')\n condensed = false;\n\n /\n The screen width, in pixels, at which to automatically collapse the side navigation on window resize.\n /\n @Input()\n collapseWidth: number;\n\n /* Whether clicking on elements should change selected state of items /\n @Input()\n set selectable(selectable: boolean) {\n this.nestedListState.selectable = selectable;\n }\n\n /* @hidden /\n @ContentChild(SideNavigationUtilityDirective)\n sideNavUtility: SideNavigationUtilityDirective;\n\n /* @hidden /\n @ContentChild(SideNavigationMainDirective)\n sideNavMain: SideNavigationMainDirective;\n\n /* @hidden /\n @ViewChildren(PreparedNestedListComponent)\n preparedNestedList: QueryList<PreparedNestedListComponent>;\n\n /* @hidden /\n constructor(private keyboardService: NestedListKeyboardService, private nestedListState: NestedListStateService) {\n this.keyboardService.refresh$.subscribe(() => {\n /* Refresh list of elements, that are being supported by keyboard /\n this.keyboardService.refreshItems(this.getLists());\n });\n }\n\n /* @hidden /\n ngOnInit(): void {\n /* Set up condensed state /\n this.nestedListState.condensed =\n this.condensed \|\| !!(this.sideNavigationConfiguration && this.sideNavigationConfiguration.condensed);\n\n if (this.collapseWidth) {\n this.onResize();\n }\n }\n\n /* @hidden /\n ngAfterContentInit(): void {\n if (!this.sideNavigationConfiguration) {\n this.keyboardService.refreshItems(this.getLists());\n }\n }\n\n /* @hidden /\n ngAfterViewInit(): void {\n if (this.sideNavigationConfiguration) {\n this.keyboardService.refreshItems(this.getLists());\n }\n }\n\n /* @hidden /\n @HostListener('window:resize')\n onResize(): void {\n if (this.collapseWidth) {\n this.condensed = window.innerWidth <= this.collapseWidth;\n }\n }\n\n /\n @hidden\n * Method that returns 1 deep level of lists.\n /\n private getLists(): NestedListDirective[] {\n const lists: NestedListDirective[] = [];\n\n if (this.sideNavMain) {\n lists.push(this.sideNavMain.list);\n }\n if (this.sideNavUtility) {\n lists.push(this.sideNavUtility.list);\n }\n if (this.preparedNestedList) {\n lists.push(...this.preparedNestedList.map((preparedNested) => preparedNested.nestedListDirective));\n }\n\n return lists;\n }\n}\n","<nav class=\"fd-side-nav\" [class.fd-side-nav--condensed]=\"condensed \|\| sideNavigationConfiguration?.condensed\">\n <ng-container ngIf=\"!sideNavigationConfiguration\">\n <ng-content></ng-content>\n </ng-container>\n <ng-container ngIf=\"sideNavigationConfiguration\">\n <div fd-side-nav-main ngIf=\"sideNavigationConfiguration.mainNavigation\">\n <fd-prepared-nested-list\n [condensed]=\"condensed \|\| !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.mainNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n <div fd-side-nav-utility ngIf=\"sideNavigationConfiguration.utilityNavigation\">\n <fd-prepared-nested-list\n [condensed]=\"condensed \|\| !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.utilityNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n </ng-container>\n</nav>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SideNavigationComponent } from './side-navigation.component';\nimport { SideNavigationMainDirective } from './side-navigation-main.directive';\nimport { SideNavigationUtilityDirective } from './side-navigation-utility.directive';\nimport { NestedListModule } from '@fundamental-ngx/core/nested-list';\n\n@NgModule({\n imports: [CommonModule, NestedListModule],\n exports: [SideNavigationComponent, SideNavigationMainDirective, SideNavigationUtilityDirective, NestedListModule],\n declarations: [SideNavigationComponent, SideNavigationMainDirective, SideNavigationUtilityDirective]\n})\nexport class SideNavigationModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i3.SideNavigationMainDirective","i4.SideNavigationUtilityDirective"],"mappings":"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"}

package/fesm2015/fundamental-ngx-core-slider.mjs CHANGED Viewed

@@ -753,7 +753,7 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             defaultContentDensity: ContentDensityMode.COMPACT,
             modifiers: { [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                    [innerText]=\"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\n            *ngIf=\"(customValues && customValues.length > 0) || tooltipMode === 'readonly'\"\n            class=\"fd-slider--tooltip\"\n            [innerText]=\"\n                customValues && customValues.length > 0 ? customValues[position].label : _popoverValueRef[target]\n            \"\n        ></div>\n\n        <input\n            #popoverInputField\n            tabindex=\"-1\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            fd-only-digits\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;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;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;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;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;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;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;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;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;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;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;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);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.is-active,.fd-slider--range .fd-slider__inner .fd-slider__handle:active{background-color:var(--fdSlider_Active_Range_Handle_Background)}.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{background-color:var(--fdSlider_Active_Range_Handle_Background);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.25.1-rc.16\n * Copyright (c) 2022 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);background-color: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;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;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);background-color: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);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:last-child{margin-bottom:.25rem}.fd-input--compact{box-sizing:border-box;height:1.625rem;margin:.1875rem 0;min-height:1.625rem;min-width:2rem;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);pointer-events: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-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{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_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);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__popper.fd-slider--tooltip-popover{top:-7px!important;overflow:hidden}.fd-popover__popper.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: "[fdOnlyDigits], [fd-only-digits]", 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 }, { 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                    [innerText]=\"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\n            *ngIf=\"(customValues && customValues.length > 0) || tooltipMode === 'readonly'\"\n            class=\"fd-slider--tooltip\"\n            [innerText]=\"\n                customValues && customValues.length > 0 ? customValues[position].label : _popoverValueRef[target]\n            \"\n        ></div>\n\n        <input\n            #popoverInputField\n            tabindex=\"-1\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            fd-only-digits\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;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;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;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;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;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;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;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;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;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;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;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.26.0-rc.27\n * Copyright (c) 2022 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);background-color: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;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;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);background-color: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);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:last-child{margin-bottom:.25rem}.fd-input--compact{box-sizing:border-box;height:1.625rem;margin:.1875rem 0;min-height:1.625rem;min-width:2rem;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);pointer-events: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-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{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_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);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: "[fdOnlyDigits], [fd-only-digits]", 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 });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -773,7 +773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", 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                    [innerText]=\"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\n            *ngIf=\"(customValues && customValues.length > 0) || tooltipMode === 'readonly'\"\n            class=\"fd-slider--tooltip\"\n            [innerText]=\"\n                customValues && customValues.length > 0 ? customValues[position].label : _popoverValueRef[target]\n            \"\n        ></div>\n\n        <input\n            #popoverInputField\n            tabindex=\"-1\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            fd-only-digits\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;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;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;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;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;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;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;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;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;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;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;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);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.is-active,.fd-slider--range .fd-slider__inner .fd-slider__handle:active{background-color:var(--fdSlider_Active_Range_Handle_Background)}.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{background-color:var(--fdSlider_Active_Range_Handle_Background);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.25.1-rc.16\n * Copyright (c) 2022 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);background-color: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;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;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);background-color: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);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:last-child{margin-bottom:.25rem}.fd-input--compact{box-sizing:border-box;height:1.625rem;margin:.1875rem 0;min-height:1.625rem;min-width:2rem;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);pointer-events: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-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{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_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);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__popper.fd-slider--tooltip-popover{top:-7px!important;overflow:hidden}.fd-popover__popper.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"] }]
+                    }, 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                    [innerText]=\"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\n            *ngIf=\"(customValues && customValues.length > 0) || tooltipMode === 'readonly'\"\n            class=\"fd-slider--tooltip\"\n            [innerText]=\"\n                customValues && customValues.length > 0 ? customValues[position].label : _popoverValueRef[target]\n            \"\n        ></div>\n\n        <input\n            #popoverInputField\n            tabindex=\"-1\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            fd-only-digits\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;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;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;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;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;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;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;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;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;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;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;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.26.0-rc.27\n * Copyright (c) 2022 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);background-color: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;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;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);background-color: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);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:last-child{margin-bottom:.25rem}.fd-input--compact{box-sizing:border-box;height:1.625rem;margin:.1875rem 0;min-height:1.625rem;min-width:2rem;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);pointer-events: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-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{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_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);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: [{
                         type: Optional