@sumaris-net/ngx-components 18.18.20 → 18.18.21
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/esm2022/src/app/shared/form/field.component.mjs +14 -10
- package/esm2022/src/app/shared/material/latlong/material.latlong-input.mjs +13 -10
- package/fesm2022/sumaris-net.ngx-components.mjs +24 -17
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/form/field.component.d.ts +1 -0
- package/src/app/shared/material/latlong/material.latlong-input.d.ts +2 -1
- package/src/assets/manifest.json +1 -1
|
@@ -13113,12 +13113,14 @@ class MatLatLongFieldInput {
|
|
|
13113
13113
|
return this._disabled;
|
|
13114
13114
|
}
|
|
13115
13115
|
set disabled(value) {
|
|
13116
|
-
this._disabled =
|
|
13117
|
-
if (this.
|
|
13118
|
-
this.
|
|
13119
|
-
|
|
13120
|
-
|
|
13121
|
-
|
|
13116
|
+
this._disabled = value;
|
|
13117
|
+
if (this.formGroup.disabled !== value) {
|
|
13118
|
+
if (this._disabled) {
|
|
13119
|
+
this.formGroup.disable();
|
|
13120
|
+
}
|
|
13121
|
+
else {
|
|
13122
|
+
this.formGroup.enable();
|
|
13123
|
+
}
|
|
13122
13124
|
}
|
|
13123
13125
|
this.stateChanges.next();
|
|
13124
13126
|
}
|
|
@@ -13428,7 +13430,7 @@ class MatLatLongFieldInput {
|
|
|
13428
13430
|
}
|
|
13429
13431
|
}
|
|
13430
13432
|
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 });
|
|
13431
|
-
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 });
|
|
13433
|
+
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", "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 });
|
|
13432
13434
|
}
|
|
13433
13435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatLatLongFieldInput, decorators: [{
|
|
13434
13436
|
type: Component,
|
|
@@ -13463,7 +13465,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
13463
13465
|
}], required: [{
|
|
13464
13466
|
type: Input
|
|
13465
13467
|
}], disabled: [{
|
|
13466
|
-
type: Input
|
|
13468
|
+
type: Input,
|
|
13469
|
+
args: [{ transform: booleanAttribute }]
|
|
13467
13470
|
}], value: [{
|
|
13468
13471
|
type: Input
|
|
13469
13472
|
}], type: [{
|
|
@@ -14119,6 +14122,7 @@ class AppFormField {
|
|
|
14119
14122
|
_onTouchedCallback = noop$1;
|
|
14120
14123
|
_definition;
|
|
14121
14124
|
_values;
|
|
14125
|
+
_disabled = false;
|
|
14122
14126
|
type;
|
|
14123
14127
|
numberInputStep;
|
|
14124
14128
|
set definition(value) {
|
|
@@ -14132,10 +14136,18 @@ class AppFormField {
|
|
|
14132
14136
|
}
|
|
14133
14137
|
readonly = false;
|
|
14134
14138
|
set disabled(value) {
|
|
14135
|
-
this.
|
|
14139
|
+
this._disabled = value;
|
|
14140
|
+
if (this.formControl && this.formControl.disabled !== value) {
|
|
14141
|
+
if (this._disabled) {
|
|
14142
|
+
this.formControl.disable();
|
|
14143
|
+
}
|
|
14144
|
+
else {
|
|
14145
|
+
this.formControl.enable();
|
|
14146
|
+
}
|
|
14147
|
+
}
|
|
14136
14148
|
}
|
|
14137
14149
|
get disabled() {
|
|
14138
|
-
return this.
|
|
14150
|
+
return this._disabled;
|
|
14139
14151
|
}
|
|
14140
14152
|
formControl;
|
|
14141
14153
|
formControlName;
|
|
@@ -14267,14 +14279,9 @@ class AppFormField {
|
|
|
14267
14279
|
this._onTouchedCallback = fn;
|
|
14268
14280
|
}
|
|
14269
14281
|
setDisabledState(disabled) {
|
|
14270
|
-
if (this.
|
|
14282
|
+
if (this._disabled === disabled)
|
|
14271
14283
|
return; // Skip if same
|
|
14272
|
-
|
|
14273
|
-
this.formControl.disable({ emitEvent: false });
|
|
14274
|
-
}
|
|
14275
|
-
else {
|
|
14276
|
-
this.formControl.enable({ emitEvent: false });
|
|
14277
|
-
}
|
|
14284
|
+
this._disabled = disabled;
|
|
14278
14285
|
this.cd.markForCheck();
|
|
14279
14286
|
}
|
|
14280
14287
|
markAsTouched() {
|