@gloww/gloww 20.0.0-beta.24 → 20.0.0-beta.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/gloww-gloww.mjs +57 -9
- package/fesm2022/gloww-gloww.mjs.map +1 -1
- package/index.d.ts +7 -1
- package/package.json +1 -1
package/fesm2022/gloww-gloww.mjs
CHANGED
|
@@ -26,7 +26,7 @@ import { MatError, MatFormField, MatInput, MatLabel, MatInputModule, MatSuffix }
|
|
|
26
26
|
import * as i4 from '@ctrl/ngx-codemirror';
|
|
27
27
|
import { CodemirrorModule, CodemirrorComponent } from '@ctrl/ngx-codemirror';
|
|
28
28
|
import * as i1$3 from '@angular/forms';
|
|
29
|
-
import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
29
|
+
import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule, Validators, FormControl } from '@angular/forms';
|
|
30
30
|
import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
|
|
31
31
|
import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
|
|
32
32
|
import * as i3$1 from 'ngx-mat-datetime-picker-v2';
|
|
@@ -3600,6 +3600,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
3600
3600
|
}] } });
|
|
3601
3601
|
|
|
3602
3602
|
class DatetimeComponent {
|
|
3603
|
+
static { this.DATE_FORMATS = [
|
|
3604
|
+
moment.ISO_8601,
|
|
3605
|
+
'DD/MM/YYYY HH:mm:ss',
|
|
3606
|
+
'DD/MM/YYYY HH:mm',
|
|
3607
|
+
'DD/MM/YYYY',
|
|
3608
|
+
'MM/DD/YYYY HH:mm:ss',
|
|
3609
|
+
'MM/DD/YYYY HH:mm',
|
|
3610
|
+
'MM/DD/YYYY',
|
|
3611
|
+
'YYYY-MM-DD HH:mm:ss',
|
|
3612
|
+
'YYYY-MM-DD HH:mm',
|
|
3613
|
+
'YYYY-MM-DD',
|
|
3614
|
+
'YYYY-MM-DDTHH:mm:ss',
|
|
3615
|
+
'YYYY-MM-DDTHH:mm'
|
|
3616
|
+
]; }
|
|
3603
3617
|
constructor(locale) {
|
|
3604
3618
|
this.locale = locale;
|
|
3605
3619
|
this._value = null;
|
|
@@ -3610,19 +3624,28 @@ class DatetimeComponent {
|
|
|
3610
3624
|
this.showSeconds = false;
|
|
3611
3625
|
this.disableMinute = false;
|
|
3612
3626
|
this.touchUi = false;
|
|
3627
|
+
this.dateControl = new FormControl(null);
|
|
3613
3628
|
this.onChange = () => { };
|
|
3614
3629
|
this.onTouched = () => { };
|
|
3630
|
+
this.dateControl.valueChanges.subscribe(value => {
|
|
3631
|
+
const normalized = this.normalizeDateValue(value);
|
|
3632
|
+
if (value !== normalized) {
|
|
3633
|
+
this.dateControl.setValue(normalized, { emitEvent: false });
|
|
3634
|
+
}
|
|
3635
|
+
this._value = normalized;
|
|
3636
|
+
this.onChange(normalized);
|
|
3637
|
+
});
|
|
3615
3638
|
}
|
|
3616
3639
|
get value() {
|
|
3617
3640
|
return this._value;
|
|
3618
3641
|
}
|
|
3619
3642
|
set value(val) {
|
|
3620
|
-
this.
|
|
3621
|
-
this.onChange(this._value);
|
|
3622
|
-
this.onTouched();
|
|
3643
|
+
this.updateValue(val);
|
|
3623
3644
|
}
|
|
3624
3645
|
writeValue(obj) {
|
|
3625
|
-
|
|
3646
|
+
const normalized = this.normalizeDateValue(obj);
|
|
3647
|
+
this._value = normalized;
|
|
3648
|
+
this.dateControl.setValue(normalized, { emitEvent: false });
|
|
3626
3649
|
}
|
|
3627
3650
|
registerOnChange(fn) {
|
|
3628
3651
|
this.onChange = fn;
|
|
@@ -3631,7 +3654,12 @@ class DatetimeComponent {
|
|
|
3631
3654
|
this.onTouched = fn;
|
|
3632
3655
|
}
|
|
3633
3656
|
setDisabledState(isDisabled) {
|
|
3634
|
-
|
|
3657
|
+
if (isDisabled) {
|
|
3658
|
+
this.dateControl.disable({ emitEvent: false });
|
|
3659
|
+
}
|
|
3660
|
+
else {
|
|
3661
|
+
this.dateControl.enable({ emitEvent: false });
|
|
3662
|
+
}
|
|
3635
3663
|
}
|
|
3636
3664
|
get resolvedCancelLabel() {
|
|
3637
3665
|
if (this.cancelLabel) {
|
|
@@ -3645,6 +3673,12 @@ class DatetimeComponent {
|
|
|
3645
3673
|
}
|
|
3646
3674
|
return 'OK';
|
|
3647
3675
|
}
|
|
3676
|
+
onDateInput() {
|
|
3677
|
+
this.markTouched();
|
|
3678
|
+
}
|
|
3679
|
+
onDateChange() {
|
|
3680
|
+
this.markTouched();
|
|
3681
|
+
}
|
|
3648
3682
|
normalizeDateValue(value) {
|
|
3649
3683
|
if (value === undefined || value === null || value === '') {
|
|
3650
3684
|
return null;
|
|
@@ -3657,15 +3691,29 @@ class DatetimeComponent {
|
|
|
3657
3691
|
return Number.isNaN(date.getTime()) ? null : date;
|
|
3658
3692
|
}
|
|
3659
3693
|
if (typeof value === 'string' || typeof value === 'number') {
|
|
3660
|
-
const strictMoment = moment(value,
|
|
3694
|
+
const strictMoment = moment(value, DatetimeComponent.DATE_FORMATS, this.locale ?? undefined, true);
|
|
3661
3695
|
if (strictMoment.isValid()) {
|
|
3662
3696
|
return strictMoment.toDate();
|
|
3663
3697
|
}
|
|
3698
|
+
const lenientMoment = moment(value, DatetimeComponent.DATE_FORMATS, this.locale ?? undefined, false);
|
|
3699
|
+
if (lenientMoment.isValid()) {
|
|
3700
|
+
return lenientMoment.toDate();
|
|
3701
|
+
}
|
|
3664
3702
|
const date = new Date(value);
|
|
3665
3703
|
return Number.isNaN(date.getTime()) ? null : date;
|
|
3666
3704
|
}
|
|
3667
3705
|
return null;
|
|
3668
3706
|
}
|
|
3707
|
+
updateValue(value) {
|
|
3708
|
+
const normalized = this.normalizeDateValue(value);
|
|
3709
|
+
this._value = normalized;
|
|
3710
|
+
this.dateControl.setValue(normalized, { emitEvent: false });
|
|
3711
|
+
this.onChange(normalized);
|
|
3712
|
+
this.markTouched();
|
|
3713
|
+
}
|
|
3714
|
+
markTouched() {
|
|
3715
|
+
this.onTouched();
|
|
3716
|
+
}
|
|
3669
3717
|
get isFrenchLocale() {
|
|
3670
3718
|
return (this.locale ?? '').toLowerCase().startsWith('fr');
|
|
3671
3719
|
}
|
|
@@ -3676,7 +3724,7 @@ class DatetimeComponent {
|
|
|
3676
3724
|
multi: true,
|
|
3677
3725
|
useExisting: DatetimeComponent
|
|
3678
3726
|
}
|
|
3679
|
-
], 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\" [(
|
|
3727
|
+
], 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 }] }); }
|
|
3680
3728
|
}
|
|
3681
3729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
|
|
3682
3730
|
type: Component,
|
|
@@ -3686,7 +3734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
3686
3734
|
multi: true,
|
|
3687
3735
|
useExisting: DatetimeComponent
|
|
3688
3736
|
}
|
|
3689
|
-
], imports: [MatFormField, MatLabel, MatInput, MatDatepickerInput, FormsModule, 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\" [(
|
|
3737
|
+
], 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" }]
|
|
3690
3738
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3691
3739
|
type: Optional
|
|
3692
3740
|
}, {
|