@gloww/gloww 20.0.0-beta.27 → 20.0.0-beta.28

package/fesm2022/gloww-gloww.mjs

@@ -21,13 +21,13 @@ import { MatColumnDef, MatTableDataSource, MatTable, MatHeaderCellDef, MatHeader
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatCard, MatCardContent, MatCardActions, MatCardHeader, MatCardTitle, MatCardModule } from '@angular/material/card';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import { MatError, MatFormField, MatInput, MatLabel, MatInputModule } from '@angular/material/input';
+import { MatError, MatFormField, MatInput, MatLabel, MatInputModule, MatSuffix } from '@angular/material/input';
 import * as i4 from '@ctrl/ngx-codemirror';
 import { CodemirrorModule, CodemirrorComponent } from '@ctrl/ngx-codemirror';
 import * as i1$3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule, Validators, FormControl } from '@angular/forms';
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
 import { NgxMatDatetimePickerModule, NgxMatTimepickerComponent, NgxMatNativeDateModule } from 'ngx-mat-datetime-picker-v2';
 import * as i1$4 from '@ngx-translate/core';
 import { TranslateDefaultParser } from '@ngx-translate/core';
@@ -3619,28 +3619,32 @@ class DatetimeComponent {
         this.placeHolder = null;
         this.mode = 'date';
         this.showSeconds = false;
-        this.inputValue = '';
+        this.dateControl = new FormControl(null);
+        this.hourControl = new FormControl('00', { nonNullable: true });
+        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());
+        this.hourControl.valueChanges.subscribe(() => this.emitCurrentValue());
+        this.minuteControl.valueChanges.subscribe(() => this.emitCurrentValue());
+        this.secondControl.valueChanges.subscribe(() => this.emitCurrentValue());
     }
