@sumaris-net/ngx-components 2.11.2 → 2.11.4

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 (19) hide show
  1. package/doc/changelog.md +8 -1
  2. package/esm2022/src/app/core/form/text-popover/text-popover.component.mjs +1 -1
  3. package/esm2022/src/app/core/services/model/referential.model.mjs +4 -2
  4. package/esm2022/src/app/shared/material/boolean/material.boolean.mjs +110 -80
  5. package/esm2022/src/app/shared/material/boolean/testing/boolean.test.page.mjs +6 -5
  6. package/esm2022/src/app/shared/material/text/testing/text-form.testing.mjs +3 -3
  7. package/esm2022/src/app/shared/material/text/text-form.component.mjs +26 -6
  8. package/esm2022/src/app/shared/services/translate-context.service.mjs +2 -2
  9. package/esm2022/src/app/shared/validator/form-error-adapter.class.mjs +9 -6
  10. package/fesm2022/sumaris-net.ngx-components.mjs +148 -95
  11. package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
  12. package/package.json +1 -1
  13. package/src/app/shared/material/boolean/material.boolean.d.ts +22 -6
  14. package/src/app/shared/material/text/text-form.component.d.ts +13 -3
  15. package/src/app/shared/validator/form-error-adapter.class.d.ts +5 -2
  16. package/src/assets/manifest.json +1 -1
  17. package/src/theme/_ngx-components.forms.scss +47 -3
  18. package/src/theme/_ngx-components.globals.scss +1 -0
  19. package/src/theme/_theme.variables.scss +2 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sumaris-net/ngx-components",
3
3
  "description": "SUMARiS Angular components",
4
- "version": "2.11.2",
4
+ "version": "2.11.4",
5
5
  "author": "contact@e-is.pro",
6
6
  "license": "AGPL-3.0",
7
7
  "readmeFilename": "README.md",
package/src/app/shared/material/boolean/material.boolean.d.ts CHANGED
@@ -5,6 +5,7 @@ import { MatRadioButton, MatRadioChange } from '@angular/material/radio';
5
5
  import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
6
6
  import { InputElement } from '../../inputs';
7
7
  import { AppFloatLabelType } from '../../form/field.model';
8
+ import { IonButton } from '@ionic/angular';
8
9
  import * as i0 from "@angular/core";
