@gloww/gloww 20.0.0-beta.36 → 20.0.0-beta.38

package/fesm2022/gloww-gloww.mjs

@@ -3629,7 +3629,9 @@ class DatetimeComponent {
     static { this.CLOCK_CENTER = 50; }
     static { this.CLOCK_OUTER_RADIUS = 40; }
     static { this.CLOCK_INNER_RADIUS = 27; }
-    static { this.CLOCK_TICK_RADIUS = 42; }
+    static { this.CLOCK_TICK_OUTER_RADIUS = 48; }
+    static { this.CLOCK_TICK_INNER_RADIUS = 41; }
+    static { this.CLOCK_TICK_LABEL_RADIUS = 34; }
     constructor(locale) {
         this.locale = locale;
         this._value = null;
@@ -3759,6 +3761,15 @@ class DatetimeComponent {
         this.closeClock();
         this.onTouched();
     }
+    selectClockTick(value, event) {
+        if (this.clockStep === 'minute') {
+            this.selectClockMinute(value, event);
+            return;
+        }
+        if (this.clockStep === 'second') {
+            this.selectClockSecond(value, event);
+        }
+    }
     goToClockStep(step) {
         this.clockStep = step;
     }
@@ -3805,6 +3816,28 @@ class DatetimeComponent {
         const second = this.toNumber(this.secondControl.value) % 60;
         return `translate(-50%, -100%) rotate(${(second / 60) * 360}deg)`;
     }
+    get clockHandHeight() {
+        if (this.clockStep === 'hour') {
+            const hour = this.toNumber(this.hourControl.value);
+            return hour < 12 ? '38%' : '25%';
+        }
+        return '45%';
+    }
+    get hourHandTransform() {
+        const hour = (this.toNumber(this.hourControl.value) % 12) + (this.toNumber(this.minuteControl.value) / 60);
+        return `translate(-50%, -100%) rotate(${(hour / 12) * 360}deg)`;
+    }
+    get hourHandHeight() {
+        const hour = this.toNumber(this.hourControl.value);
+        return hour < 12 ? '38%' : '25%';
+    }
+    get minuteHandTransform() {
+        const minute = (this.toNumber(this.minuteControl.value) % 60) + (this.toNumber(this.secondControl.value) / 60);
+        return `translate(-50%, -100%) rotate(${(minute / 60) * 360}deg)`;
+    }
+    get minuteHandHeight() {
+        return '48%';
+    }
     setValueFromOutside(value, emit) {
         const normalized = this.normalizeDateValue(value);
         this._value = normalized;
@@ -3887,14 +3920,21 @@ class DatetimeComponent {
         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;
+            const x1 = DatetimeComponent.CLOCK_CENTER + Math.cos(angle) * DatetimeComponent.CLOCK_TICK_INNER_RADIUS;
+            const y1 = DatetimeComponent.CLOCK_CENTER + Math.sin(angle) * DatetimeComponent.CLOCK_TICK_INNER_RADIUS;
+            const x2 = DatetimeComponent.CLOCK_CENTER + Math.cos(angle) * DatetimeComponent.CLOCK_TICK_OUTER_RADIUS;
+            const y2 = DatetimeComponent.CLOCK_CENTER + Math.sin(angle) * DatetimeComponent.CLOCK_TICK_OUTER_RADIUS;
+            const labelX = DatetimeComponent.CLOCK_CENTER + Math.cos(angle) * DatetimeComponent.CLOCK_TICK_LABEL_RADIUS;
+            const labelY = DatetimeComponent.CLOCK_CENTER + Math.sin(angle) * DatetimeComponent.CLOCK_TICK_LABEL_RADIUS;
             return {
                 value,
                 label: value.toString().padStart(2, '0'),
-                left: `${x}%`,
-                top: `${y}%`,
-                rotate: `${angle + (Math.PI / 2)}rad`
+                x1: `${x1}%`,
+                y1: `${y1}%`,
+                x2: `${x2}%`,
+                y2: `${y2}%`,
+                labelLeft: `${labelX}%`,
+                labelTop: `${labelY}%`,
             };
         });
     }
@@ -3916,7 +3956,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        <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          <div class=\"clock-hand\" [style.transform]=\"clockHandTransform\"></div>\n\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, $event)\">\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 minute will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest second 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-hand{position:absolute;top:50%;left:50%;width:2px;height:38%;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.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;z-index:2}.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"] }] }); }
+        ], 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'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n          <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n          <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n          @if (clockStep === 'hour') {\n            @for (marker of hourMarkers; track marker.value) {\n              <button\n                type=\"button\"\n                class=\"clock-hour-label\"\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, $event)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep === 'minute') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of minuteTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isMinuteSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of minuteTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of secondTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isSecondSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of secondTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\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 minute will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest second 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%;overflow:hidden;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-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:2px}.clock-minute-hand{background:#1976d2;width:3px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.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;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.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,
@@ -3926,7 +3966,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], 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          <div class=\"clock-hand\" [style.transform]=\"clockHandTransform\"></div>\n\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, $event)\">\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 minute will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest second 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-hand{position:absolute;top:50%;left:50%;width:2px;height:38%;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.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;z-index:2}.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"] }]
+                    ], 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'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n          <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n          <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n          @if (clockStep === 'hour') {\n            @for (marker of hourMarkers; track marker.value) {\n              <button\n                type=\"button\"\n                class=\"clock-hour-label\"\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, $event)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep === 'minute') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of minuteTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isMinuteSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of minuteTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of secondTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isSecondSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of secondTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\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 minute will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest second 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%;overflow:hidden;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-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:2px}.clock-minute-hand{background:#1976d2;width:3px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.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;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.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
                 }, {