@kato-lee/components 1.1.3 → 2.0.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.
- package/README.md +1 -1
- package/assets/_fields.scss +82 -21
- package/assets/_grids.scss +8 -0
- package/assets/assets.scss +4 -0
- package/assets/bundle.css +1 -0
- package/assets/{themes/_default.scss → colors.scss} +7 -6
- package/assets/components/_checkbox.scss +11 -0
- package/assets/components/_fields.scss +53 -13
- package/assets/components/_scroll-bar.scss +8 -0
- package/assets/components/_snack-bar.scss +21 -10
- package/assets/components/_tables.scss +75 -84
- package/assets/components/main.scss +9 -10
- package/assets/material/theme.scss +91 -0
- package/box-form/index.d.ts +51 -3
- package/box-form/package.json +3 -0
- package/capsule/index.d.ts +25 -2
- package/capsule/package.json +3 -0
- package/cards/index.d.ts +18 -2
- package/cards/package.json +3 -0
- package/dialogs/index.d.ts +18 -2
- package/dialogs/package.json +3 -0
- package/fesm2022/kato-lee-components-box-form.mjs +9 -9
- package/fesm2022/kato-lee-components-box-form.mjs.map +1 -1
- package/fesm2022/kato-lee-components-capsule.mjs +20 -20
- package/fesm2022/kato-lee-components-capsule.mjs.map +1 -1
- package/fesm2022/kato-lee-components-cards.mjs +8 -8
- package/fesm2022/kato-lee-components-cards.mjs.map +1 -1
- package/fesm2022/kato-lee-components-dialogs.mjs +9 -9
- package/fesm2022/kato-lee-components-dialogs.mjs.map +1 -1
- package/fesm2022/kato-lee-components-fields.mjs +60 -64
- package/fesm2022/kato-lee-components-fields.mjs.map +1 -1
- package/fesm2022/kato-lee-components-modal.mjs +16 -12
- package/fesm2022/kato-lee-components-modal.mjs.map +1 -1
- package/fesm2022/kato-lee-components-pretty-box.mjs +5 -5
- package/fesm2022/kato-lee-components-pretty-box.mjs.map +1 -1
- package/fesm2022/kato-lee-components-tables.mjs +60 -20
- package/fesm2022/kato-lee-components-tables.mjs.map +1 -1
- package/fesm2022/kato-lee-components-toast.mjs +3 -3
- package/fesm2022/kato-lee-components-toast.mjs.map +1 -1
- package/fields/index.d.ts +464 -15
- package/fields/package.json +3 -0
- package/index.d.ts +2 -1
- package/modal/index.d.ts +66 -4
- package/modal/package.json +3 -0
- package/package.json +4 -24
- package/pretty-box/index.d.ts +27 -1
- package/pretty-box/package.json +3 -0
- package/tables/index.d.ts +27 -3
- package/tables/package.json +3 -0
- package/toast/index.d.ts +25 -1
- package/toast/package.json +3 -0
- package/assets/components/_material.scss +0 -15
- package/assets/main.scss +0 -4
- package/assets/material/themes/dark.scss +0 -52
- package/assets/material/themes/default.scss +0 -105
- package/assets/material/themes/main.scss +0 -2907
- package/assets/themes/_dark.scss +0 -16
- package/assets/themes/main.scss +0 -2
- package/assets/variables.scss +0 -7
- package/box-form/common.d.ts +0 -5
- package/box-form/component.d.ts +0 -34
- package/box-form/module.d.ts +0 -8
- package/capsule/component.d.ts +0 -14
- package/capsule/module.d.ts +0 -8
- package/cards/component.d.ts +0 -8
- package/cards/module.d.ts +0 -8
- package/dialogs/dismiss-dialog-button.component.d.ts +0 -8
- package/dialogs/module.d.ts +0 -8
- package/esm2022/box-form/common.mjs +0 -2
- package/esm2022/box-form/component.mjs +0 -112
- package/esm2022/box-form/index.mjs +0 -7
- package/esm2022/box-form/kato-lee-components-box-form.mjs +0 -5
- package/esm2022/box-form/module.mjs +0 -17
- package/esm2022/capsule/component.mjs +0 -78
- package/esm2022/capsule/index.mjs +0 -6
- package/esm2022/capsule/kato-lee-components-capsule.mjs +0 -5
- package/esm2022/capsule/module.mjs +0 -17
- package/esm2022/cards/component.mjs +0 -48
- package/esm2022/cards/index.mjs +0 -6
- package/esm2022/cards/kato-lee-components-cards.mjs +0 -5
- package/esm2022/cards/module.mjs +0 -18
- package/esm2022/dialogs/dismiss-dialog-button.component.mjs +0 -46
- package/esm2022/dialogs/index.mjs +0 -6
- package/esm2022/dialogs/kato-lee-components-dialogs.mjs +0 -5
- package/esm2022/dialogs/module.mjs +0 -18
- package/esm2022/fields/autocomplete/component.mjs +0 -259
- package/esm2022/fields/common.mjs +0 -11
- package/esm2022/fields/date/component.mjs +0 -163
- package/esm2022/fields/date-range/component.mjs +0 -85
- package/esm2022/fields/error/component.mjs +0 -57
- package/esm2022/fields/error/error-equals.pipe.mjs +0 -19
- package/esm2022/fields/error/error.msg.pipe.mjs +0 -19
- package/esm2022/fields/error/lang/_en.mjs +0 -12
- package/esm2022/fields/error/lang/_es.mjs +0 -12
- package/esm2022/fields/error/lang/index.mjs +0 -3
- package/esm2022/fields/general/component.mjs +0 -202
- package/esm2022/fields/index.mjs +0 -19
- package/esm2022/fields/kato-lee-components-fields.mjs +0 -5
- package/esm2022/fields/module.mjs +0 -82
- package/esm2022/fields/money/component.mjs +0 -202
- package/esm2022/fields/number/component.mjs +0 -179
- package/esm2022/fields/remote-autocomplete/component.mjs +0 -188
- package/esm2022/fields/select/component.mjs +0 -158
- package/esm2022/fields/text-area/component.mjs +0 -186
- package/esm2022/fields/validators.mjs +0 -11
- package/esm2022/index.mjs +0 -2
- package/esm2022/kato-lee-components.mjs +0 -5
- package/esm2022/modal/component.mjs +0 -66
- package/esm2022/modal/config.mjs +0 -2
- package/esm2022/modal/index.mjs +0 -8
- package/esm2022/modal/kato-lee-components-modal.mjs +0 -5
- package/esm2022/modal/module.mjs +0 -17
- package/esm2022/modal/service.mjs +0 -33
- package/esm2022/pretty-box/component.mjs +0 -94
- package/esm2022/pretty-box/index.mjs +0 -5
- package/esm2022/pretty-box/kato-lee-components-pretty-box.mjs +0 -5
- package/esm2022/tables/index.mjs +0 -7
- package/esm2022/tables/kato-lee-components-tables.mjs +0 -5
- package/esm2022/tables/mat-paginator.translation.mjs +0 -22
- package/esm2022/tables/module.mjs +0 -22
- package/esm2022/tables/no-records.component.mjs +0 -58
- package/esm2022/toast/index.mjs +0 -5
- package/esm2022/toast/kato-lee-components-toast.mjs +0 -5
- package/esm2022/toast/service.mjs +0 -42
- package/fields/autocomplete/component.d.ts +0 -65
- package/fields/common.d.ts +0 -8
- package/fields/date/component.d.ts +0 -46
- package/fields/date-range/component.d.ts +0 -23
- package/fields/error/component.d.ts +0 -22
- package/fields/error/error-equals.pipe.d.ts +0 -7
- package/fields/error/error.msg.pipe.d.ts +0 -7
- package/fields/error/lang/_en.d.ts +0 -1
- package/fields/error/lang/_es.d.ts +0 -1
- package/fields/error/lang/index.d.ts +0 -2
- package/fields/general/component.d.ts +0 -56
- package/fields/module.d.ts +0 -19
- package/fields/money/component.d.ts +0 -53
- package/fields/number/component.d.ts +0 -52
- package/fields/remote-autocomplete/component.d.ts +0 -43
- package/fields/select/component.d.ts +0 -44
- package/fields/text-area/component.d.ts +0 -55
- package/fields/validators.d.ts +0 -9
- package/modal/component.d.ts +0 -35
- package/modal/config.d.ts +0 -9
- package/modal/module.d.ts +0 -8
- package/modal/service.d.ts +0 -13
- package/pretty-box/component.d.ts +0 -24
- package/tables/mat-paginator.translation.d.ts +0 -2
- package/tables/module.d.ts +0 -10
- package/tables/no-records.component.d.ts +0 -12
- package/toast/service.d.ts +0 -21
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
// is a example
|
|
1
2
|
html {
|
|
2
3
|
--tak-table-border: 1px solid var(--tak-dark-color-100);
|
|
3
4
|
--tak-header-table-background-color: rgba(25, 42, 86, 1);
|
|
4
|
-
--tak-
|
|
5
|
+
--tak-table-background-color: rgb(255, 255, 255);
|
|
5
6
|
--tak-table-header-color: rgb(255, 255, 255);
|
|
6
7
|
--tak-table-row-subcontent-color: rgb(128, 128, 128);
|
|
7
8
|
--tak-table-selectable-hover-color: rgba(0, 0, 0, 0.12);
|
|
8
|
-
--tak-table-container-box-shadow:
|
|
9
|
-
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
|
9
|
+
--tak-table-container-box-shadow:
|
|
10
|
+
rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
|
10
11
|
--tak-table-container-border-color: none;
|
|
11
12
|
--tak-table-selectable-row-hover: rgba(204, 204, 204, 0.4);
|
|
12
13
|
--tak-table-not-selectable-row: #f5b5c0c4;
|
|
@@ -23,48 +24,23 @@ html {
|
|
|
23
24
|
--tak-table-border-color: none;
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
html.dark-theme,
|
|
27
|
-
html[data-theme='dark'] {
|
|
28
|
-
--tak-table-border: 1px solid var(--tak-dark-color-100);
|
|
29
|
-
--tak-paginator-container-background-color: rgb(13, 17, 23);
|
|
30
|
-
--tak-table-selectable-row-hover: rgba(124, 124, 124, 0.4);
|
|
31
|
-
--tak-table-selectable-hover-color: rgba(255, 255, 255, 0.12);
|
|
32
|
-
--tak-table-container-box-shadow: none;
|
|
33
|
-
--tak-table-container-border-color: rgba(255, 255, 255, 0.12);
|
|
34
|
-
--tak-table-not-selectable-row: #c45366c4;
|
|
35
|
-
--tak-table-not-selectable-row-hover: #cc3c54ea;
|
|
36
|
-
--tak-table-success-row: #73c453c4;
|
|
37
|
-
--tak-table-success-row-hover: #54cc3cea;
|
|
38
|
-
--tak-table-priority-1: #c7f5b5e1;
|
|
39
|
-
--tak-table-priority-1-hover: #aaf082ea;
|
|
40
|
-
--tak-table-priority-2: #f5f4b5ea;
|
|
41
|
-
--tak-table-priority-2-hover: #f3f574ea;
|
|
42
|
-
--tak-table-priority-3: #f5d9b5ea;
|
|
43
|
-
--tak-table-priority-3-hover: #f3c385ea;
|
|
44
|
-
--tak-table-header-background-color: rgb(13, 17, 23);
|
|
45
|
-
--tak-table-border-color: var(--tak-dark-color-100);
|
|
46
|
-
|
|
47
|
-
.excel-icon,
|
|
48
|
-
.pdf-icon,
|
|
49
|
-
.text-icon {
|
|
50
|
-
filter: invert(100%);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
27
|
$CTM_TABLE_PAGINATOR_HEIGHT: 56px;
|
|
55
28
|
$CTM_TABLE_HEADER_HEIGHT: 70px;
|
|
56
29
|
$CTM_TABLE_BORDER_RADIUS: 10px;
|
|
57
30
|
|
|
58
|
-
$CTM_TABLE_VAL_1:
|
|
59
|
-
$CTM_TABLE_VAL_2:
|
|
60
|
-
$CTM_TABLE_VAL_3:
|
|
61
|
-
$CTM_TABLE_VAL_4:
|
|
62
|
-
$CTM_TABLE_VAL_5:
|
|
63
|
-
$CTM_TABLE_VAL_6:
|
|
31
|
+
$CTM_TABLE_VAL_1: 28px;
|
|
32
|
+
$CTM_TABLE_VAL_2: 28px;
|
|
33
|
+
$CTM_TABLE_VAL_3: 28px;
|
|
34
|
+
$CTM_TABLE_VAL_4: 32px;
|
|
35
|
+
$CTM_TABLE_VAL_5: 32px;
|
|
36
|
+
$CTM_TABLE_VAL_6: 18px;
|
|
64
37
|
|
|
65
38
|
.mat-paginator-range-label {
|
|
66
39
|
color: var(--tak-paginator-range-label-color);
|
|
67
40
|
}
|
|
41
|
+
.mat-mdc-paginator-container {
|
|
42
|
+
background-color: var(--tak-table-background-color);
|
|
43
|
+
}
|
|
68
44
|
.mat-paginator .mat-paginator-outer-container {
|
|
69
45
|
border: none;
|
|
70
46
|
}
|
|
@@ -82,6 +58,9 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
82
58
|
border-radius: $CTM_TABLE_BORDER_RADIUS;
|
|
83
59
|
}
|
|
84
60
|
&__header {
|
|
61
|
+
& mat-icon {
|
|
62
|
+
color: var(--tak-table-header-color) !important;
|
|
63
|
+
}
|
|
85
64
|
.mat-datepicker-toggle:not(.not-input-field),
|
|
86
65
|
.mat-datepicker-content .mat-calendar-next-button,
|
|
87
66
|
.mat-datepicker-content .mat-calendar-previous-button {
|
|
@@ -91,6 +70,11 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
91
70
|
align-items: center;
|
|
92
71
|
justify-content: space-between;
|
|
93
72
|
font-family: Roboto, sans-serif;
|
|
73
|
+
color: var(--tak-table-header-color);
|
|
74
|
+
height: $CTM_TABLE_HEADER_HEIGHT;
|
|
75
|
+
border-top-left-radius: $CTM_TABLE_BORDER_RADIUS;
|
|
76
|
+
border-top-right-radius: $CTM_TABLE_BORDER_RADIUS;
|
|
77
|
+
background-color: var(--tak-table-header-background-color);
|
|
94
78
|
& .tak-table-title {
|
|
95
79
|
font-size: 16px;
|
|
96
80
|
font-weight: bolder;
|
|
@@ -112,11 +96,6 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
112
96
|
&--right {
|
|
113
97
|
padding: 10px;
|
|
114
98
|
}
|
|
115
|
-
color: var(--tak-table-header-color);
|
|
116
|
-
height: $CTM_TABLE_HEADER_HEIGHT;
|
|
117
|
-
border-top-left-radius: $CTM_TABLE_BORDER_RADIUS;
|
|
118
|
-
border-top-right-radius: $CTM_TABLE_BORDER_RADIUS;
|
|
119
|
-
background-color: var(--tak-table-header-background-color);
|
|
120
99
|
~ .tak-table__sub-header {
|
|
121
100
|
~ .tak-table__content {
|
|
122
101
|
border-top-left-radius: 0px;
|
|
@@ -127,7 +106,8 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
127
106
|
(
|
|
128
107
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
129
108
|
(var(--tak-layout-outlet-padding) * 2)
|
|
130
|
-
) +
|
|
109
|
+
) +
|
|
110
|
+
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_HEADER_HEIGHT + $CTM_TABLE_VAL_6
|
|
131
111
|
)
|
|
132
112
|
);
|
|
133
113
|
&.paginator-bottom {
|
|
@@ -137,7 +117,8 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
137
117
|
(
|
|
138
118
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
139
119
|
(var(--tak-layout-outlet-padding) * 2)
|
|
140
|
-
) +
|
|
120
|
+
) +
|
|
121
|
+
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_HEADER_HEIGHT +
|
|
141
122
|
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_VAL_6
|
|
142
123
|
)
|
|
143
124
|
);
|
|
@@ -152,7 +133,8 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
152
133
|
(
|
|
153
134
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
154
135
|
(var(--tak-layout-outlet-padding) * 2)
|
|
155
|
-
) +
|
|
136
|
+
) +
|
|
137
|
+
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_HEADER_HEIGHT +
|
|
156
138
|
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_VAL_1
|
|
157
139
|
)
|
|
158
140
|
);
|
|
@@ -168,7 +150,8 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
168
150
|
(
|
|
169
151
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
170
152
|
(var(--tak-layout-outlet-padding) * 2)
|
|
171
|
-
) +
|
|
153
|
+
) +
|
|
154
|
+
$CTM_TABLE_HEADER_HEIGHT + $CTM_TABLE_VAL_1
|
|
172
155
|
)
|
|
173
156
|
);
|
|
174
157
|
&.paginator-bottom {
|
|
@@ -178,7 +161,8 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
178
161
|
(
|
|
179
162
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
180
163
|
(var(--tak-layout-outlet-padding) * 2)
|
|
181
|
-
) +
|
|
164
|
+
) +
|
|
165
|
+
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_HEADER_HEIGHT + $CTM_TABLE_VAL_1
|
|
182
166
|
)
|
|
183
167
|
);
|
|
184
168
|
~ .tak-table__paginator {
|
|
@@ -208,7 +192,8 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
208
192
|
(
|
|
209
193
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
210
194
|
(var(--tak-layout-outlet-padding) * 2)
|
|
211
|
-
) +
|
|
195
|
+
) +
|
|
196
|
+
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_HEADER_HEIGHT + $CTM_TABLE_VAL_1
|
|
212
197
|
)
|
|
213
198
|
);
|
|
214
199
|
}
|
|
@@ -218,7 +203,7 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
218
203
|
align-items: center;
|
|
219
204
|
justify-content: space-between;
|
|
220
205
|
font-family: Roboto, sans-serif;
|
|
221
|
-
background-color: var(--tak-
|
|
206
|
+
background-color: var(--tak-table-background-color);
|
|
222
207
|
~ .tak-table__content {
|
|
223
208
|
border-top-left-radius: 0px;
|
|
224
209
|
border-top-right-radius: 0px;
|
|
@@ -228,7 +213,8 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
228
213
|
(
|
|
229
214
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
230
215
|
(var(--tak-layout-outlet-padding) * 2)
|
|
231
|
-
) +
|
|
216
|
+
) +
|
|
217
|
+
$CTM_TABLE_HEADER_HEIGHT + $CTM_TABLE_VAL_4
|
|
232
218
|
)
|
|
233
219
|
);
|
|
234
220
|
&.paginator-bottom {
|
|
@@ -238,7 +224,8 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
238
224
|
(
|
|
239
225
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
240
226
|
(var(--tak-layout-outlet-padding) * 2)
|
|
241
|
-
) +
|
|
227
|
+
) +
|
|
228
|
+
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_HEADER_HEIGHT + $CTM_TABLE_VAL_5
|
|
242
229
|
)
|
|
243
230
|
);
|
|
244
231
|
}
|
|
@@ -251,7 +238,7 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
251
238
|
&__paginator {
|
|
252
239
|
display: flex;
|
|
253
240
|
justify-content: space-between;
|
|
254
|
-
background-color: var(--tak-
|
|
241
|
+
background-color: var(--tak-table-background-color);
|
|
255
242
|
align-items: center;
|
|
256
243
|
border-top-left-radius: $CTM_TABLE_BORDER_RADIUS;
|
|
257
244
|
border-top-right-radius: $CTM_TABLE_BORDER_RADIUS;
|
|
@@ -268,46 +255,49 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
268
255
|
(
|
|
269
256
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
270
257
|
(var(--tak-layout-outlet-padding) * 2)
|
|
271
|
-
) +
|
|
258
|
+
) +
|
|
259
|
+
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_VAL_1
|
|
272
260
|
)
|
|
273
261
|
);
|
|
274
262
|
}
|
|
275
263
|
}
|
|
276
264
|
&__content {
|
|
277
|
-
|
|
265
|
+
.mat-mdc-table {
|
|
266
|
+
background-color: var(--tak-table-background-color);
|
|
267
|
+
}
|
|
278
268
|
tr[selectable],
|
|
279
269
|
.selectable {
|
|
280
|
-
& .mat-cell {
|
|
270
|
+
& .mat-mdc-cell {
|
|
281
271
|
cursor: pointer;
|
|
282
272
|
}
|
|
283
|
-
&:hover .mat-cell {
|
|
273
|
+
&:hover .mat-mdc-cell {
|
|
284
274
|
background: var(--tak-table-selectable-row-hover) !important;
|
|
285
275
|
transition: ease 0.3s !important;
|
|
286
276
|
}
|
|
287
277
|
&.unselectable {
|
|
288
|
-
& .mat-cell {
|
|
278
|
+
& .mat-mdc-cell {
|
|
289
279
|
background-color: var(--tak-table-not-selectable-row) !important;
|
|
290
280
|
}
|
|
291
|
-
&:hover .mat-cell {
|
|
281
|
+
&:hover .mat-mdc-cell {
|
|
292
282
|
background-color: var(--tak-table-not-selectable-row-hover) !important;
|
|
293
283
|
}
|
|
294
284
|
}
|
|
295
285
|
&.success-row {
|
|
296
|
-
& .mat-cell {
|
|
286
|
+
& .mat-mdc-cell {
|
|
297
287
|
background-color: var(--tak-table-success-row) !important;
|
|
298
288
|
}
|
|
299
|
-
&:hover .mat-cell {
|
|
289
|
+
&:hover .mat-mdc-cell {
|
|
300
290
|
background-color: var(--tak-table-success-row-hover) !important;
|
|
301
291
|
}
|
|
302
292
|
}
|
|
303
293
|
}
|
|
304
294
|
width: 100%;
|
|
305
|
-
.mat-cell,
|
|
295
|
+
.mat-mdc-cell,
|
|
306
296
|
.mat-footer-cell {
|
|
307
297
|
font-size: 12px;
|
|
308
298
|
}
|
|
309
|
-
& .mat-header-cell,
|
|
310
|
-
& .mat-footer-cell {
|
|
299
|
+
& .mat-mdc-header-cell,
|
|
300
|
+
& .mat-mdc-footer-cell {
|
|
311
301
|
font-weight: bolder;
|
|
312
302
|
color: var(--tak-dark-color-500);
|
|
313
303
|
}
|
|
@@ -319,7 +309,8 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
319
309
|
(
|
|
320
310
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
321
311
|
(var(--tak-layout-outlet-padding) * 2)
|
|
322
|
-
) +
|
|
312
|
+
) +
|
|
313
|
+
$CTM_TABLE_PAGINATOR_HEIGHT + $CTM_TABLE_VAL_3
|
|
323
314
|
)
|
|
324
315
|
);
|
|
325
316
|
}
|
|
@@ -330,19 +321,20 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
330
321
|
(
|
|
331
322
|
var(--tak-header-height) + var(--tak-footer-height) +
|
|
332
323
|
(var(--tak-layout-outlet-padding) * 2)
|
|
333
|
-
) +
|
|
324
|
+
) +
|
|
325
|
+
$CTM_TABLE_VAL_2
|
|
334
326
|
)
|
|
335
327
|
);
|
|
336
328
|
table {
|
|
337
329
|
width: 100%;
|
|
338
|
-
.mat-row,
|
|
339
|
-
.mat-row:not(.tak-table__detail-row) {
|
|
330
|
+
.mat-mdc-row,
|
|
331
|
+
.mat-mdc-row:not(.tak-table__detail-row) {
|
|
340
332
|
height: 30px;
|
|
341
333
|
}
|
|
342
|
-
[mat-row].unbordered .mat-cell {
|
|
343
|
-
border: none;
|
|
334
|
+
[mat-row].unbordered .mat-mdc-cell {
|
|
335
|
+
border: none !important;
|
|
344
336
|
}
|
|
345
|
-
.mat-cell {
|
|
337
|
+
.mat-mdc-cell {
|
|
346
338
|
text-overflow: ellipsis;
|
|
347
339
|
white-space: nowrap;
|
|
348
340
|
overflow: hidden;
|
|
@@ -351,14 +343,14 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
351
343
|
border-radius: $CTM_TABLE_BORDER_RADIUS;
|
|
352
344
|
}
|
|
353
345
|
th.mat-header-cell:first-of-type,
|
|
354
|
-
td.mat-cell:first-of-type,
|
|
346
|
+
td.mat-mdc-cell:first-of-type,
|
|
355
347
|
td.mat-footer-cell:first-of-type {
|
|
356
348
|
padding-left: 24px !important;
|
|
357
349
|
}
|
|
358
350
|
}
|
|
359
351
|
&__detail-row {
|
|
360
352
|
height: 0 !important;
|
|
361
|
-
& .mat-cell {
|
|
353
|
+
& .mat-mdc-cell {
|
|
362
354
|
border-bottom: none !important;
|
|
363
355
|
}
|
|
364
356
|
}
|
|
@@ -394,11 +386,11 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
394
386
|
width: 100%;
|
|
395
387
|
border: 1px solid var(--tak-dark-color-100);
|
|
396
388
|
& .mat-sort-header-content,
|
|
397
|
-
& .mat-footer-cell {
|
|
389
|
+
& .mat-mdc-footer-cell {
|
|
398
390
|
font-weight: bolder;
|
|
399
391
|
color: var(--tak-dark-color-500);
|
|
400
392
|
}
|
|
401
|
-
.mat-cell {
|
|
393
|
+
.mat-mdc-cell {
|
|
402
394
|
border-bottom-color: transparent !important;
|
|
403
395
|
text-overflow: ellipsis;
|
|
404
396
|
white-space: nowrap;
|
|
@@ -407,39 +399,38 @@ $CTM_TABLE_VAL_6: -18px;
|
|
|
407
399
|
}
|
|
408
400
|
tr[has-lines],
|
|
409
401
|
.has-lines {
|
|
410
|
-
& .mat-cell {
|
|
402
|
+
& .mat-mdc-cell {
|
|
411
403
|
border-bottom-color: var(--tak-dark-color-100) !important;
|
|
412
404
|
}
|
|
413
405
|
}
|
|
414
|
-
tr,
|
|
415
406
|
tr[selectable],
|
|
416
407
|
.selectable {
|
|
417
|
-
& .mat-cell {
|
|
408
|
+
& .mat-mdc-cell {
|
|
418
409
|
cursor: pointer;
|
|
419
410
|
}
|
|
420
|
-
&:hover .mat-cell {
|
|
411
|
+
&:hover .mat-mdc-cell {
|
|
421
412
|
background: var(--tak-table-selectable-row-hover) !important;
|
|
422
413
|
transition: ease 0.3s !important;
|
|
423
414
|
}
|
|
424
415
|
&.unselectable {
|
|
425
|
-
& .mat-cell {
|
|
416
|
+
& .mat-mdc-cell {
|
|
426
417
|
background-color: var(--tak-table-not-selectable-row) !important;
|
|
427
418
|
}
|
|
428
|
-
&:hover .mat-cell {
|
|
419
|
+
&:hover .mat-mdc-cell {
|
|
429
420
|
background-color: var(--tak-table-not-selectable-row-hover) !important;
|
|
430
421
|
}
|
|
431
422
|
}
|
|
432
423
|
&.success-row {
|
|
433
|
-
& .mat-cell {
|
|
424
|
+
& .mat-mdc-cell {
|
|
434
425
|
background-color: var(--tak-table-success-row) !important;
|
|
435
426
|
}
|
|
436
|
-
&:hover .mat-cell {
|
|
427
|
+
&:hover .mat-mdc-cell {
|
|
437
428
|
background-color: var(--tak-table-success-row-hover) !important;
|
|
438
429
|
}
|
|
439
430
|
}
|
|
440
431
|
}
|
|
441
|
-
tr.mat-row:not(.tak-table__detail-row),
|
|
442
|
-
tr.mat-footer-row {
|
|
432
|
+
tr.mat-mdc-row:not(.tak-table__detail-row),
|
|
433
|
+
tr.mat-mdc-footer-row {
|
|
443
434
|
height: 30px;
|
|
444
435
|
& td {
|
|
445
436
|
font-size: 12px;
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
@
|
|
2
|
-
@
|
|
3
|
-
@
|
|
4
|
-
@
|
|
5
|
-
@
|
|
6
|
-
@
|
|
7
|
-
@
|
|
8
|
-
@
|
|
9
|
-
@
|
|
10
|
-
@import 'tabs';
|
|
1
|
+
@use 'buttons';
|
|
2
|
+
@use 'cards';
|
|
3
|
+
@use 'checkbox';
|
|
4
|
+
@use 'dialogs';
|
|
5
|
+
@use 'fields';
|
|
6
|
+
@use 'pretty-box';
|
|
7
|
+
@use 'scroll-bar';
|
|
8
|
+
@use 'snack-bar';
|
|
9
|
+
@use 'tabs';
|
|
11
10
|
|
|
12
11
|
.cdk-overlay-dark-backdrop {
|
|
13
12
|
backdrop-filter: blur(3px);
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
@use '@kato-lee/material' as mat;
|
|
2
|
+
|
|
3
|
+
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
|
4
|
+
|
|
5
|
+
html {
|
|
6
|
+
--tak-primary-100: rgb(120, 203, 211);
|
|
7
|
+
--tak-primary-500: rgb(10, 161, 174);
|
|
8
|
+
--tak-primary-700: rgb(8, 119, 129);
|
|
9
|
+
--tak-primary-constrant-100: rgb(140, 238, 247);
|
|
10
|
+
--tak-primary-constrant-500: rgb(14, 187, 202);
|
|
11
|
+
--tak-primary-constrant-700: rgb(15, 163, 177);
|
|
12
|
+
--tak-primary-opacity-100: rgb(120, 203, 211, 0.3);
|
|
13
|
+
--tak-primary-opacity-500: rgb(10, 161, 174, 0.3);
|
|
14
|
+
--tak-primary-opacity-700: rgb(8, 119, 129, 0.3);
|
|
15
|
+
--tak-accent-100: rgb(30, 233, 148);
|
|
16
|
+
--tak-accent-500: rgb(24, 182, 116);
|
|
17
|
+
--tak-accent-700: rgb(29, 139, 110);
|
|
18
|
+
--tak-accent-opacity-100: rgb(30, 233, 148, 0.3);
|
|
19
|
+
--tak-accent-opacity-500: rgb(24, 182, 116, 0.3);
|
|
20
|
+
--tak-accent-opacity-700: rgb(29, 139, 110, 0.3);
|
|
21
|
+
--tak-accent-constrant-100: rgb(177, 243, 214);
|
|
22
|
+
--tak-accent-constrant-500: rgb(70, 221, 158);
|
|
23
|
+
--tak-accent-constrant-700: rgb(65, 185, 135);
|
|
24
|
+
--tak-warn-100: rgb(255, 55, 55);
|
|
25
|
+
--tak-warn-500: rgb(255, 0, 0);
|
|
26
|
+
--tak-warn-700: rgb(168, 0, 0);
|
|
27
|
+
--tak-warn-opacity-100: rgb(255, 55, 55, 0.3);
|
|
28
|
+
--tak-warn-opacity-500: rgb(255, 0, 0, 0.3);
|
|
29
|
+
--tak-warn-opacity-700: rgb(168, 0, 0, 0.3);
|
|
30
|
+
--tak-warn-constrant-100: rgb(254, 191, 191);
|
|
31
|
+
--tak-warn-constrant-500: rgb(255, 128, 128);
|
|
32
|
+
--tak-warn-constrant-700: rgb(191, 96, 96);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// mat.$red-palette
|
|
36
|
+
// mat.$green-palette
|
|
37
|
+
// mat.$blue-palette
|
|
38
|
+
// mat.$yellow-palette
|
|
39
|
+
// mat.$cyan-palette
|
|
40
|
+
// mat.$magenta-palette
|
|
41
|
+
// mat.$orange-palette
|
|
42
|
+
// mat.$chartreuse-palette
|
|
43
|
+
// mat.$spring-green-palette
|
|
44
|
+
// mat.$azure-palette
|
|
45
|
+
// mat.$violet-palette
|
|
46
|
+
// mat.$rose-palette
|
|
47
|
+
|
|
48
|
+
$matTheme: mat.$cyan-palette;
|
|
49
|
+
|
|
50
|
+
$theme: mat.define-theme(
|
|
51
|
+
(
|
|
52
|
+
color: (
|
|
53
|
+
primary: $matTheme,
|
|
54
|
+
tertiary: mat.$green-palette,
|
|
55
|
+
),
|
|
56
|
+
)
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
html {
|
|
60
|
+
@include mat.theme(
|
|
61
|
+
(
|
|
62
|
+
color: $matTheme,
|
|
63
|
+
density: 0,
|
|
64
|
+
)
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
[color='no-theme'] {
|
|
69
|
+
@include mat.button-theme($theme: $theme, $color-variant: 'primary');
|
|
70
|
+
@include mat.icon-button-theme($theme: $theme, $color-variant: 'primary');
|
|
71
|
+
@include mat.fab-theme($theme: $theme, $color-variant: 'primary');
|
|
72
|
+
color: black !important;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
[color='primary'] {
|
|
76
|
+
@include mat.button-theme($theme: $theme, $color-variant: 'primary');
|
|
77
|
+
@include mat.icon-button-theme($theme: $theme, $color-variant: 'primary');
|
|
78
|
+
@include mat.fab-theme($theme: $theme, $color-variant: 'primary');
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
[color='accent'] {
|
|
82
|
+
@include mat.button-theme($theme: $theme, $color-variant: 'tertiary');
|
|
83
|
+
@include mat.icon-button-theme($theme: $theme, $color-variant: 'tertiary');
|
|
84
|
+
@include mat.fab-theme($theme: $theme, $color-variant: 'tertiary');
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
[color='warn'] {
|
|
88
|
+
@include mat.button-theme($theme: $theme, $color-variant: 'error');
|
|
89
|
+
@include mat.icon-button-theme($theme: $theme, $color-variant: 'error');
|
|
90
|
+
@include mat.fab-theme($theme: $theme, $color-variant: 'error');
|
|
91
|
+
}
|
package/box-form/index.d.ts
CHANGED
|
@@ -1,3 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { ElementRef, EventEmitter, ChangeDetectorRef } from '@angular/core';
|
|
3
|
+
import { FormGroup } from '@angular/forms';
|
|
4
|
+
|
|
5
|
+
declare class TakBoxFormComponent {
|
|
6
|
+
private _href;
|
|
7
|
+
private _cd;
|
|
8
|
+
content: ElementRef;
|
|
9
|
+
ngSubmit: EventEmitter<any>;
|
|
10
|
+
ngReset: EventEmitter<any>;
|
|
11
|
+
onBack: EventEmitter<any>;
|
|
12
|
+
formGroup: FormGroup;
|
|
13
|
+
takTitle: string;
|
|
14
|
+
takSubtitle: string;
|
|
15
|
+
showActionButtons: boolean;
|
|
16
|
+
hasResetButton: boolean;
|
|
17
|
+
hasBreadcrumbs: boolean;
|
|
18
|
+
hasBackButton: boolean;
|
|
19
|
+
hasBranding: boolean;
|
|
20
|
+
isLoading: boolean;
|
|
21
|
+
exedentInPx: number;
|
|
22
|
+
submitButton: string;
|
|
23
|
+
resetButton: string;
|
|
24
|
+
private _submitButton;
|
|
25
|
+
private _resetButton;
|
|
26
|
+
private _formGroupSubs;
|
|
27
|
+
constructor(_href: ElementRef, _cd: ChangeDetectorRef);
|
|
28
|
+
ngOnInit(): void;
|
|
29
|
+
clickOnReset(): void;
|
|
30
|
+
ngOnDestroy(): void;
|
|
31
|
+
get orSubmitButton(): string;
|
|
32
|
+
get orResetButton(): string;
|
|
33
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TakBoxFormComponent, never>;
|
|
34
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TakBoxFormComponent, "tak-box-form", never, { "formGroup": { "alias": "formGroup"; "required": false; }; "takTitle": { "alias": "takTitle"; "required": false; }; "takSubtitle": { "alias": "takSubtitle"; "required": false; }; "showActionButtons": { "alias": "showActionButtons"; "required": false; }; "hasResetButton": { "alias": "hasResetButton"; "required": false; }; "hasBreadcrumbs": { "alias": "hasBreadcrumbs"; "required": false; }; "hasBackButton": { "alias": "hasBackButton"; "required": false; }; "hasBranding": { "alias": "hasBranding"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "exedentInPx": { "alias": "exedentInPx"; "required": false; }; "submitButton": { "alias": "submitButton"; "required": false; }; "resetButton": { "alias": "resetButton"; "required": false; }; }, { "ngSubmit": "ngSubmit"; "ngReset": "ngReset"; "onBack": "onBack"; }, never, ["[tak-custom-branding]", "*"], true, never>;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/** @deprecated Use standalone */
|
|
38
|
+
declare class TakBoxFormModule {
|
|
39
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TakBoxFormModule, never>;
|
|
40
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<TakBoxFormModule, never, [typeof TakBoxFormComponent], [typeof TakBoxFormComponent]>;
|
|
41
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<TakBoxFormModule>;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
interface TakBoxFormConfig {
|
|
45
|
+
submitButton: string;
|
|
46
|
+
resetButton: string;
|
|
47
|
+
hasBreadcrumbs?: boolean;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export { TakBoxFormComponent, TakBoxFormModule };
|
|
51
|
+
export type { TakBoxFormConfig };
|
package/capsule/index.d.ts
CHANGED
|
@@ -1,2 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
|
|
3
|
+
type TakPredefinedGrid = 'small' | 'medium' | 'big' | undefined;
|
|
4
|
+
declare class TakCapsuleComponent {
|
|
5
|
+
predefinedGrid: TakPredefinedGrid;
|
|
6
|
+
grids: number[];
|
|
7
|
+
private _gridsOnSides;
|
|
8
|
+
private _gridPrincipal;
|
|
9
|
+
ngOnInit(): void;
|
|
10
|
+
get gridsOnSides(): string;
|
|
11
|
+
get gridPrincipal(): string;
|
|
12
|
+
private _generateGridsFromArray;
|
|
13
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TakCapsuleComponent, never>;
|
|
14
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TakCapsuleComponent, "tak-capsule", never, { "predefinedGrid": { "alias": "predefinedGrid"; "required": false; }; "grids": { "alias": "grids"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/** @deprecated Use standalone */
|
|
18
|
+
declare class TakCapsuleModule {
|
|
19
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TakCapsuleModule, never>;
|
|
20
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<TakCapsuleModule, never, [typeof TakCapsuleComponent], [typeof TakCapsuleComponent]>;
|
|
21
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<TakCapsuleModule>;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export { TakCapsuleComponent, TakCapsuleModule };
|
|
25
|
+
export type { TakPredefinedGrid };
|
package/cards/index.d.ts
CHANGED
|
@@ -1,2 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
|
|
3
|
+
declare class TakSimpleCardComponent {
|
|
4
|
+
hasTopLine: boolean;
|
|
5
|
+
topLineClass: string;
|
|
6
|
+
topLineColor: string;
|
|
7
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TakSimpleCardComponent, never>;
|
|
8
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TakSimpleCardComponent, "tak-simple-card", never, { "hasTopLine": { "alias": "hasTopLine"; "required": false; }; "topLineClass": { "alias": "topLineClass"; "required": false; }; "topLineColor": { "alias": "topLineColor"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/** @deprecated Use standalone */
|
|
12
|
+
declare class TakCardsModule {
|
|
13
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TakCardsModule, never>;
|
|
14
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<TakCardsModule, never, [typeof TakSimpleCardComponent], [typeof TakSimpleCardComponent]>;
|
|
15
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<TakCardsModule>;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { TakCardsModule, TakSimpleCardComponent };
|
package/dialogs/index.d.ts
CHANGED
|
@@ -1,2 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import * as i2 from '@kato-lee/material/dialog';
|
|
3
|
+
import { MatDialogRef } from '@kato-lee/material/dialog';
|
|
4
|
+
|
|
5
|
+
declare class TakDismissDialogButtonComponent {
|
|
6
|
+
dialogRef: MatDialogRef<TakDismissDialogButtonComponent>;
|
|
7
|
+
constructor(dialogRef: MatDialogRef<TakDismissDialogButtonComponent>);
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TakDismissDialogButtonComponent, never>;
|
|
9
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TakDismissDialogButtonComponent, "tak-dismiss-dialog-button", never, {}, {}, never, ["*"], true, never>;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
declare class TakDialogModule {
|
|
13
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TakDialogModule, never>;
|
|
14
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<TakDialogModule, never, [typeof TakDismissDialogButtonComponent], [typeof TakDismissDialogButtonComponent, typeof i2.MatDialogModule]>;
|
|
15
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<TakDialogModule>;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { TakDialogModule, TakDismissDialogButtonComponent };
|