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

package/fesm2022/gloww-gloww.mjs

@@ -10,7 +10,6 @@ import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, Ma
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import * as i2 from '@angular/router';
 import { NavigationEnd, RouterLink, RouterModule } from '@angular/router';
-import * as i2$1 from '@angular/material/button';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import * as i1$1 from '@angular/platform-browser';
 import * as i5 from '@kolkov/angular-editor';
@@ -22,15 +21,14 @@ 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, MatSuffix } from '@angular/material/input';
+import { MatError, MatFormField, MatInput, MatLabel, MatInputModule } 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, FormControl } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
-import * as i3$1 from 'ngx-mat-datetime-picker-v2';
-import { NgxMatDatetimePickerModule, NgxMatNativeDateModule, NgxMatTimepickerComponent } from 'ngx-mat-datetime-picker-v2';
+import { 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';
 import { MatSelect, MatOption, MatSelectModule } from '@angular/material/select';
@@ -41,7 +39,7 @@ import * as parserTypescript from 'prettier/plugins/typescript';
 import * as parserBabel from 'prettier/plugins/babel';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormField as MatFormField$1, MatLabel as MatLabel$1 } from '@angular/material/form-field';
 import { jwtDecode } from 'jwt-decode';
 import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import FileSaver from 'file-saver';
@@ -3620,32 +3618,29 @@ class DatetimeComponent {
         this.display = null;
         this.placeHolder = null;
         this.mode = 'date';
-        this.showSpinners = true;
         this.showSeconds = false;
-        this.disableMinute = false;
-        this.touchUi = false;
-        this.dateControl = new FormControl(null);
+        this.inputValue = '';
+        this.isDisabled = false;
         this.onChange = () => { };
         this.onTouched = () => { };
-        this.dateControl.valueChanges.subscribe(value => {
-            const normalized = this.normalizeDateValue(value);
-            if (value !== normalized) {
-                this.dateControl.setValue(normalized, { emitEvent: false });
-            }
-            this._value = normalized;
-            this.onChange(normalized);
-        });
+    }
+    get inputType() {
+        return this.mode === 'datetime' ? 'datetime-local' : 'date';
+    }
+    get inputStep() {
+        if (this.mode !== 'datetime') {
+            return null;
+        }
+        return this.showSeconds ? '1' : '60';
     }
     get value() {
         return this._value;
     }
     set value(val) {
-        this.updateValue(val);
+        this.updateValue(val, true);
     }
     writeValue(obj) {
-        const normalized = this.normalizeDateValue(obj);
-        this._value = normalized;
-        this.dateControl.setValue(normalized, { emitEvent: false });
+        this.updateValue(obj, false);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3654,37 +3649,40 @@ class DatetimeComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.dateControl.disable({ emitEvent: false });
-        }
-        else {
-            this.dateControl.enable({ emitEvent: false });
-        }
+        this.isDisabled = isDisabled;
     }
