@hug/ngx-time-picker 21.0.2 → 21.1.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 21.1.0 (2026-03-10)
+
+### 🚀 Features
+
+- **time-picker:** add storybook NgxTimePickerComponent with customizable layouts and modes ([fdfaacd](https://github.com/DSI-HUG/ngx-components/commit/fdfaacd))
+
+### 🌱 Dependencies
+
+- **@hug/ngx-numeric-stepper**: upgraded to `v21.1.0`
+
+### ❤️ Thank You
+
+- rfrt @rfrt
+
 ## 21.0.2 (2026-02-13)
 
 ### 🌱 Dependencies

package/fesm2022/hug-ngx-time-picker.mjs

@@ -1,7 +1,7 @@
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ChangeDetectorRef, Input, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EventEmitter, inject, ChangeDetectorRef, Input, HostBinding, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { NgControl, FormsModule } from '@angular/forms';
@@ -19,6 +19,7 @@ class NgxTimePickerComponent {
     timeChange = new EventEmitter();
     /** Display mode for the time-picker */
     mode = 'fullTime';
+    layout = 'vertical';
     /**
      * Force the hour or minute to be null (only if the other field is disabled)
      *
@@ -180,10 +181,10 @@ class NgxTimePickerComponent {
     }
     onChangeCallback = (_a) => undefined;
     onTouchedCallback = () => undefined;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: NgxTimePickerComponent, isStandalone: true, selector: "ngx-time-picker", inputs: { mode: "mode", forceNullValue: "forceNullValue", appearance: "appearance", autoFocus: "autoFocus", defaultPlaceholderHours: "defaultPlaceholderHours", defaultPlaceholderMinutes: "defaultPlaceholderMinutes", time: "time", step: "step", disabled: "disabled" }, outputs: { timeChange: "timeChange" }, viewQueries: [{ propertyName: "hours", first: true, predicate: ["hours"], descendants: true }, { propertyName: "minutes", first: true, predicate: ["minutes"], descendants: true }], ngImport: i0, template: "<!-- Hours -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"hours\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n    [style.display]=\"mode === 'minutesOnly' ? 'none' : 'block'\">\n    <input\n        aria-label=\"hours\"\n        #hours\n        matInput\n        [attr.hours]=\"hoursValue\"\n        type=\"text\"\n        [ngModel]=\"hoursValue | number: '2.'\"\n        (ngModelChange)=\"hoursChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        (keydown)=\"hoursKeyDown$.next($event)\"\n        [disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderHours\"\n        (click)=\"hours.select()\" />\n    <ngx-numeric-stepper\n        (increment)=\"hoursChange$.next((hoursValue || 0) + 1)\"\n        (decrement)=\"hoursChange$.next((hoursValue || 0) - 1)\"></ngx-numeric-stepper>\n</mat-form-field>\n\n<!-- Separator -->\n<span class=\"time-separator\" [style.display]=\"mode === 'minutesOnly' || mode === 'hoursOnly' ? 'none' : 'block'\">\n    :\n</span>\n\n<!-- Minutes -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"minutes\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n    [style.display]=\"mode === 'hoursOnly' ? 'none' : 'block'\">\n    <input\n        aria-label=\"minutes\"\n        #minutes\n        matInput\n        [attr.minutes]=\"minutesValue\"\n        type=\"text\"\n        [ngModel]=\"minutesValue | number: '2.'\"\n        (ngModelChange)=\"minutesChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        [disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderMinutes\"\n        (click)=\"minutes.select()\" />\n    <ngx-numeric-stepper\n        (increment)=\"minutesChange$.next((minutesValue || 0) + _step)\"\n        (decrement)=\"minutesChange$.next((minutesValue || 0) - _step)\"></ngx-numeric-stepper>\n</mat-form-field>\n", styles: ["ngx-time-picker{display:flex;flex-direction:row;align-items:baseline;justify-content:center}ngx-time-picker:not([inform]) .mat-form-field-appearance-outline .mat-mdc-form-field-wrapper{padding-bottom:0}ngx-time-picker:not([inform]) .mat-form-field-appearance-outline .mat-mdc-form-field-wrapper .mat-mdc-form-field-infix{border-bottom:.7em solid transparent}ngx-time-picker mat-form-field[ngx-numeric-stepper-form-field]{width:52px}ngx-time-picker .time-separator{width:4px;font-size:14.5px;line-height:17px;margin:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: NgxNumericStepperComponent, selector: "ngx-numeric-stepper", inputs: ["layout", "input", "arrowIcons", "showOnInit"], outputs: ["increment", "decrement"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: NgxTimePickerComponent, isStandalone: true, selector: "ngx-time-picker", inputs: { mode: "mode", layout: "layout", forceNullValue: "forceNullValue", appearance: "appearance", autoFocus: "autoFocus", defaultPlaceholderHours: "defaultPlaceholderHours", defaultPlaceholderMinutes: "defaultPlaceholderMinutes", time: "time", step: "step", disabled: "disabled" }, outputs: { timeChange: "timeChange" }, host: { properties: { "attr.layout": "this.layout" } }, viewQueries: [{ propertyName: "hours", first: true, predicate: ["hours"], descendants: true }, { propertyName: "minutes", first: true, predicate: ["minutes"], descendants: true }], ngImport: i0, template: "<!-- Hours -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"hours\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n    [style.display]=\"mode === 'minutesOnly' ? 'none' : 'block'\"\n    [attr.layout]=\"layout\">\n    <input\n        aria-label=\"hours\"\n        #hours\n        matInput\n        [attr.hours]=\"hoursValue\"\n        type=\"text\"\n        [ngModel]=\"hoursValue | number: '2.'\"\n        (ngModelChange)=\"hoursChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        (keydown)=\"hoursKeyDown$.next($event)\"\n        [disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderHours\"\n        (click)=\"hours.select()\" />\n    <ngx-numeric-stepper\n        [layout]=\"layout\"\n        (increment)=\"hoursChange$.next((hoursValue || 0) + 1)\"\n        (decrement)=\"hoursChange$.next((hoursValue || 0) - 1)\"></ngx-numeric-stepper>\n</mat-form-field>\n\n<!-- Separator -->\n<span\n    class=\"time-separator\"\n    [style.display]=\"mode === 'minutesOnly' || mode === 'hoursOnly' ? 'none' : 'block'\"\n    [attr.layout]=\"layout\">\n    :\n</span>\n\n<!-- Minutes -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"minutes\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n    [style.display]=\"mode === 'hoursOnly' ? 'none' : 'block'\"\n    [attr.layout]=\"layout\">\n    <input\n        aria-label=\"minutes\"\n        #minutes\n        matInput\n        [attr.minutes]=\"minutesValue\"\n        type=\"text\"\n        [ngModel]=\"minutesValue | number: '2.'\"\n        (ngModelChange)=\"minutesChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        [disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderMinutes\"\n        (click)=\"minutes.select()\" />\n    <ngx-numeric-stepper\n        [layout]=\"layout\"\n        (increment)=\"minutesChange$.next((minutesValue || 0) + _step)\"\n        (decrement)=\"minutesChange$.next((minutesValue || 0) - _step)\"></ngx-numeric-stepper>\n</mat-form-field>\n", styles: ["ngx-time-picker{display:flex;flex-direction:row;align-items:baseline;justify-content:center}ngx-time-picker:not([inform]) .mat-form-field-appearance-outline .mat-mdc-form-field-wrapper{padding-bottom:0}ngx-time-picker:not([inform]) .mat-form-field-appearance-outline .mat-mdc-form-field-wrapper .mat-mdc-form-field-infix{border-bottom:.7em solid transparent}ngx-time-picker mat-form-field[ngx-numeric-stepper-form-field]{width:52px}ngx-time-picker mat-form-field[layout=horizontal-inlay][ngx-numeric-stepper-form-field]{width:80px}ngx-time-picker .time-separator{width:4px;font-size:14.5px;line-height:17px;margin:0 8px}ngx-time-picker .time-separator[layout=horizontal]{margin:0 18px}ngx-time-picker ngx-numeric-stepper[layout=horizontal] .shadow{background-color:#fafafa}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: NgxNumericStepperComponent, selector: "ngx-numeric-stepper", inputs: ["layout", "input", "arrowIcons", "showOnInit"], outputs: ["increment", "decrement"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxTimePickerComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-time-picker', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         DecimalPipe,
@@ -191,7 +192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         MatFormFieldModule,
                         MatInputModule,
                         NgxNumericStepperComponent
-                    ], template: "<!-- Hours -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"hours\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n    [style.display]=\"mode === 'minutesOnly' ? 'none' : 'block'\">\n    <input\n        aria-label=\"hours\"\n        #hours\n        matInput\n        [attr.hours]=\"hoursValue\"\n        type=\"text\"\n        [ngModel]=\"hoursValue | number: '2.'\"\n        (ngModelChange)=\"hoursChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        (keydown)=\"hoursKeyDown$.next($event)\"\n        [disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderHours\"\n        (click)=\"hours.select()\" />\n    <ngx-numeric-stepper\n        (increment)=\"hoursChange$.next((hoursValue || 0) + 1)\"\n        (decrement)=\"hoursChange$.next((hoursValue || 0) - 1)\"></ngx-numeric-stepper>\n</mat-form-field>\n\n<!-- Separator -->\n<span class=\"time-separator\" [style.display]=\"mode === 'minutesOnly' || mode === 'hoursOnly' ? 'none' : 'block'\">\n    :\n</span>\n\n<!-- Minutes -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"minutes\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n    [style.display]=\"mode === 'hoursOnly' ? 'none' : 'block'\">\n    <input\n        aria-label=\"minutes\"\n        #minutes\n        matInput\n        [attr.minutes]=\"minutesValue\"\n        type=\"text\"\n        [ngModel]=\"minutesValue | number: '2.'\"\n        (ngModelChange)=\"minutesChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        [disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderMinutes\"\n        (click)=\"minutes.select()\" />\n    <ngx-numeric-stepper\n        (increment)=\"minutesChange$.next((minutesValue || 0) + _step)\"\n        (decrement)=\"minutesChange$.next((minutesValue || 0) - _step)\"></ngx-numeric-stepper>\n</mat-form-field>\n", styles: ["ngx-time-picker{display:flex;flex-direction:row;align-items:baseline;justify-content:center}ngx-time-picker:not([inform]) .mat-form-field-appearance-outline .mat-mdc-form-field-wrapper{padding-bottom:0}ngx-time-picker:not([inform]) .mat-form-field-appearance-outline .mat-mdc-form-field-wrapper .mat-mdc-form-field-infix{border-bottom:.7em solid transparent}ngx-time-picker mat-form-field[ngx-numeric-stepper-form-field]{width:52px}ngx-time-picker .time-separator{width:4px;font-size:14.5px;line-height:17px;margin:0 8px}\n"] }]
+                    ], template: "<!-- Hours -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"hours\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n    [style.display]=\"mode === 'minutesOnly' ? 'none' : 'block'\"\n    [attr.layout]=\"layout\">\n    <input\n        aria-label=\"hours\"\n        #hours\n        matInput\n        [attr.hours]=\"hoursValue\"\n        type=\"text\"\n        [ngModel]=\"hoursValue | number: '2.'\"\n        (ngModelChange)=\"hoursChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        (keydown)=\"hoursKeyDown$.next($event)\"\n        [disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderHours\"\n        (click)=\"hours.select()\" />\n    <ngx-numeric-stepper\n        [layout]=\"layout\"\n        (increment)=\"hoursChange$.next((hoursValue || 0) + 1)\"\n        (decrement)=\"hoursChange$.next((hoursValue || 0) - 1)\"></ngx-numeric-stepper>\n</mat-form-field>\n\n<!-- Separator -->\n<span\n    class=\"time-separator\"\n    [style.display]=\"mode === 'minutesOnly' || mode === 'hoursOnly' ? 'none' : 'block'\"\n    [attr.layout]=\"layout\">\n    :\n</span>\n\n<!-- Minutes -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"minutes\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n    [style.display]=\"mode === 'hoursOnly' ? 'none' : 'block'\"\n    [attr.layout]=\"layout\">\n    <input\n        aria-label=\"minutes\"\n        #minutes\n        matInput\n        [attr.minutes]=\"minutesValue\"\n        type=\"text\"\n        [ngModel]=\"minutesValue | number: '2.'\"\n        (ngModelChange)=\"minutesChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        [disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderMinutes\"\n        (click)=\"minutes.select()\" />\n    <ngx-numeric-stepper\n        [layout]=\"layout\"\n        (increment)=\"minutesChange$.next((minutesValue || 0) + _step)\"\n        (decrement)=\"minutesChange$.next((minutesValue || 0) - _step)\"></ngx-numeric-stepper>\n</mat-form-field>\n", styles: ["ngx-time-picker{display:flex;flex-direction:row;align-items:baseline;justify-content:center}ngx-time-picker:not([inform]) .mat-form-field-appearance-outline .mat-mdc-form-field-wrapper{padding-bottom:0}ngx-time-picker:not([inform]) .mat-form-field-appearance-outline .mat-mdc-form-field-wrapper .mat-mdc-form-field-infix{border-bottom:.7em solid transparent}ngx-time-picker mat-form-field[ngx-numeric-stepper-form-field]{width:52px}ngx-time-picker mat-form-field[layout=horizontal-inlay][ngx-numeric-stepper-form-field]{width:80px}ngx-time-picker .time-separator{width:4px;font-size:14.5px;line-height:17px;margin:0 8px}ngx-time-picker .time-separator[layout=horizontal]{margin:0 18px}ngx-time-picker ngx-numeric-stepper[layout=horizontal] .shadow{background-color:#fafafa}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hours: [{
                 type: ViewChild,
                 args: ['hours']
@@ -202,6 +203,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Output
             }], mode: [{
                 type: Input
+            }], layout: [{
+                type: HostBinding,
+                args: ['attr.layout']
+            }, {
+                type: Input
             }], forceNullValue: [{
                 type: Input
             }], appearance: [{

package/fesm2022/hug-ngx-time-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hug-ngx-time-picker.mjs","sources":["../../../projects/time-picker/src/time-picker.component.ts","../../../projects/time-picker/src/time-picker.component.html","../../../projects/time-picker/src/hug-ngx-time-picker.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\nimport { DecimalPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, inject, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';\nimport { MatFormFieldAppearance, MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { NgxNumericStepperComponent } from '@hug/ngx-numeric-stepper';\nimport { set } from 'date-fns';\nimport { debounceTime, distinctUntilChanged, EMPTY, map, mergeWith, Subject, switchMap, tap, timer } from 'rxjs';\n\nexport type NgxTimePickerDisplayMode = 'fullTime' | 'fullTimeWithHoursDisabled' | 'fullTimeWithMinutesDisabled' | 'hoursOnly' | 'minutesOnly';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ngx-time-picker',\n    styleUrls: ['./time-picker.component.scss'],\n    templateUrl: './time-picker.component.html',\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [\n        DecimalPipe,\n        FormsModule,\n        MatFormFieldModule,\n        MatInputModule,\n        NgxNumericStepperComponent\n    ]\n})\nexport class NgxTimePickerComponent implements ControlValueAccessor {\n    @ViewChild('hours') public hours?: ElementRef<HTMLInputElement>;\n    @ViewChild('minutes') public minutes?: ElementRef<HTMLInputElement>;\n\n    @Output() public readonly timeChange = new EventEmitter<Date>();\n\n    /** Display mode for the time-picker */\n    @Input() public mode: NgxTimePickerDisplayMode = 'fullTime';\n\n    /**\n     * Force the hour or minute to be null (only if the other field is disabled)\n     *\n     * For instance, if set to true and the hours are disabled, the minutes input value will be null\n     * This is useful to force the user to provide a value\n     */\n    @Input() public forceNullValue = false;\n\n    @Input() public appearance: MatFormFieldAppearance = 'outline';\n\n    @Input()\n    public set autoFocus(value: BooleanInput) {\n        this._autoFocus = coerceBooleanProperty(value);\n    }\n\n    @Input() public defaultPlaceholderHours = '_ _';\n    @Input() public defaultPlaceholderMinutes = '_ _';\n\n    @Input()\n    public set time(value: Date | undefined) {\n        this.writeValue(value);\n    }\n\n    public get time(): Date | undefined {\n        return this.value;\n    }\n\n    /** Step of the arrows */\n    @Input()\n    public set step(value: NumberInput) {\n        this._step = coerceNumberProperty(value);\n        this.changeDetectorRef.markForCheck();\n    }\n\n    /** To get the step of the minutes arrows */\n    public get step(): NumberInput {\n        return this._step;\n    }\n\n    /** Disabled property setter. Can be string or empty so you can use it like : <time-picker disabled></time-picker> */\n    @Input()\n    public set disabled(value: BooleanInput) {\n        this._disabled = coerceBooleanProperty(value);\n        this.changeDetectorRef.markForCheck();\n    }\n\n    /** To get disabled attribute. */\n    public get disabled(): BooleanInput {\n        return this._disabled;\n    }\n\n    public readonly hoursChange$ = new Subject<Event | number>();\n    public readonly minutesChange$ = new Subject<Event | number>();\n    public readonly hoursKeyDown$ = new Subject<KeyboardEvent>();\n\n    protected changeDetectorRef = inject(ChangeDetectorRef);\n    protected control = inject(NgControl, { optional: true, self: true });\n    protected _step = 1;\n\n    private _disabled = false;\n    private _value?: Date;\n    private _autoFocus = true;\n\n    public constructor() {\n        if (this.control) {\n            this.control.valueAccessor = this;\n        }\n\n        const hoursChange$ = this.hoursChange$.pipe(\n            distinctUntilChanged(),\n            map(hours => {\n                if (typeof hours === 'object') {\n                    const value = (hours.target as HTMLInputElement).value;\n                    return [value !== undefined ? parseInt(value, 10) : undefined, true] as const;\n                }\n                return [!isNaN(hours) ? hours : 0, false] as const;\n            }),\n            tap(([hours, _isEvent]) => {\n                const newValue = this.value ? new Date(this.value.getTime()) : new Date();\n\n                if (hours !== undefined) {\n                    newValue.setHours(hours);\n                }\n\n                if (this.mode === 'fullTime' || this.mode === 'fullTimeWithMinutesDisabled' || this.mode === 'hoursOnly') {\n                    this.value = newValue;\n                }\n\n                this.changeDetectorRef.markForCheck();\n            })\n        );\n\n        const minutesChange$ = this.minutesChange$.pipe(\n            distinctUntilChanged(),\n            map(event => {\n                let minutes: number | undefined;\n                if (typeof event === 'object') {\n                    const value = (event.target as HTMLInputElement).value;\n                    minutes = value !== undefined ? parseInt(value, 10) : undefined;\n                } else {\n                    minutes = event;\n                }\n\n                return minutes && !isNaN(minutes) && minutes || 0;\n            }),\n            tap(minutes => {\n                const newValue = this.value ? new Date(this.value.getTime()) : new Date();\n\n                if (minutes < 0) {\n                    minutes += 60;\n                } else if (minutes >= 60) {\n                    minutes -= 60;\n                }\n                newValue.setMinutes(minutes);\n\n                if (this.mode === 'fullTime' || this.mode === 'fullTimeWithHoursDisabled' || this.mode === 'minutesOnly') {\n                    this.value = newValue;\n                }\n\n                this.changeDetectorRef.markForCheck();\n            })\n        );\n\n        const setFocusToNextInput$ = this.hoursKeyDown$.pipe(\n            debounceTime(200),\n            switchMap(event => {\n                const inputElement = this.hours?.nativeElement;\n                if (!inputElement) {\n                    return EMPTY;\n                }\n\n                if (event.key && !event.ctrlKey && !event.shiftKey && !event.altKey && !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab', 'Enter', 'Control', 'Shift'].includes(event.key)) {\n                    const regex = /^(\\d|[01]\\d|2[0-3])$/;\n                    const [selectionStart, selectionEnd] = [inputElement.selectionStart || 0, inputElement.selectionEnd || 0].sort((a, b) => a - b);\n                    const inputValue = inputElement.value || '';\n                    if (regex.test(inputValue) && this._autoFocus && inputValue.length === 2 && this.minutes?.nativeElement && inputElement === document.activeElement && selectionStart === 2 && selectionEnd === 2) {\n                        this.minutes.nativeElement.focus();\n                        return timer(0).pipe(\n                            tap(() => {\n                                this.minutes?.nativeElement.select();\n                            })\n                        );\n                    }\n                }\n\n                return EMPTY;\n            })\n        );\n\n        hoursChange$.pipe(\n            mergeWith(minutesChange$, setFocusToNextInput$),\n            takeUntilDestroyed()\n        ).subscribe();\n    }\n\n    // ************* ControlValueAccessor Implementation **************\n    /** set accessor including call the onchange callback */\n    public set value(v: Date | undefined) {\n        if (v !== this._value) {\n            this.writeValue(v);\n            this.onChangeCallback(v);\n            this.timeChange.emit(v);\n        }\n    }\n\n    /** get accessor */\n    public get value(): Date | undefined {\n        return this._value;\n    }\n\n    /** From ControlValueAccessor interface */\n    public writeValue(value: Date | undefined): void {\n        if ((value ?? null) !== (this._value ?? null)) {\n            if (value instanceof Date) {\n                this._value = value ? new Date(value.getTime()) : set(new Date(), { hours: 0, minutes: 0, seconds: 0 });\n            } else {\n                this._value = value;\n            }\n\n            this.changeDetectorRef.markForCheck();\n        }\n    }\n\n    /** From ControlValueAccessor interface */\n    public registerOnChange(fn: (_a: unknown) => void): void {\n        this.onChangeCallback = fn;\n    }\n\n    /** From ControlValueAccessor interface */\n    public registerOnTouched(fn: () => void): void {\n        this.onTouchedCallback = fn;\n    }\n\n    public setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n    // ************* End of ControlValueAccessor Implementation **************\n\n    protected get hoursValue(): number | undefined {\n        if (!this.value || (this.forceNullValue && this.mode === 'fullTimeWithMinutesDisabled' && !!this.control?.pristine)) {\n            return undefined;\n        }\n        return this.value.getHours();\n    }\n\n    protected get minutesValue(): number | undefined {\n        if (!this.value || (this.forceNullValue && this.mode === 'fullTimeWithHoursDisabled' && !!this.control?.pristine)) {\n            return undefined;\n        }\n        return this.value.getMinutes();\n    }\n\n    protected onChangeCallback = (_a: unknown): void => undefined;\n    protected onTouchedCallback = (): void => undefined;\n}\n","<!-- Hours -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"hours\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n    [style.display]=\"mode === 'minutesOnly' ? 'none' : 'block'\">\n    <input\n        aria-label=\"hours\"\n        #hours\n        matInput\n        [attr.hours]=\"hoursValue\"\n        type=\"text\"\n        [ngModel]=\"hoursValue | number: '2.'\"\n        (ngModelChange)=\"hoursChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        (keydown)=\"hoursKeyDown$.next($event)\"\n        [disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderHours\"\n        (click)=\"hours.select()\" />\n    <ngx-numeric-stepper\n        (increment)=\"hoursChange$.next((hoursValue || 0) + 1)\"\n        (decrement)=\"hoursChange$.next((hoursValue || 0) - 1)\"></ngx-numeric-stepper>\n</mat-form-field>\n\n<!-- Separator -->\n<span class=\"time-separator\" [style.display]=\"mode === 'minutesOnly' || mode === 'hoursOnly' ? 'none' : 'block'\">\n    :\n</span>\n\n<!-- Minutes -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"minutes\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n    [style.display]=\"mode === 'hoursOnly' ? 'none' : 'block'\">\n    <input\n        aria-label=\"minutes\"\n        #minutes\n        matInput\n        [attr.minutes]=\"minutesValue\"\n        type=\"text\"\n        [ngModel]=\"minutesValue | number: '2.'\"\n        (ngModelChange)=\"minutesChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        [disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderMinutes\"\n        (click)=\"minutes.select()\" />\n    <ngx-numeric-stepper\n        (increment)=\"minutesChange$.next((minutesValue || 0) + _step)\"\n        (decrement)=\"minutesChange$.next((minutesValue || 0) - _step)\"></ngx-numeric-stepper>\n</mat-form-field>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"hug-ngx-time-picker.mjs","sources":["../../../projects/time-picker/src/time-picker.component.ts","../../../projects/time-picker/src/time-picker.component.html","../../../projects/time-picker/src/hug-ngx-time-picker.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\nimport { DecimalPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, inject, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';\nimport { MatFormFieldAppearance, MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { NgxNumericStepperComponent, NgxNumericStepperLayout } from '@hug/ngx-numeric-stepper';\nimport { set } from 'date-fns';\nimport { debounceTime, distinctUntilChanged, EMPTY, map, mergeWith, Subject, switchMap, tap, timer } from 'rxjs';\n\nexport type NgxTimePickerDisplayMode = 'fullTime' | 'fullTimeWithHoursDisabled' | 'fullTimeWithMinutesDisabled' | 'hoursOnly' | 'minutesOnly';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ngx-time-picker',\n    styleUrls: ['./time-picker.component.scss'],\n    templateUrl: './time-picker.component.html',\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [\n        DecimalPipe,\n        FormsModule,\n        MatFormFieldModule,\n        MatInputModule,\n        NgxNumericStepperComponent\n    ]\n})\nexport class NgxTimePickerComponent implements ControlValueAccessor {\n    @ViewChild('hours') public hours?: ElementRef<HTMLInputElement>;\n    @ViewChild('minutes') public minutes?: ElementRef<HTMLInputElement>;\n\n    @Output() public readonly timeChange = new EventEmitter<Date>();\n\n    /** Display mode for the time-picker */\n    @Input() public mode: NgxTimePickerDisplayMode = 'fullTime';\n\n    @HostBinding('attr.layout') @Input()\n    public layout: NgxNumericStepperLayout = 'vertical';\n\n    /**\n     * Force the hour or minute to be null (only if the other field is disabled)\n     *\n     * For instance, if set to true and the hours are disabled, the minutes input value will be null\n     * This is useful to force the user to provide a value\n     */\n    @Input() public forceNullValue = false;\n\n    @Input() public appearance: MatFormFieldAppearance = 'outline';\n\n    @Input()\n    public set autoFocus(value: BooleanInput) {\n        this._autoFocus = coerceBooleanProperty(value);\n    }\n\n    @Input() public defaultPlaceholderHours = '_ _';\n    @Input() public defaultPlaceholderMinutes = '_ _';\n\n    @Input()\n    public set time(value: Date | undefined) {\n        this.writeValue(value);\n    }\n\n    public get time(): Date | undefined {\n        return this.value;\n    }\n\n    /** Step of the arrows */\n    @Input()\n    public set step(value: NumberInput) {\n        this._step = coerceNumberProperty(value);\n        this.changeDetectorRef.markForCheck();\n    }\n\n    /** To get the step of the minutes arrows */\n    public get step(): NumberInput {\n        return this._step;\n    }\n\n    /** Disabled property setter. Can be string or empty so you can use it like : <time-picker disabled></time-picker> */\n    @Input()\n    public set disabled(value: BooleanInput) {\n        this._disabled = coerceBooleanProperty(value);\n        this.changeDetectorRef.markForCheck();\n    }\n\n    /** To get disabled attribute. */\n    public get disabled(): BooleanInput {\n        return this._disabled;\n    }\n\n    public readonly hoursChange$ = new Subject<Event | number>();\n    public readonly minutesChange$ = new Subject<Event | number>();\n    public readonly hoursKeyDown$ = new Subject<KeyboardEvent>();\n\n    protected changeDetectorRef = inject(ChangeDetectorRef);\n    protected control = inject(NgControl, { optional: true, self: true });\n    protected _step = 1;\n\n    private _disabled = false;\n    private _value?: Date;\n    private _autoFocus = true;\n\n    public constructor() {\n        if (this.control) {\n            this.control.valueAccessor = this;\n        }\n\n        const hoursChange$ = this.hoursChange$.pipe(\n            distinctUntilChanged(),\n            map(hours => {\n                if (typeof hours === 'object') {\n                    const value = (hours.target as HTMLInputElement).value;\n                    return [value !== undefined ? parseInt(value, 10) : undefined, true] as const;\n                }\n                return [!isNaN(hours) ? hours : 0, false] as const;\n            }),\n            tap(([hours, _isEvent]) => {\n                const newValue = this.value ? new Date(this.value.getTime()) : new Date();\n\n                if (hours !== undefined) {\n                    newValue.setHours(hours);\n                }\n\n                if (this.mode === 'fullTime' || this.mode === 'fullTimeWithMinutesDisabled' || this.mode === 'hoursOnly') {\n                    this.value = newValue;\n                }\n\n                this.changeDetectorRef.markForCheck();\n            })\n        );\n\n        const minutesChange$ = this.minutesChange$.pipe(\n            distinctUntilChanged(),\n            map(event => {\n                let minutes: number | undefined;\n                if (typeof event === 'object') {\n                    const value = (event.target as HTMLInputElement).value;\n                    minutes = value !== undefined ? parseInt(value, 10) : undefined;\n                } else {\n                    minutes = event;\n                }\n\n                return minutes && !isNaN(minutes) && minutes || 0;\n            }),\n            tap(minutes => {\n                const newValue = this.value ? new Date(this.value.getTime()) : new Date();\n\n                if (minutes < 0) {\n                    minutes += 60;\n                } else if (minutes >= 60) {\n                    minutes -= 60;\n                }\n                newValue.setMinutes(minutes);\n\n                if (this.mode === 'fullTime' || this.mode === 'fullTimeWithHoursDisabled' || this.mode === 'minutesOnly') {\n                    this.value = newValue;\n                }\n\n                this.changeDetectorRef.markForCheck();\n            })\n        );\n\n        const setFocusToNextInput$ = this.hoursKeyDown$.pipe(\n            debounceTime(200),\n            switchMap(event => {\n                const inputElement = this.hours?.nativeElement;\n                if (!inputElement) {\n                    return EMPTY;\n                }\n\n                if (event.key && !event.ctrlKey && !event.shiftKey && !event.altKey && !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab', 'Enter', 'Control', 'Shift'].includes(event.key)) {\n                    const regex = /^(\\d|[01]\\d|2[0-3])$/;\n                    const [selectionStart, selectionEnd] = [inputElement.selectionStart || 0, inputElement.selectionEnd || 0].sort((a, b) => a - b);\n                    const inputValue = inputElement.value || '';\n                    if (regex.test(inputValue) && this._autoFocus && inputValue.length === 2 && this.minutes?.nativeElement && inputElement === document.activeElement && selectionStart === 2 && selectionEnd === 2) {\n                        this.minutes.nativeElement.focus();\n                        return timer(0).pipe(\n                            tap(() => {\n                                this.minutes?.nativeElement.select();\n                            })\n                        );\n                    }\n                }\n\n                return EMPTY;\n            })\n        );\n\n        hoursChange$.pipe(\n            mergeWith(minutesChange$, setFocusToNextInput$),\n            takeUntilDestroyed()\n        ).subscribe();\n    }\n\n    // ************* ControlValueAccessor Implementation **************\n    /** set accessor including call the onchange callback */\n    public set value(v: Date | undefined) {\n        if (v !== this._value) {\n            this.writeValue(v);\n            this.onChangeCallback(v);\n            this.timeChange.emit(v);\n        }\n    }\n\n    /** get accessor */\n    public get value(): Date | undefined {\n        return this._value;\n    }\n\n    /** From ControlValueAccessor interface */\n    public writeValue(value: Date | undefined): void {\n        if ((value ?? null) !== (this._value ?? null)) {\n            if (value instanceof Date) {\n                this._value = value ? new Date(value.getTime()) : set(new Date(), { hours: 0, minutes: 0, seconds: 0 });\n            } else {\n                this._value = value;\n            }\n\n            this.changeDetectorRef.markForCheck();\n        }\n    }\n\n    /** From ControlValueAccessor interface */\n    public registerOnChange(fn: (_a: unknown) => void): void {\n        this.onChangeCallback = fn;\n    }\n\n    /** From ControlValueAccessor interface */\n    public registerOnTouched(fn: () => void): void {\n        this.onTouchedCallback = fn;\n    }\n\n    public setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n    // ************* End of ControlValueAccessor Implementation **************\n\n    protected get hoursValue(): number | undefined {\n        if (!this.value || (this.forceNullValue && this.mode === 'fullTimeWithMinutesDisabled' && !!this.control?.pristine)) {\n            return undefined;\n        }\n        return this.value.getHours();\n    }\n\n    protected get minutesValue(): number | undefined {\n        if (!this.value || (this.forceNullValue && this.mode === 'fullTimeWithHoursDisabled' && !!this.control?.pristine)) {\n            return undefined;\n        }\n        return this.value.getMinutes();\n    }\n\n    protected onChangeCallback = (_a: unknown): void => undefined;\n    protected onTouchedCallback = (): void => undefined;\n}\n","<!-- Hours -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"hours\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n    [style.display]=\"mode === 'minutesOnly' ? 'none' : 'block'\"\n    [attr.layout]=\"layout\">\n    <input\n        aria-label=\"hours\"\n        #hours\n        matInput\n        [attr.hours]=\"hoursValue\"\n        type=\"text\"\n        [ngModel]=\"hoursValue | number: '2.'\"\n        (ngModelChange)=\"hoursChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        (keydown)=\"hoursKeyDown$.next($event)\"\n        [disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderHours\"\n        (click)=\"hours.select()\" />\n    <ngx-numeric-stepper\n        [layout]=\"layout\"\n        (increment)=\"hoursChange$.next((hoursValue || 0) + 1)\"\n        (decrement)=\"hoursChange$.next((hoursValue || 0) - 1)\"></ngx-numeric-stepper>\n</mat-form-field>\n\n<!-- Separator -->\n<span\n    class=\"time-separator\"\n    [style.display]=\"mode === 'minutesOnly' || mode === 'hoursOnly' ? 'none' : 'block'\"\n    [attr.layout]=\"layout\">\n    :\n</span>\n\n<!-- Minutes -->\n<mat-form-field\n    [appearance]=\"appearance\"\n    class=\"minutes\"\n    [class.disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n    [style.display]=\"mode === 'hoursOnly' ? 'none' : 'block'\"\n    [attr.layout]=\"layout\">\n    <input\n        aria-label=\"minutes\"\n        #minutes\n        matInput\n        [attr.minutes]=\"minutesValue\"\n        type=\"text\"\n        [ngModel]=\"minutesValue | number: '2.'\"\n        (ngModelChange)=\"minutesChange$.next($event)\"\n        [ngModelOptions]=\"{ updateOn: 'blur' }\"\n        [disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\"\n        [maxLength]=\"2\"\n        autocomplete=\"off\"\n        [placeholder]=\"defaultPlaceholderMinutes\"\n        (click)=\"minutes.select()\" />\n    <ngx-numeric-stepper\n        [layout]=\"layout\"\n        (increment)=\"minutesChange$.next((minutesValue || 0) + _step)\"\n        (decrement)=\"minutesChange$.next((minutesValue || 0) - _step)\"></ngx-numeric-stepper>\n</mat-form-field>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hug/ngx-time-picker",
-    "version": "21.0.2",
+    "version": "21.1.0",
     "description": "HUG Angular - time picker component",
     "homepage": "https://github.com/dsi-hug/ngx-components",
     "license": "GPL-3.0-only",
@@ -26,7 +26,7 @@
         "@angular/core": ">=21 <22",
         "@angular/forms": ">=21 <22",
         "@angular/material": ">=21 <22",
-        "@hug/ngx-numeric-stepper": "^21.0.2",
+        "@hug/ngx-numeric-stepper": "^21.1.0",
         "date-fns": "^2.30.0",
         "rxjs": "^7.8.2",
         "zone.js": "^0.16.0"

package/types/hug-ngx-time-picker.d.ts

@@ -3,6 +3,7 @@ import * as i0 from '@angular/core';
 import { ElementRef, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { NgxNumericStepperLayout } from '@hug/ngx-numeric-stepper';
 import { Subject } from 'rxjs';
 
 type NgxTimePickerDisplayMode = 'fullTime' | 'fullTimeWithHoursDisabled' | 'fullTimeWithMinutesDisabled' | 'hoursOnly' | 'minutesOnly';
@@ -12,6 +13,7 @@ declare class NgxTimePickerComponent implements ControlValueAccessor {
     readonly timeChange: EventEmitter<Date>;
     /** Display mode for the time-picker */
     mode: NgxTimePickerDisplayMode;
+    layout: NgxNumericStepperLayout;
     /**
      * Force the hour or minute to be null (only if the other field is disabled)
      *
@@ -59,7 +61,7 @@ declare class NgxTimePickerComponent implements ControlValueAccessor {
     protected onChangeCallback: (_a: unknown) => void;
     protected onTouchedCallback: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxTimePickerComponent, "ngx-time-picker", never, { "mode": { "alias": "mode"; "required": false; }; "forceNullValue": { "alias": "forceNullValue"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "defaultPlaceholderHours": { "alias": "defaultPlaceholderHours"; "required": false; }; "defaultPlaceholderMinutes": { "alias": "defaultPlaceholderMinutes"; "required": false; }; "time": { "alias": "time"; "required": false; }; "step": { "alias": "step"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "timeChange": "timeChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxTimePickerComponent, "ngx-time-picker", never, { "mode": { "alias": "mode"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "forceNullValue": { "alias": "forceNullValue"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "defaultPlaceholderHours": { "alias": "defaultPlaceholderHours"; "required": false; }; "defaultPlaceholderMinutes": { "alias": "defaultPlaceholderMinutes"; "required": false; }; "time": { "alias": "time"; "required": false; }; "step": { "alias": "step"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "timeChange": "timeChange"; }, never, never, true, never>;
 }
 
 export { NgxTimePickerComponent };