@gloww/gloww 20.0.0-beta.32 → 20.0.0-beta.34

package/fesm2022/gloww-gloww.mjs

@@ -3626,6 +3626,10 @@ class DatetimeComponent {
         'YYYY-MM-DDTHH:mm:ss',
         'YYYY-MM-DDTHH:mm'
     ]; }
+    static { this.CLOCK_CENTER = 50; }
+    static { this.CLOCK_OUTER_RADIUS = 40; }
+    static { this.CLOCK_INNER_RADIUS = 27; }
+    static { this.CLOCK_TICK_RADIUS = 42; }
     constructor(locale) {
         this.locale = locale;
         this._value = null;
@@ -3637,7 +3641,12 @@ class DatetimeComponent {
         this.hourControl = new FormControl('00', { nonNullable: true });
         this.minuteControl = new FormControl('00', { nonNullable: true });
         this.secondControl = new FormControl('00', { nonNullable: true });
+        this.hourMarkers = this.buildHourMarkers();
+        this.minuteTicks = this.buildUnitTicks();
+        this.secondTicks = this.buildUnitTicks();
         this.isDisabled = false;
+        this.isClockOpen = false;
+        this.clockStep = 'hour';
         this.onChange = () => { };
         this.onTouched = () => { };
         this.dateControl.valueChanges.subscribe(() => this.emitCurrentValue());
@@ -3673,6 +3682,7 @@ class DatetimeComponent {
     }
     clear() {
         this._value = null;
+        this.isClockOpen = false;
         this.dateControl.setValue(null, { emitEvent: false });
         this.hourControl.setValue('00', { emitEvent: false });
         this.minuteControl.setValue('00', { emitEvent: false });
@@ -3683,37 +3693,31 @@ class DatetimeComponent {
     markTouched() {
         this.onTouched();
     }
-    get timePickerValue() {
-        const hour = this.normalizeTimePartValue(this.hourControl.value, 23, true);
-        const minute = this.normalizeTimePartValue(this.minuteControl.value, 59, true);
-        const second = this.normalizeTimePartValue(this.secondControl.value, 59, true);
-        return this.showSeconds ? `${hour}:${minute}:${second}` : `${hour}:${minute}`;
+    get timeSummary() {
+        return this.showSeconds
+            ? `${this.normalizeTimePartValue(this.hourControl.value, 23, true)}:${this.normalizeTimePartValue(this.minuteControl.value, 59, true)}:${this.normalizeTimePartValue(this.secondControl.value, 59, true)}`
+            : `${this.normalizeTimePartValue(this.hourControl.value, 23, true)}:${this.normalizeTimePartValue(this.minuteControl.value, 59, true)}`;
     }
-    openNativeTimePicker(input) {
+    get clockTitle() {
+        switch (this.clockStep) {
+            case 'hour':
+                return 'Hours';
+            case 'minute':
+                return 'Minutes';
+            default:
+                return 'Seconds';
+        }
+    }
+    openClock() {
         if (this.isDisabled) {
             return;
         }
-        const picker = input;
-        if (typeof picker.showPicker === 'function') {
-            picker.showPicker();
-        }
-        else {
-            picker.focus();
-            picker.click();
-        }
+        this.isClockOpen = true;
+        this.clockStep = 'hour';
         this.onTouched();
     }
-    onNativeTimeSelected(value) {
-        if (!value) {
-            return;
-        }
-        const parts = value.split(':');
-        this.hourControl.setValue(this.normalizeTimePartValue(parts[0], 23, true), { emitEvent: false });
-        this.minuteControl.setValue(this.normalizeTimePartValue(parts[1], 59, true), { emitEvent: false });
-        if (this.showSeconds) {
-            this.secondControl.setValue(this.normalizeTimePartValue(parts[2], 59, true), { emitEvent: false });
-        }
-        this.emitCurrentValue();
+    closeClock() {
+        this.isClockOpen = false;
         this.onTouched();
     }
     onTimePartInput(part) {
@@ -3729,6 +3733,64 @@ class DatetimeComponent {
         this.emitCurrentValue();
         this.onTouched();
     }
+    selectClockHour(value) {
+        this.hourControl.setValue(value.toString().padStart(2, '0'), { emitEvent: false });
+        this.emitCurrentValue();
+        this.clockStep = 'minute';
+        this.onTouched();
+    }
+    selectClockMinute(value) {
+        this.minuteControl.setValue(value.toString().padStart(2, '0'), { emitEvent: false });
+        this.emitCurrentValue();
+        if (this.showSeconds) {
+            this.clockStep = 'second';
+        }
+        else {
+            this.closeClock();
+        }
+        this.onTouched();
+    }
+    selectClockSecond(value) {
+        this.secondControl.setValue(value.toString().padStart(2, '0'), { emitEvent: false });
+        this.emitCurrentValue();
+        this.closeClock();
+        this.onTouched();
+    }
+    goToClockStep(step) {
+        this.clockStep = step;
+    }
+    onClockFaceClick(event) {
+        if (this.clockStep === 'hour') {
+            return;
+        }
+        const target = event.currentTarget;
+        if (!target) {
+            return;
+        }
+        const rect = target.getBoundingClientRect();
+        const centerX = rect.left + (rect.width / 2);
+        const centerY = rect.top + (rect.height / 2);
+        const dx = event.clientX - centerX;
+        const dy = event.clientY - centerY;
+        const angle = Math.atan2(dy, dx) + (Math.PI / 2);
+        const normalized = angle < 0 ? angle + (Math.PI * 2) : angle;
+        const rawValue = Math.round((normalized / (Math.PI * 2)) * 60) % 60;
+        const snappedValue = Math.round(rawValue / 5) * 5 % 60;
+        if (this.clockStep === 'minute') {
+            this.selectClockMinute(snappedValue);
+            return;
+        }
+        this.selectClockSecond(snappedValue);
+    }
+    isHourSelected(value) {
+        return this.toNumber(this.hourControl.value) === value;
+    }
+    isMinuteSelected(value) {
+        return this.toNumber(this.minuteControl.value) === value;
+    }
+    isSecondSelected(value) {
+        return this.toNumber(this.secondControl.value) === value;
+    }
     setValueFromOutside(value, emit) {
         const normalized = this.normalizeDateValue(value);
         this._value = normalized;
@@ -3804,6 +3866,35 @@ class DatetimeComponent {
         }
         return null;
     }
+    buildHourMarkers() {
+        return Array.from({ length: 24 }, (_, index) => this.buildClockMarker(index, index < 12 ? DatetimeComponent.CLOCK_OUTER_RADIUS : DatetimeComponent.CLOCK_INNER_RADIUS, index.toString().padStart(2, '0')));
+    }
+    buildUnitTicks() {
+        return Array.from({ length: 12 }, (_, index) => {
+            const value = index * 5;
+            const angle = (index / 12) * (Math.PI * 2) - (Math.PI / 2);
+            const x = DatetimeComponent.CLOCK_CENTER + Math.cos(angle) * DatetimeComponent.CLOCK_TICK_RADIUS;
+            const y = DatetimeComponent.CLOCK_CENTER + Math.sin(angle) * DatetimeComponent.CLOCK_TICK_RADIUS;
+            return {
+                value,
+                label: value.toString().padStart(2, '0'),
+                left: `${x}%`,
+                top: `${y}%`,
+                rotate: `${angle + (Math.PI / 2)}rad`
+            };
+        });
+    }
+    buildClockMarker(index, radius, label) {
+        const angle = ((index % 12) / 12) * (Math.PI * 2) - (Math.PI / 2);
+        const x = DatetimeComponent.CLOCK_CENTER + Math.cos(angle) * radius;
+        const y = DatetimeComponent.CLOCK_CENTER + Math.sin(angle) * radius;
+        return {
+            value: index,
+            label,
+            left: `${x}%`,
+            top: `${y}%`
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, deps: [{ token: MAT_DATE_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatetimeComponent, isStandalone: true, selector: "gloww-datetime", inputs: { _value: ["value", "_value"], display: "display", placeHolder: "placeHolder", mode: "mode", showSeconds: "showSeconds" }, providers: [
             {
@@ -3811,7 +3902,7 @@ class DatetimeComponent {
                 multi: true,
                 useExisting: forwardRef(() => DatetimeComponent)
             }
-        ], ngImport: i0, template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n  <mat-form-field class=\"date-field\">\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeHolder\"\n      [formControl]=\"dateControl\"\n      [disabled]=\"isDisabled\"\n      (dateChange)=\"markTouched()\"\n      (blur)=\"markTouched()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  @if (isDateTime) {\n    <div class=\"middle-actions\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Clear date and time\"\n        aria-label=\"Clear date and time\"\n        (click)=\"clear()\">\n        <mat-icon>ink_eraser</mat-icon>\n      </button>\n\n      <input\n        #nativeTimePicker\n        class=\"native-time-picker\"\n        type=\"time\"\n        [step]=\"showSeconds ? 1 : 60\"\n        [value]=\"timePickerValue\"\n        [disabled]=\"isDisabled\"\n        (change)=\"onNativeTimeSelected(nativeTimePicker.value)\">\n\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Open time picker\"\n        aria-label=\"Open time picker\"\n        (click)=\"openNativeTimePicker(nativeTimePicker)\">\n        <mat-icon>schedule</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"23\"\n          inputmode=\"numeric\"\n          [formControl]=\"hourControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('hour')\"\n          (blur)=\"onTimePartBlur('hour')\">\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          inputmode=\"numeric\"\n          [formControl]=\"minuteControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('minute')\"\n          (blur)=\"onTimePartBlur('minute')\">\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            inputmode=\"numeric\"\n            [formControl]=\"secondControl\"\n            [disabled]=\"isDisabled\"\n            (input)=\"onTimePartInput('second')\"\n            (blur)=\"onTimePartBlur('second')\">\n        </mat-form-field>\n      }\n    </div>\n  }\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.native-time-picker{position:absolute;pointer-events:none;opacity:0;width:0;height:0}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+        ], ngImport: i0, template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n  <mat-form-field class=\"date-field\">\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeHolder\"\n      [formControl]=\"dateControl\"\n      [disabled]=\"isDisabled\"\n      (dateChange)=\"markTouched()\"\n      (blur)=\"markTouched()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  @if (isDateTime) {\n    <div class=\"middle-actions\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Clear date and time\"\n        aria-label=\"Clear date and time\"\n        (click)=\"clear()\">\n        <i class=\"fal fa-eraser\"></i>\n      </button>\n\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Open time clock\"\n        aria-label=\"Open time clock\"\n        (click)=\"openClock()\">\n        <i class=\"fal fa-clock\"></i>\n      </button>\n    </div>\n\n    <div class=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"23\"\n          inputmode=\"numeric\"\n          [formControl]=\"hourControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('hour')\"\n          (blur)=\"onTimePartBlur('hour')\">\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          inputmode=\"numeric\"\n          [formControl]=\"minuteControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('minute')\"\n          (blur)=\"onTimePartBlur('minute')\">\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            inputmode=\"numeric\"\n            [formControl]=\"secondControl\"\n            [disabled]=\"isDisabled\"\n            (input)=\"onTimePartInput('second')\"\n            (blur)=\"onTimePartBlur('second')\">\n        </mat-form-field>\n      }\n    </div>\n\n    @if (isClockOpen) {\n      <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n      <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"clock-panel\">\n        <div class=\"clock-panel-header\">\n          <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n          <button\n            mat-button\n            type=\"button\"\n            class=\"clock-close\"\n            [disabled]=\"isDisabled\"\n            (click)=\"closeClock()\">\n            Close\n          </button>\n        </div>\n\n        <div class=\"clock-summary\">\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n            {{ hourControl.value || '00' }}\n          </button>\n          <span>:</span>\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n            {{ minuteControl.value || '00' }}\n          </button>\n          @if (showSeconds) {\n            <span>:</span>\n            <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n              {{ secondControl.value || '00' }}\n            </button>\n          }\n        </div>\n\n        <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" (click)=\"onClockFaceClick($event)\">\n          @if (clockStep === 'hour') {\n            @for (marker of hourMarkers; track marker.value) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"clock-marker\"\n                [class.selected]=\"isHourSelected(marker.value)\"\n                [class.inner-ring]=\"marker.value >= 12\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockHour(marker.value)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep === 'minute') {\n            @for (tick of minuteTicks; track tick.value) {\n              <div\n                class=\"clock-tick\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.left\"\n                [style.top]=\"tick.top\"\n                [style.rotate]=\"tick.rotate\">\n              </div>\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.left\"\n                [style.top]=\"tick.top\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            @for (tick of secondTicks; track tick.value) {\n              <div\n                class=\"clock-tick\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.left\"\n                [style.top]=\"tick.top\"\n                [style.rotate]=\"tick.rotate\">\n              </div>\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.left\"\n                [style.top]=\"tick.top\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          <div class=\"clock-center-dot\"></div>\n        </div>\n\n        <div class=\"clock-help\">\n          @if (clockStep === 'hour') {\n            <span>Outer ring 00-11, inner ring 12-23.</span>\n          }\n          @if (clockStep === 'minute') {\n            <span>Click the dial. The nearest 5-minute mark will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest 5-second mark will be selected.</span>\n          }\n        </div>\n\n        <div class=\"clock-footer\">\n          <span>{{ timeSummary }}</span>\n        </div>\n      </div>\n      </div>\n    }\n  }\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-marker{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;min-width:38px;padding:0;border-radius:50%;font-size:.72rem;line-height:1}.clock-marker.inner-ring{width:34px;height:34px;min-width:34px;font-size:.68rem}.clock-unit-marker{width:24px;height:24px;min-width:24px;font-size:.58rem;color:transparent}.clock-unit-marker.major{width:34px;height:34px;min-width:34px;font-size:.68rem;color:inherit}.clock-marker.selected{background:#1976d2;color:#fff}.clock-tick{position:absolute;transform:translate(-50%,-50%);width:2px;height:16px;border-radius:999px;background:#00000057;transform-origin:center center}.clock-tick.selected{width:4px;height:22px;background:#1976d2}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
@@ -3821,7 +3912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => DatetimeComponent)
                         }
-                    ], imports: [ReactiveFormsModule, MatFormField$1, MatLabel$1, MatInput, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatSuffix, MatButton, MatIcon], template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n  <mat-form-field class=\"date-field\">\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeHolder\"\n      [formControl]=\"dateControl\"\n      [disabled]=\"isDisabled\"\n      (dateChange)=\"markTouched()\"\n      (blur)=\"markTouched()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  @if (isDateTime) {\n    <div class=\"middle-actions\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Clear date and time\"\n        aria-label=\"Clear date and time\"\n        (click)=\"clear()\">\n        <mat-icon>ink_eraser</mat-icon>\n      </button>\n\n      <input\n        #nativeTimePicker\n        class=\"native-time-picker\"\n        type=\"time\"\n        [step]=\"showSeconds ? 1 : 60\"\n        [value]=\"timePickerValue\"\n        [disabled]=\"isDisabled\"\n        (change)=\"onNativeTimeSelected(nativeTimePicker.value)\">\n\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Open time picker\"\n        aria-label=\"Open time picker\"\n        (click)=\"openNativeTimePicker(nativeTimePicker)\">\n        <mat-icon>schedule</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"23\"\n          inputmode=\"numeric\"\n          [formControl]=\"hourControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('hour')\"\n          (blur)=\"onTimePartBlur('hour')\">\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          inputmode=\"numeric\"\n          [formControl]=\"minuteControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('minute')\"\n          (blur)=\"onTimePartBlur('minute')\">\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            inputmode=\"numeric\"\n            [formControl]=\"secondControl\"\n            [disabled]=\"isDisabled\"\n            (input)=\"onTimePartInput('second')\"\n            (blur)=\"onTimePartBlur('second')\">\n        </mat-form-field>\n      }\n    </div>\n  }\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.native-time-picker{position:absolute;pointer-events:none;opacity:0;width:0;height:0}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}}\n"] }]
+                    ], imports: [ReactiveFormsModule, MatFormField$1, MatLabel$1, MatInput, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatSuffix, MatButton], template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n  <mat-form-field class=\"date-field\">\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeHolder\"\n      [formControl]=\"dateControl\"\n      [disabled]=\"isDisabled\"\n      (dateChange)=\"markTouched()\"\n      (blur)=\"markTouched()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  @if (isDateTime) {\n    <div class=\"middle-actions\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Clear date and time\"\n        aria-label=\"Clear date and time\"\n        (click)=\"clear()\">\n        <i class=\"fal fa-eraser\"></i>\n      </button>\n\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Open time clock\"\n        aria-label=\"Open time clock\"\n        (click)=\"openClock()\">\n        <i class=\"fal fa-clock\"></i>\n      </button>\n    </div>\n\n    <div class=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"23\"\n          inputmode=\"numeric\"\n          [formControl]=\"hourControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('hour')\"\n          (blur)=\"onTimePartBlur('hour')\">\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          inputmode=\"numeric\"\n          [formControl]=\"minuteControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('minute')\"\n          (blur)=\"onTimePartBlur('minute')\">\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            inputmode=\"numeric\"\n            [formControl]=\"secondControl\"\n            [disabled]=\"isDisabled\"\n            (input)=\"onTimePartInput('second')\"\n            (blur)=\"onTimePartBlur('second')\">\n        </mat-form-field>\n      }\n    </div>\n\n    @if (isClockOpen) {\n      <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n      <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"clock-panel\">\n        <div class=\"clock-panel-header\">\n          <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n          <button\n            mat-button\n            type=\"button\"\n            class=\"clock-close\"\n            [disabled]=\"isDisabled\"\n            (click)=\"closeClock()\">\n            Close\n          </button>\n        </div>\n\n        <div class=\"clock-summary\">\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n            {{ hourControl.value || '00' }}\n          </button>\n          <span>:</span>\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n            {{ minuteControl.value || '00' }}\n          </button>\n          @if (showSeconds) {\n            <span>:</span>\n            <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n              {{ secondControl.value || '00' }}\n            </button>\n          }\n        </div>\n\n        <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" (click)=\"onClockFaceClick($event)\">\n          @if (clockStep === 'hour') {\n            @for (marker of hourMarkers; track marker.value) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"clock-marker\"\n                [class.selected]=\"isHourSelected(marker.value)\"\n                [class.inner-ring]=\"marker.value >= 12\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockHour(marker.value)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep === 'minute') {\n            @for (tick of minuteTicks; track tick.value) {\n              <div\n                class=\"clock-tick\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.left\"\n                [style.top]=\"tick.top\"\n                [style.rotate]=\"tick.rotate\">\n              </div>\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.left\"\n                [style.top]=\"tick.top\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            @for (tick of secondTicks; track tick.value) {\n              <div\n                class=\"clock-tick\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.left\"\n                [style.top]=\"tick.top\"\n                [style.rotate]=\"tick.rotate\">\n              </div>\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.left\"\n                [style.top]=\"tick.top\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          <div class=\"clock-center-dot\"></div>\n        </div>\n\n        <div class=\"clock-help\">\n          @if (clockStep === 'hour') {\n            <span>Outer ring 00-11, inner ring 12-23.</span>\n          }\n          @if (clockStep === 'minute') {\n            <span>Click the dial. The nearest 5-minute mark will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest 5-second mark will be selected.</span>\n          }\n        </div>\n\n        <div class=\"clock-footer\">\n          <span>{{ timeSummary }}</span>\n        </div>\n      </div>\n      </div>\n    }\n  }\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-marker{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;min-width:38px;padding:0;border-radius:50%;font-size:.72rem;line-height:1}.clock-marker.inner-ring{width:34px;height:34px;min-width:34px;font-size:.68rem}.clock-unit-marker{width:24px;height:24px;min-width:24px;font-size:.58rem;color:transparent}.clock-unit-marker.major{width:34px;height:34px;min-width:34px;font-size:.68rem;color:inherit}.clock-marker.selected{background:#1976d2;color:#fff}.clock-tick{position:absolute;transform:translate(-50%,-50%);width:2px;height:16px;border-radius:999px;background:#00000057;transform-origin:center center}.clock-tick.selected{width:4px;height:22px;background:#1976d2}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {