pdm-ui-kit 0.1.50 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +356 -4
- package/esm2020/lib/components/alert-dialog/alert-dialog.component.mjs +3 -3
- package/esm2020/lib/components/breadcrumb/breadcrumb.component.mjs +37 -4
- package/esm2020/lib/components/button-group/button-group.component.mjs +208 -182
- package/esm2020/lib/components/calendar/calendar.component.mjs +3 -3
- package/esm2020/lib/components/card/card.component.mjs +36 -53
- package/esm2020/lib/components/combobox/combobox.component.mjs +136 -14
- package/esm2020/lib/components/command/command.component.mjs +3 -3
- package/esm2020/lib/components/context-menu/context-menu.component.mjs +121 -42
- package/esm2020/lib/components/data-table/data-table.component.mjs +214 -16
- package/esm2020/lib/components/date-picker/date-picker.component.mjs +66 -54
- package/esm2020/lib/components/dialog/dialog.component.mjs +171 -38
- package/esm2020/lib/components/draggable-table/draggable-table.component.mjs +300 -0
- package/esm2020/lib/components/drawer/drawer.component.mjs +123 -16
- package/esm2020/lib/components/dropdown-menu/dropdown-menu.component.mjs +3 -2
- package/esm2020/lib/components/hover-card/hover-card.component.mjs +185 -24
- package/esm2020/lib/components/input/input.component.mjs +15 -15
- package/esm2020/lib/components/input-group/input-group.component.mjs +14 -14
- package/esm2020/lib/components/menubar/menubar.component.mjs +105 -29
- package/esm2020/lib/components/navigation-menu/navigation-menu.component.mjs +25 -3
- package/esm2020/lib/components/pagination/pagination.component.mjs +3 -3
- package/esm2020/lib/components/popover/popover.component.mjs +107 -73
- package/esm2020/lib/components/select/select.component.mjs +26 -23
- package/esm2020/lib/components/sheet/sheet.component.mjs +68 -12
- package/esm2020/lib/components/sidebar/sidebar.component.mjs +52 -5
- package/esm2020/lib/components/table/table.component.mjs +165 -192
- package/esm2020/lib/components/tabs/tabs.component.mjs +6 -6
- package/esm2020/lib/components/toggle-group/toggle-group.component.mjs +6 -6
- package/esm2020/lib/components/tooltip/tooltip.component.mjs +162 -19
- package/esm2020/lib/overlay/z-index-helper.mjs +69 -0
- package/esm2020/lib/pdm-ui-kit.module.mjs +5 -1
- package/esm2020/lib/utils/responsive.mjs +143 -0
- package/esm2020/lib/utils/z-index.mjs +90 -0
- package/esm2020/public-api.mjs +67 -63
- package/fesm2015/pdm-ui-kit.mjs +2628 -847
- package/fesm2015/pdm-ui-kit.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit.mjs +2630 -845
- package/fesm2020/pdm-ui-kit.mjs.map +1 -1
- package/lib/components/breadcrumb/breadcrumb.component.d.ts +23 -1
- package/lib/components/button-group/button-group.component.d.ts +8 -2
- package/lib/components/card/card.component.d.ts +32 -19
- package/lib/components/combobox/combobox.component.d.ts +20 -3
- package/lib/components/context-menu/context-menu.component.d.ts +17 -8
- package/lib/components/data-table/data-table.component.d.ts +172 -14
- package/lib/components/date-picker/date-picker.component.d.ts +5 -6
- package/lib/components/dialog/dialog.component.d.ts +38 -4
- package/lib/components/draggable-table/draggable-table.component.d.ts +74 -0
- package/lib/components/drawer/drawer.component.d.ts +65 -7
- package/lib/components/hover-card/hover-card.component.d.ts +27 -4
- package/lib/components/input/input.component.d.ts +3 -3
- package/lib/components/input-group/input-group.component.d.ts +1 -1
- package/lib/components/menubar/menubar.component.d.ts +16 -8
- package/lib/components/navigation-menu/navigation-menu.component.d.ts +22 -1
- package/lib/components/popover/popover.component.d.ts +13 -12
- package/lib/components/select/select.component.d.ts +4 -5
- package/lib/components/sheet/sheet.component.d.ts +30 -3
- package/lib/components/sidebar/sidebar.component.d.ts +39 -1
- package/lib/components/table/table.component.d.ts +47 -26
- package/lib/components/tabs/tabs.component.d.ts +1 -1
- package/lib/components/toggle-group/toggle-group.component.d.ts +1 -1
- package/lib/components/tooltip/tooltip.component.d.ts +21 -3
- package/lib/overlay/z-index-helper.d.ts +36 -0
- package/lib/pdm-ui-kit.module.d.ts +42 -41
- package/lib/utils/responsive.d.ts +107 -0
- package/lib/utils/z-index.d.ts +69 -0
- package/package.json +10 -8
- package/public-api.d.ts +66 -62
- package/src/lib/styles/tokens.css +182 -0
package/README.md
CHANGED
|
@@ -1,6 +1,182 @@
|
|
|
1
1
|
# PDM UI Kit
|
|
2
2
|
|
|
3
|
-
Librería de componentes UI para Angular
|
|
3
|
+
Librería de componentes UI para Angular 15+, construida sobre patrones visuales del **Figma de shadcn/ui** y adaptada para el ecosistema de Corelusa.
|
|
4
|
+
|
|
5
|
+
## ⚠️ Consumer Setup - IMPORTANT
|
|
6
|
+
|
|
7
|
+
Para que los componentes funcionen correctamente, seguí estos pasos:
|
|
8
|
+
|
|
9
|
+
### 1) Configurar Tailwind para escanear la librería
|
|
10
|
+
|
|
11
|
+
En tu `tailwind.config.js`, agregá el path de la librería:
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
module.exports = {
|
|
15
|
+
content: [
|
|
16
|
+
'./src/**/*.{html,ts}',
|
|
17
|
+
// ... otros paths
|
|
18
|
+
'node_modules/pdm-ui-kit/**/*.{ts,html}'
|
|
19
|
+
],
|
|
20
|
+
// ... resto de tu config
|
|
21
|
+
};
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
**Sin esto, las clases Tailwind no se generarán y la UI se verá sin estilos.**
|
|
25
|
+
|
|
26
|
+
### 2) Definir los tokens CSS
|
|
27
|
+
|
|
28
|
+
Copiá las variables en tu CSS base (por ejemplo `styles.css`):
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
:root {
|
|
32
|
+
/* Colores base */
|
|
33
|
+
--background: 0 0% 100%;
|
|
34
|
+
--foreground: 222.2 84% 4.9%;
|
|
35
|
+
|
|
36
|
+
/* Colores de componente */
|
|
37
|
+
--card: 0 0% 100%;
|
|
38
|
+
--card-foreground: 222.2 84% 4.9%;
|
|
39
|
+
--popover: 0 0% 100%;
|
|
40
|
+
--popover-foreground: 222.2 84% 4.9%;
|
|
41
|
+
--primary: 221.2 83.2% 53.3%;
|
|
42
|
+
--primary-foreground: 210 40% 98%;
|
|
43
|
+
--secondary: 210 40% 96.1%;
|
|
44
|
+
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
45
|
+
--muted: 210 40% 96.1%;
|
|
46
|
+
--muted-foreground: 215.4 16.3% 46.9%;
|
|
47
|
+
--accent: 210 40% 96.1%;
|
|
48
|
+
--accent-foreground: 222.2 47.4% 11.2%;
|
|
49
|
+
--destructive: 0 84.2% 60.2%;
|
|
50
|
+
--destructive-foreground: 210 40% 98%;
|
|
51
|
+
|
|
52
|
+
/* Bordes y inputs */
|
|
53
|
+
--border: 214.3 31.8% 91.4%;
|
|
54
|
+
--input: 214.3 31.8% 91.4%;
|
|
55
|
+
--ring: 221.2 83.2% 53.3%;
|
|
56
|
+
|
|
57
|
+
/* Radio */
|
|
58
|
+
--radius: 0.5rem;
|
|
59
|
+
|
|
60
|
+
/* Charts (para pdm-chart) */
|
|
61
|
+
--chart-1: 12 76% 61%;
|
|
62
|
+
--chart-2: 173 58% 39%;
|
|
63
|
+
--chart-3: 197 37% 24%;
|
|
64
|
+
--chart-4: 43 74% 66%;
|
|
65
|
+
--chart-5: 27 87% 67%;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Dark mode (opcional) */
|
|
69
|
+
.dark {
|
|
70
|
+
--background: 222.2 84% 4.9%;
|
|
71
|
+
--foreground: 210 40% 98%;
|
|
72
|
+
--card: 222.2 84% 4.9%;
|
|
73
|
+
--card-foreground: 210 40% 98%;
|
|
74
|
+
--popover: 222.2 84% 4.9%;
|
|
75
|
+
--popover-foreground: 210 40% 98%;
|
|
76
|
+
--primary: 217.2 91.2% 59.8%;
|
|
77
|
+
--primary-foreground: 222.2 47.4% 11.2%;
|
|
78
|
+
--secondary: 217.2 32.6% 17.5%;
|
|
79
|
+
--secondary-foreground: 210 40% 98%;
|
|
80
|
+
--muted: 217.2 32.6% 17.5%;
|
|
81
|
+
--muted-foreground: 215 20.2% 65.1%;
|
|
82
|
+
--accent: 217.2 32.6% 17.5%;
|
|
83
|
+
--accent-foreground: 210 40% 98%;
|
|
84
|
+
--destructive: 0 62.8% 30.6%;
|
|
85
|
+
--destructive-foreground: 210 40% 98%;
|
|
86
|
+
--border: 217.2 32.6% 17.5%;
|
|
87
|
+
--input: 217.2 32.6% 17.5%;
|
|
88
|
+
--ring: 224.3 76.3% 48%;
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### 3) Configurar los colores en Tailwind
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
// tailwind.config.js
|
|
96
|
+
module.exports = {
|
|
97
|
+
theme: {
|
|
98
|
+
extend: {
|
|
99
|
+
colors: {
|
|
100
|
+
background: 'hsl(var(--background))',
|
|
101
|
+
foreground: 'hsl(var(--foreground))',
|
|
102
|
+
card: {
|
|
103
|
+
DEFAULT: 'hsl(var(--card))',
|
|
104
|
+
foreground: 'hsl(var(--card-foreground))'
|
|
105
|
+
},
|
|
106
|
+
popover: {
|
|
107
|
+
DEFAULT: 'hsl(var(--popover))',
|
|
108
|
+
foreground: 'hsl(var(--popover-foreground))'
|
|
109
|
+
},
|
|
110
|
+
primary: {
|
|
111
|
+
DEFAULT: 'hsl(var(--primary))',
|
|
112
|
+
foreground: 'hsl(var(--primary-foreground))'
|
|
113
|
+
},
|
|
114
|
+
secondary: {
|
|
115
|
+
DEFAULT: 'hsl(var(--secondary))',
|
|
116
|
+
foreground: 'hsl(var(--secondary-foreground))'
|
|
117
|
+
},
|
|
118
|
+
muted: {
|
|
119
|
+
DEFAULT: 'hsl(var(--muted))',
|
|
120
|
+
foreground: 'hsl(var(--muted-foreground))'
|
|
121
|
+
},
|
|
122
|
+
accent: {
|
|
123
|
+
DEFAULT: 'hsl(var(--accent))',
|
|
124
|
+
foreground: 'hsl(var(--accent-foreground))'
|
|
125
|
+
},
|
|
126
|
+
destructive: {
|
|
127
|
+
DEFAULT: 'hsl(var(--destructive))',
|
|
128
|
+
foreground: 'hsl(var(--destructive-foreground))'
|
|
129
|
+
},
|
|
130
|
+
border: 'hsl(var(--border))',
|
|
131
|
+
input: 'hsl(var(--input))',
|
|
132
|
+
ring: 'hsl(var(--ring))',
|
|
133
|
+
chart: {
|
|
134
|
+
'1': 'hsl(var(--chart-1))',
|
|
135
|
+
'2': 'hsl(var(--chart-2))',
|
|
136
|
+
'3': 'hsl(var(--chart-3))',
|
|
137
|
+
'4': 'hsl(var(--chart-4))',
|
|
138
|
+
'5': 'hsl(var(--chart-5))',
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
borderRadius: {
|
|
142
|
+
lg: 'var(--radius)',
|
|
143
|
+
md: 'calc(var(--radius) - 2px)',
|
|
144
|
+
sm: 'calc(var(--radius) - 4px)'
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
plugins: [require('tailwindcss-animate')]
|
|
149
|
+
};
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### 4) Opcional: Importar tokens directamente
|
|
153
|
+
|
|
154
|
+
Si preferís importar los tokens desde el paquete:
|
|
155
|
+
|
|
156
|
+
```css
|
|
157
|
+
@import 'pdm-ui-kit/styles';
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
> **Nota:** Esta opción aún requiere la configuración de Tailwind content.
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## ✨ What's New in v0.3.0
|
|
165
|
+
|
|
166
|
+
- 🐛 **Overlay robustness** — Tooltip, popover, hover-card ahora usan CDK Overlay y no se tapan
|
|
167
|
+
- 📱 **Responsive fixes** — Button-group, toggle-group, input-group ahora funcionan en mobile
|
|
168
|
+
- 📦 **CSS bundle** — Tokens exportados para consumo directo
|
|
169
|
+
- 🏷️ **Host display** — Componentes ahora responden correctamente a `w-full`, flex y grid
|
|
170
|
+
- 📜 **Dialog scroll** — Scroll interno ahora funciona correctamente en todos los navegadores
|
|
171
|
+
|
|
172
|
+
- 🎯 **Responsive by default** — Todas las tablas y dialogs manejan mobile correctamente
|
|
173
|
+
- 🔧 **Generic data-table** — Configurá columnas para cualquier tipo de dato
|
|
174
|
+
- 📦 **Separated concerns** — Drag & drop ahora en `pdm-draggable-table`
|
|
175
|
+
- 🚀 **Responsive utilities** — Sistema centralizado de breakpoints y helpers
|
|
176
|
+
- 📱 **Dialog/Drawer/Sheet mejorados** — Fullscreen mobile, modal/panel desktop
|
|
177
|
+
- 🎨 **Tamaños configurables** — sm, md, lg, xl en todos los componentes overlay
|
|
178
|
+
|
|
179
|
+
➡️ **[Ver Migration Guide](./MIGRATION.md)** si estás actualizando desde v0.1.x
|
|
4
180
|
|
|
5
181
|
## Base de diseño
|
|
6
182
|
|
|
@@ -8,7 +184,7 @@ Este kit está **basado en el Figma de shadcn/ui** y mantiene una estructura de
|
|
|
8
184
|
|
|
9
185
|
## Compatibilidad
|
|
10
186
|
|
|
11
|
-
- Angular:
|
|
187
|
+
- Angular: 15, 16, 17
|
|
12
188
|
- Arquitectura: NgModules (no standalone)
|
|
13
189
|
- Estilos: Tailwind CSS v3 + variables CSS del proyecto consumidor
|
|
14
190
|
|
|
@@ -74,6 +250,112 @@ tabs = [
|
|
|
74
250
|
activeTab = 'general';
|
|
75
251
|
```
|
|
76
252
|
|
|
253
|
+
#### Table (responsive)
|
|
254
|
+
|
|
255
|
+
```html
|
|
256
|
+
<!-- Tabla simple con scroll horizontal en mobile -->
|
|
257
|
+
<pdm-table variant="interactive" responsiveStrategy="scroll">
|
|
258
|
+
<thead>
|
|
259
|
+
<tr>
|
|
260
|
+
<th>Name</th>
|
|
261
|
+
<th>Email</th>
|
|
262
|
+
<th>Role</th>
|
|
263
|
+
</tr>
|
|
264
|
+
</thead>
|
|
265
|
+
<tbody>
|
|
266
|
+
<tr>
|
|
267
|
+
<td>John Doe</td>
|
|
268
|
+
<td>john@example.com</td>
|
|
269
|
+
<td>Admin</td>
|
|
270
|
+
</tr>
|
|
271
|
+
</tbody>
|
|
272
|
+
</pdm-table>
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
#### Data Table (genérico)
|
|
276
|
+
|
|
277
|
+
```ts
|
|
278
|
+
import { PdmDataTableColumn } from 'pdm-ui-kit';
|
|
279
|
+
|
|
280
|
+
interface User {
|
|
281
|
+
id: number;
|
|
282
|
+
name: string;
|
|
283
|
+
email: string;
|
|
284
|
+
role: string;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
columns: PdmDataTableColumn<User>[] = [
|
|
288
|
+
{ key: 'name', label: 'Name', sortable: true },
|
|
289
|
+
{ key: 'email', label: 'Email', sortable: true },
|
|
290
|
+
{ key: 'role', label: 'Role', hideOnMobile: true }
|
|
291
|
+
];
|
|
292
|
+
|
|
293
|
+
users: User[] = [
|
|
294
|
+
{ id: 1, name: 'John', email: 'john@example.com', role: 'Admin' },
|
|
295
|
+
{ id: 2, name: 'Jane', email: 'jane@example.com', role: 'User' }
|
|
296
|
+
];
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
```html
|
|
300
|
+
<pdm-data-table
|
|
301
|
+
[columns]="columns"
|
|
302
|
+
[rows]="users"
|
|
303
|
+
[selectable]="true"
|
|
304
|
+
responsiveStrategy="scroll"
|
|
305
|
+
(selectionChange)="onSelect($event)">
|
|
306
|
+
</pdm-data-table>
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
#### Draggable Table
|
|
310
|
+
|
|
311
|
+
```html
|
|
312
|
+
<pdm-draggable-table
|
|
313
|
+
variant="interactive"
|
|
314
|
+
[reorderRows]="true"
|
|
315
|
+
(rowOrderChange)="onOrderChange($event)">
|
|
316
|
+
<tbody>
|
|
317
|
+
<tr data-row-id="1"><td>Task 1</td></tr>
|
|
318
|
+
<tr data-row-id="2"><td>Task 2</td></tr>
|
|
319
|
+
<tr data-row-id="3"><td>Task 3</td></tr>
|
|
320
|
+
</tbody>
|
|
321
|
+
</pdm-draggable-table>
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
#### Dialog (responsive)
|
|
325
|
+
|
|
326
|
+
```html
|
|
327
|
+
<!-- Fullscreen en mobile, modal en desktop -->
|
|
328
|
+
<pdm-dialog
|
|
329
|
+
[open]="isOpen"
|
|
330
|
+
size="responsive"
|
|
331
|
+
title="Edit Profile"
|
|
332
|
+
description="Make changes to your profile here"
|
|
333
|
+
(openChange)="isOpen = $event"
|
|
334
|
+
(primaryAction)="onSave()">
|
|
335
|
+
<div class="space-y-4">
|
|
336
|
+
<input type="text" placeholder="Name" class="w-full" />
|
|
337
|
+
<input type="email" placeholder="Email" class="w-full" />
|
|
338
|
+
</div>
|
|
339
|
+
</pdm-dialog>
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
#### Drawer (side panel)
|
|
343
|
+
|
|
344
|
+
```html
|
|
345
|
+
<!-- Bottom sheet en mobile, side panel en desktop -->
|
|
346
|
+
<pdm-drawer
|
|
347
|
+
[open]="isOpen"
|
|
348
|
+
position="right"
|
|
349
|
+
size="md"
|
|
350
|
+
title="Settings"
|
|
351
|
+
(openChange)="isOpen = $event">
|
|
352
|
+
<div class="space-y-4">
|
|
353
|
+
<h4>Preferences</h4>
|
|
354
|
+
<p>Configure your settings here</p>
|
|
355
|
+
</div>
|
|
356
|
+
</pdm-drawer>
|
|
357
|
+
```
|
|
358
|
+
|
|
77
359
|
#### Iconos
|
|
78
360
|
|
|
79
361
|
```html
|
|
@@ -112,6 +394,52 @@ Tipos soportados en `pdm-chart`:
|
|
|
112
394
|
- `radial`
|
|
113
395
|
- `tooltips`
|
|
114
396
|
|
|
397
|
+
## Responsive Design
|
|
398
|
+
|
|
399
|
+
Todos los componentes siguen **mobile-first approach**:
|
|
400
|
+
|
|
401
|
+
| Componente | Mobile Behavior | Desktop Behavior |
|
|
402
|
+
|------------|----------------|------------------|
|
|
403
|
+
| `pdm-table` | Scroll horizontal | Full width, no scroll |
|
|
404
|
+
| `pdm-data-table` | Oculta columnas opcionales | Muestra todas |
|
|
405
|
+
| `pdm-dialog` | Fullscreen | Modal centrado |
|
|
406
|
+
| `pdm-drawer` | Bottom sheet | Side panel |
|
|
407
|
+
|
|
408
|
+
### Breakpoints
|
|
409
|
+
|
|
410
|
+
```typescript
|
|
411
|
+
import { BREAKPOINTS } from 'pdm-ui-kit';
|
|
412
|
+
|
|
413
|
+
const breakpoints = {
|
|
414
|
+
sm: '640px', // tablet portrait
|
|
415
|
+
md: '768px', // tablet landscape
|
|
416
|
+
lg: '1024px', // desktop
|
|
417
|
+
xl: '1280px', // large desktop
|
|
418
|
+
'2xl': '1536px' // extra large
|
|
419
|
+
};
|
|
420
|
+
```
|
|
421
|
+
|
|
422
|
+
### Responsive Utilities
|
|
423
|
+
|
|
424
|
+
```typescript
|
|
425
|
+
import { responsive, overflowResponsive, TABLE_RESPONSIVE } from 'pdm-ui-kit';
|
|
426
|
+
|
|
427
|
+
// Helper para clases responsive
|
|
428
|
+
const classes = responsive({
|
|
429
|
+
default: 'block',
|
|
430
|
+
sm: 'flex',
|
|
431
|
+
lg: 'grid'
|
|
432
|
+
}); // 'block sm:flex lg:grid'
|
|
433
|
+
|
|
434
|
+
// Helper para overflow
|
|
435
|
+
const overflow = overflowResponsive('x', 'scroll', 'auto');
|
|
436
|
+
// 'overflow-x-scroll sm:overflow-x-auto'
|
|
437
|
+
|
|
438
|
+
// Clases pre-definidas para tablas
|
|
439
|
+
const tableClasses = TABLE_RESPONSIVE.scroll.wrapper;
|
|
440
|
+
// 'relative w-full overflow-x-auto'
|
|
441
|
+
```
|
|
442
|
+
|
|
115
443
|
## Theming
|
|
116
444
|
|
|
117
445
|
Los componentes leen los tokens CSS del proyecto consumidor. Define tus variables globales para aplicar tu tema (light/dark o custom branding) sin modificar el kit.
|
|
@@ -122,7 +450,31 @@ Incluye componentes como:
|
|
|
122
450
|
|
|
123
451
|
- `pdm-button`, `pdm-input`, `pdm-textarea`, `pdm-select`
|
|
124
452
|
- `pdm-alert`, `pdm-badge`, `pdm-card`, `pdm-dialog`
|
|
125
|
-
- `pdm-tabs`, `pdm-table`, `pdm-data-table`, `pdm-
|
|
126
|
-
- `pdm-tooltip`, `pdm-popover`, `pdm-dropdown-menu
|
|
453
|
+
- `pdm-tabs`, `pdm-table`, `pdm-data-table`, `pdm-draggable-table`
|
|
454
|
+
- `pdm-chart`, `pdm-tooltip`, `pdm-popover`, `pdm-dropdown-menu`
|
|
455
|
+
- `pdm-sidebar`, `pdm-sheet`, `pdm-drawer`, `pdm-calendar`
|
|
127
456
|
|
|
128
457
|
Y más, todos exportados desde `PdmUiKitModule`.
|
|
458
|
+
|
|
459
|
+
## Documentación
|
|
460
|
+
|
|
461
|
+
- **[Migration Guide](./MIGRATION.md)** — Guía de migración desde v0.1.x
|
|
462
|
+
- **[API Reference](./docs/API.md)** — Documentación completa de todos los componentes (próximamente)
|
|
463
|
+
|
|
464
|
+
## Changelog
|
|
465
|
+
|
|
466
|
+
### v0.2.0 (2024)
|
|
467
|
+
- ✨ Sistema de responsive utilities centralizado
|
|
468
|
+
- ✨ `pdm-table` refactorizado con responsive strategies
|
|
469
|
+
- ✨ `pdm-draggable-table` componente nuevo (drag & drop)
|
|
470
|
+
- ✨ `pdm-data-table` ahora genérico con configuración de columnas
|
|
471
|
+
- ✨ `pdm-dialog` con modo responsive y tamaños configurables
|
|
472
|
+
- ✨ `pdm-drawer` refactorizado con posicionamiento y contenido genérico
|
|
473
|
+
- ✨ `pdm-sheet` con tamaños responsive
|
|
474
|
+
- 🐛 Fix: Tablas rompiendo el width en mobile
|
|
475
|
+
- 🐛 Fix: Dialog/Drawer sin responsive adecuado
|
|
476
|
+
- 📚 Migration guide completo
|
|
477
|
+
- 📚 Documentación mejorada con ejemplos responsive
|
|
478
|
+
|
|
479
|
+
### v0.1.x
|
|
480
|
+
- Componentes base adaptados de shadcn/ui
|
|
@@ -52,10 +52,10 @@ export class PdmAlertDialogComponent {
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
PdmAlertDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55
|
-
PdmAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertDialogComponent, selector: "pdm-alert-dialog", inputs: { open: "open", showTrigger: "showTrigger", triggerText: "triggerText", title: "title", description: "description", confirmText: "confirmText", cancelText: "cancelText", className: "className", closeOnEsc: "closeOnEsc" }, outputs: { openChange: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<button\n *ngIf=\"showTrigger && !open\"\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onTriggerClick()\"\n>\n {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n <section\n role=\"alertdialog\"\n aria-modal=\"true\"\n [ngClass]=\"[\n 'relative z-
|
|
55
|
+
PdmAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertDialogComponent, selector: "pdm-alert-dialog", inputs: { open: "open", showTrigger: "showTrigger", triggerText: "triggerText", title: "title", description: "description", confirmText: "confirmText", cancelText: "cancelText", className: "className", closeOnEsc: "closeOnEsc" }, outputs: { openChange: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<button\n *ngIf=\"showTrigger && !open\"\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onTriggerClick()\"\n>\n {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n <section\n role=\"alertdialog\"\n aria-modal=\"true\"\n [ngClass]=\"[\n 'relative z-[60] w-full max-w-lg rounded-lg border border-border bg-background p-6 text-foreground shadow-lg',\n className\n ]\"\n >\n <div class=\"flex flex-col gap-2\">\n <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n </div>\n <div class=\"mt-4 flex items-center justify-end gap-2\">\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onCancel()\"\n >\n {{ cancelText }}\n </button>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n (click)=\"onConfirm()\"\n >\n {{ confirmText }}\n </button>\n </div>\n </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
56
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertDialogComponent, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
|
-
args: [{ selector: 'pdm-alert-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n *ngIf=\"showTrigger && !open\"\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onTriggerClick()\"\n>\n {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n <section\n role=\"alertdialog\"\n aria-modal=\"true\"\n [ngClass]=\"[\n 'relative z-
|
|
58
|
+
args: [{ selector: 'pdm-alert-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n *ngIf=\"showTrigger && !open\"\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onTriggerClick()\"\n>\n {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n <section\n role=\"alertdialog\"\n aria-modal=\"true\"\n [ngClass]=\"[\n 'relative z-[60] w-full max-w-lg rounded-lg border border-border bg-background p-6 text-foreground shadow-lg',\n className\n ]\"\n >\n <div class=\"flex flex-col gap-2\">\n <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n </div>\n <div class=\"mt-4 flex items-center justify-end gap-2\">\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onCancel()\"\n >\n {{ cancelText }}\n </button>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n (click)=\"onConfirm()\"\n >\n {{ confirmText }}\n </button>\n </div>\n </section>\n</div>\n" }]
|
|
59
59
|
}], propDecorators: { open: [{
|
|
60
60
|
type: Input
|
|
61
61
|
}], showTrigger: [{
|
|
@@ -84,4 +84,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
84
84
|
type: HostListener,
|
|
85
85
|
args: ['document:keydown.escape']
|
|
86
86
|
}] } });
|
|
87
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
87
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQtZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9hbGVydC1kaWFsb2cvYWxlcnQtZGlhbG9nLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9hbGVydC1kaWFsb2cvYWxlcnQtZGlhbG9nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPOUcsTUFBTSxPQUFPLHVCQUF1QjtJQUxwQztRQU1XLFNBQUksR0FBRyxLQUFLLENBQUM7UUFDYixnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUNwQixnQkFBVyxHQUFHLGFBQWEsQ0FBQztRQUM1QixVQUFLLEdBQUcsMEJBQTBCLENBQUM7UUFDbkMsZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFDakIsZ0JBQVcsR0FBRyxVQUFVLENBQUM7UUFDekIsZUFBVSxHQUFHLFFBQVEsQ0FBQztRQUN0QixjQUFTLEdBQUcsRUFBRSxDQUFDO1FBRXhCLDBEQUEwRDtRQUNqRCxlQUFVLEdBQUcsSUFBSSxDQUFDO1FBRWpCLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBQ3pDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ25DLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBd0M3QztJQXRDQzs7OztPQUlHO0lBQ0gsSUFBWSxZQUFZO1FBQ3RCLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUM7SUFDbEMsQ0FBQztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUN0QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztTQUNsQjtRQUNELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzdCLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNuQixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUN0QixJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztTQUNuQjtRQUNELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUN0QixJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztTQUNuQjtRQUNELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFHRCxLQUFLO1FBQ0gsSUFBSSxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDaEMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1NBQ2pCO0lBQ0gsQ0FBQzs7b0hBdERVLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLDBhQ1BwQywwbURBeUNBOzJGRGxDYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUVYLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLElBQUk7c0JBQVosS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBR0csVUFBVTtzQkFBbEIsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNO2dCQUNHLE9BQU87c0JBQWhCLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNO2dCQW1DUCxLQUFLO3NCQURKLFlBQVk7dUJBQUMseUJBQXlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncGRtLWFsZXJ0LWRpYWxvZycsXG4gIHRlbXBsYXRlVXJsOiAnLi9hbGVydC1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBQZG1BbGVydERpYWxvZ0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG9wZW4gPSBmYWxzZTtcbiAgQElucHV0KCkgc2hvd1RyaWdnZXIgPSBmYWxzZTtcbiAgQElucHV0KCkgdHJpZ2dlclRleHQgPSAnU2hvdyBkaWFsb2cnO1xuICBASW5wdXQoKSB0aXRsZSA9ICdBcmUgeW91IGFic29sdXRlbHkgc3VyZT8nO1xuICBASW5wdXQoKSBkZXNjcmlwdGlvbiA9ICcnO1xuICBASW5wdXQoKSBjb25maXJtVGV4dCA9ICdDb250aW51ZSc7XG4gIEBJbnB1dCgpIGNhbmNlbFRleHQgPSAnQ2FuY2VsJztcbiAgQElucHV0KCkgY2xhc3NOYW1lID0gJyc7XG5cbiAgLyoqIENsb3NlIHdoZW4gdGhlIEVTQyBrZXkgaXMgcHJlc3NlZC4gRGVmYXVsdDogYHRydWVgLiAqL1xuICBASW5wdXQoKSBjbG9zZU9uRXNjID0gdHJ1ZTtcblxuICBAT3V0cHV0KCkgb3BlbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcbiAgQE91dHB1dCgpIGNvbmZpcm0gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBPdXRwdXQoKSBjYW5jZWwgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgLyoqXG4gICAqIFJldHVybnMgYHRydWVgIHdoZW4gYXQgbGVhc3Qgb25lIGNvbnN1bWVyIGxpc3RlbnMgdG8gYG9wZW5DaGFuZ2VgLlxuICAgKiAtICoqQ29udHJvbGxlZCoqIChoYXMgb2JzZXJ2ZXJzKTogcGFyZW50IG1hbmFnZXMgYG9wZW5gIHZpYSB0d28td2F5IGJpbmRpbmcg4oaSIG9ubHkgZW1pdC5cbiAgICogLSAqKlVuY29udHJvbGxlZCoqIChubyBvYnNlcnZlcnMpOiB3ZSBvd24gdGhlIGBvcGVuYCBzdGF0ZSDihpIgbXV0YXRlIGl0IGxvY2FsbHkuXG4gICAqL1xuICBwcml2YXRlIGdldCBpc0NvbnRyb2xsZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMub3BlbkNoYW5nZS5vYnNlcnZlZDtcbiAgfVxuXG4gIG9uVHJpZ2dlckNsaWNrKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5pc0NvbnRyb2xsZWQpIHtcbiAgICAgIHRoaXMub3BlbiA9IHRydWU7XG4gICAgfVxuICAgIHRoaXMub3BlbkNoYW5nZS5lbWl0KHRydWUpO1xuICB9XG5cbiAgb25DYW5jZWwoKTogdm9pZCB7XG4gICAgdGhpcy5jYW5jZWwuZW1pdCgpO1xuICAgIGlmICghdGhpcy5pc0NvbnRyb2xsZWQpIHtcbiAgICAgIHRoaXMub3BlbiA9IGZhbHNlO1xuICAgIH1cbiAgICB0aGlzLm9wZW5DaGFuZ2UuZW1pdChmYWxzZSk7XG4gIH1cblxuICBvbkNvbmZpcm0oKTogdm9pZCB7XG4gICAgdGhpcy5jb25maXJtLmVtaXQoKTtcbiAgICBpZiAoIXRoaXMuaXNDb250cm9sbGVkKSB7XG4gICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICB9XG4gICAgdGhpcy5vcGVuQ2hhbmdlLmVtaXQoZmFsc2UpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6a2V5ZG93bi5lc2NhcGUnKVxuICBvbkVzYygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5vcGVuICYmIHRoaXMuY2xvc2VPbkVzYykge1xuICAgICAgdGhpcy5vbkNhbmNlbCgpO1xuICAgIH1cbiAgfVxufVxuIiwiPGJ1dHRvblxuICAqbmdJZj1cInNob3dUcmlnZ2VyICYmICFvcGVuXCJcbiAgdHlwZT1cImJ1dHRvblwiXG4gIGNsYXNzPVwiaW5saW5lLWZsZXggaC05IGFwcGVhcmFuY2Utbm9uZSBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgcm91bmRlZC1tZCBib3JkZXIgYm9yZGVyLWlucHV0IGJnLWJhY2tncm91bmQgcHgtNCBweS0yIHRleHQtc20gZm9udC1tZWRpdW0gdGV4dC1mb3JlZ3JvdW5kIHNoYWRvdy1zbVwiXG4gIChjbGljayk9XCJvblRyaWdnZXJDbGljaygpXCJcbj5cbiAge3sgdHJpZ2dlclRleHQgfX1cbjwvYnV0dG9uPlxuXG48ZGl2ICpuZ0lmPVwib3BlblwiIGNsYXNzPVwiZml4ZWQgaW5zZXQtMCB6LTUwIGZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIHAtNVwiPlxuICA8ZGl2IGNsYXNzPVwiYWJzb2x1dGUgaW5zZXQtMCBiZy1mb3JlZ3JvdW5kLzMwXCIgKGNsaWNrKT1cIm9uQ2FuY2VsKClcIj48L2Rpdj5cbiAgPHNlY3Rpb25cbiAgICByb2xlPVwiYWxlcnRkaWFsb2dcIlxuICAgIGFyaWEtbW9kYWw9XCJ0cnVlXCJcbiAgICBbbmdDbGFzc109XCJbXG4gICAgICAncmVsYXRpdmUgei1bNjBdIHctZnVsbCBtYXgtdy1sZyByb3VuZGVkLWxnIGJvcmRlciBib3JkZXItYm9yZGVyIGJnLWJhY2tncm91bmQgcC02IHRleHQtZm9yZWdyb3VuZCBzaGFkb3ctbGcnLFxuICAgICAgY2xhc3NOYW1lXG4gICAgXVwiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LWNvbCBnYXAtMlwiPlxuICAgICAgPGgyIGNsYXNzPVwibS0wIHRleHQtbGcgZm9udC1zZW1pYm9sZCBsZWFkaW5nLW5vbmUgdHJhY2tpbmctdGlnaHRcIj57eyB0aXRsZSB9fTwvaDI+XG4gICAgICA8cCAqbmdJZj1cImRlc2NyaXB0aW9uXCIgY2xhc3M9XCJtLTAgdGV4dC1zbSB0ZXh0LW11dGVkLWZvcmVncm91bmRcIj57eyBkZXNjcmlwdGlvbiB9fTwvcD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwibXQtNCBmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWVuZCBnYXAtMlwiPlxuICAgICAgPGJ1dHRvblxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgY2xhc3M9XCJpbmxpbmUtZmxleCBoLTkgYXBwZWFyYW5jZS1ub25lIGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciByb3VuZGVkLW1kIGJvcmRlciBib3JkZXItaW5wdXQgYmctYmFja2dyb3VuZCBweC00IHB5LTIgdGV4dC1zbSBmb250LW1lZGl1bSB0ZXh0LWZvcmVncm91bmQgc2hhZG93LXNtXCJcbiAgICAgICAgKGNsaWNrKT1cIm9uQ2FuY2VsKClcIlxuICAgICAgPlxuICAgICAgICB7eyBjYW5jZWxUZXh0IH19XG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxidXR0b25cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGNsYXNzPVwiaW5saW5lLWZsZXggaC05IGFwcGVhcmFuY2Utbm9uZSBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgcm91bmRlZC1tZCBiZy1wcmltYXJ5IHB4LTQgcHktMiB0ZXh0LXNtIGZvbnQtbWVkaXVtIHRleHQtcHJpbWFyeS1mb3JlZ3JvdW5kIHNoYWRvdy1zbVwiXG4gICAgICAgIChjbGljayk9XCJvbkNvbmZpcm0oKVwiXG4gICAgICA+XG4gICAgICAgIHt7IGNvbmZpcm1UZXh0IH19XG4gICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgPC9zZWN0aW9uPlxuPC9kaXY+XG4iXX0=
|
|
@@ -1,29 +1,62 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
|
+
/**
|
|
5
|
+
* Breadcrumb component con soporte responsive
|
|
6
|
+
*
|
|
7
|
+
* MEJORADO en v0.2.0:
|
|
8
|
+
* - Modo responsive real con overflow-x-auto
|
|
9
|
+
* - Collapse inteligente en mobile
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* <pdm-breadcrumb
|
|
13
|
+
* mode="responsive"
|
|
14
|
+
* [items]="['Home', 'Products', 'Electronics', 'Laptops']">
|
|
15
|
+
* </pdm-breadcrumb>
|
|
16
|
+
*/
|
|
4
17
|
export class PdmBreadcrumbComponent {
|
|
5
18
|
constructor() {
|
|
6
19
|
this.mode = 'link-component';
|
|
7
20
|
this.items = ['Home', 'Components', 'Breadcrumb'];
|
|
8
21
|
this.className = '';
|
|
22
|
+
/**
|
|
23
|
+
* Cantidad mínima de items para mostrar en mobile cuando mode="responsive"
|
|
24
|
+
* Default: 2 (primer y último item)
|
|
25
|
+
*/
|
|
26
|
+
this.minItemsMobile = 2;
|
|
9
27
|
}
|
|
10
28
|
get renderedItems() {
|
|
11
|
-
if (
|
|
29
|
+
if (this.mode === 'collapsed' && this.items.length > 3) {
|
|
12
30
|
return [this.items[0], '...', this.items[this.items.length - 2], this.items[this.items.length - 1]];
|
|
13
31
|
}
|
|
32
|
+
// Responsive mode: no collapse en el TS, se maneja en el template con CSS
|
|
14
33
|
return this.items;
|
|
15
34
|
}
|
|
35
|
+
/**
|
|
36
|
+
* Determina si un item debe estar visible en mobile (modo responsive)
|
|
37
|
+
*/
|
|
38
|
+
shouldShowInMobile(index) {
|
|
39
|
+
if (this.mode !== 'responsive')
|
|
40
|
+
return true;
|
|
41
|
+
const totalItems = this.items.length;
|
|
42
|
+
if (totalItems <= this.minItemsMobile)
|
|
43
|
+
return true;
|
|
44
|
+
// Siempre mostrar primero y último
|
|
45
|
+
return index === 0 || index === totalItems - 1;
|
|
46
|
+
}
|
|
16
47
|
}
|
|
17
48
|
PdmBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
PdmBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmBreadcrumbComponent, selector: "pdm-breadcrumb", inputs: { mode: "mode", items: "items", className: "className" }, ngImport: i0, template: "<nav\n aria-label=\"breadcrumb\"\n [ngClass]=\"['inline-flex items-center gap-1.5 text-sm'
|
|
49
|
+
PdmBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmBreadcrumbComponent, selector: "pdm-breadcrumb", inputs: { mode: "mode", items: "items", className: "className", minItemsMobile: "minItemsMobile" }, ngImport: i0, template: "<nav\n aria-label=\"breadcrumb\"\n [ngClass]=\"[\n 'inline-flex items-center gap-1.5 text-sm',\n mode === 'responsive' ? 'overflow-x-auto max-w-full pb-1 scrollbar-thin' : '',\n className\n ]\"\n>\n <ng-container *ngFor=\"let item of renderedItems; let i = index; let last = last\">\n <!-- Item text -->\n <span \n [ngClass]=\"[\n last ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground transition-colors cursor-pointer',\n mode === 'responsive' && !shouldShowInMobile(i) ? 'hidden sm:inline' : '',\n 'whitespace-nowrap'\n ]\">\n {{ item }}\n </span>\n\n <!-- Separator -->\n <ng-container *ngIf=\"!last\">\n <span \n [ngClass]=\"[\n 'inline-flex h-6 w-6 flex-shrink-0 items-center justify-center text-muted-foreground',\n mode === 'responsive' && !shouldShowInMobile(i) && !shouldShowInMobile(i + 1) ? 'hidden sm:inline-flex' : ''\n ]\" \n aria-hidden=\"true\">\n <!-- Custom separator (slash) -->\n <svg\n *ngIf=\"mode === 'custom-separator' && item !== '...'\"\n viewBox=\"0 0 24 24\"\n class=\"h-4 w-4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M8 20L16 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>\n \n <!-- Default separator (chevron) -->\n <svg\n *ngIf=\"(mode !== 'custom-separator' && item !== '...') || item === '...'\"\n viewBox=\"0 0 24 24\"\n class=\"h-4 w-4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n \n <!-- Ellipsis indicator for responsive mode (only shown when items are hidden) -->\n <span \n *ngIf=\"mode === 'responsive' && !shouldShowInMobile(i) && i === 0\"\n class=\"inline-flex sm:hidden text-muted-foreground\">\n ...\n </span>\n </ng-container>\n\n <!-- Dropdown indicator -->\n <ng-container *ngIf=\"mode === 'dropdown' && i === 1 && item !== '...' && !last\">\n <span class=\"-ml-2 inline-flex h-6 w-6 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </ng-container>\n </ng-container>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBreadcrumbComponent, decorators: [{
|
|
20
51
|
type: Component,
|
|
21
|
-
args: [{ selector: 'pdm-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n aria-label=\"breadcrumb\"\n [ngClass]=\"['inline-flex items-center gap-1.5 text-sm'
|
|
52
|
+
args: [{ selector: 'pdm-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n aria-label=\"breadcrumb\"\n [ngClass]=\"[\n 'inline-flex items-center gap-1.5 text-sm',\n mode === 'responsive' ? 'overflow-x-auto max-w-full pb-1 scrollbar-thin' : '',\n className\n ]\"\n>\n <ng-container *ngFor=\"let item of renderedItems; let i = index; let last = last\">\n <!-- Item text -->\n <span \n [ngClass]=\"[\n last ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground transition-colors cursor-pointer',\n mode === 'responsive' && !shouldShowInMobile(i) ? 'hidden sm:inline' : '',\n 'whitespace-nowrap'\n ]\">\n {{ item }}\n </span>\n\n <!-- Separator -->\n <ng-container *ngIf=\"!last\">\n <span \n [ngClass]=\"[\n 'inline-flex h-6 w-6 flex-shrink-0 items-center justify-center text-muted-foreground',\n mode === 'responsive' && !shouldShowInMobile(i) && !shouldShowInMobile(i + 1) ? 'hidden sm:inline-flex' : ''\n ]\" \n aria-hidden=\"true\">\n <!-- Custom separator (slash) -->\n <svg\n *ngIf=\"mode === 'custom-separator' && item !== '...'\"\n viewBox=\"0 0 24 24\"\n class=\"h-4 w-4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M8 20L16 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>\n \n <!-- Default separator (chevron) -->\n <svg\n *ngIf=\"(mode !== 'custom-separator' && item !== '...') || item === '...'\"\n viewBox=\"0 0 24 24\"\n class=\"h-4 w-4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n \n <!-- Ellipsis indicator for responsive mode (only shown when items are hidden) -->\n <span \n *ngIf=\"mode === 'responsive' && !shouldShowInMobile(i) && i === 0\"\n class=\"inline-flex sm:hidden text-muted-foreground\">\n ...\n </span>\n </ng-container>\n\n <!-- Dropdown indicator -->\n <ng-container *ngIf=\"mode === 'dropdown' && i === 1 && item !== '...' && !last\">\n <span class=\"-ml-2 inline-flex h-6 w-6 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </ng-container>\n </ng-container>\n</nav>\n" }]
|
|
22
53
|
}], propDecorators: { mode: [{
|
|
23
54
|
type: Input
|
|
24
55
|
}], items: [{
|
|
25
56
|
type: Input
|
|
26
57
|
}], className: [{
|
|
27
58
|
type: Input
|
|
59
|
+
}], minItemsMobile: [{
|
|
60
|
+
type: Input
|
|
28
61
|
}] } });
|
|
29
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9icmVhZGNydW1iLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9icmVhZGNydW1iL2JyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVMxRTs7Ozs7Ozs7Ozs7O0dBWUc7QUFNSCxNQUFNLE9BQU8sc0JBQXNCO0lBTG5DO1FBTVcsU0FBSSxHQUFzQixnQkFBZ0IsQ0FBQztRQUMzQyxVQUFLLEdBQWEsQ0FBQyxNQUFNLEVBQUUsWUFBWSxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBQ3ZELGNBQVMsR0FBRyxFQUFFLENBQUM7UUFFeEI7OztXQUdHO1FBQ00sbUJBQWMsR0FBRyxDQUFDLENBQUM7S0F1QjdCO0lBckJDLElBQUksYUFBYTtRQUNmLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxXQUFXLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ3RELE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUNyRztRQUVELDBFQUEwRTtRQUMxRSxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUM7SUFDcEIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsa0JBQWtCLENBQUMsS0FBYTtRQUM5QixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssWUFBWTtZQUFFLE9BQU8sSUFBSSxDQUFDO1FBRTVDLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDO1FBQ3JDLElBQUksVUFBVSxJQUFJLElBQUksQ0FBQyxjQUFjO1lBQUUsT0FBTyxJQUFJLENBQUM7UUFFbkQsbUNBQW1DO1FBQ25DLE9BQU8sS0FBSyxLQUFLLENBQUMsSUFBSSxLQUFLLEtBQUssVUFBVSxHQUFHLENBQUMsQ0FBQztJQUNqRCxDQUFDOzttSEEvQlUsc0JBQXNCO3VHQUF0QixzQkFBc0IsMEpDM0JuQyxtckZBb0VBOzJGRHpDYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsZ0JBQWdCLG1CQUVULHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFNRyxjQUFjO3NCQUF0QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IHR5cGUgUGRtQnJlYWRjcnVtYk1vZGUgPVxuICB8ICdjdXN0b20tc2VwYXJhdG9yJ1xuICB8ICdkcm9wZG93bidcbiAgfCAnY29sbGFwc2VkJ1xuICB8ICdsaW5rLWNvbXBvbmVudCdcbiAgfCAncmVzcG9uc2l2ZSc7XG5cbi8qKlxuICogQnJlYWRjcnVtYiBjb21wb25lbnQgY29uIHNvcG9ydGUgcmVzcG9uc2l2ZVxuICogXG4gKiBNRUpPUkFETyBlbiB2MC4yLjA6XG4gKiAtIE1vZG8gcmVzcG9uc2l2ZSByZWFsIGNvbiBvdmVyZmxvdy14LWF1dG9cbiAqIC0gQ29sbGFwc2UgaW50ZWxpZ2VudGUgZW4gbW9iaWxlXG4gKiBcbiAqIEBleGFtcGxlXG4gKiA8cGRtLWJyZWFkY3J1bWJcbiAqICAgbW9kZT1cInJlc3BvbnNpdmVcIlxuICogICBbaXRlbXNdPVwiWydIb21lJywgJ1Byb2R1Y3RzJywgJ0VsZWN0cm9uaWNzJywgJ0xhcHRvcHMnXVwiPlxuICogPC9wZG0tYnJlYWRjcnVtYj5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncGRtLWJyZWFkY3J1bWInLFxuICB0ZW1wbGF0ZVVybDogJy4vYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIFBkbUJyZWFkY3J1bWJDb21wb25lbnQge1xuICBASW5wdXQoKSBtb2RlOiBQZG1CcmVhZGNydW1iTW9kZSA9ICdsaW5rLWNvbXBvbmVudCc7XG4gIEBJbnB1dCgpIGl0ZW1zOiBzdHJpbmdbXSA9IFsnSG9tZScsICdDb21wb25lbnRzJywgJ0JyZWFkY3J1bWInXTtcbiAgQElucHV0KCkgY2xhc3NOYW1lID0gJyc7XG4gIFxuICAvKipcbiAgICogQ2FudGlkYWQgbcOtbmltYSBkZSBpdGVtcyBwYXJhIG1vc3RyYXIgZW4gbW9iaWxlIGN1YW5kbyBtb2RlPVwicmVzcG9uc2l2ZVwiXG4gICAqIERlZmF1bHQ6IDIgKHByaW1lciB5IMO6bHRpbW8gaXRlbSlcbiAgICovXG4gIEBJbnB1dCgpIG1pbkl0ZW1zTW9iaWxlID0gMjtcblxuICBnZXQgcmVuZGVyZWRJdGVtcygpOiBzdHJpbmdbXSB7XG4gICAgaWYgKHRoaXMubW9kZSA9PT0gJ2NvbGxhcHNlZCcgJiYgdGhpcy5pdGVtcy5sZW5ndGggPiAzKSB7XG4gICAgICByZXR1cm4gW3RoaXMuaXRlbXNbMF0sICcuLi4nLCB0aGlzLml0ZW1zW3RoaXMuaXRlbXMubGVuZ3RoIC0gMl0sIHRoaXMuaXRlbXNbdGhpcy5pdGVtcy5sZW5ndGggLSAxXV07XG4gICAgfVxuICAgIFxuICAgIC8vIFJlc3BvbnNpdmUgbW9kZTogbm8gY29sbGFwc2UgZW4gZWwgVFMsIHNlIG1hbmVqYSBlbiBlbCB0ZW1wbGF0ZSBjb24gQ1NTXG4gICAgcmV0dXJuIHRoaXMuaXRlbXM7XG4gIH1cbiAgXG4gIC8qKlxuICAgKiBEZXRlcm1pbmEgc2kgdW4gaXRlbSBkZWJlIGVzdGFyIHZpc2libGUgZW4gbW9iaWxlIChtb2RvIHJlc3BvbnNpdmUpXG4gICAqL1xuICBzaG91bGRTaG93SW5Nb2JpbGUoaW5kZXg6IG51bWJlcik6IGJvb2xlYW4ge1xuICAgIGlmICh0aGlzLm1vZGUgIT09ICdyZXNwb25zaXZlJykgcmV0dXJuIHRydWU7XG4gICAgXG4gICAgY29uc3QgdG90YWxJdGVtcyA9IHRoaXMuaXRlbXMubGVuZ3RoO1xuICAgIGlmICh0b3RhbEl0ZW1zIDw9IHRoaXMubWluSXRlbXNNb2JpbGUpIHJldHVybiB0cnVlO1xuICAgIFxuICAgIC8vIFNpZW1wcmUgbW9zdHJhciBwcmltZXJvIHkgw7psdGltb1xuICAgIHJldHVybiBpbmRleCA9PT0gMCB8fCBpbmRleCA9PT0gdG90YWxJdGVtcyAtIDE7XG4gIH1cbn1cbiIsIjxuYXZcbiAgYXJpYS1sYWJlbD1cImJyZWFkY3J1bWJcIlxuICBbbmdDbGFzc109XCJbXG4gICAgJ2lubGluZS1mbGV4IGl0ZW1zLWNlbnRlciBnYXAtMS41IHRleHQtc20nLFxuICAgIG1vZGUgPT09ICdyZXNwb25zaXZlJyA/ICdvdmVyZmxvdy14LWF1dG8gbWF4LXctZnVsbCBwYi0xIHNjcm9sbGJhci10aGluJyA6ICcnLFxuICAgIGNsYXNzTmFtZVxuICBdXCJcbj5cbiAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXRlbSBvZiByZW5kZXJlZEl0ZW1zOyBsZXQgaSA9IGluZGV4OyBsZXQgbGFzdCA9IGxhc3RcIj5cbiAgICA8IS0tIEl0ZW0gdGV4dCAtLT5cbiAgICA8c3BhbiBcbiAgICAgIFtuZ0NsYXNzXT1cIltcbiAgICAgICAgbGFzdCA/ICd0ZXh0LWZvcmVncm91bmQgZm9udC1tZWRpdW0nIDogJ3RleHQtbXV0ZWQtZm9yZWdyb3VuZCBob3Zlcjp0ZXh0LWZvcmVncm91bmQgdHJhbnNpdGlvbi1jb2xvcnMgY3Vyc29yLXBvaW50ZXInLFxuICAgICAgICBtb2RlID09PSAncmVzcG9uc2l2ZScgJiYgIXNob3VsZFNob3dJbk1vYmlsZShpKSA/ICdoaWRkZW4gc206aW5saW5lJyA6ICcnLFxuICAgICAgICAnd2hpdGVzcGFjZS1ub3dyYXAnXG4gICAgICBdXCI+XG4gICAgICB7eyBpdGVtIH19XG4gICAgPC9zcGFuPlxuXG4gICAgPCEtLSBTZXBhcmF0b3IgLS0+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFsYXN0XCI+XG4gICAgICA8c3BhbiBcbiAgICAgICAgW25nQ2xhc3NdPVwiW1xuICAgICAgICAgICdpbmxpbmUtZmxleCBoLTYgdy02IGZsZXgtc2hyaW5rLTAgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIHRleHQtbXV0ZWQtZm9yZWdyb3VuZCcsXG4gICAgICAgICAgbW9kZSA9PT0gJ3Jlc3BvbnNpdmUnICYmICFzaG91bGRTaG93SW5Nb2JpbGUoaSkgJiYgIXNob3VsZFNob3dJbk1vYmlsZShpICsgMSkgPyAnaGlkZGVuIHNtOmlubGluZS1mbGV4JyA6ICcnXG4gICAgICAgIF1cIiBcbiAgICAgICAgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICAgIDwhLS0gQ3VzdG9tIHNlcGFyYXRvciAoc2xhc2gpIC0tPlxuICAgICAgICA8c3ZnXG4gICAgICAgICAgKm5nSWY9XCJtb2RlID09PSAnY3VzdG9tLXNlcGFyYXRvcicgJiYgaXRlbSAhPT0gJy4uLidcIlxuICAgICAgICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgICAgICAgIGNsYXNzPVwiaC00IHctNFwiXG4gICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICA+XG4gICAgICAgICAgPHBhdGggZD1cIk04IDIwTDE2IDRcIiBzdHJva2U9XCJjdXJyZW50Q29sb3JcIiBzdHJva2Utd2lkdGg9XCIxLjVcIiBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICAgIFxuICAgICAgICA8IS0tIERlZmF1bHQgc2VwYXJhdG9yIChjaGV2cm9uKSAtLT5cbiAgICAgICAgPHN2Z1xuICAgICAgICAgICpuZ0lmPVwiKG1vZGUgIT09ICdjdXN0b20tc2VwYXJhdG9yJyAmJiBpdGVtICE9PSAnLi4uJykgfHwgaXRlbSA9PT0gJy4uLidcIlxuICAgICAgICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgICAgICAgIGNsYXNzPVwiaC00IHctNFwiXG4gICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICA+XG4gICAgICAgICAgPHBhdGggZD1cIk05IDZMMTUgMTJMOSAxOFwiIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiIHN0cm9rZS13aWR0aD1cIjEuNVwiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIiBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiIC8+XG4gICAgICAgIDwvc3ZnPlxuICAgICAgPC9zcGFuPlxuICAgICAgXG4gICAgICA8IS0tIEVsbGlwc2lzIGluZGljYXRvciBmb3IgcmVzcG9uc2l2ZSBtb2RlIChvbmx5IHNob3duIHdoZW4gaXRlbXMgYXJlIGhpZGRlbikgLS0+XG4gICAgICA8c3BhbiBcbiAgICAgICAgKm5nSWY9XCJtb2RlID09PSAncmVzcG9uc2l2ZScgJiYgIXNob3VsZFNob3dJbk1vYmlsZShpKSAmJiBpID09PSAwXCJcbiAgICAgICAgY2xhc3M9XCJpbmxpbmUtZmxleCBzbTpoaWRkZW4gdGV4dC1tdXRlZC1mb3JlZ3JvdW5kXCI+XG4gICAgICAgIC4uLlxuICAgICAgPC9zcGFuPlxuICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgPCEtLSBEcm9wZG93biBpbmRpY2F0b3IgLS0+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIm1vZGUgPT09ICdkcm9wZG93bicgJiYgaSA9PT0gMSAmJiBpdGVtICE9PSAnLi4uJyAmJiAhbGFzdFwiPlxuICAgICAgPHNwYW4gY2xhc3M9XCItbWwtMiBpbmxpbmUtZmxleCBoLTYgdy02IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciB0ZXh0LW11dGVkLWZvcmVncm91bmRcIiBhcmlhLWhpZGRlbj1cInRydWVcIj5cbiAgICAgICAgPHN2ZyB2aWV3Qm94PVwiMCAwIDI0IDI0XCIgY2xhc3M9XCJoLTQgdy00XCIgZmlsbD1cIm5vbmVcIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCI+XG4gICAgICAgICAgPHBhdGggZD1cIk03IDEwTDEyIDE1TDE3IDEwXCIgc3Ryb2tlPVwiY3VycmVudENvbG9yXCIgc3Ryb2tlLXdpZHRoPVwiMS41XCIgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L3NwYW4+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvbmctY29udGFpbmVyPlxuPC9uYXY+XG4iXX0=
|