@prioticket/design-system-web 1.4.7 → 1.5.0-beta.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.
Files changed (10) hide show
  1. package/COMPONENT-DOCUMENTATION.md +29 -1
  2. package/component-documentation.json +79 -2
  3. package/custom-elements.json +550 -0
  4. package/dist/components/pd-date-range-picker.cjs.js +406 -0
  5. package/dist/components/pd-date-range-picker.es.js +653 -0
  6. package/dist/prioticket-design-system-web.cjs.js +1 -1
  7. package/dist/prioticket-design-system-web.es.js +18 -16
  8. package/dist/types/components/pd-date-range-picker.d.ts +76 -0
  9. package/dist/types/index.d.ts +1 -0
  10. package/package.json +1 -1
package/COMPONENT-DOCUMENTATION.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @prioticket/design-system-web Components
2
2
 
3
- Version: 1.4.7
3
+ Version: 1.5.0-beta.3
4
4
 
5
5
  ### <pd-box> (PdBox)
6
6
 
@@ -114,6 +114,34 @@ No description available.
114
114
  | `chip-click` | `CustomEvent` | |
115
115
  | `chip-remove` | `CustomEvent` | |
116
116
 
117
+ ### <pd-date-range-picker> (PdDateRangePicker)
118
+
119
+ A dual-calendar date range picker component.
120
+
121
+ **Properties**
122
+
123
+ | Property | Attribute | Type | Default | Description |
124
+ |----------|-----------|------|---------|-------------|
125
+ | `startDate` | `start-date` | `unknown` | | Start date in ISO format (YYYY-MM-DD). Default: 1 month before yesterday |
126
+ | `endDate` | `end-date` | `unknown` | | End date in ISO format (YYYY-MM-DD). Default: yesterday |
127
+ | `min` | `min` | `string` | `''` | Minimum selectable date in ISO format |
128
+ | `max` | `max` | `string` | `''` | Maximum selectable date in ISO format |
129
+ | `locale` | `locale` | `unknown` | | Locale for month/day names (defaults to browser locale) |
130
+ | `firstDayOfWeek` | `first-day-of-week` | `number` | `1` | First day of the week: 0=Sunday, 1=Monday (default: 1) |
131
+ | `disabled` | `disabled` | `boolean` | `false` | If true, the picker is disabled |
132
+
133
+ **Events**
134
+
135
+ | Event | Type | Description |
136
+ |-------|------|-------------|
137
+ | `pd-date-range-change` | `CustomEvent` | Fired when the selected date range changes. |
138
+
139
+ **CSS Custom Properties**
140
+
141
+ | Property | Description |
142
+ |----------|-------------|
143
+ | `--pd-date-picker-gap` | Gap between the two calendars (default: 24px) |
144
+
117
145
  ### <pd-dialog> (PdDialog)
118
146
 
119
147
  The Prioticket dialog component using Material Web Components.
package/component-documentation.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "package": {
3
3
  "name": "@prioticket/design-system-web",
4
- "version": "1.4.7",
4
+ "version": "1.5.0-beta.3",
5
5
  "description": "",
6
6
  "installation": "npm install @prioticket/design-system-web"
7
7
  },
