ngx-kit 5.0.0 → 6.0.1

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

@@ -0,0 +1,602 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, output, model, input, viewChild, signal, computed, forwardRef, Component, ViewContainerRef, Renderer2, HostListener, Directive } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BrowserService, OverlayService } from 'ngx-kit/shared';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+
+class NgxTimePickerConfig {
+    cancelButtonText = 'Cancel';
+    confirmButtonText = 'Ok';
+    amText = 'AM';
+    pmText = 'PM';
+    format = '12';
+    minuteStep = 1;
+    autoSwitchToMinute = true;
+}
+const DEFAULT_TIME_PICKER_CONFIG = new NgxTimePickerConfig();
+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();
+    cancel = output();
+    config = inject(NGX_TIME_PICKER_CONFIG);
+    isDisabled = false;
+    /**
+     * Time value.
+     *
+     * Example:
+     * 14:35
+     */
+    value = model('12:00', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * 12h or 24h.
+     */
+    format = input(this.config.format, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /**
+     * Minute step.
+     */
+    minuteStep = input(this.config.minuteStep, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the clock is disabled.
+     */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to automatically switch from hour to minute.
+     */
+    autoSwitchToMinute = input(this.config.autoSwitchToMinute, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoSwitchToMinute" }] : /* istanbul ignore next */ []));
+    clock = viewChild('clock', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clock" }] : /* istanbul ignore next */ []));
+    mode = signal('hour', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    dragging = false;
+    parsedTime = computed(() => {
+        const value = this.value();
+        const [hour, minute] = value.split(':').map(Number);
+        return {
+            hour: Number.isFinite(hour) ? hour : 12,
+            minute: Number.isFinite(minute) ? minute : 0,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parsedTime" }] : /* istanbul ignore next */ []));
+    displayHour = computed(() => {
+        const { hour } = this.parsedTime();
+        if (this.format() === '12') {
+            const h = hour % 12;
+            return h === 0 ? 12 : h;
+        }
+        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 */
+    ...(ngDevMode ? [{ debugName: "displayMinute" }] : /* istanbul ignore next */ []));
+    hourNumbers = computed(() => {
+        if (this.format() === '24') {
+            return Array.from({ length: 24 }, (_, i) => i);
+        }
+        return Array.from({ length: 12 }, (_, i) => i + 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourNumbers" }] : /* istanbul ignore next */ []));
+    minuteNumbers = computed(() => {
+        const step = Math.max(1, 5);
+        const values = [];
+        for (let i = 0; i < 60; i += step) {
+            values.push(i);
+        }
+        return values;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteNumbers" }] : /* istanbul ignore next */ []));
+    hourAngle = computed(() => {
+        const { hour } = this.parsedTime();
+        if (this.format() === '24') {
+            /*
+             * MUI-like 24 hour clock.
+             *
+             * 0 -> 0°
+             * 6 -> 90°
+             * 12 -> 180°
+             * 18 -> 270°
+             */
+            return (hour % 12) * 30;
+        }
+        const h = hour % 12;
+        return h * 30;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourAngle" }] : /* istanbul ignore next */ []));
+    minuteAngle = computed(() => {
+        return this.parsedTime().minute * 6;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteAngle" }] : /* istanbul ignore next */ []));
+    currentAngle = computed(() => {
+        return this.mode() === 'hour' ? this.hourAngle() : this.minuteAngle();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentAngle" }] : /* istanbul ignore next */ []));
+    handLength = computed(() => {
+        if (this.mode() === 'hour' && this.format() === '24') {
+            const hour = this.parsedTime().hour;
+            if (hour >= 13 && hour <= 23) {
+                return 58;
+            }
+        }
+        return 86;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "handLength" }] : /* istanbul ignore next */ []));
+    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.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 */ []));
+    handEnd = computed(() => {
+        const angle = this.currentAngle();
+        const radians = ((angle - 90) * Math.PI) / 180;
+        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 */ []));
+    _onChange = (value) => { };
+    _onTouched = () => { };
+    _validatorOnChange = () => { };
+    constructor() { }
+    ngOnInit() { }
+    writeValue(value) {
+        if (!value) {
+            this.value.set('12:00');
+            return;
+        }
+        const normalized = normalizeTime(value);
+        if (normalized === null) {
+            // invalid value
+            return;
+        }
+        this.value.set(normalized);
+    }
+    validate(control) {
+        return null;
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorOnChange = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+    }
+    startPointer(event) {
+        if (this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.dragging = true;
+        const target = event.currentTarget;
+        target.setPointerCapture?.(event.pointerId);
+        this.updateFromPointer(event);
+    }
+    movePointer(event) {
+        if (!this.dragging || this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.updateFromPointer(event);
+    }
+    endPointer(event) {
+        if (!this.dragging) {
+            return;
+        }
+        this.dragging = false;
+        const target = event.currentTarget;
+        target.releasePointerCapture?.(event.pointerId);
+        if (this.mode() === 'hour' && this.autoSwitchToMinute()) {
+            this.mode.set('minute');
+        }
+    }
+    selectHour(hour) {
+        if (this.disabled()) {
+            return;
+        }
+        let normalizedHour = hour;
+        if (this.format() === '12') {
+            const currentHour = this.parsedTime().hour;
+            const isPm = currentHour >= 12;
+            normalizedHour = hour === 12 ? (isPm ? 12 : 0) : isPm ? hour + 12 : hour;
+        }
+        this.setTime(normalizedHour, this.parsedTime().minute);
+        if (this.autoSwitchToMinute()) {
+            this.mode.set('minute');
+        }
+    }
+    selectMinute(minute) {
+        if (this.disabled()) {
+            return;
+        }
+        this.setTime(this.parsedTime().hour, minute);
+    }
+    setMode(mode) {
+        if (!this.disabled()) {
+            this.mode.set(mode);
+        }
+    }
+    updateFromPointer(event) {
+        const svg = this.clock()?.nativeElement;
+        if (!svg) {
+            return;
+        }
+        const rect = svg.getBoundingClientRect();
+        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;
+        }
+        let hour = Math.round(angle / 30) % 12;
+        if (this.format() === '12') {
+            hour = hour === 0 ? 12 : hour;
+            this.setTime(hour, this.parsedTime().minute);
+            return;
+        }
+        /*
+         * 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;
+        }
+        else {
+            /*
+             * Outer ring:
+             *
+             * 12 position -> 12
+             * 1 ... 11    -> 1 ... 11
+             */
+            hour = hour === 0 ? 12 : hour;
+        }
+        this.setTime(hour, this.parsedTime().minute);
+    }
+    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 %= 60;
+        const step = Math.max(1, this.minuteStep());
+        minute = Math.round(minute / step) * step;
+        if (minute >= 60) {
+            minute = 0;
+        }
+        this.setTime(this.parsedTime().hour, minute);
+    }
+    setTime(hour, minute) {
+        const h = String(hour).padStart(2, '0');
+        const m = String(minute).padStart(2, '0');
+        this.value.set(`${h}:${m}`);
+    }
+    formatHour(hour) {
+        if (this.format() === '24') {
+            return String(hour).padStart(2, '0');
+        }
+        return String(hour);
+    }
+    formatMinute(minute) {
+        return String(minute).padStart(2, '0');
+    }
+    numberPosition(index, total, radius = 94) {
+        const angle = (index / total) * 360 - 90;
+        const radians = (angle * Math.PI) / 180;
+        return {
+            x: 120 + Math.cos(radians) * radius,
+            y: 120 + Math.sin(radians) * radius,
+        };
+    }
+    hourPosition(hour, inner = false) {
+        const normalized = hour % 12;
+        const angle = normalized * 30 - 90;
+        const radians = (angle * Math.PI) / 180;
+        const radius = inner ? 58 : 94;
+        return {
+            x: 120 + Math.cos(radians) * radius,
+            y: 120 + Math.sin(radians) * radius,
+        };
+    }
+    minutePosition(minute) {
+        const angle = minute * 6 - 90;
+        const radians = (angle * Math.PI) / 180;
+        return {
+            x: 120 + Math.cos(radians) * 94,
+            y: 120 + Math.sin(radians) * 94,
+        };
+    }
+    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());
+    }
+    close() {
+        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 }, 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),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                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]=\"!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(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}.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 px;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,
+            args: [{ selector: 'ngx-time-picker', imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgxInputTimePickerComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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]=\"!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(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}.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 px;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;
+    config = inject(NGX_TIME_PICKER_CONFIG);
+    openOnCLick = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOnCLick" }] : /* istanbul ignore next */ []));
+    change = output();
+    value = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    format = input(this.config.format, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    pickerRef;
+    _onChange = (value) => { };
+    _onTouched = () => { };
+    _validatorOnChange = () => { };
+    isDisabled = false;
+    overlayService = inject(OverlayService);
+    viewContainerRef = inject(ViewContainerRef);
+    renderer = inject(Renderer2);
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    onClick(ev) {
+        if (this.openOnCLick() && !this.isDisabled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.toggle();
+        }
+    }
+    onInput(event) {
+        const input = event.target;
+        this.value.set(input.value ?? '');
+        this._formatValue();
+        this._onChange(this.value());
+    }
+    onBlur() {
+        this._onTouched();
+    }
+    writeValue(value) {
+        this.value.set(value);
+        this._formatValue();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorOnChange = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+        if (disabled) {
+            this.renderer.setProperty(this.el.nativeElement, 'disabled', disabled);
+        }
+        else {
+            this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
+        }
+    }
+    toggle() {
+        if (this.pickerRef || this.isDisabled) {
+            this.destroy();
+            return;
+        }
+        this.pickerRef = this.overlayService.open({
+            anchor: this.el.nativeElement,
+            component: NgxInputTimePickerComponent,
+            viewContainerRef: this.viewContainerRef,
+            alignment: 'center',
+            placement: 'bottom',
+            margin: 2,
+            configure: (instance, ref) => {
+                instance.writeValue(this.value());
+                instance.change.subscribe((c) => {
+                    this.value.set(c ?? '');
+                    this.emitChange();
+                    this.destroy();
+                });
+                instance.cancel.subscribe(() => ref.close());
+            },
+            onClosed: () => {
+                this.pickerRef = undefined;
+            },
+        });
+    }
+    destroy() {
+        this.pickerRef?.close();
+        this.pickerRef = undefined;
+    }
+    async emitChange() {
+        this._onChange(this.value());
+        this._formatValue();
+        this.change.emit(this.value());
+        this._onTouched();
+    }
+    validate(control) {
+        return null;
+    }
+    _formatValue() {
+        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 } }, 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),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => NgxInputTimePicker),
+                multi: true,
+            },
+        ], exportAs: ["ngxInputTimePicker"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputTimePicker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxInputTimePicker]',
+                    exportAs: 'ngxInputTimePicker',
+                    host: {
+                        class: 'ngx-datepicker-input',
+                        '[attr.readOnly]': 'true',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgxInputTimePicker),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => NgxInputTimePicker),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], 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: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxInputTimePicker, NgxInputTimePickerComponent };
+//# sourceMappingURL=ngx-kit-time-picker.mjs.map