@sumaris-net/ngx-components 2.10.0 → 2.11.0

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 (8) hide show
  1. package/doc/changelog.md +3 -0
  2. package/esm2022/src/app/core/graphql/graphql.service.mjs +2 -2
  3. package/fesm2022/sumaris-net.ngx-components.mjs +1 -1
  4. package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/assets/manifest.json +1 -1
  7. package/src/theme/_ngx-components.forms.scss +9 -2
  8. package/src/theme/_theme.variables.scss +100 -86
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.10.0",
4
+ "version": "2.11.0",
5
5
  "author": "contact@e-is.pro",
6
6
  "license": "AGPL-3.0",
7
7
  "readmeFilename": "README.md",
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.10.0",
5
+ "version": "2.11.0",
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
@@ -34,7 +34,7 @@ form.form-container {
34
34
 
35
35
  .mat-form-field-disabled,
36
36
  .mat-mdc-input-element:disabled {
37
- color: #{$app-form-color-disabled} !important;
37
+ color: var(--app-form-color-disabled, #{$app-form-color-disabled}) !important;
38
38
  }
39
39
 
40
40
  .mat-form-field-disabled {
@@ -188,6 +188,10 @@ form.form-container {
188
188
 
189
189
  .mat-mdc-checkbox {
190
190
  --mdc-form-field-label-text-color: var(--app-form-color);
191
+ --mdc-checkbox-unselected-icon-color: var(--app-form-color);
192
+ --mdc-checkbox-unselected-focus-icon-color: var(--app-form-color);
193
+ --mdc-checkbox-unselected-hover-icon-color: var(--app-form-color);
194
+ --mdc-checkbox-unselected-pressed-icon-color: var(--app-form-color);
191
195
  }
192
196
 
193
197
  .mat-mdc-slide-toggle {
@@ -271,12 +275,15 @@ ion-grid.form-container {
271
275
 
272
276
  // Dark mode mode
273
277
  html.dark {
278
+ div.mat-mdc-autocomplete-panel,
274
279
  div.mat-mdc-select-panel {
275
- --mat-select-panel-background-color: var(--ion-color-light);
280
+ --mat-select-panel-background-color: var(--ion-color-step-100);
281
+ --mat-autocomplete-background-color: var(--ion-color-step-100);
276
282
 
277
283
  .mat-mdc-option {
278
284
  --mat-option-label-text-color: var(--ion-text-color);
279
285
  --mat-option-selected-state-label-text-color: var(--ion-color-primary);
286
+ --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--ion-color-primary);
280
287
  color: var(--mat-option-label-text-color) !important;
281
288
  }
282
289
  }
package/src/theme/_theme.variables.scss CHANGED
@@ -6,90 +6,25 @@ html {
6
6
  @include css-variables-to-root-mobile();
7
7
  }
8
8
 
9
- &.dark {
10
-
11
- @include css-variables-to-root-dark();
12
-
13
- --ion-color-primary: #428cff;
14
- --ion-color-primary-rgb: 66, 140, 255;
15
- --ion-color-primary-contrast: #ffffff;
16
- --ion-color-primary-contrast-rgb: 255, 255, 255;
17
- --ion-color-primary-shade: #3a7be0;
18
- --ion-color-primary-tint: #5598ff;
19
-
20
- --ion-color-secondary: #75C4FD;
21
- --ion-color-secondary-rgb: 117, 196, 253;
22
- --ion-color-secondary-contrast: #ffffff;
23
- --ion-color-secondary-contrast-rgb: 255, 255, 255;
24
- --ion-color-secondary-shade: #46b0e0;
25
- --ion-color-secondary-tint: #62ceff;
26
-
27
- --ion-color-tertiary: #6a64ff;
28
- --ion-color-tertiary-rgb: 106, 100, 255;
29
- --ion-color-tertiary-contrast: #ffffff;
30
- --ion-color-tertiary-contrast-rgb: 255, 255, 255;
31
- --ion-color-tertiary-shade: #5d58e0;
32
- --ion-color-tertiary-tint: #7974ff;
33
-
34
- --ion-color-success: #2fdf75;
35
- --ion-color-success-rgb: 47, 223, 117;
36
- --ion-color-success-contrast: #000000;
37
- --ion-color-success-contrast-rgb: 0, 0, 0;
38
- --ion-color-success-shade: #29c467;
39
- --ion-color-success-tint: #44e283;
40
-
41
- --ion-color-warning: #FF6434;
42
- --ion-color-warning-rgb: 255, 100, 52;
43
- --ion-color-warning-contrast: #000000;
44
- --ion-color-warning-contrast-rgb: 0, 0, 0;
45
- --ion-color-warning-shade: #E0BB4B;
46
- --ion-color-warning-tint: #FFDA48;
47
-
48
- --ion-color-danger: #fa0021;
49
- --ion-color-danger-rgb: 255, 0, 33;
50
- --ion-color-danger-contrast: #ffffff;
51
- --ion-color-danger-contrast-rgb: 255, 255, 255;
52
- --ion-color-danger-shade: #e04055;
53
- --ion-color-danger-tint: #ff5b71;
54
-
55
- --ion-color-dark: #f4f5f8;
56
- --ion-color-dark-rgb: 244, 245, 248;
57
- --ion-color-dark-contrast: #000000;
58
- --ion-color-dark-contrast-rgb: 0, 0, 0;
59
- --ion-color-dark-shade: #d7d8da;
60
- --ion-color-dark-tint: #f5f6f9;
61
-
62
- --ion-color-medium: #989aa2;
63
- --ion-color-medium-rgb: 152, 154, 162;
64
- --ion-color-medium-contrast: #000000;
65
- --ion-color-medium-contrast-rgb: 0, 0, 0;
66
- --ion-color-medium-shade: #86888f;
67
- --ion-color-medium-tint: #a2a4ab;
68
-
69
- --ion-color-light: #222428;
70
- --ion-color-light-rgb: 34, 36, 40;
71
- --ion-color-light-contrast: #ffffff;
72
- --ion-color-light-contrast-rgb: 255, 255, 255;
73
- --ion-color-light-shade: #1e2023;
74
- --ion-color-light-tint: #383a3e;
75
-
76
- --mat-select-panel-background-color: var(--ion-color-step-100);
77
-
78
- ion-modal {
79
- --ion-background-color: var(--ion-color-step-100);
80
- --ion-toolbar-background: var(--ion-color-step-150);
81
- --ion-toolbar-border-color: var(--ion-color-step-250);
82
- }
83
-
84
- ion-alert {
85
- --ion-background-color: var(--ion-color-step-100);
86
- }
87
-
88
- ion-menu#menu {
89
- --ion-item-text-color-selected: var(--ion-color-secondary100-contrast);
90
- --ion-item-icon-color-selected: var(--ion-color-secondary100-contrast);
91
- }
92
- }
9
+ --ion-color-step-50: #f3f3f3;
10
+ --ion-color-step-100: #e7e7e7;
11
+ --ion-color-step-150: #dbdbdb;
12
+ --ion-color-step-200: #d0d0d0;
13
+ --ion-color-step-250: #c4c4c4;
14
+ --ion-color-step-300: #b8b8b8;
15
+ --ion-color-step-350: #acacac;
16
+ --ion-color-step-400: #a0a0a0;
17
+ --ion-color-step-450: #949494;
18
+ --ion-color-step-500: #898989;
19
+ --ion-color-step-550: #7d7d7d;
20
+ --ion-color-step-600: #717171;
21
+ --ion-color-step-650: #656565;
22
+ --ion-color-step-700: #595959;
23
+ --ion-color-step-750: #4d4d4d;
24
+ --ion-color-step-800: #414141;
25
+ --ion-color-step-850: #363636;
26
+ --ion-color-step-900: #2a2a2a;
27
+ --ion-color-step-950: #1e1e1e;
93
28
  }
94
29
 
95
30
  /*
@@ -98,12 +33,78 @@ html {
98
33
  */
99
34
 
100
35
  html.dark {
36
+ @include css-variables-to-root-dark();
37
+
38
+ --ion-color-primary: #428cff;
39
+ --ion-color-primary-rgb: 66, 140, 255;
40
+ --ion-color-primary-contrast: #ffffff;
41
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
42
+ --ion-color-primary-shade: #3a7be0;
43
+ --ion-color-primary-tint: #5598ff;
44
+
45
+ /*--ion-color-secondary: #75C4FD;
46
+ --ion-color-secondary-rgb: 117, 196, 253;
47
+ --ion-color-secondary-contrast: #ffffff;
48
+ --ion-color-secondary-contrast-rgb: 255, 255, 255;
49
+ --ion-color-secondary-shade: #46b0e0;
50
+ --ion-color-secondary-tint: #62ceff;*/
51
+
52
+ //--ion-color-tertiary: #6a64ff;
53
+ //--ion-color-tertiary-rgb: 106, 100, 255;
54
+ //--ion-color-tertiary-contrast: #ffffff;
55
+ //--ion-color-tertiary-contrast-rgb: 255, 255, 255;
56
+ //--ion-color-tertiary-shade: #5d58e0;
57
+ //--ion-color-tertiary-tint: #7974ff;
58
+
59
+ --ion-color-success: #2fdf75;
60
+ --ion-color-success-rgb: 47, 223, 117;
61
+ --ion-color-success-contrast: #000000;
62
+ --ion-color-success-contrast-rgb: 0, 0, 0;
63
+ --ion-color-success-shade: #29c467;
64
+ --ion-color-success-tint: #44e283;
65
+
66
+ --ion-color-warning: #FF6434;
67
+ --ion-color-warning-rgb: 255, 100, 52;
68
+ --ion-color-warning-contrast: #000000;
69
+ --ion-color-warning-contrast-rgb: 0, 0, 0;
70
+ --ion-color-warning-shade: #E0BB4B;
71
+ --ion-color-warning-tint: #FFDA48;
72
+
73
+ --ion-color-danger: #fa0021;
74
+ --ion-color-danger-rgb: 255, 0, 33;
75
+ --ion-color-danger-contrast: #ffffff;
76
+ --ion-color-danger-contrast-rgb: 255, 255, 255;
77
+ --ion-color-danger-shade: #e04055;
78
+ --ion-color-danger-tint: #ff5b71;
79
+
80
+ --ion-color-dark: #f4f5f8;
81
+ --ion-color-dark-rgb: 244, 245, 248;
82
+ --ion-color-dark-contrast: #000000;
83
+ --ion-color-dark-contrast-rgb: 0, 0, 0;
84
+ --ion-color-dark-shade: #d7d8da;
85
+ --ion-color-dark-tint: #f5f6f9;
86
+
87
+ --ion-color-medium: #989aa2;
88
+ --ion-color-medium-rgb: 152, 154, 162;
89
+ --ion-color-medium-contrast: #000000;
90
+ --ion-color-medium-contrast-rgb: 0, 0, 0;
91
+ --ion-color-medium-shade: #86888f;
92
+ --ion-color-medium-tint: #a2a4ab;
93
+
94
+ --ion-color-light: #222428;
95
+ --ion-color-light-rgb: 34, 36, 40;
96
+ --ion-color-light-contrast: #ffffff;
97
+ --ion-color-light-contrast-rgb: 255, 255, 255;
98
+ --ion-color-light-shade: #1e2023;
99
+ --ion-color-light-tint: #383a3e;
100
+
101
101
  --ion-background-color: #000000;
102
102
  --ion-background-color-rgb: 0, 0, 0;
103
103
  --ion-toolbar-background: #1f1f1f;
104
104
  --ion-text-color: #ffffff;
105
105
  --ion-text-color-rgb: 255, 255, 255;
106
106
  --ion-border-color: #222222;
107
+ --ion-backdrop-color: #ffffff;
107
108
 
108
109
  --app-form-color-disabled: #949494;
109
110
  --app-form-color: var(--ion-color-light-contrast);
@@ -112,6 +113,21 @@ html.dark {
112
113
  --app-form-field-disabled-background-color: #282828;
113
114
  --app-form-field-label-color: #949494;
114
115
  --app-form-field-disabled-label-color: #7d7d7d;
116
+
117
+ ion-modal {
118
+ --ion-background-color: var(--ion-color-step-100);
119
+ --ion-toolbar-background: var(--ion-color-step-150);
120
+ --ion-toolbar-border-color: var(--ion-color-step-250);
121
+ }
122
+
123
+ ion-alert {
124
+ --ion-background-color: var(--ion-color-step-100);
125
+ }
126
+
127
+ ion-menu#menu {
128
+ --ion-item-text-color-selected: var(--ion-color-secondary100-contrast);
129
+ --ion-item-icon-color-selected: var(--ion-color-secondary100-contrast);
130
+ }
115
131
  }
116
132
 
117
133
  /*
@@ -176,9 +192,7 @@ html.md.dark {
176
192
  --ion-color-step-950: #f3f3f3;
177
193
 
178
194
  --ion-item-background: #1e1e1e;
179
-
180
195
  --ion-tab-bar-background: #1f1f1f;
181
-
182
196
  --ion-card-background: #1e1e1e;
183
197
 
184
198
  ion-menu ion-content {