8
- "generatedAt": "2026-01-20T17:04:45.006Z",
8
+ "generatedAt": "2026-02-13T12:24:05.604Z",
9
9
  "components": {
10
10
  "pd-box": {
11
11
  "tagName": "pd-box",
@@ -332,6 +332,83 @@
332
332
  "slots": [],
333
333
  "cssProperties": []
334
334
  },
335
+ "pd-date-range-picker": {
336
+ "tagName": "pd-date-range-picker",
337
+ "className": "PdDateRangePicker",
338
+ "description": "A dual-calendar date range picker component.",
339
+ "properties": [
340
+ {
341
+ "name": "startDate",
342
+ "type": "unknown",
343
+ "attribute": "start-date",
344
+ "description": "Start date in ISO format (YYYY-MM-DD). Default: 1 month before yesterday",
345
+ "default": null,
346
+ "required": false
347
+ },
348
+ {
349
+ "name": "endDate",
350
+ "type": "unknown",
351
+ "attribute": "end-date",
352
+ "description": "End date in ISO format (YYYY-MM-DD). Default: yesterday",
353
+ "default": null,
354
+ "required": false
355
+ },
356
+ {
357
+ "name": "min",
358
+ "type": "string",
359
+ "attribute": "min",
360
+ "description": "Minimum selectable date in ISO format",
361
+ "default": "''",
362
+ "required": false
363
+ },
364
+ {
365
+ "name": "max",
366
+ "type": "string",
367
+ "attribute": "max",
368
+ "description": "Maximum selectable date in ISO format",
369
+ "default": "''",
370
+ "required": false
371
+ },
372
+ {
373
+ "name": "locale",
374
+ "type": "unknown",
375
+ "attribute": "locale",
376
+ "description": "Locale for month/day names (defaults to browser locale)",
377
+ "default": null,
378
+ "required": false
379
+ },
380
+ {
381
+ "name": "firstDayOfWeek",
382
+ "type": "number",
383
+ "attribute": "first-day-of-week",
384
+ "description": "First day of the week: 0=Sunday, 1=Monday (default: 1)",
385
+ "default": "1",
386
+ "required": false
387
+ },
388
+ {
389
+ "name": "disabled",
390
+ "type": "boolean",
391
+ "attribute": "disabled",
392
+ "description": "If true, the picker is disabled",
393
+ "default": "false",
394
+ "required": false
395
+ }
396
+ ],
397
+ "events": [
398
+ {
399
+ "name": "pd-date-range-change",
400
+ "type": "CustomEvent",
401
+ "description": "Fired when the selected date range changes."
402
+ }
403
+ ],
404
+ "slots": [],
405
+ "cssProperties": [
406
+ {
407
+ "name": "--pd-date-picker-gap",
408
+ "description": "Gap between the two calendars (default: 24px)"
409
+ }
410
+ ]
411
+ },
335
412
  "pd-dialog": {
336
413
  "tagName": "pd-dialog",
337
414
  "className": "PdDialog",
package/custom-elements.json CHANGED
@@ -196,6 +196,14 @@
196
196
  "name": "*",
197
197
  "package": "./components/pd-table"
198
198
  }
199
+ },
200
+ {
201
+ "kind": "js",
202
+ "name": "*",
203
+ "declaration": {
204
+ "name": "*",
205
+ "package": "./components/pd-date-range-picker"
206
+ }
199
207
  }
200
208
  ]
201
209
  },
@@ -1042,6 +1050,548 @@
1042
1050
  }
1043
1051
  ]
1044
1052
  },
