ngwr 6.1.1 → 7.0.0

package/fesm2022/ngwr-date-picker.mjs

@@ -0,0 +1,624 @@
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { input, inject, signal, computed, forwardRef, ViewEncapsulation, Component, output, ElementRef, DestroyRef, viewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { WrCalendar } from 'ngwr/calendar';
+import { WrDateAdapter, WR_DATE_LOCALE } from 'ngwr/date-adapter';
+import { readI18nText } from 'ngwr/i18n';
+import { WrInput, WrInputGroup, WrInputSuffix } from 'ngwr/input';
+import { WR_OVERLAY } from 'ngwr/overlay';
+import { noop, clamp } from 'ngwr/utils';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+function pad(n) {
+    return String(n).padStart(2, '0');
+}
+/** Wraps a value into `[0, modulus)` so steppers cycle nicely. */
+function wrap(v, modulus) {
+    return ((v % modulus) + modulus) % modulus;
+}
+/** Detect whether a locale uses 12-hour time by default. */
+function isLocaleHour12(locale) {
+    try {
+        return new Intl.DateTimeFormat(locale, { hour: 'numeric' }).resolvedOptions().hour12 === true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Internal time stepper panel rendered by `<wr-date-picker mode="time">`
+ * (standalone) and `mode="datetime"` (composed with the calendar). Not part
+ * of the public API — use `<wr-date-picker mode="time">` instead.
+ *
+ * @internal
+ */
+class WrTimePanel {
+    /** 12 / 24-hour mode. @default 'auto' (derived from the locale) */
+    format = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Render a third column for seconds. @default false */
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Step applied to minutes / seconds steppers. @default 1 */
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(1, coerceNumberProperty(v, 1)) });
+    /** Disable interaction. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Read-only — values cannot be changed. @default false */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    adapter = inject(WrDateAdapter);
+    locale = inject(WR_DATE_LOCALE);
+    /** Source of truth — stores h/m/s in 24-hour form. */
+    hours = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []));
+    minutes = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
+    seconds = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seconds" }] : /* istanbul ignore next */ []));
+    /** Date portion preserved across updates (today's date if none was supplied). */
+    basis = signal(this.adapter.today(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "basis" }] : /* istanbul ignore next */ []));
+    disabledFromCva = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    interactive = computed(() => !this.effectiveDisabled() && !this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /** Resolved format — turns 'auto' into '12h' or '24h' based on the locale. */
+    is12h = computed(() => {
+        const f = this.format();
+        if (f === '12h')
+            return true;
+        if (f === '24h')
+            return false;
+        return isLocaleHour12(this.locale);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "is12h" }] : /* istanbul ignore next */ []));
+    /** Hours value shown in the input (1-12 in 12h mode, 0-23 otherwise). */
+    displayHours = computed(() => {
+        if (!this.is12h())
+            return this.hours();
+        const h = this.hours() % 12;
+        return h === 0 ? 12 : h;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayHours" }] : /* istanbul ignore next */ []));
+    isPm = computed(() => this.hours() >= 12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPm" }] : /* istanbul ignore next */ []));
+    amPmLabel = computed(() => (this.isPm() ? 'PM' : 'AM'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "amPmLabel" }] : /* istanbul ignore next */ []));
+    hoursDisplay = computed(() => pad(this.displayHours()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoursDisplay" }] : /* istanbul ignore next */ []));
+    minutesDisplay = computed(() => pad(this.minutes()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minutesDisplay" }] : /* istanbul ignore next */ []));
+    secondsDisplay = computed(() => pad(this.seconds()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondsDisplay" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-time-picker'];
+        if (this.is12h())
+            parts.push('wr-time-picker--12h');
+        if (this.showSeconds())
+            parts.push('wr-time-picker--with-seconds');
+        if (this.effectiveDisabled())
+            parts.push('wr-time-picker--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor
+    onChange = noop;
+    onTouched = noop;
+    writeValue(value) {
+        if (value && this.adapter.isValid(value)) {
+            this.basis.set(this.adapter.clone(value));
+            this.hours.set(this.adapter.getHours(value));
+            this.minutes.set(this.adapter.getMinutes(value));
+            this.seconds.set(this.adapter.getSeconds(value));
+        }
+        else {
+            this.basis.set(this.adapter.today());
+            this.hours.set(0);
+            this.minutes.set(0);
+            this.seconds.set(0);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+    }
+    // Typed-input handlers
+    onHoursInput(event) {
+        const n = Number(event.target.value);
+        if (Number.isNaN(n))
+            return;
+        if (this.is12h()) {
+            const h12 = clamp(Math.trunc(n), 1, 12) % 12;
+            this.hours.set(this.isPm() ? h12 + 12 : h12);
+        }
+        else {
+            this.hours.set(clamp(Math.trunc(n), 0, 23));
+        }
+        this.emit();
+    }
+    onMinutesInput(event) {
+        const n = Number(event.target.value);
+        if (Number.isNaN(n))
+            return;
+        this.minutes.set(clamp(Math.trunc(n), 0, 59));
+        this.emit();
+    }
+    onSecondsInput(event) {
+        const n = Number(event.target.value);
+        if (Number.isNaN(n))
+            return;
+        this.seconds.set(clamp(Math.trunc(n), 0, 59));
+        this.emit();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    // Stepper handlers (▲ / ▼ buttons)
+    stepHours(direction) {
+        if (!this.interactive())
+            return;
+        this.hours.set(wrap(this.hours() + direction, 24));
+        this.emit();
+    }
+    stepMinutes(direction) {
+        if (!this.interactive())
+            return;
+        this.minutes.set(wrap(this.minutes() + direction * this.step(), 60));
+        this.emit();
+    }
+    stepSeconds(direction) {
+        if (!this.interactive())
+            return;
+        this.seconds.set(wrap(this.seconds() + direction * this.step(), 60));
+        this.emit();
+    }
+    toggleAmPm() {
+        if (!this.interactive())
+            return;
+        // ±12 hours flips AM ↔ PM; wrap handles overflow.
+        this.hours.set(wrap(this.hours() + 12, 24));
+        this.emit();
+    }
+    // Emission
+    emit() {
+        const next = this.adapter.setTime(this.basis(), this.hours(), this.minutes(), this.seconds());
+        this.onChange(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrTimePanel, isStandalone: true, selector: "wr-time-picker", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrTimePanel),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Hours\"\n    [value]=\"hoursDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onHoursInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n<span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Minutes\"\n    [value]=\"minutesDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onMinutesInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n@if (showSeconds()) {\n  <span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n  <div class=\"wr-time-picker__col\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Increment seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <input\n      class=\"wr-time-picker__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      aria-label=\"Seconds\"\n      [value]=\"secondsDisplay()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onSecondsInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Decrement seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(-1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n\n@if (is12h()) {\n  <div class=\"wr-time-picker__col wr-time-picker__col--ampm\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <span class=\"wr-time-picker__label\" aria-live=\"polite\">{{ amPmLabel() }}</span>\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTimePanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-time-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrTimePanel),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Hours\"\n    [value]=\"hoursDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onHoursInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n<span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Minutes\"\n    [value]=\"minutesDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onMinutesInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n@if (showSeconds()) {\n  <span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n  <div class=\"wr-time-picker__col\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Increment seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <input\n      class=\"wr-time-picker__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      aria-label=\"Seconds\"\n      [value]=\"secondsDisplay()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onSecondsInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Decrement seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(-1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n\n@if (is12h()) {\n  <div class=\"wr-time-picker__col wr-time-picker__col--ampm\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <span class=\"wr-time-picker__label\" aria-live=\"polite\">{{ amPmLabel() }}</span>\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n" }]
+        }], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Internal panel that stacks a `<wr-calendar>` and a `<wr-time-picker>`,
+ * combining their selections into a single `Date`. Owned by
+ * `<wr-date-picker mode="datetime">` — not part of the public API.
+ *
+ * @internal
+ */
+class WrDateTimePanel {
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    dateFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    timeFormat = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    showSeconds = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    step = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    changed = output();
+    adapter = inject(WrDateAdapter);
+    /** Date portion used by the calendar — falls back to today when value is null. */
+    calendarValue = computed(() => this.value() ?? this.adapter.today(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarValue" }] : /* istanbul ignore next */ []));
+    /** Value passed to the time picker — falls back to today (00:00) when null. */
+    timeValue = computed(() => this.value() ?? this.adapter.today(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeValue" }] : /* istanbul ignore next */ []));
+    onCalendarSelect(date) {
+        if (!date)
+            return;
+        const base = this.value() ?? this.adapter.today();
+        const combined = this.adapter.setTime(this.adapter.createDate(this.adapter.getYear(date), this.adapter.getMonth(date), this.adapter.getDate(date)), this.adapter.getHours(base), this.adapter.getMinutes(base), this.adapter.getSeconds(base));
+        this.changed.emit(combined);
+    }
+    onTimeChange(time) {
+        if (!time)
+            return;
+        const base = this.value() ?? this.adapter.today();
+        const combined = this.adapter.setTime(this.adapter.createDate(this.adapter.getYear(base), this.adapter.getMonth(base), this.adapter.getDate(base)), this.adapter.getHours(time), this.adapter.getMinutes(time), this.adapter.getSeconds(time));
+        this.changed.emit(combined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDateTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrDateTimePanel, isStandalone: true, selector: "wr-date-time-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wr-date-time-panel" }, ngImport: i0, template: "<wr-calendar\n  [date]=\"calendarValue()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  (dateChange)=\"onCalendarSelect($event)\"\n/>\n\n<div class=\"wr-date-time-panel__time\">\n  <wr-time-picker\n    [ngModel]=\"timeValue()\"\n    [format]=\"timeFormat()\"\n    [showSeconds]=\"showSeconds()\"\n    [step]=\"step()\"\n    (ngModelChange)=\"onTimeChange($event)\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDateTimePanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-date-time-panel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-date-time-panel' }, imports: [FormsModule, WrCalendar, WrTimePanel], template: "<wr-calendar\n  [date]=\"calendarValue()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  (dateChange)=\"onCalendarSelect($event)\"\n/>\n\n<div class=\"wr-date-time-panel__time\">\n  <wr-time-picker\n    [ngModel]=\"timeValue()\"\n    [format]=\"timeFormat()\"\n    [showSeconds]=\"showSeconds()\"\n    [step]=\"step()\"\n    (ngModelChange)=\"onTimeChange($event)\"\n  />\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Unified date / time / date-time picker. Same `<input>` + popover skeleton
+ * for every mode — the overlay content swaps based on `[mode]`:
+ *
+ * - `'date'` (default) — popover renders a calendar. Picking a date closes
+ *   the overlay.
+ * - `'time'` — popover renders an `HH:MM[:SS]` stepper with optional AM/PM.
+ *   Stays open while editing; close with outside-click or Escape.
+ * - `'datetime'` — popover stacks calendar + time stepper. Picking a date
+ *   does NOT close (the user typically wants to set the time next).
+ *
+ * Implements `ControlValueAccessor` — bind via `[(ngModel)]`, `[formControl]`,
+ * or `formControlName`. Value type is `Date | null` for every mode.
+ *
+ * Parses the input on every keystroke (silently — only emits when valid) and
+ * re-formats canonical on blur. Format is driven by {@link WrDateAdapter}: it
+ * accepts both named keys (`'shortDate'`, `'mediumDateTime'`, …) and raw
+ * token strings (`'dd.MM.yyyy'`, `'HH:mm'`). When `format` is left at the
+ * default (`null`), the picker derives the right named key from `mode`:
+ * `'date'` → `'shortDate'`, `'time'` → `'shortTime'`, `'datetime'` →
+ * `'shortDateTime'`.
+ *
+ * @example
+ * ```html
+ * <!-- Date only -->
+ * <wr-date-picker [(ngModel)]="picked" format="dd.MM.yyyy" [min]="minDate" />
+ *
+ * <!-- Time only -->
+ * <wr-date-picker mode="time" [(ngModel)]="picked" timeFormat="24h" />
+ *
+ * <!-- Date + time -->
+ * <wr-date-picker mode="datetime" [(ngModel)]="when" [showSeconds]="true" [step]="5" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/date-picker
+ */
+class WrDatePicker {
+    /** Picker behavior — see class doc. @default 'date' */
+    mode = input('date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * Format used for both display and parsing. When `null` (default), the
+     * format is derived from `mode` (`shortDate` / `shortTime` /
+     * `shortDateTime`). Pass a named key or raw token string to override.
+     */
+    format = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when the input is empty. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Min selectable date (forwarded to the calendar). Ignored in `time` mode. */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Max selectable date (forwarded to the calendar). Ignored in `time` mode. */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Predicate to disable specific dates (forwarded to the calendar). Ignored in `time` mode. */
+    dateFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /** Time-panel 12 / 24-hour format. Applies in `time` + `datetime` modes. @default 'auto' */
+    timeFormat = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    /** Render the seconds column. Applies in `time` + `datetime` modes. @default false */
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Minute / second step for the time panel. @default 1 */
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(1, coerceNumberProperty(v, 1)) });
+    /** Disable interaction. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Read-only — input not typeable, but the trigger icon still opens the overlay. @default false */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    adapter = inject(WrDateAdapter);
+    overlay = inject(WR_OVERLAY);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    inputEl = viewChild.required('input');
+    /** The picked Date. Mirrored from the CVA. */
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Text currently in the input (may be partial / invalid mid-type). */
+    text = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    disabledFromCva = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    /** Whether the popover is currently open. */
+    overlayOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayOpen" }] : /* istanbul ignore next */ []));
+    /** Resolved format — falls back to a mode-appropriate default. */
+    resolvedFormat = computed(() => {
+        const explicit = this.format();
+        if (explicit)
+            return explicit;
+        const m = this.mode();
+        if (m === 'datetime')
+            return 'shortDateTime';
+        if (m === 'time')
+            return 'shortTime';
+        return 'shortDate';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFormat" }] : /* istanbul ignore next */ []));
+    isTime = computed(() => this.mode() === 'time', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTime" }] : /* istanbul ignore next */ []));
+    isDateTime = computed(() => this.mode() === 'datetime', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateTime" }] : /* istanbul ignore next */ []));
+    // Resolved at injection time — i18n catalog reads pick up live locale
+    // changes via re-render of the host attribute binding.
+    labelDate = readI18nText('datePicker.open', 'Open calendar');
+    labelTime = readI18nText('datePicker.openTime', 'Open time picker');
+    labelDateTime = readI18nText('datePicker.openDateTime', 'Open date and time picker');
+    triggerLabel = computed(() => {
+        const m = this.mode();
+        if (m === 'time')
+            return this.labelTime;
+        if (m === 'datetime')
+            return this.labelDateTime;
+        return this.labelDate;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-date-picker', `wr-date-picker--${this.mode()}`];
+        if (this.effectiveDisabled())
+            parts.push('wr-date-picker--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => this.dispose());
+    }
+    // ControlValueAccessor
+    onChange = noop;
+    onTouched = noop;
+    writeValue(value) {
+        this.value.set(value);
+        this.text.set(value && this.adapter.isValid(value) ? this.adapter.format(value, this.resolvedFormat()) : '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+    }
+    // Template handlers
+    onInput(event) {
+        const raw = event.target.value;
+        this.text.set(raw);
+        if (!raw) {
+            this.value.set(null);
+            this.onChange(null);
+            return;
+        }
+        const parsed = this.adapter.parse(raw, this.resolvedFormat());
+        if (parsed && this.adapter.isValid(parsed) && !this.isOutOfBounds(parsed)) {
+            this.value.set(parsed);
+            this.onChange(parsed);
+        }
+    }
+    onBlur() {
+        this.onTouched();
+        // Reformat to canonical on blur (cleans up `1/5/25` → `1/5/2025`).
+        const v = this.value();
+        if (v && this.adapter.isValid(v)) {
+            this.text.set(this.adapter.format(v, this.resolvedFormat()));
+        }
+        else if (!this.text()) {
+            this.value.set(null);
+            this.onChange(null);
+        }
+    }
+    /** Called by the input's click — opens the overlay if it isn't open already. */
+    openOnInput() {
+        if (this.effectiveDisabled() || this.overlayRef)
+            return;
+        this.openOverlay();
+    }
+    toggleOverlay() {
+        if (this.effectiveDisabled())
+            return;
+        if (this.overlayRef) {
+            this.closeOverlay();
+        }
+        else {
+            this.openOverlay();
+        }
+    }
+    // Overlay
+    openOverlay() {
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+        ])
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.scrollStrategies.reposition(),
+            panelClass: 'wr-date-picker-overlay',
+        });
+        this.overlayOpen.set(true);
+        // Dispatch by mode — pick the panel + wire its emissions.
+        const m = this.mode();
+        if (m === 'time')
+            this.attachTime();
+        else if (m === 'datetime')
+            this.attachDateTime();
+        else
+            this.attachDate();
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (this.host.nativeElement.contains(event.target))
+                return;
+            this.closeOverlay();
+        });
+        this.overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closeOverlay();
+                this.inputEl().nativeElement.focus();
+            }
+        });
+    }
+    attachDate() {
+        if (!this.overlayRef)
+            return;
+        const ref = this.overlayRef.attach(new ComponentPortal(WrCalendar));
+        ref.setInput('date', this.value());
+        ref.setInput('min', this.min());
+        ref.setInput('max', this.max());
+        ref.setInput('dateFilter', this.dateFilter());
+        ref.instance.date.subscribe(next => {
+            if (!next)
+                return;
+            this.commit(next);
+            this.closeOverlay();
+        });
+    }
+    attachTime() {
+        if (!this.overlayRef)
+            return;
+        const ref = this.overlayRef.attach(new ComponentPortal(WrTimePanel));
+        ref.setInput('format', this.timeFormat());
+        ref.setInput('showSeconds', this.showSeconds());
+        ref.setInput('step', this.step());
+        ref.instance.writeValue(this.value() ?? this.adapter.today());
+        ref.instance.registerOnChange((next) => {
+            if (!next)
+                return;
+            this.commit(next);
+        });
+    }
+    attachDateTime() {
+        if (!this.overlayRef)
+            return;
+        const ref = this.overlayRef.attach(new ComponentPortal(WrDateTimePanel));
+        ref.setInput('value', this.value());
+        ref.setInput('min', this.min());
+        ref.setInput('max', this.max());
+        ref.setInput('dateFilter', this.dateFilter());
+        ref.setInput('timeFormat', this.timeFormat());
+        ref.setInput('showSeconds', this.showSeconds());
+        ref.setInput('step', this.step());
+        ref.instance.changed.subscribe(next => {
+            this.commit(next);
+            ref.setInput('value', next);
+        });
+    }
+    commit(next) {
+        this.value.set(next);
+        this.text.set(this.adapter.format(next, this.resolvedFormat()));
+        this.onChange(next);
+    }
+    closeOverlay() {
+        this.dispose();
+    }
+    dispose() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        this.overlayOpen.set(false);
+    }
+    // Helpers
+    isOutOfBounds(date) {
+        if (this.mode() === 'time')
+            return false;
+        const min = this.min();
+        if (min && this.adapter.compareDate(date, min) < 0)
+            return true;
+        const max = this.max();
+        if (max && this.adapter.compareDate(date, max) > 0)
+            return true;
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrDatePicker, isStandalone: true, selector: "wr-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrDatePicker),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [disabled]=\"effectiveDisabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDatePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-date-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrDatePicker),
+                            multi: true,
+                        },
+                    ], template: "<wr-input-group>\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [disabled]=\"effectiveDisabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n" }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrDatePicker };
+//# sourceMappingURL=ngwr-date-picker.mjs.map