ngx-kit 6.0.0 → 6.0.2

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

@@ -18,6 +18,19 @@ const NGX_TIME_PICKER_CONFIG = new InjectionToken('ngx-time-picker-config', {
     factory: () => DEFAULT_TIME_PICKER_CONFIG,
 });
 
+function normalizeTime(value) {
+    const match = value.match(/^(\d{1,2}):(\d{2})$/);
+    if (!match) {
+        return null;
+    }
+    const hour = Number(match[1]);
+    const minute = Number(match[2]);
+    if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
+        return null;
+    }
+    return [hour.toString().padStart(2, '0'), minute.toString().padStart(2, '0')].join(':');
+}
+
 class NgxInputTimePickerComponent {
     browserService = inject(BrowserService);
     change = output();
@@ -37,8 +50,6 @@ class NgxInputTimePickerComponent {
      */
     format = input(this.config.format, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
-    amOrPm = model(this.config.format == '12' ? 'AM' : undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "amOrPm" }] : /* istanbul ignore next */ []));
     /**
      * Minute step.
      */
@@ -77,6 +88,11 @@ class NgxInputTimePickerComponent {
         return hour;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayHour" }] : /* istanbul ignore next */ []));
+    isPm = computed(() => {
+        const hour = Number(this.value().split(':')[0]);
+        return hour >= 12;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPm" }] : /* istanbul ignore next */ []));
     displayMinute = computed(() => {
         return this.parsedTime().minute;
     }, /* @ts-ignore */
@@ -132,45 +148,58 @@ class NgxInputTimePickerComponent {
         return 86;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "handLength" }] : /* istanbul ignore next */ []));
-    handEnd = computed(() => {
+    hourRadius = computed(() => {
+        if (this.mode() !== 'hour') {
+            return 94;
+        }
+        if (this.format() !== '24') {
+            return 94;
+        }
+        const hour = this.parsedTime().hour;
+        // 00, 13..23 → inner ring
+        if (hour === 0 || hour >= 13) {
+            return 58;
+        }
+        // 01..12 → outer ring
+        return 94;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourRadius" }] : /* istanbul ignore next */ []));
+    selectedPosition = computed(() => {
         const angle = this.currentAngle();
         const radians = ((angle - 90) * Math.PI) / 180;
-        const radius = this.handLength();
+        const radius = this.mode() === 'hour' ? this.hourRadius() : 94;
         return {
             x: 120 + Math.cos(radians) * radius,
             y: 120 + Math.sin(radians) * radius,
         };
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "handEnd" }] : /* istanbul ignore next */ []));
-    selectedPosition = computed(() => {
+    ...(ngDevMode ? [{ debugName: "selectedPosition" }] : /* istanbul ignore next */ []));
+    handEnd = computed(() => {
         const angle = this.currentAngle();
         const radians = ((angle - 90) * Math.PI) / 180;
-        const radius = this.mode() === 'hour' ? 82 : 82;
+        const radius = this.mode() === 'hour' ? this.hourRadius() : 94;
         return {
             x: 120 + Math.cos(radians) * radius,
             y: 120 + Math.sin(radians) * radius,
         };
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedPosition" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "handEnd" }] : /* istanbul ignore next */ []));
     _onChange = (value) => { };
     _onTouched = () => { };
     _validatorOnChange = () => { };
     constructor() { }
     ngOnInit() { }
     writeValue(value) {
-        if (!value)
-            value = '12:00';
-        const s = value.split(':');
-        if (this.format() == '12') {
-            if (+s[0] > 12) {
-                s[0] = (+s[0] - 12).toString().padStart(2, '0');
-                this.amOrPm.set('PM');
-            }
-            else {
-                this.amOrPm.set('AM');
-            }
+        if (!value) {
+            this.value.set('12:00');
+            return;
         }
-        this.value.set(s.join(':') + ' ' + this.amOrPm());
+        const normalized = normalizeTime(value);
+        if (normalized === null) {
+            // invalid value
+            return;
+        }
+        this.value.set(normalized);
     }
     validate(control) {
         return null;
@@ -247,54 +276,71 @@ class NgxInputTimePickerComponent {
             return;
         }
         const rect = svg.getBoundingClientRect();
-        /*
-         * SVG viewBox = 0 0 240 240
-         *
-         * Convert browser coordinates
-         * to SVG coordinates.
-         */
         const x = ((event.clientX - rect.left) / rect.width) * 240;
         const y = ((event.clientY - rect.top) / rect.height) * 240;
+        if (this.mode() === 'hour') {
+            this.updateHourFromPointer(x, y);
+            return;
+        }
+        this.updateMinuteFromPointer(x, y);
+    }
+    updateHourFromPointer(x, y) {
         const dx = x - 120;
         const dy = y - 120;
+        const distance = Math.sqrt(dx * dx + dy * dy);
         let angle = (Math.atan2(dy, dx) * 180) / Math.PI + 90;
         if (angle < 0) {
             angle += 360;
         }
-        if (this.mode() === 'hour') {
-            this.updateHourFromAngle(angle);
-        }
-        else {
-            this.updateMinuteFromAngle(angle);
+        let hour = Math.round(angle / 30) % 12;
+        if (this.format() === '12') {
+            hour = hour === 0 ? 12 : hour;
+            this.setTime(hour, this.parsedTime().minute);
+            return;
         }
-    }
-    updateHourFromAngle(angle) {
-        let hour = Math.round(angle / 30);
-        if (hour === 0 || hour === 12) {
-            hour = 12;
+        /*
+         * 24 hour mode
+         *
+         * Outer ring:
+         * 1 ... 12
+         *
+         * Inner ring:
+         * 13 ... 23, 00
+         */
+        const INNER_RING_THRESHOLD = 76;
+        const isInnerRing = distance < INNER_RING_THRESHOLD;
+        if (isInnerRing) {
+            /*
+             * Inner ring:
+             *
+             * 12 position -> 00
+             * 1 position  -> 13
+             * 2 position  -> 14
+             * ...
+             * 11 position -> 23
+             */
+            hour = hour === 0 ? 0 : hour + 12;
         }
-        if (this.format() === '24') {
+        else {
             /*
-             * Determine whether pointer is closer
-             * to inner or outer 12-hour ring.
+             * Outer ring:
              *
-             * For a full 24-hour implementation we use
-             * the current half-day when possible.
+             * 12 position -> 12
+             * 1 ... 11    -> 1 ... 11
              */
-            const currentHour = this.parsedTime().hour;
-            const currentIsPm = currentHour >= 12;
-            if (hour !== 12) {
-                hour = currentIsPm ? hour + 12 : hour;
-            }
-            else {
-                hour = currentIsPm ? 12 : 0;
-            }
+            hour = hour === 0 ? 12 : hour;
         }
         this.setTime(hour, this.parsedTime().minute);
     }
-    updateMinuteFromAngle(angle) {
+    updateMinuteFromPointer(x, y) {
+        const dx = x - 120;
+        const dy = y - 120;
+        let angle = (Math.atan2(dy, dx) * 180) / Math.PI + 90;
+        if (angle < 0) {
+            angle += 360;
+        }
         let minute = Math.round(angle / 6);
-        minute = minute % 60;
+        minute %= 60;
         const step = Math.max(1, this.minuteStep());
         minute = Math.round(minute / step) * step;
         if (minute >= 60) {
@@ -307,13 +353,6 @@ class NgxInputTimePickerComponent {
         const m = String(minute).padStart(2, '0');
         this.value.set(`${h}:${m}`);
     }
-    isSelectedHour(hour) {
-        const current = this.displayHour();
-        return current === hour;
-    }
-    isSelectedMinute(minute) {
-        return this.displayMinute() === minute;
-    }
     formatHour(hour) {
         if (this.format() === '24') {
             return String(hour).padStart(2, '0');
@@ -349,10 +388,25 @@ class NgxInputTimePickerComponent {
             y: 120 + Math.sin(radians) * 94,
         };
     }
-    ok() {
-        if (this.format() == '12') {
-            this.value.update((u) => u + ` ${this.amOrPm()}`);
+    togglePmAm(val) {
+        const [hour, minute] = this.value().split(':').map(Number);
+        let newHour = hour;
+        if (val === 'AM') {
+            // 12:xx PM → 00:xx
+            if (hour >= 12) {
+                newHour = hour - 12;
+            }
         }
+        else {
+            // 00:xx AM → 12:xx PM
+            if (hour < 12) {
+                newHour = hour + 12;
+            }
+        }
+        const value = `${String(newHour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+        this.value.set(value);
+    }
+    ok() {
         this.change.emit(this.value());
         this._onChange(this.value());
     }
@@ -360,7 +414,7 @@ class NgxInputTimePickerComponent {
         this.cancel.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputTimePickerComponent, isStandalone: true, selector: "ngx-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, amOrPm: { classPropertyName: "amOrPm", publicName: "amOrPm", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoSwitchToMinute: { classPropertyName: "autoSwitchToMinute", publicName: "autoSwitchToMinute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", cancel: "cancel", value: "valueChange", amOrPm: "amOrPmChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputTimePickerComponent, isStandalone: true, selector: "ngx-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoSwitchToMinute: { classPropertyName: "autoSwitchToMinute", publicName: "autoSwitchToMinute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", cancel: "cancel", value: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxInputTimePickerComponent),
@@ -371,7 +425,7 @@ class NgxInputTimePickerComponent {
                 useExisting: forwardRef(() => NgxInputTimePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "clock", first: true, predicate: ["clock"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngx-time-picker\" [class.ngx-time-picker--disabled]=\"disabled()\">\n  <!-- Header -->\n  <div class=\"ngx-time-picker__header\">\n    <button\n      type=\"button\"\n      class=\"ngx-time-picker__value\"\n      [class.active]=\"mode() === 'hour'\"\n      [disabled]=\"disabled()\"\n      (click)=\"setMode('hour')\">\n      {{ formatHour(displayHour()) }}\n    </button>\n\n    <span class=\"ngx-time-picker__separator\">:</span>\n\n    <button\n      type=\"button\"\n      class=\"ngx-time-picker__value\"\n      [class.active]=\"mode() === 'minute'\"\n      [disabled]=\"disabled()\"\n      (click)=\"setMode('minute')\">\n      {{ formatMinute(displayMinute()) }}\n    </button>\n\n    @if (format() == '12') {\n      <div class=\"ngx-time-picker_format\">\n        <button [class.active]=\"amOrPm() == 'AM'\" (click)=\"amOrPm.set('AM')\">\n          {{ config.amText }}\n        </button>\n        <button [class.active]=\"amOrPm() == 'PM'\" (click)=\"amOrPm.set('PM')\">\n          {{ config.pmText }}\n        </button>\n      </div>\n    }\n  </div>\n\n  <!-- Clock -->\n  <div class=\"ngx-time-picker__clock-wrapper\">\n    <svg\n      #clock\n      class=\"ngx-time-picker__clock\"\n      viewBox=\"0 0 240 240\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      (pointerdown)=\"startPointer($event)\"\n      (pointermove)=\"movePointer($event)\"\n      (pointerup)=\"endPointer($event)\"\n      (pointercancel)=\"endPointer($event)\">\n      <!-- Background -->\n      <circle class=\"clock-background\" cx=\"120\" cy=\"120\" r=\"112\" />\n\n      <!-- Selected hand line -->\n      <line class=\"clock-hand\" x1=\"120\" y1=\"120\" [attr.x2]=\"handEnd().x\" [attr.y2]=\"handEnd().y\" />\n\n      <!-- Selected circle -->\n      <circle\n        class=\"clock-selected\"\n        [attr.cx]=\"selectedPosition().x\"\n        [attr.cy]=\"selectedPosition().y\"\n        r=\"18\" />\n\n      <!-- Center -->\n      <circle class=\"clock-center\" cx=\"120\" cy=\"120\" r=\"5\" />\n\n      <!-- HOURS -->\n      @if (mode() === 'hour') {\n        @for (hour of hourNumbers(); track hour) {\n          @if (format() === '24' && hour >= 13) {\n            <g\n              class=\"clock-number clock-number--inner\"\n              [class.selected]=\"isSelectedHour(hour)\"\n              (click)=\"selectHour(hour)\">\n              <circle\n                [attr.cx]=\"hourPosition(hour - 12, true).x\"\n                [attr.cy]=\"hourPosition(hour - 12, true).y\"\n                r=\"16\" />\n\n              <text\n                [attr.x]=\"hourPosition(hour - 12, true).x\"\n                [attr.y]=\"hourPosition(hour - 12, true).y\">\n                {{ formatHour(hour) }}\n              </text>\n            </g>\n          } @else {\n            <g\n              class=\"clock-number\"\n              [class.selected]=\"isSelectedHour(hour)\"\n              (click)=\"selectHour(hour)\">\n              <circle [attr.cx]=\"hourPosition(hour).x\" [attr.cy]=\"hourPosition(hour).y\" r=\"18\" />\n\n              <text [attr.x]=\"hourPosition(hour).x\" [attr.y]=\"hourPosition(hour).y\">\n                {{ formatHour(hour) }}\n              </text>\n            </g>\n          }\n        }\n      }\n\n      <!-- MINUTES -->\n      @if (mode() === 'minute') {\n        @for (minute of minuteNumbers(); track minute) {\n          <g\n            class=\"clock-number\"\n            [class.selected]=\"isSelectedMinute(minute)\"\n            (click)=\"selectMinute(minute)\">\n            <circle\n              [attr.cx]=\"minutePosition(minute).x\"\n              [attr.cy]=\"minutePosition(minute).y\"\n              r=\"18\" />\n\n            <text [attr.x]=\"minutePosition(minute).x\" [attr.y]=\"minutePosition(minute).y\">\n              {{ formatMinute(minute) }}\n            </text>\n          </g>\n        }\n      }\n    </svg>\n  </div>\n  <div class=\"ngx-time-picker--footer\">\n    <button (click)=\"close()\">\n      {{ config.cancelButtonText }}\n    </button>\n\n    <button (click)=\"ok()\">\n      {{ config.confirmButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [":host{--ngx-time-picker-clock-bg: light-dark(#f8f8f8, #181818);--ngx-time-picker-header-bg: #6200ee;--ngx-time-picker-header-fg: #fff;--ngx-clock-bg: light-dark(#e8e8e8, #35363c);display:inline-block}.ngx-time-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;user-select:none;-webkit-user-select:none;border:1px rgba(191,191,191,.4) solid;box-shadow:0 0 20px #9090904f}.ngx-time-picker__header{display:flex;align-items:center;justify-content:center;height:82px;background:var(--ngx-time-picker-header-bg, );color:var(--ngx-time-picker-header-fg)}.ngx-time-picker__value{border:0;padding:0;background:transparent;color:#ffffff8c;font-size:48px;line-height:1;font-weight:400;cursor:pointer;transition:color .16s ease,opacity .16s ease;font-variant-numeric:tabular-nums}.ngx-time-picker__value:hover{color:#fffc}.ngx-time-picker__value.active{color:#fff}.ngx-time-picker__value:disabled{cursor:default}.ngx-time-picker__separator{margin-inline:4px;font-size:44px;line-height:1;color:#fff}.ngx-time-picker__clock-wrapper{display:flex;align-items:center;justify-content:center;padding:20px;background:var(--ngx-time-picker-clock-bg)}.ngx-time-picker__clock{width:250px;height:250px;touch-action:none;overflow:visible;cursor:pointer}.clock-background{fill:var(--ngx-clock-bg)}.clock-hand{stroke:#1976d2;stroke-width:2;stroke-linecap:round;pointer-events:none}.clock-center,.clock-selected{fill:#1976d2;pointer-events:none}.clock-number{cursor:pointer}.clock-number circle{fill:transparent;transition:fill .12s ease,transform .12s ease}.clock-number text{fill:currentColor;font-size:14px;font-family:Roboto,Arial,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .12s ease}.clock-number:hover circle{fill:#1976d21f}.clock-number.selected circle{fill:#1976d2}.clock-number.selected text{fill:#fff;font-weight:500}.clock-number--inner text{font-size:12px}.ngx-time-picker--disabled{opacity:.5;pointer-events:none}.ngx-time-picker--footer{display:flex;justify-content:flex-end;gap:5px;padding:5px 10px 20px;background:var(--ngx-time-picker-clock-bg)}.ngx-time-picker--footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s}.ngx-time-picker--footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.ngx-time-picker_format{display:flex;flex-direction:column;margin:0 15px;gap:5px}.ngx-time-picker_format button{all:unset;opacity:.4;cursor:pointer}.ngx-time-picker_format button.active{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+        ], viewQueries: [{ propertyName: "clock", first: true, predicate: ["clock"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngx-time-picker\" [class.ngx-time-picker--disabled]=\"disabled()\">\n  <!-- Header -->\n  <div class=\"ngx-time-picker__header\">\n    <button\n      type=\"button\"\n      class=\"ngx-time-picker__value\"\n      [class.active]=\"mode() === 'hour'\"\n      [disabled]=\"disabled()\"\n      (click)=\"setMode('hour')\">\n      {{ formatHour(displayHour()) }}\n    </button>\n\n    <span class=\"ngx-time-picker__separator\">:</span>\n\n    <button\n      type=\"button\"\n      class=\"ngx-time-picker__value\"\n      [class.active]=\"mode() === 'minute'\"\n      [disabled]=\"disabled()\"\n      (click)=\"setMode('minute')\">\n      {{ formatMinute(displayMinute()) }}\n    </button>\n\n    @if (format() == '12') {\n      <div class=\"ngx-time-picker_format\">\n        <button [class.active]=\"!isPm()\" (click)=\"togglePmAm('AM')\">\n          {{ config.amText }}\n        </button>\n        <button [class.active]=\"isPm()\" (click)=\"togglePmAm('PM')\">\n          {{ config.pmText }}\n        </button>\n      </div>\n    }\n  </div>\n\n  <!-- Clock -->\n  <div class=\"ngx-time-picker__clock-wrapper\">\n    <svg\n      #clock\n      class=\"ngx-time-picker__clock\"\n      viewBox=\"0 0 240 240\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      (pointerdown)=\"startPointer($event)\"\n      (pointermove)=\"movePointer($event)\"\n      (pointerup)=\"endPointer($event)\"\n      (pointercancel)=\"endPointer($event)\">\n      <!-- Background -->\n      <circle class=\"clock-background\" cx=\"120\" cy=\"120\" r=\"112\" />\n\n      <!-- Selected hand line -->\n      <line class=\"clock-hand\" x1=\"120\" y1=\"120\" [attr.x2]=\"handEnd().x\" [attr.y2]=\"handEnd().y\" />\n\n      <!-- Selected circle -->\n      <circle\n        class=\"clock-selected\"\n        [attr.cx]=\"selectedPosition().x\"\n        [attr.cy]=\"selectedPosition().y\"\n        r=\"18\" />\n\n      <!-- Center -->\n      <circle class=\"clock-center\" cx=\"120\" cy=\"120\" r=\"5\" />\n\n      <!-- HOURS -->\n      @if (mode() === 'hour') {\n        @for (hour of hourNumbers(); track hour) {\n          @if (format() === '24' && (hour >= 13 || hour == 0)) {\n            <g class=\"clock-number clock-number--inner\" (click)=\"selectHour(hour)\">\n              <circle\n                [attr.cx]=\"hourPosition(hour - 12, true).x\"\n                [attr.cy]=\"hourPosition(hour - 12, true).y\"\n                r=\"16\" />\n\n              <text\n                [attr.x]=\"hourPosition(hour - 12, true).x\"\n                [attr.y]=\"hourPosition(hour - 12, true).y\">\n                {{ hour == 0 ? '00' : hour }}\n              </text>\n            </g>\n          } @else {\n            <g\n              class=\"clock-number\"\n              [class.selected]=\"displayHour() == hour\"\n              (click)=\"selectHour(hour)\">\n              <circle [attr.cx]=\"hourPosition(hour).x\" [attr.cy]=\"hourPosition(hour).y\" r=\"18\" />\n\n              <text [attr.x]=\"hourPosition(hour).x\" [attr.y]=\"hourPosition(hour).y\">\n                {{ hour }}\n              </text>\n            </g>\n          }\n        }\n      }\n\n      <!-- MINUTES -->\n      @if (mode() === 'minute') {\n        @for (minute of minuteNumbers(); track minute) {\n          <g\n            class=\"clock-number\"\n            [class.selected]=\"displayMinute() == minute\"\n            (click)=\"selectMinute(minute)\">\n            <circle\n              [attr.cx]=\"minutePosition(minute).x\"\n              [attr.cy]=\"minutePosition(minute).y\"\n              r=\"18\" />\n\n            <text [attr.x]=\"minutePosition(minute).x\" [attr.y]=\"minutePosition(minute).y\">\n              {{ formatMinute(minute) }}\n            </text>\n          </g>\n        }\n      }\n    </svg>\n  </div>\n  <div class=\"ngx-time-picker--footer\">\n    <button (click)=\"close()\">\n      {{ config.cancelButtonText }}\n    </button>\n\n    <button (click)=\"ok()\">\n      {{ config.confirmButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [":host{--ngx-time-picker-clock-bg: light-dark(#f8f8f8, #181818);--ngx-time-picker-header-bg: #6200ee;--ngx-time-picker-header-fg: #fff;--ngx-clock-bg: light-dark(#e8e8e8, #35363c);display:inline-block}.ngx-time-picker{width:300px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;user-select:none;-webkit-user-select:none;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.ngx-time-picker__header{display:flex;align-items:center;justify-content:center;height:82px;background:var(--ngx-time-picker-header-bg, );color:var(--ngx-time-picker-header-fg)}.ngx-time-picker__value{border:0;padding:0;background:transparent;color:#ffffff8c;font-size:48px;line-height:1;font-weight:400;cursor:pointer;transition:color .16s ease,opacity .16s ease;font-variant-numeric:tabular-nums}.ngx-time-picker__value:hover{color:#fffc}.ngx-time-picker__value.active{color:#fff}.ngx-time-picker__value:disabled{cursor:default}.ngx-time-picker__separator{margin-inline:4px;font-size:44px;line-height:1;color:#fff}.ngx-time-picker__clock-wrapper{display:flex;align-items:center;justify-content:center;padding:20px;background:var(--ngx-time-picker-clock-bg)}.ngx-time-picker__clock{width:250px;height:250px;touch-action:none;overflow:visible;cursor:pointer}.clock-background{fill:var(--ngx-clock-bg)}.clock-hand{stroke:#1976d2;stroke-width:2;stroke-linecap:round;pointer-events:none}.clock-center,.clock-selected{fill:#1976d2;pointer-events:none}.clock-number{cursor:pointer}.clock-number circle{fill:transparent}.clock-number text{fill:currentColor;font-size:14px;font-family:Roboto,Arial,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .12s ease}.clock-number:hover circle{fill:#1976d21f}.clock-number.selected text{fill:#000;font-weight:500}.clock-number--inner text{font-size:12px}.ngx-time-picker--disabled{opacity:.5;pointer-events:none}.ngx-time-picker--footer{display:flex;justify-content:flex-end;gap:5px;padding:5px 10px;background:var(--ngx-time-picker-clock-bg)}.ngx-time-picker--footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s}.ngx-time-picker--footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.ngx-time-picker_format{display:flex;flex-direction:column;margin:0 15px;gap:5px}.ngx-time-picker_format button{all:unset;opacity:.4;cursor:pointer}.ngx-time-picker_format button.active{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputTimePickerComponent, decorators: [{
             type: Component,
@@ -386,8 +440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => NgxInputTimePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ngx-time-picker\" [class.ngx-time-picker--disabled]=\"disabled()\">\n  <!-- Header -->\n  <div class=\"ngx-time-picker__header\">\n    <button\n      type=\"button\"\n      class=\"ngx-time-picker__value\"\n      [class.active]=\"mode() === 'hour'\"\n      [disabled]=\"disabled()\"\n      (click)=\"setMode('hour')\">\n      {{ formatHour(displayHour()) }}\n    </button>\n\n    <span class=\"ngx-time-picker__separator\">:</span>\n\n    <button\n      type=\"button\"\n      class=\"ngx-time-picker__value\"\n      [class.active]=\"mode() === 'minute'\"\n      [disabled]=\"disabled()\"\n      (click)=\"setMode('minute')\">\n      {{ formatMinute(displayMinute()) }}\n    </button>\n\n    @if (format() == '12') {\n      <div class=\"ngx-time-picker_format\">\n        <button [class.active]=\"amOrPm() == 'AM'\" (click)=\"amOrPm.set('AM')\">\n          {{ config.amText }}\n        </button>\n        <button [class.active]=\"amOrPm() == 'PM'\" (click)=\"amOrPm.set('PM')\">\n          {{ config.pmText }}\n        </button>\n      </div>\n    }\n  </div>\n\n  <!-- Clock -->\n  <div class=\"ngx-time-picker__clock-wrapper\">\n    <svg\n      #clock\n      class=\"ngx-time-picker__clock\"\n      viewBox=\"0 0 240 240\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      (pointerdown)=\"startPointer($event)\"\n      (pointermove)=\"movePointer($event)\"\n      (pointerup)=\"endPointer($event)\"\n      (pointercancel)=\"endPointer($event)\">\n      <!-- Background -->\n      <circle class=\"clock-background\" cx=\"120\" cy=\"120\" r=\"112\" />\n\n      <!-- Selected hand line -->\n      <line class=\"clock-hand\" x1=\"120\" y1=\"120\" [attr.x2]=\"handEnd().x\" [attr.y2]=\"handEnd().y\" />\n\n      <!-- Selected circle -->\n      <circle\n        class=\"clock-selected\"\n        [attr.cx]=\"selectedPosition().x\"\n        [attr.cy]=\"selectedPosition().y\"\n        r=\"18\" />\n\n      <!-- Center -->\n      <circle class=\"clock-center\" cx=\"120\" cy=\"120\" r=\"5\" />\n\n      <!-- HOURS -->\n      @if (mode() === 'hour') {\n        @for (hour of hourNumbers(); track hour) {\n          @if (format() === '24' && hour >= 13) {\n            <g\n              class=\"clock-number clock-number--inner\"\n              [class.selected]=\"isSelectedHour(hour)\"\n              (click)=\"selectHour(hour)\">\n              <circle\n                [attr.cx]=\"hourPosition(hour - 12, true).x\"\n                [attr.cy]=\"hourPosition(hour - 12, true).y\"\n                r=\"16\" />\n\n              <text\n                [attr.x]=\"hourPosition(hour - 12, true).x\"\n                [attr.y]=\"hourPosition(hour - 12, true).y\">\n                {{ formatHour(hour) }}\n              </text>\n            </g>\n          } @else {\n            <g\n              class=\"clock-number\"\n              [class.selected]=\"isSelectedHour(hour)\"\n              (click)=\"selectHour(hour)\">\n              <circle [attr.cx]=\"hourPosition(hour).x\" [attr.cy]=\"hourPosition(hour).y\" r=\"18\" />\n\n              <text [attr.x]=\"hourPosition(hour).x\" [attr.y]=\"hourPosition(hour).y\">\n                {{ formatHour(hour) }}\n              </text>\n            </g>\n          }\n        }\n      }\n\n      <!-- MINUTES -->\n      @if (mode() === 'minute') {\n        @for (minute of minuteNumbers(); track minute) {\n          <g\n            class=\"clock-number\"\n            [class.selected]=\"isSelectedMinute(minute)\"\n            (click)=\"selectMinute(minute)\">\n            <circle\n              [attr.cx]=\"minutePosition(minute).x\"\n              [attr.cy]=\"minutePosition(minute).y\"\n              r=\"18\" />\n\n            <text [attr.x]=\"minutePosition(minute).x\" [attr.y]=\"minutePosition(minute).y\">\n              {{ formatMinute(minute) }}\n            </text>\n          </g>\n        }\n      }\n    </svg>\n  </div>\n  <div class=\"ngx-time-picker--footer\">\n    <button (click)=\"close()\">\n      {{ config.cancelButtonText }}\n    </button>\n\n    <button (click)=\"ok()\">\n      {{ config.confirmButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [":host{--ngx-time-picker-clock-bg: light-dark(#f8f8f8, #181818);--ngx-time-picker-header-bg: #6200ee;--ngx-time-picker-header-fg: #fff;--ngx-clock-bg: light-dark(#e8e8e8, #35363c);display:inline-block}.ngx-time-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;user-select:none;-webkit-user-select:none;border:1px rgba(191,191,191,.4) solid;box-shadow:0 0 20px #9090904f}.ngx-time-picker__header{display:flex;align-items:center;justify-content:center;height:82px;background:var(--ngx-time-picker-header-bg, );color:var(--ngx-time-picker-header-fg)}.ngx-time-picker__value{border:0;padding:0;background:transparent;color:#ffffff8c;font-size:48px;line-height:1;font-weight:400;cursor:pointer;transition:color .16s ease,opacity .16s ease;font-variant-numeric:tabular-nums}.ngx-time-picker__value:hover{color:#fffc}.ngx-time-picker__value.active{color:#fff}.ngx-time-picker__value:disabled{cursor:default}.ngx-time-picker__separator{margin-inline:4px;font-size:44px;line-height:1;color:#fff}.ngx-time-picker__clock-wrapper{display:flex;align-items:center;justify-content:center;padding:20px;background:var(--ngx-time-picker-clock-bg)}.ngx-time-picker__clock{width:250px;height:250px;touch-action:none;overflow:visible;cursor:pointer}.clock-background{fill:var(--ngx-clock-bg)}.clock-hand{stroke:#1976d2;stroke-width:2;stroke-linecap:round;pointer-events:none}.clock-center,.clock-selected{fill:#1976d2;pointer-events:none}.clock-number{cursor:pointer}.clock-number circle{fill:transparent;transition:fill .12s ease,transform .12s ease}.clock-number text{fill:currentColor;font-size:14px;font-family:Roboto,Arial,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .12s ease}.clock-number:hover circle{fill:#1976d21f}.clock-number.selected circle{fill:#1976d2}.clock-number.selected text{fill:#fff;font-weight:500}.clock-number--inner text{font-size:12px}.ngx-time-picker--disabled{opacity:.5;pointer-events:none}.ngx-time-picker--footer{display:flex;justify-content:flex-end;gap:5px;padding:5px 10px 20px;background:var(--ngx-time-picker-clock-bg)}.ngx-time-picker--footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s}.ngx-time-picker--footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.ngx-time-picker_format{display:flex;flex-direction:column;margin:0 15px;gap:5px}.ngx-time-picker_format button{all:unset;opacity:.4;cursor:pointer}.ngx-time-picker_format button.active{opacity:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { change: [{ type: i0.Output, args: ["change"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], amOrPm: [{ type: i0.Input, args: [{ isSignal: true, alias: "amOrPm", required: false }] }, { type: i0.Output, args: ["amOrPmChange"] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoSwitchToMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSwitchToMinute", required: false }] }], clock: [{ type: i0.ViewChild, args: ['clock', { isSignal: true }] }] } });
+                    ], template: "<div class=\"ngx-time-picker\" [class.ngx-time-picker--disabled]=\"disabled()\">\n  <!-- Header -->\n  <div class=\"ngx-time-picker__header\">\n    <button\n      type=\"button\"\n      class=\"ngx-time-picker__value\"\n      [class.active]=\"mode() === 'hour'\"\n      [disabled]=\"disabled()\"\n      (click)=\"setMode('hour')\">\n      {{ formatHour(displayHour()) }}\n    </button>\n\n    <span class=\"ngx-time-picker__separator\">:</span>\n\n    <button\n      type=\"button\"\n      class=\"ngx-time-picker__value\"\n      [class.active]=\"mode() === 'minute'\"\n      [disabled]=\"disabled()\"\n      (click)=\"setMode('minute')\">\n      {{ formatMinute(displayMinute()) }}\n    </button>\n\n    @if (format() == '12') {\n      <div class=\"ngx-time-picker_format\">\n        <button [class.active]=\"!isPm()\" (click)=\"togglePmAm('AM')\">\n          {{ config.amText }}\n        </button>\n        <button [class.active]=\"isPm()\" (click)=\"togglePmAm('PM')\">\n          {{ config.pmText }}\n        </button>\n      </div>\n    }\n  </div>\n\n  <!-- Clock -->\n  <div class=\"ngx-time-picker__clock-wrapper\">\n    <svg\n      #clock\n      class=\"ngx-time-picker__clock\"\n      viewBox=\"0 0 240 240\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      (pointerdown)=\"startPointer($event)\"\n      (pointermove)=\"movePointer($event)\"\n      (pointerup)=\"endPointer($event)\"\n      (pointercancel)=\"endPointer($event)\">\n      <!-- Background -->\n      <circle class=\"clock-background\" cx=\"120\" cy=\"120\" r=\"112\" />\n\n      <!-- Selected hand line -->\n      <line class=\"clock-hand\" x1=\"120\" y1=\"120\" [attr.x2]=\"handEnd().x\" [attr.y2]=\"handEnd().y\" />\n\n      <!-- Selected circle -->\n      <circle\n        class=\"clock-selected\"\n        [attr.cx]=\"selectedPosition().x\"\n        [attr.cy]=\"selectedPosition().y\"\n        r=\"18\" />\n\n      <!-- Center -->\n      <circle class=\"clock-center\" cx=\"120\" cy=\"120\" r=\"5\" />\n\n      <!-- HOURS -->\n      @if (mode() === 'hour') {\n        @for (hour of hourNumbers(); track hour) {\n          @if (format() === '24' && (hour >= 13 || hour == 0)) {\n            <g class=\"clock-number clock-number--inner\" (click)=\"selectHour(hour)\">\n              <circle\n                [attr.cx]=\"hourPosition(hour - 12, true).x\"\n                [attr.cy]=\"hourPosition(hour - 12, true).y\"\n                r=\"16\" />\n\n              <text\n                [attr.x]=\"hourPosition(hour - 12, true).x\"\n                [attr.y]=\"hourPosition(hour - 12, true).y\">\n                {{ hour == 0 ? '00' : hour }}\n              </text>\n            </g>\n          } @else {\n            <g\n              class=\"clock-number\"\n              [class.selected]=\"displayHour() == hour\"\n              (click)=\"selectHour(hour)\">\n              <circle [attr.cx]=\"hourPosition(hour).x\" [attr.cy]=\"hourPosition(hour).y\" r=\"18\" />\n\n              <text [attr.x]=\"hourPosition(hour).x\" [attr.y]=\"hourPosition(hour).y\">\n                {{ hour }}\n              </text>\n            </g>\n          }\n        }\n      }\n\n      <!-- MINUTES -->\n      @if (mode() === 'minute') {\n        @for (minute of minuteNumbers(); track minute) {\n          <g\n            class=\"clock-number\"\n            [class.selected]=\"displayMinute() == minute\"\n            (click)=\"selectMinute(minute)\">\n            <circle\n              [attr.cx]=\"minutePosition(minute).x\"\n              [attr.cy]=\"minutePosition(minute).y\"\n              r=\"18\" />\n\n            <text [attr.x]=\"minutePosition(minute).x\" [attr.y]=\"minutePosition(minute).y\">\n              {{ formatMinute(minute) }}\n            </text>\n          </g>\n        }\n      }\n    </svg>\n  </div>\n  <div class=\"ngx-time-picker--footer\">\n    <button (click)=\"close()\">\n      {{ config.cancelButtonText }}\n    </button>\n\n    <button (click)=\"ok()\">\n      {{ config.confirmButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [":host{--ngx-time-picker-clock-bg: light-dark(#f8f8f8, #181818);--ngx-time-picker-header-bg: #6200ee;--ngx-time-picker-header-fg: #fff;--ngx-clock-bg: light-dark(#e8e8e8, #35363c);display:inline-block}.ngx-time-picker{width:300px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;user-select:none;-webkit-user-select:none;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.ngx-time-picker__header{display:flex;align-items:center;justify-content:center;height:82px;background:var(--ngx-time-picker-header-bg, );color:var(--ngx-time-picker-header-fg)}.ngx-time-picker__value{border:0;padding:0;background:transparent;color:#ffffff8c;font-size:48px;line-height:1;font-weight:400;cursor:pointer;transition:color .16s ease,opacity .16s ease;font-variant-numeric:tabular-nums}.ngx-time-picker__value:hover{color:#fffc}.ngx-time-picker__value.active{color:#fff}.ngx-time-picker__value:disabled{cursor:default}.ngx-time-picker__separator{margin-inline:4px;font-size:44px;line-height:1;color:#fff}.ngx-time-picker__clock-wrapper{display:flex;align-items:center;justify-content:center;padding:20px;background:var(--ngx-time-picker-clock-bg)}.ngx-time-picker__clock{width:250px;height:250px;touch-action:none;overflow:visible;cursor:pointer}.clock-background{fill:var(--ngx-clock-bg)}.clock-hand{stroke:#1976d2;stroke-width:2;stroke-linecap:round;pointer-events:none}.clock-center,.clock-selected{fill:#1976d2;pointer-events:none}.clock-number{cursor:pointer}.clock-number circle{fill:transparent}.clock-number text{fill:currentColor;font-size:14px;font-family:Roboto,Arial,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .12s ease}.clock-number:hover circle{fill:#1976d21f}.clock-number.selected text{fill:#000;font-weight:500}.clock-number--inner text{font-size:12px}.ngx-time-picker--disabled{opacity:.5;pointer-events:none}.ngx-time-picker--footer{display:flex;justify-content:flex-end;gap:5px;padding:5px 10px;background:var(--ngx-time-picker-clock-bg)}.ngx-time-picker--footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s}.ngx-time-picker--footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.ngx-time-picker_format{display:flex;flex-direction:column;margin:0 15px;gap:5px}.ngx-time-picker_format button{all:unset;opacity:.4;cursor:pointer}.ngx-time-picker_format button.active{opacity:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { change: [{ type: i0.Output, args: ["change"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoSwitchToMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSwitchToMinute", required: false }] }], clock: [{ type: i0.ViewChild, args: ['clock', { isSignal: true }] }] } });
 
 class NgxInputTimePicker {
     el;
@@ -399,8 +453,6 @@ class NgxInputTimePicker {
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     format = input(this.config.format, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
-    amOrPm = model(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "amOrPm" }] : /* istanbul ignore next */ []));
     pickerRef;
     _onChange = (value) => { };
     _onTouched = () => { };
@@ -467,7 +519,6 @@ class NgxInputTimePicker {
             margin: 2,
             configure: (instance, ref) => {
                 instance.writeValue(this.value());
-                instance.amOrPm.set(this.amOrPm());
                 instance.change.subscribe((c) => {
                     this.value.set(c ?? '');
                     this.emitChange();
@@ -491,24 +542,16 @@ class NgxInputTimePicker {
         this._onTouched();
     }
     validate(control) {
-        return null;
+        const raw = this.value();
+        if (!raw)
+            return null; // empty is handled by Validators.required, not us
+        return normalizeTime(raw) === null ? { invalid: true } : null;
     }
     _formatValue() {
-        const s = this.value().split(':');
-        if (this.format() == '12') {
-            if (+s[0] > 12) {
-                s[0] = (+s[0] - 12).toString().padStart(2, '0');
-                this.amOrPm.set('PM');
-            }
-            else {
-                this.amOrPm.set('AM');
-            }
-        }
-        this.value.set(s.join(':') + ' ' + this.amOrPm());
         this.renderer.setProperty(this.el.nativeElement, 'value', this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputTimePicker, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputTimePicker, isStandalone: true, selector: "[ngxInputTimePicker]", inputs: { openOnCLick: { classPropertyName: "openOnCLick", publicName: "openOnCLick", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, amOrPm: { classPropertyName: "amOrPm", publicName: "amOrPm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", amOrPm: "amOrPmChange" }, host: { listeners: { "click": "onClick($event)", "input": "onInput($event)", "blur": "onBlur()" }, properties: { "attr.readOnly": "true" }, classAttribute: "ngx-datepicker-input" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputTimePicker, isStandalone: true, selector: "[ngxInputTimePicker]", inputs: { openOnCLick: { classPropertyName: "openOnCLick", publicName: "openOnCLick", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "click": "onClick($event)", "input": "onInput($event)", "blur": "onBlur()" }, properties: { "attr.readOnly": "true" }, classAttribute: "ngx-datepicker-input" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxInputTimePicker),
@@ -543,7 +586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { openOnCLick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnCLick", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], amOrPm: [{ type: i0.Input, args: [{ isSignal: true, alias: "amOrPm", required: false }] }, { type: i0.Output, args: ["amOrPmChange"] }], onClick: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { openOnCLick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnCLick", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], onInput: [{
@@ -554,9 +597,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 args: ['blur']
             }] } });
 
+function provideTimePicker(config) {
+    const configuration = { ...DEFAULT_TIME_PICKER_CONFIG, ...config };
+    return [
+        {
+            provide: NGX_TIME_PICKER_CONFIG,
+            useValue: configuration,
+        },
+    ];
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgxInputTimePicker, NgxInputTimePickerComponent };
+export { DEFAULT_TIME_PICKER_CONFIG, NGX_TIME_PICKER_CONFIG, NgxInputTimePicker, NgxInputTimePickerComponent, NgxTimePickerConfig, provideTimePicker };
 //# sourceMappingURL=ngx-kit-time-picker.mjs.map