9
10
  export declare class MatBooleanField implements OnInit, ControlValueAccessor, InputElement, OnDestroy {
10
11
  private cd;
@@ -12,14 +13,17 @@ export declare class MatBooleanField implements OnInit, ControlValueAccessor, In
12
13
  private formGroupDir;
13
14
  private _onChangeCallback;
14
15
  private _onTouchedCallback;
16
+ private readonly _subscription;
15
17
  private _writing;
16
18
  protected _value: boolean;
17
19
  protected _tabindex: number;
18
20
  protected _showRadio: boolean;
19
21
  protected _focused: boolean;
20
- yesButton: MatRadioButton;
21
- noButton: MatRadioButton;
22
+ yesRadioButton: MatRadioButton;
23
+ noRadioButton: MatRadioButton;
22
24
  checkboxButton: MatCheckbox;
25
+ yesButton: IonButton;
26
+ noButton: IonButton;
23
27
  fakeInput: ElementRef;
24
28
  disabled: boolean;
25
29
  formControl: UntypedFormControl;
@@ -56,10 +60,11 @@ export declare class MatBooleanField implements OnInit, ControlValueAccessor, In
56
60
  registerOnChange(fn: any): void;
57
61
  registerOnTouched(fn: any): void;
58
62
  setDisabledState(isDisabled: boolean): void;
59
- onFocusFakeInput(event: FocusEvent): void;
63
+ protected onFocusFakeInput(event: FocusEvent): void;
60
64
  focus(): void;
61
- onRadioValueChanged(event: MatRadioChange): void;
62
- onCheckboxValueChanged(event: MatCheckboxChange): void;
65
+ protected onRadioValueChanged(event: MatRadioChange): void;
66
+ protected onCheckboxValueChanged(event: MatCheckboxChange): void;
67
+ toggleValue(event?: Event): void;
63
68
  private checkIfTouched;
64
69
  /**
65
70
  * Show/Hide the fake input
@@ -71,7 +76,18 @@ export declare class MatBooleanField implements OnInit, ControlValueAccessor, In
71
76
  private updateTabIndex;
72
77
  private markForCheck;
73
78
  clearValue(event?: Event): void;
74
- protected onBlur(event?: FocusEvent): void;
79
+ protected get radioButtonElements(): HTMLElement[];
80
+ protected get inputsElements(): HTMLElement[];
81
+ protected get ionButtons(): IonButton[];
75
82
  static ɵfac: i0.ɵɵFactoryDeclaration<MatBooleanField, [null, null, { optional: true; }]>;
76
83
  static ɵcmp: i0.ɵɵComponentDeclaration<MatBooleanField, "mat-boolean-field", never, { "disabled": { "alias": "disabled"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "style": { "alias": "style"; "required": false; }; "buttonsColCount": { "alias": "buttonsColCount"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "yesLabel": { "alias": "yesLabel"; "required": false; }; "noLabel": { "alias": "noLabel"; "required": false; }; "showButtonIcons": { "alias": "showButtonIcons"; "required": false; }; "yesIcon": { "alias": "yesIcon"; "required": false; }; "noIcon": { "alias": "noIcon"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "showRadio": { "alias": "showRadio"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "keyupEnter": "keyup.enter"; "blurred": "blur"; }, never, ["[matPrefix]", "[matSuffix]"], false, never>;
84
+ static ngAcceptInputType_disabled: unknown;
85
+ static ngAcceptInputType_readonly: unknown;
86
+ static ngAcceptInputType_required: unknown;
87
+ static ngAcceptInputType_compact: unknown;
88
+ static ngAcceptInputType_buttonsColCount: unknown;
89
+ static ngAcceptInputType_showButtonIcons: unknown;
90
+ static ngAcceptInputType_clearable: unknown;
91
+ static ngAcceptInputType_tabindex: unknown;
92
+ static ngAcceptInputType_showRadio: unknown;
77
93
  }
package/src/app/shared/material/text/text-form.component.d.ts CHANGED
@@ -15,7 +15,9 @@ export declare class TextForm extends AppForm<{
15
15
  showError: boolean;
16
16
  placeholder: string;
17
17
  multiline: boolean;
18
- autoHeight: boolean;
18
+ autoSize: boolean;
19
+ autoSizeMinRows: number;
20
+ autoSizeMaxRows: number;
19
21
  maxLength: number;
20
22
  autofocus: boolean;
21
23
  validator: ValidatorFn;
@@ -25,6 +27,11 @@ export declare class TextForm extends AppForm<{
25
27
  floatLabel: AppFloatLabelType;
26
28
  appearance: MatFormFieldAppearance;
27
29
  subscriptSizing: SubscriptSizing;
30
+ /**
31
+ * @deprecated Use autoSize instead
32
+ */
33
+ set autoHeight(value: boolean);
34
+ get autoHeight(): boolean;
28
35
  textAreaChanges: EventEmitter<string>;
29
36
  textArea: ElementRef;
30
37
  textInput: ElementRef;
@@ -46,11 +53,14 @@ export declare class TextForm extends AppForm<{
46
53
  }): void;
47
54
  private textFormValueChanged;
48
55
  static ɵfac: i0.ɵɵFactoryDeclaration<TextForm, [null, null, null, { optional: true; }]>;
49
- static ɵcmp: i0.ɵɵComponentDeclaration<TextForm, "app-text-form", never, { "showError": { "alias": "showError"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "autoHeight": { "alias": "autoHeight"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "validator": { "alias": "validator"; "required": false; }; "standalone": { "alias": "standalone"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; }, { "textAreaChanges": "textAreaChanges"; }, never, ["[matError]"], false, never>;
56
+ static ɵcmp: i0.ɵɵComponentDeclaration<TextForm, "app-text-form", never, { "showError": { "alias": "showError"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "autoSize": { "alias": "autoSize"; "required": false; }; "autoSizeMinRows": { "alias": "autoSizeMinRows"; "required": false; }; "autoSizeMaxRows": { "alias": "autoSizeMaxRows"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "validator": { "alias": "validator"; "required": false; }; "standalone": { "alias": "standalone"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "autoHeight": { "alias": "autoHeight"; "required": false; }; }, { "textAreaChanges": "textAreaChanges"; }, never, ["[matError]"], false, never>;
50
57
  static ngAcceptInputType_showError: unknown;
51
58
  static ngAcceptInputType_multiline: unknown;
52
- static ngAcceptInputType_autoHeight: unknown;
59
+ static ngAcceptInputType_autoSize: unknown;
60
+ static ngAcceptInputType_autoSizeMinRows: unknown;
61
+ static ngAcceptInputType_autoSizeMaxRows: unknown;
53
62
  static ngAcceptInputType_maxLength: unknown;
54
63
  static ngAcceptInputType_autofocus: unknown;
55
64
  static ngAcceptInputType_standalone: unknown;
65
+ static ngAcceptInputType_autoHeight: unknown;
56
66
  }
package/src/app/shared/validator/form-error-adapter.class.d.ts CHANGED
@@ -3,6 +3,7 @@ import { TranslateService } from '@ngx-translate/core';
3
3
  import { AbstractControl } from '@angular/forms';
4
4
  import { ObjectMap } from '../types';
5
5
  import { FormErrors } from '../forms';
6
+ import { TranslateContextService } from '../services/translate-context.service';
6
7
  import * as i0 from "@angular/core";
7
8
  export declare const APP_FORM_ERROR_I18N_KEYS: InjectionToken<ObjectMap<string>>;
8
9
  export interface IFormPathTranslator {
@@ -10,6 +11,7 @@ export interface IFormPathTranslator {
10
11
  }
11
12
  export interface FormErrorTranslateOptions {
12
13
  i18nPrefix?: string;
14
+ i18nSuffix?: string;
13
15
  pathTranslator?: IFormPathTranslator;
14
16
  separator?: string;
15
17
  recursive?: boolean;
@@ -34,8 +36,9 @@ export interface FormErrorTranslatorOptions extends FormErrorTranslateOptions {
34
36
  }
35
37
  export declare class FormErrorTranslator implements IFormPathTranslator, IFormControlPathTranslator {
36
38
  private translate;
39
+ private translateContext;
37
40
  private readonly errorI18nKeys;
38
- constructor(translate: TranslateService, errorI18nKeys: ObjectMap<string>);
41
+ constructor(translate: TranslateService, translateContext: TranslateContextService, errorI18nKeys: ObjectMap<string>);
39
42
  translateFormErrors(control: AbstractControl, opts?: FormErrorTranslateOptions | FormErrorTranslatorOptions): string;
40
43
  translateErrors(errors: FormErrors, opts?: FormErrorTranslateOptions): string;
41
44
  translateFormPath(path: string, opts?: FormErrorTranslateOptions | FormErrorTranslatorOptions): string;
@@ -46,6 +49,6 @@ export declare class FormErrorTranslator implements IFormPathTranslator, IFormCo
46
49
  */
47
50
  translateControlPath(path: string, opts?: FormErrorTranslatorOptions): string;
48
51
  translateError(errorKey: string, errorContent?: any): any;
49
- static ɵfac: i0.ɵɵFactoryDeclaration<FormErrorTranslator, [null, { optional: true; }]>;
52
+ static ɵfac: i0.ɵɵFactoryDeclaration<FormErrorTranslator, [null, null, { optional: true; }]>;
50
53
  static ɵprov: i0.ɵɵInjectableDeclaration<FormErrorTranslator>;
51
54
  }
package/src/assets/manifest.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "ngx-sumaris-components",
3
3
  "short_name": "ngx-sumaris-components",
4
4
  "manifest_version": 1,
5
- "version": "2.11.2",
5
+ "version": "2.11.4",
6
6
  "default_locale": "fr",
7
7
  "description": "Angular components for building beautiful and responsive Apps",
8
8
  "icons": [{
package/src/theme/_ngx-components.forms.scss CHANGED
@@ -4,6 +4,8 @@
4
4
  // --------------------------------------------------
5
5
  .form-container,
6
6
  form.form-container {
7
+ --ion-text-color: var(--app-form-color, #{$app-form-color});
8
+ --ion-text-color-rgb: var(--app-form-color-rgb, #{$app-form-color-rgb});
7
9
  color: var(--ion-text-color);
8
10
  @include font-size(16px);
9
11
 
@@ -35,6 +37,7 @@ form.form-container {
35
37
  --mdc-outlined-text-field-focus-label-text-color: var(--ion-color-primary);
36
38
  --mdc-outlined-text-field-focus-outline-color: var(--ion-color-primary);
37
39
 
40
+ --mdc-form-field-label-text-color: var(--ion-text-color);
38
41
  --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
39
42
  --mat-form-field-container-height: 45px;
40
43
  --mat-form-field-container-text-size: inherit;
@@ -46,12 +49,13 @@ form.form-container {
46
49
  --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
47
50
  --mat-select-enabled-trigger-text-color: var(--ion-text-color);
48
51
  --mat-select-disabled-trigger-text-color: var(--app-form-color-disabled);
49
- --mdc-form-field-label-text-color: var(--ion-text-color);
52
+
50
53
  --mdc-switch-selected-track-color: var(--app-form-field-background-color-shade);
51
54
  --mdc-switch-unselected-track-color: var(--app-form-field-background-color-shade);
52
55
  --mdc-switch-selected-hover-track-color: var(--app-form-field-background-color-shade);
53
56
  --mdc-switch-unselected-hover-track-color: var(--app-form-field-background-color-shade);
54
57
 
58
+
55
59
  .mat-form-field-disabled,
56
60
  .mat-mdc-input-element:disabled {
57
61
  color: var(--app-form-color-disabled, #{$app-form-color-disabled}) !important;
@@ -162,10 +166,29 @@ form.form-container {
162
166
 
163
167
  &.mat-boolean-field-radio {
164
168
  --mdc-radio-state-layer-size: 20px;
169
+ --mdc-radio-radio-touch-target-size: 24px;
170
+ --mat-mdc-form-field-label-offset-x: 0px;
171
+
172
+ // Fix outline appearance
173
+ &.mat-mdc-form-field-has-icon-prefix {
174
+ .mat-mdc-text-field-wrapper {
175
+ --mat-mdc-form-field-label-offset-x: var(--mdc-icon-button-icon-size, 24px);
176
+ }
177
+ }
178
+
179
+ .mat-mdc-radio-group {
180
+ display: inline-flex;
165
181
 
166
- .mat-mdc-radio-button {
167
- padding-left: 8px;
182
+ .mat-mdc-radio-button:not(:first-child) {
183
+ padding-left: 4px !important;
184
+ }
185
+
186
+ .mat-mdc-radio-touch-target {
187
+ height: var(--mdc-radio-radio-touch-target-size, 48px);
188
+ width: var(--mdc-radio-radio-touch-target-size, 48px);
189
+ }
168
190
  }
191
+
169
192
  }
170
193
 
171
194
  // Increase padding top, when having buttons
@@ -206,6 +229,7 @@ form.form-container {
206
229
  }
207
230
  }
208
231
 
232
+ // Ckeckbox
209
233
  .mat-mdc-checkbox {
210
234
  --mdc-form-field-label-text-color: var(--app-form-color);
211
235
  --mdc-checkbox-unselected-icon-color: var(--app-form-color);
@@ -214,6 +238,26 @@ form.form-container {
214
238
  --mdc-checkbox-unselected-pressed-icon-color: var(--app-form-color);
215
239
  }
216
240
 
241
+ // Radio
242
+ .mat-mdc-radio-button {
243
+ --mdc-form-field-label-text-color: var(--app-form-color);
244
+
245
+ --mdc-radio-disabled-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
246
+ --mdc-radio-disabled-selected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
247
+ --mdc-radio-unselected-hover-icon-color: var(--app-form-color);
248
+ --mdc-radio-unselected-focus-icon-color: var(--app-form-color);
249
+ --mdc-radio-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
250
+ --mdc-radio-unselected-pressed-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
251
+ --mdc-radio-selected-hover-icon-color: var(--ion-color-accent);
252
+ --mdc-radio-selected-icon-color: var(--ion-color-accent);
253
+ --mdc-radio-selected-focus-icon-color: var(--ion-color-primary);
254
+ --mdc-radio-selected-pressed-icon-color: var(--ion-color-accent);
255
+ --mat-radio-ripple-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);;
256
+ --mat-radio-checked-ripple-color: var(--ion-color-accent);
257
+ --mat-radio-disabled-label-color: var(--app-form-color-disabled, rgba(black, 0.38));
258
+ }
259
+
260
+ // Slide
217
261
  .mat-mdc-slide-toggle {
218
262
  --mdc-switch-selected-focus-handle-color: var(--ion-color-accent);
219
263
  --mdc-switch-selected-icon-color: var(--ion-color-accent-contrast);
package/src/theme/_ngx-components.globals.scss CHANGED
@@ -10,6 +10,7 @@ $app-table-row-max-height: 52px !default;
10
10
  $app-paginator-height: 34px !default;
11
11
  $app-form-buttons-bar-height: 56px !default;
12
12
  $app-form-color: rgba(0, 0, 0, 0.87) !default;
13
+ $app-form-color-rgb: 0, 0, 0 !default;
13
14
  $app-form-color-disabled: rgba(0, 0, 0, 0.55) !default;
14
15
  $app-form-color-computed: var(--ion-color-primary-tint) !default;
15
16
  $app-form-field-background-color: #f5f5f5 !default; // Form's field background
package/src/theme/_theme.variables.scss CHANGED
@@ -90,7 +90,8 @@ html.dark {
90
90
  --ion-backdrop-color-rgb: 255, 255, 255;
91
91
 
92
92
  --app-form-color-disabled: #949494;
93
- --app-form-color: var(--ion-color-light-contrast);
93
+ --app-form-color: rgba(255,255,255,0.87);
94
+ --app-form-color-rgb: 255, 255, 255;
94
95
  --app-form-field-background-color: var(--ion-color-light-tint);
95
96
  --app-form-field-background-color-shade: #282828;
96
97
  --app-form-field-disabled-background-color: #282828;