@kaufmann-lab/ui 0.1.1 → 0.1.3
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 +37 -26
- package/fesm2022/kaufmann-lab-ui.mjs +807 -326
- package/fesm2022/kaufmann-lab-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/kaufmann-lab-ui.d.ts +63 -6
|
@@ -3,313 +3,706 @@ import { input, inject, computed, effect, Component, booleanAttribute, model, ou
|
|
|
3
3
|
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
5
5
|
|
|
6
|
-
/**
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* `kf-icon-alert-triangle`, etc.) — `Icon` lo referencia con `<use>`.
|
|
11
|
-
*
|
|
12
|
-
* Los paths vienen de Lucide (https://lucide.dev, licencia ISC), la
|
|
13
|
-
* librería de iconos de trazo cuyo set de nombres coincide exactamente con
|
|
14
|
-
* el que pide el design system (chevron-right, alert-triangle, bar-chart…).
|
|
15
|
-
* Se embeben acá en vez de agregar `lucide` como dependencia del paquete
|
|
16
|
-
* para no sumar peso/versión externa a algo que consumen todos los
|
|
17
|
-
* frontends del ecosistema — son 59 <path>/<circle>/<rect> estáticos, no
|
|
18
|
-
* lógica que necesite actualizarse seguido.
|
|
19
|
-
*
|
|
20
|
-
* Mapeo de 4 nombres de la spec que no existen tal cual en Lucide (renombres
|
|
21
|
-
* entre versiones de esa librería, o conceptos vecinos):
|
|
22
|
-
* tool -> wrench
|
|
23
|
-
* sort -> arrow-up-down (control de orden bidireccional simple)
|
|
24
|
-
* cart -> shopping-cart
|
|
25
|
-
* chevron-left-bar -> panel-left (icono de "colapsar panel lateral")
|
|
26
|
-
*
|
|
27
|
-
* Se inyecta UNA sola vez en el DOM (ver `Icon`), sin importar cuántos
|
|
28
|
-
* `<kf-icon>` distintos haya en la página — todos referencian el mismo
|
|
29
|
-
* sprite vía `<use href="#kf-icon-...">`.
|
|
30
|
-
*/
|
|
31
|
-
const KF_ICON_SPRITE = `<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
|
32
|
-
<symbol id="kf-icon-activity" viewBox="0 0 24 24">
|
|
6
|
+
/** Símbolo de trazo "activity" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
7
|
+
const activity = {
|
|
8
|
+
viewBox: '0 0 24 24',
|
|
9
|
+
markup: `
|
|
33
10
|
<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
|
|
34
|
-
|
|
35
|
-
|
|
11
|
+
`,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/** Símbolo de trazo "alert-circle" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
15
|
+
const alertCircle = {
|
|
16
|
+
viewBox: '0 0 24 24',
|
|
17
|
+
markup: `
|
|
36
18
|
<circle cx="12" cy="12" r="10" />
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
19
|
+
<line x1="12" x2="12" y1="8" y2="12" />
|
|
20
|
+
<line x1="12" x2="12.01" y1="16" y2="16" />
|
|
21
|
+
`,
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
/** Símbolo de trazo "alert-octagon" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
25
|
+
const alertOctagon = {
|
|
26
|
+
viewBox: '0 0 24 24',
|
|
27
|
+
markup: `
|
|
41
28
|
<path d="M12 16h.01" />
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
29
|
+
<path d="M12 8v4" />
|
|
30
|
+
<path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z" />
|
|
31
|
+
`,
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
/** Símbolo de trazo "alert-triangle" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
35
|
+
const alertTriangle = {
|
|
36
|
+
viewBox: '0 0 24 24',
|
|
37
|
+
markup: `
|
|
46
38
|
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
39
|
+
<path d="M12 9v4" />
|
|
40
|
+
<path d="M12 17h.01" />
|
|
41
|
+
`,
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
/** Símbolo de trazo "award" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
45
|
+
const award = {
|
|
46
|
+
viewBox: '0 0 24 24',
|
|
47
|
+
markup: `
|
|
51
48
|
<path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" />
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
49
|
+
<circle cx="12" cy="8" r="6" />
|
|
50
|
+
`,
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
/** Símbolo de trazo "bar-chart" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
54
|
+
const barChart = {
|
|
55
|
+
viewBox: '0 0 24 24',
|
|
56
|
+
markup: `
|
|
55
57
|
<path d="M5 21v-6" />
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
<path d="M12 21V9" />
|
|
59
|
+
<path d="M19 21V3" />
|
|
60
|
+
`,
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
/** Símbolo de trazo "bell" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
64
|
+
const bell = {
|
|
65
|
+
viewBox: '0 0 24 24',
|
|
66
|
+
markup: `
|
|
60
67
|
<path d="M10.268 21a2 2 0 0 0 3.464 0" />
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
68
|
+
<path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
|
|
69
|
+
`,
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
/** Símbolo de trazo "bus" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
73
|
+
const bus = {
|
|
74
|
+
viewBox: '0 0 24 24',
|
|
75
|
+
markup: `
|
|
64
76
|
<path d="M8 6v6" />
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
77
|
+
<path d="M15 6v6" />
|
|
78
|
+
<path d="M2 12h19.6" />
|
|
79
|
+
<path d="M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3" />
|
|
80
|
+
<circle cx="7" cy="18" r="2" />
|
|
81
|
+
<path d="M9 18h5" />
|
|
82
|
+
<circle cx="16" cy="18" r="2" />
|
|
83
|
+
`,
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
/** Símbolo de trazo "calculator" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
87
|
+
const calculator = {
|
|
88
|
+
viewBox: '0 0 24 24',
|
|
89
|
+
markup: `
|
|
73
90
|
<rect width="16" height="20" x="4" y="2" rx="2" />
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
91
|
+
<line x1="8" x2="16" y1="6" y2="6" />
|
|
92
|
+
<line x1="16" x2="16" y1="14" y2="18" />
|
|
93
|
+
<path d="M16 10h.01" />
|
|
94
|
+
<path d="M12 10h.01" />
|
|
95
|
+
<path d="M8 10h.01" />
|
|
96
|
+
<path d="M12 14h.01" />
|
|
97
|
+
<path d="M8 14h.01" />
|
|
98
|
+
<path d="M12 18h.01" />
|
|
99
|
+
<path d="M8 18h.01" />
|
|
100
|
+
`,
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
/** Símbolo de trazo "calendar" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
104
|
+
const calendar = {
|
|
105
|
+
viewBox: '0 0 24 24',
|
|
106
|
+
markup: `
|
|
85
107
|
<path d="M8 2v3" />
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
108
|
+
<path d="M16 2v3" />
|
|
109
|
+
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
110
|
+
<path d="M3 9h18" />
|
|
111
|
+
`,
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
/** Símbolo de trazo "car" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
115
|
+
const car = {
|
|
116
|
+
viewBox: '0 0 24 24',
|
|
117
|
+
markup: `
|
|
91
118
|
<path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2" />
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
119
|
+
<circle cx="7" cy="17" r="2" />
|
|
120
|
+
<path d="M9 17h6" />
|
|
121
|
+
<circle cx="17" cy="17" r="2" />
|
|
122
|
+
`,
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
/** Símbolo de trazo "cart" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
126
|
+
const cart = {
|
|
127
|
+
viewBox: '0 0 24 24',
|
|
128
|
+
markup: `
|
|
97
129
|
<circle cx="8" cy="21" r="1" />
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
130
|
+
<circle cx="19" cy="21" r="1" />
|
|
131
|
+
<path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" />
|
|
132
|
+
`,
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
/** Símbolo de trazo "check" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
136
|
+
const check = {
|
|
137
|
+
viewBox: '0 0 24 24',
|
|
138
|
+
markup: `
|
|
102
139
|
<path d="M20 6 9 17l-5-5" />
|
|
103
|
-
|
|
104
|
-
|
|
140
|
+
`,
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
/** Símbolo de trazo "check-circle" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
144
|
+
const checkCircle = {
|
|
145
|
+
viewBox: '0 0 24 24',
|
|
146
|
+
markup: `
|
|
105
147
|
<path d="M21.801 10A10 10 0 1 1 17 3.335" />
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
148
|
+
<path d="m9 11 3 3L22 4" />
|
|
149
|
+
`,
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
/** Símbolo de trazo "check-square" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
153
|
+
const checkSquare = {
|
|
154
|
+
viewBox: '0 0 24 24',
|
|
155
|
+
markup: `
|
|
109
156
|
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
157
|
+
<path d="m9 12 2 2 4-4" />
|
|
158
|
+
`,
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
/** Símbolo de trazo "chevron-down" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
162
|
+
const chevronDown = {
|
|
163
|
+
viewBox: '0 0 24 24',
|
|
164
|
+
markup: `
|
|
113
165
|
<path d="m6 9 6 6 6-6" />
|
|
114
|
-
|
|
115
|
-
|
|
166
|
+
`,
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
/** Símbolo de trazo "chevron-left" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
170
|
+
const chevronLeft = {
|
|
171
|
+
viewBox: '0 0 24 24',
|
|
172
|
+
markup: `
|
|
116
173
|
<path d="m15 18-6-6 6-6" />
|
|
117
|
-
|
|
118
|
-
|
|
174
|
+
`,
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
/** Símbolo de trazo "chevron-left-bar" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
178
|
+
const chevronLeftBar = {
|
|
179
|
+
viewBox: '0 0 24 24',
|
|
180
|
+
markup: `
|
|
119
181
|
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
182
|
+
<path d="M9 3v18" />
|
|
183
|
+
`,
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
/** Símbolo de trazo "chevron-right" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
187
|
+
const chevronRight = {
|
|
188
|
+
viewBox: '0 0 24 24',
|
|
189
|
+
markup: `
|
|
123
190
|
<path d="m9 18 6-6-6-6" />
|
|
124
|
-
|
|
125
|
-
|
|
191
|
+
`,
|
|
192
|
+
};
|
|
193
|
+
|
|
194
|
+
/** Símbolo de trazo "clipboard" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
195
|
+
const clipboard = {
|
|
196
|
+
viewBox: '0 0 24 24',
|
|
197
|
+
markup: `
|
|
126
198
|
<rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
199
|
+
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
|
|
200
|
+
`,
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
/** Símbolo de trazo "clock" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
204
|
+
const clock = {
|
|
205
|
+
viewBox: '0 0 24 24',
|
|
206
|
+
markup: `
|
|
130
207
|
<circle cx="12" cy="12" r="10" />
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
208
|
+
<path d="M12 6v6l4 2" />
|
|
209
|
+
`,
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
/** Símbolo de trazo "credit-card" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
213
|
+
const creditCard = {
|
|
214
|
+
viewBox: '0 0 24 24',
|
|
215
|
+
markup: `
|
|
134
216
|
<rect width="20" height="14" x="2" y="5" rx="2" />
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
217
|
+
<line x1="2" x2="22" y1="10" y2="10" />
|
|
218
|
+
`,
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
/** Símbolo de trazo "download" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
222
|
+
const download = {
|
|
223
|
+
viewBox: '0 0 24 24',
|
|
224
|
+
markup: `
|
|
138
225
|
<path d="M12 15V3" />
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
226
|
+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
227
|
+
<path d="m7 10 5 5 5-5" />
|
|
228
|
+
`,
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
/** Símbolo de trazo "edit" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
232
|
+
const edit = {
|
|
233
|
+
viewBox: '0 0 24 24',
|
|
234
|
+
markup: `
|
|
143
235
|
<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
236
|
+
<path d="m15 5 4 4" />
|
|
237
|
+
`,
|
|
238
|
+
};
|
|
239
|
+
|
|
240
|
+
/** Símbolo de trazo "external-link" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
241
|
+
const externalLink = {
|
|
242
|
+
viewBox: '0 0 24 24',
|
|
243
|
+
markup: `
|
|
147
244
|
<path d="M15 3h6v6" />
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
245
|
+
<path d="M10 14 21 3" />
|
|
246
|
+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
|
247
|
+
`,
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
/** Símbolo de trazo "eye" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
251
|
+
const eye = {
|
|
252
|
+
viewBox: '0 0 24 24',
|
|
253
|
+
markup: `
|
|
152
254
|
<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
255
|
+
<circle cx="12" cy="12" r="3" />
|
|
256
|
+
`,
|
|
257
|
+
};
|
|
258
|
+
|
|
259
|
+
/** Símbolo de trazo "eye-off" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
260
|
+
const eyeOff = {
|
|
261
|
+
viewBox: '0 0 24 24',
|
|
262
|
+
markup: `
|
|
263
|
+
<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
|
|
264
|
+
<path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
|
|
265
|
+
<path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
|
|
266
|
+
<path d="m2 2 20 20" />
|
|
267
|
+
`,
|
|
268
|
+
};
|
|
269
|
+
|
|
270
|
+
/** Símbolo de trazo "file" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
271
|
+
const file = {
|
|
272
|
+
viewBox: '0 0 24 24',
|
|
273
|
+
markup: `
|
|
156
274
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
275
|
+
<path d="M14 2v5a1 1 0 0 0 1 1h5" />
|
|
276
|
+
`,
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
/** Símbolo de trazo "filter" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
280
|
+
const filter = {
|
|
281
|
+
viewBox: '0 0 24 24',
|
|
282
|
+
markup: `
|
|
160
283
|
<path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" />
|
|
161
|
-
|
|
162
|
-
|
|
284
|
+
`,
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
/** Símbolo de trazo "gauge" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
288
|
+
const gauge = {
|
|
289
|
+
viewBox: '0 0 24 24',
|
|
290
|
+
markup: `
|
|
163
291
|
<path d="m12 14 4-4" />
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
292
|
+
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
|
|
293
|
+
`,
|
|
294
|
+
};
|
|
295
|
+
|
|
296
|
+
/** Símbolo de trazo "gift" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
297
|
+
const gift = {
|
|
298
|
+
viewBox: '0 0 24 24',
|
|
299
|
+
markup: `
|
|
167
300
|
<path d="M12 7v14" />
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
301
|
+
<path d="M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8" />
|
|
302
|
+
<path d="M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5" />
|
|
303
|
+
<rect x="3" y="7" width="18" height="4" rx="1" />
|
|
304
|
+
`,
|
|
305
|
+
};
|
|
306
|
+
|
|
307
|
+
/** Símbolo de trazo "grid" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
308
|
+
const grid = {
|
|
309
|
+
viewBox: '0 0 24 24',
|
|
310
|
+
markup: `
|
|
173
311
|
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
312
|
+
<path d="M3 9h18" />
|
|
313
|
+
<path d="M3 15h18" />
|
|
314
|
+
<path d="M9 3v18" />
|
|
315
|
+
<path d="M15 3v18" />
|
|
316
|
+
`,
|
|
317
|
+
};
|
|
318
|
+
|
|
319
|
+
/** Símbolo de trazo "history" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
320
|
+
const history = {
|
|
321
|
+
viewBox: '0 0 24 24',
|
|
322
|
+
markup: `
|
|
180
323
|
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
324
|
+
<path d="M3 3v5h5" />
|
|
325
|
+
<path d="M12 7v5l4 2" />
|
|
326
|
+
`,
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
/** Símbolo de trazo "inbox" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
330
|
+
const inbox = {
|
|
331
|
+
viewBox: '0 0 24 24',
|
|
332
|
+
markup: `
|
|
185
333
|
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
334
|
+
<path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
|
|
335
|
+
`,
|
|
336
|
+
};
|
|
337
|
+
|
|
338
|
+
/** Símbolo de trazo "layers" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
339
|
+
const layers = {
|
|
340
|
+
viewBox: '0 0 24 24',
|
|
341
|
+
markup: `
|
|
189
342
|
<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
343
|
+
<path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
|
|
344
|
+
<path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
|
|
345
|
+
`,
|
|
346
|
+
};
|
|
347
|
+
|
|
348
|
+
/** Símbolo de trazo "list" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
349
|
+
const list = {
|
|
350
|
+
viewBox: '0 0 24 24',
|
|
351
|
+
markup: `
|
|
194
352
|
<path d="M3 5h.01" />
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
353
|
+
<path d="M3 12h.01" />
|
|
354
|
+
<path d="M3 19h.01" />
|
|
355
|
+
<path d="M8 5h13" />
|
|
356
|
+
<path d="M8 12h13" />
|
|
357
|
+
<path d="M8 19h13" />
|
|
358
|
+
`,
|
|
359
|
+
};
|
|
360
|
+
|
|
361
|
+
/** Símbolo de trazo "map" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
362
|
+
const map = {
|
|
363
|
+
viewBox: '0 0 24 24',
|
|
364
|
+
markup: `
|
|
202
365
|
<path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" />
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
366
|
+
<path d="M15 5.764v15" />
|
|
367
|
+
<path d="M9 3.236v15" />
|
|
368
|
+
`,
|
|
369
|
+
};
|
|
370
|
+
|
|
371
|
+
/** Símbolo de trazo "map-pin" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
372
|
+
const mapPin = {
|
|
373
|
+
viewBox: '0 0 24 24',
|
|
374
|
+
markup: `
|
|
207
375
|
<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
376
|
+
<circle cx="12" cy="10" r="3" />
|
|
377
|
+
`,
|
|
378
|
+
};
|
|
379
|
+
|
|
380
|
+
/** Símbolo de trazo "menu" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
381
|
+
const menu = {
|
|
382
|
+
viewBox: '0 0 24 24',
|
|
383
|
+
markup: `
|
|
211
384
|
<path d="M4 5h16" />
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
385
|
+
<path d="M4 12h16" />
|
|
386
|
+
<path d="M4 19h16" />
|
|
387
|
+
`,
|
|
388
|
+
};
|
|
389
|
+
|
|
390
|
+
/** Símbolo de trazo "mic" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
391
|
+
const mic = {
|
|
392
|
+
viewBox: '0 0 24 24',
|
|
393
|
+
markup: `
|
|
216
394
|
<path d="M12 19v3" />
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
395
|
+
<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
|
|
396
|
+
<rect x="9" y="2" width="6" height="13" rx="3" />
|
|
397
|
+
`,
|
|
398
|
+
};
|
|
399
|
+
|
|
400
|
+
/** Símbolo de trazo "mic-off" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
401
|
+
const micOff = {
|
|
402
|
+
viewBox: '0 0 24 24',
|
|
403
|
+
markup: `
|
|
221
404
|
<path d="M12 19v3" />
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
405
|
+
<path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" />
|
|
406
|
+
<path d="M16.95 16.95A7 7 0 0 1 5 12v-2" />
|
|
407
|
+
<path d="M18.89 13.23A7 7 0 0 0 19 12v-2" />
|
|
408
|
+
<path d="m2 2 20 20" />
|
|
409
|
+
<path d="M9 9v3a3 3 0 0 0 5.12 2.12" />
|
|
410
|
+
`,
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
/** Símbolo de trazo "more-vertical" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
414
|
+
const moreVertical = {
|
|
415
|
+
viewBox: '0 0 24 24',
|
|
416
|
+
markup: `
|
|
229
417
|
<circle cx="12" cy="12" r="1" />
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
418
|
+
<circle cx="12" cy="5" r="1" />
|
|
419
|
+
<circle cx="12" cy="19" r="1" />
|
|
420
|
+
`,
|
|
421
|
+
};
|
|
422
|
+
|
|
423
|
+
/** Símbolo de trazo "pause" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
424
|
+
const pause = {
|
|
425
|
+
viewBox: '0 0 24 24',
|
|
426
|
+
markup: `
|
|
234
427
|
<rect x="14" y="3" width="5" height="18" rx="1" />
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
428
|
+
<rect x="5" y="3" width="5" height="18" rx="1" />
|
|
429
|
+
`,
|
|
430
|
+
};
|
|
431
|
+
|
|
432
|
+
/** Símbolo de trazo "phone" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
433
|
+
const phone = {
|
|
434
|
+
viewBox: '0 0 24 24',
|
|
435
|
+
markup: `
|
|
238
436
|
<path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" />
|
|
239
|
-
|
|
240
|
-
|
|
437
|
+
`,
|
|
438
|
+
};
|
|
439
|
+
|
|
440
|
+
/** Símbolo de trazo "play" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
441
|
+
const play = {
|
|
442
|
+
viewBox: '0 0 24 24',
|
|
443
|
+
markup: `
|
|
241
444
|
<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />
|
|
242
|
-
|
|
243
|
-
|
|
445
|
+
`,
|
|
446
|
+
};
|
|
447
|
+
|
|
448
|
+
/** Símbolo de trazo "plus" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
449
|
+
const plus = {
|
|
450
|
+
viewBox: '0 0 24 24',
|
|
451
|
+
markup: `
|
|
244
452
|
<path d="M5 12h14" />
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
453
|
+
<path d="M12 5v14" />
|
|
454
|
+
`,
|
|
455
|
+
};
|
|
456
|
+
|
|
457
|
+
/** Símbolo de trazo "search" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
458
|
+
const search = {
|
|
459
|
+
viewBox: '0 0 24 24',
|
|
460
|
+
markup: `
|
|
248
461
|
<path d="m21 21-4.34-4.34" />
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
462
|
+
<circle cx="11" cy="11" r="8" />
|
|
463
|
+
`,
|
|
464
|
+
};
|
|
465
|
+
|
|
466
|
+
/** Símbolo de trazo "settings" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
467
|
+
const settings = {
|
|
468
|
+
viewBox: '0 0 24 24',
|
|
469
|
+
markup: `
|
|
252
470
|
<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
471
|
+
<circle cx="12" cy="12" r="3" />
|
|
472
|
+
`,
|
|
473
|
+
};
|
|
474
|
+
|
|
475
|
+
/** Símbolo de trazo "shield-check" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
476
|
+
const shieldCheck = {
|
|
477
|
+
viewBox: '0 0 24 24',
|
|
478
|
+
markup: `
|
|
256
479
|
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
480
|
+
<path d="m9 12 2 2 4-4" />
|
|
481
|
+
`,
|
|
482
|
+
};
|
|
483
|
+
|
|
484
|
+
/** Símbolo de trazo "sort" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
485
|
+
const sort = {
|
|
486
|
+
viewBox: '0 0 24 24',
|
|
487
|
+
markup: `
|
|
260
488
|
<path d="m21 16-4 4-4-4" />
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
489
|
+
<path d="M17 20V4" />
|
|
490
|
+
<path d="m3 8 4-4 4 4" />
|
|
491
|
+
<path d="M7 4v16" />
|
|
492
|
+
`,
|
|
493
|
+
};
|
|
494
|
+
|
|
495
|
+
/** Símbolo de trazo "star" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
496
|
+
const star = {
|
|
497
|
+
viewBox: '0 0 24 24',
|
|
498
|
+
markup: `
|
|
266
499
|
<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
|
|
267
|
-
|
|
268
|
-
|
|
500
|
+
`,
|
|
501
|
+
};
|
|
502
|
+
|
|
503
|
+
/** Símbolo de trazo "ticket" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
504
|
+
const ticket = {
|
|
505
|
+
viewBox: '0 0 24 24',
|
|
506
|
+
markup: `
|
|
269
507
|
<path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
508
|
+
<path d="M13 5v2" />
|
|
509
|
+
<path d="M13 17v2" />
|
|
510
|
+
<path d="M13 11v2" />
|
|
511
|
+
`,
|
|
512
|
+
};
|
|
513
|
+
|
|
514
|
+
/** Símbolo de trazo "tool" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
515
|
+
const tool = {
|
|
516
|
+
viewBox: '0 0 24 24',
|
|
517
|
+
markup: `
|
|
275
518
|
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" />
|
|
276
|
-
|
|
277
|
-
|
|
519
|
+
`,
|
|
520
|
+
};
|
|
521
|
+
|
|
522
|
+
/** Símbolo de trazo "trash" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
523
|
+
const trash = {
|
|
524
|
+
viewBox: '0 0 24 24',
|
|
525
|
+
markup: `
|
|
278
526
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
527
|
+
<path d="M3 6h18" />
|
|
528
|
+
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
|
529
|
+
`,
|
|
530
|
+
};
|
|
531
|
+
|
|
532
|
+
/** Símbolo de trazo "truck" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
533
|
+
const truck = {
|
|
534
|
+
viewBox: '0 0 24 24',
|
|
535
|
+
markup: `
|
|
283
536
|
<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" />
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
537
|
+
<path d="M15 18H9" />
|
|
538
|
+
<path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
|
|
539
|
+
<circle cx="17" cy="18" r="2" />
|
|
540
|
+
<circle cx="7" cy="18" r="2" />
|
|
541
|
+
`,
|
|
542
|
+
};
|
|
543
|
+
|
|
544
|
+
/** Símbolo de trazo "upload-cloud" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
545
|
+
const uploadCloud = {
|
|
546
|
+
viewBox: '0 0 24 24',
|
|
547
|
+
markup: `
|
|
290
548
|
<path d="M12 13v8" />
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
549
|
+
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
|
|
550
|
+
<path d="m8 17 4-4 4 4" />
|
|
551
|
+
`,
|
|
552
|
+
};
|
|
553
|
+
|
|
554
|
+
/** Símbolo de trazo "user" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
555
|
+
const user = {
|
|
556
|
+
viewBox: '0 0 24 24',
|
|
557
|
+
markup: `
|
|
295
558
|
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
559
|
+
<circle cx="12" cy="7" r="4" />
|
|
560
|
+
`,
|
|
561
|
+
};
|
|
562
|
+
|
|
563
|
+
/** Símbolo de trazo "user-search" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
564
|
+
const userSearch = {
|
|
565
|
+
viewBox: '0 0 24 24',
|
|
566
|
+
markup: `
|
|
299
567
|
<circle cx="10" cy="7" r="4" />
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
568
|
+
<path d="M10.3 15H7a4 4 0 0 0-4 4v2" />
|
|
569
|
+
<circle cx="17" cy="17" r="3" />
|
|
570
|
+
<path d="m21 21-1.9-1.9" />
|
|
571
|
+
`,
|
|
572
|
+
};
|
|
573
|
+
|
|
574
|
+
/** Símbolo de trazo "video" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
575
|
+
const video = {
|
|
576
|
+
viewBox: '0 0 24 24',
|
|
577
|
+
markup: `
|
|
305
578
|
<path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" />
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
579
|
+
<rect x="2" y="6" width="14" height="12" rx="2" />
|
|
580
|
+
`,
|
|
581
|
+
};
|
|
582
|
+
|
|
583
|
+
/** Símbolo de trazo "x" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
|
|
584
|
+
const x = {
|
|
585
|
+
viewBox: '0 0 24 24',
|
|
586
|
+
markup: `
|
|
309
587
|
<path d="M18 6 6 18" />
|
|
310
|
-
|
|
311
|
-
|
|
588
|
+
<path d="m6 6 12 12" />
|
|
589
|
+
`,
|
|
590
|
+
};
|
|
591
|
+
|
|
592
|
+
/**
|
|
593
|
+
* Registro tipado de todos los símbolos de ícono. `Record<IconName,
|
|
594
|
+
* IconDefinition>` obliga al compilador a exigir una entrada por cada
|
|
595
|
+
* nombre de `IconName` — agregar un nombre acá sin su archivo en
|
|
596
|
+
* `icons/`, o viceversa, es un error de TypeScript, no un ícono roto
|
|
597
|
+
* en runtime (que era el riesgo real del sprite como string único).
|
|
598
|
+
*
|
|
599
|
+
* Agregar un ícono nuevo es: crear `icons/nombre-del-icono.ts` (copiar
|
|
600
|
+
* el patrón de cualquier archivo vecino), agregarlo a `IconName` en
|
|
601
|
+
* `icon-name.ts`, e importarlo/registrarlo acá.
|
|
602
|
+
*/
|
|
603
|
+
const ICON_DEFINITIONS = {
|
|
604
|
+
activity: activity,
|
|
605
|
+
'alert-circle': alertCircle,
|
|
606
|
+
'alert-octagon': alertOctagon,
|
|
607
|
+
'alert-triangle': alertTriangle,
|
|
608
|
+
award: award,
|
|
609
|
+
'bar-chart': barChart,
|
|
610
|
+
bell: bell,
|
|
611
|
+
bus: bus,
|
|
612
|
+
calculator: calculator,
|
|
613
|
+
calendar: calendar,
|
|
614
|
+
car: car,
|
|
615
|
+
cart: cart,
|
|
616
|
+
check: check,
|
|
617
|
+
'check-circle': checkCircle,
|
|
618
|
+
'check-square': checkSquare,
|
|
619
|
+
'chevron-down': chevronDown,
|
|
620
|
+
'chevron-left': chevronLeft,
|
|
621
|
+
'chevron-left-bar': chevronLeftBar,
|
|
622
|
+
'chevron-right': chevronRight,
|
|
623
|
+
clipboard: clipboard,
|
|
624
|
+
clock: clock,
|
|
625
|
+
'credit-card': creditCard,
|
|
626
|
+
download: download,
|
|
627
|
+
edit: edit,
|
|
628
|
+
'external-link': externalLink,
|
|
629
|
+
eye: eye,
|
|
630
|
+
'eye-off': eyeOff,
|
|
631
|
+
file: file,
|
|
632
|
+
filter: filter,
|
|
633
|
+
gauge: gauge,
|
|
634
|
+
gift: gift,
|
|
635
|
+
grid: grid,
|
|
636
|
+
history: history,
|
|
637
|
+
inbox: inbox,
|
|
638
|
+
layers: layers,
|
|
639
|
+
list: list,
|
|
640
|
+
map: map,
|
|
641
|
+
'map-pin': mapPin,
|
|
642
|
+
menu: menu,
|
|
643
|
+
mic: mic,
|
|
644
|
+
'mic-off': micOff,
|
|
645
|
+
'more-vertical': moreVertical,
|
|
646
|
+
pause: pause,
|
|
647
|
+
phone: phone,
|
|
648
|
+
play: play,
|
|
649
|
+
plus: plus,
|
|
650
|
+
search: search,
|
|
651
|
+
settings: settings,
|
|
652
|
+
'shield-check': shieldCheck,
|
|
653
|
+
sort: sort,
|
|
654
|
+
star: star,
|
|
655
|
+
ticket: ticket,
|
|
656
|
+
tool: tool,
|
|
657
|
+
trash: trash,
|
|
658
|
+
truck: truck,
|
|
659
|
+
'upload-cloud': uploadCloud,
|
|
660
|
+
user: user,
|
|
661
|
+
'user-search': userSearch,
|
|
662
|
+
video: video,
|
|
663
|
+
x: x,
|
|
664
|
+
};
|
|
665
|
+
|
|
666
|
+
/**
|
|
667
|
+
* Sprite SVG con los 60 íconos de trazo del design system (página 5:
|
|
668
|
+
* "Set de 59 iconos de trazo (1.9px, grilla 24×24)", más `eye-off` como
|
|
669
|
+
* extensión propia). Cada ícono es un `<symbol>` con su nombre real de la
|
|
670
|
+
* spec como id (`kf-icon-check`, `kf-icon-alert-triangle`, etc.) — `Icon`
|
|
671
|
+
* lo referencia con `<use>`.
|
|
672
|
+
*
|
|
673
|
+
* Los paths vienen de Lucide (https://lucide.dev, licencia ISC), la
|
|
674
|
+
* librería de iconos de trazo cuyo set de nombres coincide exactamente con
|
|
675
|
+
* el que pide el design system (chevron-right, alert-triangle, bar-chart…).
|
|
676
|
+
* Se embeben acá en vez de agregar `lucide` como dependencia del paquete
|
|
677
|
+
* para no sumar peso/versión externa a algo que consumen todos los
|
|
678
|
+
* frontends del ecosistema — son símbolos estáticos, no lógica que
|
|
679
|
+
* necesite actualizarse seguido.
|
|
680
|
+
*
|
|
681
|
+
* Mapeo de 4 nombres de la spec que no existen tal cual en Lucide (renombres
|
|
682
|
+
* entre versiones de esa librería, o conceptos vecinos):
|
|
683
|
+
* tool -> wrench
|
|
684
|
+
* sort -> arrow-up-down (control de orden bidireccional simple)
|
|
685
|
+
* cart -> shopping-cart
|
|
686
|
+
* chevron-left-bar -> panel-left (icono de "colapsar panel lateral")
|
|
687
|
+
*
|
|
688
|
+
* El sprite ya no es un string único de mano: se construye acá a partir de
|
|
689
|
+
* `ICON_DEFINITIONS` (ver `icons/index.ts`), el registro tipado donde cada
|
|
690
|
+
* ícono vive en su propio archivo bajo `icons/`. Esto es responsabilidad de
|
|
691
|
+
* ensamblado pura — los datos de cada glyph viven en otro lado.
|
|
692
|
+
*
|
|
693
|
+
* Se inyecta UNA sola vez en el DOM (ver `Icon`), sin importar cuántos
|
|
694
|
+
* `<kf-icon>` distintos haya en la página — todos referencian el mismo
|
|
695
|
+
* sprite vía `<use href="#kf-icon-...">`.
|
|
696
|
+
*/
|
|
697
|
+
const KF_ICON_SPRITE = buildIconSprite();
|
|
698
|
+
function buildIconSprite() {
|
|
699
|
+
const symbols = Object.entries(ICON_DEFINITIONS)
|
|
700
|
+
.map(([name, { viewBox, markup }]) => `<symbol id="kf-icon-${name}" viewBox="${viewBox}">${markup}</symbol>`)
|
|
701
|
+
.join('\n ');
|
|
702
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
|
703
|
+
${symbols}
|
|
312
704
|
</svg>`;
|
|
705
|
+
}
|
|
313
706
|
|
|
314
707
|
/** Marca el sprite ya inyectado, para no depender de una bandera de módulo
|
|
315
708
|
* — una bandera compartida entre instancias de test (o entre múltiples
|
|
@@ -318,7 +711,7 @@ const KF_ICON_SPRITE = `<svg xmlns="http://www.w3.org/2000/svg" style="display:
|
|
|
318
711
|
* nunca se inyecta. Comprobar el propio DOM es la fuente de verdad real. */
|
|
319
712
|
const SPRITE_ROOT_ID = 'kf-icon-sprite-root';
|
|
320
713
|
/**
|
|
321
|
-
* Ícono de trazo del design system —
|
|
714
|
+
* Ícono de trazo del design system — 60 glyphs (59 de la página 5 + `eye-off`), grilla 24×24,
|
|
322
715
|
* grosor de trazo 1.9px. Referencia un sprite SVG embebido (ver
|
|
323
716
|
* `icon-sprite.ts`) vía `<use>`, así que no hay peso de red adicional por
|
|
324
717
|
* cada instancia: el sprite se inyecta al DOM una única vez, la primera
|
|
@@ -949,11 +1342,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
949
1342
|
*/
|
|
950
1343
|
class CarouselSlide {
|
|
951
1344
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselSlide, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
952
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: CarouselSlide, isStandalone: true, selector: "kf-carousel-slide", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;flex:0 0 100%;width:100%}\n"] });
|
|
1345
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: CarouselSlide, isStandalone: true, selector: "kf-carousel-slide", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;flex:0 0 100%;width:100%;height:100%}\n"] });
|
|
953
1346
|
}
|
|
954
1347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselSlide, decorators: [{
|
|
955
1348
|
type: Component,
|
|
956
|
-
args: [{ selector: 'kf-carousel-slide', template: `<ng-content />`, styles: [":host{display:block;flex:0 0 100%;width:100%}\n"] }]
|
|
1349
|
+
args: [{ selector: 'kf-carousel-slide', template: `<ng-content />`, styles: [":host{display:block;flex:0 0 100%;width:100%;height:100%}\n"] }]
|
|
957
1350
|
}] });
|
|
958
1351
|
/**
|
|
959
1352
|
* Carrusel de slides con flechas, dots y autoplay opcional.
|
|
@@ -1050,39 +1443,40 @@ class Carousel {
|
|
|
1050
1443
|
</div>
|
|
1051
1444
|
|
|
1052
1445
|
@if (slides().length > 1) {
|
|
1053
|
-
<
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1446
|
+
<div class="kf-carousel__controls">
|
|
1447
|
+
<div class="kf-carousel__dots" role="tablist">
|
|
1448
|
+
@for (slide of slides(); track slide; let i = $index) {
|
|
1449
|
+
<button
|
|
1450
|
+
type="button"
|
|
1451
|
+
role="tab"
|
|
1452
|
+
class="kf-carousel__dot"
|
|
1453
|
+
[class.kf-carousel__dot--active]="i === activeIndex()"
|
|
1454
|
+
[attr.aria-selected]="i === activeIndex()"
|
|
1455
|
+
[attr.aria-label]="'Ir al slide ' + (i + 1)"
|
|
1456
|
+
(click)="goTo(i)"
|
|
1457
|
+
></button>
|
|
1458
|
+
}
|
|
1459
|
+
</div>
|
|
1460
|
+
<button
|
|
1461
|
+
type="button"
|
|
1462
|
+
class="kf-carousel__arrow"
|
|
1463
|
+
aria-label="Slide anterior"
|
|
1464
|
+
(click)="previous()"
|
|
1465
|
+
>
|
|
1466
|
+
‹
|
|
1467
|
+
</button>
|
|
1468
|
+
<button
|
|
1469
|
+
type="button"
|
|
1470
|
+
class="kf-carousel__arrow"
|
|
1471
|
+
aria-label="Slide siguiente"
|
|
1472
|
+
(click)="next()"
|
|
1473
|
+
>
|
|
1474
|
+
›
|
|
1475
|
+
</button>
|
|
1082
1476
|
</div>
|
|
1083
1477
|
}
|
|
1084
1478
|
</div>
|
|
1085
|
-
`, isInline: true, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-carousel{position:relative}.kf-carousel__viewport{overflow:hidden;border-radius:var(--kf-radius-md)}.kf-carousel__track{display:flex;transition:transform .32s ease}.kf-
|
|
1479
|
+
`, isInline: true, styles: [":host{display:block;height:100%;font-family:var(--kf-font-body)}.kf-carousel{position:relative;height:100%}.kf-carousel__viewport{height:100%;overflow:hidden;border-radius:var(--kf-radius-md)}.kf-carousel__track{display:flex;height:100%;transition:transform .32s ease}.kf-carousel__controls{position:absolute;z-index:2;right:var(--kf-space-sm);bottom:var(--kf-space-sm);display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-carousel__arrow{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:1px solid rgb(255 255 255 / 22%);border-radius:var(--kf-radius-pill);background:#ffffff1f;color:#fff;font-size:1rem;line-height:1;cursor:pointer;transition:background .14s}.kf-carousel__arrow:hover{background:#ffffff3d}.kf-carousel__arrow:focus-visible{outline:none;box-shadow:0 0 0 2px #fff9}.kf-carousel__dots{display:flex;gap:var(--kf-space-xs)}.kf-carousel__dot{width:7px;height:7px;padding:0;border:none;border-radius:var(--kf-radius-pill);background:#ffffff59;cursor:pointer;transition:background .14s,width .14s}.kf-carousel__dot:focus-visible{outline:none;box-shadow:0 0 0 2px #fff9}.kf-carousel__dot--active{width:1.125rem;border-radius:var(--kf-radius-xs);background:#fff}\n"] });
|
|
1086
1480
|
}
|
|
1087
1481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Carousel, decorators: [{
|
|
1088
1482
|
type: Component,
|
|
@@ -1104,39 +1498,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1104
1498
|
</div>
|
|
1105
1499
|
|
|
1106
1500
|
@if (slides().length > 1) {
|
|
1107
|
-
<
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1501
|
+
<div class="kf-carousel__controls">
|
|
1502
|
+
<div class="kf-carousel__dots" role="tablist">
|
|
1503
|
+
@for (slide of slides(); track slide; let i = $index) {
|
|
1504
|
+
<button
|
|
1505
|
+
type="button"
|
|
1506
|
+
role="tab"
|
|
1507
|
+
class="kf-carousel__dot"
|
|
1508
|
+
[class.kf-carousel__dot--active]="i === activeIndex()"
|
|
1509
|
+
[attr.aria-selected]="i === activeIndex()"
|
|
1510
|
+
[attr.aria-label]="'Ir al slide ' + (i + 1)"
|
|
1511
|
+
(click)="goTo(i)"
|
|
1512
|
+
></button>
|
|
1513
|
+
}
|
|
1514
|
+
</div>
|
|
1515
|
+
<button
|
|
1516
|
+
type="button"
|
|
1517
|
+
class="kf-carousel__arrow"
|
|
1518
|
+
aria-label="Slide anterior"
|
|
1519
|
+
(click)="previous()"
|
|
1520
|
+
>
|
|
1521
|
+
‹
|
|
1522
|
+
</button>
|
|
1523
|
+
<button
|
|
1524
|
+
type="button"
|
|
1525
|
+
class="kf-carousel__arrow"
|
|
1526
|
+
aria-label="Slide siguiente"
|
|
1527
|
+
(click)="next()"
|
|
1528
|
+
>
|
|
1529
|
+
›
|
|
1530
|
+
</button>
|
|
1136
1531
|
</div>
|
|
1137
1532
|
}
|
|
1138
1533
|
</div>
|
|
1139
|
-
`, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-carousel{position:relative}.kf-carousel__viewport{overflow:hidden;border-radius:var(--kf-radius-md)}.kf-carousel__track{display:flex;transition:transform .32s ease}.kf-
|
|
1534
|
+
`, styles: [":host{display:block;height:100%;font-family:var(--kf-font-body)}.kf-carousel{position:relative;height:100%}.kf-carousel__viewport{height:100%;overflow:hidden;border-radius:var(--kf-radius-md)}.kf-carousel__track{display:flex;height:100%;transition:transform .32s ease}.kf-carousel__controls{position:absolute;z-index:2;right:var(--kf-space-sm);bottom:var(--kf-space-sm);display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-carousel__arrow{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:1px solid rgb(255 255 255 / 22%);border-radius:var(--kf-radius-pill);background:#ffffff1f;color:#fff;font-size:1rem;line-height:1;cursor:pointer;transition:background .14s}.kf-carousel__arrow:hover{background:#ffffff3d}.kf-carousel__arrow:focus-visible{outline:none;box-shadow:0 0 0 2px #fff9}.kf-carousel__dots{display:flex;gap:var(--kf-space-xs)}.kf-carousel__dot{width:7px;height:7px;padding:0;border:none;border-radius:var(--kf-radius-pill);background:#ffffff59;cursor:pointer;transition:background .14s,width .14s}.kf-carousel__dot:focus-visible{outline:none;box-shadow:0 0 0 2px #fff9}.kf-carousel__dot--active{width:1.125rem;border-radius:var(--kf-radius-xs);background:#fff}\n"] }]
|
|
1140
1535
|
}], propDecorators: { autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlide), { isSignal: true }] }] } });
|
|
1141
1536
|
|
|
1142
1537
|
/**
|
|
@@ -1304,6 +1699,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1304
1699
|
}, styles: [":host{display:inline-flex;align-items:center;gap:var(--kf-space-xs);padding:var(--kf-space-xs) var(--kf-space-sm);border-radius:var(--kf-radius-pill);border:1px solid transparent;font:inherit;font-size:.875em;line-height:1;color:var(--kf-color-text);background:var(--kf-color-surface);border-color:var(--kf-color-border);white-space:nowrap}:host(.kf-chip--ok){background:var(--kf-color-success-soft);border-color:var(--kf-color-success-soft);color:var(--kf-color-text)}:host(.kf-chip--warn){background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning-soft);color:var(--kf-color-text)}:host(.kf-chip--error){background:var(--kf-color-error-soft);border-color:var(--kf-color-error-soft);color:var(--kf-color-text)}:host(.kf-chip--neutral){background:var(--kf-color-surface);border-color:var(--kf-color-border);color:var(--kf-color-text)}.kf-chip__dot{inline-size:.5em;block-size:.5em;border-radius:var(--kf-radius-pill);flex:none;background:var(--kf-color-text-muted)}.kf-chip__label{display:inline-block}.kf-chip__dot--ok{background:var(--kf-color-success)}.kf-chip__dot--warn{background:var(--kf-color-warning)}.kf-chip__dot--error{background:var(--kf-color-error)}.kf-chip__dot--neutral{background:var(--kf-color-text-muted)}\n"] }]
|
|
1305
1700
|
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
|
|
1306
1701
|
|
|
1702
|
+
/**
|
|
1703
|
+
* Línea separadora decorativa entre bloques de contenido (ej. columnas de
|
|
1704
|
+
* metadata en `kf-company-selector`). `vertical` necesita que el contenedor
|
|
1705
|
+
* padre sea flex/grid con altura definida — se estira con `align-self:
|
|
1706
|
+
* stretch`; sin eso no tiene alto propio y no se ve.
|
|
1707
|
+
*
|
|
1708
|
+
* <kf-divider />
|
|
1709
|
+
* <kf-divider orientation="vertical" />
|
|
1710
|
+
*/
|
|
1711
|
+
class Divider {
|
|
1712
|
+
orientation = input('horizontal', /* @ts-ignore */
|
|
1713
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
1714
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Divider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1715
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: Divider, isStandalone: true, selector: "kf-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation()", "class.kf-divider--vertical": "orientation() === 'vertical'" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;flex:none;background:var(--kf-color-border)}:host(.kf-divider--vertical){width:1px;align-self:stretch}:host(:not(.kf-divider--vertical)){width:100%;height:1px}\n"] });
|
|
1716
|
+
}
|
|
1717
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Divider, decorators: [{
|
|
1718
|
+
type: Component,
|
|
1719
|
+
args: [{ selector: 'kf-divider', template: '', host: {
|
|
1720
|
+
role: 'separator',
|
|
1721
|
+
'[attr.aria-orientation]': 'orientation()',
|
|
1722
|
+
'[class.kf-divider--vertical]': "orientation() === 'vertical'",
|
|
1723
|
+
}, styles: [":host{display:block;flex:none;background:var(--kf-color-border)}:host(.kf-divider--vertical){width:1px;align-self:stretch}:host(:not(.kf-divider--vertical)){width:100%;height:1px}\n"] }]
|
|
1724
|
+
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
1725
|
+
|
|
1307
1726
|
/**
|
|
1308
1727
|
* Label superior compartido por todos los campos de formulario del design
|
|
1309
1728
|
* system (páginas 11-12: Text Field, Select, Multiselect) — uppercase,
|
|
@@ -1565,19 +1984,22 @@ class CompanySelector {
|
|
|
1565
1984
|
/>
|
|
1566
1985
|
@if (meta().length) {
|
|
1567
1986
|
<div class="kf-company-selector__meta">
|
|
1568
|
-
@for (item of meta(); track item.label) {
|
|
1987
|
+
@for (item of meta(); track item.label; let last = $last) {
|
|
1569
1988
|
<div class="kf-company-selector__meta-item">
|
|
1570
1989
|
<span class="kf-company-selector__meta-label">{{ item.label }}</span>
|
|
1571
1990
|
<span class="kf-company-selector__meta-value">{{ item.value }}</span>
|
|
1572
1991
|
</div>
|
|
1992
|
+
@if (!last) {
|
|
1993
|
+
<kf-divider orientation="vertical" />
|
|
1994
|
+
}
|
|
1573
1995
|
}
|
|
1574
1996
|
</div>
|
|
1575
1997
|
}
|
|
1576
|
-
`, isInline: true, styles: [":host{display:flex;align-items:center;gap:var(--kf-space-lg);flex-wrap:wrap;padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-company-selector__select{flex:1 1 260px;min-width:0}.kf-company-selector__meta{display:flex;gap:var(--kf-space-lg);flex-wrap:wrap}.kf-company-selector__meta-item{display:flex;flex-direction:column;gap:2px}.kf-company-selector__meta-label{font-family:var(--kf-font-title);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-company-selector__meta-value{font-family:var(--kf-font-mono);font-size:.875rem;color:var(--kf-color-ink)}\n"], dependencies: [{ kind: "component", type: Select, selector: "kf-select", inputs: ["label", "options", "value", "placeholder", "disabled"], outputs: ["valueChange"] }] });
|
|
1998
|
+
`, isInline: true, styles: [":host{display:flex;align-items:center;gap:var(--kf-space-lg);flex-wrap:wrap;padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-company-selector__select{flex:1 1 260px;min-width:0}.kf-company-selector__meta{display:flex;gap:var(--kf-space-lg);flex-wrap:wrap}.kf-company-selector__meta-item{display:flex;flex-direction:column;gap:2px}.kf-company-selector__meta-label{font-family:var(--kf-font-title);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-company-selector__meta-value{font-family:var(--kf-font-mono);font-size:.875rem;color:var(--kf-color-ink)}\n"], dependencies: [{ kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "options", "value", "placeholder", "disabled"], outputs: ["valueChange"] }] });
|
|
1577
1999
|
}
|
|
1578
2000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CompanySelector, decorators: [{
|
|
1579
2001
|
type: Component,
|
|
1580
|
-
args: [{ selector: 'kf-company-selector', imports: [Select], template: `
|
|
2002
|
+
args: [{ selector: 'kf-company-selector', imports: [Divider, Select], template: `
|
|
1581
2003
|
<kf-select
|
|
1582
2004
|
class="kf-company-selector__select"
|
|
1583
2005
|
[label]="label()"
|
|
@@ -1587,11 +2009,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1587
2009
|
/>
|
|
1588
2010
|
@if (meta().length) {
|
|
1589
2011
|
<div class="kf-company-selector__meta">
|
|
1590
|
-
@for (item of meta(); track item.label) {
|
|
2012
|
+
@for (item of meta(); track item.label; let last = $last) {
|
|
1591
2013
|
<div class="kf-company-selector__meta-item">
|
|
1592
2014
|
<span class="kf-company-selector__meta-label">{{ item.label }}</span>
|
|
1593
2015
|
<span class="kf-company-selector__meta-value">{{ item.value }}</span>
|
|
1594
2016
|
</div>
|
|
2017
|
+
@if (!last) {
|
|
2018
|
+
<kf-divider orientation="vertical" />
|
|
2019
|
+
}
|
|
1595
2020
|
}
|
|
1596
2021
|
</div>
|
|
1597
2022
|
}
|
|
@@ -2720,6 +3145,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2720
3145
|
* <kf-input label="Correo" formControlName="email"
|
|
2721
3146
|
* [invalid]="email.invalid && email.touched"
|
|
2722
3147
|
* [errorMessage]="email.touched && email.hasError('required') ? 'Ingresa tu correo.' : undefined" />
|
|
3148
|
+
*
|
|
3149
|
+
* `toggleable` solo tiene efecto cuando `type="password"`: agrega un botón
|
|
3150
|
+
* de ojo al final del campo que alterna la visibilidad del valor tipeado
|
|
3151
|
+
* (cambia el `type` real del `<input>` nativo entre `password` y `text`,
|
|
3152
|
+
* nunca expone el valor en el DOM de otra forma). El botón es `type="button"`
|
|
3153
|
+
* — nunca dispara submit del form contenedor — y anuncia su acción con
|
|
3154
|
+
* `aria-label` dinámico y `aria-pressed`, ya que es un toggle, no un botón
|
|
3155
|
+
* de una sola acción.
|
|
3156
|
+
*
|
|
3157
|
+
* <kf-input type="password" label="Contraseña" toggleable formControlName="password" />
|
|
2723
3158
|
*/
|
|
2724
3159
|
class Input {
|
|
2725
3160
|
static nextId = 0;
|
|
@@ -2746,6 +3181,8 @@ class Input {
|
|
|
2746
3181
|
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
2747
3182
|
placeholder = input('', /* @ts-ignore */
|
|
2748
3183
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
3184
|
+
/** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
|
|
3185
|
+
toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2749
3186
|
inputId = `kf-input-${Input.nextId++}`;
|
|
2750
3187
|
hintId = `${this.inputId}-hint`;
|
|
2751
3188
|
errorId = `${this.inputId}-error`;
|
|
@@ -2759,6 +3196,20 @@ class Input {
|
|
|
2759
3196
|
/** Disabled real: por input() directo o por el FormControl asociado. */
|
|
2760
3197
|
isDisabled = computed(() => this.disabled() || this.disabledByForm(), /* @ts-ignore */
|
|
2761
3198
|
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
3199
|
+
/** Estado interno del toggle — irrelevante si `showPasswordToggle()` es false. */
|
|
3200
|
+
passwordVisible = signal(false, /* @ts-ignore */
|
|
3201
|
+
...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
|
|
3202
|
+
/** El botón solo tiene sentido si el campo realmente es de contraseña. */
|
|
3203
|
+
showPasswordToggle = computed(() => this.toggleable() && this.type() === 'password', /* @ts-ignore */
|
|
3204
|
+
...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : /* istanbul ignore next */ []));
|
|
3205
|
+
/**
|
|
3206
|
+
* `type` real que recibe el `<input>` nativo: igual a `type()` salvo
|
|
3207
|
+
* cuando el toggle está activo y visible, donde pasa a `text` para
|
|
3208
|
+
* mostrar el valor en claro sin cambiar `type()` en sí (evita que un
|
|
3209
|
+
* consumidor que lee `type()` desde afuera vea un valor inconsistente).
|
|
3210
|
+
*/
|
|
3211
|
+
effectiveType = computed(() => this.showPasswordToggle() && this.passwordVisible() ? 'text' : this.type(), /* @ts-ignore */
|
|
3212
|
+
...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
|
|
2762
3213
|
onChange = () => { };
|
|
2763
3214
|
onTouched = () => { };
|
|
2764
3215
|
ngAfterViewInit() {
|
|
@@ -2798,8 +3249,16 @@ class Input {
|
|
|
2798
3249
|
this.focused.set(false);
|
|
2799
3250
|
this.onTouched();
|
|
2800
3251
|
}
|
|
3252
|
+
/**
|
|
3253
|
+
* Alterna la visibilidad del valor. No dispara `onBlur`/pierde el foco:
|
|
3254
|
+
* el botón vive dentro del mismo `.kf-input__field`, así que un click acá
|
|
3255
|
+
* no debe tratarse como si el usuario hubiese abandonado el campo.
|
|
3256
|
+
*/
|
|
3257
|
+
onTogglePasswordVisibility() {
|
|
3258
|
+
this.passwordVisible.update((visible) => !visible);
|
|
3259
|
+
}
|
|
2801
3260
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2802
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Input, isStandalone: true, selector: "kf-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
3261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Input, isStandalone: true, selector: "kf-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
2803
3262
|
{
|
|
2804
3263
|
provide: NG_VALUE_ACCESSOR,
|
|
2805
3264
|
useExisting: forwardRef(() => Input),
|
|
@@ -2822,7 +3281,7 @@ class Input {
|
|
|
2822
3281
|
#nativeInput
|
|
2823
3282
|
[id]="inputId"
|
|
2824
3283
|
class="kf-input__control"
|
|
2825
|
-
[type]="
|
|
3284
|
+
[type]="effectiveType()"
|
|
2826
3285
|
[placeholder]="placeholder()"
|
|
2827
3286
|
[disabled]="isDisabled()"
|
|
2828
3287
|
[attr.aria-describedby]="errorMessage() ? errorId : hint() ? hintId : null"
|
|
@@ -2832,7 +3291,17 @@ class Input {
|
|
|
2832
3291
|
(blur)="onBlur()"
|
|
2833
3292
|
(focus)="focused.set(true)"
|
|
2834
3293
|
/>
|
|
2835
|
-
@if (
|
|
3294
|
+
@if (showPasswordToggle()) {
|
|
3295
|
+
<button
|
|
3296
|
+
type="button"
|
|
3297
|
+
class="kf-input__toggle"
|
|
3298
|
+
[attr.aria-label]="passwordVisible() ? 'Ocultar contraseña' : 'Mostrar contraseña'"
|
|
3299
|
+
[attr.aria-pressed]="passwordVisible()"
|
|
3300
|
+
(click)="onTogglePasswordVisibility()"
|
|
3301
|
+
>
|
|
3302
|
+
<kf-icon [name]="passwordVisible() ? 'eye-off' : 'eye'" size="sm" />
|
|
3303
|
+
</button>
|
|
3304
|
+
} @else if (suffix()) {
|
|
2836
3305
|
<span class="kf-input__suffix">{{ suffix() }}</span>
|
|
2837
3306
|
}
|
|
2838
3307
|
</div>
|
|
@@ -2841,7 +3310,7 @@ class Input {
|
|
|
2841
3310
|
} @else if (hint()) {
|
|
2842
3311
|
<span class="kf-input__hint" [id]="hintId">{{ hint() }}</span>
|
|
2843
3312
|
}
|
|
2844
|
-
`, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:0 0 0 3px #eb575738}.kf-input__field--disabled{opacity:.5}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-input__error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3313
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:0 0 0 3px #eb575738}.kf-input__field--disabled{opacity:.5}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-input__hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-input__error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2845
3314
|
}
|
|
2846
3315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Input, decorators: [{
|
|
2847
3316
|
type: Component,
|
|
@@ -2868,7 +3337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2868
3337
|
#nativeInput
|
|
2869
3338
|
[id]="inputId"
|
|
2870
3339
|
class="kf-input__control"
|
|
2871
|
-
[type]="
|
|
3340
|
+
[type]="effectiveType()"
|
|
2872
3341
|
[placeholder]="placeholder()"
|
|
2873
3342
|
[disabled]="isDisabled()"
|
|
2874
3343
|
[attr.aria-describedby]="errorMessage() ? errorId : hint() ? hintId : null"
|
|
@@ -2878,7 +3347,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2878
3347
|
(blur)="onBlur()"
|
|
2879
3348
|
(focus)="focused.set(true)"
|
|
2880
3349
|
/>
|
|
2881
|
-
@if (
|
|
3350
|
+
@if (showPasswordToggle()) {
|
|
3351
|
+
<button
|
|
3352
|
+
type="button"
|
|
3353
|
+
class="kf-input__toggle"
|
|
3354
|
+
[attr.aria-label]="passwordVisible() ? 'Ocultar contraseña' : 'Mostrar contraseña'"
|
|
3355
|
+
[attr.aria-pressed]="passwordVisible()"
|
|
3356
|
+
(click)="onTogglePasswordVisibility()"
|
|
3357
|
+
>
|
|
3358
|
+
<kf-icon [name]="passwordVisible() ? 'eye-off' : 'eye'" size="sm" />
|
|
3359
|
+
</button>
|
|
3360
|
+
} @else if (suffix()) {
|
|
2882
3361
|
<span class="kf-input__suffix">{{ suffix() }}</span>
|
|
2883
3362
|
}
|
|
2884
3363
|
</div>
|
|
@@ -2887,8 +3366,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2887
3366
|
} @else if (hint()) {
|
|
2888
3367
|
<span class="kf-input__hint" [id]="hintId">{{ hint() }}</span>
|
|
2889
3368
|
}
|
|
2890
|
-
`, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:0 0 0 3px #eb575738}.kf-input__field--disabled{opacity:.5}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-input__error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}\n"] }]
|
|
2891
|
-
}], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
3369
|
+
`, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:0 0 0 3px #eb575738}.kf-input__field--disabled{opacity:.5}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-input__hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-input__error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}\n"] }]
|
|
3370
|
+
}], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }] } });
|
|
2892
3371
|
|
|
2893
3372
|
/**
|
|
2894
3373
|
* Card de estadística/KPI: label, valor grande, ícono opcional en la esquina
|
|
@@ -3655,15 +4134,16 @@ class Panel {
|
|
|
3655
4134
|
</a>
|
|
3656
4135
|
}
|
|
3657
4136
|
</div>
|
|
4137
|
+
<kf-divider />
|
|
3658
4138
|
<div class="kf-panel__body">
|
|
3659
4139
|
<ng-content />
|
|
3660
4140
|
</div>
|
|
3661
4141
|
</kf-card>
|
|
3662
|
-
`, isInline: true, styles: [":host{display:block}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-panel__action:hover{text-decoration:underline}.kf-panel__body{display:flex;flex-direction:column;gap:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
|
|
4142
|
+
`, isInline: true, styles: [":host{display:block}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-panel__action:hover{text-decoration:underline}.kf-panel__body{display:flex;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
|
|
3663
4143
|
}
|
|
3664
4144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Panel, decorators: [{
|
|
3665
4145
|
type: Component,
|
|
3666
|
-
args: [{ selector: 'kf-panel', imports: [Card, Icon], template: `
|
|
4146
|
+
args: [{ selector: 'kf-panel', imports: [Card, Divider, Icon], template: `
|
|
3667
4147
|
<kf-card>
|
|
3668
4148
|
<div class="kf-panel__head">
|
|
3669
4149
|
<span class="kf-panel__title">{{ title() }}</span>
|
|
@@ -3674,11 +4154,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
3674
4154
|
</a>
|
|
3675
4155
|
}
|
|
3676
4156
|
</div>
|
|
4157
|
+
<kf-divider />
|
|
3677
4158
|
<div class="kf-panel__body">
|
|
3678
4159
|
<ng-content />
|
|
3679
4160
|
</div>
|
|
3680
4161
|
</kf-card>
|
|
3681
|
-
`, styles: [":host{display:block}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-panel__action:hover{text-decoration:underline}.kf-panel__body{display:flex;flex-direction:column;gap:var(--kf-space-sm)}\n"] }]
|
|
4162
|
+
`, styles: [":host{display:block}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-panel__action:hover{text-decoration:underline}.kf-panel__body{display:flex;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"] }]
|
|
3682
4163
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }] } });
|
|
3683
4164
|
|
|
3684
4165
|
/**
|
|
@@ -4798,5 +5279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
4798
5279
|
* Generated bundle index. Do not edit.
|
|
4799
5280
|
*/
|
|
4800
5281
|
|
|
4801
|
-
export { ActionTile, AdminBadge, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, Icon, Input, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, SelectMenu, Skeleton, Spinner, StatTile, StatusPill, Tabs, ToastHost, ToastService, VehicleHeader, ViewToggle };
|
|
5282
|
+
export { ActionTile, AdminBadge, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, Divider, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, Icon, Input, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, SelectMenu, Skeleton, Spinner, StatTile, StatusPill, Tabs, ToastHost, ToastService, VehicleHeader, ViewToggle };
|
|
4802
5283
|
//# sourceMappingURL=kaufmann-lab-ui.mjs.map
|