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

package/fesm2022/gloww-gloww.mjs

@@ -3638,9 +3638,6 @@ class DatetimeComponent {
         this.minuteControl = new FormControl('00', { nonNullable: true });
         this.secondControl = new FormControl('00', { nonNullable: true });
         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.onChange = () => { };
         this.onTouched = () => { };
         this.dateControl.valueChanges.subscribe(() => this.emitCurrentValue());
@@ -3686,6 +3683,52 @@ 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}`;
+    }
+    openNativeTimePicker(input) {
+        if (this.isDisabled) {
+            return;
+        }
+        const picker = input;
+        if (typeof picker.showPicker === 'function') {
+            picker.showPicker();
+        }
+        else {
+            picker.focus();
+            picker.click();
+        }
+        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();
+        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();
+    }
     setValueFromOutside(value, emit) {
         const normalized = this.normalizeDateValue(value);
         this._value = normalized;
@@ -3699,7 +3742,7 @@ class DatetimeComponent {
         }
     }
     emitCurrentValue() {
-        const date = this.dateControl.value;
+        const date = this.normalizeDateValue(this.dateControl.value);
         if (!date) {
             this._value = null;
             this.onChange(null);
@@ -3714,6 +3757,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;
@@ -3746,7 +3811,7 @@ class DatetimeComponent {
                 multi: true,
                 useExisting: forwardRef(() => DatetimeComponent)
             }
-        ], ngImport: i0, template: "<div class=\"datetime-wrapper\">\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))}}\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        <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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
@@ -3756,7 +3821,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\">\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))}}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {