@lucca-front/ng 16.0.0 → 16.1.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 (50) hide show
  1. package/esm2022/api/lib/select/input/api-select-input.component.mjs +3 -3
  2. package/esm2022/api/lib/select/searcher/api-searcher.component.mjs +5 -5
  3. package/esm2022/date/lib/select/date-select-input.component.mjs +3 -3
  4. package/esm2022/department/lib/select/input/department-select-input.component.mjs +3 -3
  5. package/esm2022/establishment/lib/select/input/establishment-select-input.component.mjs +3 -3
  6. package/esm2022/establishment/lib/select/searcher/establishment-searcher.component.mjs +3 -3
  7. package/esm2022/input/lib/clearer/clearer.component.mjs +3 -3
  8. package/esm2022/modal/lib/modal-panel.component.mjs +5 -5
  9. package/esm2022/option/lib/operator/searcher/option-searcher.component.mjs +3 -3
  10. package/esm2022/option/lib/operator/searcher/tree-option-searcher.component.mjs +3 -3
  11. package/esm2022/qualification/lib/select/input/qualification-select-input.component.mjs +3 -3
  12. package/esm2022/select/lib/input/select-input.component.mjs +2 -2
  13. package/esm2022/simple-select/lib/input/select-input.component.mjs +3 -3
  14. package/esm2022/simple-select/lib/panel/panel.component.mjs +3 -3
  15. package/esm2022/user/lib/picture/user-picture.component.mjs +3 -3
  16. package/esm2022/user/lib/select/input/user-select-input.component.mjs +3 -3
  17. package/esm2022/user/lib/select/searcher/user-searcher.component.mjs +3 -3
  18. package/esm2022/user/lib/tile/user-tile.component.mjs +2 -2
  19. package/fesm2022/lucca-front-ng-api.mjs +6 -6
  20. package/fesm2022/lucca-front-ng-api.mjs.map +1 -1
  21. package/fesm2022/lucca-front-ng-date.mjs +2 -2
  22. package/fesm2022/lucca-front-ng-date.mjs.map +1 -1
  23. package/fesm2022/lucca-front-ng-department.mjs +2 -2
  24. package/fesm2022/lucca-front-ng-department.mjs.map +1 -1
  25. package/fesm2022/lucca-front-ng-establishment.mjs +4 -4
  26. package/fesm2022/lucca-front-ng-establishment.mjs.map +1 -1
  27. package/fesm2022/lucca-front-ng-input.mjs +2 -2
  28. package/fesm2022/lucca-front-ng-input.mjs.map +1 -1
  29. package/fesm2022/lucca-front-ng-modal.mjs +4 -4
  30. package/fesm2022/lucca-front-ng-modal.mjs.map +1 -1
  31. package/fesm2022/lucca-front-ng-option.mjs +4 -4
  32. package/fesm2022/lucca-front-ng-option.mjs.map +1 -1
  33. package/fesm2022/lucca-front-ng-qualification.mjs +2 -2
  34. package/fesm2022/lucca-front-ng-qualification.mjs.map +1 -1
  35. package/fesm2022/lucca-front-ng-select.mjs +2 -2
  36. package/fesm2022/lucca-front-ng-select.mjs.map +1 -1
  37. package/fesm2022/lucca-front-ng-simple-select.mjs +4 -4
  38. package/fesm2022/lucca-front-ng-simple-select.mjs.map +1 -1
  39. package/fesm2022/lucca-front-ng-user.mjs +8 -8
  40. package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
  41. package/material/style/main.scss +1 -1
  42. package/package.json +15 -15
  43. package/src/components/_picker.scss +1 -0
  44. package/src/components/_popover.scss +6 -0
  45. package/src/components/_popup.scss +5 -4
  46. package/src/definitions/option/_option-item.scss +1 -0
  47. package/src/definitions/option/_option-searcher.scss +1 -0
  48. package/src/definitions/select/_select-clearer.scss +22 -53
  49. package/src/definitions/select/_select-input.scss +38 -11
  50. package/src/definitions/user/user-picture.scss +35 -6
package/src/definitions/select/_select-input.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '@lucca-front/icons/src/commons/utils/icon';
2
+ @use '@lucca-front/scss/src/commons/utils/reset';
2
3
 
3
4
  @mixin selectInputStyle {
4
5
  :host {
@@ -18,15 +19,16 @@
18
19
 
19
20
  cursor: pointer;
20
21
  outline: none;
21
- padding: 0;
22
+ padding: 0 !important;
23
+ gap: 0 !important;
22
24
 
23
25
  &::after {
24
26
  @include icon.generate('arrow_south');
25
27
 
26
- color: var(--palettes-700, var(--palettes-primary-700));
28
+ color: var(--palettes-grey-600);
27
29
  bottom: var(--components-select-input-padding-vertical);
28
- font-size: 1.2rem;
29
- line-height: 1.4rem;
30
+ font-size: var(--sizes-M-lineHeight);
31
+ line-height: var(--sizes-M-lineHeight);
30
32
  pointer-events: none;
31
33
  position: absolute;
32
34
  right: var(--components-select-input-padding-horizontal);
@@ -52,17 +54,17 @@
52
54
  .lu-select-value {
53
55
  line-height: var(--sizes-M-lineHeight);
54
56
  min-height: calc(var(--components-select-framed-bottom-padding) + var(--sizes-M-lineHeight));
55
- padding: var(--components-select-input-padding-vertical) 3rem var(--components-select-input-padding-vertical)
57
+ padding: var(--components-select-input-padding-vertical) 3.5rem var(--components-select-input-padding-vertical)
56
58
  var(--components-select-input-padding-horizontal);
57
59
  transition: all var(--commons-animations-durations-standard);
58
60
  display: none;
59
61
  }
60
62
 
61
63
  .lu-select-placeholder {
62
- color: var(--palettes-400, var(--palettes-primary-400));
64
+ color: var(--palettes-grey-400);
63
65
  line-height: var(--sizes-M-lineHeight);
64
66
  min-height: calc(var(--components-select-framed-bottom-padding) + var(--sizes-M-lineHeight));
65
- padding: var(--components-select-input-padding-vertical) 3rem var(--components-select-input-padding-vertical)
67
+ padding: var(--components-select-input-padding-vertical) 3.5rem var(--components-select-input-padding-vertical)
66
68
  var(--components-select-input-padding-horizontal);
67
69
  transition: all var(--commons-animations-durations-standard);
68
70
  overflow: hidden;
@@ -71,9 +73,31 @@
71
73
  }
72
74
 
73
75
  .lu-select-suffix {
76
+ position: absolute;
77
+ bottom: .75rem;
78
+ right: 2.25rem;
79
+ }
80
+
81
+ .lu-select-clearer {
82
+ display: block;
74
83
  position: absolute;
75
- bottom: var(--spacings-XS);
76
- right: 1.6rem;
84
+ width: 1rem;
85
+ height: 1rem;
86
+ background-color: var(--palettes-grey-700);
87
+ bottom: .75rem;
88
+ right: 2.25rem;
89
+ color: var(--colors-white-color);
90
+ padding: 0;
91
+ border-radius: 50%;
92
+ transition: background-color var(--commons-animations-durations-fast) ease;
93
+
94
+ .lucca-icon {
95
+ font-size: var(--sizes-XS-lineHeight);
96
+ }
97
+
98
+ &:hover {
99
+ background-color: var(--palettes-grey-600);
100
+ }
77
101
  }
78
102
 
79
103
  ::ng-deep .lu-select-value {
@@ -112,10 +136,12 @@
112
136
 
113
137
  &::after {
114
138
  line-height: var(--sizes-XS-lineHeight);
139
+ font-size:var(--sizes-S-lineHeight);
115
140
  }
116
141
 
117
142
  .lu-select-suffix {
118
- bottom: var(--spacings-XXS);
143
+ bottom: .625rem;
144
+ right: 2rem;
119
145
  }
120
146
 
121
147
  ::ng-deep .lu-select-value {
@@ -206,6 +232,7 @@
206
232
  }
207
233
 
208
234
  &.mod-search {
235
+
209
236
  &::after {
210
237
  bottom: 0;
211
238
  }
@@ -277,7 +304,7 @@
277
304
  // Clearable
278
305
  :host-context(.textfield-input.is-clearable) {
279
306
  .lu-select-value {
280
- padding-right: 3rem;
307
+ padding-right: 3.5rem;
281
308
  }
282
309
  }
283
310
 
package/src/definitions/user/user-picture.scss CHANGED
@@ -1,14 +1,22 @@
1
+ @use '@lucca-front/icons/src/commons/utils/icon';
2
+
1
3
  @mixin userPictureVars {
2
- --components-userPicture-XXS-image: 1rem;
3
- --components-userPicture-XXS-fontSize: 0.5625rem;
4
4
  --components-userPicture-XS-image: 1.5rem;
5
- --components-userPicture-XS-fontSize: 0.75rem;
5
+ --components-userPicture-XS-fontSize: var(--sizes-XS-fontSize);
6
+ --components-userPicture-XS-placeholder: .75rem;
6
7
  --components-userPicture-S-image: 2rem;
7
- --components-userPicture-S-fontSize: 0.875rem;
8
+ --components-userPicture-S-fontSize: var(--sizes-S-fontSize);
9
+ --components-userPicture-S-placeholder: var(--sizes-XS-lineHeight);
8
10
  --components-userPicture-M-image: 2.5rem;
9
- --components-userPicture-M-fontSize: 1.125rem;
11
+ --components-userPicture-M-fontSize: var(--sizes-M-fontSize);
12
+ --components-userPicture-M-placeholder: var(--sizes-S-lineHeight);
10
13
  --components-userPicture-L-image: 3rem;
11
- --components-userPicture-L-fontSize: 1.375rem;
14
+ --components-userPicture-L-fontSize: var(--sizes-L-fontSize);
15
+ --components-userPicture-L-placeholder: var(--sizes-M-lineHeight);
16
+
17
+ // Deprecated
18
+ --components-userPicture-XXS-image: 1rem;
19
+ --components-userPicture-XXS-fontSize: 0.5625rem;
12
20
  --components-userPicture-XL-image: 4.5rem;
13
21
  --components-userPicture-XL-fontSize: 1.8rem;
14
22
  --components-userPicture-XXL-image: 7.5rem;
@@ -30,6 +38,7 @@
30
38
  color: var(--colors-white-color);
31
39
  display: flex;
32
40
  font-size: var(--components-user-picture-font-size, var(--components-userPicture-M-fontSize));
41
+ font-weight: 600;
33
42
  line-height: 1;
34
43
  justify-content: center;
35
44
  width: var(--components-user-picture-image-size, var(--components-userPicture-M-image));
@@ -43,16 +52,19 @@
43
52
  &.mod-XS {
44
53
  --components-user-picture-image-size: var(--components-userPicture-XS-image);
45
54
  --components-user-picture-font-size: var(--components-userPicture-XS-fontSize);
55
+ --components-user-picture-placeholder: var(--components-userPicture-XS-placeholder);
46
56
  }
47
57
 
48
58
  &.mod-S {
49
59
  --components-user-picture-image-size: var(--components-userPicture-S-image);
50
60
  --components-user-picture-font-size: var(--components-userPicture-S-fontSize);
61
+ --components-user-picture-placeholder: var(--components-userPicture-S-placeholder);
51
62
  }
52
63
 
53
64
  &.mod-L {
54
65
  --components-user-picture-image-size: var(--components-userPicture-L-image);
55
66
  --components-user-picture-font-size: var(--components-userPicture-L-fontSize);
67
+ --components-user-picture-placeholder: var(--components-userPicture-L-placeholder);
56
68
  }
57
69
 
58
70
  &.mod-XL {
@@ -68,4 +80,21 @@
68
80
  &.mod-border {
69
81
  box-shadow: 0 0 0 2px var(--colors-white-color);
70
82
  }
83
+
84
+ &.mod-placeholder {
85
+ .picture {
86
+ background: var(--palettes-grey-200) !important;
87
+
88
+ &::before {
89
+ @include icon.generate('user');
90
+ color: var(--palettes-grey-600);
91
+ font-weight: 400;
92
+ font-size: var(--components-user-picture-placeholder, var(--components-userPicture-M-placeholder));
93
+ }
94
+ }
95
+
96
+ .userPicture-initials {
97
+ display: none;
98
+ }
99
+ }
71
100
  }