@kaufmann-lab/ui 0.1.2 → 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.
|
@@ -3,319 +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: `
|
|
156
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" />
|
|
157
264
|
<path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
|
|
158
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" />
|
|
159
266
|
<path d="m2 2 20 20" />
|
|
160
|
-
|
|
161
|
-
|
|
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: `
|
|
162
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" />
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
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: `
|
|
166
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" />
|
|
167
|
-
|
|
168
|
-
|
|
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: `
|
|
169
291
|
<path d="m12 14 4-4" />
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
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: `
|
|
173
300
|
<path d="M12 7v14" />
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
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: `
|
|
179
311
|
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
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: `
|
|
186
323
|
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
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: `
|
|
191
333
|
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
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: `
|
|
195
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" />
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
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: `
|
|
200
352
|
<path d="M3 5h.01" />
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
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: `
|
|
208
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" />
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
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: `
|
|
213
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" />
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
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: `
|
|
217
384
|
<path d="M4 5h16" />
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
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: `
|
|
222
394
|
<path d="M12 19v3" />
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
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: `
|
|
227
404
|
<path d="M12 19v3" />
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
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: `
|
|
235
417
|
<circle cx="12" cy="12" r="1" />
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
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: `
|
|
240
427
|
<rect x="14" y="3" width="5" height="18" rx="1" />
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
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: `
|
|
244
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" />
|
|
245
|
-
|
|
246
|
-
|
|
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: `
|
|
247
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" />
|
|
248
|
-
|
|
249
|
-
|
|
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: `
|
|
250
452
|
<path d="M5 12h14" />
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
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: `
|
|
254
461
|
<path d="m21 21-4.34-4.34" />
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
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: `
|
|
258
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" />
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
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: `
|
|
262
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" />
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
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: `
|
|
266
488
|
<path d="m21 16-4 4-4-4" />
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
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: `
|
|
272
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" />
|
|
273
|
-
|
|
274
|
-
|
|
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: `
|
|
275
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" />
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
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: `
|
|
281
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" />
|
|
282
|
-
|
|
283
|
-
|
|
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: `
|
|
284
526
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
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: `
|
|
289
536
|
<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" />
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
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: `
|
|
296
548
|
<path d="M12 13v8" />
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
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: `
|
|
301
558
|
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
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: `
|
|
305
567
|
<circle cx="10" cy="7" r="4" />
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
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: `
|
|
311
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" />
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
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: `
|
|
315
587
|
<path d="M18 6 6 18" />
|
|
316
|
-
|
|
317
|
-
|
|
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}
|
|
318
704
|
</svg>`;
|
|
705
|
+
}
|
|
319
706
|
|
|
320
707
|
/** Marca el sprite ya inyectado, para no depender de una bandera de módulo
|
|
321
708
|
* — una bandera compartida entre instancias de test (o entre múltiples
|
|
@@ -324,7 +711,7 @@ const KF_ICON_SPRITE = `<svg xmlns="http://www.w3.org/2000/svg" style="display:
|
|
|
324
711
|
* nunca se inyecta. Comprobar el propio DOM es la fuente de verdad real. */
|
|
325
712
|
const SPRITE_ROOT_ID = 'kf-icon-sprite-root';
|
|
326
713
|
/**
|
|
327
|
-
* Í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,
|
|
328
715
|
* grosor de trazo 1.9px. Referencia un sprite SVG embebido (ver
|
|
329
716
|
* `icon-sprite.ts`) vía `<use>`, así que no hay peso de red adicional por
|
|
330
717
|
* cada instancia: el sprite se inyecta al DOM una única vez, la primera
|
|
@@ -955,11 +1342,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
955
1342
|
*/
|
|
956
1343
|
class CarouselSlide {
|
|
957
1344
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselSlide, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
958
|
-
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"] });
|
|
959
1346
|
}
|
|
960
1347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselSlide, decorators: [{
|
|
961
1348
|
type: Component,
|
|
962
|
-
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"] }]
|
|
963
1350
|
}] });
|
|
964
1351
|
/**
|
|
965
1352
|
* Carrusel de slides con flechas, dots y autoplay opcional.
|
|
@@ -1056,39 +1443,40 @@ class Carousel {
|
|
|
1056
1443
|
</div>
|
|
1057
1444
|
|
|
1058
1445
|
@if (slides().length > 1) {
|
|
1059
|
-
<
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
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>
|
|
1088
1476
|
</div>
|
|
1089
1477
|
}
|
|
1090
1478
|
</div>
|
|
1091
|
-
`, 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"] });
|
|
1092
1480
|
}
|
|
1093
1481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Carousel, decorators: [{
|
|
1094
1482
|
type: Component,
|
|
@@ -1110,39 +1498,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1110
1498
|
</div>
|
|
1111
1499
|
|
|
1112
1500
|
@if (slides().length > 1) {
|
|
1113
|
-
<
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
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>
|
|
1142
1531
|
</div>
|
|
1143
1532
|
}
|
|
1144
1533
|
</div>
|
|
1145
|
-
`, 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"] }]
|
|
1146
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 }] }] } });
|
|
1147
1536
|
|
|
1148
1537
|
/**
|
|
@@ -1310,6 +1699,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1310
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"] }]
|
|
1311
1700
|
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
|
|
1312
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
|
+
|
|
1313
1726
|
/**
|
|
1314
1727
|
* Label superior compartido por todos los campos de formulario del design
|
|
1315
1728
|
* system (páginas 11-12: Text Field, Select, Multiselect) — uppercase,
|
|
@@ -1571,19 +1984,22 @@ class CompanySelector {
|
|
|
1571
1984
|
/>
|
|
1572
1985
|
@if (meta().length) {
|
|
1573
1986
|
<div class="kf-company-selector__meta">
|
|
1574
|
-
@for (item of meta(); track item.label) {
|
|
1987
|
+
@for (item of meta(); track item.label; let last = $last) {
|
|
1575
1988
|
<div class="kf-company-selector__meta-item">
|
|
1576
1989
|
<span class="kf-company-selector__meta-label">{{ item.label }}</span>
|
|
1577
1990
|
<span class="kf-company-selector__meta-value">{{ item.value }}</span>
|
|
1578
1991
|
</div>
|
|
1992
|
+
@if (!last) {
|
|
1993
|
+
<kf-divider orientation="vertical" />
|
|
1994
|
+
}
|
|
1579
1995
|
}
|
|
1580
1996
|
</div>
|
|
1581
1997
|
}
|
|
1582
|
-
`, 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"] }] });
|
|
1583
1999
|
}
|
|
1584
2000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CompanySelector, decorators: [{
|
|
1585
2001
|
type: Component,
|
|
1586
|
-
args: [{ selector: 'kf-company-selector', imports: [Select], template: `
|
|
2002
|
+
args: [{ selector: 'kf-company-selector', imports: [Divider, Select], template: `
|
|
1587
2003
|
<kf-select
|
|
1588
2004
|
class="kf-company-selector__select"
|
|
1589
2005
|
[label]="label()"
|
|
@@ -1593,11 +2009,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1593
2009
|
/>
|
|
1594
2010
|
@if (meta().length) {
|
|
1595
2011
|
<div class="kf-company-selector__meta">
|
|
1596
|
-
@for (item of meta(); track item.label) {
|
|
2012
|
+
@for (item of meta(); track item.label; let last = $last) {
|
|
1597
2013
|
<div class="kf-company-selector__meta-item">
|
|
1598
2014
|
<span class="kf-company-selector__meta-label">{{ item.label }}</span>
|
|
1599
2015
|
<span class="kf-company-selector__meta-value">{{ item.value }}</span>
|
|
1600
2016
|
</div>
|
|
2017
|
+
@if (!last) {
|
|
2018
|
+
<kf-divider orientation="vertical" />
|
|
2019
|
+
}
|
|
1601
2020
|
}
|
|
1602
2021
|
</div>
|
|
1603
2022
|
}
|
|
@@ -3715,15 +4134,16 @@ class Panel {
|
|
|
3715
4134
|
</a>
|
|
3716
4135
|
}
|
|
3717
4136
|
</div>
|
|
4137
|
+
<kf-divider />
|
|
3718
4138
|
<div class="kf-panel__body">
|
|
3719
4139
|
<ng-content />
|
|
3720
4140
|
</div>
|
|
3721
4141
|
</kf-card>
|
|
3722
|
-
`, 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"] }] });
|
|
3723
4143
|
}
|
|
3724
4144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Panel, decorators: [{
|
|
3725
4145
|
type: Component,
|
|
3726
|
-
args: [{ selector: 'kf-panel', imports: [Card, Icon], template: `
|
|
4146
|
+
args: [{ selector: 'kf-panel', imports: [Card, Divider, Icon], template: `
|
|
3727
4147
|
<kf-card>
|
|
3728
4148
|
<div class="kf-panel__head">
|
|
3729
4149
|
<span class="kf-panel__title">{{ title() }}</span>
|
|
@@ -3734,11 +4154,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
3734
4154
|
</a>
|
|
3735
4155
|
}
|
|
3736
4156
|
</div>
|
|
4157
|
+
<kf-divider />
|
|
3737
4158
|
<div class="kf-panel__body">
|
|
3738
4159
|
<ng-content />
|
|
3739
4160
|
</div>
|
|
3740
4161
|
</kf-card>
|
|
3741
|
-
`, 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"] }]
|
|
3742
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 }] }] } });
|
|
3743
4164
|
|
|
3744
4165
|
/**
|
|
@@ -4858,5 +5279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
4858
5279
|
* Generated bundle index. Do not edit.
|
|
4859
5280
|
*/
|
|
4860
5281
|
|
|
4861
|
-
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 };
|
|
4862
5283
|
//# sourceMappingURL=kaufmann-lab-ui.mjs.map
|