ca-components 2.0.56 → 2.0.58

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 (12) hide show
  1. package/assets/scss/background.scss +4 -0
  2. package/assets/scss/sizing.scss +10 -0
  3. package/assets/scss/tooltip.scss +221 -219
  4. package/assets/theme/variables.scss +1 -0
  5. package/fesm2022/ca-components.mjs +210 -190
  6. package/fesm2022/ca-components.mjs.map +1 -1
  7. package/lib/components/ca-custom-card/ca-custom-card.component.d.ts +5 -2
  8. package/lib/components/ca-sort-dropdown/ca-sort-dropdown.component.d.ts +4 -6
  9. package/lib/components/ca-sort-dropdown/interfaces/index.d.ts +1 -0
  10. package/lib/components/ca-sort-dropdown/interfaces/sort-dropdown-action.interface.d.ts +7 -0
  11. package/lib/components/ca-table-card-view/ca-table-card-view.component.d.ts +2 -1
  12. package/package.json +1 -1
package/assets/scss/background.scss CHANGED
@@ -15,6 +15,10 @@
15
15
 
16
16
  &-white {
17
17
  background-color: $white;
18
+
19
+ &-7 {
20
+ background-color: $white-7;
21
+ }
18
22
  }
19
23
 
20
24
  &-black {
package/assets/scss/sizing.scss CHANGED
@@ -117,6 +117,16 @@ $sizes-width: (
117
117
  &-40 {
118
118
  min-width: 40px;
119
119
  }
120
+
121
+ &-100 {
122
+ min-width: 100px;
123
+ }
124
+ }
125
+
126
+ .min-h {
127
+ &-100 {
128
+ min-height: 100px;
129
+ }
120
130
  }
121
131
 
122
132
  .flex-1 {
package/assets/scss/tooltip.scss CHANGED
@@ -1,324 +1,326 @@
1
1
  .tooltip {
2
- font-size: 12px;
3
- position: relative;
2
+ font-size: 12px;
3
+ position: relative;
4
4
  }
5
5
 
6
6
  .tooltip.show {
7
- opacity: 0.83;
7
+ opacity: 1;
8
8
  }
9
9
 
10
10
  /* fade animation*/
11
11
  .tooltip.fade:after,
12
12
  .tooltip.fade:before {
13
- transform: translate(0, -10px);
14
- transition: all 0.15s ease-in-out;
13
+ transform: translate(0, -10px);
14
+ transition: all 0.15s ease-in-out;
15
15
  }
16
16
 
17
17
  .tooltip.fade:hover:after,
18
18
  .tooltip.fade:hover:before {
19
- opacity: 1;
20
- transform: translate(0, 0);
19
+ opacity: 1;
20
+ transform: translate(0, 0);
21
21
  }
22
22
 
23
23
  .tooltip-inner {
24
- padding: 4px 10px;
25
- white-space: nowrap;
26
- max-width: none;
27
- border-radius: 3px;
28
- &:empty {
29
- padding: 0;
30
- }
24
+ white-space: nowrap;
25
+ max-width: none;
26
+ border-radius: 3px;
27
+ font-size: 11px;
28
+ font-weight: 600;
29
+ &:empty {
30
+ padding: 0;
31
+ }
31
32
  }
32
33
 
33
34
  .placeholder-delete .tooltip-inner {
34
- background-color: $red-13;
35
+ background-color: $red-13;
35
36
  }
36
37
 
37
38
  .placeholder-delete .arrow::before {
38
- border-top-color: $red-13;
39
+ border-top-color: $red-13;
39
40
  }
40
41
 
41
42
  .custom-popup-owners-for-flag {
42
- .tooltip-inner {
43
- color: $black-14;
44
- background-color: $white-2;
45
- transform: translateY(126%) translateX(-50%) !important;
46
- width: 130px;
47
- border-radius: 3px;
48
- box-shadow: $box-shadow-5;
49
- }
50
-
51
- .arrow {
52
- bottom: -18%;
53
- transform: rotate(180deg);
54
- left: calc(50% - -2.7rem);
55
- }
56
-
57
- .tooltip {
58
- opacity: 0.93 !important;
59
- width: 0;
60
- }
43
+ .tooltip-inner {
44
+ color: $black-14;
45
+ background-color: $white-2;
46
+ transform: translateY(126%) translateX(-50%) !important;
47
+ width: 130px;
48
+ border-radius: 3px;
49
+ box-shadow: $box-shadow-5;
50
+ }
51
+
52
+ .arrow {
53
+ bottom: -18%;
54
+ transform: rotate(180deg);
55
+ left: calc(50% - -2.7rem);
56
+ }
57
+
58
+ .tooltip {
59
+ opacity: 0.93 !important;
60
+ width: 0;
61
+ }
61
62
  }
62
63
 
63
64
  .custom-popup-owners {
64
- z-index: 999;
65
-
66
- .tooltip-inner {
67
- color: $black-14;
68
- background-color: $white-2;
69
- transform: translateY(132%);
70
65
  z-index: 999;
71
- box-shadow: $box-shadow-5;
72
- }
73
66
 
74
- .arrow {
75
- bottom: -20%;
76
- transform: rotate(180deg);
77
- }
67
+ .tooltip-inner {
68
+ color: $black-14;
69
+ background-color: $white-2;
70
+ transform: translateY(132%);
71
+ z-index: 999;
72
+ box-shadow: $box-shadow-5;
73
+ }
78
74
 
79
- .tooltip {
80
- transform: translate(0, -61px) !important;
81
- }
75
+ .arrow {
76
+ bottom: -20%;
77
+ transform: rotate(180deg);
78
+ }
79
+
80
+ .tooltip {
81
+ transform: translate(0, -61px) !important;
82
+ }
82
83
  }
83
84
 
84
85
  .custom-popup-owners-year {
85
- z-index: 999;
86
-
87
- .tooltip-inner {
88
- color: $black-14;
89
- background-color: $white-2;
90
- transform: translateY(132%);
91
86
  z-index: 999;
92
- box-shadow: $box-shadow-5;
93
- }
94
87
 
95
- .arrow {
96
- bottom: -20%;
97
- transform: rotate(180deg);
98
- }
88
+ .tooltip-inner {
89
+ color: $black-14;
90
+ background-color: $white-2;
91
+ transform: translateY(132%);
92
+ z-index: 999;
93
+ box-shadow: $box-shadow-5;
94
+ }
99
95
 
100
- .tooltip {
101
- transform: translate(70px, -61px) !important;
102
- }
96
+ .arrow {
97
+ bottom: -20%;
98
+ transform: rotate(180deg);
99
+ }
100
+
101
+ .tooltip {
102
+ transform: translate(70px, -61px) !important;
103
+ }
103
104
  }
104
105
 
105
106
  .custom-popup-owners-info {
106
- .tooltip-inner {
107
- color: $black-14;
108
- background-color: $white-2;
109
- transform: translateY(-100%) translateX(-10%);
110
- width: 200px;
111
- height: 36px;
112
- display: flex;
113
- justify-content: center;
114
- align-items: center;
115
- border-radius: 3px;
116
- margin-top: 3px;
117
- box-shadow: $box-shadow-5;
118
- }
107
+ .tooltip-inner {
108
+ color: $black-14;
109
+ background-color: $white-2;
110
+ transform: translateY(-100%) translateX(-10%);
111
+ width: 200px;
112
+ height: 36px;
113
+ display: flex;
114
+ justify-content: center;
115
+ align-items: center;
116
+ border-radius: 3px;
117
+ margin-top: 3px;
118
+ box-shadow: $box-shadow-5;
119
+ }
119
120
 
120
- .tooltip {
121
- opacity: 0.93;
122
- width: 0;
123
- }
121
+ .tooltip {
122
+ opacity: 0.93;
123
+ width: 0;
124
+ }
124
125
 
125
- .arrow {
126
- display: none;
127
- }
126
+ .arrow {
127
+ display: none;
128
+ }
128
129
 
129
- #phone-inside {
130
- position: relative;
131
- right: 26px;
132
- bottom: 0;
133
- }
130
+ #phone-inside {
131
+ position: relative;
132
+ right: 26px;
133
+ bottom: 0;
134
+ }
134
135
  }
135
136
 
136
137
  .custom-popup-owners-info-at {
137
- .tooltip-inner {
138
- color: $black-14;
139
- background-color: $white-2;
140
- transform: translateY(-108%) translateX(-7%);
141
- width: 270px;
142
- height: 36px;
143
- display: flex;
144
- justify-content: center;
145
- align-items: center;
146
- border-radius: 3px;
147
- box-shadow: $box-shadow-5;
148
- }
138
+ .tooltip-inner {
139
+ color: $black-14;
140
+ background-color: $white-2;
141
+ transform: translateY(-108%) translateX(-7%);
142
+ width: 270px;
143
+ height: 36px;
144
+ display: flex;
145
+ justify-content: center;
146
+ align-items: center;
147
+ border-radius: 3px;
148
+ box-shadow: $box-shadow-5;
149
+ }
149
150
 
150
- .tooltip {
151
- opacity: 1;
152
- width: 0;
153
- }
151
+ .tooltip {
152
+ opacity: 1;
153
+ width: 0;
154
+ }
154
155
 
155
- .arrow {
156
- display: none;
157
- }
156
+ .arrow {
157
+ display: none;
158
+ }
158
159
  }
159
160
 
160
161
  .custom-popup-owners-for-tag {
161
- .tooltip-inner {
162
- color: $black-14;
163
- background-color: $white-2;
164
- width: 100px;
165
- border-radius: 3px;
166
- box-shadow: $box-shadow-5 !important;
167
- }
162
+ .tooltip-inner {
163
+ color: $black-14;
164
+ background-color: $white-2;
165
+ width: 100px;
166
+ border-radius: 3px;
167
+ box-shadow: $box-shadow-5 !important;
168
+ }
168
169
 
169
- .tooltip {
170
- top: 5px !important;
171
- }
170
+ .tooltip {
171
+ top: 5px !important;
172
+ }
172
173
 
173
- .arrow {
174
- bottom: -24%;
175
- }
174
+ .arrow {
175
+ bottom: -24%;
176
+ }
176
177
  }
177
178
 
178
179
  .align-items-flex-start {
179
- justify-content: center;
180
- align-items: center;
180
+ justify-content: center;
181
+ align-items: center;
181
182
  }
182
183
 
183
184
  .align-items-flex-end {
184
- display: flex;
185
- justify-content: center;
186
- flex-direction: column;
187
- align-self: flex-end;
188
- align-items: flex-start;
185
+ display: flex;
186
+ justify-content: center;
187
+ flex-direction: column;
188
+ align-self: flex-end;
189
+ align-items: flex-start;
189
190
  }
190
191
 
191
192
  .label-add {
192
- align-self: flex-start;
193
+ align-self: flex-start;
193
194
  }
194
195
 
195
196
  .fadeInLoad {
196
- animation: fadeInLoad 0.25s;
197
+ animation: fadeInLoad 0.25s;
197
198
  }
198
199
 
199
200
  @keyframes fadeInLoad {
200
- from {
201
- opacity: 0;
202
- }
203
- to {
204
- opacity: 1;
205
- }
201
+ from {
202
+ opacity: 0;
203
+ }
204
+ to {
205
+ opacity: 1;
206
+ }
206
207
  }
207
208
 
208
209
  .fadeIn {
209
- opacity: 1;
210
- -webkit-transition: 0.25s;
211
- -moz-transition: 0.25s;
212
- -o-transition: 0.25s;
213
- transition: 0.25s;
210
+ opacity: 1;
211
+ -webkit-transition: 0.25s;
212
+ -moz-transition: 0.25s;
213
+ -o-transition: 0.25s;
214
+ transition: 0.25s;
214
215
  }
215
216
 
216
217
  .thisText:hover .fadeIn {
217
- opacity: 0;
218
+ opacity: 0;
218
219
  }
219
220
 
220
221
  .fadeInLoad {
221
- animation-name: example;
222
- animation-duration: 0.25s;
222
+ animation-name: example;
223
+ animation-duration: 0.25s;
223
224
  }
224
225
 
225
226
  @keyframes example {
226
- 0% {
227
- transform: scale(0.5);
228
- }
229
- 100% {
230
- transform: scale(1);
231
- }
227
+ 0% {
228
+ transform: scale(0.5);
229
+ }
230
+ 100% {
231
+ transform: scale(1);
232
+ }
232
233
  }
233
234
 
234
235
  // tooltip table icons
235
236
  .tooltip.tooltip-table-icons {
236
- left: 12px !important;
237
- opacity: 1;
237
+ left: 12px !important;
238
+ opacity: 1;
238
239
 
239
- .arrow {
240
- display: none !important;
241
- }
240
+ .arrow {
241
+ display: none !important;
242
+ }
242
243
 
243
- .tooltip-inner {
244
- border-radius: 0 50px 50px 50px;
245
- background: $app-main-blue;
246
- }
244
+ .tooltip-inner {
245
+ border-radius: 0 50px 50px 50px;
246
+ background: $app-main-blue;
247
+ }
247
248
  }
248
249
 
