@gloww/gloww 20.0.0-beta.26 → 20.0.0-beta.28
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 +63 -65
- package/fesm2022/gloww-gloww.mjs.map +1 -1
- package/index.d.ts +22 -21
- package/package.json +1 -1
package/fesm2022/gloww-gloww.mjs
CHANGED
|
@@ -10,7 +10,6 @@ import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, Ma
|
|
|
10
10
|
import { CdkScrollable } from '@angular/cdk/scrolling';
|
|
11
11
|
import * as i2 from '@angular/router';
|
|
12
12
|
import { NavigationEnd, RouterLink, RouterModule } from '@angular/router';
|
|
13
|
-
import * as i2$1 from '@angular/material/button';
|
|
14
13
|
import { MatButton, MatButtonModule } from '@angular/material/button';
|
|
15
14
|
import * as i1$1 from '@angular/platform-browser';
|
|
16
15
|
import * as i5 from '@kolkov/angular-editor';
|
|
@@ -29,8 +28,7 @@ import * as i1$3 from '@angular/forms';
|
|
|
29
28
|
import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule, Validators, FormControl } from '@angular/forms';
|
|
30
29
|
import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
|
|
31
30
|
import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
|
|
32
|
-
import
|
|
33
|
-
import { NgxMatDatetimePickerModule, NgxMatNativeDateModule, NgxMatTimepickerComponent } from 'ngx-mat-datetime-picker-v2';
|
|
31
|
+
import { NgxMatDatetimePickerModule, NgxMatTimepickerComponent, NgxMatNativeDateModule } from 'ngx-mat-datetime-picker-v2';
|
|
34
32
|
import * as i1$4 from '@ngx-translate/core';
|
|
35
33
|
import { TranslateDefaultParser } from '@ngx-translate/core';
|
|
36
34
|
import { MatSelect, MatOption, MatSelectModule } from '@angular/material/select';
|
|
@@ -41,7 +39,7 @@ import * as parserTypescript from 'prettier/plugins/typescript';
|
|
|
41
39
|
import * as parserBabel from 'prettier/plugins/babel';
|
|
42
40
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
43
41
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
44
|
-
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
42
|
+
import { MatFormFieldModule, MatFormField as MatFormField$1, MatLabel as MatLabel$1 } from '@angular/material/form-field';
|
|
45
43
|
import { jwtDecode } from 'jwt-decode';
|
|
46
44
|
import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
47
45
|
import FileSaver from 'file-saver';
|
|
@@ -3620,32 +3618,33 @@ class DatetimeComponent {
|
|
|
3620
3618
|
this.display = null;
|
|
3621
3619
|
this.placeHolder = null;
|
|
3622
3620
|
this.mode = 'date';
|
|
3623
|
-
this.showSpinners = true;
|
|
3624
3621
|
this.showSeconds = false;
|
|
3625
|
-
this.disableMinute = false;
|
|
3626
|
-
this.touchUi = false;
|
|
3627
3622
|
this.dateControl = new FormControl(null);
|
|
3623
|
+
this.hourControl = new FormControl('00', { nonNullable: true });
|
|
3624
|
+
this.minuteControl = new FormControl('00', { nonNullable: true });
|
|
3625
|
+
this.secondControl = new FormControl('00', { nonNullable: true });
|
|
3626
|
+
this.isDisabled = false;
|
|
3627
|
+
this.hours = Array.from({ length: 24 }, (_, value) => value.toString().padStart(2, '0'));
|
|
3628
|
+
this.minutes = Array.from({ length: 60 }, (_, value) => value.toString().padStart(2, '0'));
|
|
3629
|
+
this.seconds = Array.from({ length: 60 }, (_, value) => value.toString().padStart(2, '0'));
|
|
3628
3630
|
this.onChange = () => { };
|
|
3629
3631
|
this.onTouched = () => { };
|
|
3630
|
-
this.dateControl.valueChanges.subscribe(
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
|
|
3636
|
-
|
|
3637
|
-
});
|
|
3632
|
+
this.dateControl.valueChanges.subscribe(() => this.emitCurrentValue());
|
|
3633
|
+
this.hourControl.valueChanges.subscribe(() => this.emitCurrentValue());
|
|
3634
|
+
this.minuteControl.valueChanges.subscribe(() => this.emitCurrentValue());
|
|
3635
|
+
this.secondControl.valueChanges.subscribe(() => this.emitCurrentValue());
|
|
3636
|
+
}
|
|
3637
|
+
get isDateTime() {
|
|
3638
|
+
return this.mode === 'datetime';
|
|
3638
3639
|
}
|
|
3639
3640
|
get value() {
|
|
3640
3641
|
return this._value;
|
|
3641
3642
|
}
|
|
3642
3643
|
set value(val) {
|
|
3643
|
-
this.
|
|
3644
|
+
this.setValueFromOutside(val, true);
|
|
3644
3645
|
}
|
|
3645
3646
|
writeValue(obj) {
|
|
3646
|
-
|
|
3647
|
-
this._value = normalized;
|
|
3648
|
-
this.dateControl.setValue(normalized, { emitEvent: false });
|
|
3647
|
+
this.setValueFromOutside(obj, false);
|
|
3649
3648
|
}
|
|
3650
3649
|
registerOnChange(fn) {
|
|
3651
3650
|
this.onChange = fn;
|
|
@@ -3654,37 +3653,59 @@ class DatetimeComponent {
|
|
|
3654
3653
|
this.onTouched = fn;
|
|
3655
3654
|
}
|
|
3656
3655
|
setDisabledState(isDisabled) {
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
}
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
}
|
|
3656
|
+
this.isDisabled = isDisabled;
|
|
3657
|
+
const action = isDisabled ? 'disable' : 'enable';
|
|
3658
|
+
this.dateControl[action]({ emitEvent: false });
|
|
3659
|
+
this.hourControl[action]({ emitEvent: false });
|
|
3660
|
+
this.minuteControl[action]({ emitEvent: false });
|
|
3661
|
+
this.secondControl[action]({ emitEvent: false });
|
|
3662
|
+
}
|
|
3663
|
+
clear() {
|
|
3664
|
+
this._value = null;
|
|
3665
|
+
this.dateControl.setValue(null, { emitEvent: false });
|
|
3666
|
+
this.hourControl.setValue('00', { emitEvent: false });
|
|
3667
|
+
this.minuteControl.setValue('00', { emitEvent: false });
|
|
3668
|
+
this.secondControl.setValue('00', { emitEvent: false });
|
|
3669
|
+
this.onChange(null);
|
|
3670
|
+
this.onTouched();
|
|
3663
3671
|
}
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
return this.cancelLabel;
|
|
3667
|
-
}
|
|
3668
|
-
return this.isFrenchLocale ? 'Annuler' : 'Cancel';
|
|
3672
|
+
markTouched() {
|
|
3673
|
+
this.onTouched();
|
|
3669
3674
|
}
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
|
|
3675
|
+
setValueFromOutside(value, emit) {
|
|
3676
|
+
const normalized = this.normalizeDateValue(value);
|
|
3677
|
+
this._value = normalized;
|
|
3678
|
+
this.dateControl.setValue(normalized ? new Date(normalized.getTime()) : null, { emitEvent: false });
|
|
3679
|
+
this.hourControl.setValue(normalized ? normalized.getHours().toString().padStart(2, '0') : '00', { emitEvent: false });
|
|
3680
|
+
this.minuteControl.setValue(normalized ? normalized.getMinutes().toString().padStart(2, '0') : '00', { emitEvent: false });
|
|
3681
|
+
this.secondControl.setValue(normalized ? normalized.getSeconds().toString().padStart(2, '0') : '00', { emitEvent: false });
|
|
3682
|
+
if (emit) {
|
|
3683
|
+
this.onChange(normalized);
|
|
3684
|
+
this.onTouched();
|
|
3673
3685
|
}
|
|
3674
|
-
return 'OK';
|
|
3675
3686
|
}
|
|
3676
|
-
|
|
3677
|
-
this.
|
|
3687
|
+
emitCurrentValue() {
|
|
3688
|
+
const date = this.dateControl.value;
|
|
3689
|
+
if (!date) {
|
|
3690
|
+
this._value = null;
|
|
3691
|
+
this.onChange(null);
|
|
3692
|
+
return;
|
|
3693
|
+
}
|
|
3694
|
+
const next = new Date(date.getTime());
|
|
3695
|
+
next.setHours(this.toNumber(this.hourControl.value), this.toNumber(this.minuteControl.value), this.showSeconds ? this.toNumber(this.secondControl.value) : 0, 0);
|
|
3696
|
+
this._value = next;
|
|
3697
|
+
this.onChange(next);
|
|
3678
3698
|
}
|
|
3679
|
-
|
|
3680
|
-
|
|
3699
|
+
toNumber(value) {
|
|
3700
|
+
const parsed = Number.parseInt(value ?? '0', 10);
|
|
3701
|
+
return Number.isNaN(parsed) ? 0 : parsed;
|
|
3681
3702
|
}
|
|
3682
3703
|
normalizeDateValue(value) {
|
|
3683
3704
|
if (value === undefined || value === null || value === '') {
|
|
3684
3705
|
return null;
|
|
3685
3706
|
}
|
|
3686
3707
|
if (value instanceof Date) {
|
|
3687
|
-
return Number.isNaN(value.getTime()) ? null : value;
|
|
3708
|
+
return Number.isNaN(value.getTime()) ? null : new Date(value.getTime());
|
|
3688
3709
|
}
|
|
3689
3710
|
if (moment.isMoment(value)) {
|
|
3690
3711
|
const date = value.toDate();
|
|
@@ -3704,27 +3725,14 @@ class DatetimeComponent {
|
|
|
3704
3725
|
}
|
|
3705
3726
|
return null;
|
|
3706
3727
|
}
|
|
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
|
-
}
|
|
3717
|
-
get isFrenchLocale() {
|
|
3718
|
-
return (this.locale ?? '').toLowerCase().startsWith('fr');
|
|
3719
|
-
}
|
|
3720
3728
|
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 }); }
|
|
3721
|
-
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",
|
|
3729
|
+
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: [
|
|
3722
3730
|
{
|
|
3723
3731
|
provide: NG_VALUE_ACCESSOR,
|
|
3724
3732
|
multi: true,
|
|
3725
3733
|
useExisting: DatetimeComponent
|
|
3726
3734
|
}
|
|
3727
|
-
], ngImport: i0, template: "<div
|
|
3735
|
+
], 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"] }] }); }
|
|
3728
3736
|
}
|
|
3729
3737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
|
|
3730
3738
|
type: Component,
|
|
@@ -3734,7 +3742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
3734
3742
|
multi: true,
|
|
3735
3743
|
useExisting: DatetimeComponent
|
|
3736
3744
|
}
|
|
3737
|
-
], imports: [MatFormField, MatLabel, MatInput, MatDatepickerInput,
|
|
3745
|
+
], 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"] }]
|
|
3738
3746
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3739
3747
|
type: Optional
|
|
3740
3748
|
}, {
|
|
@@ -3752,18 +3760,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
3752
3760
|
}], mode: [{
|
|
3753
3761
|
type: Input,
|
|
3754
3762
|
args: ['mode']
|
|
3755
|
-
}], showSpinners: [{
|
|
3756
|
-
type: Input
|
|
3757
3763
|
}], showSeconds: [{
|
|
3758
3764
|
type: Input
|
|
3759
|
-
}], disableMinute: [{
|
|
3760
|
-
type: Input
|
|
3761
|
-
}], touchUi: [{
|
|
3762
|
-
type: Input
|
|
3763
|
-
}], cancelLabel: [{
|
|
3764
|
-
type: Input
|
|
3765
|
-
}], applyLabel: [{
|
|
3766
|
-
type: Input
|
|
3767
3765
|
}] } });
|
|
3768
3766
|
|
|
3769
3767
|
class CallbackDirective {
|