-    get resolvedCancelLabel() {
-        if (this.cancelLabel) {
-            return this.cancelLabel;
+    onInput(rawValue) {
+        this.inputValue = rawValue;
+        if (!rawValue) {
+            this._value = null;
+            this.onChange(null);
+            return;
         }
-        return this.isFrenchLocale ? 'Annuler' : 'Cancel';
-    }
-    get resolvedApplyLabel() {
-        if (this.applyLabel) {
-            return this.applyLabel;
+        const parsed = this.parseInputValue(rawValue);
+        if (parsed) {
+            this._value = parsed;
+            this.onChange(parsed);
         }
-        return 'OK';
     }
-    onDateInput() {
-        this.markTouched();
+    onBlur() {
+        this.inputValue = this.formatValue(this._value);
+        this.onTouched();
     }
-    onDateChange() {
-        this.markTouched();
+    updateValue(value, emit) {
+        const normalized = this.normalizeDateValue(value);
+        this._value = normalized;
+        this.inputValue = this.formatValue(normalized);
+        if (emit) {
+            this.onChange(normalized);
+            this.onTouched();
+        }
     }
     normalizeDateValue(value) {
         if (value === undefined || value === null || value === '') {
             return null;
         }
         if (value instanceof Date) {
-            return Number.isNaN(value.getTime()) ? null : value;
+            return Number.isNaN(value.getTime()) ? null : new Date(value.getTime());
         }
         if (moment.isMoment(value)) {
             const date = value.toDate();
@@ -3704,27 +3702,34 @@ class DatetimeComponent {
         }
         return null;
     }
-    updateValue(value) {
-        const normalized = this.normalizeDateValue(value);
-        this._value = normalized;
-        this.dateControl.setValue(normalized, { emitEvent: false });
-        this.onChange(normalized);
-        this.markTouched();
-    }
-    markTouched() {
-        this.onTouched();
+    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);
     }
-    get isFrenchLocale() {
-        return (this.locale ?? '').toLowerCase().startsWith('fr');
+    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", showSpinners: "showSpinners", showSeconds: "showSeconds", disableMinute: "disableMinute", touchUi: "touchUi", cancelLabel: "cancelLabel", applyLabel: "applyLabel" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: DatetimeComponent
             }
-        ], ngImport: i0, template: "<div style=\"width:100%\">\n  @if (mode==='date') {\n    <mat-form-field>\n      <mat-label>{{display}}</mat-label>\n      <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeHolder\" [formControl]=\"dateControl\" (dateInput)=\"onDateInput()\" (dateChange)=\"onDateChange()\" (blur)=\"markTouched()\">\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  }\n\n  @if (mode==='datetime') {\n    <mat-form-field>\n      <mat-label>{{display}}</mat-label>\n      <input matInput [ngxMatDatetimePicker]=\"pickerDT\" [placeholder]=\"placeHolder\" [formControl]=\"dateControl\" (dateInput)=\"onDateInput()\" (dateChange)=\"onDateChange()\" (blur)=\"markTouched()\">\n      <mat-datepicker-toggle matSuffix [for]=\"$any(pickerDT)\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #pickerDT [showSpinners]=\"showSpinners\" [showSeconds]=\"showSeconds\" [touchUi]=\"touchUi\" [disableMinute]=\"disableMinute\">\n        <ngx-mat-datepicker-actions>\n          <button mat-button ngxMatDatepickerCancel>{{ resolvedCancelLabel }}</button>\n          <button mat-raised-button color=\"primary\" ngxMatDatepickerApply>{{ resolvedApplyLabel }}</button>\n        </ngx-mat-datepicker-actions>\n      </ngx-mat-datetime-picker>\n    </mat-form-field>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, 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: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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"] }, { kind: "ngmodule", type: NgxMatDatetimePickerModule }, { kind: "component", type: i3$1.NgxMatDatetimepicker, selector: "ngx-mat-datetime-picker", exportAs: ["ngxMatDatetimePicker"] }, { kind: "directive", type: i3$1.NgxMatDatepickerInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "min", "max", "matDatepickerFilter"], exportAs: ["ngxMatDatepickerInput"] }, { kind: "component", type: i3$1.NgxMatDatepickerActions, selector: "ngx-mat-datepicker-actions, ngx-mat-date-range-picker-actions" }, { kind: "directive", type: i3$1.NgxMatDatepickerCancel, selector: "[ngxMatDatepickerCancel], [ngxMatDateRangePickerCancel]" }, { kind: "directive", type: i3$1.NgxMatDatepickerApply, selector: "[ngxMatDatepickerApply], [ngxMatDateRangePickerApply]" }, { kind: "ngmodule", type: NgxMatNativeDateModule }] }); }
+        ], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
@@ -3734,7 +3739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             multi: true,
                             useExisting: DatetimeComponent
                         }
-                    ], imports: [MatFormField, MatLabel, MatInput, MatDatepickerInput, FormsModule, ReactiveFormsModule, MatDatepickerToggle, MatSuffix, MatDatepicker, MatButtonModule, NgxMatDatetimePickerModule, NgxMatNativeDateModule], template: "<div style=\"width:100%\">\n  @if (mode==='date') {\n    <mat-form-field>\n      <mat-label>{{display}}</mat-label>\n      <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeHolder\" [formControl]=\"dateControl\" (dateInput)=\"onDateInput()\" (dateChange)=\"onDateChange()\" (blur)=\"markTouched()\">\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  }\n\n  @if (mode==='datetime') {\n    <mat-form-field>\n      <mat-label>{{display}}</mat-label>\n      <input matInput [ngxMatDatetimePicker]=\"pickerDT\" [placeholder]=\"placeHolder\" [formControl]=\"dateControl\" (dateInput)=\"onDateInput()\" (dateChange)=\"onDateChange()\" (blur)=\"markTouched()\">\n      <mat-datepicker-toggle matSuffix [for]=\"$any(pickerDT)\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #pickerDT [showSpinners]=\"showSpinners\" [showSeconds]=\"showSeconds\" [touchUi]=\"touchUi\" [disableMinute]=\"disableMinute\">\n        <ngx-mat-datepicker-actions>\n          <button mat-button ngxMatDatepickerCancel>{{ resolvedCancelLabel }}</button>\n          <button mat-raised-button color=\"primary\" ngxMatDatepickerApply>{{ resolvedApplyLabel }}</button>\n        </ngx-mat-datepicker-actions>\n      </ngx-mat-datetime-picker>\n    </mat-form-field>\n  }\n</div>\n" }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3752,18 +3757,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], mode: [{
                 type: Input,
                 args: ['mode']
-            }], showSpinners: [{
-                type: Input
             }], showSeconds: [{
                 type: Input
-            }], disableMinute: [{
-                type: Input
-            }], touchUi: [{
-                type: Input
-            }], cancelLabel: [{
-                type: Input
-            }], applyLabel: [{
-                type: Input
             }] } });
 
 class CallbackDirective {