@gloww/gloww 20.0.0-beta.31 → 20.0.0-beta.32
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 +70 -5
- package/fesm2022/gloww-gloww.mjs.map +1 -1
- package/index.d.ts +8 -3
- package/package.json +1 -1
package/fesm2022/gloww-gloww.mjs
CHANGED
|
@@ -3638,9 +3638,6 @@ class DatetimeComponent {
|
|
|
3638
3638
|
this.minuteControl = new FormControl('00', { nonNullable: true });
|
|
3639
3639
|
this.secondControl = new FormControl('00', { nonNullable: true });
|
|
3640
3640
|
this.isDisabled = false;
|
|
3641
|
-
this.hours = Array.from({ length: 24 }, (_, value) => value.toString().padStart(2, '0'));
|
|
3642
|
-
this.minutes = Array.from({ length: 60 }, (_, value) => value.toString().padStart(2, '0'));
|
|
3643
|
-
this.seconds = Array.from({ length: 60 }, (_, value) => value.toString().padStart(2, '0'));
|
|
3644
3641
|
this.onChange = () => { };
|
|
3645
3642
|
this.onTouched = () => { };
|
|
3646
3643
|
this.dateControl.valueChanges.subscribe(() => this.emitCurrentValue());
|
|
@@ -3686,6 +3683,52 @@ class DatetimeComponent {
|
|
|
3686
3683
|
markTouched() {
|
|
3687
3684
|
this.onTouched();
|
|
3688
3685
|
}
|
|
3686
|
+
get timePickerValue() {
|
|
3687
|
+
const hour = this.normalizeTimePartValue(this.hourControl.value, 23, true);
|
|
3688
|
+
const minute = this.normalizeTimePartValue(this.minuteControl.value, 59, true);
|
|
3689
|
+
const second = this.normalizeTimePartValue(this.secondControl.value, 59, true);
|
|
3690
|
+
return this.showSeconds ? `${hour}:${minute}:${second}` : `${hour}:${minute}`;
|
|
3691
|
+
}
|
|
3692
|
+
openNativeTimePicker(input) {
|
|
3693
|
+
if (this.isDisabled) {
|
|
3694
|
+
return;
|
|
3695
|
+
}
|
|
3696
|
+
const picker = input;
|
|
3697
|
+
if (typeof picker.showPicker === 'function') {
|
|
3698
|
+
picker.showPicker();
|
|
3699
|
+
}
|
|
3700
|
+
else {
|
|
3701
|
+
picker.focus();
|
|
3702
|
+
picker.click();
|
|
3703
|
+
}
|
|
3704
|
+
this.onTouched();
|
|
3705
|
+
}
|
|
3706
|
+
onNativeTimeSelected(value) {
|
|
3707
|
+
if (!value) {
|
|
3708
|
+
return;
|
|
3709
|
+
}
|
|
3710
|
+
const parts = value.split(':');
|
|
3711
|
+
this.hourControl.setValue(this.normalizeTimePartValue(parts[0], 23, true), { emitEvent: false });
|
|
3712
|
+
this.minuteControl.setValue(this.normalizeTimePartValue(parts[1], 59, true), { emitEvent: false });
|
|
3713
|
+
if (this.showSeconds) {
|
|
3714
|
+
this.secondControl.setValue(this.normalizeTimePartValue(parts[2], 59, true), { emitEvent: false });
|
|
3715
|
+
}
|
|
3716
|
+
this.emitCurrentValue();
|
|
3717
|
+
this.onTouched();
|
|
3718
|
+
}
|
|
3719
|
+
onTimePartInput(part) {
|
|
3720
|
+
const control = this.getTimeControl(part);
|
|
3721
|
+
const max = this.getTimePartMax(part);
|
|
3722
|
+
control.setValue(this.normalizeTimePartValue(control.value, max, false), { emitEvent: false });
|
|
3723
|
+
this.emitCurrentValue();
|
|
3724
|
+
}
|
|
3725
|
+
onTimePartBlur(part) {
|
|
3726
|
+
const control = this.getTimeControl(part);
|
|
3727
|
+
const max = this.getTimePartMax(part);
|
|
3728
|
+
control.setValue(this.normalizeTimePartValue(control.value, max, true), { emitEvent: false });
|
|
3729
|
+
this.emitCurrentValue();
|
|
3730
|
+
this.onTouched();
|
|
3731
|
+
}
|
|
3689
3732
|
setValueFromOutside(value, emit) {
|
|
3690
3733
|
const normalized = this.normalizeDateValue(value);
|
|
3691
3734
|
this._value = normalized;
|
|
@@ -3714,6 +3757,28 @@ class DatetimeComponent {
|
|
|
3714
3757
|
const parsed = Number.parseInt(value ?? '0', 10);
|
|
3715
3758
|
return Number.isNaN(parsed) ? 0 : parsed;
|
|
3716
3759
|
}
|
|
3760
|
+
getTimeControl(part) {
|
|
3761
|
+
switch (part) {
|
|
3762
|
+
case 'hour':
|
|
3763
|
+
return this.hourControl;
|
|
3764
|
+
case 'minute':
|
|
3765
|
+
return this.minuteControl;
|
|
3766
|
+
default:
|
|
3767
|
+
return this.secondControl;
|
|
3768
|
+
}
|
|
3769
|
+
}
|
|
3770
|
+
getTimePartMax(part) {
|
|
3771
|
+
return part === 'hour' ? 23 : 59;
|
|
3772
|
+
}
|
|
3773
|
+
normalizeTimePartValue(value, max, pad) {
|
|
3774
|
+
const digits = `${value ?? ''}`.replace(/\D/g, '').slice(-2);
|
|
3775
|
+
if (!digits) {
|
|
3776
|
+
return pad ? '00' : '';
|
|
3777
|
+
}
|
|
3778
|
+
const parsed = Number.parseInt(digits, 10);
|
|
3779
|
+
const clamped = Number.isNaN(parsed) ? 0 : Math.min(max, Math.max(0, parsed));
|
|
3780
|
+
return pad || digits.length > 1 ? clamped.toString().padStart(2, '0') : clamped.toString();
|
|
3781
|
+
}
|
|
3717
3782
|
normalizeDateValue(value) {
|
|
3718
3783
|
if (value === undefined || value === null || value === '') {
|
|
3719
3784
|
return null;
|
|
@@ -3746,7 +3811,7 @@ class DatetimeComponent {
|
|
|
3746
3811
|
multi: true,
|
|
3747
3812
|
useExisting: forwardRef(() => DatetimeComponent)
|
|
3748
3813
|
}
|
|
3749
|
-
], 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=\"
|
|
3814
|
+
], 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"] }] }); }
|
|
3750
3815
|
}
|
|
3751
3816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
|
|
3752
3817
|
type: Component,
|
|
@@ -3756,7 +3821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
3756
3821
|
multi: true,
|
|
3757
3822
|
useExisting: forwardRef(() => DatetimeComponent)
|
|
3758
3823
|
}
|
|
3759
|
-
], imports: [ReactiveFormsModule, MatFormField$1, MatLabel$1, MatInput, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatSuffix,
|
|
3824
|
+
], 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"] }]
|
|
3760
3825
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3761
3826
|
type: Optional
|
|
3762
3827
|
}, {
|