@gloww/gloww 20.0.0-beta.31 → 20.0.0-beta.33

package/fesm2022/gloww-gloww.mjs

@@ -3626,6 +3626,9 @@ 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; }
     constructor(locale) {
         this.locale = locale;
         this._value = null;
@@ -3637,10 +3640,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.minuteMarkers = this.buildUnitMarkers();
+        this.secondMarkers = this.buildUnitMarkers();
         this.isDisabled = false;
-        this.hours = Array.from({ length: 24 }, (_, value) => value.toString().padStart(2, '0'));
-        this.minutes = Array.from({ length: 60 }, (_, value) => value.toString().padStart(2, '0'));
-        this.seconds = Array.from({ length: 60 }, (_, value) => value.toString().padStart(2, '0'));
+        this.isClockOpen = false;
+        this.clockStep = 'hour';
         this.onChange = () => { };
         this.onTouched = () => { };
         this.dateControl.valueChanges.subscribe(() => this.emitCurrentValue());
@@ -3676,6 +3681,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 });
@@ -3686,6 +3692,81 @@ class DatetimeComponent {
     markTouched() {
         this.onTouched();
     }
+    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)}`;
+    }
+    get clockTitle() {
+        switch (this.clockStep) {
+            case 'hour':
+                return 'Hours';
+            case 'minute':
+                return 'Minutes';
+            default:
+                return 'Seconds';
+        }
+    }
+    openClock() {
+        if (this.isDisabled) {
+            return;
+        }
+        this.isClockOpen = true;
+        this.clockStep = 'hour';
+        this.onTouched();
+    }
+    closeClock() {
+        this.isClockOpen = false;
+        this.onTouched();
+    }
+    onTimePartInput(part) {
+        const control = this.getTimeControl(part);
+        const max = this.getTimePartMax(part);
+        control.setValue(this.normalizeTimePartValue(control.value, max, false), { emitEvent: false });
+        this.emitCurrentValue();
+    }
+    onTimePartBlur(part) {
+        const control = this.getTimeControl(part);
+        const max = this.getTimePartMax(part);
+        control.setValue(this.normalizeTimePartValue(control.value, max, true), { emitEvent: false });
+        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;
+    }
+    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;
@@ -3714,6 +3795,28 @@ class DatetimeComponent {
         const parsed = Number.parseInt(value ?? '0', 10);
         return Number.isNaN(parsed) ? 0 : parsed;
     }
+    getTimeControl(part) {
+        switch (part) {
+            case 'hour':
+                return this.hourControl;
+            case 'minute':
+                return this.minuteControl;
+            default:
+                return this.secondControl;
+        }
+    }
+    getTimePartMax(part) {
+        return part === 'hour' ? 23 : 59;
+    }
+    normalizeTimePartValue(value, max, pad) {
+        const digits = `${value ?? ''}`.replace(/\D/g, '').slice(-2);
+        if (!digits) {
+            return pad ? '00' : '';
+        }
+        const parsed = Number.parseInt(digits, 10);
+        const clamped = Number.isNaN(parsed) ? 0 : Math.min(max, Math.max(0, parsed));
+        return pad || digits.length > 1 ? clamped.toString().padStart(2, '0') : clamped.toString();
+    }
     normalizeDateValue(value) {
         if (value === undefined || value === null || value === '') {
             return null;
@@ -3739,6 +3842,23 @@ 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')));
+    }
+    buildUnitMarkers() {
+        return Array.from({ length: 60 }, (_, index) => this.buildClockMarker(index, DatetimeComponent.CLOCK_OUTER_RADIUS, index % 5 === 0 ? index.toString().padStart(2, '0') : ''));
+    }
+    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: [
             {
@@ -3746,7 +3866,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=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <mat-select [formControl]=\"hourControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n          @for (hour of hours; track hour) {\n            <mat-option [value]=\"hour\">{{ hour }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <mat-select [formControl]=\"minuteControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n          @for (minute of minutes; track minute) {\n            <mat-option [value]=\"minute\">{{ minute }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <mat-select [formControl]=\"secondControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n            @for (second of seconds; track second) {\n              <mat-option [value]=\"second\">{{ second }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      }\n    </div>\n  }\n\n  <div class=\"actions-row\">\n    <button mat-button type=\"button\" (click)=\"clear()\" [disabled]=\"isDisabled\">Clear</button>\n  </div>\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.actions-row{display:flex;justify-content:flex-end}@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) repeat(2,minmax(84px,96px)) auto}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) repeat(3,minmax(84px,96px)) auto}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .actions-row{align-self:start;justify-content:flex-start;padding-top:4px}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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-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\">\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 (marker of minuteMarkers; track marker.value) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"clock-marker clock-unit-marker\"\n                [class.selected]=\"isMinuteSelected(marker.value)\"\n                [class.major]=\"!!marker.label\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockMinute(marker.value)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            @for (marker of secondMarkers; track marker.value) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"clock-marker clock-unit-marker\"\n                [class.selected]=\"isSecondSelected(marker.value)\"\n                [class.major]=\"!!marker.label\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockSecond(marker.value)\">\n                {{ marker.label }}\n              </button>\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>Choose the minute.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Choose the second.</span>\n          }\n        </div>\n\n        <div class=\"clock-footer\">\n          <span>{{ timeSummary }}</span>\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-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff}.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-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-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,
@@ -3756,7 +3876,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, MatSelect, MatOption, 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=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <mat-select [formControl]=\"hourControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n          @for (hour of hours; track hour) {\n            <mat-option [value]=\"hour\">{{ hour }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <mat-select [formControl]=\"minuteControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n          @for (minute of minutes; track minute) {\n            <mat-option [value]=\"minute\">{{ minute }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <mat-select [formControl]=\"secondControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n            @for (second of seconds; track second) {\n              <mat-option [value]=\"second\">{{ second }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      }\n    </div>\n  }\n\n  <div class=\"actions-row\">\n    <button mat-button type=\"button\" (click)=\"clear()\" [disabled]=\"isDisabled\">Clear</button>\n  </div>\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.actions-row{display:flex;justify-content:flex-end}@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) repeat(2,minmax(84px,96px)) auto}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) repeat(3,minmax(84px,96px)) auto}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .actions-row{align-self:start;justify-content:flex-start;padding-top:4px}}\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-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\">\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 (marker of minuteMarkers; track marker.value) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"clock-marker clock-unit-marker\"\n                [class.selected]=\"isMinuteSelected(marker.value)\"\n                [class.major]=\"!!marker.label\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockMinute(marker.value)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            @for (marker of secondMarkers; track marker.value) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"clock-marker clock-unit-marker\"\n                [class.selected]=\"isSecondSelected(marker.value)\"\n                [class.major]=\"!!marker.label\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockSecond(marker.value)\">\n                {{ marker.label }}\n              </button>\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>Choose the minute.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Choose the second.</span>\n          }\n        </div>\n\n        <div class=\"clock-footer\">\n          <span>{{ timeSummary }}</span>\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-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff}.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-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-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
                 }, {