1053
+ {
1054
+ "kind": "javascript-module",
1055
+ "path": "src/components/pd-date-range-picker.ts",
1056
+ "declarations": [
1057
+ {
1058
+ "kind": "class",
1059
+ "description": "",
1060
+ "name": "PdDateRangePicker",
1061
+ "cssProperties": [
1062
+ {
1063
+ "description": "Gap between the two calendars (default: 24px)",
1064
+ "name": "--pd-date-picker-gap"
1065
+ }
1066
+ ],
1067
+ "members": [
1068
+ {
1069
+ "kind": "field",
1070
+ "name": "startDate",
1071
+ "description": "Start date in ISO format (YYYY-MM-DD). Default: 1 month before yesterday",
1072
+ "attribute": "start-date"
1073
+ },
1074
+ {
1075
+ "kind": "field",
1076
+ "name": "endDate",
1077
+ "description": "End date in ISO format (YYYY-MM-DD). Default: yesterday",
1078
+ "attribute": "end-date"
1079
+ },
1080
+ {
1081
+ "kind": "field",
1082
+ "name": "min",
1083
+ "type": {
1084
+ "text": "string"
1085
+ },
1086
+ "default": "''",
1087
+ "description": "Minimum selectable date in ISO format",
1088
+ "attribute": "min"
1089
+ },
1090
+ {
1091
+ "kind": "field",
1092
+ "name": "max",
1093
+ "type": {
1094
+ "text": "string"
1095
+ },
1096
+ "default": "''",
1097
+ "description": "Maximum selectable date in ISO format",
1098
+ "attribute": "max"
1099
+ },
1100
+ {
1101
+ "kind": "field",
1102
+ "name": "locale",
1103
+ "description": "Locale for month/day names (defaults to browser locale)",
1104
+ "attribute": "locale"
1105
+ },
1106
+ {
1107
+ "kind": "field",
1108
+ "name": "firstDayOfWeek",
1109
+ "type": {
1110
+ "text": "number"
1111
+ },
1112
+ "default": "1",
1113
+ "description": "First day of the week: 0=Sunday, 1=Monday (default: 1)",
1114
+ "attribute": "first-day-of-week"
1115
+ },
1116
+ {
1117
+ "kind": "field",
1118
+ "name": "disabled",
1119
+ "type": {
1120
+ "text": "boolean"
1121
+ },
1122
+ "default": "false",
1123
+ "description": "If true, the picker is disabled",
1124
+ "attribute": "disabled",
1125
+ "reflects": true
1126
+ },
1127
+ {
1128
+ "kind": "field",
1129
+ "name": "_leftYear",
1130
+ "privacy": "private",
1131
+ "description": "The month/year shown on the left calendar"
1132
+ },
1133
+ {
1134
+ "kind": "field",
1135
+ "name": "_leftMonth",
1136
+ "privacy": "private"
1137
+ },
1138
+ {
1139
+ "kind": "field",
1140
+ "name": "_rightYear",
1141
+ "privacy": "private",
1142
+ "description": "The month/year shown on the right calendar"
1143
+ },
1144
+ {
1145
+ "kind": "field",
1146
+ "name": "_rightMonth",
1147
+ "privacy": "private"
1148
+ },
1149
+ {
1150
+ "kind": "field",
1151
+ "name": "_leftDropdownOpen",
1152
+ "type": {
1153
+ "text": "boolean"
1154
+ },
1155
+ "privacy": "private",
1156
+ "default": "false",
1157
+ "description": "Whether the left month/year dropdown is open"
1158
+ },
1159
+ {
1160
+ "kind": "field",
1161
+ "name": "_rightDropdownOpen",
1162
+ "type": {
1163
+ "text": "boolean"
1164
+ },
1165
+ "privacy": "private",
1166
+ "default": "false",
1167
+ "description": "Whether the right month/year dropdown is open"
1168
+ },
1169
+ {
1170
+ "kind": "field",
1171
+ "name": "_lastAmbiguousAdjust",
1172
+ "type": {
1173
+ "text": "'start' | 'end'"
1174
+ },
1175
+ "privacy": "private",
1176
+ "default": "'start'",
1177
+ "description": "Tracks which side was last adjusted on an \"ambiguous\" click (inside range)"
1178
+ },
1179
+ {
1180
+ "kind": "field",
1181
+ "name": "_dropdownPendingYear",
1182
+ "type": {
1183
+ "text": "number | null"
1184
+ },
1185
+ "privacy": "private",
1186
+ "default": "null",
1187
+ "description": "When a year is selected in the dropdown, the month becomes \"pending\"\nso the user is prompted to also pick a month before the dropdown closes.\nStores the temporarily selected year while waiting for month confirmation."
1188
+ },
1189
+ {
1190
+ "kind": "field",
1191
+ "name": "_dropdownSide",
1192
+ "type": {
1193
+ "text": "'left' | 'right' | null"
1194
+ },
1195
+ "privacy": "private",
1196
+ "default": "null"
1197
+ },
1198
+ {
1199
+ "kind": "field",
1200
+ "name": "_boundDocClick",
1201
+ "privacy": "private"
1202
+ },
1203
+ {
1204
+ "kind": "method",
1205
+ "name": "_handleDocClick",
1206
+ "privacy": "private",
1207
+ "return": {
1208
+ "type": {
1209
+ "text": "void"
1210
+ }
1211
+ },
1212
+ "parameters": [
1213
+ {
1214
+ "name": "e",
1215
+ "type": {
1216
+ "text": "MouseEvent"
1217
+ }
1218
+ }
1219
+ ],
1220
+ "description": "Close dropdown when clicking outside the host element entirely"
1221
+ },
1222
+ {
1223
+ "kind": "method",
1224
+ "name": "_closeAllDropdowns",
1225
+ "privacy": "private",
1226
+ "return": {
1227
+ "type": {
1228
+ "text": "void"
1229
+ }
1230
+ }
1231
+ },
1232
+ {
1233
+ "kind": "method",
1234
+ "name": "_syncCalendarsToProps",
1235
+ "privacy": "private",
1236
+ "return": {
1237
+ "type": {
1238
+ "text": "void"
1239
+ }
1240
+ },
1241
+ "description": "Position the left/right calendars to show the current start/end months"
1242
+ },
1243
+ {
1244
+ "kind": "field",
1245
+ "name": "_minYear",
1246
+ "type": {
1247
+ "text": "number"
1248
+ },
1249
+ "privacy": "private",
1250
+ "description": "Default year boundaries when no min/max is set",
1251
+ "readonly": true
1252
+ },
1253
+ {
1254
+ "kind": "field",
1255
+ "name": "_maxYear",
1256
+ "type": {
1257
+ "text": "number"
1258
+ },
1259
+ "privacy": "private",
1260
+ "readonly": true
1261
+ },
1262
+ {
1263
+ "kind": "field",
1264
+ "name": "_minDate",
1265
+ "type": {
1266
+ "text": "Date | null"
1267
+ },
1268
+ "privacy": "private",
1269
+ "readonly": true
1270
+ },
1271
+ {
1272
+ "kind": "field",
1273
+ "name": "_maxDate",
1274
+ "type": {
1275
+ "text": "Date | null"
1276
+ },
1277
+ "privacy": "private",
1278
+ "readonly": true
1279
+ },
1280
+ {
1281
+ "kind": "method",
1282
+ "name": "_handleDayClick",
1283
+ "privacy": "private",
1284
+ "return": {
1285
+ "type": {
1286
+ "text": "void"
1287
+ }
1288
+ },
1289
+ "parameters": [
1290
+ {
1291
+ "name": "day",
1292
+ "type": {
1293
+ "text": "number"
1294
+ }
1295
+ },
1296
+ {
1297
+ "name": "calendarYear",
1298
+ "type": {
1299
+ "text": "number"
1300
+ }
1301
+ },
1302
+ {
1303
+ "name": "calendarMonth",
1304
+ "type": {
1305
+ "text": "number"
1306
+ }
1307
+ }
1308
+ ]
1309
+ },
1310
+ {
1311
+ "kind": "method",
1312
+ "name": "_prevMonth",
1313
+ "privacy": "private",
1314
+ "return": {
1315
+ "type": {
1316
+ "text": "void"
1317
+ }
1318
+ },
1319
+ "parameters": [
1320
+ {
1321
+ "name": "side",
1322
+ "type": {
1323
+ "text": "'left' | 'right'"
1324
+ }
1325
+ }
1326
+ ]
1327
+ },
1328
+ {
1329
+ "kind": "method",
1330
+ "name": "_nextMonth",
1331
+ "privacy": "private",
1332
+ "return": {
1333
+ "type": {
1334
+ "text": "void"
1335
+ }
1336
+ },
1337
+ "parameters": [
1338
+ {
1339
+ "name": "side",
1340
+ "type": {
1341
+ "text": "'left' | 'right'"
1342
+ }
1343
+ }
1344
+ ]
1345
+ },
1346
+ {
1347
+ "kind": "method",
1348
+ "name": "_selectMonth",
1349
+ "privacy": "private",
1350
+ "return": {
1351
+ "type": {
1352
+ "text": "void"
1353
+ }
1354
+ },
1355
+ "parameters": [
1356
+ {
1357
+ "name": "side",
1358
+ "type": {
1359
+ "text": "'left' | 'right'"
1360
+ }
1361
+ },
1362
+ {
1363
+ "name": "month",
1364
+ "type": {
1365
+ "text": "number"
1366
+ }
1367
+ }
1368
+ ],
1369
+ "description": "Called when a month is clicked in the dropdown"
1370
+ },
1371
+ {
1372
+ "kind": "method",
1373
+ "name": "_selectYear",
1374
+ "privacy": "private",
1375
+ "return": {
1376
+ "type": {
1377
+ "text": "void"
1378
+ }
1379
+ },
1380
+ "parameters": [
1381
+ {
1382
+ "name": "side",
1383
+ "type": {
1384
+ "text": "'left' | 'right'"
1385
+ }
1386
+ },
1387
+ {
1388
+ "name": "year",
1389
+ "type": {
1390
+ "text": "number"
1391
+ }
1392
+ }
1393
+ ],
1394
+ "description": "Called when a year is clicked in the dropdown — keeps dropdown open, deselects month"
1395
+ },
1396
+ {
1397
+ "kind": "method",
1398
+ "name": "_toggleDropdown",
1399
+ "privacy": "private",
1400
+ "return": {
1401
+ "type": {
1402
+ "text": "void"
1403
+ }
1404
+ },
1405
+ "parameters": [
1406
+ {
1407
+ "name": "side",
1408
+ "type": {
1409
+ "text": "'left' | 'right'"
1410
+ }
1411
+ }
1412
+ ]
1413
+ },
1414
+ {
1415
+ "kind": "method",
1416
+ "name": "_renderCalendar",
1417
+ "privacy": "private",
1418
+ "return": {
1419
+ "type": {
1420
+ "text": "TemplateResult"
1421
+ }
1422
+ },
1423
+ "parameters": [
1424
+ {
1425
+ "name": "side",
1426
+ "type": {
1427
+ "text": "'left' | 'right'"
1428
+ }
1429
+ },
1430
+ {
1431
+ "name": "year",
1432
+ "type": {
1433
+ "text": "number"
1434
+ }
1435
+ },
1436
+ {
1437
+ "name": "month",
1438
+ "type": {
1439
+ "text": "number"
1440
+ }
1441
+ },
1442
+ {
1443
+ "name": "dropdownOpen",
1444
+ "type": {
1445
+ "text": "boolean"
1446
+ }
1447
+ }
1448
+ ]
1449
+ },
1450
+ {
1451
+ "kind": "method",
1452
+ "name": "_renderMonthYearDropdown",
1453
+ "privacy": "private",
1454
+ "return": {
1455
+ "type": {
1456
+ "text": "TemplateResult"
1457
+ }
1458
+ },
1459
+ "parameters": [
1460
+ {
1461
+ "name": "side",
1462
+ "type": {
1463
+ "text": "'left' | 'right'"
1464
+ }
1465
+ },
1466
+ {
1467
+ "name": "currentMonth",
1468
+ "type": {
1469
+ "text": "number"
1470
+ }
1471
+ },
1472
+ {
1473
+ "name": "currentYear",
1474
+ "type": {
1475
+ "text": "number"
1476
+ }
1477
+ }
1478
+ ]
1479
+ },
1480
+ {
1481
+ "kind": "method",
1482
+ "name": "_renderDayGrid",
1483
+ "privacy": "private",
1484
+ "return": {
1485
+ "type": {
1486
+ "text": "TemplateResult"
1487
+ }
1488
+ },
1489
+ "parameters": [
1490
+ {
1491
+ "name": "year",
1492
+ "type": {
1493
+ "text": "number"
1494
+ }
1495
+ },
1496
+ {
1497
+ "name": "month",
1498
+ "type": {
1499
+ "text": "number"
1500
+ }
1501
+ }
1502
+ ]
1503
+ }
1504
+ ],
1505
+ "events": [
1506
+ {
1507
+ "name": "pd-date-range-change",
1508
+ "type": {
1509
+ "text": "CustomEvent"
1510
+ },
1511
+ "description": "Fired when the selected date range changes."
1512
+ }
1513
+ ],
1514
+ "attributes": [
1515
+ {
1516
+ "name": "start-date",
1517
+ "description": "Start date in ISO format (YYYY-MM-DD). Default: 1 month before yesterday",
1518
+ "fieldName": "startDate"
1519
+ },
1520
+ {
1521
+ "name": "end-date",
1522
+ "description": "End date in ISO format (YYYY-MM-DD). Default: yesterday",
1523
+ "fieldName": "endDate"
1524
+ },
1525
+ {
1526
+ "name": "min",
1527
+ "type": {
1528
+ "text": "string"
1529
+ },
1530
+ "default": "''",
1531
+ "description": "Minimum selectable date in ISO format",
1532
+ "fieldName": "min"
1533
+ },
1534
+ {
1535
+ "name": "max",
1536
+ "type": {
1537
+ "text": "string"
1538
+ },
1539
+ "default": "''",
1540
+ "description": "Maximum selectable date in ISO format",
1541
+ "fieldName": "max"
1542
+ },
1543
+ {
1544
+ "name": "locale",
1545
+ "description": "Locale for month/day names (defaults to browser locale)",
1546
+ "fieldName": "locale"
1547
+ },
1548
+ {
1549
+ "name": "first-day-of-week",
1550
+ "type": {
1551
+ "text": "number"
1552
+ },
1553
+ "default": "1",
1554
+ "description": "First day of the week: 0=Sunday, 1=Monday (default: 1)",
1555
+ "fieldName": "firstDayOfWeek"
1556
+ },
1557
+ {
1558
+ "name": "disabled",
1559
+ "type": {
1560
+ "text": "boolean"
1561
+ },
1562
+ "default": "false",
1563
+ "description": "If true, the picker is disabled",
1564
+ "fieldName": "disabled"
1565
+ }
1566
+ ],
1567
+ "superclass": {
1568
+ "name": "LitElement",
1569
+ "package": "lit"
1570
+ },
1571
+ "summary": "A dual-calendar date range picker component.",
1572
+ "tagName": "pd-date-range-picker",
1573
+ "customElement": true
1574
+ }
1575
+ ],
1576
+ "exports": [
1577
+ {
1578
+ "kind": "js",
1579
+ "name": "PdDateRangePicker",
1580
+ "declaration": {
1581
+ "name": "PdDateRangePicker",
1582
+ "module": "src/components/pd-date-range-picker.ts"
1583
+ }
1584
+ },
1585
+ {
1586
+ "kind": "custom-element-definition",
1587
+ "name": "pd-date-range-picker",
1588
+ "declaration": {
1589
+ "name": "PdDateRangePicker",
1590
+ "module": "src/components/pd-date-range-picker.ts"
1591
+ }
1592
+ }
1593
+ ]
1594
+ },
1045
1595
  {
1046
1596
  "kind": "javascript-module",
1047
1597
  "path": "src/components/pd-dialog.ts",