@pure-ds/core 0.4.12 → 0.4.13
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/custom-elements.json +263 -18
- package/dist/types/public/assets/js/pds.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-drawer.d.ts +141 -0
- package/dist/types/public/assets/pds/components/pds-drawer.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-scrollrow.d.ts +3 -0
- package/dist/types/public/assets/pds/components/pds-scrollrow.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-splitpanel.d.ts +89 -0
- package/dist/types/public/assets/pds/components/pds-splitpanel.d.ts.map +1 -1
- package/dist/types/src/js/pds-core/pds-enhancers.d.ts.map +1 -1
- package/dist/types/src/js/pds-core/pds-generator.d.ts.map +1 -1
- package/package.json +1 -1
- package/public/assets/js/app.js +99 -436
- package/public/assets/js/pds.js +124 -461
- package/public/assets/pds/components/pds-calendar.js +10 -12
- package/public/assets/pds/components/pds-drawer.js +3 -2
- package/public/assets/pds/components/pds-scrollrow.js +3 -0
- package/public/assets/pds/components/pds-splitpanel.js +6 -7
- package/public/assets/pds/vscode-custom-data.json +15 -10
- package/src/js/pds-core/pds-enhancers.js +4 -2
- package/src/js/pds-core/pds-generator.js +98 -435
package/custom-elements.json
CHANGED
|
@@ -39,12 +39,64 @@
|
|
|
39
39
|
{
|
|
40
40
|
"kind": "class",
|
|
41
41
|
"description": "",
|
|
42
|
-
"name": "
|
|
42
|
+
"name": "PdsCalendar",
|
|
43
|
+
"cssProperties": [
|
|
44
|
+
{
|
|
45
|
+
"description": "Calendar background color",
|
|
46
|
+
"name": "--surface-bg"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"description": "Border color for calendar elements",
|
|
50
|
+
"name": "--surface-border"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"description": "Secondary text color",
|
|
54
|
+
"name": "--surface-text-secondary"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"description": "Primary color for events and highlights",
|
|
58
|
+
"name": "--color-primary-500"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"description": "Warning event color",
|
|
62
|
+
"name": "--color-warning-500"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"description": "Danger event color",
|
|
66
|
+
"name": "--color-danger-500"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"description": "Info event color",
|
|
70
|
+
"name": "--color-info-500"
|
|
71
|
+
}
|
|
72
|
+
],
|
|
73
|
+
"cssParts": [
|
|
74
|
+
{
|
|
75
|
+
"description": "The main container for the calendar",
|
|
76
|
+
"name": "calendar-container"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"description": "The header containing month name and navigation",
|
|
80
|
+
"name": "calendar-header"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"description": "The grid container for the calendar days",
|
|
84
|
+
"name": "calendar"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"description": "Individual day cells",
|
|
88
|
+
"name": "day"
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"description": "Event items within days",
|
|
92
|
+
"name": "task"
|
|
93
|
+
}
|
|
94
|
+
],
|
|
43
95
|
"members": [
|
|
44
96
|
{
|
|
45
97
|
"kind": "field",
|
|
46
98
|
"name": "date",
|
|
47
|
-
"description": "Gets the current date",
|
|
99
|
+
"description": "Gets or sets the current date being displayed",
|
|
48
100
|
"parameters": [
|
|
49
101
|
{
|
|
50
102
|
"description": "Date string or Date object",
|
|
@@ -58,6 +110,9 @@
|
|
|
58
110
|
"type": {
|
|
59
111
|
"text": "Date"
|
|
60
112
|
}
|
|
113
|
+
},
|
|
114
|
+
"type": {
|
|
115
|
+
"text": "Date"
|
|
61
116
|
}
|
|
62
117
|
},
|
|
63
118
|
{
|
|
@@ -78,11 +133,19 @@
|
|
|
78
133
|
"type": {
|
|
79
134
|
"text": "CustomEvent"
|
|
80
135
|
}
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"description": "Dispatched after the calendar month is rendered with event fill capability",
|
|
139
|
+
"name": "pds-calendar#month-rendered"
|
|
81
140
|
}
|
|
82
141
|
],
|
|
83
142
|
"attributes": [
|
|
84
143
|
{
|
|
85
|
-
"name": "date"
|
|
144
|
+
"name": "date",
|
|
145
|
+
"type": {
|
|
146
|
+
"text": "String"
|
|
147
|
+
},
|
|
148
|
+
"description": "The date to display (defaults to current date). Accepts any valid date string"
|
|
86
149
|
}
|
|
87
150
|
],
|
|
88
151
|
"superclass": {
|
|
@@ -105,7 +168,7 @@
|
|
|
105
168
|
"kind": "custom-element-definition",
|
|
106
169
|
"name": "pds-calendar",
|
|
107
170
|
"declaration": {
|
|
108
|
-
"name": "
|
|
171
|
+
"name": "PdsCalendar",
|
|
109
172
|
"module": "public/assets/pds/components/pds-calendar.js"
|
|
110
173
|
}
|
|
111
174
|
}
|
|
@@ -118,7 +181,61 @@
|
|
|
118
181
|
{
|
|
119
182
|
"kind": "class",
|
|
120
183
|
"description": "",
|
|
121
|
-
"name": "
|
|
184
|
+
"name": "PdsDrawer",
|
|
185
|
+
"cssProperties": [
|
|
186
|
+
{
|
|
187
|
+
"description": "Animation duration (default: var(--transition-normal))",
|
|
188
|
+
"name": "--drawer-duration"
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"description": "Animation easing function (default: var(--easing-emphasized))",
|
|
192
|
+
"name": "--drawer-easing"
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"description": "Maximum height when position is top/bottom (default: 70vh)",
|
|
196
|
+
"name": "--drawer-max-height"
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"description": "Minimum height when position is top/bottom (default: auto)",
|
|
200
|
+
"name": "--drawer-min-height"
|
|
201
|
+
}
|
|
202
|
+
],
|
|
203
|
+
"cssParts": [
|
|
204
|
+
{
|
|
205
|
+
"description": "The semi-transparent backdrop overlay",
|
|
206
|
+
"name": "backdrop"
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"description": "The drawer panel container",
|
|
210
|
+
"name": "panel"
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"description": "The drawer header section",
|
|
214
|
+
"name": "header"
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"description": "The close button",
|
|
218
|
+
"name": "close-button"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"description": "The drag handle indicator",
|
|
222
|
+
"name": "grab-handle"
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"description": "The drawer content section",
|
|
226
|
+
"name": "content"
|
|
227
|
+
}
|
|
228
|
+
],
|
|
229
|
+
"slots": [
|
|
230
|
+
{
|
|
231
|
+
"description": "Header content for the drawer",
|
|
232
|
+
"name": "drawer-header"
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"description": "Main content of the drawer",
|
|
236
|
+
"name": "drawer-content"
|
|
237
|
+
}
|
|
238
|
+
],
|
|
122
239
|
"members": [
|
|
123
240
|
{
|
|
124
241
|
"kind": "field",
|
|
@@ -310,6 +427,12 @@
|
|
|
310
427
|
"default": "false"
|
|
311
428
|
}
|
|
312
429
|
],
|
|
430
|
+
"events": [
|
|
431
|
+
{
|
|
432
|
+
"description": "Fired when the drawer opens or closes",
|
|
433
|
+
"name": "toggle"
|
|
434
|
+
}
|
|
435
|
+
],
|
|
313
436
|
"attributes": [
|
|
314
437
|
{
|
|
315
438
|
"name": "open",
|
|
@@ -368,7 +491,7 @@
|
|
|
368
491
|
"superclass": {
|
|
369
492
|
"name": "HTMLElement"
|
|
370
493
|
},
|
|
371
|
-
"tagName": "pds-
|
|
494
|
+
"tagName": "pds-drawer",
|
|
372
495
|
"customElement": true
|
|
373
496
|
}
|
|
374
497
|
],
|
|
@@ -377,7 +500,7 @@
|
|
|
377
500
|
"kind": "custom-element-definition",
|
|
378
501
|
"name": "pds-drawer",
|
|
379
502
|
"declaration": {
|
|
380
|
-
"name": "
|
|
503
|
+
"name": "PdsDrawer",
|
|
381
504
|
"module": "public/assets/pds/components/pds-drawer.js"
|
|
382
505
|
}
|
|
383
506
|
}
|
|
@@ -404,6 +527,18 @@
|
|
|
404
527
|
"static": true,
|
|
405
528
|
"default": "new Map()"
|
|
406
529
|
},
|
|
530
|
+
{
|
|
531
|
+
"kind": "field",
|
|
532
|
+
"name": "externalIconCache",
|
|
533
|
+
"static": true,
|
|
534
|
+
"default": "new Map()"
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
"kind": "field",
|
|
538
|
+
"name": "externalIconPromises",
|
|
539
|
+
"static": true,
|
|
540
|
+
"default": "new Map()"
|
|
541
|
+
},
|
|
407
542
|
{
|
|
408
543
|
"kind": "field",
|
|
409
544
|
"name": "instances",
|
|
@@ -421,6 +556,26 @@
|
|
|
421
556
|
}
|
|
422
557
|
}
|
|
423
558
|
},
|
|
559
|
+
{
|
|
560
|
+
"kind": "method",
|
|
561
|
+
"name": "fetchExternalIcon",
|
|
562
|
+
"static": true,
|
|
563
|
+
"parameters": [
|
|
564
|
+
{
|
|
565
|
+
"name": "iconName",
|
|
566
|
+
"description": "The icon name (without .svg extension)",
|
|
567
|
+
"type": {
|
|
568
|
+
"text": "string"
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
],
|
|
572
|
+
"description": "Fetch an external SVG icon and cache it",
|
|
573
|
+
"return": {
|
|
574
|
+
"type": {
|
|
575
|
+
"text": "Promise<boolean>"
|
|
576
|
+
}
|
|
577
|
+
}
|
|
578
|
+
},
|
|
424
579
|
{
|
|
425
580
|
"kind": "method",
|
|
426
581
|
"name": "ensureInlineSprite",
|
|
@@ -1174,6 +1329,14 @@
|
|
|
1174
1329
|
{
|
|
1175
1330
|
"description": "The scrollable container element",
|
|
1176
1331
|
"name": "viewport"
|
|
1332
|
+
},
|
|
1333
|
+
{
|
|
1334
|
+
"description": "The previous/left scroll navigation button",
|
|
1335
|
+
"name": "prev"
|
|
1336
|
+
},
|
|
1337
|
+
{
|
|
1338
|
+
"description": "The next/right scroll navigation button",
|
|
1339
|
+
"name": "next"
|
|
1177
1340
|
}
|
|
1178
1341
|
],
|
|
1179
1342
|
"slots": [
|
|
@@ -1278,23 +1441,89 @@
|
|
|
1278
1441
|
{
|
|
1279
1442
|
"kind": "class",
|
|
1280
1443
|
"description": "",
|
|
1281
|
-
"name": "
|
|
1444
|
+
"name": "PdsSplitpanel",
|
|
1445
|
+
"cssProperties": [
|
|
1446
|
+
{
|
|
1447
|
+
"description": "Width of the left panel in horizontal layout.",
|
|
1448
|
+
"name": "--left-width"
|
|
1449
|
+
},
|
|
1450
|
+
{
|
|
1451
|
+
"description": "Color of the splitter bar.",
|
|
1452
|
+
"name": "--color-border"
|
|
1453
|
+
},
|
|
1454
|
+
{
|
|
1455
|
+
"description": "Background color of the left panel in mobile view.",
|
|
1456
|
+
"name": "--color-surface-base"
|
|
1457
|
+
},
|
|
1458
|
+
{
|
|
1459
|
+
"description": "Transition duration for the mobile panel animation.",
|
|
1460
|
+
"name": "--transition-fast"
|
|
1461
|
+
},
|
|
1462
|
+
{
|
|
1463
|
+
"description": "Positioning spacing for the mobile toggle button.",
|
|
1464
|
+
"name": "--spacing-4"
|
|
1465
|
+
},
|
|
1466
|
+
{
|
|
1467
|
+
"description": "Padding for the mobile toggle button.",
|
|
1468
|
+
"name": "--spacing-1"
|
|
1469
|
+
},
|
|
1470
|
+
{
|
|
1471
|
+
"description": "Padding for the mobile toggle button.",
|
|
1472
|
+
"name": "--spacing-2"
|
|
1473
|
+
}
|
|
1474
|
+
],
|
|
1475
|
+
"cssParts": [
|
|
1476
|
+
{
|
|
1477
|
+
"description": "The mobile toggle button.",
|
|
1478
|
+
"name": "toggle"
|
|
1479
|
+
},
|
|
1480
|
+
{
|
|
1481
|
+
"description": "The draggable splitter bar between panels.",
|
|
1482
|
+
"name": "splitter"
|
|
1483
|
+
}
|
|
1484
|
+
],
|
|
1485
|
+
"slots": [
|
|
1486
|
+
{
|
|
1487
|
+
"description": "Content for the left (or top) panel.",
|
|
1488
|
+
"name": "left"
|
|
1489
|
+
},
|
|
1490
|
+
{
|
|
1491
|
+
"description": "Content for the right (or bottom) panel.",
|
|
1492
|
+
"name": "right"
|
|
1493
|
+
}
|
|
1494
|
+
],
|
|
1282
1495
|
"members": [
|
|
1283
1496
|
{
|
|
1284
1497
|
"kind": "field",
|
|
1285
|
-
"name": "layout"
|
|
1498
|
+
"name": "layout",
|
|
1499
|
+
"type": {
|
|
1500
|
+
"text": "String"
|
|
1501
|
+
},
|
|
1502
|
+
"description": "Gets or sets the layout direction."
|
|
1286
1503
|
},
|
|
1287
1504
|
{
|
|
1288
1505
|
"kind": "field",
|
|
1289
|
-
"name": "defaultSplit"
|
|
1506
|
+
"name": "defaultSplit",
|
|
1507
|
+
"type": {
|
|
1508
|
+
"text": "String"
|
|
1509
|
+
},
|
|
1510
|
+
"description": "Gets or sets the default split size."
|
|
1290
1511
|
},
|
|
1291
1512
|
{
|
|
1292
1513
|
"kind": "field",
|
|
1293
|
-
"name": "breakpoint"
|
|
1514
|
+
"name": "breakpoint",
|
|
1515
|
+
"type": {
|
|
1516
|
+
"text": "Number"
|
|
1517
|
+
},
|
|
1518
|
+
"description": "Gets or sets the mobile breakpoint."
|
|
1294
1519
|
},
|
|
1295
1520
|
{
|
|
1296
1521
|
"kind": "field",
|
|
1297
|
-
"name": "open"
|
|
1522
|
+
"name": "open",
|
|
1523
|
+
"type": {
|
|
1524
|
+
"text": "Boolean"
|
|
1525
|
+
},
|
|
1526
|
+
"description": "Gets or sets the open state of the mobile panel."
|
|
1298
1527
|
},
|
|
1299
1528
|
{
|
|
1300
1529
|
"kind": "method",
|
|
@@ -1396,22 +1625,38 @@
|
|
|
1396
1625
|
],
|
|
1397
1626
|
"attributes": [
|
|
1398
1627
|
{
|
|
1399
|
-
"name": "layout"
|
|
1628
|
+
"name": "layout",
|
|
1629
|
+
"type": {
|
|
1630
|
+
"text": "String"
|
|
1631
|
+
},
|
|
1632
|
+
"description": "The layout direction of the panels. Can be \"horizontal\" or \"vertical\". Defaults to \"horizontal\"."
|
|
1400
1633
|
},
|
|
1401
1634
|
{
|
|
1402
|
-
"name": "defaultsplit"
|
|
1635
|
+
"name": "defaultsplit",
|
|
1636
|
+
"type": {
|
|
1637
|
+
"text": "String"
|
|
1638
|
+
},
|
|
1639
|
+
"description": "The initial size of the primary (left/top) panel. Defaults to \"450px\"."
|
|
1403
1640
|
},
|
|
1404
1641
|
{
|
|
1405
|
-
"name": "breakpoint"
|
|
1642
|
+
"name": "breakpoint",
|
|
1643
|
+
"type": {
|
|
1644
|
+
"text": "Number"
|
|
1645
|
+
},
|
|
1646
|
+
"description": "The viewport width in pixels below which the component switches to mobile view. Defaults to 1024."
|
|
1406
1647
|
},
|
|
1407
1648
|
{
|
|
1408
|
-
"name": "open"
|
|
1649
|
+
"name": "open",
|
|
1650
|
+
"type": {
|
|
1651
|
+
"text": "Boolean"
|
|
1652
|
+
},
|
|
1653
|
+
"description": "Controls the visibility of the primary panel in mobile view."
|
|
1409
1654
|
}
|
|
1410
1655
|
],
|
|
1411
1656
|
"superclass": {
|
|
1412
1657
|
"name": "HTMLElement"
|
|
1413
1658
|
},
|
|
1414
|
-
"tagName": "pds-
|
|
1659
|
+
"tagName": "pds-splitpanel",
|
|
1415
1660
|
"customElement": true
|
|
1416
1661
|
}
|
|
1417
1662
|
],
|
|
@@ -1420,7 +1665,7 @@
|
|
|
1420
1665
|
"kind": "custom-element-definition",
|
|
1421
1666
|
"name": "pds-splitpanel",
|
|
1422
1667
|
"declaration": {
|
|
1423
|
-
"name": "
|
|
1668
|
+
"name": "PdsSplitpanel",
|
|
1424
1669
|
"module": "public/assets/pds/components/pds-splitpanel.js"
|
|
1425
1670
|
}
|
|
1426
1671
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pds.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pds.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds.js"],"names":[],"mappings":"AAukG6nS;;;;EAAQ;AAAsnF;;;;;;;;;;;;;;;EAA8sE"}
|
|
@@ -1,2 +1,143 @@
|
|
|
1
1
|
declare const PDS: any;
|
|
2
|
+
/**
|
|
3
|
+
* @element pds-drawer
|
|
4
|
+
* @fires toggle - Fired when the drawer opens or closes
|
|
5
|
+
*
|
|
6
|
+
* @slot drawer-header - Header content for the drawer
|
|
7
|
+
* @slot drawer-content - Main content of the drawer
|
|
8
|
+
*
|
|
9
|
+
* @cssprop --drawer-duration - Animation duration (default: var(--transition-normal))
|
|
10
|
+
* @cssprop --drawer-easing - Animation easing function (default: var(--easing-emphasized))
|
|
11
|
+
* @cssprop --drawer-max-height - Maximum height when position is top/bottom (default: 70vh)
|
|
12
|
+
* @cssprop --drawer-min-height - Minimum height when position is top/bottom (default: auto)
|
|
13
|
+
*
|
|
14
|
+
* @csspart backdrop - The semi-transparent backdrop overlay
|
|
15
|
+
* @csspart panel - The drawer panel container
|
|
16
|
+
* @csspart header - The drawer header section
|
|
17
|
+
* @csspart close-button - The close button
|
|
18
|
+
* @csspart grab-handle - The drag handle indicator
|
|
19
|
+
* @csspart content - The drawer content section
|
|
20
|
+
*/
|
|
21
|
+
declare class PdsDrawer extends HTMLElement {
|
|
22
|
+
static get observedAttributes(): string[];
|
|
23
|
+
_open: boolean;
|
|
24
|
+
_position: string;
|
|
25
|
+
_drag: string;
|
|
26
|
+
_maxHeight: string;
|
|
27
|
+
_minHeight: string;
|
|
28
|
+
_showClose: boolean;
|
|
29
|
+
set open(val: boolean);
|
|
30
|
+
/**
|
|
31
|
+
* Controls whether the drawer is open or closed
|
|
32
|
+
* @type {boolean}
|
|
33
|
+
* @attr open
|
|
34
|
+
*/
|
|
35
|
+
get open(): boolean;
|
|
36
|
+
set position(val: "bottom" | "top" | "left" | "right");
|
|
37
|
+
/**
|
|
38
|
+
* Position of the drawer relative to the viewport
|
|
39
|
+
* @type {"bottom" | "top" | "left" | "right"}
|
|
40
|
+
* @attr position
|
|
41
|
+
* @default "bottom"
|
|
42
|
+
*/
|
|
43
|
+
get position(): "bottom" | "top" | "left" | "right";
|
|
44
|
+
set drag(val: "header" | "none");
|
|
45
|
+
/**
|
|
46
|
+
* Controls drag interaction behavior
|
|
47
|
+
* @type {"header" | "none"}
|
|
48
|
+
* @attr drag
|
|
49
|
+
* @default "header"
|
|
50
|
+
*/
|
|
51
|
+
get drag(): "header" | "none";
|
|
52
|
+
set maxHeight(val: string);
|
|
53
|
+
/**
|
|
54
|
+
* Maximum height for top/bottom positioned drawers (CSS value)
|
|
55
|
+
* @type {string}
|
|
56
|
+
* @attr max-height
|
|
57
|
+
* @default "70vh"
|
|
58
|
+
*/
|
|
59
|
+
get maxHeight(): string;
|
|
60
|
+
set minHeight(val: string);
|
|
61
|
+
/**
|
|
62
|
+
* Minimum height for top/bottom positioned drawers (CSS value)
|
|
63
|
+
* @type {string}
|
|
64
|
+
* @attr min-height
|
|
65
|
+
* @default "auto"
|
|
66
|
+
*/
|
|
67
|
+
get minHeight(): string;
|
|
68
|
+
set showClose(val: boolean);
|
|
69
|
+
/**
|
|
70
|
+
* Whether to show the close button in the header
|
|
71
|
+
* @type {boolean}
|
|
72
|
+
* @attr show-close
|
|
73
|
+
* @default false
|
|
74
|
+
*/
|
|
75
|
+
get showClose(): boolean;
|
|
76
|
+
attributeChangedCallback(name: any, _old: any, value: any): void;
|
|
77
|
+
connectedCallback(): Promise<void>;
|
|
78
|
+
disconnectedCallback(): void;
|
|
79
|
+
/**
|
|
80
|
+
* Opens the drawer
|
|
81
|
+
* @method openDrawer
|
|
82
|
+
* @public
|
|
83
|
+
*/
|
|
84
|
+
public openDrawer(): void;
|
|
85
|
+
/**
|
|
86
|
+
* Closes the drawer
|
|
87
|
+
* @method closeDrawer
|
|
88
|
+
* @public
|
|
89
|
+
*/
|
|
90
|
+
public closeDrawer(): void;
|
|
91
|
+
/**
|
|
92
|
+
* Toggles the drawer open/closed state
|
|
93
|
+
* @method toggleDrawer
|
|
94
|
+
* @public
|
|
95
|
+
*/
|
|
96
|
+
public toggleDrawer(): void;
|
|
97
|
+
/**
|
|
98
|
+
* Configure and open the drawer in one call
|
|
99
|
+
* @method show
|
|
100
|
+
* @public
|
|
101
|
+
* @param {any|HTMLElement|string} htmlContent - The main content to display
|
|
102
|
+
* @param {Object} [options] - Configuration options
|
|
103
|
+
* @param {any|HTMLElement|string} [options.header] - Header content
|
|
104
|
+
* @param {"bottom"|"top"|"left"|"right"} [options.position] - Drawer position
|
|
105
|
+
* @param {string} [options.maxHeight] - Maximum height (CSS value)
|
|
106
|
+
* @param {string} [options.minHeight] - Minimum height (CSS value)
|
|
107
|
+
* @param {boolean} [options.showClose] - Show close button
|
|
108
|
+
* @param {boolean} [options.waitForMedia=true] - Wait for images/videos to load
|
|
109
|
+
* @param {number} [options.mediaTimeout=500] - Media load timeout in ms
|
|
110
|
+
* @returns {Promise<this>} Resolves to the drawer element
|
|
111
|
+
*/
|
|
112
|
+
public show(htmlContent: any | HTMLElement | string, options?: {
|
|
113
|
+
header?: any | HTMLElement | string;
|
|
114
|
+
position?: "bottom" | "top" | "left" | "right";
|
|
115
|
+
maxHeight?: string;
|
|
116
|
+
minHeight?: string;
|
|
117
|
+
showClose?: boolean;
|
|
118
|
+
waitForMedia?: boolean;
|
|
119
|
+
mediaTimeout?: number;
|
|
120
|
+
}): Promise<this>;
|
|
121
|
+
/**
|
|
122
|
+
* Set drawer content using slots
|
|
123
|
+
* @param {any|HTMLElement|string} bodyContent - Content for drawer body (HTMLElement or string; Lit templates supported if runtime available)
|
|
124
|
+
* @param {any|HTMLElement|string} headerContent - Optional content for drawer header
|
|
125
|
+
*/
|
|
126
|
+
/**
|
|
127
|
+
* Set the content of the drawer
|
|
128
|
+
* @method setContent
|
|
129
|
+
* @public
|
|
130
|
+
* @param {any|HTMLElement|string} bodyContent - Content for the drawer body
|
|
131
|
+
* @param {any|HTMLElement|string} [headerContent] - Optional header content
|
|
132
|
+
* @returns {Promise<void>}
|
|
133
|
+
*/
|
|
134
|
+
public setContent(bodyContent: any | HTMLElement | string, headerContent?: any | HTMLElement | string): Promise<void>;
|
|
135
|
+
/**
|
|
136
|
+
* Clear drawer content (removes all slotted content)
|
|
137
|
+
* @method clearContent
|
|
138
|
+
* @public
|
|
139
|
+
*/
|
|
140
|
+
public clearContent(): void;
|
|
141
|
+
#private;
|
|
142
|
+
}
|
|
2
143
|
//# sourceMappingURL=pds-drawer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pds-drawer.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-drawer.js"],"names":[],"mappings":"AAAA,uBAAuB"}
|
|
1
|
+
{"version":3,"file":"pds-drawer.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-drawer.js"],"names":[],"mappings":"AAAA,uBAAuB;AAEvB;;;;;;;;;;;;;;;;;;GAkBG;AACH;IA2BE,0CASC;IAhBC,eAAkB;IAClB,kBAAyB;IACzB,cAAqB;IACrB,mBAAoB;IACpB,mBAAoB;IACpB,oBAAuB;IAuBzB,cANU,OAAO,EAoBhB;IAtBD;;;;OAIG;IACH,YAHU,OAAO,CAKhB;IA0BD,kBAPU,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,EAc5C;IAhBD;;;;;OAKG;IACH,gBAJU,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAM5C;IAmBD,cAPU,QAAQ,GAAG,MAAM,EAY1B;IAdD;;;;;OAKG;IACH,YAJU,QAAQ,GAAG,MAAM,CAM1B;IAiBD,mBAPU,MAAM,EAkBf;IApBD;;;;;OAKG;IACH,iBAJU,MAAM,CAMf;IAuBD,mBAPU,MAAM,EAkBf;IApBD;;;;;OAKG;IACH,iBAJU,MAAM,CAMf;IAuBD,mBAPU,OAAO,EAYhB;IAdD;;;;;OAKG;IACH,iBAJU,OAAO,CAMhB;IAQD,iEAyCC;IAED,mCAgLC;IAED,6BAWC;IAID;;;;OAIG;IACH,0BAEC;IAED;;;;OAIG;IACH,2BAEC;IAED;;;;OAIG;IACH,4BAEC;IAED;;;;;;;;;;;;;;OAcG;IACH,yBAXW,GAAG,GAAC,WAAW,GAAC,MAAM,YAE9B;QAAyC,MAAM,GAAvC,GAAG,GAAC,WAAW,GAAC,MAAM;QACkB,QAAQ,GAAhD,QAAQ,GAAC,KAAK,GAAC,MAAM,GAAC,OAAO;QACZ,SAAS,GAA1B,MAAM;QACW,SAAS,GAA1B,MAAM;QACY,SAAS,GAA3B,OAAO;QACW,YAAY,GAA9B,OAAO;QACU,YAAY,GAA7B,MAAM;KACd,GAAU,OAAO,CAAC,IAAI,CAAC,CA6BzB;IAED;;;;OAIG;IACH;;;;;;;OAOG;IACH,+BAJW,GAAG,GAAC,WAAW,GAAC,MAAM,kBACtB,GAAG,GAAC,WAAW,GAAC,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CAyDzB;IAED;;;;OAIG;IACH,4BAEC;;CAqSF"}
|
|
@@ -4,7 +4,10 @@
|
|
|
4
4
|
* @element pds-scrollrow
|
|
5
5
|
* @slot default - Scrollable tile content
|
|
6
6
|
* @slot heading - Optional heading content rendered in the component header
|
|
7
|
+
*
|
|
7
8
|
* @csspart viewport - The scrollable container element
|
|
9
|
+
* @csspart prev - The previous/left scroll navigation button
|
|
10
|
+
* @csspart next - The next/right scroll navigation button
|
|
8
11
|
*
|
|
9
12
|
* @attr {string} label - Accessible label for the scroll region; also used as fallback heading copy
|
|
10
13
|
* @attr {"start"|"center"} snap - Snap alignment for tiles when scrolling (default: start)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pds-scrollrow.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-scrollrow.js"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"pds-scrollrow.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-scrollrow.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH;IAME,0CAEC;IAOD,2CA8CE;IA+BF;;;OAGG;IACH,eAFW,MAAM,GAAC,IAAI,EAKrB;IAfD;;;OAGG;IACH,aAFa,MAAM,GAAC,IAAI,CAKvB;IAgBD;;;OAGG;IACH,cAFW,MAAM,GAAC,IAAI,EAKrB;IAdD;;;OAGG;IACH,YAFa,OAAO,GAAC,QAAQ,CAI5B;IAUD;;OAEG;IACH,0BAQC;IAED;;OAEG;IACH,6BAEC;IAED;;;;;OAKG;IACH,+BAJW,MAAM,YACN,MAAM,GAAC,IAAI,YACX,MAAM,GAAC,IAAI,QAsCrB;IAED;;OAEG;IACH,eAmCC;IA4CD;;;OAGG;IACH,UAFW,KAAK,QAMf;;CA4CF"}
|
|
@@ -1 +1,90 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @component pds-splitpanel
|
|
3
|
+
* @description A split panel component that supports horizontal and vertical layouts, resizable panels, and a responsive mobile view.
|
|
4
|
+
*
|
|
5
|
+
* @attr {String} layout - The layout direction of the panels. Can be "horizontal" or "vertical". Defaults to "horizontal".
|
|
6
|
+
* @attr {String} defaultsplit - The initial size of the primary (left/top) panel. Defaults to "450px".
|
|
7
|
+
* @attr {Number} breakpoint - The viewport width in pixels below which the component switches to mobile view. Defaults to 1024.
|
|
8
|
+
* @attr {Boolean} open - Controls the visibility of the primary panel in mobile view.
|
|
9
|
+
*
|
|
10
|
+
* @prop {String} layout - Gets or sets the layout direction.
|
|
11
|
+
* @prop {String} defaultSplit - Gets or sets the default split size.
|
|
12
|
+
* @prop {Number} breakpoint - Gets or sets the mobile breakpoint.
|
|
13
|
+
* @prop {Boolean} open - Gets or sets the open state of the mobile panel.
|
|
14
|
+
*
|
|
15
|
+
* @slot left - Content for the left (or top) panel.
|
|
16
|
+
* @slot right - Content for the right (or bottom) panel.
|
|
17
|
+
*
|
|
18
|
+
* @csspart toggle - The mobile toggle button.
|
|
19
|
+
* @csspart splitter - The draggable splitter bar between panels.
|
|
20
|
+
*
|
|
21
|
+
* @cssprop --left-width - Width of the left panel in horizontal layout.
|
|
22
|
+
* @cssprop --color-border - Color of the splitter bar.
|
|
23
|
+
* @cssprop --color-surface-base - Background color of the left panel in mobile view.
|
|
24
|
+
* @cssprop --transition-fast - Transition duration for the mobile panel animation.
|
|
25
|
+
* @cssprop --spacing-4 - Positioning spacing for the mobile toggle button.
|
|
26
|
+
* @cssprop --spacing-1 - Padding for the mobile toggle button.
|
|
27
|
+
* @cssprop --spacing-2 - Padding for the mobile toggle button.
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* <caption>Basic horizontal split</caption>
|
|
31
|
+
* <pds-splitpanel>
|
|
32
|
+
* <div slot="left">Left Panel Content</div>
|
|
33
|
+
* <div slot="right">Right Panel Content</div>
|
|
34
|
+
* </pds-splitpanel>
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* <caption>Vertical split with custom default size</caption>
|
|
38
|
+
* <pds-splitpanel layout="vertical" defaultsplit="200px">
|
|
39
|
+
* <div slot="left">Top Panel Content</div>
|
|
40
|
+
* <div slot="right">Bottom Panel Content</div>
|
|
41
|
+
* </pds-splitpanel>
|
|
42
|
+
*/
|
|
43
|
+
declare class PdsSplitpanel extends HTMLElement {
|
|
44
|
+
static get observedAttributes(): string[];
|
|
45
|
+
_layout: string;
|
|
46
|
+
_defaultSplit: string;
|
|
47
|
+
_breakpoint: number;
|
|
48
|
+
_open: boolean;
|
|
49
|
+
isDragging: boolean;
|
|
50
|
+
_onResize: () => void;
|
|
51
|
+
_onMouseMove: (e: any) => void;
|
|
52
|
+
_onMouseUp: () => void;
|
|
53
|
+
connectedCallback(): void;
|
|
54
|
+
$leftWrap: Element;
|
|
55
|
+
$rightWrap: Element;
|
|
56
|
+
$splitter: Element;
|
|
57
|
+
$toggleBtn: HTMLElement;
|
|
58
|
+
$overlay: Element;
|
|
59
|
+
$icon: Element;
|
|
60
|
+
disconnectedCallback(): void;
|
|
61
|
+
attributeChangedCallback(name: any, _oldVal: any, newVal: any): void;
|
|
62
|
+
set layout(v: string);
|
|
63
|
+
get layout(): string;
|
|
64
|
+
set defaultSplit(v: string);
|
|
65
|
+
get defaultSplit(): string;
|
|
66
|
+
set breakpoint(v: number);
|
|
67
|
+
get breakpoint(): number;
|
|
68
|
+
set open(v: boolean);
|
|
69
|
+
get open(): boolean;
|
|
70
|
+
_render(): void;
|
|
71
|
+
_adoptStyles(): Promise<void>;
|
|
72
|
+
/**
|
|
73
|
+
* Updates the layout based on the current viewport width and breakpoint.
|
|
74
|
+
* Toggles mobile mode and adjusts panel styles.
|
|
75
|
+
*/
|
|
76
|
+
updateLayout(): void;
|
|
77
|
+
startDragging(event: any): void;
|
|
78
|
+
drag(event: any): void;
|
|
79
|
+
stopDragging(): void;
|
|
80
|
+
/**
|
|
81
|
+
* Toggles the visibility of the primary panel in mobile view.
|
|
82
|
+
*/
|
|
83
|
+
toggleMobileView(): void;
|
|
84
|
+
/**
|
|
85
|
+
* Closes the primary panel in mobile view.
|
|
86
|
+
*/
|
|
87
|
+
closeMobileView(): void;
|
|
88
|
+
_updateToggleButton(): void;
|
|
89
|
+
}
|
|
1
90
|
//# sourceMappingURL=pds-splitpanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pds-splitpanel.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-splitpanel.js"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"pds-splitpanel.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-splitpanel.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH;IACI,0CAEC;IAOC,gBAA2B;IAC3B,sBAA4B;IAC5B,oBAAuB;IACvB,eAAsC;IACtC,oBAAuB;IAGvB,sBAA0C;IAC1C,+BAAuC;IACvC,uBAA2C;IAK7C,0BA6BC;IAlBC,mBAA6D;IAC7D,oBAA+D;IAC/D,mBAA2D;IAC3D,wBAAiE;IACjE,kBAAgE;IAChE,eAAsD;IAexD,6BAOC;IAED,qEAmBC;IAMD,sBAEC;IALD,qBAEC;IAQD,4BAEC;IALD,2BAEC;IAQD,0BAEC;IALD,yBAEC;IAQD,qBAMC;IATD,oBAEC;IAUD,gBAmBC;IAED,8BAqIC;IAED;;;OAGG;IACH,qBAuBC;IAED,gCAMC;IAED,uBAiBC;IAED,qBAIC;IAED;;OAEG;IACH,yBAEC;IAED;;OAEG;IACH,wBAEC;IAED,4BAIC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pds-enhancers.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-enhancers.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pds-enhancers.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-enhancers.js"],"names":[],"mappings":"AA2XA;;;;;IAGI;AAEJ;;;;IAA2D;AA9X3D,mDAeC"}
|