@pine-ds/core 2.0.0 → 2.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.js +2 -2
- package/components/pds-accordion.js.map +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-avatar.js.map +1 -1
- package/components/pds-box.js +1 -1
- package/components/pds-box.js.map +1 -1
- package/components/pds-button2.js +2 -2
- package/components/pds-button2.js.map +1 -1
- package/components/pds-checkbox2.js +2 -2
- package/components/pds-checkbox2.js.map +1 -1
- package/components/pds-chip.js +2 -2
- package/components/pds-chip.js.map +1 -1
- package/components/pds-copytext.js +2 -2
- package/components/pds-copytext.js.map +1 -1
- package/components/pds-divider.js +2 -2
- package/components/pds-divider.js.map +1 -1
- package/components/pds-image.js +2 -2
- package/components/pds-image.js.map +1 -1
- package/components/pds-input.js +2 -2
- package/components/pds-input.js.map +1 -1
- package/components/pds-link.js +2 -2
- package/components/pds-link.js.map +1 -1
- package/components/pds-loader.js +2 -2
- package/components/pds-loader.js.map +1 -1
- package/components/pds-progress.js +2 -2
- package/components/pds-progress.js.map +1 -1
- package/components/pds-radio.js +2 -2
- package/components/pds-radio.js.map +1 -1
- package/components/pds-sortable.js +1 -1
- package/components/pds-sortable.js.map +1 -1
- package/components/pds-switch.js +2 -2
- package/components/pds-switch.js.map +1 -1
- package/components/pds-tab.js +1 -1
- package/components/pds-tab.js.map +1 -1
- package/components/pds-table-body.js +1 -1
- package/components/pds-table-body.js.map +1 -1
- package/components/pds-table-cell2.js +2 -2
- package/components/pds-table-cell2.js.map +1 -1
- package/components/pds-table-head-cell2.js +2 -2
- package/components/pds-table-head-cell2.js.map +1 -1
- package/components/pds-table-head.js +2 -2
- package/components/pds-table-head.js.map +1 -1
- package/components/pds-table-row.js +1 -1
- package/components/pds-table-row.js.map +1 -1
- package/components/pds-table.js +1 -1
- package/components/pds-table.js.map +1 -1
- package/components/pds-tabs.js +1 -1
- package/components/pds-tabs.js.map +1 -1
- package/components/pds-textarea.js +2 -2
- package/components/pds-textarea.js.map +1 -1
- package/components/pds-tooltip.js +2 -2
- package/components/pds-tooltip.js.map +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js +2 -2
- package/dist/cjs/pds-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-box.cjs.entry.js +1 -1
- package/dist/cjs/pds-box.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +2 -2
- package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/pds-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +2 -2
- package/dist/cjs/pds-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +2 -2
- package/dist/cjs/pds-copytext.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-divider.cjs.entry.js +2 -2
- package/dist/cjs/pds-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-image.cjs.entry.js +2 -2
- package/dist/cjs/pds-image.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +2 -2
- package/dist/cjs/pds-input.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-link.cjs.entry.js +2 -2
- package/dist/cjs/pds-link.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-loader.cjs.entry.js +2 -2
- package/dist/cjs/pds-loader.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-progress.cjs.entry.js +2 -2
- package/dist/cjs/pds-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-radio.cjs.entry.js +2 -2
- package/dist/cjs/pds-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-sortable.cjs.entry.js +1 -1
- package/dist/cjs/pds-sortable.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +2 -2
- package/dist/cjs/pds-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tab.cjs.entry.js +1 -1
- package/dist/cjs/pds-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-body.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-body.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-cell.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-head-cell.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-head.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-head.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-row.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table.cjs.entry.js +1 -1
- package/dist/cjs/pds-table.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tabs.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +2 -2
- package/dist/cjs/pds-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/pds-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/components/pds-accordion/pds-accordion.css +3 -3
- package/dist/collection/components/pds-box/pds-box.css +20 -4
- package/dist/collection/components/pds-button/pds-button.css +18 -13
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +28 -15
- package/dist/collection/components/pds-chip/pds-chip.css +63 -35
- package/dist/collection/components/pds-copytext/pds-copytext.css +7 -5
- package/dist/collection/components/pds-divider/pds-divider.css +1 -1
- package/dist/collection/components/pds-image/pds-image.css +0 -2
- package/dist/collection/components/pds-image/stories/pds-image.stories.js +7 -5
- package/dist/collection/components/pds-input/pds-input.css +34 -12
- package/dist/collection/components/pds-link/pds-link.css +13 -11
- package/dist/collection/components/pds-loader/pds-loader.css +3 -3
- package/dist/collection/components/pds-progress/pds-progress.css +4 -8
- package/dist/collection/components/pds-radio/pds-radio.css +36 -26
- package/dist/collection/components/pds-switch/pds-switch.css +18 -14
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css +6 -5
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.css +1 -1
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css +7 -11
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +5 -16
- package/dist/collection/components/pds-textarea/pds-textarea.css +25 -38
- package/dist/collection/components/pds-tooltip/pds-tooltip.css +1 -5
- package/dist/collection/global/styles/base.css +4 -4
- package/dist/docs.json +1 -1
- package/dist/esm/pds-accordion.entry.js +2 -2
- package/dist/esm/pds-accordion.entry.js.map +1 -1
- package/dist/esm/pds-avatar.entry.js +1 -1
- package/dist/esm/pds-avatar.entry.js.map +1 -1
- package/dist/esm/pds-box.entry.js +1 -1
- package/dist/esm/pds-box.entry.js.map +1 -1
- package/dist/esm/pds-button.entry.js +2 -2
- package/dist/esm/pds-button.entry.js.map +1 -1
- package/dist/esm/pds-checkbox.entry.js +2 -2
- package/dist/esm/pds-checkbox.entry.js.map +1 -1
- package/dist/esm/pds-chip.entry.js +2 -2
- package/dist/esm/pds-chip.entry.js.map +1 -1
- package/dist/esm/pds-copytext.entry.js +2 -2
- package/dist/esm/pds-copytext.entry.js.map +1 -1
- package/dist/esm/pds-divider.entry.js +2 -2
- package/dist/esm/pds-divider.entry.js.map +1 -1
- package/dist/esm/pds-image.entry.js +2 -2
- package/dist/esm/pds-image.entry.js.map +1 -1
- package/dist/esm/pds-input.entry.js +2 -2
- package/dist/esm/pds-input.entry.js.map +1 -1
- package/dist/esm/pds-link.entry.js +2 -2
- package/dist/esm/pds-link.entry.js.map +1 -1
- package/dist/esm/pds-loader.entry.js +2 -2
- package/dist/esm/pds-loader.entry.js.map +1 -1
- package/dist/esm/pds-progress.entry.js +2 -2
- package/dist/esm/pds-progress.entry.js.map +1 -1
- package/dist/esm/pds-radio.entry.js +2 -2
- package/dist/esm/pds-radio.entry.js.map +1 -1
- package/dist/esm/pds-sortable.entry.js +1 -1
- package/dist/esm/pds-sortable.entry.js.map +1 -1
- package/dist/esm/pds-switch.entry.js +2 -2
- package/dist/esm/pds-switch.entry.js.map +1 -1
- package/dist/esm/pds-tab.entry.js +1 -1
- package/dist/esm/pds-tab.entry.js.map +1 -1
- package/dist/esm/pds-table-body.entry.js +1 -1
- package/dist/esm/pds-table-body.entry.js.map +1 -1
- package/dist/esm/pds-table-cell.entry.js +2 -2
- package/dist/esm/pds-table-cell.entry.js.map +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +2 -2
- package/dist/esm/pds-table-head-cell.entry.js.map +1 -1
- package/dist/esm/pds-table-head.entry.js +2 -2
- package/dist/esm/pds-table-head.entry.js.map +1 -1
- package/dist/esm/pds-table-row.entry.js +1 -1
- package/dist/esm/pds-table-row.entry.js.map +1 -1
- package/dist/esm/pds-table.entry.js +1 -1
- package/dist/esm/pds-table.entry.js.map +1 -1
- package/dist/esm/pds-tabs.entry.js +1 -1
- package/dist/esm/pds-tabs.entry.js.map +1 -1
- package/dist/esm/pds-textarea.entry.js +2 -2
- package/dist/esm/pds-textarea.entry.js.map +1 -1
- package/dist/esm/pds-tooltip.entry.js +2 -2
- package/dist/esm/pds-tooltip.entry.js.map +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-accordion.entry.js.map +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js.map +1 -1
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js.map +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js.map +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js.map +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js.map +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js.map +1 -1
- package/dist/esm-es5/pds-divider.entry.js +1 -1
- package/dist/esm-es5/pds-divider.entry.js.map +1 -1
- package/dist/esm-es5/pds-image.entry.js +1 -1
- package/dist/esm-es5/pds-image.entry.js.map +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js.map +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js.map +1 -1
- package/dist/esm-es5/pds-loader.entry.js +1 -1
- package/dist/esm-es5/pds-loader.entry.js.map +1 -1
- package/dist/esm-es5/pds-progress.entry.js +1 -1
- package/dist/esm-es5/pds-progress.entry.js.map +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js.map +1 -1
- package/dist/esm-es5/pds-sortable.entry.js +1 -1
- package/dist/esm-es5/pds-sortable.entry.js.map +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js.map +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-body.entry.js +1 -1
- package/dist/esm-es5/pds-table-body.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-head.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-row.entry.js +1 -1
- package/dist/esm-es5/pds-table-row.entry.js.map +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js.map +1 -1
- package/dist/esm-es5/pds-tabs.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js.map +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js.map +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js.map +1 -1
- package/dist/pine-core/p-0069affa.entry.js +2 -0
- package/dist/pine-core/p-0069affa.entry.js.map +1 -0
- package/dist/pine-core/p-03ecf146.entry.js +2 -0
- package/dist/pine-core/p-03ecf146.entry.js.map +1 -0
- package/dist/pine-core/p-0c2553c6.system.entry.js +2 -0
- package/dist/pine-core/p-0c2553c6.system.entry.js.map +1 -0
- package/dist/pine-core/p-14d3cdaf.system.js +1 -1
- package/dist/pine-core/p-1692ed0c.entry.js +2 -0
- package/dist/pine-core/p-1692ed0c.entry.js.map +1 -0
- package/dist/pine-core/p-1dccfe1b.system.entry.js +2 -0
- package/dist/pine-core/p-1dccfe1b.system.entry.js.map +1 -0
- package/dist/pine-core/p-284433e0.entry.js +2 -0
- package/dist/pine-core/p-284433e0.entry.js.map +1 -0
- package/dist/pine-core/p-3558923a.entry.js +2 -0
- package/dist/pine-core/p-3558923a.entry.js.map +1 -0
- package/dist/pine-core/p-366c4924.system.entry.js +2 -0
- package/dist/pine-core/p-366c4924.system.entry.js.map +1 -0
- package/dist/pine-core/p-37458cc7.entry.js +2 -0
- package/dist/pine-core/p-37458cc7.entry.js.map +1 -0
- package/dist/pine-core/p-3886e15a.entry.js +2 -0
- package/dist/pine-core/p-3886e15a.entry.js.map +1 -0
- package/dist/pine-core/p-469a84a3.system.entry.js +2 -0
- package/dist/pine-core/p-469a84a3.system.entry.js.map +1 -0
- package/dist/pine-core/p-4b856a95.system.entry.js +2 -0
- package/dist/pine-core/p-4b856a95.system.entry.js.map +1 -0
- package/dist/pine-core/p-4fcf94ee.system.entry.js +2 -0
- package/dist/pine-core/p-4fcf94ee.system.entry.js.map +1 -0
- package/dist/pine-core/p-57d81378.entry.js +2 -0
- package/dist/pine-core/p-57d81378.entry.js.map +1 -0
- package/dist/pine-core/p-58a25131.entry.js +2 -0
- package/dist/pine-core/p-58a25131.entry.js.map +1 -0
- package/dist/pine-core/p-6e15f0e1.entry.js +2 -0
- package/dist/pine-core/p-6e15f0e1.entry.js.map +1 -0
- package/dist/pine-core/p-72ee760e.entry.js +2 -0
- package/dist/pine-core/p-72ee760e.entry.js.map +1 -0
- package/dist/pine-core/p-77c5fe7b.entry.js +2 -0
- package/dist/pine-core/p-77c5fe7b.entry.js.map +1 -0
- package/dist/pine-core/p-7c4f8c64.entry.js +2 -0
- package/dist/pine-core/p-7c4f8c64.entry.js.map +1 -0
- package/dist/pine-core/p-7c79ff32.system.entry.js +2 -0
- package/dist/pine-core/p-7c79ff32.system.entry.js.map +1 -0
- package/dist/pine-core/p-7fb3c253.entry.js +2 -0
- package/dist/pine-core/p-7fb3c253.entry.js.map +1 -0
- package/dist/pine-core/p-852dce9d.system.entry.js +2 -0
- package/dist/pine-core/p-852dce9d.system.entry.js.map +1 -0
- package/dist/pine-core/p-85507ca5.system.entry.js +2 -0
- package/dist/pine-core/p-85507ca5.system.entry.js.map +1 -0
- package/dist/pine-core/{p-6b608370.system.entry.js → p-8930c3b7.system.entry.js} +2 -2
- package/dist/pine-core/{p-6b608370.system.entry.js.map → p-8930c3b7.system.entry.js.map} +1 -1
- package/dist/pine-core/p-8963f07a.entry.js +2 -0
- package/dist/pine-core/p-8963f07a.entry.js.map +1 -0
- package/dist/pine-core/{p-1013bbe0.entry.js → p-90707120.entry.js} +2 -2
- package/dist/pine-core/p-90707120.entry.js.map +1 -0
- package/dist/pine-core/p-91cba446.system.entry.js +2 -0
- package/dist/pine-core/p-91cba446.system.entry.js.map +1 -0
- package/dist/pine-core/p-95c2a6bf.entry.js +2 -0
- package/dist/pine-core/p-95c2a6bf.entry.js.map +1 -0
- package/dist/pine-core/p-961f79c5.system.entry.js +2 -0
- package/dist/pine-core/{p-ac2af4c2.system.entry.js.map → p-961f79c5.system.entry.js.map} +1 -1
- package/dist/pine-core/p-9b0e5234.entry.js +2 -0
- package/dist/pine-core/p-9b0e5234.entry.js.map +1 -0
- package/dist/pine-core/p-a09284c5.entry.js +2 -0
- package/dist/pine-core/p-a09284c5.entry.js.map +1 -0
- package/dist/pine-core/p-a17dea5e.system.entry.js +2 -0
- package/dist/pine-core/p-a17dea5e.system.entry.js.map +1 -0
- package/dist/pine-core/p-a8cb75f0.system.entry.js +2 -0
- package/dist/pine-core/p-a8cb75f0.system.entry.js.map +1 -0
- package/dist/pine-core/p-a98f5e91.system.entry.js +2 -0
- package/dist/pine-core/p-a98f5e91.system.entry.js.map +1 -0
- package/dist/pine-core/p-abe6c2d6.entry.js +2 -0
- package/dist/pine-core/p-abe6c2d6.entry.js.map +1 -0
- package/dist/pine-core/p-b54e35d2.system.entry.js +2 -0
- package/dist/pine-core/p-b54e35d2.system.entry.js.map +1 -0
- package/dist/pine-core/p-bb88538f.system.entry.js +2 -0
- package/dist/pine-core/p-bb88538f.system.entry.js.map +1 -0
- package/dist/pine-core/p-bd5de072.system.entry.js +2 -0
- package/dist/pine-core/p-bd5de072.system.entry.js.map +1 -0
- package/dist/pine-core/p-c5afbc57.entry.js +2 -0
- package/dist/pine-core/p-c5afbc57.entry.js.map +1 -0
- package/dist/pine-core/p-ca1fa95e.system.entry.js +2 -0
- package/dist/pine-core/p-ca1fa95e.system.entry.js.map +1 -0
- package/dist/pine-core/p-cd033c2a.entry.js +2 -0
- package/dist/pine-core/p-cd033c2a.entry.js.map +1 -0
- package/dist/pine-core/p-d2c98df0.system.entry.js +2 -0
- package/dist/pine-core/p-d2c98df0.system.entry.js.map +1 -0
- package/dist/pine-core/p-d3eeb6f0.system.entry.js +2 -0
- package/dist/pine-core/p-d3eeb6f0.system.entry.js.map +1 -0
- package/dist/pine-core/{p-1a2b86b6.system.entry.js → p-d41fbbf0.system.entry.js} +2 -2
- package/dist/pine-core/p-d41fbbf0.system.entry.js.map +1 -0
- package/dist/pine-core/p-d461bee4.entry.js +2 -0
- package/dist/pine-core/p-d461bee4.entry.js.map +1 -0
- package/dist/pine-core/p-d8eeadd1.system.entry.js +2 -0
- package/dist/pine-core/p-d8eeadd1.system.entry.js.map +1 -0
- package/dist/pine-core/p-d9611049.system.entry.js +2 -0
- package/dist/pine-core/p-d9611049.system.entry.js.map +1 -0
- package/dist/pine-core/p-dbc5775f.entry.js +2 -0
- package/dist/pine-core/p-dbc5775f.entry.js.map +1 -0
- package/dist/pine-core/p-e847089d.system.entry.js +2 -0
- package/dist/pine-core/p-e847089d.system.entry.js.map +1 -0
- package/dist/pine-core/p-ea27b026.system.entry.js +2 -0
- package/dist/pine-core/p-ea27b026.system.entry.js.map +1 -0
- package/dist/pine-core/{p-9a59d5d0.entry.js → p-f79b96ee.entry.js} +2 -2
- package/dist/pine-core/{p-9a59d5d0.entry.js.map → p-f79b96ee.entry.js.map} +1 -1
- package/dist/pine-core/p-fe793116.entry.js +2 -0
- package/dist/pine-core/p-fe793116.entry.js.map +1 -0
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/hydrate/index.js +44 -44
- package/hydrate/index.mjs +44 -44
- package/package.json +2 -2
- package/dist/pine-core/p-0025055a.system.entry.js +0 -2
- package/dist/pine-core/p-0025055a.system.entry.js.map +0 -1
- package/dist/pine-core/p-053b1ae3.entry.js +0 -2
- package/dist/pine-core/p-053b1ae3.entry.js.map +0 -1
- package/dist/pine-core/p-064f8601.entry.js +0 -2
- package/dist/pine-core/p-064f8601.entry.js.map +0 -1
- package/dist/pine-core/p-0c40286c.system.entry.js +0 -2
- package/dist/pine-core/p-0c40286c.system.entry.js.map +0 -1
- package/dist/pine-core/p-0d021e1e.system.entry.js +0 -2
- package/dist/pine-core/p-0d021e1e.system.entry.js.map +0 -1
- package/dist/pine-core/p-1013bbe0.entry.js.map +0 -1
- package/dist/pine-core/p-12ec89f1.system.entry.js +0 -2
- package/dist/pine-core/p-12ec89f1.system.entry.js.map +0 -1
- package/dist/pine-core/p-1629c4db.system.entry.js +0 -2
- package/dist/pine-core/p-1629c4db.system.entry.js.map +0 -1
- package/dist/pine-core/p-197b0111.entry.js +0 -2
- package/dist/pine-core/p-197b0111.entry.js.map +0 -1
- package/dist/pine-core/p-1a2b86b6.system.entry.js.map +0 -1
- package/dist/pine-core/p-1cbe5235.entry.js +0 -2
- package/dist/pine-core/p-1cbe5235.entry.js.map +0 -1
- package/dist/pine-core/p-231012f0.entry.js +0 -2
- package/dist/pine-core/p-231012f0.entry.js.map +0 -1
- package/dist/pine-core/p-2341d134.entry.js +0 -2
- package/dist/pine-core/p-2341d134.entry.js.map +0 -1
- package/dist/pine-core/p-26e7cc12.system.entry.js +0 -2
- package/dist/pine-core/p-26e7cc12.system.entry.js.map +0 -1
- package/dist/pine-core/p-2c0ab2e9.system.entry.js +0 -2
- package/dist/pine-core/p-2c0ab2e9.system.entry.js.map +0 -1
- package/dist/pine-core/p-2d5ecae1.system.entry.js +0 -2
- package/dist/pine-core/p-2d5ecae1.system.entry.js.map +0 -1
- package/dist/pine-core/p-2d65bd2e.entry.js +0 -2
- package/dist/pine-core/p-2d65bd2e.entry.js.map +0 -1
- package/dist/pine-core/p-31b6ba80.entry.js +0 -2
- package/dist/pine-core/p-31b6ba80.entry.js.map +0 -1
- package/dist/pine-core/p-3341268b.system.entry.js +0 -2
- package/dist/pine-core/p-3341268b.system.entry.js.map +0 -1
- package/dist/pine-core/p-38038efa.entry.js +0 -2
- package/dist/pine-core/p-38038efa.entry.js.map +0 -1
- package/dist/pine-core/p-3a71f689.system.entry.js +0 -2
- package/dist/pine-core/p-3a71f689.system.entry.js.map +0 -1
- package/dist/pine-core/p-4a685395.system.entry.js +0 -2
- package/dist/pine-core/p-4a685395.system.entry.js.map +0 -1
- package/dist/pine-core/p-4c024848.system.entry.js +0 -2
- package/dist/pine-core/p-4c024848.system.entry.js.map +0 -1
- package/dist/pine-core/p-50078e6b.system.entry.js +0 -2
- package/dist/pine-core/p-50078e6b.system.entry.js.map +0 -1
- package/dist/pine-core/p-542db950.system.entry.js +0 -2
- package/dist/pine-core/p-542db950.system.entry.js.map +0 -1
- package/dist/pine-core/p-620a6823.entry.js +0 -2
- package/dist/pine-core/p-620a6823.entry.js.map +0 -1
- package/dist/pine-core/p-637d9c0f.system.entry.js +0 -2
- package/dist/pine-core/p-637d9c0f.system.entry.js.map +0 -1
- package/dist/pine-core/p-65592e50.system.entry.js +0 -2
- package/dist/pine-core/p-65592e50.system.entry.js.map +0 -1
- package/dist/pine-core/p-757e7370.system.entry.js +0 -2
- package/dist/pine-core/p-757e7370.system.entry.js.map +0 -1
- package/dist/pine-core/p-7645ece3.entry.js +0 -2
- package/dist/pine-core/p-7645ece3.entry.js.map +0 -1
- package/dist/pine-core/p-7dc0b6d4.entry.js +0 -2
- package/dist/pine-core/p-7dc0b6d4.entry.js.map +0 -1
- package/dist/pine-core/p-81c6710c.entry.js +0 -2
- package/dist/pine-core/p-81c6710c.entry.js.map +0 -1
- package/dist/pine-core/p-82d587ec.entry.js +0 -2
- package/dist/pine-core/p-82d587ec.entry.js.map +0 -1
- package/dist/pine-core/p-880a28d6.system.entry.js +0 -2
- package/dist/pine-core/p-880a28d6.system.entry.js.map +0 -1
- package/dist/pine-core/p-8ea30495.system.entry.js +0 -2
- package/dist/pine-core/p-8ea30495.system.entry.js.map +0 -1
- package/dist/pine-core/p-92d66400.entry.js +0 -2
- package/dist/pine-core/p-92d66400.entry.js.map +0 -1
- package/dist/pine-core/p-9707f75f.system.entry.js +0 -2
- package/dist/pine-core/p-9707f75f.system.entry.js.map +0 -1
- package/dist/pine-core/p-9cc420b4.entry.js +0 -2
- package/dist/pine-core/p-9cc420b4.entry.js.map +0 -1
- package/dist/pine-core/p-a0b93def.entry.js +0 -2
- package/dist/pine-core/p-a0b93def.entry.js.map +0 -1
- package/dist/pine-core/p-ac2af4c2.system.entry.js +0 -2
- package/dist/pine-core/p-b1a6ee59.entry.js +0 -2
- package/dist/pine-core/p-b1a6ee59.entry.js.map +0 -1
- package/dist/pine-core/p-bc6231a7.system.entry.js +0 -2
- package/dist/pine-core/p-bc6231a7.system.entry.js.map +0 -1
- package/dist/pine-core/p-bed5aa4e.entry.js +0 -2
- package/dist/pine-core/p-bed5aa4e.entry.js.map +0 -1
- package/dist/pine-core/p-c605e47f.system.entry.js +0 -2
- package/dist/pine-core/p-c605e47f.system.entry.js.map +0 -1
- package/dist/pine-core/p-cf7e76e4.entry.js +0 -2
- package/dist/pine-core/p-cf7e76e4.entry.js.map +0 -1
- package/dist/pine-core/p-da2e5736.entry.js +0 -2
- package/dist/pine-core/p-da2e5736.entry.js.map +0 -1
- package/dist/pine-core/p-db81d86a.entry.js +0 -2
- package/dist/pine-core/p-db81d86a.entry.js.map +0 -1
- package/dist/pine-core/p-eb398624.system.entry.js +0 -2
- package/dist/pine-core/p-eb398624.system.entry.js.map +0 -1
- package/dist/pine-core/p-f0c0aa66.entry.js +0 -2
- package/dist/pine-core/p-f0c0aa66.entry.js.map +0 -1
- package/dist/pine-core/p-fdf7a593.entry.js +0 -2
- package/dist/pine-core/p-fdf7a593.entry.js.map +0 -1
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as r,h as o,H as i}from"./p-7841bd18.js";import{m as t,P as a,a as n}from"./p-bc1ecf2f.js";const s=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const d=s;const l=':host{--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-color-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-500);--border-radius:var(--pine-border-radius-050);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--box-shadow-focus-invalid:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-background-hover:var(--pine-color-grey-100);--color-border-disabled:var(--pine-color-grey-600);--color-border-icon:var(--pine-color-white);--color-checked:var(--pine-color-grey-950);--color-disabled:var(--pine-color-grey-300);--color-invalid:var(--pine-color-red-300);--color-text-disabled:var(--pine-color-grey-500);--color-text-message:var(--pine-color-grey-700);--sizing-input:var(--pine-font-size-100);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--color-invalid)}:host(.is-invalid) input:checked{background:var(--color-invalid)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-invalid);box-shadow:var(--box-shadow-focus-invalid);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input{background:var(--color-checked);border-color:var(--color-checked)}:host(.is-indeterminate) input::after{border:1px solid var(--color-border-icon);border-bottom:0;border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(87deg) translate3d(-114%, 25%, 0);transform:rotate(87deg) translate3d(-114%, 25%, 0);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-background);border:var(--border-default);border-radius:var(--border-radius);height:var(--sizing-input);margin:0;position:relative;width:var(--sizing-input)}input:hover{background:var(--color-background-hover);border:var(--border-color-interactive-hover)}input:checked{background:var(--color-checked);border-color:var(--color-checked)}input:checked::after{border:1px solid var(--color-border-icon);border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--color-background-disabled);border-color:var(--color-disabled);cursor:not-allowed}input:disabled:checked{background:var(--color-disabled);border-color:var(--color-disabled)}input:disabled:checked::after{border-color:var(--color-border-disabled)}input:disabled+label{color:var(--color-text-disabled);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--color-text-disabled)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label{-webkit-margin-start:10px;margin-inline-start:10px}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--color-text-message);font-size:14px;-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}';const c=l;const h=class{constructor(o){e(this,o);this.pdsCheckboxChange=r(this,"pdsCheckboxChange",7);this.pdsCheckboxInput=r(this,"pdsCheckboxInput",7);this.handleCheckboxChange=e=>{if(this.disabled){return}const r=e.target;this.checked=r.checked;this.pdsCheckboxChange.emit({checked:r.checked,value:this.value})};this.handleInput=()=>{this.pdsCheckboxInput.emit({checked:this.checked,value:this.value})};this.checked=false;this.componentId=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.indeterminate=undefined;this.invalid=undefined;this.label=undefined;this.labelHidden=undefined;this.name=undefined;this.required=undefined;this.value=undefined}updateIndeterminate(){this.indeterminate=undefined}classNames(){const e=[];if(this.invalid){e.push("is-invalid")}if(this.indeterminate){e.push("is-indeterminate")}if(this.disabled){e.push("is-disabled")}return e.join(" ")}render(){return o(i,{key:"445bf52e75b4d45cffa0621550c3221da77cd28a",class:this.classNames()},o("input",{key:"326a380543328244ad71da4188d3a18561a8ddd3",type:"checkbox","aria-describedby":n(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,id:this.componentId,indeterminate:this.indeterminate,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange,onInput:this.handleInput}),o(a,{key:"eb22531287c39f53ad02eeba93e3845ead776f01",htmlFor:this.componentId,text:this.label,classNames:this.labelHidden?"visually-hidden":""}),this.helperMessage&&o("div",{key:"f434bc8e221fcd55d864c40de9b030066bbfc028",class:"pds-checkbox__message",id:t(this.componentId,"helper")},this.helperMessage),this.errorMessage&&o("div",{key:"b3193bc5239041909f7d256e8ad20d23dfab0ef3",class:`pds-checkbox__message pds-checkbox__message--error`,id:t(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage))}static get watchers(){return{checked:["updateIndeterminate"]}}};h.style=d+c;export{h as pds_checkbox};
|
|
2
|
-
//# sourceMappingURL=p-92d66400.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsCheckboxStyle0","pdsCheckboxCss","PdsCheckboxStyle1","PdsCheckbox","this","handleCheckboxChange","e","disabled","target","checked","pdsCheckboxChange","emit","value","handleInput","pdsCheckboxInput","updateIndeterminate","indeterminate","undefined","classNames","invalid","push","join","render","h","Host","key","class","type","assignDescription","componentId","helperMessage","id","name","required","onChange","onInput","PdsLabel","htmlFor","text","label","labelHidden","messageId","errorMessage"],"sources":["src/global/styles/base.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n --border-color-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-500);\n\n --border-radius: var(--pine-border-radius-050);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);\n\n --color-background: var(--pine-color-white);\n --color-background-disabled: var(--pine-color-grey-200);\n --color-background-hover: var(--pine-color-grey-100);\n --color-border-disabled: var(--pine-color-grey-600);\n --color-border-icon: var(--pine-color-white);\n --color-checked: var(--pine-color-grey-950);\n --color-disabled: var(--pine-color-grey-300);\n --color-invalid: var(--pine-color-red-300);\n --color-text-disabled: var(--pine-color-grey-500);\n --color-text-message: var(--pine-color-grey-700);\n\n --sizing-input: var(--pine-font-size-100);\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--color-invalid);\n\n &:checked {\n background: var(--color-invalid);\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus-invalid); // Remove when outline radius is supported in Safari\n outline: none;\n }\n }\n\n label,\n .pds-checkbox__message--error {\n color: var(--color-invalid);\n }\n}\n\n:host(.is-indeterminate) {\n input {\n background: var(--color-checked);\n border-color: var(--color-checked);\n\n &::after {\n border: 1px solid var(--color-border-icon);\n border-bottom: 0;\n border-left: 0;\n border-top: 0;\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(87deg) translate3d(-114%, 25%, 0);\n width: 4px;\n }\n }\n}\n\ninput {\n appearance: none;\n background-color: var(--color-background);\n border: var(--border-default);\n border-radius: var(--border-radius);\n height: var(--sizing-input);\n margin: 0;\n position: relative;\n width: var(--sizing-input);\n\n &:hover {\n background: var(--color-background-hover);\n border: var(--border-color-interactive-hover);\n }\n\n &:checked {\n background: var(--color-checked);\n border-color: var(--color-checked);\n\n &::after {\n border: 1px solid var(--color-border-icon);\n border-left: 0;\n border-top: 0;\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(43deg) translate3d(-110%, -30%, 0);\n width: 4px;\n }\n }\n\n &:disabled {\n background: var(--color-background-disabled);\n border-color: var(--color-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--color-disabled);\n border-color: var(--color-disabled);\n\n &::after {\n border-color: var(--color-border-disabled);\n }\n }\n\n + label {\n color: var(--color-text-disabled);\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--color-text-disabled);\n }\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\nlabel {\n margin-inline-start: 10px;\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.pds-checkbox__message {\n color: var(--color-text-message);\n font-size: 14px;\n margin-block-start: 6px;\n margin-inline-start: 26px;\n width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/base.scss', 'pds-checkbox.scss'],\n shadow: true,\n})\nexport class PdsCheckbox {\n /**\n * It determines whether or not the checkbox is checked.\n */\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * It determines whether or not the checkbox is disabled.\n */\n @Prop() disabled: boolean;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * String used for helper message below checkbox.\n */\n @Prop() helperMessage: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n */\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /**\n * It determines whether or not the checkbox is invalid.\n */\n @Prop() invalid: boolean;\n\n /**\n * String used for label text next to checkbox.\n */\n @Prop() label: string;\n\n /**\n * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() labelHidden: boolean;\n\n /**\n * String used for checkbox `name` attribute.\n */\n @Prop() name: string;\n\n /**\n * It determines whether or not the checkbox is required.\n */\n @Prop() required: boolean;\n\n /**\n * The value of the checkbox that is submitted with a form.\n */\n @Prop() value: string;\n\n /**\n * Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n />\n <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"mappings":"2GAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAiB,y6GACvB,MAAAC,EAAeD,E,MCSFE,EAAW,M,iIA0EdC,KAAAC,qBAAwBC,IAC9B,GAAIF,KAAKG,SAAU,CACjB,M,CAGF,MAAMC,EAASF,EAAEE,OACjBJ,KAAKK,QAAUD,EAAOC,QAEtBL,KAAKM,kBAAkBC,KAAK,CAC1BF,QAASD,EAAOC,QAChBG,MAAOR,KAAKQ,OACZ,EAGIR,KAAAS,YAAc,KACpBT,KAAKU,iBAAiBH,KAAK,CACzBF,QAASL,KAAKK,QACdG,MAAOR,KAAKQ,OACZ,E,aAxFyC,M,iRAkE7C,mBAAAG,GACEX,KAAKY,cAAgBC,S,CAwBf,UAAAC,GACN,MAAMA,EAAa,GAEnB,GAAId,KAAKe,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIhB,KAAKY,cAAe,CAAEE,EAAWE,KAAK,mB,CAC1C,GAAIhB,KAAKG,SAAU,CAAEW,EAAWE,KAAK,c,CAErC,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOtB,KAAKc,cAChBK,EAAA,SAAAE,IAAA,2CACEE,KAAK,WAAU,mBACGC,EAAkBxB,KAAKyB,YAAazB,KAAKe,QAASf,KAAK0B,eAAc,eACzE1B,KAAKe,QAAU,OAASF,UACtCc,GAAI3B,KAAKyB,YACTb,cAAeZ,KAAKY,cACpBgB,KAAM5B,KAAK4B,KACXpB,MAAOR,KAAKQ,MACZH,QAASL,KAAKK,QACdwB,SAAU7B,KAAK6B,SACf1B,SAAUH,KAAKG,SACf2B,SAAU9B,KAAKC,qBACf8B,QAAS/B,KAAKS,cAEhBU,EAACa,EAAQ,CAAAX,IAAA,2CAACY,QAASjC,KAAKyB,YAAaS,KAAMlC,KAAKmC,MAAOrB,WAAYd,KAAKoC,YAAc,kBAAoB,KACzGpC,KAAK0B,eACJP,EAAA,OAAAE,IAAA,2CACEC,MAAO,wBACPK,GAAIU,EAAUrC,KAAKyB,YAAa,WAE/BzB,KAAK0B,eAGT1B,KAAKsC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,qDACPK,GAAIU,EAAUrC,KAAKyB,YAAa,SAAQ,YAC9B,aAETzB,KAAKsC,c","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-c6bee7a0.system.js"],(function(e){"use strict";var t,i,r;return{setters:[function(e){t=e.r;i=e.h;r=e.H}],execute:function(){var n=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var o=n;var a=":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);height:auto;width:100%}";var h=a;var s=e("pds_image",function(){function e(e){t(this,e);this.alt="";this.componentId=undefined;this.height=undefined;this.loading="eager";this.sizes=undefined;this.src=undefined;this.srcset=undefined;this.width=undefined}e.prototype.render=function(){return i(r,{key:"810bb5579a28b8a1867f202ccf555bcb0a1be2a5",class:{"pds-image":true},id:this.componentId},i("img",{key:"66d78e000caaa91db5dbd68ce34824215d3c7bf9",alt:this.alt,height:this.height,loading:this.loading,sizes:this.sizes,src:this.src,srcset:this.srcset,width:this.width}))};return e}());s.style=o+h}}}));
|
|
2
|
-
//# sourceMappingURL=p-9707f75f.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsImageStyle0","pdsImageCss","PdsImageStyle1","PdsImage","exports","class_1","prototype","render","h","Host","key","class","id","this","componentId","alt","height","loading","sizes","src","srcset","width"],"sources":["src/global/styles/base.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n /**\n * @prop --image-aspect-ratio: The image's aspect ratio.\n */\n\n --dimension-aspect-ratio: auto;\n display: inline-block;\n}\n\nimg {\n aspect-ratio: var(--dimension-aspect-ratio);\n height: auto;\n width: 100%;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-image',\n styleUrls: ['../../global/styles/base.scss', 'pds-image.scss'],\n shadow: true,\n})\nexport class PdsImage {\n /**\n * The image's alt tag. If none is provided,\n * it will default to an empty string.\n */\n @Prop() alt? = '';\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * The height of the image in pixels. Setting this will\n * devote space in the layout to prevent layout\n * shifts when the image is loaded.\n */\n @Prop() height?: number;\n\n /**\n * Indicates how the browser should load the image.\n */\n @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n /**\n * Determines the intended display size of an image\n * within certian breakpoints. Has no effect if `srcset`\n * is not set or value has no width descriptor.\n */\n @Prop() sizes?: string;\n\n /**\n * The image's source.\n */\n @Prop() src: string;\n\n /**\n * A set of image sources for the browser to use.\n */\n @Prop() srcset?: string\n\n /**\n * The width of the image in pixels. Setting this will\n * devote space in the layout to prevent layout\n * shifts when the image is loaded.\n */\n @Prop() width?: number;\n\n render() {\n return (\n <Host\n class={{\n 'pds-image': true,\n }}\n id={this.componentId}\n >\n <img\n alt={this.alt}\n height={this.height}\n loading={this.loading}\n sizes={this.sizes}\n src={this.src}\n srcset={this.srcset}\n width={this.width}\n />\n </Host>\n );\n }\n}\n"],"mappings":"kJAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAc,kIACpB,IAAAC,EAAeD,E,ICMFE,EAAQC,EAAA,uB,iCAKJ,G,8DAiBsB,Q,mFA0BrCC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,YAAa,MAEfC,GAAIC,KAAKC,aAETN,EAAA,OAAAE,IAAA,2CACEK,IAAKF,KAAKE,IACVC,OAAQH,KAAKG,OACbC,QAASJ,KAAKI,QACdC,MAAOL,KAAKK,MACZC,IAAKN,KAAKM,IACVC,OAAQP,KAAKO,OACbC,MAAOR,KAAKQ,Q,WA/DD,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as a,c as t,h as e,H as i,g as o}from"./p-7841bd18.js";const r='pds-tab{--border-none:var(--pine-border-width-none);--border-radius-availability:var(--pine-border-radius-100);--border-radius-default:var(--pine-border-radius-125);--border-radius-none:var(--pine-border-radius-0);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--color-background-active:var(--pine-color-grey-900);--color-background-availability:var(--pine-color-white);--color-background-default:var(--pine-color-grey-300);--color-background-hover:var(--pine-color-grey-400);--color-indicator-active:var(--pine-color-mercury-500);--color-text-active:var(--pine-color-grey-900);--color-text-active-inverse:var(--pine-color-white);--color-text-default:var(--pine-color-grey-700);--color-text-focus:var(--pine-color-grey-800);--font-size-availability-content:var(--pine-font-size-085);--font-size-default:var(--pine-font-size-100);--font-size-filter-content:var(--pine-font-size-085);--font-weight-default:var(--pine-font-weight-medium);--line-height-availability-content:var(--pine-line-height-100);--line-height-default:var(--pine-line-height-150);--line-height-filter-content:var(--pine-line-height-125);--outline:4px solid var(--pine-color-blue-200);--spacing-padding-none:var(--pine-spacing-0);display:inline-block;position:relative}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--border-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--spacing-padding-none);-ms-flex-align:center;align-items:center;color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--color-text-active)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover{color:var(--color-text-active)}.pds-tab:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-tab .pds-tab__content{font-family:inherit;font-size:var(--font-size-default);font-weight:var(--font-weight-default);line-height:var(--line-height-default);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--color-indicator-active);bottom:0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:var(--border-radius-availability) var(--border-radius-availability) var(--border-radius-none) var(--border-radius-none);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--color-background-availability)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:1}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--color-background-default)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--color-text-default)}.pds-tabs--availability .pds-tab__content{font-size:var(--font-size-availability-content);line-height:var(--line-height-availability-content);padding-bottom:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter{--color-background-tab:var(--color-background-active)}.pds-tabs--filter .pds-tab{background-color:var(--color-background-tab);border-radius:50px;color:var(--color-text-active);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{--color-background-tab:var(--color-background-active);color:var(--color-text-active-inverse)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--color-background-hover)}.pds-tabs--filter .pds-tab__content{font-size:var(--font-size-filter-content);line-height:var(--line-height-filter-content);-webkit-padding-after:0;padding-block-end:0}.pds-tabs--filter .pds-tab__content::after{content:unset}';const n=r;const s=class{constructor(e){a(this,e);this.pdsTabClick=t(this,"pdsTabClick",7);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.index=undefined;this.selected=false}onTabClick(a,t){this.pdsTabClick.emit([a,t])}render(){const a=e("span",{key:"5ea7f20d14e906993c0cfbef0ae9a37b305be9fd",class:"pds-tab-edge",role:"presentation"});const t=e("span",{key:"9fc8287a57fd777472d9f909a451332b7edd8c39",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return e(i,{key:"16d11c4bda123cbb698674c560dc7c826fe653ca",variant:this.variant,slot:"tabs",index:this.index},e("button",{key:"63e18d48cd1206c87e520cbe85c09e7fbd8752f0",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"&&a,this.variant==="availability"&&t,e("div",{key:"5db0ed6e01b1cfe58f47669b369bb72bd3caa033",class:"pds-tab__content"},e("slot",{key:"1737f4b6a524cf165deb1eb1a2627ae834a76be2"}))))}get el(){return o(this)}};s.style=n;export{s as pds_tab};
|
|
2
|
-
//# sourceMappingURL=p-9cc420b4.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTabCss","PdsTabStyle0","PdsTab","onTabClick","index","parentComponentId","this","pdsTabClick","emit","render","availabilityTabEdgeInlineStart","h","key","class","role","availabilityTabEdgeInlineEnd","Host","variant","slot","id","name","tabindex","selected","onClick","bind"],"sources":["src/components/pds-tabs/pds-tab/pds-tab.scss?tag=pds-tab","src/components/pds-tabs/pds-tab/pds-tab.tsx"],"sourcesContent":["pds-tab {\n --border-none: var(--pine-border-width-none);\n\n --border-radius-availability: var(--pine-border-radius-100);\n --border-radius-default: var(--pine-border-radius-125);\n --border-radius-none: var(--pine-border-radius-0);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\n --color-background-active: var(--pine-color-grey-900);\n --color-background-availability: var(--pine-color-white);\n --color-background-default: var(--pine-color-grey-300);\n --color-background-hover: var(--pine-color-grey-400);\n --color-indicator-active: var(--pine-color-mercury-500);\n --color-text-active: var(--pine-color-grey-900);\n --color-text-active-inverse: var(--pine-color-white);\n --color-text-default: var(--pine-color-grey-700);\n --color-text-focus: var(--pine-color-grey-800);\n\n --font-size-availability-content: var(--pine-font-size-085);\n --font-size-default: var(--pine-font-size-100);\n --font-size-filter-content: var(--pine-font-size-085);\n\n --font-weight-default: var(--pine-font-weight-medium);\n\n --line-height-availability-content: var(--pine-line-height-100);\n --line-height-default: var(--pine-line-height-150);\n --line-height-filter-content: var(--pine-line-height-125);\n\n --outline: 4px solid var(--pine-color-blue-200);\n\n --spacing-padding-none: var(--pine-spacing-0);\n\n display: inline-block;\n position: relative;\n}\n\n///\n/// Resets base button styles\n///\n@mixin pds-button-style-reset {\n appearance: none;\n background-color: transparent;\n border: var(--border-none);\n box-shadow: none;\n color: inherit;\n cursor: pointer;\n font-family: inherit;\n padding: var(--spacing-padding-none);\n}\n\n.pds-tab {\n @include pds-button-style-reset();\n\n align-items: center;\n color: var(--color-text-default);\n display: inline-flex;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n\n &.is-active,\n &[aria-selected='true'] {\n color: var(--color-text-active);\n\n .pds-tab__content::after {\n opacity: 1;\n }\n }\n\n &:hover {\n color: var(--color-text-active);\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n .pds-tab__content {\n font-family: inherit;\n font-size: var(--font-size-default);\n font-weight: var(--font-weight-default);\n line-height: var(--line-height-default);\n padding-block-end: 11px;\n position: relative;\n\n &::after {\n background-color: var(--color-indicator-active);\n bottom: 0;\n content: '';\n height: 3px;\n left: 0;\n opacity: 0;\n position: absolute;\n right: 0;\n }\n }\n\n .pds-tab-edge {\n display: none;\n }\n}\n\n.pds-tabs--availability {\n --color-background-tab: transparent;\n\n .pds-tab {\n background-color: var(--color-background-tab);\n border-radius: var(--border-radius-availability) var(--border-radius-availability) var(--border-radius-none) var(--border-radius-none);\n padding: 8px 16px 13px;\n\n &.is-active,\n &[aria-selected='true'] {\n --color-background-tab: var(--color-background-availability);\n\n .pds-tab__content::after {\n opacity: 1;\n }\n\n .pds-tab-edge {\n z-index: 1;\n }\n }\n\n &:hover:not(.is-active, [aria-selected='true']) {\n --color-background-tab: var(--color-background-default);\n }\n\n &:focus-visible {\n color: var(--color-text-default);\n }\n }\n\n .pds-tab__content {\n font-size: var(--font-size-availability-content);\n line-height: var(--line-height-availability-content);\n padding-bottom: 7px;\n }\n\n .pds-tab-edge {\n bottom: 0;\n display: block;\n height: 8px;\n inset-inline-end: 100%;\n overflow: hidden;\n position: absolute;\n width: 8px;\n\n &::before {\n border-radius: 50%;\n bottom: 0;\n box-shadow: 4px 4px 0 0 var(--color-background-tab);\n content: '';\n display: block;\n height: 200%;\n inset-inline-end: 0;\n position: absolute;\n width: 200%;\n }\n }\n\n .pds-tab-edge--end {\n inset-inline-end: unset;\n inset-inline-start: 100%;\n\n &::before {\n box-shadow: -4px 4px 0 0 var(--color-background-tab);\n inset-inline-end: unset;\n inset-inline-start: 0;\n }\n }\n}\n\n.pds-tabs--filter {\n --color-background-tab: var(--color-background-active);\n\n .pds-tab {\n background-color: var(--color-background-tab);\n border-radius: 50px;\n color: var(--color-text-active);\n padding: 6px 15px;\n\n &.is-active,\n &[aria-selected='true'] {\n --color-background-tab: var(--color-background-active);\n color: var(--color-text-active-inverse)\n }\n\n &:hover:not(.is-active, [aria-selected='true']) {\n --color-background-tab: var(--color-background-hover);\n }\n }\n\n .pds-tab__content {\n font-size: var(--font-size-filter-content);\n line-height: var(--line-height-filter-content);\n padding-block-end: 0;\n\n &::after {\n content: unset;\n }\n }\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'pds-tab',\n styleUrl: 'pds-tab.scss',\n shadow: false,\n})\nexport class PdsTab {\n @Element() el: HTMLPdsTabElement;\n\n /**\n * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property\n */\n @Prop() name!: string;\n\n /**\n * Keeps track of the parentComponentId unique id, this property is passed by parent component\n */\n /** @internal */\n @Prop() parentComponentId: string;\n\n /**\n * Keeps track of if the expected tab variant, this property is passed by parent component\n */\n /** @internal */\n @Prop() variant: string;\n\n /**\n * Keeps track of if the tab index number, this property is passed by parent component\n */\n /** @internal */\n @Prop() index: number;\n\n /**\n * Keeps track of the tabpanel selected state, this property is passed by parent component\n */\n /** @internal */\n @Prop() selected = false;\n\n /**\n * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n */\n /** @internal */\n @Event() pdsTabClick: EventEmitter<object>;\n private onTabClick(index, parentComponentId) {\n this.pdsTabClick.emit([index, parentComponentId]);\n }\n\n render() {\n const availabilityTabEdgeInlineStart = (\n <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n )\n\n const availabilityTabEdgeInlineEnd = (\n <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n )\n\n return (\n <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n <button\n role=\"tab\"\n id={this.parentComponentId + \"__\" + this.name}\n aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n tabindex={this.selected ? \"0\" : \"-1\"}\n aria-selected={this.selected ? \"true\" : \"false\"}\n class={this.selected ? \"pds-tab is-active\" : \"pds-tab\"}\n onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n >\n {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n <div class=\"pds-tab__content\"><slot/></div>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,o5JAClB,MAAAC,EAAeD,E,MCMFE,EAAM,M,iLA8BE,K,CAOX,UAAAC,CAAWC,EAAOC,GACxBC,KAAKC,YAAYC,KAAK,CAACJ,EAAOC,G,CAGhC,MAAAI,GACE,MAAMC,EACJC,EAAA,QAAAC,IAAA,2CAAMC,MAAM,eAAeC,KAAK,iBAGlC,MAAMC,EACJJ,EAAA,QAAAC,IAAA,2CAAMC,MAAM,iCAAiCC,KAAK,iBAGpD,OACEH,EAACK,EAAI,CAAAJ,IAAA,2CAACK,QAASX,KAAKW,QAASC,KAAK,OAAOd,MAAOE,KAAKF,OACnDO,EAAA,UAAAC,IAAA,2CACEE,KAAK,MACLK,GAAIb,KAAKD,kBAAoB,KAAOC,KAAKc,KAAI,gBAC9Bd,KAAKD,kBAAoB,KAAOC,KAAKc,KAAO,SAC3DC,SAAUf,KAAKgB,SAAW,IAAM,KAAI,gBACrBhB,KAAKgB,SAAW,OAAS,QACxCT,MAAOP,KAAKgB,SAAW,oBAAsB,UAC7CC,QAASjB,KAAKH,WAAWqB,KAAKlB,KAAMA,KAAKF,MAAOE,KAAKD,oBAEpDC,KAAKW,UAAY,gBAAkBP,EACnCJ,KAAKW,UAAY,gBAAkBF,EACpCJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAmBF,EAAA,QAAAC,IAAA,+C","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,h as t,H as a,g as i}from"./p-7841bd18.js";const s=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const r=s;const n=":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";const o=n;const h=class{constructor(t){e(this,t);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}tabClickHandler(e){if(this.componentId===e.detail[1]){this.activeTabIndex=e.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}}handleKeyDown(e){const t=["ArrowLeft","ArrowRight","Home","End"];if(t.includes(e.key)){e.preventDefault();this.moveActiveTab(e.key)}}moveActiveTab(e){const t=0;const a=this.tabs.length-1;let i=null;switch(e){case"ArrowLeft":i=this.activeTabIndex===t?a:this.activeTabIndex+-1;break;case"ArrowRight":i=this.activeTabIndex===a?t:this.activeTabIndex+1;break;case"Home":i=t;break;case"End":i=a;break}this.tabs[i].children[0].focus();this.activeTabName=this.tabs[i].name;this.activeTabIndex=i}findAllChildren(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")}propGeneration(e,t=0){e.parentComponentId=this.componentId.toString();e.variant=this.variant.toString();e.selected=this.activeTabName===e.name?true:false;e["index"]=t}passPropsToChildren(){this.tabs.forEach(((e,t)=>{if(this.activeTabName===e.name)this.activeTabIndex=t;this.propGeneration(e,t)}));this.tabPanels.forEach((e=>{this.propGeneration(e)}))}classNames(){let e=`pds-tabs`;if(this.variant&&this.variant!="primary"){const t=`pds-tabs--${this.variant}`;e+=" "+t}return e}componentWillLoad(){this.findAllChildren()}componentWillRender(){this.passPropsToChildren()}render(){return t(a,{key:"590f66c80be5b92b015e6499ee60bef965bbaa1e","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},t("div",{key:"7251690cd8b8ac1425763212883c98826d15fed1",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},t("slot",{key:"d07a6f7b621309db9cd7169184c8e7ae0b3b981f",name:"tabs"})),t("slot",{key:"dcc5b2ea9bdf45f33d3cb2b0a75fa4a2885ec00b",name:"tabpanels"}))}get el(){return i(this)}};h.style=r+o;export{h as pds_tabs};
|
|
2
|
-
//# sourceMappingURL=p-a0b93def.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsTabsStyle0","pdsTabsCss","PdsTabsStyle1","PdsTabs","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","forEach","classNames","className","variantClassName","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/global/styles/base.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n /**\n * @prop --spacing-panel-margin-top: Optional margin-top for panels\n */\n --spacing-panel-margin-top: 0;\n /**\n * @prop --spacing-panel-padding: Optional padding for panels\n */\n --spacing-panel-padding: 0;\n\n --outline: 2px solid var(--pine-color-blue-200);\n\n --spacing-gap-availability: var(--pine-spacing-100);\n --spacing-gap-default: var(--pine-spacing-300);\n --spacing-gap-filter: var(--pine-spacing-200);\n\n display: block;\n}\n\n.pds-tabs__tablist {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n tag: 'pds-tabs',\n styleUrls: ['../../global/styles/base.scss', 'pds-tabs.scss'],\n shadow: true,\n})\nexport class PdsTabs {\n private tabs;\n private tabPanels;\n\n @Element() el: HTMLPdsTabsElement;\n\n /**\n * Sets the aria-label attached to the tablist element\n */\n @Prop() tablistLabel!: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets tabs variant styles as outlined in Figma documentation\n */\n @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n /**\n * Sets the starting active tab name and maintains the name as the component re-renders\n */\n @Prop({mutable: true}) activeTabName!: string;\n\n /**\n * Sets the starting active tab index number and maintains the index number as the component re-renders\n */\n /** @internal */\n @Prop({mutable: true}) activeTabIndex: number;\n\n @Listen('pdsTabClick', {\n target: 'body',\n })\n tabClickHandler(event: CustomEvent<any>) {\n if (this.componentId === event.detail[1]) {\n this.activeTabIndex = event.detail[0];\n this.activeTabName = this.tabs[this.activeTabIndex].name;\n }\n }\n\n @Listen('keydown', {})\n handleKeyDown(ev: KeyboardEvent) {\n const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n if (keySet.includes(ev.key)) {\n ev.preventDefault();\n this.moveActiveTab(ev.key);\n }\n }\n\n private moveActiveTab(key: string) {\n const firstTabNumber = 0;\n const lastTabNumber = this.tabs.length - 1;\n\n let moveFocusTo = null;\n\n switch (key) {\n case 'ArrowLeft':\n moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n break;\n case 'ArrowRight':\n moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n break;\n case 'Home':\n moveFocusTo = firstTabNumber;\n break;\n case 'End':\n moveFocusTo = lastTabNumber;\n break;\n }\n\n // Move focus to the button element within `pds-tab`\n this.tabs[moveFocusTo].children[0].focus();\n this.activeTabName = this.tabs[moveFocusTo].name;\n this.activeTabIndex = moveFocusTo;\n }\n\n private findAllChildren() {\n this.tabs = this.el.querySelectorAll('pds-tab');\n this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n }\n\n private propGeneration(child, index = 0) {\n child.parentComponentId = this.componentId.toString();\n child.variant = this.variant.toString();\n child.selected = (this.activeTabName === child.name) ? true : false;\n child['index'] = index;\n }\n\n private passPropsToChildren() {\n this.tabs.forEach((child, index) => {\n if (this.activeTabName === child.name) this.activeTabIndex = index;\n this.propGeneration(child, index);\n });\n\n this.tabPanels.forEach((child) => {\n this.propGeneration(child);\n });\n }\n\n private classNames() {\n let className = `pds-tabs`;\n if (this.variant && this.variant != 'primary') {\n const variantClassName = `pds-tabs--${this.variant}`;\n className += ' ' + variantClassName;\n }\n\n return className;\n };\n\n componentWillLoad() {\n this.findAllChildren();\n }\n\n componentWillRender() {\n this.passPropsToChildren();\n }\n\n render() {\n return (\n <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n <slot name=\"tabs\" />\n </div>\n <slot name=\"tabpanels\" />\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAa,giBACnB,MAAAC,EAAeD,E,MCUFE,EAAO,M,kKAmClB,eAAAC,CAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,EAKxD,aAAAC,CAAcC,GACZ,MAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,EAIlB,aAAAE,CAAcF,GACpB,MAAMG,EAAiB,EACvB,MAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,CAGhB,eAAAG,GACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,CAGpC,cAAAE,CAAeC,EAAOC,EAAQ,GACpCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,CAGX,mBAAAK,GACN/B,KAAKK,KAAK2B,SAAQ,CAACP,EAAOC,KACxB,GAAI1B,KAAKI,gBAAkBqB,EAAMnB,KAAMN,KAAKG,eAAiBuB,EAC7D1B,KAAKwB,eAAeC,EAAOC,EAAM,IAGnC1B,KAAKuB,UAAUS,SAASP,IACtBzB,KAAKwB,eAAeC,EAAM,G,CAItB,UAAAQ,GACN,IAAIC,EAAY,WAChB,GAAIlC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,MAAMM,EAAmB,aAAanC,KAAK6B,UAC3CK,GAAa,IAAMC,C,CAGrB,OAAOD,C,CAGT,iBAAAE,GACEpC,KAAKoB,iB,CAGP,mBAAAiB,GACErC,KAAK+B,qB,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAA7B,IAAA,6DAAkBX,KAAKI,cAAeqC,MAAOzC,KAAKiC,aAAcS,GAAI1C,KAAKC,aAC5EsC,EAAA,OAAA5B,IAAA,2CAAK8B,MAAM,oBAAoBE,KAAK,UAAS,aAAa3C,KAAK4C,cAC7DL,EAAA,QAAA5B,IAAA,2CAAML,KAAK,UAEbiC,EAAA,QAAA5B,IAAA,2CAAML,KAAK,c","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-c6bee7a0.system.js"],(function(e){"use strict";var r,i,o;return{setters:[function(e){r=e.r;i=e.h;o=e.H}],execute:function(){var a=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var s=a;var t=":host{--color-progress-fill:var(--pine-color-blue-300);--sizing-progress-bar-height:8px;--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{--border-radius:var(--pine-border-radius-050);--color-progress-bar-background:var(--pine-color-grey-300);-ms-flex-align:center;align-items:center;background-color:var(--color-progress-bar-background);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--sizing-progress-bar-height);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--sizing-progress-bar-height);width:100%}progress::-webkit-progress-value{--border-radius:var(--pine-border-radius-050);--color-background:var(--pine-color-blue-300);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}progress::-moz-progress-bar{--color-background:var(--pine-color-blue-300);--border-radius:var(--pine-border-radius-050);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{--font-size:var(--pine-font-size-085);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-150);--spacing-inline-start-margin:var(--pine-spacing-300);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);-webkit-margin-start:calc(var(--spacing-inline-start-margin) / 2);margin-inline-start:calc(var(--spacing-inline-start-margin) / 2)}";var n=t;var l=e("pds_progress",function(){function e(e){r(this,e);this.animated=false;this.componentId=undefined;this.fillColor=undefined;this.label=undefined;this.percent=0;this.showPercent=false}e.prototype.render=function(){return i(o,{key:"abd4f8e7972ff974b671831e38ae821a01bbc519",class:this.animated?{"is-animated":this.animated}:""},i("div",{key:"b6afe1b42ccf8f346c88648276d1e991fe41fd91",class:"pds-progress"},i("label",{key:"676f91cdc74a861005cc7a25f811d51212641ee1",class:"pds-progress__label",htmlFor:this.componentId},this.label),i("progress",{key:"5f0154648ba27c6d83bd9fd3d7c3b59597665b1c",id:this.componentId,max:"100",style:this.fillColor?{"--color-progress-fill":this.fillColor}:{},value:this.percent})),this.showPercent&&i("div",{key:"a538abd09affcb043a215c2ca504a9cbbe500332",class:"pds-progress__percentage"},this.percent,"%"))};return e}());l.style=s+n}}}));
|
|
2
|
-
//# sourceMappingURL=p-ac2af4c2.system.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as o,H as r,g as i}from"./p-7841bd18.js";import{c as s}from"./p-0b77685e.js";const n=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const a=n;const h=":host{--color-background-fixed:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--color-background-fixed);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}";const l=h;const c=class{constructor(o){e(this,o);this.pdsTableRowSelected=t(this,"pdsTableRowSelected",7);this.handleClick=()=>{this.isSelected=!this.isSelected;this.handleSelect(this.isSelected)};this.handleSelect=e=>{this.indeterminate=false;if(!s("pds-table-head",this.hostElement)){const t=Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement);this.pdsTableRowSelected.emit({rowIndex:t,isSelected:e})}};this.generateUniqueId=()=>{const e=Math.random().toString(36).substring(2,8);const t=(new Date).toISOString().replace(/[:.]/g,"-");const o=`${e}-${t}`;return o};this.indeterminate=undefined;this.isSelected=undefined}classNames(){const e=[];if(this.isSelected){e.push("is-selected")}return e.join(" ")}componentWillRender(){this.tableRef=this.hostElement.closest("pds-table");if(this.tableRef&&this.tableRef.fixedColumn){const e=this.hostElement.querySelector("pds-table-cell");e===null||e===void 0?void 0:e.classList.add("is-fixed")}}componentWillLoad(){if(this.isSelected){this.handleSelect(this.isSelected)}}render(){return o(r,{key:"ccc46bba7ffde3633444f7108b0481eff6e43bb8",class:this.classNames(),role:"row"},this.tableRef&&this.tableRef.selectable&&o("pds-table-cell",{key:"76743fa777e0d12ccb43579783ae4df4386c4b02",part:this.tableRef.fixedColumn?"checkbox-cell":"",class:this.tableRef.selectable?"has-checkbox":""},o("pds-checkbox",{key:"484056e443407c4250098b021484608a4da84f48",componentId:this.generateUniqueId(),onClick:this.handleClick,indeterminate:this.indeterminate,label:"Select Row",labelHidden:true,checked:this.isSelected})),o("slot",{key:"349559a00f291841f7073e6259eb9cffa3a445fd"}))}get hostElement(){return i(this)}};c.style=a+l;export{c as pds_table_row};
|
|
2
|
-
//# sourceMappingURL=p-b1a6ee59.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsTableRowStyle0","pdsTableRowCss","PdsTableRowStyle1","PdsTableRow","this","handleClick","isSelected","handleSelect","indeterminate","closest","hostElement","rowIndex","Array","from","parentNode","children","indexOf","pdsTableRowSelected","emit","generateUniqueId","randomString","Math","random","toString","substring","timestamp","Date","toISOString","replace","uniqueId","classNames","push","join","componentWillRender","tableRef","fixedColumn","tableCell","querySelector","classList","add","componentWillLoad","render","h","Host","key","class","role","selectable","part","componentId","onClick","label","labelHidden","checked"],"sources":["src/global/styles/base.scss?tag=pds-table-row&encapsulation=shadow","src/components/pds-table/pds-table-row/pds-table-row.scss?tag=pds-table-row&encapsulation=shadow","src/components/pds-table/pds-table-row/pds-table-row.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --color-background-fixed: var(--pine-color-white);\n --color-background-interactive: var(--pine-color-grey-200);\n\n border-color: inherit;\n display: table-row;\n vertical-align: inherit;\n\n // used for pds-checkbox-cell\n // because it is in the ShadowDom\n &::part(checkbox-cell) {\n background-color: var(--color-background-fixed);\n left: 0;\n position: sticky;\n z-index: 1;\n }\n}\n\n:host(:hover),\n:host(:hover)::part(checkbox-cell),\n:host(:hover) ::slotted(pds-table-cell),\n:host(.is-selected),\n:host(.is-selected)::part(checkbox-cell),\n:host(.is-selected) ::slotted(pds-table-cell) {\n background: var(--color-background-interactive);\n}\n","import { Component, Element, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\nimport { closest } from '../../../utils/closest';\n\n@Component({\n tag: 'pds-table-row',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-row.scss'],\n shadow: true,\n})\nexport class PdsTableRow {\n @Element() hostElement: HTMLPdsTableRowElement;\n private tableRef: HTMLPdsTableElement;\n\n /**\n * Indicates that the selection state is indeterminate.\n * */\n @Prop({ mutable: true }) indeterminate?: boolean\n\n /**\n * A local state to track whether the row is currently selected.\n */\n @Prop({ mutable: true }) isSelected?: boolean;\n\n /**\n * Event that is emitted when the checkbox is clicked, carrying the selected value.\n */\n @Event() pdsTableRowSelected: EventEmitter<{ rowIndex: number; isSelected: boolean; }>;\n\n private handleClick = () => {\n this.isSelected = !this.isSelected; // Toggle the selected state\n this.handleSelect(this.isSelected);\n }\n\n private handleSelect = (isSelected: boolean) => {\n this.indeterminate = false;\n\n if (!closest('pds-table-head', this.hostElement)) {\n const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n this.pdsTableRowSelected.emit({\n rowIndex,\n isSelected,\n })\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.isSelected) {\n classNames.push(\"is-selected\");\n }\n\n return classNames.join(' ');\n }\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n if (this.tableRef && this.tableRef.fixedColumn) {\n const tableCell = this.hostElement.querySelector('pds-table-cell');\n tableCell?.classList.add(\"is-fixed\");\n }\n }\n\n componentWillLoad() {\n if (this.isSelected) {\n this.handleSelect(this.isSelected);\n }\n }\n\n private generateUniqueId = () => {\n const randomString = Math.random().toString(36).substring(2, 8);\n const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n const uniqueId = `${randomString}-${timestamp}`;\n\n return uniqueId;\n }\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"row\"\n >\n {this.tableRef && this.tableRef.selectable && (\n <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : ''} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n <pds-checkbox\n componentId={this.generateUniqueId()}\n onClick={this.handleClick}\n indeterminate={this.indeterminate}\n label={\"Select Row\"}\n labelHidden={true}\n checked={this.isSelected}\n />\n </pds-table-cell>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAiB,wiBACvB,MAAAC,EAAeD,E,MCQFE,EAAW,M,kFAmBdC,KAAAC,YAAc,KACpBD,KAAKE,YAAcF,KAAKE,WACxBF,KAAKG,aAAaH,KAAKE,WAAW,EAG5BF,KAAAG,aAAgBD,IACtBF,KAAKI,cAAgB,MAErB,IAAKC,EAAQ,iBAAkBL,KAAKM,aAAc,CAChD,MAAMC,EAAWC,MAAMC,KAAKT,KAAKM,YAAYI,WAAWC,UAAUC,QAAQZ,KAAKM,aAC/EN,KAAKa,oBAAoBC,KAAK,CAC5BP,WACAL,c,GA8BEF,KAAAe,iBAAmB,KACzB,MAAMC,EAAeC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,GAC7D,MAAMC,GAAY,IAAIC,MAAOC,cAAcC,QAAQ,QAAS,KAC5D,MAAMC,EAAW,GAAGT,KAAgBK,IAEpC,OAAOI,CAAQ,E,uDA9BT,UAAAC,GACN,MAAMA,EAAa,GAEnB,GAAI1B,KAAKE,WAAY,CACnBwB,EAAWC,KAAK,c,CAGlB,OAAOD,EAAWE,KAAK,K,CAGzB,mBAAAC,GACE7B,KAAK8B,SAAW9B,KAAKM,YAAYD,QAAQ,aAEzC,GAAIL,KAAK8B,UAAY9B,KAAK8B,SAASC,YAAa,CAC9C,MAAMC,EAAYhC,KAAKM,YAAY2B,cAAc,kBACjDD,IAAS,MAATA,SAAS,SAATA,EAAWE,UAAUC,IAAI,W,EAI7B,iBAAAC,GACE,GAAIpC,KAAKE,WAAY,CACnBF,KAAKG,aAAaH,KAAKE,W,EAY3B,MAAAmC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOzC,KAAK0B,aACZgB,KAAK,OAEJ1C,KAAK8B,UAAY9B,KAAK8B,SAASa,YAC9BL,EAAA,kBAAAE,IAAA,2CAAgBI,KAAM5C,KAAK8B,SAASC,YAAc,gBAAkB,GAAIU,MAAOzC,KAAK8B,SAASa,WAAa,eAAiB,IACzHL,EAAA,gBAAAE,IAAA,2CACEK,YAAa7C,KAAKe,mBAClB+B,QAAS9C,KAAKC,YACdG,cAAeJ,KAAKI,cACpB2C,MAAO,aACPC,YAAa,KACbC,QAASjD,KAAKE,cAIpBoC,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-c6bee7a0.system.js","./p-224a435b.system.js"],(function(e){"use strict";var t,o,r,i,n,a;return{setters:[function(e){t=e.r;o=e.c;r=e.h;i=e.H;n=e.g},function(e){a=e.c}],execute:function(){var h=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var s=h;var l=":host{--color-background-fixed:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--color-background-fixed);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}";var c=l;var p=e("pds_table_row",function(){function e(e){var r=this;t(this,e);this.pdsTableRowSelected=o(this,"pdsTableRowSelected",7);this.handleClick=function(){r.isSelected=!r.isSelected;r.handleSelect(r.isSelected)};this.handleSelect=function(e){r.indeterminate=false;if(!a("pds-table-head",r.hostElement)){var t=Array.from(r.hostElement.parentNode.children).indexOf(r.hostElement);r.pdsTableRowSelected.emit({rowIndex:t,isSelected:e})}};this.generateUniqueId=function(){var e=Math.random().toString(36).substring(2,8);var t=(new Date).toISOString().replace(/[:.]/g,"-");var o="".concat(e,"-").concat(t);return o};this.indeterminate=undefined;this.isSelected=undefined}e.prototype.classNames=function(){var e=[];if(this.isSelected){e.push("is-selected")}return e.join(" ")};e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table");if(this.tableRef&&this.tableRef.fixedColumn){var e=this.hostElement.querySelector("pds-table-cell");e===null||e===void 0?void 0:e.classList.add("is-fixed")}};e.prototype.componentWillLoad=function(){if(this.isSelected){this.handleSelect(this.isSelected)}};e.prototype.render=function(){return r(i,{key:"ccc46bba7ffde3633444f7108b0481eff6e43bb8",class:this.classNames(),role:"row"},this.tableRef&&this.tableRef.selectable&&r("pds-table-cell",{key:"76743fa777e0d12ccb43579783ae4df4386c4b02",part:this.tableRef.fixedColumn?"checkbox-cell":"",class:this.tableRef.selectable?"has-checkbox":""},r("pds-checkbox",{key:"484056e443407c4250098b021484608a4da84f48",componentId:this.generateUniqueId(),onClick:this.handleClick,indeterminate:this.indeterminate,label:"Select Row",labelHidden:true,checked:this.isSelected})),r("slot",{key:"349559a00f291841f7073e6259eb9cffa3a445fd"}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());p.style=s+c}}}));
|
|
2
|
-
//# sourceMappingURL=p-bc6231a7.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsTableRowStyle0","pdsTableRowCss","PdsTableRowStyle1","PdsTableRow","exports","this","handleClick","_this","isSelected","handleSelect","indeterminate","closest","hostElement","rowIndex","Array","from","parentNode","children","indexOf","pdsTableRowSelected","emit","generateUniqueId","randomString","Math","random","toString","substring","timestamp","Date","toISOString","replace","uniqueId","concat","class_1","prototype","classNames","push","join","componentWillRender","tableRef","fixedColumn","tableCell","querySelector","classList","add","componentWillLoad","render","h","Host","key","class","role","selectable","part","componentId","onClick","label","labelHidden","checked"],"sources":["src/global/styles/base.scss?tag=pds-table-row&encapsulation=shadow","src/components/pds-table/pds-table-row/pds-table-row.scss?tag=pds-table-row&encapsulation=shadow","src/components/pds-table/pds-table-row/pds-table-row.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --color-background-fixed: var(--pine-color-white);\n --color-background-interactive: var(--pine-color-grey-200);\n\n border-color: inherit;\n display: table-row;\n vertical-align: inherit;\n\n // used for pds-checkbox-cell\n // because it is in the ShadowDom\n &::part(checkbox-cell) {\n background-color: var(--color-background-fixed);\n left: 0;\n position: sticky;\n z-index: 1;\n }\n}\n\n:host(:hover),\n:host(:hover)::part(checkbox-cell),\n:host(:hover) ::slotted(pds-table-cell),\n:host(.is-selected),\n:host(.is-selected)::part(checkbox-cell),\n:host(.is-selected) ::slotted(pds-table-cell) {\n background: var(--color-background-interactive);\n}\n","import { Component, Element, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\nimport { closest } from '../../../utils/closest';\n\n@Component({\n tag: 'pds-table-row',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-row.scss'],\n shadow: true,\n})\nexport class PdsTableRow {\n @Element() hostElement: HTMLPdsTableRowElement;\n private tableRef: HTMLPdsTableElement;\n\n /**\n * Indicates that the selection state is indeterminate.\n * */\n @Prop({ mutable: true }) indeterminate?: boolean\n\n /**\n * A local state to track whether the row is currently selected.\n */\n @Prop({ mutable: true }) isSelected?: boolean;\n\n /**\n * Event that is emitted when the checkbox is clicked, carrying the selected value.\n */\n @Event() pdsTableRowSelected: EventEmitter<{ rowIndex: number; isSelected: boolean; }>;\n\n private handleClick = () => {\n this.isSelected = !this.isSelected; // Toggle the selected state\n this.handleSelect(this.isSelected);\n }\n\n private handleSelect = (isSelected: boolean) => {\n this.indeterminate = false;\n\n if (!closest('pds-table-head', this.hostElement)) {\n const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n this.pdsTableRowSelected.emit({\n rowIndex,\n isSelected,\n })\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.isSelected) {\n classNames.push(\"is-selected\");\n }\n\n return classNames.join(' ');\n }\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n if (this.tableRef && this.tableRef.fixedColumn) {\n const tableCell = this.hostElement.querySelector('pds-table-cell');\n tableCell?.classList.add(\"is-fixed\");\n }\n }\n\n componentWillLoad() {\n if (this.isSelected) {\n this.handleSelect(this.isSelected);\n }\n }\n\n private generateUniqueId = () => {\n const randomString = Math.random().toString(36).substring(2, 8);\n const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n const uniqueId = `${randomString}-${timestamp}`;\n\n return uniqueId;\n }\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"row\"\n >\n {this.tableRef && this.tableRef.selectable && (\n <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : ''} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n <pds-checkbox\n componentId={this.generateUniqueId()}\n onClick={this.handleClick}\n indeterminate={this.indeterminate}\n label={\"Select Row\"}\n labelHidden={true}\n checked={this.isSelected}\n />\n </pds-table-cell>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"gNAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAiB,wiBACvB,IAAAC,EAAeD,E,ICQFE,EAAWC,EAAA,2B,4FAmBdC,KAAAC,YAAc,WACpBC,EAAKC,YAAcD,EAAKC,WACxBD,EAAKE,aAAaF,EAAKC,W,EAGjBH,KAAAI,aAAe,SAACD,GACtBD,EAAKG,cAAgB,MAErB,IAAKC,EAAQ,iBAAkBJ,EAAKK,aAAc,CAChD,IAAMC,EAAWC,MAAMC,KAAKR,EAAKK,YAAYI,WAAWC,UAAUC,QAAQX,EAAKK,aAC/EL,EAAKY,oBAAoBC,KAAK,CAC5BP,SAAQA,EACRL,WAAUA,G,GA8BRH,KAAAgB,iBAAmB,WACzB,IAAMC,EAAeC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,GAC7D,IAAMC,GAAY,IAAIC,MAAOC,cAAcC,QAAQ,QAAS,KAC5D,IAAMC,EAAW,GAAAC,OAAGV,EAAY,KAAAU,OAAIL,GAEpC,OAAOI,C,yDA9BDE,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAI9B,KAAKG,WAAY,CACnB2B,EAAWC,KAAK,c,CAGlB,OAAOD,EAAWE,KAAK,K,EAGzBJ,EAAAC,UAAAI,oBAAA,WACEjC,KAAKkC,SAAWlC,KAAKO,YAAYD,QAAQ,aAEzC,GAAIN,KAAKkC,UAAYlC,KAAKkC,SAASC,YAAa,CAC9C,IAAMC,EAAYpC,KAAKO,YAAY8B,cAAc,kBACjDD,IAAS,MAATA,SAAS,SAATA,EAAWE,UAAUC,IAAI,W,GAI7BX,EAAAC,UAAAW,kBAAA,WACE,GAAIxC,KAAKG,WAAY,CACnBH,KAAKI,aAAaJ,KAAKG,W,GAY3ByB,EAAAC,UAAAY,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO7C,KAAK8B,aACZgB,KAAK,OAEJ9C,KAAKkC,UAAYlC,KAAKkC,SAASa,YAC9BL,EAAA,kBAAAE,IAAA,2CAAgBI,KAAMhD,KAAKkC,SAASC,YAAc,gBAAkB,GAAIU,MAAO7C,KAAKkC,SAASa,WAAa,eAAiB,IACzHL,EAAA,gBAAAE,IAAA,2CACEK,YAAajD,KAAKgB,mBAClBkC,QAASlD,KAAKC,YACdI,cAAeL,KAAKK,cACpB8C,MAAO,aACPC,YAAa,KACbC,QAASrD,KAAKG,cAIpBuC,EAAA,QAAAE,IAAA,6C,gIAvFgB,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as r,H as o}from"./p-7841bd18.js";import{a as i}from"./p-2665d555.js";const n=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const a=n;const d=":host(.pds-copytext){--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-radius-default:var(--pine-border-radius-125);--border-radius-hover:var(--pine-border-radius-0);--border-width-default:var(--pine-border-width-none);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--color-background-default:var(--pine-color-white);--color-border-interactive-hover:var(--pine-color-grey-400);--color-text-hover:var(--pine-color-grey-900);--copytext-color-background-hover:var(--pine-color-grey-200);--font-size-default:var(--pine-font-size-100);--font-weight-default:var(--pine-font-weight-semi-bold);--spacing-bordered-margin-inline-end:var(--pine-spacing-200);--spacing-bordered-padding-block:var(--pine-spacing-100);--spacing-bordered-padding-inline:var(--pine-spacing-200);--spacing-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-050);--spacing-padding-inline:var(--pine-spacing-100);--spacing-padding-none:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--color-background-default);border:var(--border-width-default);border-radius:var(--border-radius-default);display:-ms-inline-flexbox;display:inline-flex;font:var(--typography-default);max-width:100%;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);border-radius:var(--border-radius-hover);color:var(--color-text-hover)}:host(.pds-copytext) pds-button span{-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:var(--border-width-default);padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border-interactive-default);border-radius:var(--border-radius-default);-webkit-margin-end:var(--spacing-bordered-margin-inline-end);margin-inline-end:var(--spacing-bordered-margin-inline-end);padding-block:var(--spacing-bordered-padding-block);padding-inline:var(--spacing-bordered-padding-inline)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--border-interactive-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";const p=d;const s=class{constructor(r){e(this,r);this.pdsCopyTextClick=t(this,"pdsCopyTextClick",7);this.copyToClipboard=async e=>{try{if(typeof navigator.clipboard!=="undefined"){await navigator.clipboard.writeText(e);this.pdsCopyTextClick.emit("Copied to clipboard")}}catch(e){this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${e}`)}};this.handleClick=()=>{this.copyToClipboard(this.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}classNames(){const e=["pds-copytext"];if(this.border){e.push("pds-copytext--bordered")}if(this.fullWidth){e.push("pds-copytext--full-width")}if(this.truncate){e.push("pds-copytext--truncated")}return e.join(" ")}render(){return r(o,{key:"24f8ccba6099b5a4f283fe049dc38e32c916c80e",class:this.classNames(),id:this.componentId},r("pds-button",{key:"7b4d6703944df7a4a3932663b5c09b496d642f0c",type:"button",variant:"unstyled",onClick:this.handleClick},r("span",{key:"68ab90f525b04edc3d708d7405d34558aee8c98e"},this.value),r("pds-icon",{key:"06a24c4577dc10917e69314a6d19db8e6a88e7f7",icon:i,size:"16px"})))}};s.style=a+p;export{s as pds_copytext};
|
|
2
|
-
//# sourceMappingURL=p-bed5aa4e.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsCopytextStyle0","pdsCopytextCss","PdsCopytextStyle1","PdsCopytext","this","copyToClipboard","async","value","navigator","clipboard","writeText","pdsCopyTextClick","emit","err","handleClick","classNames","border","push","fullWidth","truncate","join","render","h","Host","key","class","id","componentId","type","variant","onClick","icon","copyIcon","size"],"sources":["src/global/styles/base.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host(.pds-copytext) {\n\n --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n --border-radius-default: var(--pine-border-radius-125);\n --border-radius-hover: var(--pine-border-radius-0);\n\n --border-width-default: var(--pine-border-width-none);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\n --color-background-default: var(--pine-color-white);\n --color-border-interactive-hover: var(--pine-color-grey-400);\n --color-text-hover: var(--pine-color-grey-900);\n // Update custom prop usage in Button before changing\n --copytext-color-background-hover: var(--pine-color-grey-200);\n\n --font-size-default: var(--pine-font-size-100);\n --font-weight-default: var(--pine-font-weight-semi-bold);\n\n --spacing-bordered-margin-inline-end: var(--pine-spacing-200);\n --spacing-bordered-padding-block: var(--pine-spacing-100);\n --spacing-bordered-padding-inline: var(--pine-spacing-200);\n --spacing-margin-inline-end: var(--pine-spacing-100);\n --spacing-padding-block: var(--pine-spacing-050);\n --spacing-padding-inline: var(--pine-spacing-100);\n --spacing-padding-none: var(--pine-spacing-0);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n pds-button {\n align-items: center;\n background: var(--color-background-default);\n border: var(--border-width-default);\n border-radius: var(--border-radius-default);\n display: inline-flex;\n font: var(--typography-default);\n max-width: 100%;\n padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n &::part(button):hover {\n // Update custom prop usage in Button before changing\n background-color: var(--copytext-color-background-hover);\n border-radius: var(--border-radius-hover);\n color: var(--color-text-hover);\n }\n\n span {\n margin-inline-end: var(--spacing-margin-inline-end);\n white-space: nowrap;\n }\n\n :nth-child(2) {\n flex-shrink: 0;\n }\n }\n\n // bordered\n\n &:host(.pds-copytext--bordered) {\n border: var(--border-width-default);\n padding: var(--spacing-padding-none);\n\n pds-button {\n padding: var(--spacing-padding-none);\n\n &:hover {\n background: none;\n }\n }\n\n span {\n border: var(--border-interactive-default);\n border-radius: var(--border-radius-default);\n margin-inline-end: var(--spacing-bordered-margin-inline-end);\n padding-block: var(--spacing-bordered-padding-block);\n padding-inline: var(--spacing-bordered-padding-inline);\n }\n\n :hover {\n span {\n border: var(--border-interactive-hover);\n }\n }\n }\n\n // full width\n\n &:host(.pds-copytext--full-width) {\n display: flex;\n width: 100%;\n\n pds-button {\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n span {\n text-align: left;\n width: 100%;\n }\n }\n }\n\n // truncated\n\n &:host(.pds-copytext--truncated) {\n pds-button {\n display: flex;\n width: 100%;\n\n span {\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n width: 100%;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-copytext',\n styleUrls: ['../../global/styles/base.scss', 'pds-copytext.scss'],\n shadow: true,\n})\nexport class PdsCopytext {\n /**\n * Determines whether `copytext` should have a border.\n * @defaultValue true\n */\n @Prop({ reflect: true }) border = true;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether `copytext` should expand to the full width of its container.\n * @defaultValue false\n */\n @Prop() fullWidth = false;\n\n /**\n * Determines whether the `value` should truncate and display with an ellipsis.\n * @defaultValue false\n */\n @Prop() truncate = false;\n\n /**\n * String that is displayed and that is also copied to the clipboard upon interaction.\n */\n @Prop() value!: string;\n\n /**\n * Event when copyText button is clicked.\n */\n @Event() pdsCopyTextClick: EventEmitter;\n\n private copyToClipboard = async (value: string) => {\n try {\n if (typeof navigator.clipboard !== 'undefined') {\n await navigator.clipboard.writeText(value);\n this.pdsCopyTextClick.emit('Copied to clipboard');\n }\n } catch (err) {\n this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n }\n };\n\n private handleClick = () => {\n this.copyToClipboard(this.value);\n };\n\n private classNames() {\n const classNames = ['pds-copytext'];\n\n if (this.border) {\n classNames.push('pds-copytext--bordered');\n }\n\n if (this.fullWidth) {\n classNames.push('pds-copytext--full-width');\n }\n\n if (this.truncate) {\n classNames.push('pds-copytext--truncated');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n <span>{this.value}</span>\n <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n </pds-button>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAiB,g1GACvB,MAAAC,EAAeD,E,MCQFE,EAAW,M,4EAkCdC,KAAAC,gBAAkBC,MAAOC,IAC/B,IACE,UAAWC,UAAUC,YAAc,YAAa,OACxCD,UAAUC,UAAUC,UAAUH,GACpCH,KAAKO,iBAAiBC,KAAK,sB,EAE7B,MAAOC,GACPT,KAAKO,iBAAiBC,KAAK,oCAAoCC,I,GAI3DT,KAAAU,YAAc,KACpBV,KAAKC,gBAAgBD,KAAKG,MAAM,E,YAzCA,K,0CAWd,M,cAMD,M,qBA2BX,UAAAQ,GACN,MAAMA,EAAa,CAAC,gBAEpB,GAAIX,KAAKY,OAAQ,CACfD,EAAWE,KAAK,yB,CAGlB,GAAIb,KAAKc,UAAW,CAClBH,EAAWE,KAAK,2B,CAGlB,GAAIb,KAAKe,SAAU,CACjBJ,EAAWE,KAAK,0B,CAGlB,OAAOF,EAAWK,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOrB,KAAKW,aAAcW,GAAItB,KAAKuB,aACvCL,EAAA,cAAAE,IAAA,2CAAYI,KAAK,SAASC,QAAQ,WAAWC,QAAS1B,KAAKU,aACzDQ,EAAA,QAAAE,IAAA,4CAAOpB,KAAKG,OACZe,EAAA,YAAAE,IAAA,2CAAUO,KAAMC,EAAUC,KAAK,U","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-c6bee7a0.system.js"],(function(e){"use strict";var i,t,o,n;return{setters:[function(e){i=e.r;t=e.h;o=e.H;n=e.g}],execute:function(){var r=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var a=r;var l=":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-085);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";var s=l;var h=e("pds_table_cell",function(){function e(e){var t=this;i(this,e);this.handleScroll=function(){if(t.tableRef.scrollLeft>0){t.tableScrolling=true}else{t.tableScrolling=false}};this.truncate=undefined;this.tableScrolling=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.truncate){e.push("is-truncated")}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return t(o,{key:"28e14af2a71566974799bd9894be69257ad0c819",class:this.classNames(),role:"gridcell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},t("slot",{key:"c2c98f8cfc27c4f7ee30a488c67c7601cbd882ad"}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());h.style=a+s}}}));
|
|
2
|
-
//# sourceMappingURL=p-c605e47f.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsTableCellStyle0","pdsTableCellCss","PdsTableCellStyle1","PdsTableCell","exports","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","class_1","prototype","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","truncate","join","render","h","Host","key","class","role","style","selectable"],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-085);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n this.tableRef.addEventListener('scroll', this.handleScroll);\n }\n }\n\n /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.truncate) {\n classNames.push('is-truncated');\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"0JAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAkB,orCACxB,IAAAC,EAAeD,E,ICMFE,EAAYC,EAAA,4B,mCAuCfC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,+CAxBiB,K,CAf3CC,EAAAC,UAAAC,oBAAA,WACER,KAAKG,SAAWH,KAAKS,YAAYC,QAAQ,Y,EAG3CJ,EAAAC,UAAAI,iBAAA,WACE,GAAIX,KAAKG,UAAYH,KAAKG,SAASS,YAAcZ,KAAKG,SAASU,YAAa,CAC1Eb,KAAKG,SAASW,iBAAiB,SAAUd,KAAKC,a,GAW1CK,EAAAC,UAAAQ,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIf,KAAKG,UAAYH,KAAKG,SAASa,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIjB,KAAKkB,SAAU,CACjBH,EAAWE,KAAK,e,CAGlB,GAAIjB,KAAKG,UAAYH,KAAKG,SAASU,aAAeb,KAAKK,eAAgB,CACrEU,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,EAWzBb,EAAAC,UAAAa,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOxB,KAAKe,aACZU,KAAK,WACLC,MACE1B,KAAKG,UACLH,KAAKG,SAASU,aACdb,KAAKG,SAASwB,WACV,CAAE,wBAAyB,QAC3B,IAGNN,EAAA,QAAAE,IAAA,6C,gIA5DiB,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as r,h as i,H as o,g as t}from"./p-7841bd18.js";import{m as a,P as n,a as s}from"./p-bc1ecf2f.js";const l=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const c=l;const h=':host{--border-radius-input:var(--pine-border-radius-200);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-outline-focus);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-outline-focus-error);--box-shadow-input-toggle:0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);--color-background-checked:var(--pine-color-grey-900);--color-background-checked-hover:var(--pine-color-grey-900);--color-background-disabled:var(--pine-color-grey-300);--color-background-hover:var(--pine-color-grey-500);--color-background-input-default:var(--pine-color-grey-400);--color-input-toggle:var(--pine-color-white);--color-message-text:var(--pine-color-grey-700);--color-outline-focus:var(--pine-color-purple-300);--color-outline-focus-error:var(--pine-color-red-200);--color-text-default:var(--pine-color-grey-900);--color-text-disabled:var(--pine-color-grey-500);--color-text-error:var(--pine-color-red-300);--dimension-input-height:20px;--dimension-input-width:36px;--line-height-label:var(--pine-line-height-150);--sizing-input-toggle-size:calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));--spacing-label-gap-size:var(--pine-spacing-150);--spacing-input-toggle-offset:calc(var(--pine-spacing-050) / 2);--spacing-message-block:var(--pine-spacing-050);--spacing-message-inline:calc(var(--dimension-input-width) + var(--spacing-label-gap-size));--number-transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-margin-after:var(--pine-spacing-md);margin-block-end:var(--pine-spacing-md);position:relative}:host(.pds-switch--error){color:var(--color-text-error)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--color-text-error)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-background-input-default);border:0;border-radius:var(--border-radius-input);cursor:pointer;display:inline-block;height:var(--dimension-input-height);margin:0;padding:0;position:relative;-webkit-transform:translateY(2px);transform:translateY(2px);-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--dimension-input-width)}input::after{background:var(--color-input-toggle);border-radius:50%;-webkit-box-shadow:var(--box-shadow-input-toggle);box-shadow:var(--box-shadow-input-toggle);content:"";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate3d(-100%, -50%, 0);transform:translate3d(-100%, -50%, 0);-webkit-transition:-webkit-transform var(--number-transition-timing);transition:-webkit-transform var(--number-transition-timing);transition:transform var(--number-transition-timing);transition:transform var(--number-transition-timing), -webkit-transform var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1;line-height:var(--line-height-label);-webkit-margin-start:var(--spacing-label-gap-size);margin-inline-start:var(--spacing-label-gap-size)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--color-message-text);-ms-flex:1 0 100%;flex:1 0 100%;font-size:var(--pine-font-size-body-sm);line-height:var(--pine-line-height-sm);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-block);margin-block-start:var(--spacing-message-block)}.pds-switch__message--error{color:inherit}input:disabled{background-color:var(--color-background-disabled);cursor:not-allowed}input:disabled~label{color:var(--color-text-disabled);cursor:initial}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--color-background-hover)}input:focus-visible:not(:disabled){-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input:checked::after{-webkit-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}input:checked:not(:disabled){background-color:currentColor;color:var(--color-background-checked)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--color-background-checked-hover)}';const d=h;const p=class{constructor(i){e(this,i);this.pdsSwitchChange=r(this,"pdsSwitchChange",7);this.onSwitchUpdate=e=>{if(this.disabled)return;this.pdsSwitchChange.emit(e)};this.switchClassNames=()=>{let e=`pds-switch`;if(this.invalid===true){e+=" pds-switch--error"}if(this.helperMessage!==undefined){e+=" pds-switch--message"}return e};this.componentId=undefined;this.checked=false;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=undefined;this.required=false;this.type="checkbox";this.value=undefined}render(){return i(o,{key:"cfe44d745504683403b213ab29408db7f8c2b4d7",class:this.switchClassNames(),"aria-disabled":this.disabled?"true":null},i("input",{key:"51373deeef6851a469b2bdb1f2c8859a8b97e93a","aria-describedby":s(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}),i(n,{key:"0622674c77dfb3bd8e41baea47872d56e2510b9d",classNames:"pds-switch__label",htmlFor:this.componentId,text:this.label}),this.helperMessage&&i("div",{key:"9097140a515b36a71fa173c4c74c484bb4ad8e31",class:`pds-switch__message`,id:a(this.componentId,"helper")},this.helperMessage),this.errorMessage&&i("div",{key:"a21ff88ba0418517da90a932b84d44167e6ba295",class:`pds-switch__message pds-switch__message--error`,id:a(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage))}get el(){return t(this)}};p.style=c+d;export{p as pds_switch};
|
|
2
|
-
//# sourceMappingURL=p-cf7e76e4.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsSwitchStyle0","pdsSwitchCss","PdsSwitchStyle1","PdsSwitch","this","onSwitchUpdate","e","disabled","pdsSwitchChange","emit","switchClassNames","switchClasses","invalid","helperMessage","undefined","render","h","Host","key","class","assignDescription","componentId","checked","id","name","onChange","required","type","value","PdsLabel","classNames","htmlFor","text","label","messageId","errorMessage"],"sources":["src/global/styles/base.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-radius-input: var(--pine-border-radius-200);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-outline-focus);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-outline-focus-error);\n --box-shadow-input-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);\n\n --color-background-checked: var(--pine-color-grey-900);\n --color-background-checked-hover: var(--pine-color-grey-900);\n --color-background-disabled: var(--pine-color-grey-300);\n --color-background-hover: var(--pine-color-grey-500);\n --color-background-input-default: var(--pine-color-grey-400);\n --color-input-toggle: var(--pine-color-white);\n --color-message-text: var(--pine-color-grey-700);\n --color-outline-focus: var(--pine-color-purple-300);\n --color-outline-focus-error: var(--pine-color-red-200);\n --color-text-default: var(--pine-color-grey-900);\n --color-text-disabled: var(--pine-color-grey-500);\n --color-text-error: var(--pine-color-red-300);\n\n --dimension-input-height: 20px;\n --dimension-input-width: 36px;\n\n --line-height-label: var(--pine-line-height-150);\n\n --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));\n\n --spacing-label-gap-size: var(--pine-spacing-150);\n --spacing-input-toggle-offset: calc(var(--pine-spacing-050) / 2);\n --spacing-message-block: var(--pine-spacing-050);\n --spacing-message-inline: calc(var(--dimension-input-width) + var(--spacing-label-gap-size));\n\n --number-transition-timing: 0.15s ease-out;\n\n\n align-items: flex-start;\n color: var(--color-text-default);\n display: inline-flex;\n flex-flow: row wrap;\n margin-block-end: var(--pine-spacing-md);\n position: relative;\n}\n\n:host(.pds-switch--error) {\n color: var(--color-text-error);\n\n input,\n input:checked,\n input:hover:not(:disabled):not(:checked) {\n background-color: var(--color-text-error);\n }\n\n input:focus-visible:not(:disabled):not(:checked) {\n box-shadow: var(--box-shadow-focus-error);\n }\n}\n\n// switch container\ninput {\n appearance: none;\n background: var(--color-background-input-default);\n border: 0;\n border-radius: var(--border-radius-input);\n cursor: pointer;\n display: inline-block;\n height: var(--dimension-input-height);\n margin: 0;\n padding: 0;\n position: relative;\n transform: translateY(2px);\n transition: var(--number-transition-timing);\n transition-property: background, border, color;\n width: var(--dimension-input-width);\n\n // switch toggle\n &::after {\n background: var(--color-input-toggle);\n border-radius: 50%;\n box-shadow: var(--box-shadow-input-toggle);\n content: \"\";\n display: block;\n height: var(--sizing-input-toggle-size);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n position: absolute;\n transform: translate3d(-100%, -50%, 0);\n transition: transform var(--number-transition-timing);\n width: var(--sizing-input-toggle-size);\n }\n}\n\nlabel {\n cursor: pointer;\n display: inline-flex;\n flex-grow: 1;\n line-height: var(--line-height-label);\n margin-inline-start: var(--spacing-label-gap-size);\n\n .pds-switch--error & {\n color: inherit;\n }\n}\n\n// Help and error messages\n.pds-switch__message {\n color: var(--color-message-text);\n flex: 1 0 100%;\n font-size: var(--pine-font-size-body-sm);\n line-height: var(--pine-line-height-sm);\n margin-inline-start: var(--spacing-message-inline);\n\n + .pds-switch__message {\n margin-block-start: var(--spacing-message-block);\n }\n}\n\n.pds-switch__message--error {\n color: inherit;\n}\n\n// Disabled state\ninput:disabled {\n background-color: var(--color-background-disabled);\n cursor: not-allowed;\n\n ~ label {\n color: var(--color-text-disabled);\n cursor: initial;\n }\n\n .pds-switch__message {\n color: initial;\n }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n background-color: var(--color-background-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n background-color: currentColor;\n color: var(--color-background-checked);\n\n &:hover {\n border-color: currentColor;\n color: var(--color-background-checked-hover);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-switch',\n styleUrls: ['../../global/styles/base.scss', 'pds-switch.scss'],\n shadow: true,\n})\nexport class PdsSwitch {\n @Element() el: HTMLPdsSwitchElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines the input 'checked' state\n */\n @Prop() checked = false;\n\n /**\n * Determines the input 'disabled' state, preventing user interaction\n */\n @Prop() disabled? = false;\n\n /**\n * Displays message text describing an invalid state\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays help text for additional description of an input\n */\n @Prop() helperMessage: string;\n\n /**\n * Determines the input 'invalid' state, signifying an error is present\n */\n @Prop() invalid? = false;\n\n /**\n * Displays text to describe the input\n */\n @Prop() label!: string;\n\n /**\n * Identifies form data and unifies a group of radio inputs for toggling a single property/value\n */\n @Prop() name: string;\n\n /**\n * Determines the 'required' state of the input\n */\n @Prop() required? = false;\n\n /**\n * Specifies the underlying input element type\n * @defaultValue 'checkbox'\n */\n @Prop() type: 'checkbox' | 'radio' = 'checkbox';\n\n /**\n * Provides input with a string submitted in form data, and can be used to distinguish radio inputs\n */\n @Prop() value: string;\n\n /**\n * Emits an event on input change\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n /**\n * Generate switch classes\n */\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type={this.type}\n value={this.value}\n />\n <PdsLabel classNames=\"pds-switch__label\" htmlFor={this.componentId} text={this.label} />\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"mappings":"kHAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAe,6rJACrB,MAAAC,EAAeD,E,MCQFE,EAAS,M,0EAgEZC,KAAAC,eAAkBC,IACxB,GAAIF,KAAKG,SAAU,OACnBH,KAAKI,gBAAgBC,KAAKH,EAAgB,EAMpCF,KAAAM,iBAAmB,KACzB,IAAIC,EAAgB,aAEpB,GAAIP,KAAKQ,UAAY,KAAM,CACzBD,GAAiB,oB,CAEnB,GAAIP,KAAKS,gBAAkBC,UAAW,CACpCH,GAAiB,sB,CAEnB,OAAOA,CAAa,E,wCAtEJ,M,cAKE,M,sEAeD,M,uDAeC,M,UAMiB,W,qBAgCrC,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOf,KAAKM,mBAAkB,gBAAiBN,KAAKG,SAAW,OAAS,MAC5ES,EAAA,SAAAE,IAAA,8DACoBE,EAAkBhB,KAAKiB,YAAajB,KAAKQ,QAASR,KAAKS,eAAc,eACzET,KAAKQ,QAAU,OAASE,UACtCQ,QAASlB,KAAKkB,QACdH,MAAM,oBACNZ,SAAUH,KAAKG,SACfgB,GAAInB,KAAKiB,YACTG,KAAMpB,KAAKoB,KAAOpB,KAAKoB,KAAOpB,KAAKiB,YACnCI,SAAUrB,KAAKC,eACfqB,SAAUtB,KAAKsB,SACfC,KAAMvB,KAAKuB,KACXC,MAAOxB,KAAKwB,QAEdZ,EAACa,EAAQ,CAAAX,IAAA,2CAACY,WAAW,oBAAoBC,QAAS3B,KAAKiB,YAAaW,KAAM5B,KAAK6B,QAC9E7B,KAAKS,eACJG,EAAA,OAAAE,IAAA,2CACEC,MAAO,sBACPI,GAAIW,EAAU9B,KAAKiB,YAAa,WAE/BjB,KAAKS,eAGTT,KAAK+B,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,iDACPI,GAAIW,EAAU9B,KAAKiB,YAAa,SAAQ,YAC9B,aAETjB,KAAK+B,c","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r,h as o,H as e,g as a}from"./p-7841bd18.js";import{b as t}from"./p-2665d555.js";const n=r=>!!r.shadowRoot&&!!r.attachShadow;const i=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const d=i;const c=":host{--border-radius-default:var(--pine-border-radius-round);--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-grey-900);--color-background-primary-disabled:var(--pine-color-grey-300);--color-background-primary-hover:var(--pine-color-grey-950);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-grey-600);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-grey-900);--color-text-secondary-disabled:var(--pine-color-grey-600);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-purple-500);--color-background-accent-disabled:var(--pine-color-purple-150);--color-background-accent-hover:var(--pine-color-purple-600);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-purple-300);--color-outline-accent:var(--pine-color-purple-300);--color-background-destructive-default:var(--pine-color-red-300);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-400);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-200);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{color:currentColor;fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";const l=c;const s=class{constructor(o){r(this,o);this.handleClick=r=>{if(this.type!="button"){if(n(this.el)){const o=this.el.closest("form");if(o){r.preventDefault();const e=document.createElement("button");e.type=this.type;e.style.display="none";o.appendChild(e);e.click();e.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}classNames(){const r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join(" ")}render(){return o(e,{key:"4c63b9a386ed3d9d9f3516648ec26c3823ac6fa6","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},o("button",{key:"50cdc14ea87c350f2e173fb38006021bfe0b78d7",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&o("pds-icon",{key:"94e7c0b1b6b8223b78afe5b61a6073b907afc6e1",name:this.icon,part:"icon"}),o("slot",{key:"736b97d814d34eb8a01ddd22ade8d9ee5a35de82"}),this.variant==="disclosure"&&o("pds-icon",{key:"f7bea88482de7bfaf23c74e71d9748a403df6a76",icon:t,part:"caret"})))}get el(){return a(this)}};s.style=d+l;export{s as pds_button};
|
|
2
|
-
//# sourceMappingURL=p-da2e5736.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","baseCss","PdsButtonStyle0","pdsButtonCss","PdsButtonStyle1","PdsButton","this","handleClick","ev","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/global/styles/base.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow\n}\n","// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-radius-default: var(--pine-border-radius-round);\n\n --border-width-default: var(--pine-border-width-thin);\n --border-width-unstyled: var(--pine-border-radius-0);\n\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n\n // primary\n --color-background-primary-default: var(--pine-color-grey-900);\n --color-background-primary-disabled: var(--pine-color-grey-300);\n --color-background-primary-hover: var(--pine-color-grey-950);\n --color-text-primary-default: var(--pine-color-white);\n --color-text-primary-disabled: var(--pine-color-grey-600);\n --color-outline-primary: var(--pine-color-blue-200);\n\n // secondary\n --color-border-secondary-default: var(--pine-color-grey-400);\n --color-border-secondary-disabled: var(--pine-color-grey-300);\n --color-border-secondary-focus: var(--pine-color-grey-300);\n --color-border-secondary-hover: var(--pine-color-grey-500);\n --color-text-secondary-default: var(--pine-color-grey-900);\n --color-text-secondary-disabled: var(--pine-color-grey-600);\n --color-outline-secondary: var(--pine-color-blue-200);\n\n // accent\n --color-background-accent-default: var(--pine-color-purple-500);\n --color-background-accent-disabled: var(--pine-color-purple-150);\n --color-background-accent-hover: var(--pine-color-purple-600);\n --color-text-accent-default: var(--pine-color-white);\n --color-text-accent-disabled: var(--pine-color-purple-300);\n --color-outline-accent: var(--pine-color-purple-300);\n\n // destructive\n --color-background-destructive-default: var(--pine-color-red-300);\n --color-background-destructive-disabled: var(--pine-color-red-100);\n --color-background-destructive-hover: var(--pine-color-red-400);\n --color-text-destructive-default: var(--pine-color-white);\n --color-text-destructive-disabled: var(--pine-color-red-200);\n --color-outline-destructive: var(--pine-color-red-200);\n\n --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n --spacing-padding-block: var(--pine-spacing-100);\n --spacing-padding-inline: var(--pine-spacing-200);\n --spacing-unstyled: var(--pine-spacing-0);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n.pds-button {\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--border-width-default) solid var(--color-border-default);\n border-radius: var(--pine-border-radius-125);\n color: var(--color-text-default);\n display: flex;\n font: var(--typography-default);\n min-height: 40px;\n padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n margin-inline-end: var(--spacing-icon-margin-inline-end);\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n border-color: var(--color-border-focus);\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--color-background-primary-default);\n --color-background-hover: var(--color-background-primary-hover);\n --color-background-disabled: var(--color-background-primary-disabled);\n --color-text-default: var(--color-text-primary-default);\n --color-text-disabled: var(--color-text-primary-disabled);\n --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--color-background-accent-default);\n --color-background-hover: var(--color-background-accent-hover);\n --color-background-disabled: var(--color-background-accent-disabled);\n --color-text-default: var(--color-text-accent-default);\n --color-text-disabled: var(--color-text-accent-disabled);\n --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--color-background-destructive-default);\n --color-background-hover: var(--color-background-destructive-hover);\n --color-background-disabled: var(--color-background-destructive-disabled);\n --color-text-default: var(--color-text-destructive-default);\n --color-text-disabled: var(--color-text-destructive-disabled);\n --color-outline: var(--color-outline-destructive);\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-border-disabled: var(--color-border-secondary-disabled);\n --color-border-focus: var(--color-border-secondary-focus);\n --color-border-hover: var(--color-border-secondary-hover);\n --color-border-default: var(--color-border-secondary-default);\n --color-text-default: var(--color-text-secondary-default);\n --color-text-disabled: var(--color-text-secondary-disabled);\n --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: inherit;\n border: var(--border-width-unstyled);\n margin: var(--spacing-unstyled);\n min-height: auto;\n padding: var(--spacing-unstyled);\n width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['../../global/styles/base.scss', 'pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Toggles disabled state of button\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Displays icon before text when icon string matches an icon name\n */\n @Prop() icon?: string = null;\n\n /**\n * Provides button with a submittable name\n */\n @Prop() name?: string;\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Provides button with a type\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form')\n if (form) {\n ev.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.type\n fakeButton.style.display = 'none'\n form.appendChild(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n }\n }\n }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"wFAIO,MAAMA,EAAgBC,KAClBA,EAAGC,cAAiBD,EAAWE,aCL1C,MAAMC,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAe,iwLACrB,MAAAC,EAAeD,E,MCeFE,EAAS,M,yBAwCZC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,MAAQ,SAAU,CAEzB,GAAIZ,EAAaS,KAAKR,IAAK,CACzB,MAAMY,EAAOJ,KAAKR,GAAGa,QAAQ,QAC7B,GAAID,EAAM,CACRF,EAAGI,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOH,KAAKG,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1F,UAAAC,GACN,MAAMA,EAAa,CAAC,cAEpB,GAAIf,KAAKgB,QAAS,CAChBD,EAAWE,KAAK,eAAiBjB,KAAKgB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,KACxCC,GAAIxB,KAAKyB,YACTC,QAAS1B,KAAKC,YACde,QAAShB,KAAKgB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO3B,KAAKe,aACZQ,SAAUvB,KAAKuB,SACfK,KAAM5B,KAAK4B,KACXC,KAAK,SACL1B,KAAMH,KAAKG,KACX2B,MAAO9B,KAAK8B,OAEX9B,KAAK+B,MAAQ/B,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM5B,KAAK+B,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCtB,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,EAAWH,KAAK,W","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r,h as e,H as o}from"./p-7841bd18.js";import{c as a,u as i}from"./p-2665d555.js";const t=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const n=t;const s=":host{display:inline-block}div{--color-background-container:var(--pine-color-mercury-050);--color-background-badge:var(--pine-color-white);--color-border-badge:var(--pine-color-white);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-radius-round:var(--pine-border-radius-round);--border-radius-none:var(--pine-border-radius-0);--spacing-none:var(--pine-spacing-0);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--border-radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-spacing-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--border-radius-round:var(--pine-border-radius-round);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--border-radius-none);border-radius:var(--border-radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--spacing-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--color-background-badge);border:var(--border-default);border-color:var(--color-border-badge);border-radius:var(--border-radius-round);bottom:var(--spacing-none);position:absolute;right:var(--spacing-none)}img{border-radius:var(--border-radius-admin-round, var(--border-radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";const d=s;const p=class{constructor(o){r(this,o);this.renderAssetWrapper=()=>{const r={height:this.avatarSize(),width:this.avatarSize()};return e("div",{style:r,part:"asset-wrapper"},this.renderIconOrImage(),this.renderBadge())};this.renderAvatar=()=>this.dropdown?e("button",{class:"pds-avatar__button",type:"button","aria-label":"Avatar dropdown trigger"},this.renderAssetWrapper()):this.renderAssetWrapper();this.renderBadge=()=>this.badge&&e("pds-icon",{color:"var(--pine-color-purple-600)",class:"pds-avatar__badge",icon:a,size:"33.53%"});this.renderIconOrImage=()=>this.image?e("img",{alt:this.alt,src:this.image}):e("pds-icon",{color:"var(--pine-color-mercury-500)",icon:i,size:"33.53%"});this.classNames=()=>({"pds-avatar":true,[`pds-avatar--has-image`]:this.image!==""&&this.image!==null,[`pds-avatar--${this.variant}`]:this.variant==="admin"});this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}avatarSize(){const r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}}render(){return e(o,{key:"0b753aa7cb61c88a3808684a67eb1ee84898822c",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())}};p.style=n+d;export{p as pds_avatar};
|
|
2
|
-
//# sourceMappingURL=p-db81d86a.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsAvatarStyle0","pdsAvatarCss","PdsAvatarStyle1","PdsAvatar","this","renderAssetWrapper","style","height","avatarSize","width","h","part","renderIconOrImage","renderBadge","renderAvatar","dropdown","class","type","badge","color","icon","checkCircleFilled","size","image","alt","src","userFilled","classNames","variant","sizes","xs","sm","md","lg","xl","render","Host","key","id","componentId","Object","assign"],"sources":["src/global/styles/base.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n display: inline-block;\n}\n\ndiv {\n // These custom props are not reachable\n --color-background-container: var(--pine-color-mercury-050);\n --color-background-badge: var(--pine-color-white);\n --color-border-badge: var(--pine-color-white);\n\n --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n --border-radius-round: var(--pine-border-radius-round);\n --border-radius-none: var(--pine-border-radius-0);\n\n --spacing-none: var(--pine-spacing-0);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-spacing-150);\n border-radius: var(--border-radius-admin-round);\n }\n\n // Remove when FF has support for :has\n :host(.pds-avatar--has-image) & {\n background: transparent\n }\n\n @supports selector(:has) {\n &:has(img) {\n background-color: transparent\n }\n }\n}\n\n.pds-avatar__button {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n --border-radius-round: var(--pine-border-radius-round);\n\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--border-radius-none);\n border-radius: var(--border-radius-round);\n cursor: pointer;\n display: flex;\n padding: var(--spacing-none);\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n.pds-avatar__badge {\n background-color: var(--color-background-badge);\n border: var(--border-default);\n border-color: var(--color-border-badge);\n border-radius: var(--border-radius-round);\n bottom: var(--spacing-none);\n position: absolute;\n right: var(--spacing-none);\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n tag: 'pds-avatar',\n styleUrls: ['../../global/styles/base.scss', 'pds-avatar.scss'],\n shadow: true,\n})\nexport class PdsAvatar {\n\n /**\n * The alt for a custom user image.\n * @defaultValue null\n */\n @Prop() alt?: string | null = null;\n\n /**\n * Determines whether the badge is visible or not.\n * @defaultValue false\n */\n @Prop() badge? = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether the avatar functions as a dropdown trigger.\n * @defaultValue false\n */\n @Prop() dropdown? = false;\n\n /**\n * The src for a custom user image.\n * @defaultValue null\n */\n @Prop() image?: string | null = null;\n\n /**\n * Size of the avatar. Value can be preset or custom.\n * @defaultValue lg\n */\n @Prop({ reflect: true }) size?:\n | 'xl' // 64px\n | 'lg' // 56px\n | 'md' // 40px\n | 'sm' // 32px\n | 'xs' // 24px\n | string = 'lg';\n\n /**\n * Determines the variant of avatar. Changes appearance accordingly.\n * @defaultValue customer\n */\n @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n private avatarSize() {\n const sizes: { [key: string]: any } = {\n xs: '24px',\n sm: '32px',\n md: '40px',\n lg: '56px',\n xl: '64px',\n }\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size\n }\n }\n\n private renderAssetWrapper = () => {\n const style = {\n height: this.avatarSize(),\n width: this.avatarSize()\n };\n\n return (\n <div style={style} part=\"asset-wrapper\">\n {this.renderIconOrImage()}\n {this.renderBadge()}\n </div>\n )\n };\n\n private renderAvatar = () => {\n return (\n this.dropdown\n ?\n <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n {this.renderAssetWrapper()}\n </button>\n :\n this.renderAssetWrapper()\n )\n };\n\n private renderBadge = () => (\n this.badge\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => (\n this.image\n ? <img alt={this.alt} src={this.image} />\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n : <pds-icon color=\"var(--pine-color-mercury-500)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n );\n\n private classNames = () => (\n {\n 'pds-avatar': true,\n [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n }\n );\n\n render() {\n\n return (\n <Host\n id={this.componentId}\n class={{...this.classNames()}}\n >\n {this.renderAvatar()}\n </Host>\n );\n }\n}\n"],"mappings":"wFAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAe,i1DACrB,MAAAC,EAAeD,E,MCUFE,EAAS,M,yBAiEZC,KAAAC,mBAAqB,KAC3B,MAAMC,EAAQ,CACZC,OAAQH,KAAKI,aACbC,MAAOL,KAAKI,cAGd,OACEE,EAAA,OAAKJ,MAAOA,EAAOK,KAAK,iBACrBP,KAAKQ,oBACLR,KAAKS,cACF,EAIFT,KAAAU,aAAe,IAEnBV,KAAKW,SAEHL,EAAA,UAAQM,MAAM,qBAAqBC,KAAK,SAAQ,aAAY,2BAC3Db,KAAKC,sBAGND,KAAKC,qBAIHD,KAAAS,YAAc,IACpBT,KAAKc,OAIAR,EAAA,YAAUS,MAAM,+BAA+BH,MAAM,oBAAoBI,KAAMC,EAAmBC,KAAK,WAGtGlB,KAAAQ,kBAAoB,IAC1BR,KAAKmB,MACDb,EAAA,OAAKc,IAAKpB,KAAKoB,IAAKC,IAAKrB,KAAKmB,QAI9Bb,EAAA,YAAUS,MAAM,gCAAgCC,KAAMM,EAAYJ,KAAK,WAGrElB,KAAAuB,WAAa,MAEjB,aAAc,KACd,CAAC,yBAA0BvB,KAAKmB,QAAU,IAAMnB,KAAKmB,QAAU,KAC/D,CAAC,eAAenB,KAAKwB,WAAYxB,KAAKwB,UAAY,U,SA1GxB,K,WAMb,M,yCAWG,M,WAMY,K,UAYrB,K,aAM+C,U,CAElD,UAAApB,GACN,MAAMqB,EAAgC,CACpCC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QAGN,GAAIL,EAAMzB,KAAKkB,MAAO,CACpB,OAAOO,EAAMzB,KAAKkB,K,KACb,CACL,OAAOlB,KAAKkB,I,EAuDhB,MAAAa,GAEE,OACEzB,EAAC0B,EAAI,CAAAC,IAAA,2CACHC,GAAIlC,KAAKmC,YACTvB,MAAKwB,OAAAC,OAAA,GAAMrC,KAAKuB,eAEfvB,KAAKU,e","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-c6bee7a0.system.js","./p-244e264d.system.js"],(function(e){"use strict";var a,r,n,i;return{setters:[function(e){a=e.r;r=e.h;n=e.H},function(e){i=e.d}],execute:function(){var o=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var t=o;var s=":host{display:block}details{--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--color-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-150);--color-text-default:var(--pine-color-grey-700);--color-text-active:var(--pine-color-grey-950);--color-text-hover:var(--pine-color-grey-800);--font-weight-active:var(--pine-font-weight-semi-bold);--number-animation-transform-timing:200ms;--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-details-padding-block-end:calc(var(--pine-spacing-200) + 2);--spacing-summary-padding-block:calc(var(--pine-spacing-150) / 2);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-inter);border-radius:var(--border-radius-default)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1)}details[open]{background-color:var(--color-background-default)}details[open] summary{color:var(--color-text-active);font-weight:var(--font-weight-active)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1)}summary{background-color:var(--color-background-default);border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none;position:relative}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-padding-after:var(--spacing-details-padding-block-end);padding-block-end:var(--spacing-details-padding-block-end);padding-inline:var(--spacing-details-padding-inline)}";var d=s;var c=e("pds_accordion",function(){function e(e){var r=this;a(this,e);this.handleToggle=function(){r.isOpen=r.detailsEl.open};this.getOpenAttribute=function(){if(r.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}e.prototype.handleOpenState=function(e){this.isOpen=e};e.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};e.prototype.render=function(){var e=this;return r(n,{key:"9a8c2f915879f63d8a7255cf0f58b55f4b590eed",class:"pds-accordion",id:this.componentId},r("details",Object.assign({key:"f5428c5e340c55750fb94d85dfd7cdbb853c32de"},this.getOpenAttribute(),{ref:function(a){return e.detailsEl=a}}),r("summary",{key:"9255f9c850016e964d468ed35578c01159b7f234",part:"accordion-button"},r("slot",{key:"2b1dba36c97ed9c46b1efe7aac44cae4203e7a50",name:"label"},"Details"),r("pds-icon",{key:"9185cfd595c09a15c57fe1e1d89a2895c461aa46",icon:i})),r("div",{key:"41d030c5ffc2cee2099f141e80695c1f4e6ddcb0",part:"accordion-body",class:"pds-accordion__body"},r("slot",{key:"b10afd83e6bec657dfa88cdf4a73f32f12d46935"}))))};Object.defineProperty(e,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return e}());c.style=t+d}}}));
|
|
2
|
-
//# sourceMappingURL=p-eb398624.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["baseCss","PdsAccordionStyle0","pdsAccordionCss","PdsAccordionStyle1","PdsAccordion","exports","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","class_1","prototype","handleOpenState","newValue","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","part","name","icon","downSmall"],"sources":["src/global/styles/base.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n display: block;\n}\n\ndetails {\n --border-radius-default: var(--pine-border-radius-100);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\n --color-background-default: var(--pine-color-white);\n --color-background-hover: var(--pine-color-grey-150);\n --color-text-default: var(--pine-color-grey-700);\n --color-text-active: var(--pine-color-grey-950);\n --color-text-hover: var(--pine-color-grey-800);\n\n --font-weight-active: var(--pine-font-weight-semi-bold);\n\n --number-animation-transform-timing: 200ms;\n\n --spacing-details-padding-inline: var(--pine-spacing-150);\n --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2); //18 + 2 = 18px\n --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2); //12 / 2 = 6px\n --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-inter);\n\n border-radius: var(--border-radius-default);\n\n pds-icon {\n transform: scaleY(1);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-background-default);\n\n summary {\n color: var(--color-text-active);\n font-weight: var(--font-weight-active);\n\n pds-icon {\n transform: scaleY(-1);\n }\n }\n}\n\nsummary {\n background-color: var(--color-background-default);\n border-radius: var(--border-radius-default);\n color: var(--color-text-default);\n font: var(--typography-default);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-text-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n position: relative;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n padding-block-end: var(--spacing-details-padding-block-end);\n padding-inline: var(--spacing-details-padding-inline);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrls: ['../../global/styles/base.scss','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 part=\"accordion-button\">\n <slot name=\"label\">Details</slot>\n <pds-icon icon={downSmall} />\n </summary>\n <div part=\"accordion-body\" class=\"pds-accordion__body\">\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"gMAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAkB,60EACxB,IAAAC,EAAeD,E,ICaFE,EAAYC,EAAA,2B,mCAwBfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCAfY,K,CAGrBE,EAAAC,UAAAC,gBAAA,SAAgBC,GACdV,KAAKG,OAASO,C,EAchBH,EAAAC,UAAAG,iBAAA,WACEX,KAAKI,UAAUQ,iBAAiB,SAAUZ,KAAKC,a,EAGjDM,EAAAC,UAAAK,OAAA,eAAAX,EAAAF,KACE,OACEc,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIlB,KAAKmB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAahB,KAAKM,mBAAkB,CAAEgB,IAAK,SAACC,GAAE,OAAMrB,EAAKE,UAAYmB,CAAvB,IAC5CT,EAAA,WAAAE,IAAA,2CAASQ,KAAK,oBACZV,EAAA,QAAAE,IAAA,2CAAMS,KAAK,SAAO,WAClBX,EAAA,YAAAE,IAAA,2CAAUU,KAAMC,KAElBb,EAAA,OAAAE,IAAA,2CAAKQ,KAAK,iBAAiBP,MAAM,uBAC/BH,EAAA,QAAAE,IAAA,+C,uIAhDa,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,h as i,H as a}from"./p-7841bd18.js";const s=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const r=s;const n=":host{--color-background-default:var(--pine-color-grey-400);--spacing-offset-xxs:var(--pine-spacing-050);--spacing-offset-xs:var(--pine-spacing-100);--spacing-offset-sm:var(--pine-spacing-200);--spacing-offset-md:var(--pine-spacing-300);--spacing-offset-lg:var(--pine-spacing-450);--spacing-offset-xxl:var(--pine-spacing-800)}.pds-divider{background:var(--color-background-default);border:0;display:-ms-flexbox;display:flex;height:1px;margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--spacing-offset-xxs) * -1);padding:0 var(--spacing-offset-xxs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--spacing-offset-xxs) * -1) 0;padding:var(--spacing-offset-xxs) 0}.pds-divider--offset-xs{margin:0 calc(var(--spacing-offset-xs) * -1);padding:0 var(--spacing-offset-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--spacing-offset-xs) * -1) 0;padding:var(--spacing-offset-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--spacing-offset-sm) * -1);padding:0 var(--spacing-offset-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--spacing-offset-sm) * -1) 0;padding:var(--spacing-offset-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--spacing-offset-md) * -1);padding:0 var(--spacing-offset-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--spacing-offset-md) * -1) 0;padding:var(--spacing-offset-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--spacing-offset-lg) * -1);padding:0 var(--spacing-offset-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--spacing-offset-lg) * -1) 0;padding:var(--spacing-offset-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--spacing-offset-xl) * -1);padding:0 var(--spacing-offset-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--spacing-offset-xl) * -1) 0;padding:var(--spacing-offset-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--spacing-offset-xxl) * -1);padding:0 var(--spacing-offset-xxl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--spacing-offset-xxl) * -1) 0;padding:var(--spacing-offset-xxl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";const t=n;const o=class{constructor(i){e(this,i);this.componentId=undefined;this.offset=undefined;this.vertical=false}classNames(){const e=["pds-divider"];if(this.vertical){e.push("pds-divider--vertical")}if(this.offset){const i="pds-divider--offset-"+this.offset;e.push(i)}return e.join(" ")}render(){return i(a,{key:"03b43edbf300af791cb86d11991507f1449981f7",id:this.componentId},i("hr",{key:"3385a8497632540187d3c5f16716032d37d5c036",class:this.classNames()}))}};o.style=r+t;export{o as pds_divider};
|
|
2
|
-
//# sourceMappingURL=p-f0c0aa66.entry.js.map
|