249
250
  .tooltip.show {
250
- opacity: 1;
251
- animation: fadeIn ease 0.5s !important;
252
- -webkit-animation: fadeIn ease 0.5s !important;
253
- -moz-animation: fadeIn ease 0.5s !important;
254
- -o-animation: fadeIn ease 0.5s !important;
255
- -ms-animation: fadeIn ease 0.5s !important;
251
+ opacity: 1;
252
+ animation: fadeIn ease 0.5s !important;
253
+ -webkit-animation: fadeIn ease 0.5s !important;
254
+ -moz-animation: fadeIn ease 0.5s !important;
255
+ -o-animation: fadeIn ease 0.5s !important;
256
+ -ms-animation: fadeIn ease 0.5s !important;
256
257
  }
257
258
 
258
259
  .ta-tooltip {
259
- position: absolute;
260
- font-size: 12px;
261
- text-align: center;
262
- color: $white-2;
263
- line-height: 22px;
264
- z-index: 999999 !important;
265
- opacity: 0;
266
- white-space: nowrap;
267
- transform: scale(0.7);
268
-
269
- &.ta-tooltip-show {
270
- opacity: 0.85;
271
- transform: scale(1);
272
- padding: 0 12px;
273
- }
274
-
275
- &.ta-tooltip-bottom-right {
276
- transform-origin: top left;
277
- border-radius: 0 15px 15px 15px;
278
- }
279
-
280
- &.ta-tooltip-bottom-right-corner {
281
- transform-origin: top left;
282
- border-radius: 0 15px 15px 15px;
283
- }
284
-
285
- &.ta-tooltip-bottom-left {
286
- transform-origin: top right;
287
- border-radius: 15px 0 15px 15px;
288
- }
260
+ position: absolute;
261
+ font-size: 12px;
262
+ text-align: center;
263
+ color: $white-2;
264
+ line-height: 22px;
265
+ z-index: 999999 !important;
266
+ opacity: 0;
267
+ white-space: nowrap;
268
+ transform: scale(0.7);
269
+
270
+ &.ta-tooltip-show {
271
+ opacity: 0.85;
272
+ transform: scale(1);
273
+ padding: 0 12px;
274
+ }
275
+
276
+ &.ta-tooltip-bottom-right {
277
+ transform-origin: top left;
278
+ border-radius: 0 15px 15px 15px;
279
+ }
280
+
281
+ &.ta-tooltip-bottom-right-corner {
282
+ transform-origin: top left;
283
+ border-radius: 0 15px 15px 15px;
284
+ }
285
+
286
+ &.ta-tooltip-bottom-left {
287
+ transform-origin: top right;
288
+ border-radius: 15px 0 15px 15px;
289
+ }
289
290
  }
290
291
 
291
292
  @keyframes scaleItem {
292
- 0% {
293
- transform: scale(0.4);
294
- }
295
- 100% {
296
- transform: scale(1);
297
- }
293
+ 0% {
294
+ transform: scale(0.4);
295
+ }
296
+ 100% {
297
+ transform: scale(1);
298
+ }
298
299
  }
299
300
 
300
301
  .app-ca-main-tooltip {
301
- pointer-events: none;
302
- .tooltip-inner {
303
- padding: 0;
304
- background-color: transparent;
305
302
  pointer-events: none;
306
-
307
- .tooltip-holder {
308
- display: flex;
309
- font-size: 11px;
310
- font-weight: bold;
311
- border-radius: 2px;
312
- padding: 2px 8px;
313
- animation: scaleItem 0.3s;
314
- white-space: normal;
315
- &:empty {
303
+ .tooltip-inner {
316
304
  padding: 0;
317
- }
305
+ background-color: transparent;
306
+ pointer-events: none;
307
+
308
+ .tooltip-holder {
309
+ display: flex;
310
+ font-size: 11px;
311
+ line-height: 14px;
312
+ font-weight: 600;
313
+ border-radius: 3px;
314
+ padding: 2px 6px;
315
+ animation: scaleItem 0.3s;
316
+ white-space: normal;
317
+ &:empty {
318
+ padding: 0;
319
+ }
320
+ }
318
321
  }
319
- }
320
322
  }
321
323
 
322
324
  .tooltip-arrow {
323
- display: none !important;
325
+ display: none !important;
324
326
  }
package/assets/theme/variables.scss CHANGED
@@ -15,6 +15,7 @@ $white-3: #ffffff70;
15
15
  $white-4: #ffffffb2;
16
16
  $white-5: #ffffff20;
17
17
  $white-6: #fbe9e9;
18
+ $white-7: #ffffff80;
18
19
 
19
20
  $black: #000000;
20
21
  $primary: #536bc2;