@sumaris-net/ngx-components 2.7.3-rc44 → 2.7.3-rc46

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/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.7.3-rc44",
4
+ "version": "2.7.3-rc46",
5
5
  "author": "contact@e-is.pro",
6
6
  "license": "AGPL-3.0",
7
7
  "readmeFilename": "README.md",
@@ -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.7.3-rc44",
5
+ "version": "2.7.3-rc46",
6
6
  "default_locale": "fr",
7
7
  "description": "Angular components for building beautiful and responsive Apps",
8
8
  "icons": [{
@@ -0,0 +1,202 @@
1
+
2
+ // --------------------------------------------------
3
+ // Material Forms
4
+ // --------------------------------------------------
5
+ .form-container,
6
+ form.form-container {
7
+ color: #{$app-form-color};
8
+ @include font-size(16px);
9
+
10
+ --mdc-filled-text-field-container-color: var(--app-form-field-background-color);
11
+ --mdc-filled-text-field-disabled-container-color: var(--app-form-field-disabled-background-color);
12
+ --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
13
+ --mat-form-field-container-height: 45px;
14
+ --mat-form-field-container-text-size: inherit;
15
+ --mat-form-field-filled-label-display: block;
16
+ --mat-form-field-container-vertical-padding: 8px;
17
+ --mat-form-field-filled-with-label-container-padding-top: 18px;
18
+ --mat-form-field-filled-with-label-container-padding-bottom: 0px;
19
+ --mdc-filled-text-field-label-text-tracking: normal;
20
+ --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
21
+
22
+ .mat-form-field-disabled,
23
+ .mat-mdc-input-element:disabled {
24
+ color: #{$app-form-color-disabled} !important;
25
+ }
26
+
27
+ .mat-form-field-disabled {
28
+ .mat-mdc-form-field-infix {
29
+ min-height: var(--mat-form-field-container-height);
30
+ }
31
+ }
32
+
33
+ mat-form-field,
34
+ mat-autocomplete-field,
35
+ app-form-field {
36
+ width: 100%;
37
+ }
38
+
39
+ .mat-mdc-form-field {
40
+ &:not(.mat-mdc-form-field-has-icon-prefix) {
41
+ .mdc-text-field {
42
+ padding-left: 4px;
43
+ }
44
+ }
45
+
46
+ ion-icon[matPrefix],
47
+ mat-icon[matPrefix],
48
+ .mat-mdc-form-field-icon-prefix {
49
+
50
+ --mdc-icon-button-icon-size: 24px;
51
+ --mdc-icon-button-icon-color: inherit;
52
+ --mdc-icon-button-state-layer-size: 48px;
53
+ --mdc-icon-button-margin-vertical: 12px;
54
+
55
+ ion-icon, .mat-icon {
56
+ font-size: var(--mdc-icon-button-icon-size) !important;
57
+ line-height: 1.125;
58
+ height: var(--mdc-icon-button-icon-size);
59
+ width: var(--mdc-icon-button-icon-size);
60
+ margin-left: var(--mdc-icon-button-margin-vertical);
61
+ margin-right: var(--mdc-icon-button-margin-vertical);
62
+ position: relative;
63
+ color: var(--mdc-icon-button-icon-color);
64
+ fill: var(--mdc-icon-button-icon-color);
65
+ }
66
+ }
67
+
68
+ ion-icon[matSuffix],
69
+ mat-icon[matSuffix],
70
+ .mat-mdc-form-field-icon-suffix {
71
+ white-space: nowrap;
72
+
73
+ .mat-mdc-icon-button {
74
+ --mdc-icon-button-state-layer-size: 24px;
75
+ --mdc-icon-button-icon-size: 16px;
76
+ --mdc-icon-button-padding: 4px;
77
+ padding: var(--mdc-icon-button-padding);
78
+
79
+ &.large {
80
+ --mdc-icon-button-state-layer-size: 48px;
81
+ --mdc-icon-button-icon-size: 24px;
82
+ --mdc-icon-button-padding: 12px;
83
+ }
84
+
85
+ ion-icon, .mat-icon {
86
+ height: var(--mdc-icon-button-icon-size);
87
+ width: var(--mdc-icon-button-icon-size);
88
+ font-size: var(--mdc-icon-button-icon-size);
89
+ }
90
+
91
+ .mat-mdc-button-touch-target {
92
+ width: var(--mdc-icon-button-state-layer-size);
93
+ }
94
+ }
95
+
96
+ ion-icon, .mat-icon {
97
+
98
+ &.large {
99
+ $font-size: calculateRem(14px);
100
+ font-size: $font-size;
101
+ line-height: 1.125;
102
+ }
103
+ }
104
+
105
+ }
106
+
107
+ // When field use choice button, reduce the font size, and optimize layout
108
+ button.mat-mdc-form-field-button,
109
+ ion-button.mat-mdc-form-field-button {
110
+ @include font-size-important(12px);
111
+ margin: 0;
112
+ white-space: normal;
113
+ }
114
+
115
+ // Used to customize mat-boolean-field
116
+ &.mat-boolean-field-checkbox {
117
+ --mdc-checkbox-state-layer-size: 20px;
118
+
119
+ .mat-mdc-form-field-infix {
120
+ padding-top: 16px;
121
+ }
122
+
123
+ .mdc-floating-label {
124
+ transform: unset !important;
125
+ padding-left: 30px;
126
+ top: 20px;
127
+ }
128
+ }
129
+
130
+ &.mat-boolean-field-radio {
131
+ --mdc-radio-state-layer-size: 20px;
132
+
133
+ .mat-mdc-radio-button {
134
+ padding-left: 8px;
135
+ }
136
+ }
137
+
138
+ &.mat-boolean-field-button {
139
+ .mat-mdc-form-field-infix {
140
+ padding-top: 0;
141
+ padding-bottom: 0;
142
+ }
143
+ }
144
+ }
145
+
146
+ .mat-mdc-form-field-subscript-wrapper {
147
+ mat-hint {
148
+ --color: rgb(115,115,115);
149
+ color: var(--color);
150
+ }
151
+ }
152
+
153
+ /* -- Computed field -- */
154
+
155
+ // Set color on computed field (if enable or disable)
156
+ .computed .mat-mdc-form-field,
157
+ .mat-mdc-form-field .computed,
158
+ .mat-mdc-form-field.computed,
159
+ .computed .mat-mdc-form-field .mat-mdc-input-element:disabled,
160
+ .mat-mdc-form-field .computed .mat-mdc-input-element:disabled,
161
+ .mat-mdc-form-field.computed .mat-mdc-input-element:disabled {
162
+ color: var(--ion-color-primary-tint) !important;
163
+ font-style: italic;
164
+ }
165
+
166
+ /* MatSwipeField */
167
+ mat-swipe-field {
168
+
169
+ .mdc-floating-label--float-above {
170
+ transform: translateY(-106%) translateX(40px) scale(0.75) !important;
171
+ }
172
+ }
173
+
174
+
175
+ }
176
+ // Manage first child grid inside a form
177
+ form.form-container > ion-grid,
178
+ ion-grid.form-container {
179
+ padding: 0;
180
+
181
+ & > ion-row {
182
+ // No between grid rows
183
+ padding: 0;
184
+
185
+ & > ion-col {
186
+
187
+ // No top/bottom padding between grid cell
188
+ padding-bottom: 0;
189
+ padding-top: 0;
190
+
191
+ & > ion-label {
192
+ color: var(--ion-color-primary100);
193
+ padding-inline-end: 5px;
194
+ }
195
+
196
+ & > ion-label[text-wrap] {
197
+ word-wrap: normal;
198
+ white-space: normal;
199
+ }
200
+ }
201
+ }
202
+ }
@@ -126,206 +126,6 @@ ion-menu.menu-side-left {
126
126
  }
127
127
  }
128
128
 
129
- // --------------------------------------------------
130
- // Material Forms
131
- // --------------------------------------------------
132
- .form-container,
133
- form.form-container {
134
- color: #{$app-form-color};
135
- @include font-size(16px);
136
-
137
- --mdc-filled-text-field-container-color: var(--app-form-field-background-color);
138
- --mdc-filled-text-field-disabled-container-color: var(--app-form-field-disabled-background-color);
139
- --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
140
- --mat-form-field-container-height: 45px;
141
- --mat-form-field-container-text-size: inherit;
142
- --mat-form-field-filled-label-display: block;
143
- --mat-form-field-container-vertical-padding: 8px;
144
- --mat-form-field-filled-with-label-container-padding-top: 18px;
145
- --mat-form-field-filled-with-label-container-padding-bottom: 0px;
146
- --mdc-filled-text-field-label-text-tracking: normal;
147
- --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
148
-
149
- .mat-form-field-disabled,
150
- .mat-mdc-input-element:disabled {
151
- color: #{$app-form-color-disabled} !important;
152
- }
153
-
154
- .mat-form-field-disabled {
155
- .mat-mdc-form-field-infix {
156
- min-height: 41px;
157
- }
158
- }
159
-
160
- mat-form-field,
161
- mat-autocomplete-field,
162
- app-form-field {
163
- width: 100%;
164
- }
165
-
166
- .mat-mdc-form-field {
167
-
168
- &:not(.mat-mdc-form-field-has-icon-prefix) {
169
- .mdc-text-field {
170
- padding-left: 4px;
171
- }
172
- }
173
-
174
- ion-icon[matPrefix],
175
- mat-icon[matPrefix],
176
- .mat-mdc-form-field-icon-prefix {
177
-
178
- --mdc-icon-button-icon-size: 24px;
179
- --mdc-icon-button-icon-color: inherit;
180
- --mdc-icon-button-state-layer-size: 48px;
181
- --mdc-icon-button-margin-vertical: 12px;
182
-
183
- ion-icon, .mat-icon {
184
- font-size: var(--mdc-icon-button-icon-size) !important;
185
- line-height: 1.125;
186
- height: var(--mdc-icon-button-icon-size);
187
- width: var(--mdc-icon-button-icon-size);
188
- margin-left: var(--mdc-icon-button-margin-vertical);
189
- margin-right: var(--mdc-icon-button-margin-vertical);
190
- position: relative;
191
- color: var(--mdc-icon-button-icon-color);
192
- fill: var(--mdc-icon-button-icon-color);
193
- }
194
- }
195
-
196
- ion-icon[matSuffix],
197
- mat-icon[matSuffix],
198
- .mat-mdc-form-field-icon-suffix {
199
- white-space: nowrap;
200
-
201
- .mat-mdc-icon-button {
202
- --mdc-icon-button-state-layer-size: 24px;
203
- --mdc-icon-button-icon-size: 16px;
204
- --mdc-icon-button-padding: 4px;
205
- padding: var(--mdc-icon-button-padding);
206
-
207
- &.large {
208
- --mdc-icon-button-state-layer-size: 48px;
209
- --mdc-icon-button-icon-size: 24px;
210
- --mdc-icon-button-padding: 12px;
211
- }
212
-
213
- ion-icon, .mat-icon {
214
- height: var(--mdc-icon-button-icon-size);
215
- width: var(--mdc-icon-button-icon-size);
216
- font-size: var(--mdc-icon-button-icon-size);
217
- }
218
-
219
- .mat-mdc-button-touch-target {
220
- width: var(--mdc-icon-button-state-layer-size);
221
- }
222
- }
223
-
224
- ion-icon, .mat-icon {
225
-
226
- &.large {
227
- $font-size: calculateRem(14px);
228
- font-size: $font-size;
229
- line-height: 1.125;
230
- }
231
- }
232
-
233
- }
234
-
235
- // When field use choice button, reduce the font size, and optimize layout
236
- button.mat-mdc-form-field-button,
237
- ion-button.mat-mdc-form-field-button {
238
- @include font-size-important(12px);
239
- margin: 0;
240
- white-space: normal;
241
- }
242
-
243
- // Used to customize mat-boolean-field
244
- &.mat-boolean-field-checkbox {
245
- --mdc-checkbox-state-layer-size: 20px;
246
-
247
- .mat-mdc-form-field-infix {
248
- padding-top: 16px;
249
- }
250
-
251
- .mdc-floating-label {
252
- transform: unset !important;
253
- padding-left: 30px;
254
- top: 20px;
255
- }
256
- }
257
-
258
- &.mat-boolean-field-radio {
259
- --mdc-radio-state-layer-size: 20px;
260
-
261
- .mat-mdc-radio-button {
262
- padding-left: 8px;
263
- }
264
- }
265
-
266
- &.mat-boolean-field-button {
267
- .mat-mdc-form-field-infix {
268
- padding-top: 0;
269
- padding-bottom: 0;
270
- }
271
- }
272
- }
273
-
274
- .mat-mdc-form-field-subscript-wrapper {
275
- mat-hint {
276
- --color: rgb(115,115,115);
277
- color: var(--color);
278
- }
279
- }
280
-
281
- /* -- Computed field -- */
282
-
283
- // Set color on computed field (if enable or disable)
284
- .computed .mat-mdc-form-field,
285
- .mat-mdc-form-field .computed,
286
- .mat-mdc-form-field.computed,
287
- .computed .mat-mdc-form-field .mat-mdc-input-element:disabled,
288
- .mat-mdc-form-field .computed .mat-mdc-input-element:disabled,
289
- .mat-mdc-form-field.computed .mat-mdc-input-element:disabled {
290
- color: var(--ion-color-primary-tint) !important;
291
- font-style: italic;
292
- }
293
-
294
- /* MatSwipeField */
295
- mat-swipe-field {
296
-
297
- .mdc-floating-label--float-above {
298
- transform: translateY(-106%) translateX(40px) scale(0.75) !important;
299
- }
300
-
301
- }
302
- }
303
- // Manage first child grid inside a form
304
- form.form-container > ion-grid,
305
- ion-grid.form-container {
306
- padding: 0;
307
-
308
- ion-row {
309
- // No between grid rows
310
- padding: 0;
311
-
312
- ion-col > ion-label {
313
- color: var(--ion-color-primary100);
314
- padding-inline-end: 5px;
315
- }
316
-
317
- ion-col > ion-label[text-wrap] {
318
- word-wrap: normal;
319
- white-space: normal;
320
- }
321
- }
322
- ion-row > ion-col {
323
-
324
- // No top/bottom padding between grid cell
325
- padding-bottom: 0;
326
- padding-top: 0;
327
- }
328
- }
329
129
 
330
130
  mat-form-field {
331
131
 
@@ -334,17 +134,6 @@ mat-form-field {
334
134
  }
335
135
  }
336
136
 
337
-
338
- // --- mat-date-time
339
- mat-date-time-field {
340
- //@include font-size-important(16px);
341
-
342
- // Need for errors injected using the <ng-content> tag
343
- //mat-error {
344
- // text-align: end;
345
- //}
346
- }
347
-
348
137
  // --- mat-date-short-field
349
138
  mat-calendar.mat-date-short-panel {
350
139
  // Hide some buttons (e.g. to change the period)
@@ -173,6 +173,11 @@
173
173
  min-width: 155px;
174
174
  max-width: 180px;
175
175
 
176
+ mat-date-time-field {
177
+ ion-col.day {
178
+ min-width: unset !important; // make sure column is resizable
179
+ }
180
+ }
176
181
  input {
177
182
  max-width: 120px;
178
183
  overflow: visible !important;
@@ -189,7 +194,9 @@
189
194
  width: var(--mat-column-actions-width, 48px); // 48px = a button width
190
195
  max-width: var(--mat-column-actions-max-width, 48px); // 48px = a button width
191
196
  padding-inline-start: 0 !important; // No start padding
192
- padding-right: unset !important;
197
+ padding-inline-end: 0; // No end padding
198
+ padding-right: unset !important; // use padding-inline-start instead
199
+ padding-left: unset !important; // use padding-inline-end instead
193
200
  color: unset; // Remove row color (let the button decide)
194
201
  }
195
202
 
@@ -434,18 +441,22 @@
434
441
  padding-top: 0.4em;
435
442
  }
436
443
 
437
- mat-date-time-field,
438
- mat-latlong-field {
439
- height: calc(var(--mat-row-height) - 2px);
440
- }
441
444
 
442
445
  mat-date-time-field {
446
+ height: calc(var(--mat-row-height) - 2px);
447
+ ion-col.day {
448
+ min-width: unset !important; // make sure column is resizable
449
+ }
443
450
  ion-col.hour {
444
451
  --max-width: var(--min-width) !important;
445
452
  }
446
453
  }
447
454
 
448
455
  mat-latlong-field {
456
+ height: calc(var(--mat-row-height) - 2px);
457
+ ion-col.text {
458
+ min-width: unset !important; // make sure column is resizable
459
+ }
449
460
  ion-col.sign {
450
461
  --min-width: 35px !important;
451
462
  --max-width: 45px !important;
@@ -34,3 +34,4 @@ $roboto-font-path: '~roboto-fontface/fonts/roboto';
34
34
  @import "ngx-components";
35
35
  @import "ngx-components.tabs";
36
36
  @import "ngx-components.table";
37
+ @import "ngx-components.forms";