npm - @sumaris-net/ngx-components - Versions diffs - 2.7.0-rc6 → 2.7.0-rc7 - Mend

@sumaris-net/ngx-components 2.7.0-rc6 → 2.7.0-rc7

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.

Files changed (11) hide show

package/fesm2022/sumaris-net.ngx-components.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Directive, Injectable, Pipe, EventEmitter, Output, Optional, Inject, NgModule, forwardRef, Component, ChangeDetectionStrategy, Input, ViewChildren, HostBinding, HostListener, ElementRef, ViewChild, ANIMATION_MODULE_TYPE, inject, ChangeDetectorRef, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, APP_INITIALIZER } from '@angular/core';
 import { shareReplay, tap, of, firstValueFrom, Subject, merge, isObservable, from, timer, Subscription, BehaviorSubject, fromEvent, noop as noop$9, Observable, forkJoin, defer, timeout, fromEventPattern, interval, combineLatest, mergeMap as mergeMap$1, EMPTY, delay, iif } from 'rxjs';
-import { catchError, map, first, tap as tap$1, switchMap, takeUntil, filter, mergeMap, debounceTime, startWith, distinctUntilChanged, throttleTime, skip, bufferWhen, mapTo, distinctUntilKeyChanged, take } from 'rxjs/operators';
+import { catchError, map, first, tap as tap$1, switchMap, takeUntil, filter, mergeMap, debounceTime, startWith, distinctUntilChanged, skip, throttleTime, bufferWhen, mapTo, distinctUntilKeyChanged, take } from 'rxjs/operators';
 import * as i2 from '@angular/common/http';
 import { HttpEventType, HttpClient, HttpHeaders, HttpResponse, HttpClientModule } from '@angular/common/http';
 import * as i2$3 from '@angular/common';
@@ -8337,10 +8337,13 @@ class MatDate {
         () => this.formControl.errors);
         // Get patterns to display date
         this.updatePattern(this.translate.instant('COMMON.DATE_PATTERN'));
-        this._subscription.add(this.translate.get('COMMON.DATE_PATTERN')
-            .subscribe((pattern) => this.updatePattern(pattern)));
-        // Create mask options
-        this.createMaskOptions();
+        this.updateMaskOptions(this.translate.instant('COMMON.DATE_PLACEHOLDER'));
+        this._subscription.add(this.translate.get(['COMMON.DATE_PATTERN', 'COMMON.DATE_PLACEHOLDER'])
+            .pipe(skip(1))
+            .subscribe((translate) => {
+            this.updatePattern(translate['COMMON.DATE_PATTERN']);
+            this.updateMaskOptions(translate['COMMON.DATE_PLACEHOLDER']);
+        }));
         this._subscription.add(this.textControl.valueChanges
             .subscribe((value) => this.onFormChange(value)));
         // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