-    get inputType() {
-        return this.mode === 'datetime' ? 'datetime-local' : 'date';
-    }
-    get inputStep() {
-        if (this.mode !== 'datetime') {
-            return null;
-        }
-        return this.showSeconds ? '1' : '60';
+    get isDateTime() {
+        return this.mode === 'datetime';
     }
     get value() {
         return this._value;
     }
     set value(val) {
-        this.updateValue(val, true);
+        this.setValueFromOutside(val, true);
     }
     writeValue(obj) {
-        this.updateValue(obj, false);
+        this.setValueFromOutside(obj, false);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3650,33 +3654,52 @@ class DatetimeComponent {
     }
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
+        const action = isDisabled ? 'disable' : 'enable';
+        this.dateControl[action]({ emitEvent: false });
+        this.hourControl[action]({ emitEvent: false });
+        this.minuteControl[action]({ emitEvent: false });
+        this.secondControl[action]({ emitEvent: false });
     }
-    onInput(rawValue) {
-        this.inputValue = rawValue;
-        if (!rawValue) {
-            this._value = null;
-            this.onChange(null);
-            return;
-        }
-        const parsed = this.parseInputValue(rawValue);
-        if (parsed) {
-            this._value = parsed;
-            this.onChange(parsed);
-        }
+    clear() {
+        this._value = null;
+        this.dateControl.setValue(null, { emitEvent: false });
+        this.hourControl.setValue('00', { emitEvent: false });
+        this.minuteControl.setValue('00', { emitEvent: false });
+        this.secondControl.setValue('00', { emitEvent: false });
+        this.onChange(null);
+        this.onTouched();
     }
-    onBlur() {
-        this.inputValue = this.formatValue(this._value);
+    markTouched() {
         this.onTouched();
     }
-    updateValue(value, emit) {
+    setValueFromOutside(value, emit) {
         const normalized = this.normalizeDateValue(value);
         this._value = normalized;
-        this.inputValue = this.formatValue(normalized);
+        this.dateControl.setValue(normalized ? new Date(normalized.getTime()) : null, { emitEvent: false });
+        this.hourControl.setValue(normalized ? normalized.getHours().toString().padStart(2, '0') : '00', { emitEvent: false });
+        this.minuteControl.setValue(normalized ? normalized.getMinutes().toString().padStart(2, '0') : '00', { emitEvent: false });
+        this.secondControl.setValue(normalized ? normalized.getSeconds().toString().padStart(2, '0') : '00', { emitEvent: false });
         if (emit) {
             this.onChange(normalized);
             this.onTouched();
         }
     }
+    emitCurrentValue() {
+        const date = this.dateControl.value;
+        if (!date) {
+            this._value = null;
+            this.onChange(null);
+            return;
+        }
+        const next = new Date(date.getTime());
+        next.setHours(this.toNumber(this.hourControl.value), this.toNumber(this.minuteControl.value), this.showSeconds ? this.toNumber(this.secondControl.value) : 0, 0);
+        this._value = next;
+        this.onChange(next);
+    }
+    toNumber(value) {
+        const parsed = Number.parseInt(value ?? '0', 10);
+        return Number.isNaN(parsed) ? 0 : parsed;
+    }
     normalizeDateValue(value) {
         if (value === undefined || value === null || value === '') {
             return null;
@@ -3702,26 +3725,6 @@ class DatetimeComponent {
         }
         return null;
     }
-    parseInputValue(rawValue) {
-        if (!rawValue) {
-            return null;
-        }
-        if (this.mode === 'date') {
-            const parsed = moment(rawValue, ['YYYY-MM-DD', 'DD/MM/YYYY', 'MM/DD/YYYY'], true);
-            return parsed.isValid() ? parsed.toDate() : this.normalizeDateValue(rawValue);
-        }
-        const parsed = moment(rawValue, ['YYYY-MM-DDTHH:mm:ss', 'YYYY-MM-DDTHH:mm', ...DatetimeComponent.DATE_FORMATS], true);
-        return parsed.isValid() ? parsed.toDate() : this.normalizeDateValue(rawValue);
-    }
-    formatValue(value) {
-        if (!value) {
-            return '';
-        }
-        if (this.mode === 'date') {
-            return moment(value).format('YYYY-MM-DD');
-        }
-        return moment(value).format(this.showSeconds ? 'YYYY-MM-DDTHH:mm:ss' : 'YYYY-MM-DDTHH:mm');
-    }
     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: [
             {
@@ -3729,7 +3732,7 @@ class DatetimeComponent {
                 multi: true,
                 useExisting: DatetimeComponent
             }
-        ], ngImport: i0, template: "<div class=\"datetime-wrapper\">\n  <mat-form-field>\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [type]=\"inputType\"\n      [step]=\"inputStep\"\n      [placeholder]=\"placeHolder\"\n      [value]=\"inputValue\"\n      [disabled]=\"isDisabled\"\n      (input)=\"onInput($any($event.target).value)\"\n      (change)=\"onInput($any($event.target).value)\"\n      (blur)=\"onBlur()\">\n  </mat-form-field>\n</div>\n", styles: [".datetime-wrapper,mat-form-field{width:100%}\n"], dependencies: [{ 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"] }] }); }
+        ], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
@@ -3739,7 +3742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             multi: true,
                             useExisting: DatetimeComponent
                         }
-                    ], imports: [MatFormField$1, MatLabel$1, MatInput], template: "<div class=\"datetime-wrapper\">\n  <mat-form-field>\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [type]=\"inputType\"\n      [step]=\"inputStep\"\n      [placeholder]=\"placeHolder\"\n      [value]=\"inputValue\"\n      [disabled]=\"isDisabled\"\n      (input)=\"onInput($any($event.target).value)\"\n      (change)=\"onInput($any($event.target).value)\"\n      (blur)=\"onBlur()\">\n  </mat-form-field>\n</div>\n", styles: [".datetime-wrapper,mat-form-field{width:100%}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {