@sumaris-net/ngx-components 2.11.3 → 2.11.5

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 (15) hide show
  1. package/esm2022/src/app/core/services/model/referential.model.mjs +4 -2
  2. package/esm2022/src/app/shared/material/boolean/material.boolean.mjs +110 -80
  3. package/esm2022/src/app/shared/material/boolean/testing/boolean.test.page.mjs +6 -5
  4. package/esm2022/src/app/shared/services/translate-context.service.mjs +2 -2
  5. package/esm2022/src/app/shared/validator/form-error-adapter.class.mjs +9 -6
  6. package/fesm2022/sumaris-net.ngx-components.mjs +120 -87
  7. package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
  8. package/package.json +1 -1
  9. package/src/app/shared/material/boolean/material.boolean.d.ts +22 -6
  10. package/src/app/shared/validator/form-error-adapter.class.d.ts +5 -2
  11. package/src/assets/manifest.json +1 -1
  12. package/src/theme/_mixins.scss +14 -11
  13. package/src/theme/_ngx-components.forms.scss +47 -4
  14. package/src/theme/_ngx-components.globals.scss +7 -9
  15. package/src/theme/_theme.variables.scss +0 -8
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.3",
4
+ "version": "2.11.5",
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/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.3",
5
+ "version": "2.11.5",
6
6
  "default_locale": "fr",
7
7
  "description": "Angular components for building beautiful and responsive Apps",
8
8
  "icons": [{
package/src/theme/_mixins.scss CHANGED
@@ -102,17 +102,17 @@
102
102
  @include generate-color-list($color-name);
103
103
  }
104
104
 
105
- --ion-text-color: #{$text-color};
106
- --ion-text-color-rgb: #{$text-color-rgb};
105
+ --ion-text-color: #{$text-color-value};
106
+ --ion-text-color-rgb: #{$text-color-rgb-value};
107
107
  --ion-grid-column-padding: #{$ion-grid-column-padding};
108
108
  --ion-padding: #{$ion-padding};
109
109
  --ion-margin: #{$ion-margin};
110
- --ion-background-color: #{$background-color};
111
- --ion-background-color-rgb: #{$background-color-rgb};
110
+ --ion-background-color: #{$background-color-value};
111
+ --ion-background-color-rgb: #{$background-color-rgb-value};
112
112
  --ion-toolbar-height: #{$ion-toolbar-height};
113
113
  --ion-toolbar-background: #{$ion-toolbar-background};
114
- --ion-backdrop-color: #000000;
115
- --ion-backdrop-color-rgb: 0, 0, 0;
114
+ --ion-backdrop-color: #{$text-color};
115
+ --ion-backdrop-color-rgb: #{$text-color-rgb};
116
116
  --ion-backdrop-opacity: 0.32;
117
117
 
118
118
  --expansion-panel-padding: var(--ion-padding);
@@ -134,6 +134,7 @@
134
134
  --app-footer-height: var(--app-form-buttons-bar-height);
135
135
  --app-form-buttons-bar-height: #{$app-form-buttons-bar-height};
136
136
  --app-form-color: #{$app-form-color};
137
+ --app-form-color-rgb: #{$app-form-color-rgb};
137
138
  --app-form-color-disabled: #{$app-form-color-disabled};
138
139
  --app-form-color-computed: #{$app-form-color-computed};
139
140
  --app-form-field-background-color: #{$app-form-field-background-color};
@@ -152,7 +153,6 @@
152
153
  --app-form-buttons-bar-height: 0px;
153
154
  --app-footer-height: 0px;
154
155
 
155
-
156
156
  }
157
157
 
158
158
  @mixin css-variables-to-root-dark() {
@@ -165,10 +165,13 @@
165
165
  @include generate-dark-color-list($color-name);
166
166
  }
167
167
 
168
- //--ion-text-color: #{$background-color-value};
169
- //--ion-text-color-rgb: #{$background-color-rgb-value};
170
- //--ion-background-color: #{$text-color-value};
171
- //--ion-background-color-rgb: #{$text-color-rgb-value};
168
+ // Inverse background/text color
169
+ --ion-background-color: #{$text-color-value};
170
+ --ion-background-color-rgb: #{$text-color-rgb-value};
171
+ --ion-text-color: #{$background-color-value};
172
+ --ion-text-color-rgb: #{$background-color-rgb-value};
173
+ //--app-form-color: #{$background-color-value};
174
+ --app-form-color-rgb: #{$background-color-rgb-value};
172
175
 
173
176
  // Step colors
174
177
  --ion-color-step-50: #{$text-color-step-50};
package/src/theme/_ngx-components.forms.scss CHANGED
@@ -4,9 +4,10 @@
4
4
  // --------------------------------------------------
5
5
  .form-container,
6
6
  form.form-container {
7
- color: var(--ion-text-color);
8
7
  @include font-size(16px);
9
8
 
9
+ --mdc-icon-button-icon-color: var(--app-form-field-label-color);
10
+
10
11
  --mdc-filled-text-field-container-color: var(--app-form-field-background-color);
11
12
  --mdc-filled-text-field-disabled-container-color: var(--app-form-field-disabled-background-color);
12
13
  --mdc-filled-text-field-input-text-color: var(--ion-text-color);
@@ -35,6 +36,7 @@ form.form-container {
35
36
  --mdc-outlined-text-field-focus-label-text-color: var(--ion-color-primary);
36
37
  --mdc-outlined-text-field-focus-outline-color: var(--ion-color-primary);
37
38
 
39
+ --mdc-form-field-label-text-color: var(--ion-text-color);
38
40
  --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
39
41
  --mat-form-field-container-height: 45px;
40
42
  --mat-form-field-container-text-size: inherit;
@@ -46,12 +48,13 @@ form.form-container {
46
48
  --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
47
49
  --mat-select-enabled-trigger-text-color: var(--ion-text-color);
48
50
  --mat-select-disabled-trigger-text-color: var(--app-form-color-disabled);
49
- --mdc-form-field-label-text-color: var(--ion-text-color);
51
+
50
52
  --mdc-switch-selected-track-color: var(--app-form-field-background-color-shade);
51
53
  --mdc-switch-unselected-track-color: var(--app-form-field-background-color-shade);
52
54
  --mdc-switch-selected-hover-track-color: var(--app-form-field-background-color-shade);
53
55
  --mdc-switch-unselected-hover-track-color: var(--app-form-field-background-color-shade);
54
56
 
57
+
55
58
  .mat-form-field-disabled,
56
59
  .mat-mdc-input-element:disabled {
57
60
  color: var(--app-form-color-disabled, #{$app-form-color-disabled}) !important;
@@ -162,10 +165,29 @@ form.form-container {
162
165
 
163
166
  &.mat-boolean-field-radio {
164
167
  --mdc-radio-state-layer-size: 20px;
168
+ --mdc-radio-radio-touch-target-size: 24px;
169
+ --mat-mdc-form-field-label-offset-x: 0px;
165
170
 
166
- .mat-mdc-radio-button {
167
- padding-left: 8px;
171
+ // Fix outline appearance
172
+ &.mat-mdc-form-field-has-icon-prefix {
173
+ .mat-mdc-text-field-wrapper {
174
+ --mat-mdc-form-field-label-offset-x: var(--mdc-icon-button-icon-size, 24px);
175
+ }
168
176
  }
177
+
178
+ .mat-mdc-radio-group {
179
+ display: inline-flex;
180
+
181
+ .mat-mdc-radio-button:not(:first-child) {
182
+ padding-left: 4px !important;
183
+ }
184
+
185
+ .mat-mdc-radio-touch-target {
186
+ height: var(--mdc-radio-radio-touch-target-size, 48px);
187
+ width: var(--mdc-radio-radio-touch-target-size, 48px);
188
+ }
189
+ }
190
+
169
191
  }
170
192
 
171
193
  // Increase padding top, when having buttons
@@ -206,6 +228,7 @@ form.form-container {
206
228
  }
207
229
  }
208
230
 
231
+ // Ckeckbox
209
232
  .mat-mdc-checkbox {
210
233
  --mdc-form-field-label-text-color: var(--app-form-color);
211
234
  --mdc-checkbox-unselected-icon-color: var(--app-form-color);
@@ -214,6 +237,26 @@ form.form-container {
214
237
  --mdc-checkbox-unselected-pressed-icon-color: var(--app-form-color);
215
238
  }
216
239
 
240
+ // Radio
241
+ .mat-mdc-radio-button {
242
+ --mdc-form-field-label-text-color: var(--app-form-color);
243
+
244
+ --mdc-radio-disabled-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
245
+ --mdc-radio-disabled-selected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
246
+ --mdc-radio-unselected-hover-icon-color: var(--app-form-color);
247
+ --mdc-radio-unselected-focus-icon-color: var(--app-form-color);
248
+ --mdc-radio-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
249
+ --mdc-radio-unselected-pressed-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
250
+ --mdc-radio-selected-hover-icon-color: var(--ion-color-accent);
251
+ --mdc-radio-selected-icon-color: var(--ion-color-accent);
252
+ --mdc-radio-selected-focus-icon-color: var(--ion-color-primary);
253
+ --mdc-radio-selected-pressed-icon-color: var(--ion-color-accent);
254
+ --mat-radio-ripple-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);;
255
+ --mat-radio-checked-ripple-color: var(--ion-color-accent);
256
+ --mat-radio-disabled-label-color: var(--app-form-color-disabled, rgba(black, 0.38));
257
+ }
258
+
259
+ // Slide
217
260
  .mat-mdc-slide-toggle {
218
261
  --mdc-switch-selected-focus-handle-color: var(--ion-color-accent);
219
262
  --mdc-switch-selected-icon-color: var(--ion-color-accent-contrast);
package/src/theme/_ngx-components.globals.scss CHANGED
@@ -9,20 +9,18 @@ $app-table-row-max-height: 52px !default;
9
9
 
10
10
  $app-paginator-height: 34px !default;
11
11
  $app-form-buttons-bar-height: 56px !default;
12
- $app-form-color: rgba(0, 0, 0, 0.87) !default;
13
- $app-form-color-disabled: rgba(0, 0, 0, 0.55) !default;
12
+ $app-form-color: #{$text-color} !default;
13
+ $app-form-color-rgb: #{$text-color-rgb} !default;
14
+ $app-form-color-disabled: rgba(#{$text-color-rgb}, 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
16
17
  $app-form-color-background-color-shade: #b9b9b9 !default;
17
18
  $app-form-field-disabled-background-color: #fafafa !default;
18
- $app-form-field-label-color: rgba(0, 0, 0, 0.6) !default;
19
- $app-form-field-disabled-label-color: rgba(0, 0, 0, 0.38) !default;
19
+ $app-form-field-label-color: rgba(#{$text-color-rgb}, 0.6) !default;
20
+ $app-form-field-disabled-label-color: rgba(#{$text-color-rgb}, 0.38) !default;
20
21
 
21
- $app-select-option-border-color: rgba(0, 0, 0, 0.12) !default;
22
- $app-table-border-color: rgba(0, 0, 0, 0.08) !default;
22
+ $app-select-option-border-color: rgba(#{$text-color-rgb}, 0.12) !default;
23
+ $app-table-border-color: rgba(#{$text-color-rgb}, 0.08) !default;
23
24
  $app-table-row-item-selected-background-color: var(--ion-color-secondary100) !default;
24
25
  $app-table-row-item-selected-text-color: var(--ion-color-secondary100-contrast) !default;
25
26
 
26
- // Form fields background : transparent
27
- //$app-form-field-background-color: transparent !default;
28
- //$app-form-field-disabled-background-color: transparent !default;
package/src/theme/_theme.variables.scss CHANGED
@@ -79,18 +79,10 @@ html.dark {
79
79
  --ion-color-light-shade: #1e2023;
80
80
  --ion-color-light-tint: #383a3e;
81
81
 
82
- --ion-text-color: rgba(255,255,255,0.87);
83
- --ion-text-color-rgb: 255, 255, 255;
84
- --ion-background-color: #000000;
85
- --ion-background-color-rgb: 0, 0, 0;
86
82
  --ion-toolbar-background: #1f1f1f;
87
83
  --ion-border-color: #222222;
88
- --ion-backdrop-color: #ffffff;
89
84
  --ion-backdrop-opacity: 0.15;
90
- --ion-backdrop-color-rgb: 255, 255, 255;
91
85
 
92
- --app-form-color-disabled: #949494;
93
- --app-form-color: var(--ion-color-light-contrast);
94
86
  --app-form-field-background-color: var(--ion-color-light-tint);
95
87
  --app-form-field-background-color-shade: #282828;
96
88
  --app-form-field-disabled-background-color: #282828;