@@ -8561,30 +8564,33 @@ class MatDate {
     markForCheck() {
         this.cd.markForCheck();
     }
-    createMaskOptions() {
-        this.datePlaceholder = this.translate.instant('COMMON.DATE_PLACEHOLDER');
-        const dateOptions = maskitoDateOptionsGenerator({
-            mode: this.datePattern.toLowerCase(),
-            separator: '/',
-        });
-        const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
-        ...placeholderOptions
-        // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
-         } = maskitoWithPlaceholder(this.datePlaceholder, true);
-        this.maskitoOptions = {
-            ...dateOptions,
-            plugins: plugins.concat(dateOptions.plugins || []),
-            preprocessors: [
-                // Always put it BEFORE all other preprocessors
-                ...placeholderOptions.preprocessors,
-                ...dateOptions.preprocessors,
-            ],
-            postprocessors: [
-                ...dateOptions.postprocessors,
-                // Always put it AFTER all other postprocessors
-                ...placeholderOptions.postprocessors,
-            ],
-        };
+    updateMaskOptions(datePlaceholder) {
+        if (this.datePlaceholder != datePlaceholder) {
+            this.datePlaceholder = datePlaceholder;
+            const dateOptions = maskitoDateOptionsGenerator({
+                mode: this.datePattern.toLowerCase(),
+                separator: '/',
+            });
+            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
+            ...placeholderOptions
+            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
+             } = maskitoWithPlaceholder(this.datePlaceholder, true);
+            this.maskitoOptions = {
+                ...dateOptions,
+                plugins: plugins.concat(dateOptions.plugins || []),
+                preprocessors: [
+                    // Always put it BEFORE all other preprocessors
+                    ...placeholderOptions.preprocessors,
+                    ...dateOptions.preprocessors,
+                ],
+                postprocessors: [
+                    ...dateOptions.postprocessors,
+                    // Always put it AFTER all other postprocessors
+                    ...placeholderOptions.postprocessors,
+                ],
+            };
+            this.markForCheck();
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDate, selector: "mat-date-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", timezone: "timezone", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
@@ -8761,11 +8767,15 @@ class MatDateTime {
         this.timeControl = this.formBuilder.control(null, this.mobile ? null : Validators.pattern(TIME_REGEXP));
         // Get patterns to display date and date+time
         this.updatePattern(this.translate.instant(['COMMON.DATE_PATTERN', 'COMMON.TIME_PATTERN', 'COMMON.DATE_TIME_PATTERN']));
-        this._subscription.add(this.translate.get(['COMMON.DATE_PATTERN', 'COMMON.TIME_PATTERN', 'COMMON.DATE_TIME_PATTERN'])
-            .subscribe((patterns) => this.updatePattern(patterns)));
-        // Create mask options
-        this.createDateMaskOptions();
-        this.createTimeMaskOptions();
+        this.updateDateMaskOptions(this.translate.instant('COMMON.DATE_PLACEHOLDER'));
+        this.updateTimeMaskOptions(this.translate.instant('COMMON.TIME_PLACEHOLDER'));
+        this._subscription.add(this.translate.get(['COMMON.DATE_PATTERN', 'COMMON.TIME_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_PLACEHOLDER', 'COMMON.TIME_PLACEHOLDER'])
+            .pipe(skip(1))
+            .subscribe((translate) => {
+            this.updatePattern(translate);
+            this.updateDateMaskOptions(translate['COMMON.DATE_PLACEHOLDER']);
+            this.updateTimeMaskOptions(translate['COMMON.TIME_PLACEHOLDER']);
+        }));
         this._subscription.add(merge(this.dateControl.valueChanges, this.timeControl.valueChanges)
             .subscribe((_) => this.onFormChange()));
         this._writing = false;
@@ -9099,54 +9109,60 @@ class MatDateTime {
     markForCheck() {
         this.cd.markForCheck();
     }
-    createDateMaskOptions() {
-        this.datePlaceholder = this.translate.instant('COMMON.DATE_PLACEHOLDER');
-        const dateOptions = maskitoDateOptionsGenerator({
-            mode: this.datePattern.toLowerCase(),
-            separator: '/',
-        });
-        const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
-        ...placeholderOptions
-        // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
-         } = maskitoWithPlaceholder(this.datePlaceholder, true);
-        this.maskitoDateOptions = {
-            ...dateOptions,
-            plugins: plugins.concat(dateOptions.plugins || []),
-            preprocessors: [
-                // Always put it BEFORE all other preprocessors
-                ...placeholderOptions.preprocessors,
-                ...dateOptions.preprocessors,
-            ],
-            postprocessors: [
-                ...dateOptions.postprocessors,
-                // Always put it AFTER all other postprocessors
-                ...placeholderOptions.postprocessors,
-            ],
-        };
+    updateDateMaskOptions(datePlaceholder) {
+        if (this.datePlaceholder !== datePlaceholder) {
+            this.datePlaceholder = datePlaceholder;
+            const dateOptions = maskitoDateOptionsGenerator({
+                mode: this.datePattern.toLowerCase(),
+                separator: '/',
+            });
+            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
+            ...placeholderOptions
+            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
+             } = maskitoWithPlaceholder(this.datePlaceholder, true);
+            this.maskitoDateOptions = {
+                ...dateOptions,
+                plugins: plugins.concat(dateOptions.plugins || []),
+                preprocessors: [
+                    // Always put it BEFORE all other preprocessors
+                    ...placeholderOptions.preprocessors,
+                    ...dateOptions.preprocessors,
+                ],
+                postprocessors: [
+                    ...dateOptions.postprocessors,
+                    // Always put it AFTER all other postprocessors
+                    ...placeholderOptions.postprocessors,
+                ],
+            };
+            this.markForCheck();
+        }
     }
-    createTimeMaskOptions() {
-        this.timePlaceholder = this.translate.instant('COMMON.TIME_PLACEHOLDER');
-        const timeOptions = maskitoTimeOptionsGenerator({
-            mode: this.timePattern.toUpperCase()
-        });
-        const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
-        ...placeholderOptions
-        // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
-         } = maskitoWithPlaceholder(this.timePlaceholder, true);
-        this.maskitoTimeOptions = {
-            ...timeOptions,
-            plugins: plugins.concat(timeOptions.plugins || []),
-            preprocessors: [
-                // Always put it BEFORE all other preprocessors
-                ...placeholderOptions.preprocessors,
-                ...timeOptions.preprocessors,
-            ],
-            postprocessors: [
-                ...timeOptions.postprocessors,
-                // Always put it AFTER all other postprocessors
-                ...placeholderOptions.postprocessors,
-            ],
-        };
+    updateTimeMaskOptions(timePlaceholder) {
+        if (this.timePlaceholder !== timePlaceholder) {
+            this.timePlaceholder = timePlaceholder;
+            const timeOptions = maskitoTimeOptionsGenerator({
+                mode: this.timePattern.toUpperCase()
+            });
+            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
+            ...placeholderOptions
+            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
+             } = maskitoWithPlaceholder(this.timePlaceholder, true);
+            this.maskitoTimeOptions = {
+                ...timeOptions,
+                plugins: plugins.concat(timeOptions.plugins || []),
+                preprocessors: [
+                    // Always put it BEFORE all other preprocessors
+                    ...placeholderOptions.preprocessors,
+                    ...timeOptions.preprocessors,
+                ],
+                postprocessors: [
+                    ...timeOptions.postprocessors,
+                    // Always put it AFTER all other postprocessors
+                    ...placeholderOptions.postprocessors,
+                ],
+            };
+            this.markForCheck();
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDateTime, selector: "mat-date-time-field", inputs: { subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
@@ -9296,10 +9312,13 @@ class MatDateShort {
         () => this.formControl.errors);
         // Get patterns to display date
         this.updatePattern(this.translate.instant('COMMON.DATE_YEAR_PATTERN'));
-        this._subscription.add(this.translate.get('COMMON.DATE_YEAR_PATTERN')
-            .subscribe((pattern) => this.updatePattern(pattern)));
-        // Create mask options
-        this.createMaskOptions();
+        this.updateMaskOptions(this.translate.instant('COMMON.DATE_YEAR_PLACEHOLDER'));
+        this._subscription.add(this.translate.get(['COMMON.DATE_YEAR_PATTERN', 'COMMON.DATE_YEAR_PLACEHOLDER'])
+            .pipe(skip(1))
+            .subscribe((translate) => {
+            this.updatePattern(translate['COMMON.DATE_YEAR_PATTERN']);
+            this.updateMaskOptions(translate['COMMON.DATE_YEAR_PLACEHOLDER']);
+        }));
         this._subscription.add(this.textControl.valueChanges
             .subscribe((value) => this.onFormChange(value)));
         // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
@@ -9530,29 +9549,32 @@ class MatDateShort {
     markForCheck() {
         this.cd.markForCheck();
     }
-    createMaskOptions() {
-        this.yearPlaceholder = this.translate.instant('COMMON.DATE_YEAR_PLACEHOLDER');
-        const dateOptions = maskitoDateOptionsGenerator({
-            mode: this.datePattern.toLowerCase(),
-        });
-        const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
-        ...placeholderOptions
-        // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
-         } = maskitoWithPlaceholder(this.yearPlaceholder, true);
-        this.maskitoOptions = {
-            ...dateOptions,
-            plugins: plugins.concat(dateOptions.plugins || []),
-            preprocessors: [
-                // Always put it BEFORE all other preprocessors
-                ...placeholderOptions.preprocessors,
-                ...dateOptions.preprocessors,
-            ],
-            postprocessors: [
-                ...dateOptions.postprocessors,
-                // Always put it AFTER all other postprocessors
-                ...placeholderOptions.postprocessors,
-            ],
-        };
+    updateMaskOptions(yearPlaceholder) {
+        if (this.yearPlaceholder !== yearPlaceholder) {
+            this.yearPlaceholder = yearPlaceholder;
+            const dateOptions = maskitoDateOptionsGenerator({
+                mode: this.datePattern.toLowerCase(),
+            });
+            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
+            ...placeholderOptions
+            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
+             } = maskitoWithPlaceholder(this.yearPlaceholder, true);
+            this.maskitoOptions = {
+                ...dateOptions,
+                plugins: plugins.concat(dateOptions.plugins || []),
+                preprocessors: [
+                    // Always put it BEFORE all other preprocessors
+                    ...placeholderOptions.preprocessors,
+                    ...dateOptions.preprocessors,
+                ],
+                postprocessors: [
+                    ...dateOptions.postprocessors,
+                    // Always put it AFTER all other postprocessors
+                    ...placeholderOptions.postprocessors,
+                ],
+            };
+            this.markForCheck();
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDateShort, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDateShort, selector: "mat-date-short-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [