@sumaris-net/ngx-components 18.18.20 → 18.18.22

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

@@ -96,7 +96,6 @@ import { NgxMatTimepickerModule } from 'ngx-mat-timepicker';
 import { ENTER } from '@angular/cdk/keycodes';
 import * as i11$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i5$1 from 'ngx-color-picker';
 import { ColorPickerModule } from 'ngx-color-picker';
 import * as i2$2 from '@awesome-cordova-plugins/audio-management/ngx';
@@ -13104,7 +13103,7 @@ class MatLatLongFieldInput {
         return this._required;
     }
     set required(value) {
-        this._required = coerceBooleanProperty(value);
+        this._required = value;
         this.stateChanges.next();
         this.updateValidators();
     }
@@ -13113,12 +13112,14 @@ class MatLatLongFieldInput {
         return this._disabled;
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        if (this._disabled) {
-            this.formGroup.disable();
-        }
-        else {
-            this.formGroup.enable();
+        this._disabled = value;
+        if (this.formGroup.disabled !== value) {
+            if (this._disabled) {
+                this.formGroup.disable();
+            }
+            else {
+                this.formGroup.enable();
+            }
         }
         this.stateChanges.next();
     }
@@ -13428,7 +13429,7 @@ class MatLatLongFieldInput {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatLatLongFieldInput, deps: [{ token: i0.ElementRef }, { token: MAT_FORM_FIELD, optional: true }, { token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatLatLongFieldInput, selector: "mat-latlong-input", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], required: "required", disabled: "disabled", value: "value", type: "type", pattern: ["latLongPattern", "pattern"], defaultSign: "defaultSign", maxDecimals: "maxDecimals", readonly: "readonly" }, host: { properties: { "class.label-floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatLatLongFieldInput }], viewQueries: [{ propertyName: "degreesInput", first: true, predicate: ["degrees"], descendants: true, read: ElementRef }, { propertyName: "minutesInput", first: true, predicate: ["minutes"], descendants: true, read: ElementRef }, { propertyName: "secondsInput", first: true, predicate: ["seconds"], descendants: true, read: ElementRef }, { propertyName: "signInput", first: true, predicate: ["sign"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (readonly) {\n  <ion-text>\n    {{\n      ngControl.value\n        | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }\n    }}\n  </ion-text>\n} @else {\n  <div\n    role=\"group\"\n    class=\"mat-latlong-input-container\"\n    [formGroup]=\"formGroup\"\n    [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n    (focusin)=\"onFocusIn($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <input\n      #degrees\n      aria-label=\"Degrees\"\n      [class.degrees-only]=\"pattern === 'DD'\"\n      [class.degrees]=\"pattern !== 'DD'\"\n      [class.latitude]=\"type === 'latitude'\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"degreesPlaceholder | translate\"\n      formControlName=\"degrees\"\n      [maskito]=\"degreesMask\"\n      (input)=\"handleInput('degrees', 'minutes')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ degreesSymbolUnit }}\n    </span>\n\n    @if (showMinutes) {\n      <input\n        #minutes\n        aria-label=\"Minutes\"\n        [class.minutes]=\"showSeconds\"\n        [class.minutes-seconds]=\"!showSeconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"minutesPlaceholder | translate\"\n        formControlName=\"minutes\"\n        [maskito]=\"minutesMask\"\n        (input)=\"handleInput('minutes', 'seconds')\"\n        (keyup.backspace)=\"autoFocusPrev('minutes', 'degrees')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ minutesSymbolUnit }}\n      </span>\n    }\n\n    @if (showSeconds) {\n      <input\n        #seconds\n        aria-label=\"Seconds\"\n        class=\"seconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"secondsPlaceholder | translate\"\n        formControlName=\"seconds\"\n        [maskito]=\"secondsMask\"\n        (input)=\"handleInput('seconds', 'sign')\"\n        (keyup.backspace)=\"autoFocusPrev('seconds', 'minutes')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ secondsSymbolUnit }}\n      </span>\n    }\n\n    <!-- sign -->\n    @if (showSign) {\n      <span class=\"sign-spacer\"></span>\n      <mat-select\n        #sign\n        aria-label=\"Sign\"\n        class=\"sign\"\n        formControlName=\"sign\"\n        [placeholder]=\"\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n            | translate\n        \"\n        (focusin)=\"sign.open()\"\n        (selectionChange)=\"handleInput('sign')\"\n      >\n        <mat-option [value]=\"1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n        </mat-option>\n        <mat-option [value]=\"-1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n        </mat-option>\n      </mat-select>\n    }\n  </div>\n}\n", styles: [".mat-latlong-input-container{display:inline-flex;width:100%;opacity:0;transition:opacity .2s;pointer-events:none;--mat-select-arrow-transform: translateY(0)}input{border:none;background:none;padding:0;outline:none;font:inherit;text-align:right;color:var(--mdc-filled-text-field-input-text-color, var(--ion-text-color))}input::placeholder{letter-spacing:-.05em;color:var(--mdc-filled-text-field-input-text-placeholder-color, var(--app-form-field-label-color))}input.degrees-only{width:calc(100% - .5em)}input.degrees{width:1.9em}input.degrees.latitude{width:1.3em}input.minutes{width:1.7em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}.symbol-unit{font-weight:700}.sign-spacer{width:.25em}.sign{max-width:2.6em;color:inherit}:host.label-floating .mat-latlong-input-container{opacity:1;pointer-events:revert}\n"], dependencies: [{ kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i6$3.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: LatLongFormatPipe, name: "latLongFormat" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatLatLongFieldInput, selector: "mat-latlong-input", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], value: "value", type: "type", pattern: ["latLongPattern", "pattern"], defaultSign: "defaultSign", maxDecimals: "maxDecimals", readonly: "readonly" }, host: { properties: { "class.label-floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatLatLongFieldInput }], viewQueries: [{ propertyName: "degreesInput", first: true, predicate: ["degrees"], descendants: true, read: ElementRef }, { propertyName: "minutesInput", first: true, predicate: ["minutes"], descendants: true, read: ElementRef }, { propertyName: "secondsInput", first: true, predicate: ["seconds"], descendants: true, read: ElementRef }, { propertyName: "signInput", first: true, predicate: ["sign"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (readonly) {\n  <ion-text>\n    {{\n      ngControl.value\n        | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }\n    }}\n  </ion-text>\n} @else {\n  <div\n    role=\"group\"\n    class=\"mat-latlong-input-container\"\n    [formGroup]=\"formGroup\"\n    [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n    (focusin)=\"onFocusIn($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <input\n      #degrees\n      aria-label=\"Degrees\"\n      [class.degrees-only]=\"pattern === 'DD'\"\n      [class.degrees]=\"pattern !== 'DD'\"\n      [class.latitude]=\"type === 'latitude'\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"degreesPlaceholder | translate\"\n      formControlName=\"degrees\"\n      [maskito]=\"degreesMask\"\n      (input)=\"handleInput('degrees', 'minutes')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ degreesSymbolUnit }}\n    </span>\n\n    @if (showMinutes) {\n      <input\n        #minutes\n        aria-label=\"Minutes\"\n        [class.minutes]=\"showSeconds\"\n        [class.minutes-seconds]=\"!showSeconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"minutesPlaceholder | translate\"\n        formControlName=\"minutes\"\n        [maskito]=\"minutesMask\"\n        (input)=\"handleInput('minutes', 'seconds')\"\n        (keyup.backspace)=\"autoFocusPrev('minutes', 'degrees')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ minutesSymbolUnit }}\n      </span>\n    }\n\n    @if (showSeconds) {\n      <input\n        #seconds\n        aria-label=\"Seconds\"\n        class=\"seconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"secondsPlaceholder | translate\"\n        formControlName=\"seconds\"\n        [maskito]=\"secondsMask\"\n        (input)=\"handleInput('seconds', 'sign')\"\n        (keyup.backspace)=\"autoFocusPrev('seconds', 'minutes')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ secondsSymbolUnit }}\n      </span>\n    }\n\n    <!-- sign -->\n    @if (showSign) {\n      <span class=\"sign-spacer\"></span>\n      <mat-select\n        #sign\n        aria-label=\"Sign\"\n        class=\"sign\"\n        formControlName=\"sign\"\n        [placeholder]=\"\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n            | translate\n        \"\n        (focusin)=\"sign.open()\"\n        (selectionChange)=\"handleInput('sign')\"\n      >\n        <mat-option [value]=\"1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n        </mat-option>\n        <mat-option [value]=\"-1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n        </mat-option>\n      </mat-select>\n    }\n  </div>\n}\n", styles: [".mat-latlong-input-container{display:inline-flex;width:100%;opacity:0;transition:opacity .2s;pointer-events:none;--mat-select-arrow-transform: translateY(0)}input{border:none;background:none;padding:0;outline:none;font:inherit;text-align:right;color:var(--mdc-filled-text-field-input-text-color, var(--ion-text-color))}input::placeholder{letter-spacing:-.05em;color:var(--mdc-filled-text-field-input-text-placeholder-color, var(--app-form-field-label-color))}input.degrees-only{width:calc(100% - .5em)}input.degrees{width:1.9em}input.degrees.latitude{width:1.3em}input.minutes{width:1.7em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}.symbol-unit{font-weight:700}.sign-spacer{width:.25em}.sign{max-width:2.6em;color:inherit}:host.label-floating .mat-latlong-input-container{opacity:1;pointer-events:revert}\n"], dependencies: [{ kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i6$3.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: LatLongFormatPipe, name: "latLongFormat" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatLatLongFieldInput, decorators: [{
             type: Component,
@@ -13461,9 +13462,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input,
                 args: ['aria-describedby']
             }], required: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], value: [{
                 type: Input
             }], type: [{
@@ -14119,6 +14122,7 @@ class AppFormField {
     _onTouchedCallback = noop$1;
     _definition;
     _values;
+    _disabled = false;
     type;
     numberInputStep;
     set definition(value) {
@@ -14132,10 +14136,18 @@ class AppFormField {
     }
     readonly = false;
     set disabled(value) {
-        this.setDisabledState(value);
+        this._disabled = value;
+        if (this.formControl && this.formControl.disabled !== value) {
+            if (this._disabled) {
+                this.formControl.disable();
+            }
+            else {
+                this.formControl.enable();
+            }
+        }
     }
     get disabled() {
-        return this.formControl?.disabled;
+        return this._disabled;
     }
     formControl;
     formControlName;
@@ -14267,14 +14279,9 @@ class AppFormField {
         this._onTouchedCallback = fn;
     }
     setDisabledState(disabled) {
-        if (this.formControl.disabled === disabled)
+        if (this._disabled === disabled)
             return; // Skip if same
-        if (disabled) {
-            this.formControl.disable({ emitEvent: false });
-        }
-        else {
-            this.formControl.enable({ emitEvent: false });
-        }
+        this._disabled = disabled;
         this.cd.markForCheck();
     }
     markAsTouched() {