@pine-ds/core 0.0.4 → 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/components/pds-accordion.d.ts +11 -0
- package/components/pds-accordion.js +67 -0
- package/components/pds-accordion.js.map +1 -0
- package/components/pds-avatar.js +1 -1
- package/components/pds-box.js +1 -1
- package/components/pds-button2.js +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-chip.js +1 -1
- package/components/pds-copytext.js +1 -1
- package/components/pds-divider.js +1 -1
- package/components/pds-image.js +2 -2
- package/components/pds-input.js +1 -1
- package/components/pds-link.js +1 -1
- package/components/pds-progress.js +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-row.js +1 -1
- package/components/pds-sortable-item.js +1 -1
- package/components/pds-sortable.js +1 -1
- package/components/pds-switch.js +1 -1
- package/components/pds-tab.js +3 -3
- package/components/pds-table-body.js +1 -1
- package/components/pds-table-cell2.js +2 -2
- package/components/pds-table-head-cell2.js +2 -2
- package/components/pds-table-head.js +1 -1
- package/components/pds-table-row.js +1 -1
- package/components/pds-table.js +1 -1
- package/components/pds-tabpanel.js +1 -1
- package/components/pds-tabs.js +1 -1
- package/components/pds-textarea.js +2 -2
- package/components/pds-tooltip.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js +42 -0
- package/dist/cjs/pds-accordion.cjs.entry.js.map +1 -0
- package/dist/cjs/pds-avatar.cjs.entry.js +1 -1
- package/dist/cjs/pds-box.cjs.entry.js +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +1 -1
- package/dist/cjs/pds-checkbox_2.cjs.entry.js +3 -3
- package/dist/cjs/pds-chip.cjs.entry.js +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +1 -1
- package/dist/cjs/pds-divider.cjs.entry.js +1 -1
- package/dist/cjs/pds-image.cjs.entry.js +2 -2
- package/dist/cjs/pds-input.cjs.entry.js +1 -1
- package/dist/cjs/pds-link.cjs.entry.js +1 -1
- package/dist/cjs/pds-progress.cjs.entry.js +1 -1
- package/dist/cjs/pds-radio.cjs.entry.js +1 -1
- package/dist/cjs/pds-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-sortable-item.cjs.entry.js +1 -1
- package/dist/cjs/pds-sortable.cjs.entry.js +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +1 -1
- package/dist/cjs/pds-tab.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-body.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-head.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-table.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabpanel.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabs.cjs.entry.js +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +2 -2
- package/dist/cjs/pds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/pds-accordion/pds-accordion.css +55 -0
- package/dist/collection/components/pds-accordion/pds-accordion.js +93 -0
- package/dist/collection/components/pds-accordion/pds-accordion.js.map +1 -0
- package/dist/collection/components/pds-accordion/stories/pds-accordion.stories.js +34 -0
- package/dist/collection/components/pds-avatar/pds-avatar.js +1 -1
- package/dist/collection/components/pds-box/pds-box.js +1 -1
- package/dist/collection/components/pds-button/pds-button.js +1 -1
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +1 -1
- package/dist/collection/components/pds-chip/pds-chip.js +1 -1
- package/dist/collection/components/pds-copytext/pds-copytext.js +1 -1
- package/dist/collection/components/pds-divider/pds-divider.js +1 -1
- package/dist/collection/components/pds-image/pds-image.js +2 -2
- package/dist/collection/components/pds-input/pds-input.js +1 -1
- package/dist/collection/components/pds-link/pds-link.js +1 -1
- package/dist/collection/components/pds-progress/pds-progress.js +1 -1
- package/dist/collection/components/pds-radio/pds-radio.js +1 -1
- package/dist/collection/components/pds-row/pds-row.js +1 -1
- package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +1 -1
- package/dist/collection/components/pds-sortable/pds-sortable.js +1 -1
- package/dist/collection/components/pds-switch/pds-switch.js +1 -1
- package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
- package/dist/collection/components/pds-table/pds-table.js +1 -1
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +3 -3
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +1 -1
- package/dist/collection/components/pds-tabs/pds-tabs.js +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.js +2 -2
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
- package/dist/docs.json +98 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pds-accordion.entry.js +38 -0
- package/dist/esm/pds-accordion.entry.js.map +1 -0
- package/dist/esm/pds-avatar.entry.js +1 -1
- package/dist/esm/pds-box.entry.js +1 -1
- package/dist/esm/pds-button.entry.js +1 -1
- package/dist/esm/pds-checkbox_2.entry.js +3 -3
- package/dist/esm/pds-chip.entry.js +1 -1
- package/dist/esm/pds-copytext.entry.js +1 -1
- package/dist/esm/pds-divider.entry.js +1 -1
- package/dist/esm/pds-image.entry.js +2 -2
- package/dist/esm/pds-input.entry.js +1 -1
- package/dist/esm/pds-link.entry.js +1 -1
- package/dist/esm/pds-progress.entry.js +1 -1
- package/dist/esm/pds-radio.entry.js +1 -1
- package/dist/esm/pds-row.entry.js +1 -1
- package/dist/esm/pds-sortable-item.entry.js +1 -1
- package/dist/esm/pds-sortable.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js +1 -1
- package/dist/esm/pds-tab.entry.js +3 -3
- package/dist/esm/pds-table-body.entry.js +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +2 -2
- package/dist/esm/pds-table-head.entry.js +1 -1
- package/dist/esm/pds-table-row.entry.js +1 -1
- package/dist/esm/pds-table.entry.js +1 -1
- package/dist/esm/pds-tabpanel.entry.js +1 -1
- package/dist/esm/pds-tabs.entry.js +1 -1
- package/dist/esm/pds-textarea.entry.js +2 -2
- package/dist/esm/pds-tooltip.entry.js +2 -2
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +2 -0
- package/dist/esm-es5/pds-accordion.entry.js.map +1 -0
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox_2.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-divider.entry.js +1 -1
- package/dist/esm-es5/pds-image.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-progress.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-sortable.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-table-body.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.entry.js +1 -1
- package/dist/esm-es5/pds-table-row.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/esm-es5/pine-core.js.map +1 -1
- package/dist/pine-core/{p-c36795fd.entry.js → p-01866f1a.entry.js} +2 -2
- package/dist/pine-core/p-0223de0a.entry.js +2 -0
- package/dist/pine-core/p-0e6e1833.entry.js +2 -0
- package/dist/pine-core/{p-c743e545.entry.js.map → p-0e6e1833.entry.js.map} +1 -1
- package/dist/pine-core/{p-590b8bc3.system.entry.js → p-135ee6e2.system.entry.js} +2 -2
- package/dist/pine-core/{p-be00178d.entry.js → p-18ba9e23.entry.js} +2 -2
- package/dist/pine-core/{p-54d324c2.system.entry.js → p-1977bfef.system.entry.js} +2 -2
- package/dist/pine-core/{p-9b5cd6ab.entry.js → p-22017122.entry.js} +2 -2
- package/dist/pine-core/{p-9fe27345.system.entry.js → p-35817ea5.system.entry.js} +2 -2
- package/dist/pine-core/{p-dbe98ba2.system.entry.js → p-360d4f79.system.entry.js} +2 -2
- package/dist/pine-core/{p-5eaff61a.system.entry.js → p-3813ace7.system.entry.js} +2 -2
- package/dist/pine-core/{p-0305f8c8.entry.js → p-416b7bd0.entry.js} +2 -2
- package/dist/pine-core/{p-763e2f83.entry.js → p-42ac8791.entry.js} +2 -2
- package/dist/pine-core/{p-d94dd844.system.entry.js → p-49ab971c.system.entry.js} +2 -2
- package/dist/pine-core/{p-627d088d.entry.js → p-4e4221e7.entry.js} +2 -2
- package/dist/pine-core/{p-25ffc9e2.entry.js → p-53eef5cf.entry.js} +2 -2
- package/dist/pine-core/{p-f17edd95.entry.js → p-54f515b7.entry.js} +2 -2
- package/dist/pine-core/{p-7a7416d5.system.entry.js → p-58245cbe.system.entry.js} +2 -2
- package/dist/pine-core/{p-ad186d12.system.entry.js → p-6044a5e6.system.entry.js} +2 -2
- package/dist/pine-core/{p-462f2b14.entry.js → p-608b7117.entry.js} +2 -2
- package/dist/pine-core/{p-5af9b6e2.entry.js → p-6457ee90.entry.js} +2 -2
- package/dist/pine-core/{p-bdebf156.system.entry.js → p-66bdd195.system.entry.js} +2 -2
- package/dist/pine-core/{p-f2c6b33e.system.entry.js → p-67980c37.system.entry.js} +2 -2
- package/dist/pine-core/{p-8fe57bfa.entry.js → p-694b1551.entry.js} +2 -2
- package/dist/pine-core/{p-c5641077.entry.js → p-6cf3a95f.entry.js} +2 -2
- package/dist/pine-core/p-7080c3d8.system.entry.js +2 -0
- package/dist/pine-core/{p-b5b59894.system.entry.js → p-70aafb29.system.entry.js} +2 -2
- package/dist/pine-core/{p-25f4a2c1.entry.js → p-713203a1.entry.js} +2 -2
- package/dist/pine-core/{p-84c19af2.system.entry.js → p-7bb9c112.system.entry.js} +2 -2
- package/dist/pine-core/{p-57da3e93.system.entry.js → p-7dbf72d0.system.entry.js} +2 -2
- package/dist/pine-core/{p-a246e1d1.system.entry.js → p-7e77ef60.system.entry.js} +2 -2
- package/dist/pine-core/{p-0c37f840.system.entry.js → p-81c5ccc0.system.entry.js} +2 -2
- package/dist/pine-core/{p-72065c3a.system.entry.js → p-8e6e3903.system.entry.js} +2 -2
- package/dist/pine-core/p-90dc441e.entry.js +2 -0
- package/dist/pine-core/p-90dc441e.entry.js.map +1 -0
- package/dist/pine-core/{p-f198ef17.entry.js → p-925cd323.entry.js} +2 -2
- package/dist/pine-core/p-988c3c8e.system.entry.js +2 -0
- package/dist/pine-core/p-988c3c8e.system.entry.js.map +1 -0
- package/dist/pine-core/{p-36862fec.system.entry.js → p-99778b1f.system.entry.js} +2 -2
- package/dist/pine-core/{p-c76ace76.system.entry.js → p-9e986a25.system.entry.js} +2 -2
- package/dist/pine-core/{p-6c3a05cf.entry.js → p-a1fab6ca.entry.js} +2 -2
- package/dist/pine-core/{p-4abda138.system.entry.js → p-aa5d045c.system.entry.js} +2 -2
- package/dist/pine-core/{p-68e7924e.system.entry.js → p-b4fcd4c2.system.entry.js} +2 -2
- package/dist/pine-core/p-b6a4d813.system.js +1 -1
- package/dist/pine-core/p-b6a4d813.system.js.map +1 -1
- package/dist/pine-core/{p-a923b153.entry.js → p-b854a2b6.entry.js} +2 -2
- package/dist/pine-core/{p-59db2abd.system.entry.js → p-bde59444.system.entry.js} +2 -2
- package/dist/pine-core/{p-748df843.entry.js → p-c0773da6.entry.js} +2 -2
- package/dist/pine-core/{p-d833e66e.entry.js → p-c584ec61.entry.js} +2 -2
- package/dist/pine-core/{p-20266cb6.entry.js → p-cc79e06a.entry.js} +2 -2
- package/dist/pine-core/{p-1d55b43e.entry.js → p-d4e439f5.entry.js} +2 -2
- package/dist/pine-core/{p-5fd196d6.entry.js → p-d9dcf4b5.entry.js} +2 -2
- package/dist/pine-core/{p-85a97505.system.entry.js → p-de162d6f.system.entry.js} +2 -2
- package/dist/pine-core/{p-a090344d.entry.js → p-ee6381bd.entry.js} +2 -2
- package/dist/pine-core/{p-1e1f6bc4.system.entry.js → p-f56a956a.system.entry.js} +2 -2
- package/dist/pine-core/{p-f329268a.entry.js → p-f953fd02.entry.js} +2 -2
- package/dist/pine-core/{p-0dacd1cd.entry.js → p-fb80556c.entry.js} +2 -2
- package/dist/pine-core/{p-588cb0d6.system.entry.js → p-fd1136bd.system.entry.js} +2 -2
- package/dist/pine-core/{p-3fc7e481.system.entry.js → p-fd9e7deb.system.entry.js} +2 -2
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/pine-core/pine-core.esm.js.map +1 -1
- package/dist/types/components/pds-accordion/pds-accordion.d.ts +22 -0
- package/dist/types/components.d.ts +33 -0
- package/package.json +3 -3
- package/dist/pine-core/p-4c2fa718.entry.js +0 -2
- package/dist/pine-core/p-a3ad3496.system.entry.js +0 -2
- package/dist/pine-core/p-c743e545.entry.js +0 -2
- /package/dist/pine-core/{p-c36795fd.entry.js.map → p-01866f1a.entry.js.map} +0 -0
- /package/dist/pine-core/{p-4c2fa718.entry.js.map → p-0223de0a.entry.js.map} +0 -0
- /package/dist/pine-core/{p-590b8bc3.system.entry.js.map → p-135ee6e2.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-be00178d.entry.js.map → p-18ba9e23.entry.js.map} +0 -0
- /package/dist/pine-core/{p-54d324c2.system.entry.js.map → p-1977bfef.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-9b5cd6ab.entry.js.map → p-22017122.entry.js.map} +0 -0
- /package/dist/pine-core/{p-9fe27345.system.entry.js.map → p-35817ea5.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-dbe98ba2.system.entry.js.map → p-360d4f79.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5eaff61a.system.entry.js.map → p-3813ace7.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0305f8c8.entry.js.map → p-416b7bd0.entry.js.map} +0 -0
- /package/dist/pine-core/{p-763e2f83.entry.js.map → p-42ac8791.entry.js.map} +0 -0
- /package/dist/pine-core/{p-d94dd844.system.entry.js.map → p-49ab971c.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-627d088d.entry.js.map → p-4e4221e7.entry.js.map} +0 -0
- /package/dist/pine-core/{p-25ffc9e2.entry.js.map → p-53eef5cf.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f17edd95.entry.js.map → p-54f515b7.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7a7416d5.system.entry.js.map → p-58245cbe.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-ad186d12.system.entry.js.map → p-6044a5e6.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-462f2b14.entry.js.map → p-608b7117.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5af9b6e2.entry.js.map → p-6457ee90.entry.js.map} +0 -0
- /package/dist/pine-core/{p-bdebf156.system.entry.js.map → p-66bdd195.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f2c6b33e.system.entry.js.map → p-67980c37.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-8fe57bfa.entry.js.map → p-694b1551.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c5641077.entry.js.map → p-6cf3a95f.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a3ad3496.system.entry.js.map → p-7080c3d8.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b5b59894.system.entry.js.map → p-70aafb29.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-25f4a2c1.entry.js.map → p-713203a1.entry.js.map} +0 -0
- /package/dist/pine-core/{p-84c19af2.system.entry.js.map → p-7bb9c112.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-57da3e93.system.entry.js.map → p-7dbf72d0.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a246e1d1.system.entry.js.map → p-7e77ef60.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0c37f840.system.entry.js.map → p-81c5ccc0.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-72065c3a.system.entry.js.map → p-8e6e3903.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f198ef17.entry.js.map → p-925cd323.entry.js.map} +0 -0
- /package/dist/pine-core/{p-36862fec.system.entry.js.map → p-99778b1f.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c76ace76.system.entry.js.map → p-9e986a25.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-6c3a05cf.entry.js.map → p-a1fab6ca.entry.js.map} +0 -0
- /package/dist/pine-core/{p-4abda138.system.entry.js.map → p-aa5d045c.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-68e7924e.system.entry.js.map → p-b4fcd4c2.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a923b153.entry.js.map → p-b854a2b6.entry.js.map} +0 -0
- /package/dist/pine-core/{p-59db2abd.system.entry.js.map → p-bde59444.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-748df843.entry.js.map → p-c0773da6.entry.js.map} +0 -0
- /package/dist/pine-core/{p-d833e66e.entry.js.map → p-c584ec61.entry.js.map} +0 -0
- /package/dist/pine-core/{p-20266cb6.entry.js.map → p-cc79e06a.entry.js.map} +0 -0
- /package/dist/pine-core/{p-1d55b43e.entry.js.map → p-d4e439f5.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5fd196d6.entry.js.map → p-d9dcf4b5.entry.js.map} +0 -0
- /package/dist/pine-core/{p-85a97505.system.entry.js.map → p-de162d6f.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a090344d.entry.js.map → p-ee6381bd.entry.js.map} +0 -0
- /package/dist/pine-core/{p-1e1f6bc4.system.entry.js.map → p-f56a956a.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f329268a.entry.js.map → p-f953fd02.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0dacd1cd.entry.js.map → p-fb80556c.entry.js.map} +0 -0
- /package/dist/pine-core/{p-588cb0d6.system.entry.js.map → p-fd1136bd.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-3fc7e481.system.entry.js.map → p-fd9e7deb.system.entry.js.map} +0 -0
|
@@ -50,7 +50,7 @@ const PdsCheckbox = class {
|
|
|
50
50
|
return classNames.join(' ');
|
|
51
51
|
}
|
|
52
52
|
render() {
|
|
53
|
-
return (index.h(index.Host, { key: '
|
|
53
|
+
return (index.h(index.Host, { key: 'df4d541eb43253bac6d9f0396d5af5c0a0181db0', class: this.classNames() }, index.h("input", { key: '59f4ff764cdf4fac9ff38a734b91cf31219f2a59', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), index.h(pdsLabel.PdsLabel, { key: '99da91ab0d67c72f29092a623164b0822ff56a66', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
|
|
54
54
|
index.h("div", { class: 'pds-checkbox__message', id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
55
55
|
index.h("div", { class: `pds-checkbox__message pds-checkbox__message--error`, id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
|
|
56
56
|
}
|
|
@@ -96,11 +96,11 @@ const PdsTableCell = class {
|
|
|
96
96
|
return classNames.join(' ');
|
|
97
97
|
}
|
|
98
98
|
render() {
|
|
99
|
-
return (index.h(index.Host, { key: '
|
|
99
|
+
return (index.h(index.Host, { key: '71ff527047eaafcf9b9c57a6aa96634e4a887f0b', class: this.classNames(), role: "gridcell", style: this.tableRef &&
|
|
100
100
|
this.tableRef.fixedColumn &&
|
|
101
101
|
this.tableRef.selectable
|
|
102
102
|
? { '--fixed-cell-position': '40px' }
|
|
103
|
-
: {} }, index.h("slot", { key: '
|
|
103
|
+
: {} }, index.h("slot", { key: 'b62c595da7fbf8795e90c67c3d50b9f5e7449067' })));
|
|
104
104
|
}
|
|
105
105
|
get hostElement() { return index.getElement(this); }
|
|
106
106
|
};
|
|
@@ -40,7 +40,7 @@ const PdsChip = class {
|
|
|
40
40
|
return chipContent;
|
|
41
41
|
}
|
|
42
42
|
render() {
|
|
43
|
-
return (index.h(index.Host, { key: '
|
|
43
|
+
return (index.h(index.Host, { key: '224fcbae613eb1a7a8ab5661582e06612aa3c491', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (index.h("button", { class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, index.h("pds-icon", { name: "remove", size: "12px" })))));
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
46
|
PdsChip.style = PdsChipStyle0;
|
|
@@ -59,7 +59,7 @@ const PdsCopytext = class {
|
|
|
59
59
|
return classNames.join(' ');
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
return (index.h(index.Host, { key: '
|
|
62
|
+
return (index.h(index.Host, { key: '650ef9a2f68e604211c98721ef61e68a44a619b2', class: this.classNames(), id: this.componentId }, index.h("pds-button", { key: '3c4e3d7779e794c65115431ea93e6c321c5e8f83', type: "button", variant: "unstyled", onClick: this.handleClick }, index.h("span", { key: 'e755703bd191e440d1b10250027c1dfcf1340cbe' }, this.value), index.h("pds-icon", { key: '6fc35fd7fef1a98b9f248054a2927a1b006561d0', name: "copy", size: "16px" }))));
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
PdsCopytext.style = PdsCopytextStyle0;
|
|
@@ -26,7 +26,7 @@ const PdsDivider = class {
|
|
|
26
26
|
return classNames.join(' ');
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
29
|
-
return (index.h(index.Host, { key: '
|
|
29
|
+
return (index.h(index.Host, { key: 'd5d42d70c2417e0fc801f87f8460557bb1756443', id: this.componentId }, index.h("hr", { key: '49554a46b6949d09adc4794b22441a1f76eb1d13', class: this.classNames() })));
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
32
|
PdsDivider.style = PdsDividerStyle0;
|
|
@@ -20,9 +20,9 @@ const PdsImage = class {
|
|
|
20
20
|
this.width = undefined;
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (index.h(index.Host, { key: '
|
|
23
|
+
return (index.h(index.Host, { key: '835f04e58f7a7f831575512bb4582fc22a563652', class: {
|
|
24
24
|
'pds-image': true,
|
|
25
|
-
}, id: this.componentId }, index.h("img", { key: '
|
|
25
|
+
}, id: this.componentId }, index.h("img", { key: 'd002c0ae968a6a4a8d965c9bbae905da31629d7f', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
PdsImage.style = PdsImageStyle0;
|
|
@@ -33,7 +33,7 @@ const PdsInput = class {
|
|
|
33
33
|
this.value = undefined;
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (index.h(index.Host, { key: '
|
|
36
|
+
return (index.h(index.Host, { key: 'bb6e9f4cb7515c3b8fbbc583ba1c9ade05d8ae90', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '960462be7a176c6b62412ce4b44af79f9b137a0c', class: "pds-input" }, index.h(pdsLabel.PdsLabel, { key: 'beb8f1c8e8a1b4b692d2838abc99e427cc13c392', htmlFor: this.componentId, text: this.label }), index.h("input", { key: 'c69ceb5d687fb37b843e71e8aa9bad8b9f7bcaa8', class: "pds-input__field", "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent }), this.helperMessage &&
|
|
37
37
|
index.h("p", { class: "pds-input__helper-message", id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
38
38
|
index.h("p", { class: "pds-input__error-message", id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage))));
|
|
39
39
|
}
|
|
@@ -30,7 +30,7 @@ const PdsLink = class {
|
|
|
30
30
|
return classNames.join(' ');
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (index.h("a", { key: '
|
|
33
|
+
return (index.h("a", { key: 'cf71f4d333aa1adc5e23ad3d605e04951e10dca4', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined }, index.h("slot", { key: '0ecbd6a838cb2f61fb34457c94b02b098e6bbd41' }, this.href), this.external &&
|
|
34
34
|
index.h("pds-icon", { icon: launch, size: this.fontSize })));
|
|
35
35
|
}
|
|
36
36
|
};
|
|
@@ -18,7 +18,7 @@ const PdsProgress = class {
|
|
|
18
18
|
this.showPercent = false;
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (index.h(index.Host, { key: '
|
|
21
|
+
return (index.h(index.Host, { key: '68d38c1c9c0b21d20df22d9c9e21102f78143df7', class: this.animated ? { 'is-animated': this.animated } : '' }, index.h("div", { key: '2342ec7043319f3c9d6ee40b3d516523c40f8881', class: "pds-progress" }, index.h("label", { key: '56740d2f23e1cf0039751eac229b6c81234c45a8', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: 'b11e4117dae38cc8828623fbd1e25d666a5ec63c', id: this.componentId, max: "100", style: this.fillColor ? { '--progress-fill-color': this.fillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { class: "pds-progress__percentage" }, this.percent, "%")));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
PdsProgress.style = PdsProgressStyle0;
|
|
@@ -42,7 +42,7 @@ const PdsRadio = class {
|
|
|
42
42
|
return classNames.join(' ');
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return (index.h(index.Host, { key: '
|
|
45
|
+
return (index.h(index.Host, { key: '1427cdb78f9e67d64f1d41fbbcd69f142568be54', class: this.classNames() }, index.h("input", { key: 'e657db2c4d043871913ba314adb0b1666001dc8e', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), index.h(pdsLabel.PdsLabel, { key: 'c7a15d4d55f7a82f21754d5a5c711ae2b60b5cdc', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
|
|
46
46
|
index.h("div", { class: 'pds-radio__message', id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
47
47
|
index.h("div", { class: `pds-radio__message pds-radio__message--error`, id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
|
|
48
48
|
}
|
|
@@ -41,7 +41,7 @@ const PdsRow = class {
|
|
|
41
41
|
})), (this.minHeight && {
|
|
42
42
|
'min-height': this.minHeight,
|
|
43
43
|
}));
|
|
44
|
-
return (index.h(index.Host, { key: '
|
|
44
|
+
return (index.h(index.Host, { key: 'a0661e2e13c93d93f8fd8a2f692adce3eac2b9f7', class: `pds-row ${rowClasses}`, style: rowInlineStyles }));
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
47
|
PdsRow.style = PdsRowStyle0;
|
|
@@ -15,7 +15,7 @@ const PdsSortableItem = class {
|
|
|
15
15
|
this.handle = false;
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (index.h(index.Host, { key: '
|
|
18
|
+
return (index.h(index.Host, { key: '0af9e3cba44c18a8ded0ed71337076ebf761a437', class: "pds-sortable-item", id: this.componentId }, this.handle && (index.h("div", { class: "pds-sortable-item__handle" }, index.h("pds-icon", { name: "handle" }))), index.h("slot", { key: '44365ade9216eacdf72723d4bbf18bac5e6ba734' }), this.enableActions && (index.h("div", { class: "pds-sortable-item__actions" }, index.h("slot", { name: "sortable-item-actions" })))));
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
PdsSortableItem.style = PdsSortableItemStyle0;
|
|
@@ -2693,7 +2693,7 @@ const PdsSortable = class {
|
|
|
2693
2693
|
Sortable.create(this.el, sortableOptions);
|
|
2694
2694
|
}
|
|
2695
2695
|
render() {
|
|
2696
|
-
return (index$1.h(index$1.Host, { key: '
|
|
2696
|
+
return (index$1.h(index$1.Host, { key: 'ec0e4e8ab9f84b3163160f23cfe15796b1c8ca79', class: this.classNames(), id: this.componentId }, index$1.h("slot", { key: '9c3f9cbc3b0cdd50bc57d0f4f2a6231d1f2f9d2e' })));
|
|
2697
2697
|
}
|
|
2698
2698
|
get el() { return index$1.getElement(this); }
|
|
2699
2699
|
};
|
|
@@ -43,7 +43,7 @@ const PdsSwitch = class {
|
|
|
43
43
|
this.value = undefined;
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return (index.h(index.Host, { key: '
|
|
46
|
+
return (index.h(index.Host, { key: 'cdb6f34b8eb4a40fa9477b820461276ea07b9346', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, index.h("input", { key: 'cdb0f78abe53f7c84da5aa75e878d40180821e44', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: this.type, value: this.value }), index.h(pdsLabel.PdsLabel, { key: '37d5f8106e84f5820f0e27b1a2d656a6090293a3', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
|
|
47
47
|
index.h("div", { class: `pds-switch__message`, id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
48
48
|
index.h("div", { class: `pds-switch__message pds-switch__message--error`, id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
|
|
49
49
|
}
|
|
@@ -21,9 +21,9 @@ const PdsTab = class {
|
|
|
21
21
|
this.pdsTabClick.emit([index, parentComponentId]);
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
|
-
const availabilityTabEdgeInlineStart = (index.h("span", { key: '
|
|
25
|
-
const availabilityTabEdgeInlineEnd = (index.h("span", { key: '
|
|
26
|
-
return (index.h(index.Host, { key: '
|
|
24
|
+
const availabilityTabEdgeInlineStart = (index.h("span", { key: '08277d7cbe950dd18f41bd95c90f7c7389833311', class: "pds-tab-edge", role: "presentation" }));
|
|
25
|
+
const availabilityTabEdgeInlineEnd = (index.h("span", { key: '02d2d1acbc122a56bd01c53af8ff0f42b46cb3db', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
|
|
26
|
+
return (index.h(index.Host, { key: 'ae62d16ff39d937d3d635892a904870c436d1747', variant: this.variant, slot: "tabs", index: this.index }, index.h("button", { key: '45221be5eb829f64c5a1f19de600d68da9c27ed2', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, index.h("div", { key: '3e529a0253e4ecbfad3ab47760fa6d58771a58b8', class: "pds-tab__content" }, index.h("slot", { key: '4491e7c5442c386623e389ac247c5a8a6a6db254' })))));
|
|
27
27
|
}
|
|
28
28
|
get el() { return index.getElement(this); }
|
|
29
29
|
};
|
|
@@ -12,7 +12,7 @@ const PdsTableBody = class {
|
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h(index.Host, { key: '
|
|
15
|
+
return (index.h(index.Host, { key: '8d71f826ae509e6ca5ab06016c3343036840af88', role: "rowgroup" }, index.h("slot", { key: 'b34bf96e2dc5232585dc3a28bbd81f5eafa42748' })));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
PdsTableBody.style = PdsTableBodyStyle0;
|
|
@@ -59,11 +59,11 @@ const PdsTableHeadCell = class {
|
|
|
59
59
|
return classNames.join(' ');
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
return (index.h(index.Host, { key: '
|
|
62
|
+
return (index.h(index.Host, { key: 'de6a3a9f17d49206d61755cf49902ca414982ad3', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
|
|
63
63
|
this.tableRef.fixedColumn &&
|
|
64
64
|
this.tableRef.selectable
|
|
65
65
|
? { '--fixed-cell-position': '40px' }
|
|
66
|
-
: {} }, index.h("slot", { key: '
|
|
66
|
+
: {} }, index.h("slot", { key: 'c46427a01cd95972cb97fd244e4caf348bdefe03' }), this.sortable && (index.h("pds-icon", { name: this.sortingDirection === 'asc' ? 'up-small' : 'down-small' }))));
|
|
67
67
|
}
|
|
68
68
|
get hostElement() { return index.getElement(this); }
|
|
69
69
|
};
|
|
@@ -19,7 +19,7 @@ const PdsTableHead = class {
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (index.h(index.Host, { key: '
|
|
22
|
+
return (index.h(index.Host, { key: '3fc715433db735a23fa49fd37553a8f430af78bc', role: "row" }, this.tableRef && this.tableRef.selectable && (index.h("pds-table-head-cell", { part: this.tableRef.fixedColumn ? 'checkbox-cell' : '' })), index.h("slot", { key: 'f24a1ebc93b6718aaefbf9006d7fd89e43eb557c' })));
|
|
23
23
|
}
|
|
24
24
|
get hostElement() { return index.getElement(this); }
|
|
25
25
|
};
|
|
@@ -39,7 +39,7 @@ const PdsTableRow = class {
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
|
-
return (index.h(index.Host, { key: '
|
|
42
|
+
return (index.h(index.Host, { key: '6eb4558d3c5970174833e11c74b8243f549e3c9a', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (index.h("pds-table-cell", { part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, index.h("pds-checkbox", { componentId: this.generateUniqueId(), onClick: this.handleCheckboxClick, label: "Select Row", labelHidden: true, checked: this.isSelected }))), index.h("slot", { key: 'd2ee3546bfe11f36278887b6261a0c5bca91202f' })));
|
|
43
43
|
}
|
|
44
44
|
get hostElement() { return index.getElement(this); }
|
|
45
45
|
};
|
|
@@ -67,7 +67,7 @@ const PdsTable = class {
|
|
|
67
67
|
this.sortingDirection = direction;
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
|
-
return (index.h(index.Host, { key: '
|
|
70
|
+
return (index.h(index.Host, { key: '61e4788551b8e01ce7e5d0e96869b742157a9f2b', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable }, index.h("slot", { key: 'bab0e40123fe8bc257221bbd1a2b2f6076a6c691' })));
|
|
71
71
|
}
|
|
72
72
|
get el() { return index.getElement(this); }
|
|
73
73
|
};
|
|
@@ -16,7 +16,7 @@ const PdsTabpanel = class {
|
|
|
16
16
|
this.selected = false;
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (index.h(index.Host, { key: '
|
|
19
|
+
return (index.h(index.Host, { key: 'e38cf8aa09d76ce8e971d4e64f635fd2ac237aad', slot: "tabpanels" }, index.h("div", { key: '316151ef0e305ecba207d2ea6d171fcb0c28b539', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, index.h("slot", { key: '4214b2d070c6964f7d3ae41b1ed3d6713aaddf11' }))));
|
|
20
20
|
}
|
|
21
21
|
get el() { return index.getElement(this); }
|
|
22
22
|
};
|
|
@@ -88,7 +88,7 @@ const PdsTabs = class {
|
|
|
88
88
|
this.passPropsToChildren();
|
|
89
89
|
}
|
|
90
90
|
render() {
|
|
91
|
-
return (index.h(index.Host, { key: '
|
|
91
|
+
return (index.h(index.Host, { key: 'e6d5ba53ccd3f58d0e63ddee1a3f395c6f15c841', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, index.h("div", { key: 'b66c6f29bd3612c94130de2e44ca33e46facf401', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, index.h("slot", { key: 'eeaa4bacc8ae08964a106fed26af7c3927b83df7', name: "tabs" })), index.h("slot", { key: 'f6d0b358f7387a850e1f3db93eaf32cc7723b7a2', name: "tabpanels" })));
|
|
92
92
|
}
|
|
93
93
|
get el() { return index.getElement(this); }
|
|
94
94
|
};
|
|
@@ -41,8 +41,8 @@ const PdsTextarea = class {
|
|
|
41
41
|
return classNames.join(' ');
|
|
42
42
|
}
|
|
43
43
|
render() {
|
|
44
|
-
return (index.h(index.Host, { key: '
|
|
45
|
-
index.h(pdsLabel.PdsLabel, { htmlFor: this.componentId, text: this.label }), index.h("textarea", { key: '
|
|
44
|
+
return (index.h(index.Host, { key: '741dcb258f9992f943e898b4f8ac569046f40a73', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: 'cb678d3e24cec028b7220b4d087e82ce24e26205', class: "pds-textarea" }, this.label &&
|
|
45
|
+
index.h(pdsLabel.PdsLabel, { htmlFor: this.componentId, text: this.label }), index.h("textarea", { key: '667cec0eb152e45a01f87ca64865c816afe5b67b', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
|
|
46
46
|
index.h("p", { class: "pds-textarea__helper-message", id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
47
47
|
index.h("p", { "aria-live": "assertive", class: "pds-textarea__error-message", id: pdsLabel.messageId(this.componentId, 'error') }, this.errorMessage))));
|
|
48
48
|
}
|
|
@@ -132,13 +132,13 @@ const PdsTooltip = class {
|
|
|
132
132
|
this.opened = false;
|
|
133
133
|
}
|
|
134
134
|
render() {
|
|
135
|
-
return (index.h(index.Host, { key: '
|
|
135
|
+
return (index.h(index.Host, { key: 'b4b6ca5fbf3a5b99b4fe74d4b874c81f51d46e8d', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, index.h("div", { key: '234af23d5c082cbaf02c3f4026d094e19514520e', class: `
|
|
136
136
|
pds-tooltip
|
|
137
137
|
pds-tooltip--${this.placement}
|
|
138
138
|
${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
|
|
139
139
|
${this.opened ? 'pds-tooltip--is-open' : ''}
|
|
140
140
|
${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
|
|
141
|
-
` }, index.h("span", { key: '
|
|
141
|
+
` }, index.h("span", { key: '8636e6ec54ca42b7a96683b2a97f26ee4994ce75', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, index.h("slot", { key: '915856a37e16dd9a5d19afec7111d90f3a1e1d0d' })), index.h("div", { key: '0e50c1c3559cfc529da2fc67a8b248e63ad8f75b', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, index.h("slot", { key: 'dafafd2a343b10ed140eb5bd325d3b17a3dc062a', name: "content" }), this.content))));
|
|
142
142
|
}
|
|
143
143
|
get el() { return index.getElement(this); }
|
|
144
144
|
static get watchers() { return {
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["pds-copytext.cjs",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-table-head.cjs",[[1,"pds-table-head"]]],["pds-table-row.cjs",[[1,"pds-table-row",{"isSelected":[32]}]]],["pds-avatar.cjs",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip.cjs",[[1,"pds-chip",{"componentId":[1,"component-id"],"sentiment":[1],"dot":[4],"label":[1],"large":[4],"variant":[1]}]]],["pds-link.cjs",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-sortable-item.cjs",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"handle":[4]}]]],["pds-box.cjs",[[0,"pds-box",{"alignItems":[1,"align-items"],"auto":[4],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"gap":[1],"flex":[1],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"minWidth":[1,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]],["pds-divider.cjs",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image.cjs",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-input.cjs",[[1,"pds-input",{"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"type":[1],"value":[1025]}]]],["pds-progress.cjs",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-radio.cjs",[[2,"pds-radio",{"checked":[4],"disabled":[4],"errorMessage":[1,"error-message"],"invalid":[4],"componentId":[1,"component-id"],"label":[1],"helperMessage":[1,"helper-message"],"name":[1],"required":[4],"value":[1]}]]],["pds-row.cjs",[[0,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["pds-sortable.cjs",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-switch.cjs",[[1,"pds-switch",{"componentId":[1,"component-id"],"checked":[4],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"type":[1],"value":[1]}]]],["pds-tab.cjs",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table.cjs",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"]]]]],["pds-table-body.cjs",[[1,"pds-table-body"]]],["pds-tabpanel.cjs",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs.cjs",[[1,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["pds-textarea.cjs",[[1,"pds-textarea",{"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025]}]]],["pds-tooltip.cjs",[[1,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"opened":[1540],"isOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button.cjs",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"icon":[1],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-head-cell.cjs",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32]}]]],["pds-checkbox_2.cjs",[[1,"pds-checkbox",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[4],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]}],[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]]], options);
|
|
20
|
+
return index.bootstrapLazy([["pds-copytext.cjs",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-table-head.cjs",[[1,"pds-table-head"]]],["pds-table-row.cjs",[[1,"pds-table-row",{"isSelected":[32]}]]],["pds-accordion.cjs",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar.cjs",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip.cjs",[[1,"pds-chip",{"componentId":[1,"component-id"],"sentiment":[1],"dot":[4],"label":[1],"large":[4],"variant":[1]}]]],["pds-link.cjs",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-sortable-item.cjs",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"handle":[4]}]]],["pds-box.cjs",[[0,"pds-box",{"alignItems":[1,"align-items"],"auto":[4],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"gap":[1],"flex":[1],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"minWidth":[1,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]],["pds-divider.cjs",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image.cjs",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-input.cjs",[[1,"pds-input",{"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"type":[1],"value":[1025]}]]],["pds-progress.cjs",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-radio.cjs",[[2,"pds-radio",{"checked":[4],"disabled":[4],"errorMessage":[1,"error-message"],"invalid":[4],"componentId":[1,"component-id"],"label":[1],"helperMessage":[1,"helper-message"],"name":[1],"required":[4],"value":[1]}]]],["pds-row.cjs",[[0,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["pds-sortable.cjs",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-switch.cjs",[[1,"pds-switch",{"componentId":[1,"component-id"],"checked":[4],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"type":[1],"value":[1]}]]],["pds-tab.cjs",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table.cjs",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"]]]]],["pds-table-body.cjs",[[1,"pds-table-body"]]],["pds-tabpanel.cjs",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs.cjs",[[1,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["pds-textarea.cjs",[[1,"pds-textarea",{"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025]}]]],["pds-tooltip.cjs",[[1,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"opened":[1540],"isOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button.cjs",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"icon":[1],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-head-cell.cjs",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32]}]]],["pds-checkbox_2.cjs",[[1,"pds-checkbox",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[4],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]}],[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: block;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
details {
|
|
6
|
+
--border-radius: var(--pine-spacing-xs);
|
|
7
|
+
--box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);
|
|
8
|
+
--color-content-background: var(--pine-base-color-white);
|
|
9
|
+
--color-background-hover: var(--pine-color-neutral-grey-300);
|
|
10
|
+
--color-font: var(--pine-color-neutral-charcoal-200);
|
|
11
|
+
--color-font-active: var(--pine-color-neutral-charcoal-400);
|
|
12
|
+
--color-font-hover: var(--pine-color-neutral-charcoal-300);
|
|
13
|
+
--font-weight: var(--pine-font-weight-medium);
|
|
14
|
+
--spacing-details-padding-inline: 12px;
|
|
15
|
+
--spacing-summary-padding-block: var(--pine-spacing-xxs);
|
|
16
|
+
--spacing-summary-padding-inline-start: var(--pine-spacing-xs);
|
|
17
|
+
--spacing-summary-padding-inline-end: var(--pine-spacing-xxs);
|
|
18
|
+
border-radius: var(--border-radius);
|
|
19
|
+
padding-inline: var(--spacing-details-padding-inline);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* stylelint-disable-next-line */
|
|
23
|
+
details[open] {
|
|
24
|
+
background-color: var(--color-content-background);
|
|
25
|
+
}
|
|
26
|
+
details[open] summary {
|
|
27
|
+
color: var(--color-font-active);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
summary {
|
|
31
|
+
border-radius: var(--border-radius);
|
|
32
|
+
color: var(--color-font);
|
|
33
|
+
font-weight: var(--font-weight);
|
|
34
|
+
padding-block: var(--spacing-summary-padding-block);
|
|
35
|
+
padding-inline-end: var(--spacing-summary-padding-inline-end);
|
|
36
|
+
padding-inline-start: var(--spacing-summary-padding-inline-start);
|
|
37
|
+
/* stylelint-disable-next-line */
|
|
38
|
+
align-items: center;
|
|
39
|
+
display: flex;
|
|
40
|
+
}
|
|
41
|
+
summary::-webkit-details-marker {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
summary:hover {
|
|
45
|
+
background: var(--color-background-hover);
|
|
46
|
+
color: var(--color-font-hover);
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
}
|
|
49
|
+
summary:focus-visible {
|
|
50
|
+
box-shadow: var(--box-shadow-focus);
|
|
51
|
+
outline: none;
|
|
52
|
+
}
|
|
53
|
+
summary pds-icon {
|
|
54
|
+
margin-inline-start: auto;
|
|
55
|
+
}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* @slot (default) - Accordion body content.
|
|
4
|
+
* @slot label - Accordion trigger button content.
|
|
5
|
+
*/
|
|
6
|
+
export class PdsAccordion {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.handleToggle = () => {
|
|
9
|
+
this.isOpen = this.detailsEl.open;
|
|
10
|
+
};
|
|
11
|
+
this.getOpenAttribute = () => {
|
|
12
|
+
if (this.isOpen !== false) {
|
|
13
|
+
return { open: true };
|
|
14
|
+
}
|
|
15
|
+
return '';
|
|
16
|
+
};
|
|
17
|
+
this.componentId = undefined;
|
|
18
|
+
this.isOpen = false;
|
|
19
|
+
}
|
|
20
|
+
handleOpenState(newValue) {
|
|
21
|
+
this.isOpen = newValue;
|
|
22
|
+
}
|
|
23
|
+
componentDidLoad() {
|
|
24
|
+
this.detailsEl.addEventListener('toggle', this.handleToggle);
|
|
25
|
+
}
|
|
26
|
+
render() {
|
|
27
|
+
return (h(Host, { key: 'e2e795c93ddd812acd5f9ac26546953d7172ba39', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '772f09a0f28f03a0feffa7a6ea1fd0cbf0947c56' }, this.getOpenAttribute(), { ref: (el) => this.detailsEl = el }), h("summary", { key: 'f8987032a8e8468f9e8728ed673c26210fd0c2a2' }, h("slot", { key: '5dfcd343dfdc7b5eb6f75e75dff494aab0fbea36', name: "label" }, "Details"), h("pds-icon", { key: '2e6cd67ca003428c48b0c0545287b629918f243a', name: this.isOpen ? 'up-small' : 'down-small' })), h("div", { key: '508b2e5d33c4a83e6f569ba30ef042e5ffc01318', class: "pds-accordion__body" }, h("slot", { key: '13bc1ae447df49043efbbf631844add1245fbabe' })))));
|
|
28
|
+
}
|
|
29
|
+
static get is() { return "pds-accordion"; }
|
|
30
|
+
static get encapsulation() { return "shadow"; }
|
|
31
|
+
static get originalStyleUrls() {
|
|
32
|
+
return {
|
|
33
|
+
"$": ["pds-accordion.scss"]
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
static get styleUrls() {
|
|
37
|
+
return {
|
|
38
|
+
"$": ["pds-accordion.css"]
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
static get properties() {
|
|
42
|
+
return {
|
|
43
|
+
"componentId": {
|
|
44
|
+
"type": "string",
|
|
45
|
+
"mutable": false,
|
|
46
|
+
"complexType": {
|
|
47
|
+
"original": "string",
|
|
48
|
+
"resolved": "string",
|
|
49
|
+
"references": {}
|
|
50
|
+
},
|
|
51
|
+
"required": false,
|
|
52
|
+
"optional": false,
|
|
53
|
+
"docs": {
|
|
54
|
+
"tags": [{
|
|
55
|
+
"name": "defaultValue",
|
|
56
|
+
"text": "null"
|
|
57
|
+
}],
|
|
58
|
+
"text": "A unique identifier used for the underlying component `id` attribute."
|
|
59
|
+
},
|
|
60
|
+
"attribute": "component-id",
|
|
61
|
+
"reflect": false
|
|
62
|
+
},
|
|
63
|
+
"isOpen": {
|
|
64
|
+
"type": "boolean",
|
|
65
|
+
"mutable": true,
|
|
66
|
+
"complexType": {
|
|
67
|
+
"original": "boolean",
|
|
68
|
+
"resolved": "boolean",
|
|
69
|
+
"references": {}
|
|
70
|
+
},
|
|
71
|
+
"required": false,
|
|
72
|
+
"optional": false,
|
|
73
|
+
"docs": {
|
|
74
|
+
"tags": [{
|
|
75
|
+
"name": "defaultValue",
|
|
76
|
+
"text": "false"
|
|
77
|
+
}],
|
|
78
|
+
"text": "Can be used to manually set the open state of the accordion."
|
|
79
|
+
},
|
|
80
|
+
"attribute": "open",
|
|
81
|
+
"reflect": true,
|
|
82
|
+
"defaultValue": "false"
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
static get watchers() {
|
|
87
|
+
return [{
|
|
88
|
+
"propName": "isOpen",
|
|
89
|
+
"methodName": "handleOpenState"
|
|
90
|
+
}];
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
//# sourceMappingURL=pds-accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pds-accordion.js","sourceRoot":"","sources":["../../../src/components/pds-accordion/pds-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE;;;GAGG;AAMH,MAAM,OAAO,YAAY;;QAwBf,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACpC,CAAC,CAAA;QAEO,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;gBAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YACxB,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAA;;sBAhBoB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACzB,CAAC;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAwB;gBAC1F;oBACE,6DAAM,IAAI,EAAC,OAAO,cAAe;oBACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,GAAI,CACnD;gBACV,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,8DAAQ,CACJ,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({ \n attribute: 'open',\n mutable: true,\n reflect: true \n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon name={this.isOpen ? 'up-small' : 'down-small'} />\n </summary>\n <div class=\"pds-accordion__body\">\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
args: {
|
|
6
|
+
componentId: '',
|
|
7
|
+
isOpen: false,
|
|
8
|
+
},
|
|
9
|
+
argTypes: extractArgTypes('pds-accordion'),
|
|
10
|
+
component: 'pds-accordion',
|
|
11
|
+
title: 'components/Accordion',
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const BaseTemplate = (args) => html`
|
|
15
|
+
<pds-accordion component-id="${args.componentId}" open="${args.isOpen}">
|
|
16
|
+
<pds-row align-items="center" slot="label">
|
|
17
|
+
<pds-box align-items="center">
|
|
18
|
+
<pds-icon name="products-outline"></pds-icon>
|
|
19
|
+
<span style="display: inline-block; margin-left: 8px;">Products</span>
|
|
20
|
+
</pds-box>
|
|
21
|
+
</pds-row>
|
|
22
|
+
<pds-row>
|
|
23
|
+
<pds-box direction="column" gap="xs" padding="xs">
|
|
24
|
+
<pds-link variant="plain" href="#">All products</pds-link>
|
|
25
|
+
<pds-link variant="plain" href="#">Courses</pds-link>
|
|
26
|
+
<pds-link variant="plain" href="#">Coaching</pds-link>
|
|
27
|
+
<pds-link variant="plain" href="#">Community</pds-link>
|
|
28
|
+
<pds-link variant="plain" href="#">Podcasts</pds-link>
|
|
29
|
+
</pds-box>
|
|
30
|
+
</pds-row>
|
|
31
|
+
</pds-accordion>
|
|
32
|
+
`;
|
|
33
|
+
|
|
34
|
+
export const Default = BaseTemplate.bind({});
|
|
@@ -52,7 +52,7 @@ export class PdsAvatar {
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
render() {
|
|
55
|
-
return (h(Host, { key: '
|
|
55
|
+
return (h(Host, { key: '179b1d53b2250e1fab6807a324c474c2d02c8d43', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
56
56
|
}
|
|
57
57
|
static get is() { return "pds-avatar"; }
|
|
58
58
|
static get encapsulation() { return "shadow"; }
|
|
@@ -63,7 +63,7 @@ export class PdsBox {
|
|
|
63
63
|
this.sizeXl == undefined ? 'pds-box' : ''}
|
|
64
64
|
`;
|
|
65
65
|
const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.backgroundColor && { '--box-background-color': this.backgroundColor })), (this.borderColor && { '--box-border-color': this.borderColor })), (this.minHeight && { '--box-min-height': this.minHeight })), (this.minWidth && { '--box-min-width': this.minWidth }));
|
|
66
|
-
return (h(Host, { key: '
|
|
66
|
+
return (h(Host, { key: 'c04696c04b987f82aa03e23d41078ffa32ed6e78', class: boxClasses, style: boxInlineStyles }));
|
|
67
67
|
}
|
|
68
68
|
static get is() { return "pds-box"; }
|
|
69
69
|
static get originalStyleUrls() {
|
|
@@ -40,7 +40,7 @@ export class PdsButton {
|
|
|
40
40
|
return classNames.join(' ');
|
|
41
41
|
}
|
|
42
42
|
render() {
|
|
43
|
-
return (h(Host, { key: '
|
|
43
|
+
return (h(Host, { key: '0f8f16b8e8d941481d66f1833a4a7e5402aab2bc', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'c8b0a1f8b0f6c984477e2bb6cdb77226f8250ac3', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { name: this.icon, part: "icon" }), h("slot", { key: '76310f327aad59ecd150261a186e256c52cf6251' }), this.variant === 'disclosure' && h("pds-icon", { name: "caret-down", part: "caret" }))));
|
|
44
44
|
}
|
|
45
45
|
static get is() { return "pds-button"; }
|
|
46
46
|
static get encapsulation() { return "shadow"; }
|
|
@@ -41,7 +41,7 @@ export class PdsCheckbox {
|
|
|
41
41
|
return classNames.join(' ');
|
|
42
42
|
}
|
|
43
43
|
render() {
|
|
44
|
-
return (h(Host, { key: '
|
|
44
|
+
return (h(Host, { key: 'df4d541eb43253bac6d9f0396d5af5c0a0181db0', class: this.classNames() }, h("input", { key: '59f4ff764cdf4fac9ff38a734b91cf31219f2a59', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), h(PdsLabel, { key: '99da91ab0d67c72f29092a623164b0822ff56a66', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
|
|
45
45
|
h("div", { class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
46
46
|
h("div", { class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
|
|
47
47
|
}
|