@pure-ds/storybook 0.1.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/.storybook/addons/description/preview.js +15 -0
- package/.storybook/addons/description/register.js +60 -0
- package/.storybook/addons/html-preview/Panel.jsx +327 -0
- package/.storybook/addons/html-preview/constants.js +6 -0
- package/.storybook/addons/html-preview/preview.js +178 -0
- package/.storybook/addons/html-preview/register.js +16 -0
- package/.storybook/addons/pds-configurator/SearchTool.js +44 -0
- package/.storybook/addons/pds-configurator/Tool.js +30 -0
- package/.storybook/addons/pds-configurator/constants.js +9 -0
- package/.storybook/addons/pds-configurator/preview.js +159 -0
- package/.storybook/addons/pds-configurator/register.js +24 -0
- package/.storybook/docs.css +35 -0
- package/.storybook/htmlPreview.css +103 -0
- package/.storybook/htmlPreview.js +271 -0
- package/.storybook/main.js +160 -0
- package/.storybook/preview-body.html +48 -0
- package/.storybook/preview-head.html +11 -0
- package/.storybook/preview.js +1563 -0
- package/README.md +266 -0
- package/bin/index.js +40 -0
- package/dist/pds-reference.json +2101 -0
- package/package.json +45 -0
- package/pds.config.js +6 -0
- package/public/assets/css/app.css +1216 -0
- package/public/assets/data/auto-design-advanced.json +704 -0
- package/public/assets/data/auto-design-simple.json +123 -0
- package/public/assets/img/icon-512x512.png +0 -0
- package/public/assets/img/logo-trans.png +0 -0
- package/public/assets/img/logo.png +0 -0
- package/public/assets/js/app.js +15088 -0
- package/public/assets/js/app.js.map +7 -0
- package/public/assets/js/lit.js +1176 -0
- package/public/assets/js/lit.js.map +7 -0
- package/public/assets/js/pds.js +9801 -0
- package/public/assets/js/pds.js.map +7 -0
- package/public/assets/pds/components/pds-calendar.js +837 -0
- package/public/assets/pds/components/pds-drawer.js +857 -0
- package/public/assets/pds/components/pds-icon.js +338 -0
- package/public/assets/pds/components/pds-jsonform.js +1775 -0
- package/public/assets/pds/components/pds-richtext.js +1035 -0
- package/public/assets/pds/components/pds-scrollrow.js +331 -0
- package/public/assets/pds/components/pds-splitpanel.js +401 -0
- package/public/assets/pds/components/pds-tabstrip.js +251 -0
- package/public/assets/pds/components/pds-toaster.js +446 -0
- package/public/assets/pds/components/pds-upload.js +657 -0
- package/public/assets/pds/custom-elements.json +2003 -0
- package/public/assets/pds/icons/pds-icons.svg +498 -0
- package/public/assets/pds/pds-css-complete.json +1861 -0
- package/public/assets/pds/pds-runtime-config.json +11 -0
- package/public/assets/pds/pds.css-data.json +2152 -0
- package/public/assets/pds/styles/pds-components.css +1944 -0
- package/public/assets/pds/styles/pds-components.css.js +3895 -0
- package/public/assets/pds/styles/pds-primitives.css +352 -0
- package/public/assets/pds/styles/pds-primitives.css.js +711 -0
- package/public/assets/pds/styles/pds-styles.css +3761 -0
- package/public/assets/pds/styles/pds-styles.css.js +7529 -0
- package/public/assets/pds/styles/pds-tokens.css +699 -0
- package/public/assets/pds/styles/pds-tokens.css.js +1405 -0
- package/public/assets/pds/styles/pds-utilities.css +763 -0
- package/public/assets/pds/styles/pds-utilities.css.js +1533 -0
- package/public/assets/pds/vscode-custom-data.json +824 -0
- package/scripts/build-pds-reference.mjs +807 -0
- package/scripts/generate-stories.js +542 -0
- package/scripts/package-build.js +86 -0
- package/src/js/app.js +17 -0
- package/src/js/common/ask.js +208 -0
- package/src/js/common/common.js +20 -0
- package/src/js/common/font-loader.js +200 -0
- package/src/js/common/msg.js +90 -0
- package/src/js/lit.js +40 -0
- package/src/js/pds-core/pds-config.js +1162 -0
- package/src/js/pds-core/pds-enhancer-metadata.js +75 -0
- package/src/js/pds-core/pds-enhancers.js +357 -0
- package/src/js/pds-core/pds-enums.js +86 -0
- package/src/js/pds-core/pds-generator.js +5317 -0
- package/src/js/pds-core/pds-ontology.js +256 -0
- package/src/js/pds-core/pds-paths.js +109 -0
- package/src/js/pds-core/pds-query.js +571 -0
- package/src/js/pds-core/pds-registry.js +129 -0
- package/src/js/pds-core/pds.d.ts +129 -0
- package/src/js/pds.d.ts +408 -0
- package/src/js/pds.js +1579 -0
- package/src/pds-core/pds-api.js +105 -0
- package/stories/GettingStarted.md +96 -0
- package/stories/GettingStarted.stories.js +144 -0
- package/stories/WhatIsPDS.md +194 -0
- package/stories/WhatIsPDS.stories.js +144 -0
- package/stories/components/PdsCalendar.stories.js +263 -0
- package/stories/components/PdsDrawer.stories.js +623 -0
- package/stories/components/PdsIcon.stories.js +78 -0
- package/stories/components/PdsJsonform.stories.js +1444 -0
- package/stories/components/PdsRichtext.stories.js +367 -0
- package/stories/components/PdsScrollrow.stories.js +140 -0
- package/stories/components/PdsSplitpanel.stories.js +502 -0
- package/stories/components/PdsTabstrip.stories.js +442 -0
- package/stories/components/PdsToaster.stories.js +186 -0
- package/stories/components/PdsUpload.stories.js +66 -0
- package/stories/enhancements/Dropdowns.stories.js +185 -0
- package/stories/enhancements/InteractiveStates.stories.js +625 -0
- package/stories/enhancements/MeshGradients.stories.js +320 -0
- package/stories/enhancements/OpenGroups.stories.js +227 -0
- package/stories/enhancements/RangeSliders.stories.js +232 -0
- package/stories/enhancements/RequiredFields.stories.js +189 -0
- package/stories/enhancements/Toggles.stories.js +167 -0
- package/stories/foundations/Colors.stories.js +283 -0
- package/stories/foundations/Icons.stories.js +305 -0
- package/stories/foundations/SmartSurfaces.stories.js +367 -0
- package/stories/foundations/Spacing.stories.js +175 -0
- package/stories/foundations/Typography.stories.js +960 -0
- package/stories/foundations/ZIndex.stories.js +325 -0
- package/stories/patterns/BorderEffects.stories.js +72 -0
- package/stories/patterns/Layout.stories.js +99 -0
- package/stories/patterns/Utilities.stories.js +107 -0
- package/stories/primitives/Accordion.stories.js +359 -0
- package/stories/primitives/Alerts.stories.js +64 -0
- package/stories/primitives/Badges.stories.js +183 -0
- package/stories/primitives/Buttons.stories.js +229 -0
- package/stories/primitives/Cards.stories.js +353 -0
- package/stories/primitives/FormGroups.stories.js +569 -0
- package/stories/primitives/Forms.stories.js +131 -0
- package/stories/primitives/Media.stories.js +203 -0
- package/stories/primitives/Tables.stories.js +232 -0
- package/stories/reference/ReferenceCatalog.stories.js +28 -0
- package/stories/reference/reference-catalog.js +413 -0
- package/stories/reference/reference-docs.js +302 -0
- package/stories/reference/reference-helpers.js +310 -0
- package/stories/utilities/GridSystem.stories.js +208 -0
- package/stories/utils/PdsAsk.stories.js +420 -0
- package/stories/utils/toast-utils.js +148 -0
|
@@ -0,0 +1,2101 @@
|
|
|
1
|
+
{
|
|
2
|
+
"generatedAt": "2025-12-16T11:37:45.268Z",
|
|
3
|
+
"sources": {
|
|
4
|
+
"customElements": "custom-elements.json",
|
|
5
|
+
"ontology": "src\\js\\pds-core\\pds-ontology.js",
|
|
6
|
+
"storiesRoot": "stories",
|
|
7
|
+
"enhancers": "src\\js\\pds-core\\pds-enhancers.js"
|
|
8
|
+
},
|
|
9
|
+
"components": {
|
|
10
|
+
"pds-calendar": {
|
|
11
|
+
"tag": "pds-calendar",
|
|
12
|
+
"className": "anonymous_0",
|
|
13
|
+
"displayName": "Pds Calendar",
|
|
14
|
+
"storyTitle": "Components/Pds Calendar",
|
|
15
|
+
"category": "Components",
|
|
16
|
+
"description": null,
|
|
17
|
+
"docsDescription": "A fully featured calendar component with month navigation, event display, and expandable day views",
|
|
18
|
+
"pdsTags": [
|
|
19
|
+
"autodocs"
|
|
20
|
+
],
|
|
21
|
+
"ontology": null,
|
|
22
|
+
"stories": [
|
|
23
|
+
{
|
|
24
|
+
"exportName": "Default",
|
|
25
|
+
"name": "Default",
|
|
26
|
+
"id": "components-pds-calendar--default",
|
|
27
|
+
"tags": [],
|
|
28
|
+
"description": null,
|
|
29
|
+
"source": "stories\\components\\PdsCalendar.stories.js"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"exportName": "DynamicEvents",
|
|
33
|
+
"name": "DynamicEvents",
|
|
34
|
+
"id": "components-pds-calendar--dynamic-events",
|
|
35
|
+
"tags": [],
|
|
36
|
+
"description": null,
|
|
37
|
+
"source": "stories\\components\\PdsCalendar.stories.js"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"exportName": "EventTypes",
|
|
41
|
+
"name": "EventTypes",
|
|
42
|
+
"id": "components-pds-calendar--event-types",
|
|
43
|
+
"tags": [],
|
|
44
|
+
"description": null,
|
|
45
|
+
"source": "stories\\components\\PdsCalendar.stories.js"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"exportName": "WithManyEvents",
|
|
49
|
+
"name": "WithManyEvents",
|
|
50
|
+
"id": "components-pds-calendar--with-many-events",
|
|
51
|
+
"tags": [],
|
|
52
|
+
"description": null,
|
|
53
|
+
"source": "stories\\components\\PdsCalendar.stories.js"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"exportName": "WithSpecificDate",
|
|
57
|
+
"name": "WithSpecificDate",
|
|
58
|
+
"id": "components-pds-calendar--with-specific-date",
|
|
59
|
+
"tags": [],
|
|
60
|
+
"description": null,
|
|
61
|
+
"source": "stories\\components\\PdsCalendar.stories.js"
|
|
62
|
+
}
|
|
63
|
+
],
|
|
64
|
+
"sourceModule": "public/assets/pds/components/pds-calendar.js",
|
|
65
|
+
"superclass": "HTMLElement",
|
|
66
|
+
"attributes": [
|
|
67
|
+
{
|
|
68
|
+
"name": "date",
|
|
69
|
+
"description": null,
|
|
70
|
+
"type": null,
|
|
71
|
+
"default": null,
|
|
72
|
+
"fieldName": null
|
|
73
|
+
}
|
|
74
|
+
],
|
|
75
|
+
"properties": [
|
|
76
|
+
{
|
|
77
|
+
"name": "date",
|
|
78
|
+
"attribute": "date",
|
|
79
|
+
"description": "Gets the current date",
|
|
80
|
+
"type": null,
|
|
81
|
+
"default": null,
|
|
82
|
+
"reflects": false,
|
|
83
|
+
"privacy": "public"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": "dateHelper",
|
|
87
|
+
"attribute": null,
|
|
88
|
+
"description": null,
|
|
89
|
+
"type": null,
|
|
90
|
+
"default": "new DateHelper()",
|
|
91
|
+
"reflects": false,
|
|
92
|
+
"privacy": "public"
|
|
93
|
+
}
|
|
94
|
+
],
|
|
95
|
+
"methods": [
|
|
96
|
+
{
|
|
97
|
+
"name": "refresh",
|
|
98
|
+
"description": "Refreshes the calendar display",
|
|
99
|
+
"parameters": [],
|
|
100
|
+
"return": null
|
|
101
|
+
}
|
|
102
|
+
],
|
|
103
|
+
"events": [
|
|
104
|
+
{
|
|
105
|
+
"name": "month-rendered",
|
|
106
|
+
"description": null,
|
|
107
|
+
"type": "CustomEvent"
|
|
108
|
+
}
|
|
109
|
+
],
|
|
110
|
+
"slots": [],
|
|
111
|
+
"cssParts": [],
|
|
112
|
+
"notes": []
|
|
113
|
+
},
|
|
114
|
+
"pds-drawer": {
|
|
115
|
+
"tag": "pds-drawer",
|
|
116
|
+
"className": "anonymous_0",
|
|
117
|
+
"displayName": "pds-drawer",
|
|
118
|
+
"storyTitle": "PDS/Components/pds-drawer",
|
|
119
|
+
"category": "PDS/Components",
|
|
120
|
+
"description": null,
|
|
121
|
+
"docsDescription": "Slide-out panels from any edge",
|
|
122
|
+
"pdsTags": [],
|
|
123
|
+
"ontology": {
|
|
124
|
+
"id": "pds-drawer",
|
|
125
|
+
"name": "Drawer",
|
|
126
|
+
"selectors": [
|
|
127
|
+
"pds-drawer"
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
"stories": [
|
|
131
|
+
{
|
|
132
|
+
"exportName": "Default",
|
|
133
|
+
"name": "Default",
|
|
134
|
+
"id": "pds-components-pds-drawer--default",
|
|
135
|
+
"tags": [],
|
|
136
|
+
"description": null,
|
|
137
|
+
"source": "stories\\components\\PdsDrawer.stories.js"
|
|
138
|
+
}
|
|
139
|
+
],
|
|
140
|
+
"sourceModule": "public/assets/pds/components/pds-drawer.js",
|
|
141
|
+
"superclass": "HTMLElement",
|
|
142
|
+
"attributes": [
|
|
143
|
+
{
|
|
144
|
+
"name": "open",
|
|
145
|
+
"description": "Controls whether the drawer is open or closed",
|
|
146
|
+
"type": "boolean",
|
|
147
|
+
"default": null,
|
|
148
|
+
"fieldName": "open"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"name": "position",
|
|
152
|
+
"description": "Position of the drawer relative to the viewport",
|
|
153
|
+
"type": "\"bottom\" | \"top\" | \"left\" | \"right\"",
|
|
154
|
+
"default": "\"bottom\"",
|
|
155
|
+
"fieldName": "position"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"name": "drag",
|
|
159
|
+
"description": "Controls drag interaction behavior",
|
|
160
|
+
"type": "\"header\" | \"none\"",
|
|
161
|
+
"default": "\"header\"",
|
|
162
|
+
"fieldName": "drag"
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"name": "max-height",
|
|
166
|
+
"description": "Maximum height for top/bottom positioned drawers (CSS value)",
|
|
167
|
+
"type": "string",
|
|
168
|
+
"default": "\"70vh\"",
|
|
169
|
+
"fieldName": "maxHeight"
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"name": "min-height",
|
|
173
|
+
"description": "Minimum height for top/bottom positioned drawers (CSS value)",
|
|
174
|
+
"type": "string",
|
|
175
|
+
"default": "\"auto\"",
|
|
176
|
+
"fieldName": "minHeight"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "show-close",
|
|
180
|
+
"description": "Whether to show the close button in the header",
|
|
181
|
+
"type": "boolean",
|
|
182
|
+
"default": "false",
|
|
183
|
+
"fieldName": "showClose"
|
|
184
|
+
}
|
|
185
|
+
],
|
|
186
|
+
"properties": [
|
|
187
|
+
{
|
|
188
|
+
"name": "drag",
|
|
189
|
+
"attribute": "drag",
|
|
190
|
+
"description": "Controls drag interaction behavior",
|
|
191
|
+
"type": "\"header\" | \"none\"",
|
|
192
|
+
"default": "\"header\"",
|
|
193
|
+
"reflects": false,
|
|
194
|
+
"privacy": "public"
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"name": "maxHeight",
|
|
198
|
+
"attribute": "max-height",
|
|
199
|
+
"description": "Maximum height for top/bottom positioned drawers (CSS value)",
|
|
200
|
+
"type": "string",
|
|
201
|
+
"default": "\"70vh\"",
|
|
202
|
+
"reflects": false,
|
|
203
|
+
"privacy": "public"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"name": "minHeight",
|
|
207
|
+
"attribute": "min-height",
|
|
208
|
+
"description": "Minimum height for top/bottom positioned drawers (CSS value)",
|
|
209
|
+
"type": "string",
|
|
210
|
+
"default": "\"auto\"",
|
|
211
|
+
"reflects": false,
|
|
212
|
+
"privacy": "public"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "open",
|
|
216
|
+
"attribute": "open",
|
|
217
|
+
"description": "Controls whether the drawer is open or closed",
|
|
218
|
+
"type": "boolean",
|
|
219
|
+
"default": null,
|
|
220
|
+
"reflects": false,
|
|
221
|
+
"privacy": "public"
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
"name": "position",
|
|
225
|
+
"attribute": "position",
|
|
226
|
+
"description": "Position of the drawer relative to the viewport",
|
|
227
|
+
"type": "\"bottom\" | \"top\" | \"left\" | \"right\"",
|
|
228
|
+
"default": "\"bottom\"",
|
|
229
|
+
"reflects": false,
|
|
230
|
+
"privacy": "public"
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "showClose",
|
|
234
|
+
"attribute": "show-close",
|
|
235
|
+
"description": "Whether to show the close button in the header",
|
|
236
|
+
"type": "boolean",
|
|
237
|
+
"default": "false",
|
|
238
|
+
"reflects": false,
|
|
239
|
+
"privacy": "public"
|
|
240
|
+
}
|
|
241
|
+
],
|
|
242
|
+
"methods": [
|
|
243
|
+
{
|
|
244
|
+
"name": "clearContent",
|
|
245
|
+
"description": "Clear drawer content (removes all slotted content)",
|
|
246
|
+
"parameters": [],
|
|
247
|
+
"return": null
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"name": "closeDrawer",
|
|
251
|
+
"description": "Closes the drawer",
|
|
252
|
+
"parameters": [],
|
|
253
|
+
"return": null
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"name": "openDrawer",
|
|
257
|
+
"description": "Opens the drawer",
|
|
258
|
+
"parameters": [],
|
|
259
|
+
"return": null
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"name": "setContent",
|
|
263
|
+
"description": "Set the content of the drawer",
|
|
264
|
+
"parameters": [
|
|
265
|
+
{
|
|
266
|
+
"name": "bodyContent",
|
|
267
|
+
"type": "any|HTMLElement|string",
|
|
268
|
+
"description": "Content for the drawer body"
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"name": "headerContent",
|
|
272
|
+
"type": "any|HTMLElement|string",
|
|
273
|
+
"description": "Optional header content"
|
|
274
|
+
}
|
|
275
|
+
],
|
|
276
|
+
"return": "Promise<void>"
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"name": "show",
|
|
280
|
+
"description": "Configure and open the drawer in one call",
|
|
281
|
+
"parameters": [
|
|
282
|
+
{
|
|
283
|
+
"name": "htmlContent",
|
|
284
|
+
"type": "any|HTMLElement|string",
|
|
285
|
+
"description": "The main content to display"
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"name": "options",
|
|
289
|
+
"type": "@param {any|HTMLElement|string} [options.header] - Header content\n * @param {\"bottom\"|\"top\"|\"left\"|\"right\"} [options.position] - Drawer position\n * @param {string} [options.maxHeight] - Maximum height (CSS value)\n * @param {string} [options.minHeight] - Minimum height (CSS value)\n * @param {boolean} [options.showClose] - Show close button\n * @param {boolean} [options.waitForMedia=true] - Wait for images/videos to load\n * @param {number} [options.mediaTimeout=500] - Media load timeout in ms\n * ",
|
|
290
|
+
"description": "Configuration options"
|
|
291
|
+
}
|
|
292
|
+
],
|
|
293
|
+
"return": "Promise<this>"
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
"name": "toggleDrawer",
|
|
297
|
+
"description": "Toggles the drawer open/closed state",
|
|
298
|
+
"parameters": [],
|
|
299
|
+
"return": null
|
|
300
|
+
}
|
|
301
|
+
],
|
|
302
|
+
"events": [],
|
|
303
|
+
"slots": [],
|
|
304
|
+
"cssParts": [],
|
|
305
|
+
"notes": []
|
|
306
|
+
},
|
|
307
|
+
"pds-icon": {
|
|
308
|
+
"tag": "pds-icon",
|
|
309
|
+
"className": "SvgIcon",
|
|
310
|
+
"displayName": "pds-icon",
|
|
311
|
+
"storyTitle": "PDS/Components/pds-icon",
|
|
312
|
+
"category": "PDS/Components",
|
|
313
|
+
"description": "SVG Icon Web Component",
|
|
314
|
+
"docsDescription": "SVG sprite icons with fallbacks",
|
|
315
|
+
"pdsTags": [],
|
|
316
|
+
"ontology": null,
|
|
317
|
+
"stories": [
|
|
318
|
+
{
|
|
319
|
+
"exportName": "Default",
|
|
320
|
+
"name": "Default",
|
|
321
|
+
"id": "pds-components-pds-icon--default",
|
|
322
|
+
"tags": [],
|
|
323
|
+
"description": null,
|
|
324
|
+
"source": "stories\\components\\PdsIcon.stories.js"
|
|
325
|
+
}
|
|
326
|
+
],
|
|
327
|
+
"sourceModule": "public/assets/pds/components/pds-icon.js",
|
|
328
|
+
"superclass": "HTMLElement",
|
|
329
|
+
"attributes": [
|
|
330
|
+
{
|
|
331
|
+
"name": "icon",
|
|
332
|
+
"description": "Icon name from the sprite sheet",
|
|
333
|
+
"type": "string",
|
|
334
|
+
"default": null,
|
|
335
|
+
"fieldName": null
|
|
336
|
+
},
|
|
337
|
+
{
|
|
338
|
+
"name": "size",
|
|
339
|
+
"description": "Icon size in pixels or named size (xs, sm, md, lg, xl, 2xl)",
|
|
340
|
+
"type": "string|number",
|
|
341
|
+
"default": null,
|
|
342
|
+
"fieldName": null
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"name": "color",
|
|
346
|
+
"description": "Icon color (CSS color value, default: currentColor)",
|
|
347
|
+
"type": "string",
|
|
348
|
+
"default": null,
|
|
349
|
+
"fieldName": null
|
|
350
|
+
},
|
|
351
|
+
{
|
|
352
|
+
"name": "label",
|
|
353
|
+
"description": "Accessible label for the icon (adds role=\"img\")",
|
|
354
|
+
"type": "string",
|
|
355
|
+
"default": null,
|
|
356
|
+
"fieldName": null
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"name": "rotate",
|
|
360
|
+
"description": "Rotation angle in degrees",
|
|
361
|
+
"type": "number",
|
|
362
|
+
"default": null,
|
|
363
|
+
"fieldName": null
|
|
364
|
+
},
|
|
365
|
+
{
|
|
366
|
+
"name": "sprite",
|
|
367
|
+
"description": "Override sprite sheet path",
|
|
368
|
+
"type": "string",
|
|
369
|
+
"default": null,
|
|
370
|
+
"fieldName": null
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
"name": "no-sprite",
|
|
374
|
+
"description": "Force fallback icon rendering",
|
|
375
|
+
"type": "boolean",
|
|
376
|
+
"default": null,
|
|
377
|
+
"fieldName": null
|
|
378
|
+
}
|
|
379
|
+
],
|
|
380
|
+
"properties": [
|
|
381
|
+
{
|
|
382
|
+
"name": "inlineSprites",
|
|
383
|
+
"attribute": null,
|
|
384
|
+
"description": null,
|
|
385
|
+
"type": null,
|
|
386
|
+
"default": "new Map()",
|
|
387
|
+
"reflects": false,
|
|
388
|
+
"privacy": "public"
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "instances",
|
|
392
|
+
"attribute": null,
|
|
393
|
+
"description": null,
|
|
394
|
+
"type": null,
|
|
395
|
+
"default": "new Set()",
|
|
396
|
+
"reflects": false,
|
|
397
|
+
"privacy": "public"
|
|
398
|
+
},
|
|
399
|
+
{
|
|
400
|
+
"name": "spritePromises",
|
|
401
|
+
"attribute": null,
|
|
402
|
+
"description": null,
|
|
403
|
+
"type": null,
|
|
404
|
+
"default": "new Map()",
|
|
405
|
+
"reflects": false,
|
|
406
|
+
"privacy": "public"
|
|
407
|
+
}
|
|
408
|
+
],
|
|
409
|
+
"methods": [
|
|
410
|
+
{
|
|
411
|
+
"name": "ensureInlineSprite",
|
|
412
|
+
"description": null,
|
|
413
|
+
"parameters": [
|
|
414
|
+
{
|
|
415
|
+
"name": "spriteURL",
|
|
416
|
+
"type": null,
|
|
417
|
+
"description": null
|
|
418
|
+
}
|
|
419
|
+
],
|
|
420
|
+
"return": null
|
|
421
|
+
},
|
|
422
|
+
{
|
|
423
|
+
"name": "notifyInstances",
|
|
424
|
+
"description": null,
|
|
425
|
+
"parameters": [],
|
|
426
|
+
"return": null
|
|
427
|
+
},
|
|
428
|
+
{
|
|
429
|
+
"name": "spriteAvailable",
|
|
430
|
+
"description": "Check if sprite sheet is available",
|
|
431
|
+
"parameters": [],
|
|
432
|
+
"return": "boolean"
|
|
433
|
+
}
|
|
434
|
+
],
|
|
435
|
+
"events": [],
|
|
436
|
+
"slots": [],
|
|
437
|
+
"cssParts": [],
|
|
438
|
+
"notes": []
|
|
439
|
+
},
|
|
440
|
+
"pds-jsonform": {
|
|
441
|
+
"tag": "pds-jsonform",
|
|
442
|
+
"className": "SchemaForm",
|
|
443
|
+
"displayName": "PDS JSON Schema Form",
|
|
444
|
+
"storyTitle": "Components/Pds Jsonform",
|
|
445
|
+
"category": "Components",
|
|
446
|
+
"description": "<pds-jsonform>\n\nForm Actions:\nBy default, the form includes Submit and Reset buttons inside the <form> element.\n\nUsage options:\n1. Default buttons:\n <pds-jsonform .jsonSchema=${schema}></pds-jsonform>\n\n2. Customize labels:\n <pds-jsonform .jsonSchema=${schema} submit-label=\"Save\" reset-label=\"Clear\"></pds-jsonform>\n\n3. Hide reset button:\n <pds-jsonform .jsonSchema=${schema} hide-reset></pds-jsonform>\n\n4. Add extra buttons (slot):\n <pds-jsonform .jsonSchema=${schema}>\n <button type=\"button\" slot=\"actions\"",
|
|
447
|
+
"docsDescription": "**⭐ Recommended for modern applications** - Automatically generate complete forms from JSON Schema definitions.\n\n### Key Features\n- 🎯 **Zero boilerplate** - Define form structure in JSON, get a working form with validation\n- ✅ **Built-in validation** - Automatic validation based on schema rules (required, min/max, patterns, etc.)\n- 🔄 **Data binding** - Two-way data binding with form state management\n- 🎨 **PDS styled** - Uses all PDS design tokens automatically\n- 📱 **Responsive** - Mobile-friendly layouts out of the box\n- 🧩 **Conditional logic** - Show/hide fields based on other field values\n- 🌐 **Nested objects** - Support for complex nested data structures\n- 🔧 **Extensible** - Custom field types and validators\n\n### Why JSON Schema Forms?\nInstead of manually writing HTML for every form field, validation rule, and error message, you define your data schema once and get:\n- Form UI generation\n- Client-side validation\n- Server-side validation (same schema)\n- API documentation\n- Type definitions\n- Database schemas\n\nSee the examples below to get started, or check the [primitive forms](/story/primitives-forms--default) for manual form building.",
|
|
448
|
+
"pdsTags": [
|
|
449
|
+
"autodocs",
|
|
450
|
+
"buttons",
|
|
451
|
+
"forms",
|
|
452
|
+
"interaction"
|
|
453
|
+
],
|
|
454
|
+
"ontology": null,
|
|
455
|
+
"stories": [
|
|
456
|
+
{
|
|
457
|
+
"exportName": "WithAccordionLayout",
|
|
458
|
+
"name": "Accordion Layout",
|
|
459
|
+
"id": "components-pds-jsonform--with-accordion-layout",
|
|
460
|
+
"tags": [],
|
|
461
|
+
"description": null,
|
|
462
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
463
|
+
},
|
|
464
|
+
{
|
|
465
|
+
"exportName": "ComprehensiveExample",
|
|
466
|
+
"name": "All Features Combined",
|
|
467
|
+
"id": "components-pds-jsonform--comprehensive-example",
|
|
468
|
+
"tags": [],
|
|
469
|
+
"description": null,
|
|
470
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
471
|
+
},
|
|
472
|
+
{
|
|
473
|
+
"exportName": "ComplexForm",
|
|
474
|
+
"name": "ComplexForm",
|
|
475
|
+
"id": "components-pds-jsonform--complex-form",
|
|
476
|
+
"tags": [],
|
|
477
|
+
"description": null,
|
|
478
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
479
|
+
},
|
|
480
|
+
{
|
|
481
|
+
"exportName": "CustomFormActions",
|
|
482
|
+
"name": "Custom Form Actions",
|
|
483
|
+
"id": "components-pds-jsonform--custom-form-actions",
|
|
484
|
+
"tags": [],
|
|
485
|
+
"description": "Demonstrates using `hide-actions` to provide custom form submission buttons and handling.\n \nWhen `hide-actions` is set, the default Submit and Reset buttons are hidden, allowing you to create custom action buttons in the `actions` slot. You can then handle form submission programmatically using the form's `submit()` method or by manually triggering the form element.",
|
|
486
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
"exportName": "WithDatalistAutocomplete",
|
|
490
|
+
"name": "Datalist Autocomplete",
|
|
491
|
+
"id": "components-pds-jsonform--with-datalist-autocomplete",
|
|
492
|
+
"tags": [],
|
|
493
|
+
"description": null,
|
|
494
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
"exportName": "WithDialogForms",
|
|
498
|
+
"name": "Dialog-Based Nested Forms",
|
|
499
|
+
"id": "components-pds-jsonform--with-dialog-forms",
|
|
500
|
+
"tags": [],
|
|
501
|
+
"description": "Dialog-based forms use `ui:dialog` to edit nested objects in modal dialogs. State is transferred via FormData when using `PDS.ask()` with `useForm: true`. Click \"Edit\" buttons to modify nested data, then submit the main form to see all changes preserved.",
|
|
502
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
"exportName": "WithArrayFields",
|
|
506
|
+
"name": "Dynamic Arrays (Add/Remove)",
|
|
507
|
+
"id": "components-pds-jsonform--with-array-fields",
|
|
508
|
+
"tags": [],
|
|
509
|
+
"description": "Arrays in JSON Schema forms allow users to dynamically add and remove items. This is perfect for managing lists like team members, tasks, or any collection that can grow or shrink.\n\n### Features:\n- **Add items** - Click \"Add\" button to create new entries\n- **Remove items** - Delete individual items with the \"Remove\" button\n- **Reorder items** - Use up/down arrows to change order\n- **Nested objects** - Each array item can contain complex nested data\n- **Initial values** - Pre-populate with default items\n- **Radio Group Open** - Arrays with `maxItems: 1` render as radio buttons for single selection",
|
|
510
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
"exportName": "WithPdsUpload",
|
|
514
|
+
"name": "File Upload (pds-upload)",
|
|
515
|
+
"id": "components-pds-jsonform--with-pds-upload",
|
|
516
|
+
"tags": [],
|
|
517
|
+
"description": null,
|
|
518
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
519
|
+
},
|
|
520
|
+
{
|
|
521
|
+
"exportName": "WithFlexLayout",
|
|
522
|
+
"name": "Flex Layout",
|
|
523
|
+
"id": "components-pds-jsonform--with-flex-layout",
|
|
524
|
+
"tags": [],
|
|
525
|
+
"description": null,
|
|
526
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
527
|
+
},
|
|
528
|
+
{
|
|
529
|
+
"exportName": "WithGridLayout",
|
|
530
|
+
"name": "Grid Layout",
|
|
531
|
+
"id": "components-pds-jsonform--with-grid-layout",
|
|
532
|
+
"tags": [],
|
|
533
|
+
"description": null,
|
|
534
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
"exportName": "WithIcons",
|
|
538
|
+
"name": "Icon-Enhanced Inputs",
|
|
539
|
+
"id": "components-pds-jsonform--with-icons",
|
|
540
|
+
"tags": [],
|
|
541
|
+
"description": null,
|
|
542
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
543
|
+
},
|
|
544
|
+
{
|
|
545
|
+
"exportName": "WithRadioGroupOpen",
|
|
546
|
+
"name": "Radio Group Open (Single Selection)",
|
|
547
|
+
"id": "components-pds-jsonform--with-radio-group-open",
|
|
548
|
+
"tags": [],
|
|
549
|
+
"description": "When an array has `maxItems: 1`, it renders as a Radio Group Open, allowing single selection with the ability to add custom options.\n \nThis is perfect for scenarios where users can choose one option from predefined choices or add their own custom value. The `data-open` enhancement automatically provides an input field to add new options dynamically.\n\n### Key Features:\n- **Single selection** - Only one option can be selected at a time (radio buttons)\n- **Add custom options** - Users can type new options in the input field\n- **Remove options** - Click the × button to remove options\n- **Pre-populated** - Start with default options from the schema\n\nThis pattern is ideal for fields like \"Priority\", \"Status\", \"Category\", or any single-choice field where users might need custom values.",
|
|
550
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"exportName": "WithRangeSliders",
|
|
554
|
+
"name": "Range Sliders with Output",
|
|
555
|
+
"id": "components-pds-jsonform--with-range-sliders",
|
|
556
|
+
"tags": [],
|
|
557
|
+
"description": null,
|
|
558
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
559
|
+
},
|
|
560
|
+
{
|
|
561
|
+
"exportName": "WithPdsRichtext",
|
|
562
|
+
"name": "Rich Text Editor (pds-richtext)",
|
|
563
|
+
"id": "components-pds-jsonform--with-pds-richtext",
|
|
564
|
+
"tags": [],
|
|
565
|
+
"description": null,
|
|
566
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
"exportName": "SimpleForm",
|
|
570
|
+
"name": "SimpleForm",
|
|
571
|
+
"id": "components-pds-jsonform--simple-form",
|
|
572
|
+
"tags": [],
|
|
573
|
+
"description": null,
|
|
574
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
575
|
+
},
|
|
576
|
+
{
|
|
577
|
+
"exportName": "WithSurfaces",
|
|
578
|
+
"name": "Surface Wrapping (Cards)",
|
|
579
|
+
"id": "components-pds-jsonform--with-surfaces",
|
|
580
|
+
"tags": [],
|
|
581
|
+
"description": null,
|
|
582
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
583
|
+
},
|
|
584
|
+
{
|
|
585
|
+
"exportName": "WithTabsLayout",
|
|
586
|
+
"name": "Tabs Layout (pds-tabstrip)",
|
|
587
|
+
"id": "components-pds-jsonform--with-tabs-layout",
|
|
588
|
+
"tags": [],
|
|
589
|
+
"description": null,
|
|
590
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
"exportName": "WithTogglesSwitches",
|
|
594
|
+
"name": "Toggles & Switches",
|
|
595
|
+
"id": "components-pds-jsonform--with-toggles-switches",
|
|
596
|
+
"tags": [],
|
|
597
|
+
"description": null,
|
|
598
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
599
|
+
},
|
|
600
|
+
{
|
|
601
|
+
"exportName": "WithInitialData",
|
|
602
|
+
"name": "WithInitialData",
|
|
603
|
+
"id": "components-pds-jsonform--with-initial-data",
|
|
604
|
+
"tags": [],
|
|
605
|
+
"description": null,
|
|
606
|
+
"source": "stories\\components\\PdsJsonform.stories.js"
|
|
607
|
+
}
|
|
608
|
+
],
|
|
609
|
+
"sourceModule": "public/assets/pds/components/pds-jsonform.js",
|
|
610
|
+
"superclass": "LitElement",
|
|
611
|
+
"attributes": [
|
|
612
|
+
{
|
|
613
|
+
"name": "json-schema",
|
|
614
|
+
"description": null,
|
|
615
|
+
"type": "object",
|
|
616
|
+
"default": "undefined",
|
|
617
|
+
"fieldName": "jsonSchema"
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"name": "ui-schema",
|
|
621
|
+
"description": null,
|
|
622
|
+
"type": "object",
|
|
623
|
+
"default": "undefined",
|
|
624
|
+
"fieldName": "uiSchema"
|
|
625
|
+
},
|
|
626
|
+
{
|
|
627
|
+
"name": "options",
|
|
628
|
+
"description": null,
|
|
629
|
+
"type": "object",
|
|
630
|
+
"default": "undefined",
|
|
631
|
+
"fieldName": "options"
|
|
632
|
+
},
|
|
633
|
+
{
|
|
634
|
+
"name": "values",
|
|
635
|
+
"description": null,
|
|
636
|
+
"type": "object",
|
|
637
|
+
"default": "undefined",
|
|
638
|
+
"fieldName": "values"
|
|
639
|
+
},
|
|
640
|
+
{
|
|
641
|
+
"name": "action",
|
|
642
|
+
"description": null,
|
|
643
|
+
"type": "string",
|
|
644
|
+
"default": null,
|
|
645
|
+
"fieldName": "action"
|
|
646
|
+
},
|
|
647
|
+
{
|
|
648
|
+
"name": "method",
|
|
649
|
+
"description": null,
|
|
650
|
+
"type": "string",
|
|
651
|
+
"default": "\"post\"",
|
|
652
|
+
"fieldName": "method"
|
|
653
|
+
},
|
|
654
|
+
{
|
|
655
|
+
"name": "disabled",
|
|
656
|
+
"description": null,
|
|
657
|
+
"type": "boolean",
|
|
658
|
+
"default": null,
|
|
659
|
+
"fieldName": "disabled"
|
|
660
|
+
},
|
|
661
|
+
{
|
|
662
|
+
"name": "hide-actions",
|
|
663
|
+
"description": null,
|
|
664
|
+
"type": "boolean",
|
|
665
|
+
"default": "false",
|
|
666
|
+
"fieldName": "hideActions"
|
|
667
|
+
},
|
|
668
|
+
{
|
|
669
|
+
"name": "submit-label",
|
|
670
|
+
"description": null,
|
|
671
|
+
"type": "string",
|
|
672
|
+
"default": "\"Submit\"",
|
|
673
|
+
"fieldName": "submitLabel"
|
|
674
|
+
},
|
|
675
|
+
{
|
|
676
|
+
"name": "reset-label",
|
|
677
|
+
"description": null,
|
|
678
|
+
"type": "string",
|
|
679
|
+
"default": "\"Reset\"",
|
|
680
|
+
"fieldName": "resetLabel"
|
|
681
|
+
},
|
|
682
|
+
{
|
|
683
|
+
"name": "hide-reset",
|
|
684
|
+
"description": null,
|
|
685
|
+
"type": "boolean",
|
|
686
|
+
"default": "false",
|
|
687
|
+
"fieldName": "hideReset"
|
|
688
|
+
},
|
|
689
|
+
{
|
|
690
|
+
"name": "hide-submit",
|
|
691
|
+
"description": null,
|
|
692
|
+
"type": "boolean",
|
|
693
|
+
"default": null,
|
|
694
|
+
"fieldName": "hideSubmit"
|
|
695
|
+
},
|
|
696
|
+
{
|
|
697
|
+
"name": "hide-legend",
|
|
698
|
+
"description": null,
|
|
699
|
+
"type": "boolean",
|
|
700
|
+
"default": "false",
|
|
701
|
+
"fieldName": "hideLegend"
|
|
702
|
+
}
|
|
703
|
+
],
|
|
704
|
+
"properties": [
|
|
705
|
+
{
|
|
706
|
+
"name": "action",
|
|
707
|
+
"attribute": "action",
|
|
708
|
+
"description": null,
|
|
709
|
+
"type": "string",
|
|
710
|
+
"default": null,
|
|
711
|
+
"reflects": false,
|
|
712
|
+
"privacy": "public"
|
|
713
|
+
},
|
|
714
|
+
{
|
|
715
|
+
"name": "disabled",
|
|
716
|
+
"attribute": "disabled",
|
|
717
|
+
"description": null,
|
|
718
|
+
"type": "boolean",
|
|
719
|
+
"default": null,
|
|
720
|
+
"reflects": true,
|
|
721
|
+
"privacy": "public"
|
|
722
|
+
},
|
|
723
|
+
{
|
|
724
|
+
"name": "hideActions",
|
|
725
|
+
"attribute": "hide-actions",
|
|
726
|
+
"description": null,
|
|
727
|
+
"type": "boolean",
|
|
728
|
+
"default": "false",
|
|
729
|
+
"reflects": false,
|
|
730
|
+
"privacy": "public"
|
|
731
|
+
},
|
|
732
|
+
{
|
|
733
|
+
"name": "hideLegend",
|
|
734
|
+
"attribute": "hide-legend",
|
|
735
|
+
"description": null,
|
|
736
|
+
"type": "boolean",
|
|
737
|
+
"default": "false",
|
|
738
|
+
"reflects": false,
|
|
739
|
+
"privacy": "public"
|
|
740
|
+
},
|
|
741
|
+
{
|
|
742
|
+
"name": "hideReset",
|
|
743
|
+
"attribute": "hide-reset",
|
|
744
|
+
"description": null,
|
|
745
|
+
"type": "boolean",
|
|
746
|
+
"default": "false",
|
|
747
|
+
"reflects": false,
|
|
748
|
+
"privacy": "public"
|
|
749
|
+
},
|
|
750
|
+
{
|
|
751
|
+
"name": "hideSubmit",
|
|
752
|
+
"attribute": "hide-submit",
|
|
753
|
+
"description": null,
|
|
754
|
+
"type": "boolean",
|
|
755
|
+
"default": null,
|
|
756
|
+
"reflects": false,
|
|
757
|
+
"privacy": "public"
|
|
758
|
+
},
|
|
759
|
+
{
|
|
760
|
+
"name": "jsonSchema",
|
|
761
|
+
"attribute": "json-schema",
|
|
762
|
+
"description": "Primary schema input. Provide a JSON Schema object to generate the form layout and validation rules.",
|
|
763
|
+
"type": "JSONSchema7 (object)",
|
|
764
|
+
"default": "undefined",
|
|
765
|
+
"reflects": false,
|
|
766
|
+
"privacy": "public"
|
|
767
|
+
},
|
|
768
|
+
{
|
|
769
|
+
"name": "method",
|
|
770
|
+
"attribute": "method",
|
|
771
|
+
"description": null,
|
|
772
|
+
"type": "string",
|
|
773
|
+
"default": "\"post\"",
|
|
774
|
+
"reflects": false,
|
|
775
|
+
"privacy": "public"
|
|
776
|
+
},
|
|
777
|
+
{
|
|
778
|
+
"name": "options",
|
|
779
|
+
"attribute": "options",
|
|
780
|
+
"description": "Toolkit-level options that adjust widget families, layouts, and validation behavior. Supports path-specific overrides.",
|
|
781
|
+
"type": "JsonFormOptions",
|
|
782
|
+
"default": "undefined",
|
|
783
|
+
"reflects": false,
|
|
784
|
+
"privacy": "public"
|
|
785
|
+
},
|
|
786
|
+
{
|
|
787
|
+
"name": "resetLabel",
|
|
788
|
+
"attribute": "reset-label",
|
|
789
|
+
"description": null,
|
|
790
|
+
"type": "string",
|
|
791
|
+
"default": "\"Reset\"",
|
|
792
|
+
"reflects": false,
|
|
793
|
+
"privacy": "public"
|
|
794
|
+
},
|
|
795
|
+
{
|
|
796
|
+
"name": "submitLabel",
|
|
797
|
+
"attribute": "submit-label",
|
|
798
|
+
"description": null,
|
|
799
|
+
"type": "string",
|
|
800
|
+
"default": "\"Submit\"",
|
|
801
|
+
"reflects": false,
|
|
802
|
+
"privacy": "public"
|
|
803
|
+
},
|
|
804
|
+
{
|
|
805
|
+
"name": "uiSchema",
|
|
806
|
+
"attribute": "ui-schema",
|
|
807
|
+
"description": "Optional UI overrides keyed by JSON Pointer. Controls layout, widgets, surfaces, dialogs, and per-field hints.",
|
|
808
|
+
"type": "UISchema",
|
|
809
|
+
"default": "undefined",
|
|
810
|
+
"reflects": false,
|
|
811
|
+
"privacy": "public"
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
"name": "values",
|
|
815
|
+
"attribute": "values",
|
|
816
|
+
"description": "Initial data that pre-populates the generated form. Shape must match the JSON Schema.",
|
|
817
|
+
"type": "Record<string, any>",
|
|
818
|
+
"default": "undefined",
|
|
819
|
+
"reflects": false,
|
|
820
|
+
"privacy": "public"
|
|
821
|
+
}
|
|
822
|
+
],
|
|
823
|
+
"methods": [
|
|
824
|
+
{
|
|
825
|
+
"name": "defineRenderer",
|
|
826
|
+
"description": null,
|
|
827
|
+
"parameters": [
|
|
828
|
+
{
|
|
829
|
+
"name": "widgetKey",
|
|
830
|
+
"type": null,
|
|
831
|
+
"description": null
|
|
832
|
+
},
|
|
833
|
+
{
|
|
834
|
+
"name": "fn",
|
|
835
|
+
"type": null,
|
|
836
|
+
"description": null
|
|
837
|
+
}
|
|
838
|
+
],
|
|
839
|
+
"return": null
|
|
840
|
+
},
|
|
841
|
+
{
|
|
842
|
+
"name": "getValuesFlat",
|
|
843
|
+
"description": null,
|
|
844
|
+
"parameters": [],
|
|
845
|
+
"return": null
|
|
846
|
+
},
|
|
847
|
+
{
|
|
848
|
+
"name": "serialize",
|
|
849
|
+
"description": null,
|
|
850
|
+
"parameters": [],
|
|
851
|
+
"return": null
|
|
852
|
+
},
|
|
853
|
+
{
|
|
854
|
+
"name": "submit",
|
|
855
|
+
"description": null,
|
|
856
|
+
"parameters": [],
|
|
857
|
+
"return": null
|
|
858
|
+
},
|
|
859
|
+
{
|
|
860
|
+
"name": "useValidator",
|
|
861
|
+
"description": null,
|
|
862
|
+
"parameters": [
|
|
863
|
+
{
|
|
864
|
+
"name": "fn",
|
|
865
|
+
"type": null,
|
|
866
|
+
"description": null
|
|
867
|
+
}
|
|
868
|
+
],
|
|
869
|
+
"return": null
|
|
870
|
+
}
|
|
871
|
+
],
|
|
872
|
+
"events": [
|
|
873
|
+
{
|
|
874
|
+
"name": "pw:array-add",
|
|
875
|
+
"type": "CustomEvent<JsonFormArrayEventDetail>",
|
|
876
|
+
"description": "Triggered when an array item is appended. Carries the path and index metadata."
|
|
877
|
+
},
|
|
878
|
+
{
|
|
879
|
+
"name": "pw:array-remove",
|
|
880
|
+
"type": "CustomEvent<JsonFormArrayEventDetail>",
|
|
881
|
+
"description": "Triggered when an array item is removed."
|
|
882
|
+
},
|
|
883
|
+
{
|
|
884
|
+
"name": "pw:array-reorder",
|
|
885
|
+
"type": "CustomEvent<JsonFormArrayEventDetail>",
|
|
886
|
+
"description": "Triggered when array items are reordered (drag & drop scenarios)."
|
|
887
|
+
},
|
|
888
|
+
{
|
|
889
|
+
"name": "pw:dialog-open",
|
|
890
|
+
"type": "CustomEvent<JsonFormDialogEventDetail>",
|
|
891
|
+
"description": "Fires before a dialog-driven field opens (e.g. complex editors)."
|
|
892
|
+
},
|
|
893
|
+
{
|
|
894
|
+
"name": "pw:dialog-submit",
|
|
895
|
+
"type": "CustomEvent<JsonFormDialogEventDetail>",
|
|
896
|
+
"description": "Fires when a dialog-driven field is saved."
|
|
897
|
+
},
|
|
898
|
+
{
|
|
899
|
+
"name": "pw:submit",
|
|
900
|
+
"type": "CustomEvent<JsonFormSubmitDetail>",
|
|
901
|
+
"description": "Emitted after submission. `detail` includes `{ json, formData, valid, issues }` for server hand-off or additional processing."
|
|
902
|
+
},
|
|
903
|
+
{
|
|
904
|
+
"name": "pw:value-change",
|
|
905
|
+
"type": "CustomEvent<JsonFormValueChangeDetail>",
|
|
906
|
+
"description": "Live value updates whenever a field changes. `detail.name` contains the JSON Pointer-compatible path."
|
|
907
|
+
}
|
|
908
|
+
],
|
|
909
|
+
"slots": [],
|
|
910
|
+
"cssParts": [],
|
|
911
|
+
"notes": [
|
|
912
|
+
"Typed interfaces for `JsonFormOptions`, `UISchema`, and related events live in `src/js/pds.d.ts`.",
|
|
913
|
+
"The form accepts standard JSON Schema (Draft 7) documents via the `jsonSchema` property. `uiSchema` and `options` fine-tune layout, widgets, and behaviors."
|
|
914
|
+
]
|
|
915
|
+
},
|
|
916
|
+
"pds-richtext": {
|
|
917
|
+
"tag": "pds-richtext",
|
|
918
|
+
"className": "RichText",
|
|
919
|
+
"displayName": "Pds Richtext",
|
|
920
|
+
"storyTitle": "Components/Pds Richtext",
|
|
921
|
+
"category": "Components",
|
|
922
|
+
"description": null,
|
|
923
|
+
"docsDescription": "Rich text editor with markdown support and formatting toolbar. Provide a #showdown import-map entry for best performance; set format=\"markdown\" to keep submitted values as Markdown.",
|
|
924
|
+
"pdsTags": [
|
|
925
|
+
"autodocs",
|
|
926
|
+
"editor",
|
|
927
|
+
"forms",
|
|
928
|
+
"richtext"
|
|
929
|
+
],
|
|
930
|
+
"ontology": null,
|
|
931
|
+
"stories": [
|
|
932
|
+
{
|
|
933
|
+
"exportName": "Default",
|
|
934
|
+
"name": "Default",
|
|
935
|
+
"id": "components-pds-richtext--default",
|
|
936
|
+
"tags": [],
|
|
937
|
+
"description": null,
|
|
938
|
+
"source": "stories\\components\\PdsRichtext.stories.js"
|
|
939
|
+
}
|
|
940
|
+
],
|
|
941
|
+
"sourceModule": "public/assets/pds/components/pds-richtext.js",
|
|
942
|
+
"superclass": "HTMLElement",
|
|
943
|
+
"attributes": [
|
|
944
|
+
{
|
|
945
|
+
"name": "name",
|
|
946
|
+
"description": null,
|
|
947
|
+
"type": null,
|
|
948
|
+
"default": null,
|
|
949
|
+
"fieldName": null
|
|
950
|
+
},
|
|
951
|
+
{
|
|
952
|
+
"name": "placeholder",
|
|
953
|
+
"description": null,
|
|
954
|
+
"type": null,
|
|
955
|
+
"default": null,
|
|
956
|
+
"fieldName": null
|
|
957
|
+
},
|
|
958
|
+
{
|
|
959
|
+
"name": "disabled",
|
|
960
|
+
"description": null,
|
|
961
|
+
"type": null,
|
|
962
|
+
"default": null,
|
|
963
|
+
"fieldName": null
|
|
964
|
+
},
|
|
965
|
+
{
|
|
966
|
+
"name": "required",
|
|
967
|
+
"description": null,
|
|
968
|
+
"type": null,
|
|
969
|
+
"default": null,
|
|
970
|
+
"fieldName": null
|
|
971
|
+
},
|
|
972
|
+
{
|
|
973
|
+
"name": "submit-on-enter",
|
|
974
|
+
"description": null,
|
|
975
|
+
"type": null,
|
|
976
|
+
"default": null,
|
|
977
|
+
"fieldName": null
|
|
978
|
+
},
|
|
979
|
+
{
|
|
980
|
+
"name": "spellcheck",
|
|
981
|
+
"description": null,
|
|
982
|
+
"type": null,
|
|
983
|
+
"default": null,
|
|
984
|
+
"fieldName": null
|
|
985
|
+
},
|
|
986
|
+
{
|
|
987
|
+
"name": "toolbar",
|
|
988
|
+
"description": null,
|
|
989
|
+
"type": null,
|
|
990
|
+
"default": null,
|
|
991
|
+
"fieldName": null
|
|
992
|
+
},
|
|
993
|
+
{
|
|
994
|
+
"name": "value",
|
|
995
|
+
"description": null,
|
|
996
|
+
"type": null,
|
|
997
|
+
"default": null,
|
|
998
|
+
"fieldName": null
|
|
999
|
+
},
|
|
1000
|
+
{
|
|
1001
|
+
"name": "format",
|
|
1002
|
+
"description": null,
|
|
1003
|
+
"type": null,
|
|
1004
|
+
"default": null,
|
|
1005
|
+
"fieldName": null
|
|
1006
|
+
}
|
|
1007
|
+
],
|
|
1008
|
+
"properties": [
|
|
1009
|
+
{
|
|
1010
|
+
"name": "disabled",
|
|
1011
|
+
"attribute": "disabled",
|
|
1012
|
+
"description": "Enable or disable user input.",
|
|
1013
|
+
"type": null,
|
|
1014
|
+
"default": null,
|
|
1015
|
+
"reflects": false,
|
|
1016
|
+
"privacy": "public"
|
|
1017
|
+
},
|
|
1018
|
+
{
|
|
1019
|
+
"name": "form",
|
|
1020
|
+
"attribute": null,
|
|
1021
|
+
"description": "Reference to the associated HTMLFormElement, when applicable.",
|
|
1022
|
+
"type": null,
|
|
1023
|
+
"default": null,
|
|
1024
|
+
"reflects": false,
|
|
1025
|
+
"privacy": "public"
|
|
1026
|
+
},
|
|
1027
|
+
{
|
|
1028
|
+
"name": "formAssociated",
|
|
1029
|
+
"attribute": null,
|
|
1030
|
+
"description": null,
|
|
1031
|
+
"type": "boolean",
|
|
1032
|
+
"default": "true",
|
|
1033
|
+
"reflects": false,
|
|
1034
|
+
"privacy": "public"
|
|
1035
|
+
},
|
|
1036
|
+
{
|
|
1037
|
+
"name": "format",
|
|
1038
|
+
"attribute": "format",
|
|
1039
|
+
"description": "Change the output format for future values.",
|
|
1040
|
+
"type": null,
|
|
1041
|
+
"default": null,
|
|
1042
|
+
"reflects": false,
|
|
1043
|
+
"privacy": "public"
|
|
1044
|
+
},
|
|
1045
|
+
{
|
|
1046
|
+
"name": "name",
|
|
1047
|
+
"attribute": "name",
|
|
1048
|
+
"description": "Update the form field name.",
|
|
1049
|
+
"type": null,
|
|
1050
|
+
"default": null,
|
|
1051
|
+
"reflects": false,
|
|
1052
|
+
"privacy": "public"
|
|
1053
|
+
},
|
|
1054
|
+
{
|
|
1055
|
+
"name": "placeholder",
|
|
1056
|
+
"attribute": "placeholder",
|
|
1057
|
+
"description": "Set the placeholder text.",
|
|
1058
|
+
"type": null,
|
|
1059
|
+
"default": null,
|
|
1060
|
+
"reflects": false,
|
|
1061
|
+
"privacy": "public"
|
|
1062
|
+
},
|
|
1063
|
+
{
|
|
1064
|
+
"name": "required",
|
|
1065
|
+
"attribute": "required",
|
|
1066
|
+
"description": "Toggle required validation.",
|
|
1067
|
+
"type": null,
|
|
1068
|
+
"default": null,
|
|
1069
|
+
"reflects": false,
|
|
1070
|
+
"privacy": "public"
|
|
1071
|
+
},
|
|
1072
|
+
{
|
|
1073
|
+
"name": "spellcheck",
|
|
1074
|
+
"attribute": "spellcheck",
|
|
1075
|
+
"description": "Toggle native spell checking support.",
|
|
1076
|
+
"type": null,
|
|
1077
|
+
"default": null,
|
|
1078
|
+
"reflects": false,
|
|
1079
|
+
"privacy": "public"
|
|
1080
|
+
},
|
|
1081
|
+
{
|
|
1082
|
+
"name": "submitOnEnter",
|
|
1083
|
+
"attribute": null,
|
|
1084
|
+
"description": "Enable or disable submit-on-enter behaviour.",
|
|
1085
|
+
"type": null,
|
|
1086
|
+
"default": null,
|
|
1087
|
+
"reflects": false,
|
|
1088
|
+
"privacy": "public"
|
|
1089
|
+
},
|
|
1090
|
+
{
|
|
1091
|
+
"name": "toolbar",
|
|
1092
|
+
"attribute": "toolbar",
|
|
1093
|
+
"description": "Show or hide the formatting toolbar.",
|
|
1094
|
+
"type": null,
|
|
1095
|
+
"default": null,
|
|
1096
|
+
"reflects": false,
|
|
1097
|
+
"privacy": "public"
|
|
1098
|
+
},
|
|
1099
|
+
{
|
|
1100
|
+
"name": "value",
|
|
1101
|
+
"attribute": "value",
|
|
1102
|
+
"description": "Update the editor value programmatically.",
|
|
1103
|
+
"type": null,
|
|
1104
|
+
"default": null,
|
|
1105
|
+
"reflects": false,
|
|
1106
|
+
"privacy": "public"
|
|
1107
|
+
}
|
|
1108
|
+
],
|
|
1109
|
+
"methods": [
|
|
1110
|
+
{
|
|
1111
|
+
"name": "checkValidity",
|
|
1112
|
+
"description": "Run native form validation against the control.",
|
|
1113
|
+
"parameters": [],
|
|
1114
|
+
"return": "boolean"
|
|
1115
|
+
},
|
|
1116
|
+
{
|
|
1117
|
+
"name": "reportValidity",
|
|
1118
|
+
"description": "Report validity using the browser's built-in UI.",
|
|
1119
|
+
"parameters": [],
|
|
1120
|
+
"return": "boolean"
|
|
1121
|
+
}
|
|
1122
|
+
],
|
|
1123
|
+
"events": [
|
|
1124
|
+
{
|
|
1125
|
+
"name": "input",
|
|
1126
|
+
"description": null,
|
|
1127
|
+
"type": "InputEvent"
|
|
1128
|
+
}
|
|
1129
|
+
],
|
|
1130
|
+
"slots": [],
|
|
1131
|
+
"cssParts": [],
|
|
1132
|
+
"notes": []
|
|
1133
|
+
},
|
|
1134
|
+
"pds-scrollrow": {
|
|
1135
|
+
"tag": "pds-scrollrow",
|
|
1136
|
+
"className": "PdsScrollrow",
|
|
1137
|
+
"displayName": "Pds Scrollrow",
|
|
1138
|
+
"storyTitle": "Components/Pds Scrollrow",
|
|
1139
|
+
"category": "Components",
|
|
1140
|
+
"description": "Horizontal scrolling row with optional heading and snap alignment controls.",
|
|
1141
|
+
"docsDescription": "Horizontal scrolling container with navigation buttons",
|
|
1142
|
+
"pdsTags": [
|
|
1143
|
+
"autodocs",
|
|
1144
|
+
"layout"
|
|
1145
|
+
],
|
|
1146
|
+
"ontology": null,
|
|
1147
|
+
"stories": [],
|
|
1148
|
+
"sourceModule": "public/assets/pds/components/pds-scrollrow.js",
|
|
1149
|
+
"superclass": "HTMLElement",
|
|
1150
|
+
"attributes": [
|
|
1151
|
+
{
|
|
1152
|
+
"name": "label",
|
|
1153
|
+
"description": "Accessible label for the scroll region; also used as fallback heading copy",
|
|
1154
|
+
"type": "string",
|
|
1155
|
+
"default": null,
|
|
1156
|
+
"fieldName": null
|
|
1157
|
+
},
|
|
1158
|
+
{
|
|
1159
|
+
"name": "snap",
|
|
1160
|
+
"description": "Snap alignment for tiles when scrolling (default: start)",
|
|
1161
|
+
"type": "\"start\"|\"center\"",
|
|
1162
|
+
"default": null,
|
|
1163
|
+
"fieldName": null
|
|
1164
|
+
}
|
|
1165
|
+
],
|
|
1166
|
+
"properties": [
|
|
1167
|
+
{
|
|
1168
|
+
"name": "label",
|
|
1169
|
+
"attribute": "label",
|
|
1170
|
+
"description": "Update the accessible label and optional fallback heading text.",
|
|
1171
|
+
"type": null,
|
|
1172
|
+
"default": null,
|
|
1173
|
+
"reflects": false,
|
|
1174
|
+
"privacy": "public"
|
|
1175
|
+
},
|
|
1176
|
+
{
|
|
1177
|
+
"name": "snap",
|
|
1178
|
+
"attribute": "snap",
|
|
1179
|
+
"description": "Adjust the scroll snap alignment.",
|
|
1180
|
+
"type": null,
|
|
1181
|
+
"default": null,
|
|
1182
|
+
"reflects": false,
|
|
1183
|
+
"privacy": "public"
|
|
1184
|
+
}
|
|
1185
|
+
],
|
|
1186
|
+
"methods": [
|
|
1187
|
+
{
|
|
1188
|
+
"name": "doPage",
|
|
1189
|
+
"description": "Scroll the viewport by roughly one page in the indicated direction.",
|
|
1190
|
+
"parameters": [
|
|
1191
|
+
{
|
|
1192
|
+
"name": "e",
|
|
1193
|
+
"type": "Event",
|
|
1194
|
+
"description": null
|
|
1195
|
+
}
|
|
1196
|
+
],
|
|
1197
|
+
"return": null
|
|
1198
|
+
}
|
|
1199
|
+
],
|
|
1200
|
+
"events": [],
|
|
1201
|
+
"slots": [
|
|
1202
|
+
{
|
|
1203
|
+
"name": "default",
|
|
1204
|
+
"description": "Scrollable tile content"
|
|
1205
|
+
},
|
|
1206
|
+
{
|
|
1207
|
+
"name": "heading",
|
|
1208
|
+
"description": "Optional heading content rendered in the component header"
|
|
1209
|
+
}
|
|
1210
|
+
],
|
|
1211
|
+
"cssParts": [
|
|
1212
|
+
{
|
|
1213
|
+
"name": "viewport",
|
|
1214
|
+
"description": "The scrollable container element"
|
|
1215
|
+
}
|
|
1216
|
+
],
|
|
1217
|
+
"notes": []
|
|
1218
|
+
},
|
|
1219
|
+
"pds-splitpanel": {
|
|
1220
|
+
"tag": "pds-splitpanel",
|
|
1221
|
+
"className": "anonymous_0",
|
|
1222
|
+
"displayName": "Pds Splitpanel",
|
|
1223
|
+
"storyTitle": "Components/Pds Splitpanel",
|
|
1224
|
+
"category": "Components",
|
|
1225
|
+
"description": null,
|
|
1226
|
+
"docsDescription": "Split panels divide content areas with a draggable divider for resizable layouts.",
|
|
1227
|
+
"pdsTags": [
|
|
1228
|
+
"autodocs",
|
|
1229
|
+
"interaction",
|
|
1230
|
+
"layout",
|
|
1231
|
+
"sizing"
|
|
1232
|
+
],
|
|
1233
|
+
"ontology": null,
|
|
1234
|
+
"stories": [],
|
|
1235
|
+
"sourceModule": "public/assets/pds/components/pds-splitpanel.js",
|
|
1236
|
+
"superclass": "HTMLElement",
|
|
1237
|
+
"attributes": [
|
|
1238
|
+
{
|
|
1239
|
+
"name": "layout",
|
|
1240
|
+
"description": null,
|
|
1241
|
+
"type": null,
|
|
1242
|
+
"default": null,
|
|
1243
|
+
"fieldName": null
|
|
1244
|
+
},
|
|
1245
|
+
{
|
|
1246
|
+
"name": "defaultsplit",
|
|
1247
|
+
"description": null,
|
|
1248
|
+
"type": null,
|
|
1249
|
+
"default": null,
|
|
1250
|
+
"fieldName": null
|
|
1251
|
+
},
|
|
1252
|
+
{
|
|
1253
|
+
"name": "breakpoint",
|
|
1254
|
+
"description": null,
|
|
1255
|
+
"type": null,
|
|
1256
|
+
"default": null,
|
|
1257
|
+
"fieldName": null
|
|
1258
|
+
},
|
|
1259
|
+
{
|
|
1260
|
+
"name": "open",
|
|
1261
|
+
"description": null,
|
|
1262
|
+
"type": null,
|
|
1263
|
+
"default": null,
|
|
1264
|
+
"fieldName": null
|
|
1265
|
+
}
|
|
1266
|
+
],
|
|
1267
|
+
"properties": [
|
|
1268
|
+
{
|
|
1269
|
+
"name": "breakpoint",
|
|
1270
|
+
"attribute": "breakpoint",
|
|
1271
|
+
"description": null,
|
|
1272
|
+
"type": null,
|
|
1273
|
+
"default": null,
|
|
1274
|
+
"reflects": false,
|
|
1275
|
+
"privacy": "public"
|
|
1276
|
+
},
|
|
1277
|
+
{
|
|
1278
|
+
"name": "defaultSplit",
|
|
1279
|
+
"attribute": null,
|
|
1280
|
+
"description": null,
|
|
1281
|
+
"type": null,
|
|
1282
|
+
"default": null,
|
|
1283
|
+
"reflects": false,
|
|
1284
|
+
"privacy": "public"
|
|
1285
|
+
},
|
|
1286
|
+
{
|
|
1287
|
+
"name": "isDragging",
|
|
1288
|
+
"attribute": null,
|
|
1289
|
+
"description": null,
|
|
1290
|
+
"type": "boolean",
|
|
1291
|
+
"default": "false",
|
|
1292
|
+
"reflects": false,
|
|
1293
|
+
"privacy": "public"
|
|
1294
|
+
},
|
|
1295
|
+
{
|
|
1296
|
+
"name": "layout",
|
|
1297
|
+
"attribute": "layout",
|
|
1298
|
+
"description": null,
|
|
1299
|
+
"type": null,
|
|
1300
|
+
"default": null,
|
|
1301
|
+
"reflects": false,
|
|
1302
|
+
"privacy": "public"
|
|
1303
|
+
},
|
|
1304
|
+
{
|
|
1305
|
+
"name": "open",
|
|
1306
|
+
"attribute": "open",
|
|
1307
|
+
"description": null,
|
|
1308
|
+
"type": null,
|
|
1309
|
+
"default": null,
|
|
1310
|
+
"reflects": false,
|
|
1311
|
+
"privacy": "public"
|
|
1312
|
+
}
|
|
1313
|
+
],
|
|
1314
|
+
"methods": [
|
|
1315
|
+
{
|
|
1316
|
+
"name": "closeMobileView",
|
|
1317
|
+
"description": null,
|
|
1318
|
+
"parameters": [],
|
|
1319
|
+
"return": null
|
|
1320
|
+
},
|
|
1321
|
+
{
|
|
1322
|
+
"name": "drag",
|
|
1323
|
+
"description": null,
|
|
1324
|
+
"parameters": [
|
|
1325
|
+
{
|
|
1326
|
+
"name": "event",
|
|
1327
|
+
"type": null,
|
|
1328
|
+
"description": null
|
|
1329
|
+
}
|
|
1330
|
+
],
|
|
1331
|
+
"return": null
|
|
1332
|
+
},
|
|
1333
|
+
{
|
|
1334
|
+
"name": "startDragging",
|
|
1335
|
+
"description": null,
|
|
1336
|
+
"parameters": [
|
|
1337
|
+
{
|
|
1338
|
+
"name": "event",
|
|
1339
|
+
"type": null,
|
|
1340
|
+
"description": null
|
|
1341
|
+
}
|
|
1342
|
+
],
|
|
1343
|
+
"return": null
|
|
1344
|
+
},
|
|
1345
|
+
{
|
|
1346
|
+
"name": "stopDragging",
|
|
1347
|
+
"description": null,
|
|
1348
|
+
"parameters": [],
|
|
1349
|
+
"return": null
|
|
1350
|
+
},
|
|
1351
|
+
{
|
|
1352
|
+
"name": "toggleMobileView",
|
|
1353
|
+
"description": null,
|
|
1354
|
+
"parameters": [],
|
|
1355
|
+
"return": null
|
|
1356
|
+
},
|
|
1357
|
+
{
|
|
1358
|
+
"name": "updateLayout",
|
|
1359
|
+
"description": null,
|
|
1360
|
+
"parameters": [],
|
|
1361
|
+
"return": null
|
|
1362
|
+
}
|
|
1363
|
+
],
|
|
1364
|
+
"events": [],
|
|
1365
|
+
"slots": [],
|
|
1366
|
+
"cssParts": [],
|
|
1367
|
+
"notes": []
|
|
1368
|
+
},
|
|
1369
|
+
"pds-tabpanel": {
|
|
1370
|
+
"tag": "pds-tabpanel",
|
|
1371
|
+
"className": "TabPanel",
|
|
1372
|
+
"displayName": "PDS Tabpanel",
|
|
1373
|
+
"storyTitle": null,
|
|
1374
|
+
"category": null,
|
|
1375
|
+
"description": null,
|
|
1376
|
+
"docsDescription": null,
|
|
1377
|
+
"pdsTags": [],
|
|
1378
|
+
"ontology": null,
|
|
1379
|
+
"stories": [],
|
|
1380
|
+
"sourceModule": "public/assets/pds/components/pds-tabstrip.js",
|
|
1381
|
+
"superclass": "HTMLElement",
|
|
1382
|
+
"attributes": [
|
|
1383
|
+
{
|
|
1384
|
+
"name": "label",
|
|
1385
|
+
"description": "Label for the tab button",
|
|
1386
|
+
"type": "string",
|
|
1387
|
+
"default": null,
|
|
1388
|
+
"fieldName": null
|
|
1389
|
+
},
|
|
1390
|
+
{
|
|
1391
|
+
"name": "id",
|
|
1392
|
+
"description": "Unique identifier for the panel (auto-generated if not provided)",
|
|
1393
|
+
"type": "string",
|
|
1394
|
+
"default": null,
|
|
1395
|
+
"fieldName": null
|
|
1396
|
+
}
|
|
1397
|
+
],
|
|
1398
|
+
"properties": [
|
|
1399
|
+
{
|
|
1400
|
+
"name": "section",
|
|
1401
|
+
"attribute": null,
|
|
1402
|
+
"description": "The inner `<section>` that exposes the panel region semantics.",
|
|
1403
|
+
"type": null,
|
|
1404
|
+
"default": null,
|
|
1405
|
+
"reflects": false,
|
|
1406
|
+
"privacy": "public"
|
|
1407
|
+
}
|
|
1408
|
+
],
|
|
1409
|
+
"methods": [],
|
|
1410
|
+
"events": [],
|
|
1411
|
+
"slots": [
|
|
1412
|
+
{
|
|
1413
|
+
"name": "",
|
|
1414
|
+
"description": "Content of the tab panel"
|
|
1415
|
+
}
|
|
1416
|
+
],
|
|
1417
|
+
"cssParts": [],
|
|
1418
|
+
"notes": []
|
|
1419
|
+
},
|
|
1420
|
+
"pds-tabstrip": {
|
|
1421
|
+
"tag": "pds-tabstrip",
|
|
1422
|
+
"className": "TabStrip",
|
|
1423
|
+
"displayName": "pds-tabstrip",
|
|
1424
|
+
"storyTitle": "PDS/Components/pds-tabstrip",
|
|
1425
|
+
"category": "PDS/Components",
|
|
1426
|
+
"description": "Tab navigation component that pairs anchors with `pds-tabpanel` children.",
|
|
1427
|
+
"docsDescription": "Accessible tab interface with keyboard navigation",
|
|
1428
|
+
"pdsTags": [],
|
|
1429
|
+
"ontology": {
|
|
1430
|
+
"id": "pds-tabstrip",
|
|
1431
|
+
"name": "Tab Strip",
|
|
1432
|
+
"selectors": [
|
|
1433
|
+
"pds-tabstrip"
|
|
1434
|
+
]
|
|
1435
|
+
},
|
|
1436
|
+
"stories": [],
|
|
1437
|
+
"sourceModule": "public/assets/pds/components/pds-tabstrip.js",
|
|
1438
|
+
"superclass": "HTMLElement",
|
|
1439
|
+
"attributes": [
|
|
1440
|
+
{
|
|
1441
|
+
"name": "label",
|
|
1442
|
+
"description": "Accessible label announced for the tablist",
|
|
1443
|
+
"type": "string",
|
|
1444
|
+
"default": null,
|
|
1445
|
+
"fieldName": null
|
|
1446
|
+
},
|
|
1447
|
+
{
|
|
1448
|
+
"name": "selected",
|
|
1449
|
+
"description": "Identifier of the currently active panel (synced with the location hash)",
|
|
1450
|
+
"type": "string",
|
|
1451
|
+
"default": null,
|
|
1452
|
+
"fieldName": null
|
|
1453
|
+
}
|
|
1454
|
+
],
|
|
1455
|
+
"properties": [
|
|
1456
|
+
{
|
|
1457
|
+
"name": "innerHTML",
|
|
1458
|
+
"attribute": null,
|
|
1459
|
+
"description": null,
|
|
1460
|
+
"type": null,
|
|
1461
|
+
"default": "`\n <style>\n :host{display:block}\n nav{\n position:relative; display:inline-flex; gap:.5rem; align-items:flex-end;\n \n --pad-x:.5rem; --pad-y:.25rem;\n }\n nav a{\n color: currentColor;\n display:inline-block; padding:var(--pad-y) var(--pad-x);\n text-decoration:none; line-height:1.2; border-bottom:2px solid transparent;\n cursor:pointer;\n }\n nav a[aria-current=\"page\"]{ font-weight:600; }\n nav a:focus-visible{ outline:auto; outline-offset:2px; }\n .inkbar{\n position:absolute; inset-inline-start:0; bottom:-1px; height:2px; width:0;\n transform:translateX(0); transition:transform .25s ease, width .25s ease;\n background-color: var(--color-accent-400); pointer-events:none;\n }\n </style>\n <nav part=\"tabs\"></nav>\n <slot></slot>\n `",
|
|
1462
|
+
"reflects": false,
|
|
1463
|
+
"privacy": "public"
|
|
1464
|
+
}
|
|
1465
|
+
],
|
|
1466
|
+
"methods": [],
|
|
1467
|
+
"events": [
|
|
1468
|
+
{
|
|
1469
|
+
"name": "tabchange",
|
|
1470
|
+
"description": "Fired when the active tab changes. Detail: `{ oldTab: string|null, newTab: string }`",
|
|
1471
|
+
"type": "CustomEvent"
|
|
1472
|
+
}
|
|
1473
|
+
],
|
|
1474
|
+
"slots": [
|
|
1475
|
+
{
|
|
1476
|
+
"name": "",
|
|
1477
|
+
"description": "Collection of `pds-tabpanel` nodes representing individual tab panels"
|
|
1478
|
+
}
|
|
1479
|
+
],
|
|
1480
|
+
"cssParts": [
|
|
1481
|
+
{
|
|
1482
|
+
"name": "tabs",
|
|
1483
|
+
"description": "Navigation container comprising the clickable tab buttons"
|
|
1484
|
+
}
|
|
1485
|
+
],
|
|
1486
|
+
"notes": []
|
|
1487
|
+
},
|
|
1488
|
+
"pds-toaster": {
|
|
1489
|
+
"tag": "pds-toaster",
|
|
1490
|
+
"className": "AppToaster",
|
|
1491
|
+
"displayName": "Pds Toaster",
|
|
1492
|
+
"storyTitle": "Components/Pds Toaster",
|
|
1493
|
+
"category": "Components",
|
|
1494
|
+
"description": null,
|
|
1495
|
+
"docsDescription": "Toast notification system with auto-dismiss and stacking. Toast notifications appear in the top-right corner and auto-dismiss after a few seconds based on message length.",
|
|
1496
|
+
"pdsTags": [
|
|
1497
|
+
"autodocs",
|
|
1498
|
+
"interaction",
|
|
1499
|
+
"notifications"
|
|
1500
|
+
],
|
|
1501
|
+
"ontology": null,
|
|
1502
|
+
"stories": [],
|
|
1503
|
+
"sourceModule": "public/assets/pds/components/pds-toaster.js",
|
|
1504
|
+
"superclass": "HTMLElement",
|
|
1505
|
+
"attributes": [],
|
|
1506
|
+
"properties": [
|
|
1507
|
+
{
|
|
1508
|
+
"name": "toasts",
|
|
1509
|
+
"attribute": null,
|
|
1510
|
+
"description": null,
|
|
1511
|
+
"type": "array",
|
|
1512
|
+
"default": "[]",
|
|
1513
|
+
"reflects": false,
|
|
1514
|
+
"privacy": "public"
|
|
1515
|
+
}
|
|
1516
|
+
],
|
|
1517
|
+
"methods": [
|
|
1518
|
+
{
|
|
1519
|
+
"name": "createToastElement",
|
|
1520
|
+
"description": "Build a DOM node representing a single toast notification.",
|
|
1521
|
+
"parameters": [
|
|
1522
|
+
{
|
|
1523
|
+
"name": "id",
|
|
1524
|
+
"type": "string",
|
|
1525
|
+
"description": null
|
|
1526
|
+
},
|
|
1527
|
+
{
|
|
1528
|
+
"name": "message",
|
|
1529
|
+
"type": "string",
|
|
1530
|
+
"description": null
|
|
1531
|
+
},
|
|
1532
|
+
{
|
|
1533
|
+
"name": "type",
|
|
1534
|
+
"type": "\"information\"|\"success\"|\"warning\"|\"error\"",
|
|
1535
|
+
"description": null
|
|
1536
|
+
},
|
|
1537
|
+
{
|
|
1538
|
+
"name": "closable",
|
|
1539
|
+
"type": "boolean",
|
|
1540
|
+
"description": null
|
|
1541
|
+
},
|
|
1542
|
+
{
|
|
1543
|
+
"name": "duration",
|
|
1544
|
+
"type": "number",
|
|
1545
|
+
"description": null
|
|
1546
|
+
},
|
|
1547
|
+
{
|
|
1548
|
+
"name": "persistent",
|
|
1549
|
+
"type": "boolean",
|
|
1550
|
+
"description": null
|
|
1551
|
+
}
|
|
1552
|
+
],
|
|
1553
|
+
"return": "HTMLElement"
|
|
1554
|
+
},
|
|
1555
|
+
{
|
|
1556
|
+
"name": "dismissAll",
|
|
1557
|
+
"description": "Close all active toasts.",
|
|
1558
|
+
"parameters": [],
|
|
1559
|
+
"return": null
|
|
1560
|
+
},
|
|
1561
|
+
{
|
|
1562
|
+
"name": "dismissToast",
|
|
1563
|
+
"description": "Dismiss a toast by ID",
|
|
1564
|
+
"parameters": [
|
|
1565
|
+
{
|
|
1566
|
+
"name": "toastId",
|
|
1567
|
+
"type": "string",
|
|
1568
|
+
"description": "The ID of the toast to dismiss"
|
|
1569
|
+
}
|
|
1570
|
+
],
|
|
1571
|
+
"return": null
|
|
1572
|
+
},
|
|
1573
|
+
{
|
|
1574
|
+
"name": "toast",
|
|
1575
|
+
"description": "Display a toast notification",
|
|
1576
|
+
"parameters": [
|
|
1577
|
+
{
|
|
1578
|
+
"name": "message",
|
|
1579
|
+
"type": "string",
|
|
1580
|
+
"description": "The message to display"
|
|
1581
|
+
},
|
|
1582
|
+
{
|
|
1583
|
+
"name": "options",
|
|
1584
|
+
"type": "@param {\"information\"|\"success\"|\"warning\"|\"error\"} [options.type=\"information\"] - Toast type\n * @param {number} [options.duration] - Duration in ms (auto-calculated if not provided)\n * @param {boolean} [options.closable=true] - Whether toast can be closed manually\n * @param {boolean} [options.persistent=false] - If true, toast doesn't auto-dismiss\n * ",
|
|
1585
|
+
"description": "Toast configuration"
|
|
1586
|
+
}
|
|
1587
|
+
],
|
|
1588
|
+
"return": "string"
|
|
1589
|
+
},
|
|
1590
|
+
{
|
|
1591
|
+
"name": "toastError",
|
|
1592
|
+
"description": "Display an error toast",
|
|
1593
|
+
"parameters": [
|
|
1594
|
+
{
|
|
1595
|
+
"name": "message",
|
|
1596
|
+
"type": "string",
|
|
1597
|
+
"description": "The message to display"
|
|
1598
|
+
},
|
|
1599
|
+
{
|
|
1600
|
+
"name": "options",
|
|
1601
|
+
"type": "Object",
|
|
1602
|
+
"description": "Toast configuration options"
|
|
1603
|
+
}
|
|
1604
|
+
],
|
|
1605
|
+
"return": "string"
|
|
1606
|
+
},
|
|
1607
|
+
{
|
|
1608
|
+
"name": "toastInfo",
|
|
1609
|
+
"description": "Display an information toast",
|
|
1610
|
+
"parameters": [
|
|
1611
|
+
{
|
|
1612
|
+
"name": "message",
|
|
1613
|
+
"type": "string",
|
|
1614
|
+
"description": "The message to display"
|
|
1615
|
+
},
|
|
1616
|
+
{
|
|
1617
|
+
"name": "options",
|
|
1618
|
+
"type": "Object",
|
|
1619
|
+
"description": "Toast configuration options"
|
|
1620
|
+
}
|
|
1621
|
+
],
|
|
1622
|
+
"return": "string"
|
|
1623
|
+
},
|
|
1624
|
+
{
|
|
1625
|
+
"name": "toastSuccess",
|
|
1626
|
+
"description": "Display a success toast",
|
|
1627
|
+
"parameters": [
|
|
1628
|
+
{
|
|
1629
|
+
"name": "message",
|
|
1630
|
+
"type": "string",
|
|
1631
|
+
"description": "The message to display"
|
|
1632
|
+
},
|
|
1633
|
+
{
|
|
1634
|
+
"name": "options",
|
|
1635
|
+
"type": "Object",
|
|
1636
|
+
"description": "Toast configuration options"
|
|
1637
|
+
}
|
|
1638
|
+
],
|
|
1639
|
+
"return": "string"
|
|
1640
|
+
},
|
|
1641
|
+
{
|
|
1642
|
+
"name": "toastWarning",
|
|
1643
|
+
"description": "Display a warning toast",
|
|
1644
|
+
"parameters": [
|
|
1645
|
+
{
|
|
1646
|
+
"name": "message",
|
|
1647
|
+
"type": "string",
|
|
1648
|
+
"description": "The message to display"
|
|
1649
|
+
},
|
|
1650
|
+
{
|
|
1651
|
+
"name": "options",
|
|
1652
|
+
"type": "Object",
|
|
1653
|
+
"description": "Toast configuration options"
|
|
1654
|
+
}
|
|
1655
|
+
],
|
|
1656
|
+
"return": "string"
|
|
1657
|
+
}
|
|
1658
|
+
],
|
|
1659
|
+
"events": [
|
|
1660
|
+
{
|
|
1661
|
+
"name": "pds:toast",
|
|
1662
|
+
"description": "Global event for creating toasts",
|
|
1663
|
+
"type": null
|
|
1664
|
+
}
|
|
1665
|
+
],
|
|
1666
|
+
"slots": [
|
|
1667
|
+
{
|
|
1668
|
+
"name": "",
|
|
1669
|
+
"description": "Toast messages are dynamically added to the shadow DOM"
|
|
1670
|
+
}
|
|
1671
|
+
],
|
|
1672
|
+
"cssParts": [],
|
|
1673
|
+
"notes": []
|
|
1674
|
+
},
|
|
1675
|
+
"pds-upload": {
|
|
1676
|
+
"tag": "pds-upload",
|
|
1677
|
+
"className": "UploadArea",
|
|
1678
|
+
"displayName": "Pds Upload",
|
|
1679
|
+
"storyTitle": "Components/Pds Upload",
|
|
1680
|
+
"category": "Components",
|
|
1681
|
+
"description": "Drag-and-drop file uploader that participates in native forms.",
|
|
1682
|
+
"docsDescription": "File upload with preview and validation",
|
|
1683
|
+
"pdsTags": [
|
|
1684
|
+
"autodocs",
|
|
1685
|
+
"forms"
|
|
1686
|
+
],
|
|
1687
|
+
"ontology": {
|
|
1688
|
+
"id": "pds-upload",
|
|
1689
|
+
"name": "Upload",
|
|
1690
|
+
"selectors": [
|
|
1691
|
+
"pds-upload"
|
|
1692
|
+
]
|
|
1693
|
+
},
|
|
1694
|
+
"stories": [
|
|
1695
|
+
{
|
|
1696
|
+
"exportName": "Default",
|
|
1697
|
+
"name": "Default",
|
|
1698
|
+
"id": "components-pds-upload--default",
|
|
1699
|
+
"tags": [],
|
|
1700
|
+
"description": null,
|
|
1701
|
+
"source": "stories\\components\\PdsUpload.stories.js"
|
|
1702
|
+
}
|
|
1703
|
+
],
|
|
1704
|
+
"sourceModule": "public/assets/pds/components/pds-upload.js",
|
|
1705
|
+
"superclass": "HTMLElement",
|
|
1706
|
+
"attributes": [
|
|
1707
|
+
{
|
|
1708
|
+
"name": "accept",
|
|
1709
|
+
"description": "Comma separated list of accepted MIME types and file extensions",
|
|
1710
|
+
"type": "string",
|
|
1711
|
+
"default": null,
|
|
1712
|
+
"fieldName": null
|
|
1713
|
+
},
|
|
1714
|
+
{
|
|
1715
|
+
"name": "multiple",
|
|
1716
|
+
"description": "Allows selecting more than one file",
|
|
1717
|
+
"type": "boolean",
|
|
1718
|
+
"default": null,
|
|
1719
|
+
"fieldName": null
|
|
1720
|
+
},
|
|
1721
|
+
{
|
|
1722
|
+
"name": "disabled",
|
|
1723
|
+
"description": "Disables interaction with the drop zone and button",
|
|
1724
|
+
"type": "boolean",
|
|
1725
|
+
"default": null,
|
|
1726
|
+
"fieldName": null
|
|
1727
|
+
},
|
|
1728
|
+
{
|
|
1729
|
+
"name": "max-files",
|
|
1730
|
+
"description": "Optional cap on the number of files the user may select",
|
|
1731
|
+
"type": "number",
|
|
1732
|
+
"default": null,
|
|
1733
|
+
"fieldName": null
|
|
1734
|
+
}
|
|
1735
|
+
],
|
|
1736
|
+
"properties": [
|
|
1737
|
+
{
|
|
1738
|
+
"name": "value",
|
|
1739
|
+
"attribute": null,
|
|
1740
|
+
"description": "Value is derived from the selected files and cannot be set manually.",
|
|
1741
|
+
"type": null,
|
|
1742
|
+
"default": null,
|
|
1743
|
+
"reflects": false,
|
|
1744
|
+
"privacy": "public"
|
|
1745
|
+
}
|
|
1746
|
+
],
|
|
1747
|
+
"methods": [
|
|
1748
|
+
{
|
|
1749
|
+
"name": "checkValidity",
|
|
1750
|
+
"description": "Run constraint validation leveraging ElementInternals.",
|
|
1751
|
+
"parameters": [],
|
|
1752
|
+
"return": "boolean"
|
|
1753
|
+
},
|
|
1754
|
+
{
|
|
1755
|
+
"name": "clear",
|
|
1756
|
+
"description": "Clear all selected files and update the UI accordingly.",
|
|
1757
|
+
"parameters": [],
|
|
1758
|
+
"return": null
|
|
1759
|
+
},
|
|
1760
|
+
{
|
|
1761
|
+
"name": "clear",
|
|
1762
|
+
"description": "Remove all files and emit a change notification.",
|
|
1763
|
+
"parameters": [],
|
|
1764
|
+
"return": null
|
|
1765
|
+
},
|
|
1766
|
+
{
|
|
1767
|
+
"name": "formAssociatedCallback",
|
|
1768
|
+
"description": "Invoked when the element becomes associated with a `<form>`.",
|
|
1769
|
+
"parameters": [],
|
|
1770
|
+
"return": null
|
|
1771
|
+
},
|
|
1772
|
+
{
|
|
1773
|
+
"name": "formDisabledCallback",
|
|
1774
|
+
"description": "Sync disabled state across internal controls when the host form toggles.",
|
|
1775
|
+
"parameters": [
|
|
1776
|
+
{
|
|
1777
|
+
"name": "disabled",
|
|
1778
|
+
"type": "boolean",
|
|
1779
|
+
"description": null
|
|
1780
|
+
}
|
|
1781
|
+
],
|
|
1782
|
+
"return": null
|
|
1783
|
+
},
|
|
1784
|
+
{
|
|
1785
|
+
"name": "formResetCallback",
|
|
1786
|
+
"description": "Clear selected files when the host form resets.",
|
|
1787
|
+
"parameters": [],
|
|
1788
|
+
"return": null
|
|
1789
|
+
},
|
|
1790
|
+
{
|
|
1791
|
+
"name": "formStateRestoreCallback",
|
|
1792
|
+
"description": "Restore previously submitted files during BFCache or session restores.",
|
|
1793
|
+
"parameters": [
|
|
1794
|
+
{
|
|
1795
|
+
"name": "state",
|
|
1796
|
+
"type": "File[]",
|
|
1797
|
+
"description": null
|
|
1798
|
+
}
|
|
1799
|
+
],
|
|
1800
|
+
"return": null
|
|
1801
|
+
},
|
|
1802
|
+
{
|
|
1803
|
+
"name": "getFiles",
|
|
1804
|
+
"description": "Retrieve a shallow copy of the current file selection.",
|
|
1805
|
+
"parameters": [],
|
|
1806
|
+
"return": "File[]"
|
|
1807
|
+
},
|
|
1808
|
+
{
|
|
1809
|
+
"name": "reportValidity",
|
|
1810
|
+
"description": "Report validity issues using the browser UI.",
|
|
1811
|
+
"parameters": [],
|
|
1812
|
+
"return": "boolean"
|
|
1813
|
+
}
|
|
1814
|
+
],
|
|
1815
|
+
"events": [
|
|
1816
|
+
{
|
|
1817
|
+
"name": "files-changed",
|
|
1818
|
+
"description": null,
|
|
1819
|
+
"type": "CustomEvent"
|
|
1820
|
+
}
|
|
1821
|
+
],
|
|
1822
|
+
"slots": [],
|
|
1823
|
+
"cssParts": [],
|
|
1824
|
+
"notes": []
|
|
1825
|
+
}
|
|
1826
|
+
},
|
|
1827
|
+
"primitives": {
|
|
1828
|
+
"primitives": [
|
|
1829
|
+
{
|
|
1830
|
+
"id": "badge",
|
|
1831
|
+
"name": "Badge / Pill",
|
|
1832
|
+
"selectors": [
|
|
1833
|
+
".badge",
|
|
1834
|
+
".pill",
|
|
1835
|
+
".tag",
|
|
1836
|
+
".chip"
|
|
1837
|
+
]
|
|
1838
|
+
},
|
|
1839
|
+
{
|
|
1840
|
+
"id": "card",
|
|
1841
|
+
"name": "Card",
|
|
1842
|
+
"selectors": [
|
|
1843
|
+
".card",
|
|
1844
|
+
".card-basic",
|
|
1845
|
+
".card-elevated",
|
|
1846
|
+
".card-outlined",
|
|
1847
|
+
".card-interactive"
|
|
1848
|
+
]
|
|
1849
|
+
},
|
|
1850
|
+
{
|
|
1851
|
+
"id": "surface",
|
|
1852
|
+
"name": "Surface",
|
|
1853
|
+
"selectors": [
|
|
1854
|
+
".surface",
|
|
1855
|
+
".surface-base",
|
|
1856
|
+
".surface-raised",
|
|
1857
|
+
".surface-overlay",
|
|
1858
|
+
".surface-subtle",
|
|
1859
|
+
".surface-elevated",
|
|
1860
|
+
".surface-sunken"
|
|
1861
|
+
]
|
|
1862
|
+
},
|
|
1863
|
+
{
|
|
1864
|
+
"id": "alert",
|
|
1865
|
+
"name": "Alert",
|
|
1866
|
+
"selectors": [
|
|
1867
|
+
".alert",
|
|
1868
|
+
".alert-info",
|
|
1869
|
+
".alert-success",
|
|
1870
|
+
".alert-warning",
|
|
1871
|
+
".alert-danger"
|
|
1872
|
+
]
|
|
1873
|
+
},
|
|
1874
|
+
{
|
|
1875
|
+
"id": "dialog",
|
|
1876
|
+
"name": "Dialog",
|
|
1877
|
+
"selectors": [
|
|
1878
|
+
"dialog",
|
|
1879
|
+
".dialog"
|
|
1880
|
+
]
|
|
1881
|
+
},
|
|
1882
|
+
{
|
|
1883
|
+
"id": "table",
|
|
1884
|
+
"name": "Table",
|
|
1885
|
+
"selectors": [
|
|
1886
|
+
"table",
|
|
1887
|
+
".table-responsive",
|
|
1888
|
+
".data-table"
|
|
1889
|
+
]
|
|
1890
|
+
},
|
|
1891
|
+
{
|
|
1892
|
+
"id": "button",
|
|
1893
|
+
"name": "Button",
|
|
1894
|
+
"selectors": [
|
|
1895
|
+
"button",
|
|
1896
|
+
"[class^='btn-']",
|
|
1897
|
+
".icon-only"
|
|
1898
|
+
]
|
|
1899
|
+
},
|
|
1900
|
+
{
|
|
1901
|
+
"id": "fieldset",
|
|
1902
|
+
"name": "Fieldset Group",
|
|
1903
|
+
"selectors": [
|
|
1904
|
+
"fieldset[role='group']",
|
|
1905
|
+
"fieldset[role='radiogroup']"
|
|
1906
|
+
]
|
|
1907
|
+
},
|
|
1908
|
+
{
|
|
1909
|
+
"id": "label-field",
|
|
1910
|
+
"name": "Label+Input",
|
|
1911
|
+
"selectors": [
|
|
1912
|
+
"label"
|
|
1913
|
+
]
|
|
1914
|
+
},
|
|
1915
|
+
{
|
|
1916
|
+
"id": "accordion",
|
|
1917
|
+
"name": "Accordion",
|
|
1918
|
+
"selectors": [
|
|
1919
|
+
".accordion",
|
|
1920
|
+
".accordion-item",
|
|
1921
|
+
"details"
|
|
1922
|
+
]
|
|
1923
|
+
},
|
|
1924
|
+
{
|
|
1925
|
+
"id": "icon",
|
|
1926
|
+
"name": "Icon",
|
|
1927
|
+
"selectors": [
|
|
1928
|
+
"pds-icon",
|
|
1929
|
+
".icon",
|
|
1930
|
+
".icon-*"
|
|
1931
|
+
]
|
|
1932
|
+
},
|
|
1933
|
+
{
|
|
1934
|
+
"id": "figure",
|
|
1935
|
+
"name": "Figure/Media",
|
|
1936
|
+
"selectors": [
|
|
1937
|
+
"figure",
|
|
1938
|
+
"figure.media"
|
|
1939
|
+
]
|
|
1940
|
+
},
|
|
1941
|
+
{
|
|
1942
|
+
"id": "gallery",
|
|
1943
|
+
"name": "Gallery",
|
|
1944
|
+
"selectors": [
|
|
1945
|
+
".gallery",
|
|
1946
|
+
".gallery-grid"
|
|
1947
|
+
]
|
|
1948
|
+
}
|
|
1949
|
+
],
|
|
1950
|
+
"layoutPatterns": [
|
|
1951
|
+
{
|
|
1952
|
+
"id": "grid",
|
|
1953
|
+
"name": "Grid Container",
|
|
1954
|
+
"description": "CSS Grid layout container",
|
|
1955
|
+
"selectors": [
|
|
1956
|
+
".grid",
|
|
1957
|
+
".demo-grid"
|
|
1958
|
+
]
|
|
1959
|
+
},
|
|
1960
|
+
{
|
|
1961
|
+
"id": "grid-auto",
|
|
1962
|
+
"name": "Auto-fit Grid",
|
|
1963
|
+
"description": "Responsive auto-fit grid",
|
|
1964
|
+
"selectors": [
|
|
1965
|
+
".grid-auto-sm",
|
|
1966
|
+
".grid-auto-md",
|
|
1967
|
+
".grid-auto-lg",
|
|
1968
|
+
".grid-auto-xl"
|
|
1969
|
+
]
|
|
1970
|
+
},
|
|
1971
|
+
{
|
|
1972
|
+
"id": "grid-cols",
|
|
1973
|
+
"name": "Grid Columns",
|
|
1974
|
+
"description": "Fixed column grid",
|
|
1975
|
+
"selectors": [
|
|
1976
|
+
".grid-cols-1",
|
|
1977
|
+
".grid-cols-2",
|
|
1978
|
+
".grid-cols-3",
|
|
1979
|
+
".grid-cols-4",
|
|
1980
|
+
".grid-cols-6"
|
|
1981
|
+
]
|
|
1982
|
+
},
|
|
1983
|
+
{
|
|
1984
|
+
"id": "flex",
|
|
1985
|
+
"name": "Flex Container",
|
|
1986
|
+
"description": "Flexbox layout container",
|
|
1987
|
+
"selectors": [
|
|
1988
|
+
".flex",
|
|
1989
|
+
".flex-wrap"
|
|
1990
|
+
]
|
|
1991
|
+
},
|
|
1992
|
+
{
|
|
1993
|
+
"id": "container",
|
|
1994
|
+
"name": "Container",
|
|
1995
|
+
"description": "Centered max-width container",
|
|
1996
|
+
"selectors": [
|
|
1997
|
+
".container"
|
|
1998
|
+
]
|
|
1999
|
+
},
|
|
2000
|
+
{
|
|
2001
|
+
"id": "media-grid",
|
|
2002
|
+
"name": "Media Grid",
|
|
2003
|
+
"description": "Grid for media elements",
|
|
2004
|
+
"selectors": [
|
|
2005
|
+
".media-grid"
|
|
2006
|
+
]
|
|
2007
|
+
}
|
|
2008
|
+
],
|
|
2009
|
+
"utilities": [
|
|
2010
|
+
".btn-group",
|
|
2011
|
+
".demo-grid",
|
|
2012
|
+
".color-scale",
|
|
2013
|
+
".gap-*",
|
|
2014
|
+
".items-*",
|
|
2015
|
+
".justify-*",
|
|
2016
|
+
".border-gradient",
|
|
2017
|
+
".border-gradient-primary",
|
|
2018
|
+
".border-gradient-accent",
|
|
2019
|
+
".border-gradient-secondary",
|
|
2020
|
+
".border-gradient-soft",
|
|
2021
|
+
".border-gradient-medium",
|
|
2022
|
+
".border-gradient-strong",
|
|
2023
|
+
".border-glow",
|
|
2024
|
+
".border-glow-sm",
|
|
2025
|
+
".border-glow-lg",
|
|
2026
|
+
".border-gradient-glow",
|
|
2027
|
+
".border-glow-*"
|
|
2028
|
+
]
|
|
2029
|
+
},
|
|
2030
|
+
"enhancements": [
|
|
2031
|
+
{
|
|
2032
|
+
"id": "button-a-class-btn",
|
|
2033
|
+
"selector": "button, a[class*='btn-']",
|
|
2034
|
+
"description": "Automatically manages spinner icon for buttons with .btn-working class",
|
|
2035
|
+
"demoHtml": "<button class=\"btn-primary btn-working\">\n <span>Saving</span>\n </button>",
|
|
2036
|
+
"source": "src\\js\\pds-core\\pds-enhancers.js"
|
|
2037
|
+
},
|
|
2038
|
+
{
|
|
2039
|
+
"id": "fieldset-role-group-data-open",
|
|
2040
|
+
"selector": "fieldset[role=group][data-open]",
|
|
2041
|
+
"description": "Enhances a checkbox/radio group to be open (have a way to add and remove items).",
|
|
2042
|
+
"demoHtml": "<fieldset role=\"group\" data-open>\n <label>\n <span data-label>Test</span>\n <input value=\"lala\" name=\"test1\" type=\"radio\" />\n </label>\n </fieldset>",
|
|
2043
|
+
"source": "src\\js\\pds-core\\pds-enhancers.js"
|
|
2044
|
+
},
|
|
2045
|
+
{
|
|
2046
|
+
"id": "form-required",
|
|
2047
|
+
"selector": "form [required]",
|
|
2048
|
+
"description": "Enhances required form fields using an asterisk in the label.",
|
|
2049
|
+
"demoHtml": "<form action'#\" method=\"post\">\n <label>\n <span>Field Label</span>\n <input type=\"text\" required>\n </label>\n <nav class=\"form-actions\">\n <button type=\"submit\" class=\"btn-primary\">Submit</button>\n </nav>\n </form>",
|
|
2050
|
+
"source": "src\\js\\pds-core\\pds-enhancers.js"
|
|
2051
|
+
},
|
|
2052
|
+
{
|
|
2053
|
+
"id": "input-type-range",
|
|
2054
|
+
"selector": "input[type=\"range\"]",
|
|
2055
|
+
"description": "Enhances range inputs with an attached <output>.",
|
|
2056
|
+
"demoHtml": "<label class=\"range-output\">\n <span data-label>Volume</span>\n <input type=\"range\" min=\"0\" max=\"100\" value=\"40\">\n </label>",
|
|
2057
|
+
"source": "src\\js\\pds-core\\pds-enhancers.js"
|
|
2058
|
+
},
|
|
2059
|
+
{
|
|
2060
|
+
"id": "label-data-toggle",
|
|
2061
|
+
"selector": "label[data-toggle]",
|
|
2062
|
+
"description": "Creates a toggle switch element from a checkbox.",
|
|
2063
|
+
"demoHtml": "<label data-toggle>\n <input type=\"checkbox\">\n <span data-label>Enable notifications</span>\n </label>",
|
|
2064
|
+
"source": "src\\js\\pds-core\\pds-enhancers.js"
|
|
2065
|
+
},
|
|
2066
|
+
{
|
|
2067
|
+
"id": "nav-data-dropdown",
|
|
2068
|
+
"selector": "nav[data-dropdown]",
|
|
2069
|
+
"description": "Enhances a nav element with data-dropdown to function as a dropdown menu.",
|
|
2070
|
+
"demoHtml": "<nav data-dropdown>\n <button class=\"btn-primary\">Menu</button>\n <menu>\n <li><a href=\"#\">Item 1</a></li>\n <li><a href=\"#\">Item 2</a></li>\n </menu>\n </nav>",
|
|
2071
|
+
"source": "src\\js\\pds-core\\pds-enhancers.js"
|
|
2072
|
+
}
|
|
2073
|
+
],
|
|
2074
|
+
"tokens": {
|
|
2075
|
+
"colors": [
|
|
2076
|
+
"primary",
|
|
2077
|
+
"secondary",
|
|
2078
|
+
"accent",
|
|
2079
|
+
"success",
|
|
2080
|
+
"warning",
|
|
2081
|
+
"danger",
|
|
2082
|
+
"info"
|
|
2083
|
+
],
|
|
2084
|
+
"spacing": [
|
|
2085
|
+
"xs",
|
|
2086
|
+
"sm",
|
|
2087
|
+
"md",
|
|
2088
|
+
"lg",
|
|
2089
|
+
"xl"
|
|
2090
|
+
],
|
|
2091
|
+
"typography": [
|
|
2092
|
+
"heading",
|
|
2093
|
+
"body",
|
|
2094
|
+
"mono"
|
|
2095
|
+
],
|
|
2096
|
+
"themes": [
|
|
2097
|
+
"light",
|
|
2098
|
+
"dark"
|
|
2099
|
+
]
|
|
2100
|
+
}
|
|
2101
|
+
}
|