@fundamental-ngx/core 0.33.4 → 0.33.5-rc.11

package/fesm2015/fundamental-ngx-core-time.mjs

@@ -3,8 +3,8 @@ import { EventEmitter, ElementRef, Component, ChangeDetectionStrategy, ViewEncap
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { Subject, Subscription } from 'rxjs';
-import { debounceTime, buffer, map, takeUntil } from 'rxjs/operators';
+import { BehaviorSubject, Subject, Subscription, combineLatest } from 'rxjs';
+import { filter, tap, debounceTime, buffer, map, takeUntil } from 'rxjs/operators';
 import { DOWN_ARROW, UP_ARROW, SPACE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import * as i3$1 from '@fundamental-ngx/core/utils';
 import { KeyUtil, PipeModule } from '@fundamental-ngx/core/utils';
@@ -39,11 +39,6 @@ class TimeColumnComponent {
         this.meridian = false;
         /** Id of column, initiated with some default value */
         this.id = 'fd-time-column-' + timeColumnUniqueId++;
-        /**
-         * Offset for carousel directive, active item is always the first one.
-         * In case of having more items in carousel than 1, middle element should be active
-         */
-        this.offset = 3;
         /** Event emitted, when active item is changed, by carousel */
         this.activeValueChange = new EventEmitter();
         /** Event emitted, when certain column is activated */
@@ -55,19 +50,34 @@ class TimeColumnComponent {
          */
         this.typeaheadDebounceInterval = 750;
         /** @hidden */
+        this._elementsAtOnce$ = new BehaviorSubject(7);
+        /** @hidden */
+        this._offset$ = new BehaviorSubject(3);
+        /** @hidden */
         this._active = false;
         /** @hidden */
         this._queryKeyDownEvent = new Subject();
         /** @hidden */
         this._isDragging = false;
         /** @hidden */
-        this._initialized = false;
+        this._viewInit$ = new BehaviorSubject(false);
         /** @hidden */
         this._subscriptions = new Subscription();
+        this._subscriptions.add(combineLatest([this._viewInit$, this._elementsAtOnce$, this._offset$])
+            .pipe(filter(([viewInit]) => viewInit), tap(([, elementsAtOnce, offset]) => {
+            const averageHeight = this.items.toArray().reduce((acc, next) => acc + next.getHeight(), 0) / this.items.length;
+            this.wrapperHeight = `${averageHeight * elementsAtOnce}px`;
+            const visibleButNotSelectedElements = Math.floor(elementsAtOnce / 2);
+            if (offset === 0) {
+                this.items.first.element.style.marginTop = `${visibleButNotSelectedElements * averageHeight}px`;
+                this.items.last.element.style.marginBottom = `${visibleButNotSelectedElements * averageHeight}px`;
+            }
+        }))
+            .subscribe());
     }
     /** Currently chosen, centered time column item */
     set activeValue(activeItem) {
-        if (this._initialized && this._activeValue !== activeItem) {
+        if (this._viewInit$.value && this._activeValue !== activeItem) {
             this._pickTime(this._getItem(activeItem), false);
         }
         this._activeValue = activeItem;
@@ -78,7 +88,7 @@ class TimeColumnComponent {
     /** Defines if column is active, it has impact on behavior and visual  */
     set active(value) {
         this._active = value;
-        if (value && this._initialized) {
+        if (value && this._viewInit$.value) {
             this._changeDetRef.detectChanges();
             this._pickTime(this._getItem(this.activeValue), false);
             this._focusIndicator();
@@ -87,6 +97,22 @@ class TimeColumnComponent {
     get active() {
         return this._active;
     }
+    /**
+     * Offset for carousel directive, active item is always the first one.
+     * In case of having more items in carousel than 1, middle element should be active
+     */
+    get offset() {
+        return this._offset$.value;
+    }
+    set offset(value) {
+        this._offset$.next(value);
+    }
+    /**
+     * Quantity of the elements to be shown at the same time in column
+     */
+    set elementsAtOnce(value) {
+        this._elementsAtOnce$.next(value);
+    }
     /** @hidden */
     get currentIndicatorId() {
         return this.id + '-current-indicator';
@@ -97,12 +123,12 @@ class TimeColumnComponent {
     }
     /** @hidden */
     ngOnInit() {
-        this._setUpCarouselConfiguration();
+        this._subscriptions.add(this._elementsAtOnce$.pipe(tap(() => this._setUpCarouselConfiguration())).subscribe());
         this._setUpQuerySubscription();
     }
     /** @hidden */
     ngAfterViewInit() {
-        this._initialized = true;
+        this._viewInit$.next(true);
     }
     /** @hidden */
     ngOnDestroy() {
@@ -287,18 +313,16 @@ class TimeColumnComponent {
     }
     /** @hidden */
     _setUpCarouselConfiguration() {
+        const config = {
+            gestureSupport: true,
+            vertical: true,
+            elementsAtOnce: this._elementsAtOnce$.value,
+            transition: '150ms'
+        };
         if (!this.meridian) {
-            this.config = {
-                gestureSupport: true,
-                vertical: true,
-                elementsAtOnce: 7,
-                transition: '150ms',
-                infinite: true
-            };
-        }
-        else {
-            this.config = { gestureSupport: true, vertical: true, elementsAtOnce: 7, transition: '150ms' };
+            config.infinite = true;
         }
+        this.config = config;
     }
     /** @hidden */
     _setUpInitialValue() {
@@ -309,12 +333,12 @@ class TimeColumnComponent {
     }
 }
 TimeColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TimeColumnComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TimeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TimeColumnComponent, selector: "fd-time-column", inputs: { rows: "rows", compact: "compact", spinners: "spinners", activeValue: "activeValue", active: "active", meridian: "meridian", id: "id", timeConfig: "timeConfig", offset: "offset" }, outputs: { activeValueChange: "activeValueChange", activeStateChange: "activeStateChange" }, host: { listeners: { "click": "onItemClick()", "keydown": "keyDownHandler($event)" }, properties: { "class.fd-time__col--period": "this.meridian" }, classAttribute: "fd-time__col" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: CarouselDirective, descendants: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "items", predicate: CarouselItemDirective, descendants: true }], ngImport: i0, template: "<label class=\"fd-time__slider-label\">{{ timeConfig?.label }}</label>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-up-arrow\"\n    tabindex=\"-1\"\n    [compact]=\"compact\"\n    [title]=\"timeConfig?.decreaseLabel\"\n    [ariaLabel]=\"timeConfig?.decreaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event, true)\"\n    (click)=\"scrollUp($event)\"\n></button>\n<div class=\"fd-time__wrapper\" [class.fd-time__wrapper--active]=\"active\" [class.fd-time__wrapper--meridian]=\"meridian\">\n    <ul\n        class=\"fd-time__list\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [config]=\"config\"\n        (click)=\"indicator.focus()\"\n        (activeChange)=\"activeChangedHandle($event)\"\n        (dragStateChange)=\"handleDrag($event)\"\n        fdCarousel\n    >\n        <li\n            class=\"fd-time__item\"\n            fdCarouselItem\n            *ngFor=\"let row of rows; let index = index\"\n            #item=\"fdCarouselItem\"\n            [attr.tabindex]=\"row.label === activeValue?.label ? 0 : -1\"\n            [id]=\"_createColumnItemIdByIndex(index)\"\n            [value]=\"row\"\n        >\n            <span class=\"fd-time__unit\" role=\"button\" [attr.aria-label]=\"row.label\" (click)=\"pick(item, index)\">\n                {{ row.label }}\n            </span>\n        </li>\n    </ul>\n    <div\n        class=\"fd-time__current-indicator\"\n        #indicator\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.id]=\"currentIndicatorId\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [attr.aria-labelledby]=\"currentIndicatorValueId\"\n        [attr.aria-description]=\"timeConfig?.navigationInstruction\"\n        (focus)=\"_onFocusIndicator()\"\n    >\n        <span\n            class=\"fd-time-column-custom-hidden\"\n            aria-live=\"assertive\"\n            aria-atomic=\"true\"\n            [attr.aria-hidden]=\"!active\"\n            [attr.id]=\"currentIndicatorValueId\"\n            [class.fd-time-column-custom-hidden]=\"active\"\n        >\n            {{ activeValue?.label }} {{ timeConfig?.label }}\n        </span>\n    </div>\n    <span *ngIf=\"!active\" class=\"fd-time__item fd-time__item--collapsed\">\n        {{ activeValue?.label }}\n    </span>\n</div>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-down-arrow\"\n    tabindex=\"-1\"\n    [compact]=\"compact\"\n    [title]=\"timeConfig?.increaseLabel\"\n    [ariaLabel]=\"timeConfig?.increaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event)\"\n    (click)=\"scrollDown()\"\n></button>\n", styles: [".fd-time__col .fd-carousel{transition:all .2s ease-in}.fd-time__list{overflow:visible}.fd-time-column-custom-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fd-time__current-indicator{pointer-events:none}.fd-time__current-indicator:focus{outline:none}.fd-time--compact .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed,.fd-time .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed{margin-bottom:0;margin-top:0}\n"], components: [{ type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CarouselDirective, selector: "[fdCarousel]", inputs: ["config", "active"], outputs: ["activeChange", "dragStateChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CarouselItemDirective, selector: "[fd-carousel-item], [fdCarouselItem]", inputs: ["value", "initialHeight", "initialWidth", "id"], exportAs: ["fdCarouselItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TimeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TimeColumnComponent, selector: "fd-time-column", inputs: { rows: "rows", compact: "compact", spinners: "spinners", activeValue: "activeValue", active: "active", meridian: "meridian", id: "id", timeConfig: "timeConfig", offset: "offset", elementsAtOnce: "elementsAtOnce" }, outputs: { activeValueChange: "activeValueChange", activeStateChange: "activeStateChange" }, host: { listeners: { "click": "onItemClick()", "keydown": "keyDownHandler($event)" }, properties: { "class.fd-time__col--period": "this.meridian" }, classAttribute: "fd-time__col" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: CarouselDirective, descendants: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "items", predicate: CarouselItemDirective, descendants: true }], ngImport: i0, template: "<label class=\"fd-time__slider-label\">{{ timeConfig?.label }}</label>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-up-arrow\"\n    tabindex=\"-1\"\n    [compact]=\"compact\"\n    [title]=\"timeConfig?.decreaseLabel\"\n    [ariaLabel]=\"timeConfig?.decreaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event, true)\"\n    (click)=\"scrollUp($event)\"\n></button>\n<div\n    class=\"fd-time__wrapper\"\n    [class.fd-time__wrapper--active]=\"active\"\n    [class.fd-time__wrapper--meridian]=\"meridian\"\n    [style.maxHeight]=\"active ? wrapperHeight : ''\"\n>\n    <ul\n        class=\"fd-time__list\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [config]=\"config\"\n        (click)=\"indicator.focus()\"\n        (activeChange)=\"activeChangedHandle($event)\"\n        (dragStateChange)=\"handleDrag($event)\"\n        fdCarousel\n    >\n        <li\n            class=\"fd-time__item\"\n            fdCarouselItem\n            *ngFor=\"let row of rows; let index = index\"\n            #item=\"fdCarouselItem\"\n            [attr.tabindex]=\"row.label === activeValue?.label ? 0 : -1\"\n            [id]=\"_createColumnItemIdByIndex(index)\"\n            [value]=\"row\"\n        >\n            <span class=\"fd-time__unit\" role=\"button\" [attr.aria-label]=\"row.label\" (click)=\"pick(item, index)\">\n                {{ row.label }}\n            </span>\n        </li>\n    </ul>\n    <div\n        class=\"fd-time__current-indicator\"\n        #indicator\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.id]=\"currentIndicatorId\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [attr.aria-labelledby]=\"currentIndicatorValueId\"\n        [attr.aria-description]=\"timeConfig?.navigationInstruction\"\n        (focus)=\"_onFocusIndicator()\"\n    >\n        <span\n            class=\"fd-time-column-custom-hidden\"\n            aria-live=\"assertive\"\n            aria-atomic=\"true\"\n            [attr.aria-hidden]=\"!active\"\n            [attr.id]=\"currentIndicatorValueId\"\n            [class.fd-time-column-custom-hidden]=\"active\"\n        >\n            {{ activeValue?.label }} {{ timeConfig?.label }}\n        </span>\n    </div>\n    <span *ngIf=\"!active\" class=\"fd-time__item fd-time__item--collapsed\">\n        {{ activeValue?.label }}\n    </span>\n</div>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-down-arrow\"\n    tabindex=\"-1\"\n    [compact]=\"compact\"\n    [title]=\"timeConfig?.increaseLabel\"\n    [ariaLabel]=\"timeConfig?.increaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event)\"\n    (click)=\"scrollDown()\"\n></button>\n", styles: [".fd-time__col .fd-carousel{transition:all .2s ease-in}.fd-time__list{overflow:visible}.fd-time-column-custom-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fd-time__current-indicator{pointer-events:none}.fd-time__current-indicator:focus{outline:none}.fd-time--compact .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed,.fd-time .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed{margin-bottom:0;margin-top:0}\n"], components: [{ type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CarouselDirective, selector: "[fdCarousel]", inputs: ["config", "active"], outputs: ["activeChange", "dragStateChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CarouselItemDirective, selector: "[fd-carousel-item], [fdCarouselItem]", inputs: ["value", "initialHeight", "initialWidth", "id"], exportAs: ["fdCarouselItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TimeColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-time-column', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fd-time__col'
-                    }, template: "<label class=\"fd-time__slider-label\">{{ timeConfig?.label }}</label>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-up-arrow\"\n    tabindex=\"-1\"\n    [compact]=\"compact\"\n    [title]=\"timeConfig?.decreaseLabel\"\n    [ariaLabel]=\"timeConfig?.decreaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event, true)\"\n    (click)=\"scrollUp($event)\"\n></button>\n<div class=\"fd-time__wrapper\" [class.fd-time__wrapper--active]=\"active\" [class.fd-time__wrapper--meridian]=\"meridian\">\n    <ul\n        class=\"fd-time__list\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [config]=\"config\"\n        (click)=\"indicator.focus()\"\n        (activeChange)=\"activeChangedHandle($event)\"\n        (dragStateChange)=\"handleDrag($event)\"\n        fdCarousel\n    >\n        <li\n            class=\"fd-time__item\"\n            fdCarouselItem\n            *ngFor=\"let row of rows; let index = index\"\n            #item=\"fdCarouselItem\"\n            [attr.tabindex]=\"row.label === activeValue?.label ? 0 : -1\"\n            [id]=\"_createColumnItemIdByIndex(index)\"\n            [value]=\"row\"\n        >\n            <span class=\"fd-time__unit\" role=\"button\" [attr.aria-label]=\"row.label\" (click)=\"pick(item, index)\">\n                {{ row.label }}\n            </span>\n        </li>\n    </ul>\n    <div\n        class=\"fd-time__current-indicator\"\n        #indicator\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.id]=\"currentIndicatorId\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [attr.aria-labelledby]=\"currentIndicatorValueId\"\n        [attr.aria-description]=\"timeConfig?.navigationInstruction\"\n        (focus)=\"_onFocusIndicator()\"\n    >\n        <span\n            class=\"fd-time-column-custom-hidden\"\n            aria-live=\"assertive\"\n            aria-atomic=\"true\"\n            [attr.aria-hidden]=\"!active\"\n            [attr.id]=\"currentIndicatorValueId\"\n            [class.fd-time-column-custom-hidden]=\"active\"\n        >\n            {{ activeValue?.label }} {{ timeConfig?.label }}\n        </span>\n    </div>\n    <span *ngIf=\"!active\" class=\"fd-time__item fd-time__item--collapsed\">\n        {{ activeValue?.label }}\n    </span>\n</div>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-down-arrow\"\n    tabindex=\"-1\"\n    [compact]=\"compact\"\n    [title]=\"timeConfig?.increaseLabel\"\n    [ariaLabel]=\"timeConfig?.increaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event)\"\n    (click)=\"scrollDown()\"\n></button>\n", styles: [".fd-time__col .fd-carousel{transition:all .2s ease-in}.fd-time__list{overflow:visible}.fd-time-column-custom-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fd-time__current-indicator{pointer-events:none}.fd-time__current-indicator:focus{outline:none}.fd-time--compact .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed,.fd-time .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed{margin-bottom:0;margin-top:0}\n"] }]
+                    }, template: "<label class=\"fd-time__slider-label\">{{ timeConfig?.label }}</label>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-up-arrow\"\n    tabindex=\"-1\"\n    [compact]=\"compact\"\n    [title]=\"timeConfig?.decreaseLabel\"\n    [ariaLabel]=\"timeConfig?.decreaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event, true)\"\n    (click)=\"scrollUp($event)\"\n></button>\n<div\n    class=\"fd-time__wrapper\"\n    [class.fd-time__wrapper--active]=\"active\"\n    [class.fd-time__wrapper--meridian]=\"meridian\"\n    [style.maxHeight]=\"active ? wrapperHeight : ''\"\n>\n    <ul\n        class=\"fd-time__list\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [config]=\"config\"\n        (click)=\"indicator.focus()\"\n        (activeChange)=\"activeChangedHandle($event)\"\n        (dragStateChange)=\"handleDrag($event)\"\n        fdCarousel\n    >\n        <li\n            class=\"fd-time__item\"\n            fdCarouselItem\n            *ngFor=\"let row of rows; let index = index\"\n            #item=\"fdCarouselItem\"\n            [attr.tabindex]=\"row.label === activeValue?.label ? 0 : -1\"\n            [id]=\"_createColumnItemIdByIndex(index)\"\n            [value]=\"row\"\n        >\n            <span class=\"fd-time__unit\" role=\"button\" [attr.aria-label]=\"row.label\" (click)=\"pick(item, index)\">\n                {{ row.label }}\n            </span>\n        </li>\n    </ul>\n    <div\n        class=\"fd-time__current-indicator\"\n        #indicator\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.id]=\"currentIndicatorId\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [attr.aria-labelledby]=\"currentIndicatorValueId\"\n        [attr.aria-description]=\"timeConfig?.navigationInstruction\"\n        (focus)=\"_onFocusIndicator()\"\n    >\n        <span\n            class=\"fd-time-column-custom-hidden\"\n            aria-live=\"assertive\"\n            aria-atomic=\"true\"\n            [attr.aria-hidden]=\"!active\"\n            [attr.id]=\"currentIndicatorValueId\"\n            [class.fd-time-column-custom-hidden]=\"active\"\n        >\n            {{ activeValue?.label }} {{ timeConfig?.label }}\n        </span>\n    </div>\n    <span *ngIf=\"!active\" class=\"fd-time__item fd-time__item--collapsed\">\n        {{ activeValue?.label }}\n    </span>\n</div>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-down-arrow\"\n    tabindex=\"-1\"\n    [compact]=\"compact\"\n    [title]=\"timeConfig?.increaseLabel\"\n    [ariaLabel]=\"timeConfig?.increaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event)\"\n    (click)=\"scrollDown()\"\n></button>\n", styles: [".fd-time__col .fd-carousel{transition:all .2s ease-in}.fd-time__list{overflow:visible}.fd-time-column-custom-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fd-time__current-indicator{pointer-events:none}.fd-time__current-indicator:focus{outline:none}.fd-time--compact .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed,.fd-time .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed{margin-bottom:0;margin-top:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { rows: [{
                 type: Input
             }], compact: [{
@@ -336,6 +360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }], offset: [{
                 type: Input
+            }], elementsAtOnce: [{
+                type: Input
             }], activeValueChange: [{
                 type: Output
             }], activeStateChange: [{
@@ -439,6 +465,8 @@ class TimeComponent {
         this.displayHours = true;
         /** @Input Defines if time component should be used in tablet mode */
         this.tablet = false;
+        /** @Input Defines quantity of the elements, that are visible at the same time. Should be odd number */
+        this.elementsAtOnce = 7;
         /** @Input Whether to show spinner buttons */
         this.spinnerButtons = true;
         /** Active column view to iterate with */
@@ -476,6 +504,10 @@ class TimeComponent {
         }
         this.time = this._getDefaultValue();
     }
+    /** Offset */
+    get offset() {
+        return Math.floor(this.elementsAtOnce / 2);
+    }
     /** Component aria-label */
     get _componentAriaLabel() {
         return this._timeI18nLabels.componentAriaName;
@@ -501,6 +533,9 @@ class TimeComponent {
         if (changes.meridian || changes.time) {
             this._setUpViewGrid();
         }
+        if (changes.elementsAtOnce && changes.elementsAtOnce.currentValue % 2 === 0) {
+            throw new Error('[elementsAtOnce] should be odd number');
+        }
     }
     /** @hidden */
     ngOnDestroy() {
@@ -797,13 +832,13 @@ class TimeComponent {
     }
 }
 TimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TimeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TimeI18n }, { token: i2$1.DatetimeAdapter, optional: true }, { token: i3$1.ContentDensityService, optional: true }, { token: i3$1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TimeComponent, selector: "fd-time", inputs: { meridian: "meridian", validate: "validate", keepTwoDigits: "keepTwoDigits", disabled: "disabled", displaySeconds: "displaySeconds", displayMinutes: "displayMinutes", displayHours: "displayHours", compact: "compact", tablet: "tablet", time: "time", spinnerButtons: "spinnerButtons" }, host: { listeners: { "blur": "onTouched()" } }, providers: [
+TimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TimeComponent, selector: "fd-time", inputs: { meridian: "meridian", validate: "validate", keepTwoDigits: "keepTwoDigits", disabled: "disabled", displaySeconds: "displaySeconds", displayMinutes: "displayMinutes", displayHours: "displayHours", compact: "compact", tablet: "tablet", elementsAtOnce: "elementsAtOnce", time: "time", spinnerButtons: "spinnerButtons" }, host: { listeners: { "blur": "onTouched()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TimeComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "columns", predicate: TimeColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"fd-time\"\n    (keydown)=\"handleKeyDownEvent($event)\"\n    [class.fd-time--compact]=\"compact\"\n    [class.fd-time--tablet]=\"tablet\"\n    [attr.aria-label]=\"_componentAriaLabel\"\n>\n    <fd-time-column\n        [active]=\"isActive('hour')\"\n        [rows]=\"hourViewItems\"\n        [compact]=\"compact\"\n        [activeValue]=\"activeHourViewItem\"\n        [timeConfig]=\"getHoursConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleHourChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('hour')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"displayMinutes\"\n        [active]=\"isActive('minute')\"\n        [rows]=\"minuteViewItems\"\n        [compact]=\"compact\"\n        [activeValue]=\"activeMinuteViewItem\"\n        [timeConfig]=\"getMinutesConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleMinuteChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('minute')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"displaySeconds\"\n        [active]=\"isActive('second')\"\n        [rows]=\"secondViewItems\"\n        [compact]=\"compact\"\n        [activeValue]=\"activeSecondViewItem\"\n        [timeConfig]=\"getSecondsConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleSecondChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('second')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"meridian\"\n        [active]=\"isActive('meridian')\"\n        [rows]=\"meridianViewItems\"\n        [activeValue]=\"activeMeridianViewItem\"\n        [offset]=\"0\"\n        [compact]=\"compact\"\n        [timeConfig]=\"getPeriodConfig()\"\n        [meridian]=\"true\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleMeridianChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('meridian')\"\n    ></fd-time-column>\n</div>\n", styles: ["/*!\n.fd-input\n*/.fd-input{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;color:#32363a;color:var(--sapField_TextColor, #32363a);background-color:#fff;background-color:var(--sapField_Background, #fff);border-style:solid;border-width:.0625rem;border-width:var(--sapField_BorderWidth, .0625rem);border-color:#89919a;border-color:var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-left:.75rem;padding-right:.75rem;min-width:2.75rem;width:100%;height:2.25rem;margin-top:.25rem;margin-bottom:.25rem;padding:0 .625rem;z-index:1;cursor:text;overflow:hidden;text-shadow:none;text-shadow:var(--fdInput_Text_Shadow, none)}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor, #74777a)}.fd-input::selection{color:#fff;color:var(--sapContent_ContrastTextColor, #fff);background-color:#0854a0;background-color:var(--sapSelectedColor, #0854a0)}.fd-input.is-hover,.fd-input:hover{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-input.is-success{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e);border-width:.0625rem;border-width:var(--sapField_SuccessBorderWidth, .0625rem);border-style:solid;border-style:var(--sapField_SuccessBorderStyle, solid)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-input.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00);border-width:.125rem;border-width:var(--sapField_InvalidBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InvalidBorderStyle, solid)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-input.is-alert,.fd-input.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c);border-width:.125rem;border-width:var(--sapField_WarningBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_WarningBorderStyle, solid)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover,.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-input.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1);border-width:.125rem;border-width:var(--sapField_InformationBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InformationBorderStyle, solid)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-input.is-focus,.fd-input:focus{z-index:5;box-shadow:none;outline-offset:-.1875rem;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth, .0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor, #000);outline-style:dotted;outline-style:var(--sapContent_FocusStyle, dotted)}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-information,.fd-input.is-warning{border-width:.125rem;border-style:solid;border-style:var(--fdInput_State_Border_Type, solid)}.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{z-index:5;box-shadow:none;outline-offset:-.25rem}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity, .4)}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:transparent}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:transparent}.fd-input::-ms-clear{display: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{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}.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}/*!\n * Fundamental Library Styles v0.21.0-rc.92\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-time{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-direction:row;justify-content:center;padding:1rem}.fd-time:after,.fd-time:before{box-sizing:inherit;font-size:inherit}.fd-time__col{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;flex-direction:column;margin-right:.5rem}.fd-time__col:after,.fd-time__col:before{box-sizing:inherit;font-size:inherit}.fd-time__col:last-child{margin-right:0}.fd-time__current-indicator{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;padding:0;margin:0;border:0;position:absolute;top:50%;left:0;transform:translateY(-50%);box-sizing:border-box;width:3rem;height:2.875rem;border:.0625rem solid #0854a0;border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);border-radius:.25rem;border-radius:var(--sapButton_BorderCornerRadius, .25rem)}.fd-time__current-indicator:after,.fd-time__current-indicator:before{box-sizing:inherit;font-size:inherit}.fd-time__wrapper{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;position:relative;flex:1 1 auto;width:3rem}.fd-time__wrapper:after,.fd-time__wrapper:before{box-sizing:inherit;font-size:inherit}.fd-time__wrapper--active{max-height:20.125rem;height:20.125rem;justify-content:initial}.fd-time__wrapper--meridian .fd-time__item:first-child{margin-top:8.625rem}.fd-time__wrapper--meridian .fd-time__item:last-child{margin-bottom:8.625rem}.fd-time__wrapper--meridian .fd-time__list{height:20.125rem}.fd-time__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;cursor:default;width:3rem;height:2.875rem;min-height:2.875rem;border-radius:.25rem;border-radius:var(--sapButton_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);border:.0625rem solid #fff;border:.0625rem solid var(--sapList_Background, #fff);text-shadow:none;text-shadow:var(--fdTime_Text_Shadow, none)}.fd-time__item:after,.fd-time__item:before{box-sizing:inherit;font-size:inherit}.fd-time__item:hover{background-color:#f5f5f5;background-color:var(--sapList_Hover_Background, #f5f5f5)}.fd-time__item:active{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);border-color:transparent;color:#fff;color:var(--sapContent_Selected_TextColor, #fff)}.fd-time__item--current{border-color:#0854a0;border-color:var(--sapList_SelectionBorderColor, #0854a0);background-color:#fff;background-color:var(--sapList_Background, #fff)}.fd-time__item--current:hover{background-color:#f5f5f5;background-color:var(--sapList_Hover_Background, #f5f5f5)}.fd-time__item--current:active{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);border-color:transparent;color:#fff;color:var(--sapContent_Selected_TextColor, #fff)}.fd-time__item--collapsed{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);color:#fff;color:var(--sapContent_Selected_TextColor, #fff);border-color:transparent}.fd-time__item--collapsed:hover{background-color:#095caf;background-color:var(--sapContent_Selected_Hover_Background, #095caf)}.fd-time__item--hidden{visibility:hidden}.fd-time__unit{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:inherit;display:block;width:100%;height:100%;z-index:2;line-height:2.875rem}.fd-time__unit:after,.fd-time__unit:before{box-sizing:inherit;font-size:inherit}.fd-time__list{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;-ms-overflow-style:none;scrollbar-width:none;overflow:hidden}.fd-time__list:after,.fd-time__list:before{box-sizing:inherit;font-size:inherit}.fd-time__list::-webkit-scrollbar{display:none}.fd-time__slider-label{line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;border:0;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:.875rem;font-size:var(--sapFontSize, .875rem);color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-right:.5rem;cursor:text;align-self:flex-start;line-height:2rem;height:2rem;font-size:.75rem;font-size:var(--sapFontSmallSize, .75rem);max-width:3rem;overflow:hidden;white-space:nowrap;text-overflow:clip;padding:0;margin:0;align-self:auto}.fd-time__slider-label:after,.fd-time__slider-label:before{box-sizing:inherit;font-size:inherit}.fd-time__slider-label[dir=rtl],[dir=rtl] .fd-time__slider-label{margin-left:.5rem;margin-right:0}.fd-time__slider-label[dir=rtl],[dir=rtl] .fd-time__slider-label{padding:0;margin:0}.fd-time__control{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-time__control:after,.fd-time__control:before{box-sizing:inherit;font-size:inherit}.fd-time--tablet{padding:.5rem}.fd-time--tablet .fd-time__item{height:2.875rem;min-height:2.875rem}.fd-time--compact{padding:.5rem}.fd-time--compact .fd-time__item{height:2rem;min-height:2rem}.fd-time--compact .fd-time__wrapper .fd-time__current-indicator{height:2rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--active{max-height:14rem;height:14rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__item:first-child{margin-top:6rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__item:last-child{margin-bottom:6rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__list{height:14rem}.fd-time--compact .fd-time__unit{line-height:2rem}.fd-time--scrollable .fd-time__list{overflow:auto}.fd-time[dir=rtl] .fd-time__col,[dir=rtl] .fd-time .fd-time__col{margin-right:0;margin-left:.5rem}.fd-time[dir=rtl] .fd-time__col:last-child,[dir=rtl] .fd-time .fd-time__col:last-child{margin-left:0}.fd-time__list{touch-action:pan-x;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}\n"], components: [{ type: TimeColumnComponent, selector: "fd-time-column", inputs: ["rows", "compact", "spinners", "activeValue", "active", "meridian", "id", "timeConfig", "offset"], outputs: ["activeValueChange", "activeStateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "columns", predicate: TimeColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"fd-time\"\n    (keydown)=\"handleKeyDownEvent($event)\"\n    [class.fd-time--compact]=\"compact\"\n    [class.fd-time--tablet]=\"tablet\"\n    [attr.aria-label]=\"_componentAriaLabel\"\n>\n    <fd-time-column\n        [active]=\"isActive('hour')\"\n        [rows]=\"hourViewItems\"\n        [compact]=\"compact\"\n        [offset]=\"offset\"\n        [elementsAtOnce]=\"elementsAtOnce\"\n        [activeValue]=\"activeHourViewItem\"\n        [timeConfig]=\"getHoursConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleHourChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('hour')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"displayMinutes\"\n        [active]=\"isActive('minute')\"\n        [rows]=\"minuteViewItems\"\n        [compact]=\"compact\"\n        [offset]=\"offset\"\n        [elementsAtOnce]=\"elementsAtOnce\"\n        [activeValue]=\"activeMinuteViewItem\"\n        [timeConfig]=\"getMinutesConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleMinuteChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('minute')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"displaySeconds\"\n        [active]=\"isActive('second')\"\n        [rows]=\"secondViewItems\"\n        [compact]=\"compact\"\n        [offset]=\"offset\"\n        [elementsAtOnce]=\"elementsAtOnce\"\n        [activeValue]=\"activeSecondViewItem\"\n        [timeConfig]=\"getSecondsConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleSecondChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('second')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"meridian\"\n        [active]=\"isActive('meridian')\"\n        [rows]=\"meridianViewItems\"\n        [activeValue]=\"activeMeridianViewItem\"\n        [offset]=\"0\"\n        [elementsAtOnce]=\"elementsAtOnce\"\n        [compact]=\"compact\"\n        [timeConfig]=\"getPeriodConfig()\"\n        [meridian]=\"true\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleMeridianChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('meridian')\"\n    ></fd-time-column>\n</div>\n", styles: ["/*!\n.fd-input\n*/.fd-input{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;color:#32363a;color:var(--sapField_TextColor, #32363a);background-color:#fff;background-color:var(--sapField_Background, #fff);border-style:solid;border-width:.0625rem;border-width:var(--sapField_BorderWidth, .0625rem);border-color:#89919a;border-color:var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-left:.75rem;padding-right:.75rem;min-width:2.75rem;width:100%;height:2.25rem;margin-top:.25rem;margin-bottom:.25rem;padding:0 .625rem;z-index:1;cursor:text;overflow:hidden;text-shadow:none;text-shadow:var(--fdInput_Text_Shadow, none)}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor, #74777a)}.fd-input::selection{color:#fff;color:var(--sapContent_ContrastTextColor, #fff);background-color:#0854a0;background-color:var(--sapSelectedColor, #0854a0)}.fd-input.is-hover,.fd-input:hover{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-input.is-success{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e);border-width:.0625rem;border-width:var(--sapField_SuccessBorderWidth, .0625rem);border-style:solid;border-style:var(--sapField_SuccessBorderStyle, solid)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-input.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00);border-width:.125rem;border-width:var(--sapField_InvalidBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InvalidBorderStyle, solid)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-input.is-alert,.fd-input.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c);border-width:.125rem;border-width:var(--sapField_WarningBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_WarningBorderStyle, solid)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover,.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-input.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1);border-width:.125rem;border-width:var(--sapField_InformationBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InformationBorderStyle, solid)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-input.is-focus,.fd-input:focus{z-index:5;box-shadow:none;outline-offset:-.1875rem;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth, .0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor, #000);outline-style:dotted;outline-style:var(--sapContent_FocusStyle, dotted)}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-information,.fd-input.is-warning{border-width:.125rem;border-style:solid;border-style:var(--fdInput_State_Border_Type, solid)}.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{z-index:5;box-shadow:none;outline-offset:-.25rem}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity, .4)}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:transparent}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:transparent}.fd-input::-ms-clear{display: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{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}.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}/*!\n * Fundamental Library Styles v0.21.0-rc.92\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-time{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-direction:row;justify-content:center;padding:1rem}.fd-time:after,.fd-time:before{box-sizing:inherit;font-size:inherit}.fd-time__col{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;flex-direction:column;margin-right:.5rem}.fd-time__col:after,.fd-time__col:before{box-sizing:inherit;font-size:inherit}.fd-time__col:last-child{margin-right:0}.fd-time__current-indicator{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;padding:0;margin:0;border:0;position:absolute;top:50%;left:0;transform:translateY(-50%);box-sizing:border-box;width:3rem;height:2.875rem;border:.0625rem solid #0854a0;border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);border-radius:.25rem;border-radius:var(--sapButton_BorderCornerRadius, .25rem)}.fd-time__current-indicator:after,.fd-time__current-indicator:before{box-sizing:inherit;font-size:inherit}.fd-time__wrapper{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;position:relative;flex:1 1 auto;width:3rem}.fd-time__wrapper:after,.fd-time__wrapper:before{box-sizing:inherit;font-size:inherit}.fd-time__wrapper--active{max-height:20.125rem;height:20.125rem;justify-content:initial}.fd-time__wrapper--meridian .fd-time__item:first-child{margin-top:8.625rem}.fd-time__wrapper--meridian .fd-time__item:last-child{margin-bottom:8.625rem}.fd-time__wrapper--meridian .fd-time__list{height:20.125rem}.fd-time__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;cursor:default;width:3rem;height:2.875rem;min-height:2.875rem;border-radius:.25rem;border-radius:var(--sapButton_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);border:.0625rem solid #fff;border:.0625rem solid var(--sapList_Background, #fff);text-shadow:none;text-shadow:var(--fdTime_Text_Shadow, none)}.fd-time__item:after,.fd-time__item:before{box-sizing:inherit;font-size:inherit}.fd-time__item:hover{background-color:#f5f5f5;background-color:var(--sapList_Hover_Background, #f5f5f5)}.fd-time__item:active{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);border-color:transparent;color:#fff;color:var(--sapContent_Selected_TextColor, #fff)}.fd-time__item--current{border-color:#0854a0;border-color:var(--sapList_SelectionBorderColor, #0854a0);background-color:#fff;background-color:var(--sapList_Background, #fff)}.fd-time__item--current:hover{background-color:#f5f5f5;background-color:var(--sapList_Hover_Background, #f5f5f5)}.fd-time__item--current:active{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);border-color:transparent;color:#fff;color:var(--sapContent_Selected_TextColor, #fff)}.fd-time__item--collapsed{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);color:#fff;color:var(--sapContent_Selected_TextColor, #fff);border-color:transparent}.fd-time__item--collapsed:hover{background-color:#095caf;background-color:var(--sapContent_Selected_Hover_Background, #095caf)}.fd-time__item--hidden{visibility:hidden}.fd-time__unit{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:inherit;display:block;width:100%;height:100%;z-index:2;line-height:2.875rem}.fd-time__unit:after,.fd-time__unit:before{box-sizing:inherit;font-size:inherit}.fd-time__list{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;-ms-overflow-style:none;scrollbar-width:none;overflow:hidden}.fd-time__list:after,.fd-time__list:before{box-sizing:inherit;font-size:inherit}.fd-time__list::-webkit-scrollbar{display:none}.fd-time__slider-label{line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;border:0;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:.875rem;font-size:var(--sapFontSize, .875rem);color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-right:.5rem;cursor:text;align-self:flex-start;line-height:2rem;height:2rem;font-size:.75rem;font-size:var(--sapFontSmallSize, .75rem);max-width:3rem;overflow:hidden;white-space:nowrap;text-overflow:clip;padding:0;margin:0;align-self:auto}.fd-time__slider-label:after,.fd-time__slider-label:before{box-sizing:inherit;font-size:inherit}.fd-time__slider-label[dir=rtl],[dir=rtl] .fd-time__slider-label{margin-left:.5rem;margin-right:0}.fd-time__slider-label[dir=rtl],[dir=rtl] .fd-time__slider-label{padding:0;margin:0}.fd-time__control{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-time__control:after,.fd-time__control:before{box-sizing:inherit;font-size:inherit}.fd-time--tablet{padding:.5rem}.fd-time--tablet .fd-time__item{height:2.875rem;min-height:2.875rem}.fd-time--compact{padding:.5rem}.fd-time--compact .fd-time__item{height:2rem;min-height:2rem}.fd-time--compact .fd-time__wrapper .fd-time__current-indicator{height:2rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--active{max-height:14rem;height:14rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__item:first-child{margin-top:6rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__item:last-child{margin-bottom:6rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__list{height:14rem}.fd-time--compact .fd-time__unit{line-height:2rem}.fd-time--scrollable .fd-time__list{overflow:auto}.fd-time[dir=rtl] .fd-time__col,[dir=rtl] .fd-time .fd-time__col{margin-right:0;margin-left:.5rem}.fd-time[dir=rtl] .fd-time__col:last-child,[dir=rtl] .fd-time .fd-time__col:last-child{margin-left:0}.fd-time__list{touch-action:pan-x;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}\n"], components: [{ type: TimeColumnComponent, selector: "fd-time-column", inputs: ["rows", "compact", "spinners", "activeValue", "active", "meridian", "id", "timeConfig", "offset", "elementsAtOnce"], outputs: ["activeValueChange", "activeStateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-time', host: {
@@ -814,7 +849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                             useExisting: forwardRef(() => TimeComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"fd-time\"\n    (keydown)=\"handleKeyDownEvent($event)\"\n    [class.fd-time--compact]=\"compact\"\n    [class.fd-time--tablet]=\"tablet\"\n    [attr.aria-label]=\"_componentAriaLabel\"\n>\n    <fd-time-column\n        [active]=\"isActive('hour')\"\n        [rows]=\"hourViewItems\"\n        [compact]=\"compact\"\n        [activeValue]=\"activeHourViewItem\"\n        [timeConfig]=\"getHoursConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleHourChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('hour')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"displayMinutes\"\n        [active]=\"isActive('minute')\"\n        [rows]=\"minuteViewItems\"\n        [compact]=\"compact\"\n        [activeValue]=\"activeMinuteViewItem\"\n        [timeConfig]=\"getMinutesConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleMinuteChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('minute')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"displaySeconds\"\n        [active]=\"isActive('second')\"\n        [rows]=\"secondViewItems\"\n        [compact]=\"compact\"\n        [activeValue]=\"activeSecondViewItem\"\n        [timeConfig]=\"getSecondsConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleSecondChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('second')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"meridian\"\n        [active]=\"isActive('meridian')\"\n        [rows]=\"meridianViewItems\"\n        [activeValue]=\"activeMeridianViewItem\"\n        [offset]=\"0\"\n        [compact]=\"compact\"\n        [timeConfig]=\"getPeriodConfig()\"\n        [meridian]=\"true\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleMeridianChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('meridian')\"\n    ></fd-time-column>\n</div>\n", styles: ["/*!\n.fd-input\n*/.fd-input{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;color:#32363a;color:var(--sapField_TextColor, #32363a);background-color:#fff;background-color:var(--sapField_Background, #fff);border-style:solid;border-width:.0625rem;border-width:var(--sapField_BorderWidth, .0625rem);border-color:#89919a;border-color:var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-left:.75rem;padding-right:.75rem;min-width:2.75rem;width:100%;height:2.25rem;margin-top:.25rem;margin-bottom:.25rem;padding:0 .625rem;z-index:1;cursor:text;overflow:hidden;text-shadow:none;text-shadow:var(--fdInput_Text_Shadow, none)}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor, #74777a)}.fd-input::selection{color:#fff;color:var(--sapContent_ContrastTextColor, #fff);background-color:#0854a0;background-color:var(--sapSelectedColor, #0854a0)}.fd-input.is-hover,.fd-input:hover{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-input.is-success{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e);border-width:.0625rem;border-width:var(--sapField_SuccessBorderWidth, .0625rem);border-style:solid;border-style:var(--sapField_SuccessBorderStyle, solid)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-input.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00);border-width:.125rem;border-width:var(--sapField_InvalidBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InvalidBorderStyle, solid)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-input.is-alert,.fd-input.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c);border-width:.125rem;border-width:var(--sapField_WarningBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_WarningBorderStyle, solid)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover,.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-input.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1);border-width:.125rem;border-width:var(--sapField_InformationBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InformationBorderStyle, solid)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-input.is-focus,.fd-input:focus{z-index:5;box-shadow:none;outline-offset:-.1875rem;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth, .0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor, #000);outline-style:dotted;outline-style:var(--sapContent_FocusStyle, dotted)}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-information,.fd-input.is-warning{border-width:.125rem;border-style:solid;border-style:var(--fdInput_State_Border_Type, solid)}.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{z-index:5;box-shadow:none;outline-offset:-.25rem}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity, .4)}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:transparent}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:transparent}.fd-input::-ms-clear{display: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{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}.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}/*!\n * Fundamental Library Styles v0.21.0-rc.92\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-time{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-direction:row;justify-content:center;padding:1rem}.fd-time:after,.fd-time:before{box-sizing:inherit;font-size:inherit}.fd-time__col{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;flex-direction:column;margin-right:.5rem}.fd-time__col:after,.fd-time__col:before{box-sizing:inherit;font-size:inherit}.fd-time__col:last-child{margin-right:0}.fd-time__current-indicator{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;padding:0;margin:0;border:0;position:absolute;top:50%;left:0;transform:translateY(-50%);box-sizing:border-box;width:3rem;height:2.875rem;border:.0625rem solid #0854a0;border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);border-radius:.25rem;border-radius:var(--sapButton_BorderCornerRadius, .25rem)}.fd-time__current-indicator:after,.fd-time__current-indicator:before{box-sizing:inherit;font-size:inherit}.fd-time__wrapper{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;position:relative;flex:1 1 auto;width:3rem}.fd-time__wrapper:after,.fd-time__wrapper:before{box-sizing:inherit;font-size:inherit}.fd-time__wrapper--active{max-height:20.125rem;height:20.125rem;justify-content:initial}.fd-time__wrapper--meridian .fd-time__item:first-child{margin-top:8.625rem}.fd-time__wrapper--meridian .fd-time__item:last-child{margin-bottom:8.625rem}.fd-time__wrapper--meridian .fd-time__list{height:20.125rem}.fd-time__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;cursor:default;width:3rem;height:2.875rem;min-height:2.875rem;border-radius:.25rem;border-radius:var(--sapButton_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);border:.0625rem solid #fff;border:.0625rem solid var(--sapList_Background, #fff);text-shadow:none;text-shadow:var(--fdTime_Text_Shadow, none)}.fd-time__item:after,.fd-time__item:before{box-sizing:inherit;font-size:inherit}.fd-time__item:hover{background-color:#f5f5f5;background-color:var(--sapList_Hover_Background, #f5f5f5)}.fd-time__item:active{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);border-color:transparent;color:#fff;color:var(--sapContent_Selected_TextColor, #fff)}.fd-time__item--current{border-color:#0854a0;border-color:var(--sapList_SelectionBorderColor, #0854a0);background-color:#fff;background-color:var(--sapList_Background, #fff)}.fd-time__item--current:hover{background-color:#f5f5f5;background-color:var(--sapList_Hover_Background, #f5f5f5)}.fd-time__item--current:active{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);border-color:transparent;color:#fff;color:var(--sapContent_Selected_TextColor, #fff)}.fd-time__item--collapsed{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);color:#fff;color:var(--sapContent_Selected_TextColor, #fff);border-color:transparent}.fd-time__item--collapsed:hover{background-color:#095caf;background-color:var(--sapContent_Selected_Hover_Background, #095caf)}.fd-time__item--hidden{visibility:hidden}.fd-time__unit{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:inherit;display:block;width:100%;height:100%;z-index:2;line-height:2.875rem}.fd-time__unit:after,.fd-time__unit:before{box-sizing:inherit;font-size:inherit}.fd-time__list{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;-ms-overflow-style:none;scrollbar-width:none;overflow:hidden}.fd-time__list:after,.fd-time__list:before{box-sizing:inherit;font-size:inherit}.fd-time__list::-webkit-scrollbar{display:none}.fd-time__slider-label{line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;border:0;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:.875rem;font-size:var(--sapFontSize, .875rem);color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-right:.5rem;cursor:text;align-self:flex-start;line-height:2rem;height:2rem;font-size:.75rem;font-size:var(--sapFontSmallSize, .75rem);max-width:3rem;overflow:hidden;white-space:nowrap;text-overflow:clip;padding:0;margin:0;align-self:auto}.fd-time__slider-label:after,.fd-time__slider-label:before{box-sizing:inherit;font-size:inherit}.fd-time__slider-label[dir=rtl],[dir=rtl] .fd-time__slider-label{margin-left:.5rem;margin-right:0}.fd-time__slider-label[dir=rtl],[dir=rtl] .fd-time__slider-label{padding:0;margin:0}.fd-time__control{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-time__control:after,.fd-time__control:before{box-sizing:inherit;font-size:inherit}.fd-time--tablet{padding:.5rem}.fd-time--tablet .fd-time__item{height:2.875rem;min-height:2.875rem}.fd-time--compact{padding:.5rem}.fd-time--compact .fd-time__item{height:2rem;min-height:2rem}.fd-time--compact .fd-time__wrapper .fd-time__current-indicator{height:2rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--active{max-height:14rem;height:14rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__item:first-child{margin-top:6rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__item:last-child{margin-bottom:6rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__list{height:14rem}.fd-time--compact .fd-time__unit{line-height:2rem}.fd-time--scrollable .fd-time__list{overflow:auto}.fd-time[dir=rtl] .fd-time__col,[dir=rtl] .fd-time .fd-time__col{margin-right:0;margin-left:.5rem}.fd-time[dir=rtl] .fd-time__col:last-child,[dir=rtl] .fd-time .fd-time__col:last-child{margin-left:0}.fd-time__list{touch-action:pan-x;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"fd-time\"\n    (keydown)=\"handleKeyDownEvent($event)\"\n    [class.fd-time--compact]=\"compact\"\n    [class.fd-time--tablet]=\"tablet\"\n    [attr.aria-label]=\"_componentAriaLabel\"\n>\n    <fd-time-column\n        [active]=\"isActive('hour')\"\n        [rows]=\"hourViewItems\"\n        [compact]=\"compact\"\n        [offset]=\"offset\"\n        [elementsAtOnce]=\"elementsAtOnce\"\n        [activeValue]=\"activeHourViewItem\"\n        [timeConfig]=\"getHoursConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleHourChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('hour')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"displayMinutes\"\n        [active]=\"isActive('minute')\"\n        [rows]=\"minuteViewItems\"\n        [compact]=\"compact\"\n        [offset]=\"offset\"\n        [elementsAtOnce]=\"elementsAtOnce\"\n        [activeValue]=\"activeMinuteViewItem\"\n        [timeConfig]=\"getMinutesConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleMinuteChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('minute')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"displaySeconds\"\n        [active]=\"isActive('second')\"\n        [rows]=\"secondViewItems\"\n        [compact]=\"compact\"\n        [offset]=\"offset\"\n        [elementsAtOnce]=\"elementsAtOnce\"\n        [activeValue]=\"activeSecondViewItem\"\n        [timeConfig]=\"getSecondsConfig()\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleSecondChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('second')\"\n    ></fd-time-column>\n    <fd-time-column\n        *ngIf=\"meridian\"\n        [active]=\"isActive('meridian')\"\n        [rows]=\"meridianViewItems\"\n        [activeValue]=\"activeMeridianViewItem\"\n        [offset]=\"0\"\n        [elementsAtOnce]=\"elementsAtOnce\"\n        [compact]=\"compact\"\n        [timeConfig]=\"getPeriodConfig()\"\n        [meridian]=\"true\"\n        [spinners]=\"spinnerButtons\"\n        (activeValueChange)=\"handleMeridianChange($event.value.value)\"\n        (activeStateChange)=\"changeActive('meridian')\"\n    ></fd-time-column>\n</div>\n", styles: ["/*!\n.fd-input\n*/.fd-input{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;color:#32363a;color:var(--sapField_TextColor, #32363a);background-color:#fff;background-color:var(--sapField_Background, #fff);border-style:solid;border-width:.0625rem;border-width:var(--sapField_BorderWidth, .0625rem);border-color:#89919a;border-color:var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-left:.75rem;padding-right:.75rem;min-width:2.75rem;width:100%;height:2.25rem;margin-top:.25rem;margin-bottom:.25rem;padding:0 .625rem;z-index:1;cursor:text;overflow:hidden;text-shadow:none;text-shadow:var(--fdInput_Text_Shadow, none)}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor, #74777a)}.fd-input::selection{color:#fff;color:var(--sapContent_ContrastTextColor, #fff);background-color:#0854a0;background-color:var(--sapSelectedColor, #0854a0)}.fd-input.is-hover,.fd-input:hover{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-input.is-success{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e);border-width:.0625rem;border-width:var(--sapField_SuccessBorderWidth, .0625rem);border-style:solid;border-style:var(--sapField_SuccessBorderStyle, solid)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-input.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00);border-width:.125rem;border-width:var(--sapField_InvalidBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InvalidBorderStyle, solid)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-input.is-alert,.fd-input.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c);border-width:.125rem;border-width:var(--sapField_WarningBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_WarningBorderStyle, solid)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover,.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-input.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1);border-width:.125rem;border-width:var(--sapField_InformationBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InformationBorderStyle, solid)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-input.is-focus,.fd-input:focus{z-index:5;box-shadow:none;outline-offset:-.1875rem;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth, .0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor, #000);outline-style:dotted;outline-style:var(--sapContent_FocusStyle, dotted)}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-information,.fd-input.is-warning{border-width:.125rem;border-style:solid;border-style:var(--fdInput_State_Border_Type, solid)}.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{z-index:5;box-shadow:none;outline-offset:-.25rem}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity, .4)}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:transparent}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:transparent}.fd-input::-ms-clear{display: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{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}.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}/*!\n * Fundamental Library Styles v0.21.0-rc.92\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-time{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-direction:row;justify-content:center;padding:1rem}.fd-time:after,.fd-time:before{box-sizing:inherit;font-size:inherit}.fd-time__col{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;flex-direction:column;margin-right:.5rem}.fd-time__col:after,.fd-time__col:before{box-sizing:inherit;font-size:inherit}.fd-time__col:last-child{margin-right:0}.fd-time__current-indicator{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;padding:0;margin:0;border:0;position:absolute;top:50%;left:0;transform:translateY(-50%);box-sizing:border-box;width:3rem;height:2.875rem;border:.0625rem solid #0854a0;border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);border-radius:.25rem;border-radius:var(--sapButton_BorderCornerRadius, .25rem)}.fd-time__current-indicator:after,.fd-time__current-indicator:before{box-sizing:inherit;font-size:inherit}.fd-time__wrapper{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;position:relative;flex:1 1 auto;width:3rem}.fd-time__wrapper:after,.fd-time__wrapper:before{box-sizing:inherit;font-size:inherit}.fd-time__wrapper--active{max-height:20.125rem;height:20.125rem;justify-content:initial}.fd-time__wrapper--meridian .fd-time__item:first-child{margin-top:8.625rem}.fd-time__wrapper--meridian .fd-time__item:last-child{margin-bottom:8.625rem}.fd-time__wrapper--meridian .fd-time__list{height:20.125rem}.fd-time__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;cursor:default;width:3rem;height:2.875rem;min-height:2.875rem;border-radius:.25rem;border-radius:var(--sapButton_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);border:.0625rem solid #fff;border:.0625rem solid var(--sapList_Background, #fff);text-shadow:none;text-shadow:var(--fdTime_Text_Shadow, none)}.fd-time__item:after,.fd-time__item:before{box-sizing:inherit;font-size:inherit}.fd-time__item:hover{background-color:#f5f5f5;background-color:var(--sapList_Hover_Background, #f5f5f5)}.fd-time__item:active{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);border-color:transparent;color:#fff;color:var(--sapContent_Selected_TextColor, #fff)}.fd-time__item--current{border-color:#0854a0;border-color:var(--sapList_SelectionBorderColor, #0854a0);background-color:#fff;background-color:var(--sapList_Background, #fff)}.fd-time__item--current:hover{background-color:#f5f5f5;background-color:var(--sapList_Hover_Background, #f5f5f5)}.fd-time__item--current:active{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);border-color:transparent;color:#fff;color:var(--sapContent_Selected_TextColor, #fff)}.fd-time__item--collapsed{background-color:#0854a0;background-color:var(--sapContent_Selected_Background, #0854a0);color:#fff;color:var(--sapContent_Selected_TextColor, #fff);border-color:transparent}.fd-time__item--collapsed:hover{background-color:#095caf;background-color:var(--sapContent_Selected_Hover_Background, #095caf)}.fd-time__item--hidden{visibility:hidden}.fd-time__unit{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:inherit;display:block;width:100%;height:100%;z-index:2;line-height:2.875rem}.fd-time__unit:after,.fd-time__unit:before{box-sizing:inherit;font-size:inherit}.fd-time__list{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;-ms-overflow-style:none;scrollbar-width:none;overflow:hidden}.fd-time__list:after,.fd-time__list:before{box-sizing:inherit;font-size:inherit}.fd-time__list::-webkit-scrollbar{display:none}.fd-time__slider-label{line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;border:0;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:.875rem;font-size:var(--sapFontSize, .875rem);color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-right:.5rem;cursor:text;align-self:flex-start;line-height:2rem;height:2rem;font-size:.75rem;font-size:var(--sapFontSmallSize, .75rem);max-width:3rem;overflow:hidden;white-space:nowrap;text-overflow:clip;padding:0;margin:0;align-self:auto}.fd-time__slider-label:after,.fd-time__slider-label:before{box-sizing:inherit;font-size:inherit}.fd-time__slider-label[dir=rtl],[dir=rtl] .fd-time__slider-label{margin-left:.5rem;margin-right:0}.fd-time__slider-label[dir=rtl],[dir=rtl] .fd-time__slider-label{padding:0;margin:0}.fd-time__control{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-time__control:after,.fd-time__control:before{box-sizing:inherit;font-size:inherit}.fd-time--tablet{padding:.5rem}.fd-time--tablet .fd-time__item{height:2.875rem;min-height:2.875rem}.fd-time--compact{padding:.5rem}.fd-time--compact .fd-time__item{height:2rem;min-height:2rem}.fd-time--compact .fd-time__wrapper .fd-time__current-indicator{height:2rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--active{max-height:14rem;height:14rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__item:first-child{margin-top:6rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__item:last-child{margin-bottom:6rem}.fd-time--compact .fd-time__wrapper.fd-time__wrapper--meridian .fd-time__list{height:14rem}.fd-time--compact .fd-time__unit{line-height:2rem}.fd-time--scrollable .fd-time__list{overflow:auto}.fd-time[dir=rtl] .fd-time__col,[dir=rtl] .fd-time .fd-time__col{margin-right:0;margin-left:.5rem}.fd-time[dir=rtl] .fd-time__col:last-child,[dir=rtl] .fd-time .fd-time__col:last-child{margin-left:0}.fd-time__list{touch-action:pan-x;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: TimeI18n }, { type: i2$1.DatetimeAdapter, decorators: [{
                         type: Optional
@@ -841,6 +876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }], tablet: [{
                 type: Input
+            }], elementsAtOnce: [{
+                type: Input
             }], time: [{
                 type: Input
             }], spinnerButtons: [{