@pine-ds/core 0.2.3 → 1.0.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/index2.js +6 -1
- package/components/index2.js.map +1 -1
- package/components/pds-accordion.js +1 -1
- 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 +3 -3
- package/components/pds-box.js.map +1 -1
- package/components/pds-button2.js +3 -2
- package/components/pds-button2.js.map +1 -1
- package/components/pds-checkbox2.js +5 -5
- package/components/pds-checkbox2.js.map +1 -1
- package/components/pds-chip.js +4 -3
- package/components/pds-chip.js.map +1 -1
- package/components/pds-copytext.js +4 -17
- 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 +3 -3
- package/components/pds-image.js.map +1 -1
- package/components/pds-input.js +4 -4
- package/components/pds-input.js.map +1 -1
- package/components/pds-link.js +3 -3
- package/components/pds-link.js.map +1 -1
- package/components/pds-progress.js +2 -2
- package/components/pds-progress.js.map +1 -1
- package/components/pds-radio.js +4 -4
- package/components/pds-radio.js.map +1 -1
- package/components/pds-row.js +1 -1
- package/components/pds-sortable-item.js +14 -4
- package/components/pds-sortable-item.js.map +1 -1
- package/components/pds-sortable.js +3 -3
- package/components/pds-sortable.js.map +1 -1
- package/components/pds-switch.js +4 -4
- package/components/pds-switch.js.map +1 -1
- package/components/pds-tab.js +4 -4
- package/components/pds-tab.js.map +1 -1
- package/components/pds-table-body.js +1 -1
- package/components/pds-table-cell2.js +3 -3
- package/components/pds-table-cell2.js.map +1 -1
- package/components/pds-table-head-cell2.js +4 -3
- 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 +2 -2
- package/components/pds-table-row.js.map +1 -1
- package/components/pds-table.js +2 -2
- package/components/pds-table.js.map +1 -1
- package/components/pds-tabpanel.js +2 -2
- package/components/pds-tabpanel.js.map +1 -1
- package/components/pds-tabs.js +2 -2
- package/components/pds-tabs.js.map +1 -1
- package/components/pds-textarea.js +5 -5
- package/components/pds-textarea.js.map +1 -1
- package/components/pds-tooltip.js +3 -3
- package/components/pds-tooltip.js.map +1 -1
- package/dist/cjs/{index-9b7c547c.js → index-7d9c71f6.js} +26 -3
- package/dist/cjs/index-7d9c71f6.js.map +1 -0
- package/dist/cjs/index-f034f06e.js +24 -0
- package/dist/cjs/index-f034f06e.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/pds-accordion.cjs.entry.js +3 -3
- package/dist/cjs/pds-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +3 -3
- package/dist/cjs/pds-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-box.cjs.entry.js +4 -4
- package/dist/cjs/pds-box.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +4 -3
- package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-checkbox_2.cjs.entry.js +9 -9
- package/dist/cjs/pds-checkbox_2.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +5 -4
- package/dist/cjs/pds-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +5 -18
- package/dist/cjs/pds-copytext.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-divider.cjs.entry.js +3 -3
- package/dist/cjs/pds-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-icon.cjs.entry.js +1 -1
- package/dist/cjs/pds-image.cjs.entry.js +4 -4
- package/dist/cjs/pds-image.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +6 -6
- package/dist/cjs/pds-input.cjs.entry.js.map +1 -1
- package/dist/cjs/{pds-label-b30f3c13.js → pds-label-5ebae56e.js} +2 -2
- package/dist/cjs/{pds-label-b30f3c13.js.map → pds-label-5ebae56e.js.map} +1 -1
- package/dist/cjs/pds-link.cjs.entry.js +5 -5
- package/dist/cjs/pds-link.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-progress.cjs.entry.js +3 -3
- package/dist/cjs/pds-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-radio.cjs.entry.js +6 -6
- package/dist/cjs/pds-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-row.cjs.entry.js +2 -2
- package/dist/cjs/pds-sortable-item.cjs.entry.js +14 -4
- package/dist/cjs/pds-sortable-item.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-sortable.cjs.entry.js +4 -4
- package/dist/cjs/pds-sortable.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +6 -6
- package/dist/cjs/pds-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tab.cjs.entry.js +5 -5
- package/dist/cjs/pds-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-body.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +5 -4
- package/dist/cjs/pds-table-head-cell.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-head.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-head.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-row.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-row.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table.cjs.entry.js +3 -3
- package/dist/cjs/pds-table.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tabpanel.cjs.entry.js +3 -3
- package/dist/cjs/pds-tabpanel.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tabs.cjs.entry.js +3 -3
- package/dist/cjs/pds-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +7 -7
- package/dist/cjs/pds-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/pds-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/pine-core.cjs.js +3 -3
- package/dist/cjs/pine-core.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/pds-accordion/pds-accordion.css +33 -19
- package/dist/collection/components/pds-avatar/pds-avatar.css +23 -19
- package/dist/collection/components/pds-box/pds-box.css +35 -35
- package/dist/collection/components/pds-box/pds-box.js +2 -2
- package/dist/collection/components/pds-box/pds-box.js.map +1 -1
- package/dist/collection/components/pds-button/pds-button.css +92 -83
- package/dist/collection/components/pds-button/pds-button.js +2 -1
- package/dist/collection/components/pds-button/pds-button.js.map +1 -1
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +29 -29
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +4 -4
- package/dist/collection/components/pds-checkbox/pds-checkbox.js.map +1 -1
- package/dist/collection/components/pds-chip/pds-chip.css +88 -94
- package/dist/collection/components/pds-chip/pds-chip.js +3 -2
- package/dist/collection/components/pds-chip/pds-chip.js.map +1 -1
- package/dist/collection/components/pds-copytext/pds-copytext.css +39 -37
- package/dist/collection/components/pds-copytext/pds-copytext.js +3 -16
- package/dist/collection/components/pds-copytext/pds-copytext.js.map +1 -1
- package/dist/collection/components/pds-divider/pds-divider.css +36 -36
- package/dist/collection/components/pds-divider/pds-divider.js +1 -1
- package/dist/collection/components/pds-image/pds-image.css +2 -2
- package/dist/collection/components/pds-image/pds-image.js +2 -2
- package/dist/collection/components/pds-input/pds-input.css +49 -45
- package/dist/collection/components/pds-input/pds-input.js +3 -3
- package/dist/collection/components/pds-input/pds-input.js.map +1 -1
- package/dist/collection/components/pds-link/pds-link.css +19 -19
- package/dist/collection/components/pds-link/pds-link.js +2 -2
- package/dist/collection/components/pds-link/pds-link.js.map +1 -1
- package/dist/collection/components/pds-progress/pds-progress.css +20 -18
- package/dist/collection/components/pds-progress/pds-progress.js +2 -2
- package/dist/collection/components/pds-progress/pds-progress.js.map +1 -1
- package/dist/collection/components/pds-radio/pds-radio.css +32 -29
- package/dist/collection/components/pds-radio/pds-radio.js +3 -3
- package/dist/collection/components/pds-radio/pds-radio.js.map +1 -1
- package/dist/collection/components/pds-row/pds-row.js +1 -1
- package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.css +17 -17
- package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +15 -5
- package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js.map +1 -1
- package/dist/collection/components/pds-sortable/pds-sortable-item/stories/pds-sortable-item.stories.js +2 -2
- package/dist/collection/components/pds-sortable/pds-sortable.css +3 -3
- package/dist/collection/components/pds-sortable/pds-sortable.js +2 -2
- package/dist/collection/components/pds-sortable/pds-sortable.js.map +1 -1
- package/dist/collection/components/pds-sortable/sortable-interface.js +2 -0
- package/dist/collection/components/pds-sortable/sortable-interface.js.map +1 -0
- package/dist/collection/components/pds-sortable/stories/pds-sortable.stories.js +6 -6
- package/dist/collection/components/pds-switch/pds-switch.css +47 -45
- package/dist/collection/components/pds-switch/pds-switch.js +3 -3
- package/dist/collection/components/pds-switch/pds-switch.js.map +1 -1
- package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css +19 -19
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.css +4 -4
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js.map +1 -1
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css +25 -25
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +3 -2
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js.map +1 -1
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.css +4 -4
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js.map +1 -1
- package/dist/collection/components/pds-table/pds-table.css +3 -3
- package/dist/collection/components/pds-table/pds-table.js +1 -1
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +50 -48
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +3 -3
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.css +2 -2
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +1 -1
- package/dist/collection/components/pds-tabs/pds-tabs.css +11 -15
- package/dist/collection/components/pds-tabs/pds-tabs.js +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.css +51 -48
- package/dist/collection/components/pds-textarea/pds-textarea.js +4 -4
- package/dist/collection/components/pds-textarea/pds-textarea.js.map +1 -1
- package/dist/collection/components/pds-tooltip/pds-tooltip.css +67 -67
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
- package/dist/docs.json +10 -10
- package/dist/esm/{index-5e54ea50.js → index-6f0bb1b9.js} +26 -3
- package/dist/esm/index-6f0bb1b9.js.map +1 -0
- package/dist/esm/index-c6934caf.js +14 -0
- package/dist/esm/index-c6934caf.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/pds-accordion.entry.js +3 -3
- package/dist/esm/pds-accordion.entry.js.map +1 -1
- package/dist/esm/pds-avatar.entry.js +3 -3
- package/dist/esm/pds-avatar.entry.js.map +1 -1
- package/dist/esm/pds-box.entry.js +4 -4
- package/dist/esm/pds-box.entry.js.map +1 -1
- package/dist/esm/pds-button.entry.js +4 -3
- package/dist/esm/pds-button.entry.js.map +1 -1
- package/dist/esm/pds-checkbox_2.entry.js +9 -9
- package/dist/esm/pds-checkbox_2.entry.js.map +1 -1
- package/dist/esm/pds-chip.entry.js +5 -4
- package/dist/esm/pds-chip.entry.js.map +1 -1
- package/dist/esm/pds-copytext.entry.js +5 -18
- package/dist/esm/pds-copytext.entry.js.map +1 -1
- package/dist/esm/pds-divider.entry.js +3 -3
- package/dist/esm/pds-divider.entry.js.map +1 -1
- package/dist/esm/pds-icon.entry.js +1 -1
- package/dist/esm/pds-image.entry.js +4 -4
- package/dist/esm/pds-image.entry.js.map +1 -1
- package/dist/esm/pds-input.entry.js +6 -6
- package/dist/esm/pds-input.entry.js.map +1 -1
- package/dist/esm/{pds-label-39814469.js → pds-label-d7e11551.js} +2 -2
- package/dist/esm/{pds-label-39814469.js.map → pds-label-d7e11551.js.map} +1 -1
- package/dist/esm/pds-link.entry.js +5 -5
- package/dist/esm/pds-link.entry.js.map +1 -1
- package/dist/esm/pds-progress.entry.js +3 -3
- package/dist/esm/pds-progress.entry.js.map +1 -1
- package/dist/esm/pds-radio.entry.js +6 -6
- package/dist/esm/pds-radio.entry.js.map +1 -1
- package/dist/esm/pds-row.entry.js +2 -2
- package/dist/esm/pds-sortable-item.entry.js +14 -4
- package/dist/esm/pds-sortable-item.entry.js.map +1 -1
- package/dist/esm/pds-sortable.entry.js +4 -4
- package/dist/esm/pds-sortable.entry.js.map +1 -1
- package/dist/esm/pds-switch.entry.js +6 -6
- package/dist/esm/pds-switch.entry.js.map +1 -1
- package/dist/esm/pds-tab.entry.js +5 -5
- package/dist/esm/pds-tab.entry.js.map +1 -1
- package/dist/esm/pds-table-body.entry.js +2 -2
- package/dist/esm/pds-table-head-cell.entry.js +5 -4
- package/dist/esm/pds-table-head-cell.entry.js.map +1 -1
- package/dist/esm/pds-table-head.entry.js +3 -3
- package/dist/esm/pds-table-head.entry.js.map +1 -1
- package/dist/esm/pds-table-row.entry.js +3 -3
- package/dist/esm/pds-table-row.entry.js.map +1 -1
- package/dist/esm/pds-table.entry.js +3 -3
- package/dist/esm/pds-table.entry.js.map +1 -1
- package/dist/esm/pds-tabpanel.entry.js +3 -3
- package/dist/esm/pds-tabpanel.entry.js.map +1 -1
- package/dist/esm/pds-tabs.entry.js +3 -3
- package/dist/esm/pds-tabs.entry.js.map +1 -1
- package/dist/esm/pds-textarea.entry.js +7 -7
- package/dist/esm/pds-textarea.entry.js.map +1 -1
- package/dist/esm/pds-tooltip.entry.js +4 -4
- package/dist/esm/pds-tooltip.entry.js.map +1 -1
- package/dist/esm/pine-core.js +4 -4
- package/dist/esm/pine-core.js.map +1 -1
- package/dist/esm-es5/index-6f0bb1b9.js +3 -0
- package/dist/esm-es5/index-6f0bb1b9.js.map +1 -0
- package/dist/esm-es5/index-c6934caf.js +2 -0
- package/dist/esm-es5/index-c6934caf.js.map +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +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_2.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox_2.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-icon.entry.js +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-label-39814469.js → pds-label-d7e11551.js} +2 -2
- 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-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-row.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js.map +1 -1
- package/dist/esm-es5/pds-sortable.entry.js +2 -2
- 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-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-tabpanel.entry.js +1 -1
- package/dist/esm-es5/pds-tabpanel.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/esm-es5/pine-core.js +1 -1
- package/dist/esm-es5/pine-core.js.map +1 -1
- package/dist/pine-core/p-0a1e2528.system.entry.js +2 -0
- package/dist/pine-core/p-0a1e2528.system.entry.js.map +1 -0
- package/dist/pine-core/p-0a636312.system.entry.js +2 -0
- package/dist/pine-core/p-0a636312.system.entry.js.map +1 -0
- package/dist/pine-core/p-0eb4e674.entry.js +2 -0
- package/dist/pine-core/p-0eb4e674.entry.js.map +1 -0
- package/dist/pine-core/{p-f5826ecc.system.js → p-0ec12306.system.js} +2 -2
- package/dist/pine-core/p-12a4c0ae.system.entry.js +2 -0
- package/dist/pine-core/p-12a4c0ae.system.entry.js.map +1 -0
- package/dist/pine-core/{p-525195d2.entry.js → p-1632460c.entry.js} +2 -2
- package/dist/pine-core/p-16e9d55b.entry.js +2 -0
- package/dist/pine-core/p-16e9d55b.entry.js.map +1 -0
- package/dist/pine-core/p-173f8d39.entry.js +2 -0
- package/dist/pine-core/p-173f8d39.entry.js.map +1 -0
- package/dist/pine-core/p-206b272d.entry.js +2 -0
- package/dist/pine-core/p-206b272d.entry.js.map +1 -0
- package/dist/pine-core/p-209bc3fd.entry.js +2 -0
- package/dist/pine-core/p-209bc3fd.entry.js.map +1 -0
- package/dist/pine-core/p-2e01613b.entry.js +2 -0
- package/dist/pine-core/p-2e01613b.entry.js.map +1 -0
- package/dist/pine-core/p-2e19ec3d.system.entry.js +2 -0
- package/dist/pine-core/p-2e19ec3d.system.entry.js.map +1 -0
- package/dist/pine-core/p-2eacced7.system.entry.js +2 -0
- package/dist/pine-core/p-2eacced7.system.entry.js.map +1 -0
- package/dist/pine-core/p-2f758669.system.entry.js +2 -0
- package/dist/pine-core/p-2f758669.system.entry.js.map +1 -0
- package/dist/pine-core/p-2f77dbd3.js +3 -0
- package/dist/pine-core/p-2f77dbd3.js.map +1 -0
- package/dist/pine-core/p-2fe87b9d.entry.js +2 -0
- package/dist/pine-core/p-2fe87b9d.entry.js.map +1 -0
- package/dist/pine-core/{p-c0c0038a.system.entry.js → p-3e673113.system.entry.js} +2 -2
- package/dist/pine-core/p-403a20e8.js +2 -0
- package/dist/pine-core/p-403a20e8.js.map +1 -0
- package/dist/pine-core/p-478689a0.system.entry.js +2 -0
- package/dist/pine-core/p-478689a0.system.entry.js.map +1 -0
- package/dist/pine-core/p-49a28a19.system.entry.js +2 -0
- package/dist/pine-core/p-4dfae634.system.entry.js +2 -0
- package/dist/pine-core/p-4dfae634.system.entry.js.map +1 -0
- package/dist/pine-core/p-4f7ee11c.entry.js +2 -0
- package/dist/pine-core/p-4f7ee11c.entry.js.map +1 -0
- package/dist/pine-core/{p-1a8582cd.entry.js → p-5073b1c0.entry.js} +3 -3
- package/dist/pine-core/{p-1a8582cd.entry.js.map → p-5073b1c0.entry.js.map} +1 -1
- package/dist/pine-core/p-51f81513.entry.js +2 -0
- package/dist/pine-core/p-51f81513.entry.js.map +1 -0
- package/dist/pine-core/{p-780136bd.entry.js → p-52e6f836.entry.js} +2 -2
- package/dist/pine-core/p-5f2b3f57.entry.js +2 -0
- package/dist/pine-core/p-5f2b3f57.entry.js.map +1 -0
- package/dist/pine-core/p-61ab207f.entry.js +2 -0
- package/dist/pine-core/p-61ab207f.entry.js.map +1 -0
- package/dist/pine-core/p-6370aa12.system.entry.js +2 -0
- package/dist/pine-core/p-6370aa12.system.entry.js.map +1 -0
- package/dist/pine-core/p-64b4cb70.system.js +3 -0
- package/dist/pine-core/p-64b4cb70.system.js.map +1 -0
- package/dist/pine-core/p-674edd62.system.js +2 -0
- package/dist/pine-core/p-674edd62.system.js.map +1 -0
- package/dist/pine-core/p-6aa28287.system.entry.js +2 -0
- package/dist/pine-core/p-6aa28287.system.entry.js.map +1 -0
- package/dist/pine-core/p-70481699.entry.js +2 -0
- package/dist/pine-core/p-70481699.entry.js.map +1 -0
- package/dist/pine-core/p-75951ef3.system.entry.js +2 -0
- package/dist/pine-core/p-75951ef3.system.entry.js.map +1 -0
- package/dist/pine-core/p-75c441ef.system.entry.js +2 -0
- package/dist/pine-core/p-75c441ef.system.entry.js.map +1 -0
- package/dist/pine-core/p-7611d073.system.js +2 -0
- package/dist/pine-core/p-7611d073.system.js.map +1 -0
- package/dist/pine-core/p-809648ee.entry.js +2 -0
- package/dist/pine-core/p-809648ee.entry.js.map +1 -0
- package/dist/pine-core/p-87c2ac18.entry.js +2 -0
- package/dist/pine-core/p-87c2ac18.entry.js.map +1 -0
- package/dist/pine-core/p-8c5e76d4.system.entry.js +2 -0
- package/dist/pine-core/p-8c5e76d4.system.entry.js.map +1 -0
- package/dist/pine-core/p-8ce3a7ef.entry.js +2 -0
- package/dist/pine-core/p-8ce3a7ef.entry.js.map +1 -0
- package/dist/pine-core/p-94371829.system.entry.js +2 -0
- package/dist/pine-core/p-94371829.system.entry.js.map +1 -0
- package/dist/pine-core/p-9a129745.entry.js +2 -0
- package/dist/pine-core/p-9a129745.entry.js.map +1 -0
- package/dist/pine-core/{p-0b4a3e15.system.entry.js → p-9e33f4fb.system.entry.js} +3 -3
- package/dist/pine-core/{p-0b4a3e15.system.entry.js.map → p-9e33f4fb.system.entry.js.map} +1 -1
- package/dist/pine-core/p-9f8a1aa6.entry.js +2 -0
- package/dist/pine-core/p-9f8a1aa6.entry.js.map +1 -0
- package/dist/pine-core/p-ad891586.system.entry.js +2 -0
- package/dist/pine-core/p-ad891586.system.entry.js.map +1 -0
- package/dist/pine-core/p-afdfadb0.entry.js +2 -0
- package/dist/pine-core/p-b48975f0.system.entry.js +2 -0
- package/dist/pine-core/p-b48975f0.system.entry.js.map +1 -0
- package/dist/pine-core/p-b52c9d3d.entry.js +2 -0
- package/dist/pine-core/p-b52c9d3d.entry.js.map +1 -0
- package/dist/pine-core/p-bbaaa246.system.entry.js +2 -0
- package/dist/pine-core/p-bbaaa246.system.entry.js.map +1 -0
- package/dist/pine-core/p-bc4bbda0.entry.js +2 -0
- package/dist/pine-core/p-bc4bbda0.entry.js.map +1 -0
- package/dist/pine-core/p-bd5135c3.entry.js +2 -0
- package/dist/pine-core/p-bd5135c3.entry.js.map +1 -0
- package/dist/pine-core/{p-36a8c980.system.entry.js → p-bec6d20b.system.entry.js} +2 -2
- package/dist/pine-core/p-c1249ab9.entry.js +2 -0
- package/dist/pine-core/p-c1249ab9.entry.js.map +1 -0
- package/dist/pine-core/p-c3828098.entry.js +2 -0
- package/dist/pine-core/p-c3828098.entry.js.map +1 -0
- package/dist/pine-core/p-c3de3fb3.system.entry.js +2 -0
- package/dist/pine-core/p-c3de3fb3.system.entry.js.map +1 -0
- package/dist/pine-core/p-cfb22651.system.entry.js +2 -0
- package/dist/pine-core/p-cfb22651.system.entry.js.map +1 -0
- package/dist/pine-core/p-d73e2a61.system.entry.js +2 -0
- package/dist/pine-core/p-d73e2a61.system.entry.js.map +1 -0
- package/dist/pine-core/p-dacd68cf.system.entry.js +2 -0
- package/dist/pine-core/p-dacd68cf.system.entry.js.map +1 -0
- package/dist/pine-core/p-e4f30321.js +2 -0
- package/dist/pine-core/p-ec56491f.system.entry.js +2 -0
- package/dist/pine-core/p-ec56491f.system.entry.js.map +1 -0
- package/dist/pine-core/p-ecbf0b15.system.entry.js +2 -0
- package/dist/pine-core/p-ecbf0b15.system.entry.js.map +1 -0
- package/dist/pine-core/p-f71ff6cb.system.entry.js +2 -0
- package/dist/pine-core/p-f71ff6cb.system.entry.js.map +1 -0
- package/dist/pine-core/p-ff9044ed.entry.js +2 -0
- package/dist/pine-core/p-ff9044ed.entry.js.map +1 -0
- package/dist/pine-core/p-fffaa868.entry.js +2 -0
- package/dist/pine-core/p-fffaa868.entry.js.map +1 -0
- package/dist/pine-core/pine-core.css +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/pine-core/pine-core.esm.js.map +1 -1
- package/dist/pine-core/pine-core.js +1 -1
- package/dist/types/components/pds-progress/pds-progress.d.ts +1 -1
- package/dist/types/components/pds-sortable/pds-sortable-item/pds-sortable-item.d.ts +4 -1
- package/dist/types/components/pds-sortable/sortable-interface.d.ts +7 -0
- package/dist/types/components.d.ts +4 -4
- package/hydrate/index.js +119 -97
- package/package.json +7 -6
- package/dist/cjs/index-968864bf.js +0 -14
- package/dist/cjs/index-968864bf.js.map +0 -1
- package/dist/cjs/index-9b7c547c.js.map +0 -1
- package/dist/esm/index-5e54ea50.js.map +0 -1
- package/dist/esm/index-9835dc94.js +0 -9
- package/dist/esm/index-9835dc94.js.map +0 -1
- package/dist/esm-es5/index-5e54ea50.js +0 -3
- package/dist/esm-es5/index-5e54ea50.js.map +0 -1
- package/dist/esm-es5/index-9835dc94.js +0 -2
- package/dist/esm-es5/index-9835dc94.js.map +0 -1
- package/dist/pine-core/p-02ff0a87.system.entry.js +0 -2
- package/dist/pine-core/p-02ff0a87.system.entry.js.map +0 -1
- package/dist/pine-core/p-08c496ee.entry.js +0 -2
- package/dist/pine-core/p-08c496ee.entry.js.map +0 -1
- package/dist/pine-core/p-1176b1ae.system.entry.js +0 -2
- package/dist/pine-core/p-1176b1ae.system.entry.js.map +0 -1
- package/dist/pine-core/p-19cb2923.system.entry.js +0 -2
- package/dist/pine-core/p-19cb2923.system.entry.js.map +0 -1
- package/dist/pine-core/p-1acdba43.entry.js +0 -2
- package/dist/pine-core/p-1acdba43.entry.js.map +0 -1
- package/dist/pine-core/p-2ca5f853.system.js +0 -2
- package/dist/pine-core/p-2ca5f853.system.js.map +0 -1
- package/dist/pine-core/p-2e9881db.system.entry.js +0 -2
- package/dist/pine-core/p-2e9881db.system.entry.js.map +0 -1
- package/dist/pine-core/p-37977a94.entry.js +0 -2
- package/dist/pine-core/p-37977a94.entry.js.map +0 -1
- package/dist/pine-core/p-394e00a2.entry.js +0 -2
- package/dist/pine-core/p-394e00a2.entry.js.map +0 -1
- package/dist/pine-core/p-395cf3d0.entry.js +0 -2
- package/dist/pine-core/p-395cf3d0.entry.js.map +0 -1
- package/dist/pine-core/p-3b4a83e5.entry.js +0 -2
- package/dist/pine-core/p-3b4a83e5.entry.js.map +0 -1
- package/dist/pine-core/p-445792b5.system.js +0 -3
- package/dist/pine-core/p-445792b5.system.js.map +0 -1
- package/dist/pine-core/p-44be28a1.system.entry.js +0 -2
- package/dist/pine-core/p-44be28a1.system.entry.js.map +0 -1
- package/dist/pine-core/p-450da80f.js +0 -2
- package/dist/pine-core/p-450da80f.js.map +0 -1
- package/dist/pine-core/p-46d00870.entry.js +0 -2
- package/dist/pine-core/p-46d00870.entry.js.map +0 -1
- package/dist/pine-core/p-480a95e5.system.js +0 -2
- package/dist/pine-core/p-480a95e5.system.js.map +0 -1
- package/dist/pine-core/p-483b873b.system.entry.js +0 -2
- package/dist/pine-core/p-483b873b.system.entry.js.map +0 -1
- package/dist/pine-core/p-4b5956a3.entry.js +0 -2
- package/dist/pine-core/p-4b5956a3.entry.js.map +0 -1
- package/dist/pine-core/p-4f3c9367.system.entry.js +0 -2
- package/dist/pine-core/p-4f3c9367.system.entry.js.map +0 -1
- package/dist/pine-core/p-50222d44.system.entry.js +0 -2
- package/dist/pine-core/p-50222d44.system.entry.js.map +0 -1
- package/dist/pine-core/p-5729cd96.system.entry.js +0 -2
- package/dist/pine-core/p-5729cd96.system.entry.js.map +0 -1
- package/dist/pine-core/p-5eb56ebf.entry.js +0 -2
- package/dist/pine-core/p-5eb56ebf.entry.js.map +0 -1
- package/dist/pine-core/p-6a7259df.entry.js +0 -2
- package/dist/pine-core/p-6a7259df.entry.js.map +0 -1
- package/dist/pine-core/p-752dfaa6.entry.js +0 -2
- package/dist/pine-core/p-752dfaa6.entry.js.map +0 -1
- package/dist/pine-core/p-7835a3e2.entry.js +0 -2
- package/dist/pine-core/p-7835a3e2.entry.js.map +0 -1
- package/dist/pine-core/p-7e75c2e3.entry.js +0 -2
- package/dist/pine-core/p-7e75c2e3.entry.js.map +0 -1
- package/dist/pine-core/p-820c8929.entry.js +0 -2
- package/dist/pine-core/p-820c8929.entry.js.map +0 -1
- package/dist/pine-core/p-869e7901.entry.js +0 -2
- package/dist/pine-core/p-869e7901.entry.js.map +0 -1
- package/dist/pine-core/p-8cad6b7a.entry.js +0 -2
- package/dist/pine-core/p-8cad6b7a.entry.js.map +0 -1
- package/dist/pine-core/p-93dd9bc7.entry.js +0 -2
- package/dist/pine-core/p-93dd9bc7.entry.js.map +0 -1
- package/dist/pine-core/p-99e033f1.system.entry.js +0 -2
- package/dist/pine-core/p-99e033f1.system.entry.js.map +0 -1
- package/dist/pine-core/p-9a89fdb8.entry.js +0 -2
- package/dist/pine-core/p-9a89fdb8.entry.js.map +0 -1
- package/dist/pine-core/p-a0368388.system.entry.js +0 -2
- package/dist/pine-core/p-a0368388.system.entry.js.map +0 -1
- package/dist/pine-core/p-a3c3dae3.system.entry.js +0 -2
- package/dist/pine-core/p-a3c3dae3.system.entry.js.map +0 -1
- package/dist/pine-core/p-aaced44a.entry.js +0 -2
- package/dist/pine-core/p-aaced44a.entry.js.map +0 -1
- package/dist/pine-core/p-b851f394.system.entry.js +0 -2
- package/dist/pine-core/p-b851f394.system.entry.js.map +0 -1
- package/dist/pine-core/p-c04fb6c0.system.entry.js +0 -2
- package/dist/pine-core/p-c04fb6c0.system.entry.js.map +0 -1
- package/dist/pine-core/p-c0713e59.entry.js +0 -2
- package/dist/pine-core/p-c0713e59.entry.js.map +0 -1
- package/dist/pine-core/p-c20075a6.system.entry.js +0 -2
- package/dist/pine-core/p-c20075a6.system.entry.js.map +0 -1
- package/dist/pine-core/p-c6448545.system.entry.js +0 -2
- package/dist/pine-core/p-c6448545.system.entry.js.map +0 -1
- package/dist/pine-core/p-c707d9d0.entry.js +0 -2
- package/dist/pine-core/p-c707d9d0.entry.js.map +0 -1
- package/dist/pine-core/p-caa88065.js +0 -2
- package/dist/pine-core/p-cbe37d9d.system.entry.js +0 -2
- package/dist/pine-core/p-cbe37d9d.system.entry.js.map +0 -1
- package/dist/pine-core/p-ccb0d9ee.entry.js +0 -2
- package/dist/pine-core/p-ce887d74.system.entry.js +0 -2
- package/dist/pine-core/p-ce887d74.system.entry.js.map +0 -1
- package/dist/pine-core/p-d3fe5de5.entry.js +0 -2
- package/dist/pine-core/p-d3fe5de5.entry.js.map +0 -1
- package/dist/pine-core/p-d7606cb1.system.entry.js +0 -2
- package/dist/pine-core/p-d7606cb1.system.entry.js.map +0 -1
- package/dist/pine-core/p-df656817.system.entry.js +0 -2
- package/dist/pine-core/p-df656817.system.entry.js.map +0 -1
- package/dist/pine-core/p-e20cf701.system.entry.js +0 -2
- package/dist/pine-core/p-e20cf701.system.entry.js.map +0 -1
- package/dist/pine-core/p-e74f35bd.js +0 -3
- package/dist/pine-core/p-e74f35bd.js.map +0 -1
- package/dist/pine-core/p-e7ea6002.system.entry.js +0 -2
- package/dist/pine-core/p-e7ea6002.system.entry.js.map +0 -1
- package/dist/pine-core/p-eafd2eac.system.entry.js +0 -2
- package/dist/pine-core/p-eafd2eac.system.entry.js.map +0 -1
- package/dist/pine-core/p-f30b2078.system.entry.js +0 -2
- package/dist/pine-core/p-f403ff37.entry.js +0 -2
- package/dist/pine-core/p-f403ff37.entry.js.map +0 -1
- package/dist/pine-core/p-f72dc7fd.entry.js +0 -2
- package/dist/pine-core/p-f72dc7fd.entry.js.map +0 -1
- package/dist/pine-core/p-fe949ea3.system.entry.js +0 -2
- package/dist/pine-core/p-fe949ea3.system.entry.js.map +0 -1
- /package/dist/esm-es5/{pds-label-39814469.js.map → pds-label-d7e11551.js.map} +0 -0
- /package/dist/pine-core/{p-f5826ecc.system.js.map → p-0ec12306.system.js.map} +0 -0
- /package/dist/pine-core/{p-525195d2.entry.js.map → p-1632460c.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c0c0038a.system.entry.js.map → p-3e673113.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f30b2078.system.entry.js.map → p-49a28a19.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-780136bd.entry.js.map → p-52e6f836.entry.js.map} +0 -0
- /package/dist/pine-core/{p-ccb0d9ee.entry.js.map → p-afdfadb0.entry.js.map} +0 -0
- /package/dist/pine-core/{p-36a8c980.system.entry.js.map → p-bec6d20b.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-caa88065.js.map → p-e4f30321.js.map} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsRadioCss","PdsRadioStyle0","PdsRadio","this","handleRadioChange","e","disabled","target","isChecked","checked","pdsRadioChange","emit","classNames","invalid","push","join","render","h","Host","key","class","assignDescription","componentId","helperMessage","undefined","type","id","name","value","required","onChange","PdsLabel","htmlFor","text","label","messageId","errorMessage"],"sources":["src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n --background-color: var(--pine-color-base-white);\n --background-color-hover: var(--pine-color-neutral-grey-100);\n --background-color-disabled: var(--pine-color-neutral-grey-200);\n --border: var(--pine-border-interactive);\n --border-color-hover: var(--pine-border-interactive-hover-color);\n --border-color-disabled: var(--pine-color-neutral-grey-300);\n --border-radius: 50%;\n --color: var(--pine-color-neutral-charcoal-200);\n --color-checked: var(--pine-color-neutral-charcoal-500);\n --color-disabled: var(--pine-color-neutral-grey-500);\n --color-focus: var(--pine-color-primary-200);\n --color-invalid: var(--pine-color-red-300);\n --color-invalid-focus: var(--pine-color-red-200);\n --font-size: var(--pine-font-size-body-sm);\n --input-size: 16px;\n --check-size: 6px;\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 box-shadow: 0 0 0 4px var(--color-invalid-focus);\n outline: none;\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--color-invalid);\n }\n}\n\ninput {\n appearance: none;\n border: var(--border);\n border-radius: var(--border-radius);\n height: var(--input-size);\n margin: 0;\n position: relative;\n width: var(--input-size);\n\n &:hover {\n background: var(--background-color-hover);\n border-color: var(--border-color-hover);\n }\n\n &:checked {\n background: var(--color-checked);\n border-color: var(--color-checked);\n\n &::after {\n background: var(--background-color);\n border-radius: 50%;\n content: \"\";\n display: block;\n height: var(--check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--check-size);\n }\n }\n\n &:disabled {\n background: var(--background-color-disabled);\n border-color: var(--border-color-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--color-disabled);\n border-color: var(--border-color-disabled);\n\n &::after {\n border-color: var(--border-color-disabled);\n }\n }\n\n + label {\n color: var(--border-color-hover);\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--color-disabled);\n }\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 4px var(--color-focus);\n outline: none;\n }\n\n}\n\nlabel {\n margin-inline-start: 10px;\n}\n\n.pds-radio__message {\n color: var(--color);\n font-size: var(--font-size);\n margin-block-start: var(--check-size);\n margin-inline-start: 26px;\n width: 100%;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-radio',\n styleUrl: 'pds-radio.scss',\n scoped: true,\n})\nexport class PdsRadio {\n /**\n * Determines whether or not the radio is checked.\n * @defaultValue false\n */\n @Prop() checked = false;\n\n /**\n * Determines whether or not the radio is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * Determines whether or not the radio is invalid.\n * @defaultValue false\n */\n @Prop() invalid = 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 * String used for label text next to radio.\n */\n @Prop() label: string;\n\n /**\n * String used for helper message below radio.\n */\n @Prop() helperMessage: string;\n\n /**\n * String used for radio `name` attribute.\n */\n @Prop() name: string;\n\n /**\n * Determines whether or not the radio is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * The value of the radio that is submitted with a form.\n */\n @Prop() value: string;\n\n /**\n * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n />\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n {this.helperMessage &&\n <div\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-radio__message pds-radio__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":"sGAAA,MAAMA,EAAc,y4FACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,M,wEA4DXC,KAAAC,kBAAqBC,IAC3B,GAAIF,KAAKG,SAAU,CACjB,M,CAGF,MAAMC,EAASF,EAAEE,OACjB,MAAMC,EAAYD,EAAOE,QAEzBN,KAAKO,eAAeC,KAAKH,EAAU,E,aA/DnB,M,cAMC,M,yCAWD,M,+GA0BC,M,qBAuBX,UAAAI,GACN,MAAMA,EAAa,GAEnB,GAAIT,KAAKU,QAAS,CAChBD,EAAWE,KAAK,a,CAElB,GAAIX,KAAKG,SAAU,CACjBM,EAAWE,KAAK,c,CAGlB,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOjB,KAAKS,cAChBK,EAAA,SAAAE,IAAA,8DACoBE,EAAkBlB,KAAKmB,YAAanB,KAAKU,QAASV,KAAKoB,eAAc,eACzEpB,KAAKU,QAAU,OAASW,UACtCC,KAAK,QACLC,GAAIvB,KAAKmB,YACTK,KAAMxB,KAAKwB,KACXC,MAAOzB,KAAKyB,MACZnB,QAASN,KAAKM,QACdoB,SAAU1B,KAAK0B,SACfvB,SAAUH,KAAKG,SACfwB,SAAU3B,KAAKC,oBAEjBa,EAACc,EAAQ,CAAAZ,IAAA,2CAACa,QAAS7B,KAAKmB,YAAaW,KAAM9B,KAAK+B,QAC/C/B,KAAKoB,eACJN,EAAA,OACEG,MAAO,qBACPM,GAAIS,EAAUhC,KAAKmB,YAAa,WAE/BnB,KAAKoB,eAGTpB,KAAKiC,cACJnB,EAAA,OACEG,MAAO,+CACPM,GAAIS,EAAUhC,KAAKmB,YAAa,SAAQ,YAC9B,aAETnB,KAAKiC,c"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(t,r,o,i){function e(t){return t instanceof o?t:new o((function(r){r(t)}))}return new(o||(o=Promise))((function(o,a){function n(t){try{l(i.next(t))}catch(t){a(t)}}function s(t){try{l(i["throw"](t))}catch(t){a(t)}}function l(t){t.done?o(t.value):e(t.value).then(n,s)}l((i=i.apply(t,r||[])).next())}))};var __generator=this&&this.__generator||function(t,r){var o={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,e,a,n;return n={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function s(t){return function(r){return l([t,r])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(n&&(n=0,s[0]&&(o=0)),o)try{if(i=1,e&&(a=s[0]&2?e["return"]:s[0]?e["throw"]||((a=e["return"])&&a.call(e),0):e.next)&&!(a=a.call(e,s[1])).done)return a;if(e=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:o.label++;return{value:s[1],done:false};case 5:o.label++;e=s[1];s=[0];continue;case 7:s=o.ops.pop();o.trys.pop();continue;default:if(!(a=o.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){o=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){o.label=s[1];break}if(s[0]===6&&o.label<a[1]){o.label=a[1];a=s;break}if(a&&o.label<a[2]){o.label=a[2];o.ops.push(s);break}if(a[2])o.ops.pop();o.trys.pop();continue}s=r.call(t,o)}catch(t){s=[6,t];e=0}finally{i=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-445792b5.system.js"],(function(t){"use strict";var r,o,i,e,a;return{setters:[function(t){r=t.r;o=t.c;i=t.h;e=t.H;a=t.g}],execute:function(){var n=function(t){var r=t.elem,o=t.elemPlacement,i=t.overlay,e=t.offset,a=e===void 0?8:e;if(r==undefined)return;var n=r.getBoundingClientRect();var s=i.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):i.style.top="50%";i.style.left="calc(".concat(n.width,"px + ").concat(a,"px)");i.style.transform="translateY(-50%)";if(o.includes("start")){i.style.top="0";i.style.transform="translateY(0)"}if(o.includes("end")){i.style.bottom="0";i.style.top="initial";i.style.transform="translateY(0)"}break;case o.includes("left"):i.style.top="50%";i.style.right="calc(".concat(n.width,"px + ").concat(a,"px)");i.style.transform="translateY(-50%)";if(o.includes("start")){i.style.top="0";i.style.transform="translateY(0)"}if(o.includes("end")){i.style.bottom="0";i.style.top="initial";i.style.transform="translateY(0)"}break;case o.includes("bottom"):i.style.top="calc(".concat(n.height,"px + ").concat(a,"px)");i.style.left="50%";i.style.transform="translateX(-50%)";if(o.includes("start")){i.style.left="0";i.style.transform="translateX(0)"}if(o.includes("end")){i.style.left="initial";i.style.right="0";i.style.transform="translateX(0)"}break;case o.includes("top"):i.style.top="calc((".concat(s.height,"px + ").concat(a,"px) * -1)");i.style.left="50%";i.style.transform="translateX(-50%)";if(o.includes("start")){i.style.left="0";i.style.transform="translateX(0)"}if(o.includes("end")){i.style.left="initial";i.style.right="0";i.style.transform="translateX(0)"}break}};var s=':host{--background-color:var(--pine-color-neutral-charcoal-400);--box-shadow:var(--pine-box-shadow-md);--color:var(--pine-color-base-white);--width:320px;--arrow-size:6px;--arrow-offset:14px;--overlay-border-radius:var(--pine-border-radius-md);--overlay-font-size:var(--pine-font-size-body-sm);--overlay-line-height:var(--pine-line-height-sm);--overlay-padding:var(--pine-spacing-xs) calc(var(--pine-spacing-md) / 2);--arrow-pointing-down:var(--arrow-size) var(--arrow-size) 0;--arrow-pointing-to-the-right:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);--arrow-pointing-to-the-left:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;--arrow-pointing-up:0 var(--arrow-size) var(--arrow-size);display:inline-block;position:relative}:host ::slotted([slot=content]){white-space:normal;width:var(--width)}.pds-tooltip__content{background-color:var(--background-color);border-radius:var(--overlay-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);color:var(--color);font-size:var(--overlay-font-size);line-height:var(--overlay-line-height);opacity:0;padding:var(--overlay-padding);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--arrow-pointing-to-the-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);left:calc(var(--arrow-size) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);bottom:var(--arrow-offset);left:calc(var(--arrow-size) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);left:calc(var(--arrow-size) * -1);top:var(--arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:var(--arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:initial;right:var(--arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);left:initial;right:calc(var(--arrow-size) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);bottom:var(--arrow-offset);left:initial;right:calc(var(--arrow-size) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);left:initial;right:calc(var(--arrow-size) * -1);top:var(--arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:50%;top:calc(var(--arrow-size) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:initial;right:var(--arrow-offset);top:calc(var(--arrow-size) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:var(--arrow-offset);top:calc(var(--arrow-size) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';var l=s;var c=t("pds_tooltip",function(){function t(t){var i=this;r(this,t);this.pdsTooltipHide=o(this,"pdsTooltipHide",7);this.pdsTooltipShow=o(this,"pdsTooltipShow",7);this.handleHide=function(){i.hideTooltip();i.pdsTooltipHide.emit()};this.handleShow=function(){i.showTooltip();i.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}t.prototype.handleOpenToggle=function(){if(this.opened){this.handleShow()}else{this.handleHide()}};t.prototype.componentWillLoad=function(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)};t.prototype.componentDidUpdate=function(){if(this.opened){this.showTooltip()}};t.prototype.componentDidRender=function(){n({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})};t.prototype.showTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=true;return[2]}))}))};t.prototype.hideTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=false;return[2]}))}))};t.prototype.render=function(){var t=this;return i(e,{key:"b4b6ca5fbf3a5b99b4fe74d4b874c81f51d46e8d",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},i("div",{key:"234af23d5c082cbaf02c3f4026d094e19514520e",class:"\n pds-tooltip\n pds-tooltip--".concat(this.placement,"\n ").concat(this.htmlContent?"pds-tooltip--has-html-content":"","\n ").concat(this.opened?"pds-tooltip--is-open":"","\n ").concat(this.hasArrow?"":"pds-tooltip--no-arrow","\n ")},i("span",{key:"8636e6ec54ca42b7a96683b2a97f26ee4994ce75","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},i("slot",{key:"915856a37e16dd9a5d19afec7111d90f3a1e1d0d"})),i("div",{key:"0e50c1c3559cfc529da2fc67a8b248e63ad8f75b",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:function(r){return t.contentEl=r},role:"tooltip"},i("slot",{key:"dafafd2a343b10ed140eb5bd325d3b17a3dc062a",name:"content"}),this.content)))};Object.defineProperty(t.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenToggle"]}},enumerable:false,configurable:true});return t}());c.style=l}}}));
|
|
2
|
-
//# sourceMappingURL=p-a0368388.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["positionTooltip","_a","elem","elemPlacement","overlay","_b","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","concat","width","transform","bottom","right","height","pdsTooltipCss","PdsTooltipStyle0","PdsTooltip","exports","this","handleHide","_this","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","class_1","prototype","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n elem: HTMLElement;\n elemPlacement: string;\n overlay: HTMLElement;\n offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n if (elem == undefined) return;\n\n const rect = elem.getBoundingClientRect();\n const contentRect = overlay.getBoundingClientRect();\n\n // Exit the function if the placement is not set\n if (!elemPlacement || elemPlacement == \"\") return;\n\n switch (true) {\n case elemPlacement.includes(\"right\"):\n overlay.style.top = '50%';\n overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n overlay.style.transform = 'translateY(-50%)';\n\n if (elemPlacement.includes(\"start\")) {\n overlay.style.top = '0';\n overlay.style.transform = 'translateY(0)';\n }\n\n if (elemPlacement.includes(\"end\")) {\n overlay.style.bottom = '0';\n overlay.style.top = 'initial';\n overlay.style.transform = 'translateY(0)';\n }\n\n break;\n\n case elemPlacement.includes(\"left\"):\n overlay.style.top = '50%';\n overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n overlay.style.transform = 'translateY(-50%)';\n\n if (elemPlacement.includes(\"start\")) {\n overlay.style.top = '0';\n overlay.style.transform = 'translateY(0)';\n }\n\n if (elemPlacement.includes(\"end\")) {\n overlay.style.bottom = '0';\n overlay.style.top = 'initial';\n overlay.style.transform = 'translateY(0)';\n }\n\n break;\n\n case elemPlacement.includes(\"bottom\"):\n overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n overlay.style.left = '50%';\n overlay.style.transform = 'translateX(-50%)';\n\n if (elemPlacement.includes(\"start\")) {\n overlay.style.left = '0';\n overlay.style.transform = 'translateX(0)';\n }\n\n if (elemPlacement.includes(\"end\")) {\n overlay.style.left = 'initial';\n overlay.style.right = '0';\n overlay.style.transform = 'translateX(0)';\n }\n\n break;\n\n case elemPlacement.includes(\"top\"):\n overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n overlay.style.left = '50%';\n overlay.style.transform = 'translateX(-50%)';\n\n if (elemPlacement.includes(\"start\")) {\n overlay.style.left = '0';\n overlay.style.transform = 'translateX(0)';\n }\n if (elemPlacement.includes(\"end\")) {\n overlay.style.left = 'initial';\n overlay.style.right = '0';\n overlay.style.transform = 'translateX(0)';\n }\n\n break;\n }\n}\n",":host {\n --background-color: var(--pine-color-neutral-charcoal-400);\n --box-shadow: var(--pine-box-shadow-md);\n --color: var(--pine-color-base-white);\n --width: 320px;\n --arrow-size: 6px;\n --arrow-offset: 14px;\n\n --overlay-border-radius: var(--pine-border-radius-md);\n --overlay-font-size: var(--pine-font-size-body-sm);\n --overlay-line-height: var(--pine-line-height-sm);\n --overlay-padding: var(--pine-spacing-xs) calc(var(--pine-spacing-md) / 2);\n\n --arrow-pointing-down: var(--arrow-size) var(--arrow-size) 0;\n --arrow-pointing-to-the-right: var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);\n --arrow-pointing-to-the-left: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;\n --arrow-pointing-up: 0 var(--arrow-size) var(--arrow-size);\n\n display: inline-block;\n position: relative;\n\n ::slotted([slot=\"content\"]) {\n white-space: normal;\n width: var(--width);\n }\n}\n\n.pds-tooltip__content {\n background-color: var(--background-color);\n border-radius: var(--overlay-border-radius);\n box-shadow: var(--box-shadow);\n color: var(--color);\n font-size: var(--overlay-font-size);\n line-height: var(--overlay-line-height);\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n opacity: 0;\n padding: var(--overlay-padding);\n position: absolute;\n visibility: hidden;\n width: max-content;\n\n .pds-tooltip--is-open & {\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n opacity: 1;\n visibility: visible;\n z-index: 1;\n }\n\n :host(.pds-tooltip--has-html-content) & {\n width: auto;\n }\n\n &::after {\n border-color: transparent;\n border-right-color: transparent;\n border-style: solid;\n border-width: var(--arrow-pointing-to-the-left);\n content: '';\n height: 0;\n position: absolute;\n width: 0;\n\n .pds-tooltip--right & {\n border-inline-end-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-left);\n left: calc(var(--arrow-size) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--right-end & {\n border-inline-end-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-left);\n bottom: var(--arrow-offset);\n left: calc(var(--arrow-size) * -1);\n top: initial;\n }\n\n .pds-tooltip--right-start & {\n border-inline-end-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-left);\n left: calc(var(--arrow-size) * -1);\n top: var(--arrow-offset);\n }\n\n .pds-tooltip--top & {\n border-block-start-color: var(--background-color);\n border-width: var(--arrow-pointing-down);\n bottom: calc(var(--arrow-size) * -1);\n left: 50%;\n top: initial;\n transform: translateX(-50%);\n }\n\n .pds-tooltip--top-start & {\n border-block-start-color: var(--background-color);\n border-width: var(--arrow-pointing-down);\n bottom: calc(var(--arrow-size) * -1);\n left: var(--arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--top-end & {\n border-block-start-color: var(--background-color);\n border-width: var(--arrow-pointing-down);\n bottom: calc(var(--arrow-size) * -1);\n left: initial;\n right: var(--arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--left & {\n border-inline-start-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-right);\n left: initial;\n right: calc(var(--arrow-size) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--left-end & {\n border-inline-start-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-right);\n bottom: var(--arrow-offset);\n left: initial;\n right: calc(var(--arrow-size) * -1);\n top: initial;\n }\n\n .pds-tooltip--left-start & {\n border-inline-start-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-right);\n left: initial;\n right: calc(var(--arrow-size) * -1);\n top: var(--arrow-offset);\n }\n\n .pds-tooltip--bottom & {\n border-block-end-color: var(--background-color);\n border-width: var(--arrow-pointing-up);\n left: 50%;\n top: calc(var(--arrow-size) * -1);\n transform: translateX(-50%);\n }\n\n .pds-tooltip--bottom-end & {\n border-block-end-color: var(--background-color);\n border-width: var(--arrow-pointing-up);\n left: initial;\n right: var(--arrow-offset);\n top: calc(var(--arrow-size) * -1);\n }\n\n .pds-tooltip--bottom-start & {\n border-block-end-color: var(--background-color);\n border-width: var(--arrow-pointing-up);\n left: var(--arrow-offset);\n top: calc(var(--arrow-size) * -1);\n }\n\n .pds-tooltip--no-arrow & {\n border-width: 0;\n }\n }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n tag: 'pds-tooltip',\n styleUrl: 'pds-tooltip.scss',\n shadow: true,\n})\nexport class PdsTooltip {\n private contentEl: HTMLElement | null;\n\n /**\n * Reference to the Host element\n */\n @Element() el: HTMLPdsTooltipElement;\n\n /**\n * Determines when the tooltip is open\n * @defaultValue false\n */\n @State() isOpen = false;\n\n /**\n * Content for the tooltip. If HTML is required, use the content slot\n */\n @Prop() content: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether or not the tooltip has an arrow\n * @defaultValue true\n */\n @Prop() hasArrow? = true;\n\n /**\n * Enable this option when using the content slot\n * @defaultValue false\n */\n @Prop() htmlContent = false;\n\n /**\n * Determines the preferred position of the tooltip\n * @defaultValue \"right\"\n */\n @Prop({ reflect: true }) placement:\n 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'right';\n\n /**\n * Determines whether or not the tooltip is visible\n * @defaultValue false\n */\n @Prop({mutable: true, reflect: true}) opened = false;\n\n @Watch('opened')\n handleOpenToggle() {\n if (this.opened) {\n this.handleShow();\n } else {\n this.handleHide();\n }\n }\n\n /**\n * Emitted after a tooltip is closed\n */\n @Event() pdsTooltipHide: EventEmitter;\n\n /**\n * Emitted after a tooltip is shown\n */\n @Event() pdsTooltipShow: EventEmitter;\n\n componentWillLoad() {\n if (this.opened) {\n this.showTooltip();\n }\n\n this.el.addEventListener('blur', this.handleHide, true);\n this.el.addEventListener('focus', this.handleShow, true);\n }\n\n componentDidUpdate() {\n if (this.opened) {\n this.showTooltip();\n }\n }\n\n componentDidRender() {\n positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n }\n\n /**\n * Shows the tooltip by enabling the opened property\n */\n @Method()\n async showTooltip() {\n this.opened = true;\n }\n\n /**\n * Hides the tooltip by disabling the opened property\n */\n @Method()\n async hideTooltip() {\n this.opened = false;\n }\n\n private handleHide = () => {\n this.hideTooltip();\n this.pdsTooltipHide.emit();\n };\n\n private handleShow = () => {\n this.showTooltip();\n this.pdsTooltipShow.emit();\n };\n\n render() {\n return (\n <Host\n onMouseEnter={this.handleShow}\n onMouseLeave={this.handleHide}\n onFocusin={this.handleShow}\n onFocusout={this.handleHide}\n >\n <div\n class={`\n pds-tooltip\n pds-tooltip--${this.placement}\n ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n ${this.opened ? 'pds-tooltip--is-open' : ''}\n ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n `}\n >\n <span\n aria-describedby={this.componentId}\n class=\"pds-tooltip__trigger\"\n >\n <slot />\n </span>\n\n <div class=\"pds-tooltip__content\"\n aria-hidden={this.opened ? 'false' : 'true'}\n aria-live={this.opened ? 'polite' : 'off'}\n id={this.componentId}\n ref={(el) => (this.contentEl = el)}\n role=\"tooltip\"\n >\n <slot\n name=\"content\"\n ></slot>\n {this.content}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gnDAOO,IAAMA,EAAkB,SAACC,G,IAACC,EAAID,EAAAC,KAAEC,EAAaF,EAAAE,cAAEC,EAAOH,EAAAG,QAAEC,EAAAJ,EAAAK,SAAMD,SAAA,EAAG,EAACA,EACvE,GAAIH,GAAQK,UAAW,OAEvB,IAAMC,EAAON,EAAKO,wBAClB,IAAMC,EAAcN,EAAQK,wBAG5B,IAAKN,GAAiBA,GAAiB,GAAI,OAE3C,OAAQ,MACN,KAAKA,EAAcQ,SAAS,SAC1BP,EAAQQ,MAAMC,IAAM,MACpBT,EAAQQ,MAAME,KAAO,QAAAC,OAAQP,EAAKQ,MAAK,SAAAD,OAAQT,EAAM,OACrDF,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAMC,IAAM,IACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAMM,OAAS,IACvBd,EAAQQ,MAAMC,IAAM,UACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,QAC1BP,EAAQQ,MAAMC,IAAM,MACpBT,EAAQQ,MAAMO,MAAQ,QAAAJ,OAAQP,EAAKQ,MAAK,SAAAD,OAAQT,EAAM,OACtDF,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAMC,IAAM,IACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAMM,OAAS,IACvBd,EAAQQ,MAAMC,IAAM,UACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,UAC1BP,EAAQQ,MAAMC,IAAM,QAAAE,OAAQP,EAAKY,OAAM,SAAAL,OAAQT,EAAM,OACrDF,EAAQQ,MAAME,KAAO,MACrBV,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAME,KAAO,IACrBV,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAME,KAAO,UACrBV,EAAQQ,MAAMO,MAAQ,IACtBf,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,OAC1BP,EAAQQ,MAAMC,IAAM,SAAAE,OAASL,EAAYU,OAAM,SAAAL,OAAQT,EAAM,aAC7DF,EAAQQ,MAAME,KAAO,MACrBV,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAME,KAAO,IACrBV,EAAQQ,MAAMK,UAAY,e,CAE5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAME,KAAO,UACrBV,EAAQQ,MAAMO,MAAQ,IACtBf,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEN,ECxFA,IAAMI,EAAgB,yyIACtB,IAAAC,EAAeD,E,ICcFE,EAAUC,EAAA,yB,iIAkHbC,KAAAC,WAAa,WACnBC,EAAKC,cACLD,EAAKE,eAAeC,M,EAGdL,KAAAM,WAAa,WACnBJ,EAAKK,cACLL,EAAKM,eAAeH,M,cA7GJ,M,gEAgBE,K,iBAME,M,eAkBL,Q,YAM8B,K,CAG/CI,EAAAC,UAAAC,iBAAA,WACE,GAAIX,KAAKY,OAAQ,CACfZ,KAAKM,Y,KACA,CACLN,KAAKC,Y,GAcTQ,EAAAC,UAAAG,kBAAA,WACE,GAAIb,KAAKY,OAAQ,CACfZ,KAAKO,a,CAGPP,KAAKc,GAAGC,iBAAiB,OAAQf,KAAKC,WAAY,MAClDD,KAAKc,GAAGC,iBAAiB,QAASf,KAAKM,WAAY,K,EAGrDG,EAAAC,UAAAM,mBAAA,WACE,GAAIhB,KAAKY,OAAQ,CACfZ,KAAKO,a,GAITE,EAAAC,UAAAO,mBAAA,WACE1C,EAAgB,CAACE,KAAMuB,KAAKc,GAAIpC,cAAesB,KAAKkB,UAAWvC,QAASqB,KAAKmB,W,EAOzEV,EAAAC,UAAAH,YAAN,W,qFACEP,KAAKY,OAAS,K,iBAOVH,EAAAC,UAAAP,YAAN,W,qFACEH,KAAKY,OAAS,M,iBAahBH,EAAAC,UAAAU,OAAA,eAAAlB,EAAAF,KACE,OACEqB,EAACC,EAAI,CAAAC,IAAA,2CACHC,aAAcxB,KAAKM,WACnBmB,aAAczB,KAAKC,WACnByB,UAAW1B,KAAKM,WAChBqB,WAAY3B,KAAKC,YAEjBoB,EAAA,OAAAE,IAAA,2CACEK,MAAO,uDAAAtC,OAEUU,KAAKkB,UAAS,kBAAA5B,OAC3BU,KAAK6B,YAAc,gCAAkC,GAAE,kBAAAvC,OACvDU,KAAKY,OAAS,uBAAyB,GAAE,kBAAAtB,OACzCU,KAAK8B,SAAW,GAAK,wBAAuB,iBAGhDT,EAAA,QAAAE,IAAA,8DACoBvB,KAAK+B,YACvBH,MAAM,wBAENP,EAAA,QAAAE,IAAA,8CAGFF,EAAA,OAAAE,IAAA,2CAAKK,MAAM,uBAAsB,cAClB5B,KAAKY,OAAS,QAAU,OAAM,YAChCZ,KAAKY,OAAS,SAAW,MACpCoB,GAAIhC,KAAK+B,YACTE,IAAK,SAACnB,GAAE,OAAMZ,EAAKiB,UAAYL,CAAvB,EACRoB,KAAK,WAELb,EAAA,QAAAE,IAAA,2CACEY,KAAK,YAENnC,KAAKoC,U,oPA9JK,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js","./p-f5826ecc.system.js"],(function(e){"use strict";var r,i,a,o,l,t,s,n,d;return{setters:[function(e){r=e.r;i=e.c;a=e.h;o=e.H;l=e.g},function(e){t=e.i;s=e.P;n=e.a;d=e.m}],execute:function(){var c=":host{--background-color:#fff;--background-color-disabled:var(--pine-color-neutral-grey-200);--color:var(--pine-color-neutral-charcoal-400);--color-error:var(--pine-color-red-300);--color-placeholder:var(--pine-color-neutral-charcoal-200);--color-disabled:var(--pine-color-neutral-charcoal-200);--border-color-default:var(--pine-color-neutral-grey-400);--border-color-hover:var(--pine-color-neutral-grey-500);--border-color-focus-visible:var(--pine-color-neutral-grey-300);--border-color-error:var(--pine-color-red-300);--focus-visible-outline-color:var(--pine-color-primary-200);--focus-visible-outline-color-error:var(--pine-color-red-200);--label-font-size:var(--pine-font-size-body);--label-font-weight:var(--pine-font-weight-medium);--label-line-height:var(--pine-line-height-md);--label-margin-block-end:var(--pine-spacing-xs);--field-font-size:var(--pine-font-size-body);--field-font-weight:var(--pine-font-weight-regular);--field-line-height:var(--pine-line-height-md);--field-padding-block:var(--pine-spacing-xs);--field-padding-inline:var(--pine-spacing-sm);--helper-message-font-size:var(--pine-font-size-body-xs);--helper-message-font-weight:var(--pine-font-weight-regular);--helper-message-line-height:var(--pine-line-height-sm);--helper-message-margin-block-start:var(--pine-spacing-xs);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);-webkit-margin-after:var(--label-margin-block-end);margin-block-end:var(--label-margin-block-end)}.pds-textarea__field{background-color:var(--background-color);border:var(--pine-border-interactive);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--field-font-size);font-weight:var(--field-font-weight);line-height:var(--field-line-height);padding:var(--field-padding-block) var(--field-padding-inline)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--border-color-hover)}.pds-textarea__field:disabled{background-color:var(--background-color-disabled);color:var(--color-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{border-color:var(--border-color-focus-visible);outline:4px solid var(--focus-visible-outline-color)}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder)}.pds-textarea__field::placeholder{color:var(--color-placeholder)}.pds-textarea__field.is-invalid{border-color:var(--color-error);outline-color:var(--focus-visible-outline-color-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--helper-message-font-size);font-weight:var(--helper-message-font-weight);line-height:var(--helper-message-line-height);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--helper-message-margin-block-start);margin-block-start:var(--helper-message-margin-block-start)}.pds-textarea__error-message{color:var(--color-error)}";var h=c;var f=e("pds_textarea",function(){function e(e){var a=this;r(this,e);this.pdsTextareaChange=i(this,"pdsTextareaChange",7);this.onTextareaChange=function(e){var r=e.target;t(r,a);if(r){a.value=r.innerHTML}a.pdsTextareaChange.emit({value:a.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join(" ")};e.prototype.render=function(){return a(o,{key:"741dcb258f9992f943e898b4f8ac569046f40a73","aria-disabled":this.disabled?"true":null},a("div",{key:"cb678d3e24cec028b7220b4d087e82ce24e26205",class:"pds-textarea"},this.label&&a(s,{htmlFor:this.componentId,text:this.label}),a("textarea",{key:"667cec0eb152e45a01f87ca64865c816afe5b67b","aria-describedby":n(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&a("p",{class:"pds-textarea__helper-message",id:d(this.componentId,"helper")},this.helperMessage),this.invalid&&a("p",{"aria-live":"assertive",class:"pds-textarea__error-message",id:d(this.componentId,"error")},this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return l(this)},enumerable:false,configurable:true});return e}());f.style=h}}}));
|
|
2
|
-
//# sourceMappingURL=p-a3c3dae3.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTextareaCss","PdsTextareaStyle0","PdsTextarea","exports","this","onTextareaChange","ev","textarea","target","isRequired","_this","value","innerHTML","pdsTextareaChange","emit","event","componentId","class_1","prototype","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n --background-color: #fff;\n --background-color-disabled: var(--pine-color-neutral-grey-200);\n\n --color: var(--pine-color-neutral-charcoal-400);\n --color-error: var(--pine-color-red-300);\n --color-placeholder: var(--pine-color-neutral-charcoal-200);\n --color-disabled: var(--pine-color-neutral-charcoal-200);\n\n --border-color-default: var(--pine-color-neutral-grey-400);\n --border-color-hover: var(--pine-color-neutral-grey-500);\n --border-color-focus-visible: var(--pine-color-neutral-grey-300);\n --border-color-error: var(--pine-color-red-300);\n\n --focus-visible-outline-color: var(--pine-color-primary-200);\n --focus-visible-outline-color-error: var(--pine-color-red-200);\n\n --label-font-size: var(--pine-font-size-body);\n --label-font-weight: var(--pine-font-weight-medium);\n --label-line-height: var(--pine-line-height-md);\n --label-margin-block-end: var(--pine-spacing-xs);\n\n --field-font-size: var(--pine-font-size-body);\n --field-font-weight: var(--pine-font-weight-regular);\n --field-line-height: var(--pine-line-height-md);\n --field-padding-block: var(--pine-spacing-xs);\n --field-padding-inline: var(--pine-spacing-sm);\n\n --helper-message-font-size: var(--pine-font-size-body-xs);\n --helper-message-font-weight: var(--pine-font-weight-regular);\n --helper-message-line-height: var(--pine-line-height-sm);\n --helper-message-margin-block-start: var(--pine-spacing-xs);\n\n display: inline;\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n display: block;\n font-size: var(--label-font-size);\n font-weight: var(--label-font-weight);\n line-height: var(--label-line-height);\n margin-block-end: var(--label-margin-block-end);\n}\n\n.pds-textarea__field {\n background-color: var(--background-color);\n border: var(--pine-border-interactive);\n border-radius: var(--pine-border-radius-md);\n font-family: inherit;\n font-size: var(--field-font-size);\n font-weight: var(--field-font-weight);\n line-height: var(--field-line-height);\n padding: var(--field-padding-block) var(--field-padding-inline);\n\n &:hover:not(:disabled, .is-invalid) {\n border-color: var(--border-color-hover);\n }\n\n &:disabled {\n background-color: var(--background-color-disabled);\n color: var(--color-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n border-color: var(--border-color-focus-visible);\n outline: 4px solid var(--focus-visible-outline-color);\n }\n\n &::placeholder {\n color: var(--color-placeholder);\n }\n\n &.is-invalid {\n border-color: var(--color-error);\n outline-color: var(--focus-visible-outline-color-error);\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font-size: var(--helper-message-font-size);\n font-weight: var(--helper-message-font-weight);\n line-height: var(--helper-message-line-height);\n margin-block-end: 0;\n margin-block-start: var(--helper-message-margin-block-start);\n}\n\n.pds-textarea__error-message {\n color: var(--color-error);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-textarea',\n styleUrl: 'pds-textarea.scss',\n shadow: true,\n})\nexport class PdsTextarea {\n @Element() el: HTMLPdsTextareaElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Indicates whether or not the textarea is disabled\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Specifies the error text and provides an error-themed treatment to the field\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a hint or description of the textarea\n */\n @Prop() helperMessage?: string;\n\n /**\n * Indicates whether or not the textarea is invalid or throws an error\n * @defaultValue false\n */\n @Prop({mutable: true}) invalid = false; // eslint-disable-line @stencil-community/strict-mutable\n\n /**\n * Text to be displayed as the textarea label\n */\n @Prop() label?: string;\n\n /**\n * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n */\n @Prop() name: string = this.componentId;\n\n /**\n * Specifies a short hint that describes the expected value of the textarea\n */\n @Prop() placeholder?: string;\n\n /**\n * Indicates whether or not the textarea is readonly\n * @defaultValue false\n */\n @Prop() readonly = false;\n\n /**\n * Indicates whether or not the textarea is required\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * Sets number of rows of text visible without needing to scroll in the textarea\n */\n @Prop() rows?: number;\n\n /**\n * The value of the textarea\n */\n @Prop({mutable: true}) value?: string;\n\n /**\n * Event emitted whenever the value of the textarea changes\n */\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n private onTextareaChange = (ev: Event) => {\n const textarea = ev.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n if (textarea) {\n this.value = textarea.innerHTML;\n }\n\n this.pdsTextareaChange.emit({value: this.value, event: ev});\n };\n\n private textareaClassNames() {\n const classNames = ['pds-textarea__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n }\n <textarea\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n class={this.textareaClassNames()}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onChange={this.onTextareaChange}\n >{this.value}</textarea>\n {this.helperMessage &&\n <p\n class=\"pds-textarea__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.invalid &&\n <p\n aria-live=\"assertive\"\n class=\"pds-textarea__error-message\"\n id={messageId(this.componentId, 'error')}\n >\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"wOAAA,IAAMA,EAAiB,qpGACvB,IAAAC,EAAeD,E,ICSFE,EAAWC,EAAA,0B,wFAwEdC,KAAAC,iBAAmB,SAACC,GAC1B,IAAMC,EAAWD,EAAGE,OACpBC,EAAWF,EAAUG,GAErB,GAAIH,EAAU,CACZG,EAAKC,MAAQJ,EAASK,S,CAGxBF,EAAKG,kBAAkBC,KAAK,CAACH,MAAOD,EAAKC,MAAOI,MAAOT,G,2CApEtC,M,sEAgBc,M,+BAUVF,KAAKY,Y,yCAWT,M,cAMA,M,yCA4BXC,EAAAC,UAAAC,mBAAA,WACN,IAAMC,EAAa,CAAC,uBAEpB,GAAIhB,KAAKiB,SAAWjB,KAAKiB,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBN,EAAAC,UAAAM,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYvB,KAAKwB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRzB,KAAK0B,OACJL,EAACM,EAAQ,CAACC,QAAS5B,KAAKY,YAAaiB,KAAM7B,KAAK0B,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,EAAkB9B,KAAKY,YAAaZ,KAAKiB,QAASjB,KAAK+B,eAAc,eACzE/B,KAAKiB,QAAU,OAASe,UACtCP,MAAOzB,KAAKe,qBACZS,SAAUxB,KAAKwB,SACfS,GAAIjC,KAAKY,YACTsB,KAAMlC,KAAKkC,KACXC,YAAanC,KAAKmC,YAClBC,SAAUpC,KAAKqC,SACfC,SAAUtC,KAAKsC,SACfC,KAAMvC,KAAKuC,KACXC,SAAUxC,KAAKC,kBACfD,KAAKO,OACNP,KAAK+B,eACJV,EAAA,KACEI,MAAM,+BACNQ,GAAIQ,EAAUzC,KAAKY,YAAa,WAE/BZ,KAAK+B,eAGT/B,KAAKiB,SACJI,EAAA,iBACY,YACVI,MAAM,8BACNQ,GAAIQ,EAAUzC,KAAKY,YAAa,UAE/BZ,KAAK0C,e,uHAjII,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as r,h as i,H as a,g as o}from"./p-e74f35bd.js";import{i as l,P as t,a as s,m as n}from"./p-caa88065.js";const d=":host{--background-color:#fff;--background-color-disabled:var(--pine-color-neutral-grey-200);--color:var(--pine-color-neutral-charcoal-400);--color-error:var(--pine-color-red-300);--color-placeholder:var(--pine-color-neutral-charcoal-200);--color-disabled:var(--pine-color-neutral-charcoal-200);--border-color-default:var(--pine-color-neutral-grey-400);--border-color-hover:var(--pine-color-neutral-grey-500);--border-color-focus-visible:var(--pine-color-neutral-grey-300);--border-color-error:var(--pine-color-red-300);--focus-visible-outline-color:var(--pine-color-primary-200);--focus-visible-outline-color-error:var(--pine-color-red-200);--label-font-size:var(--pine-font-size-body);--label-font-weight:var(--pine-font-weight-medium);--label-line-height:var(--pine-line-height-md);--label-margin-block-end:var(--pine-spacing-xs);--field-font-size:var(--pine-font-size-body);--field-font-weight:var(--pine-font-weight-regular);--field-line-height:var(--pine-line-height-md);--field-padding-block:var(--pine-spacing-xs);--field-padding-inline:var(--pine-spacing-sm);--helper-message-font-size:var(--pine-font-size-body-xs);--helper-message-font-weight:var(--pine-font-weight-regular);--helper-message-line-height:var(--pine-line-height-sm);--helper-message-margin-block-start:var(--pine-spacing-xs);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);-webkit-margin-after:var(--label-margin-block-end);margin-block-end:var(--label-margin-block-end)}.pds-textarea__field{background-color:var(--background-color);border:var(--pine-border-interactive);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--field-font-size);font-weight:var(--field-font-weight);line-height:var(--field-line-height);padding:var(--field-padding-block) var(--field-padding-inline)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--border-color-hover)}.pds-textarea__field:disabled{background-color:var(--background-color-disabled);color:var(--color-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{border-color:var(--border-color-focus-visible);outline:4px solid var(--focus-visible-outline-color)}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder)}.pds-textarea__field::placeholder{color:var(--color-placeholder)}.pds-textarea__field.is-invalid{border-color:var(--color-error);outline-color:var(--focus-visible-outline-color-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--helper-message-font-size);font-weight:var(--helper-message-font-weight);line-height:var(--helper-message-line-height);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--helper-message-margin-block-start);margin-block-start:var(--helper-message-margin-block-start)}.pds-textarea__error-message{color:var(--color-error)}";const c=d;const h=class{constructor(i){e(this,i);this.pdsTextareaChange=r(this,"pdsTextareaChange",7);this.onTextareaChange=e=>{const r=e.target;l(r,this);if(r){this.value=r.innerHTML}this.pdsTextareaChange.emit({value:this.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}textareaClassNames(){const e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join(" ")}render(){return i(a,{key:"741dcb258f9992f943e898b4f8ac569046f40a73","aria-disabled":this.disabled?"true":null},i("div",{key:"cb678d3e24cec028b7220b4d087e82ce24e26205",class:"pds-textarea"},this.label&&i(t,{htmlFor:this.componentId,text:this.label}),i("textarea",{key:"667cec0eb152e45a01f87ca64865c816afe5b67b","aria-describedby":s(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&i("p",{class:"pds-textarea__helper-message",id:n(this.componentId,"helper")},this.helperMessage),this.invalid&&i("p",{"aria-live":"assertive",class:"pds-textarea__error-message",id:n(this.componentId,"error")},this.errorMessage)))}get el(){return o(this)}};h.style=c;export{h as pds_textarea};
|
|
2
|
-
//# sourceMappingURL=p-aaced44a.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTextareaCss","PdsTextareaStyle0","PdsTextarea","this","onTextareaChange","ev","textarea","target","isRequired","value","innerHTML","pdsTextareaChange","emit","event","componentId","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n --background-color: #fff;\n --background-color-disabled: var(--pine-color-neutral-grey-200);\n\n --color: var(--pine-color-neutral-charcoal-400);\n --color-error: var(--pine-color-red-300);\n --color-placeholder: var(--pine-color-neutral-charcoal-200);\n --color-disabled: var(--pine-color-neutral-charcoal-200);\n\n --border-color-default: var(--pine-color-neutral-grey-400);\n --border-color-hover: var(--pine-color-neutral-grey-500);\n --border-color-focus-visible: var(--pine-color-neutral-grey-300);\n --border-color-error: var(--pine-color-red-300);\n\n --focus-visible-outline-color: var(--pine-color-primary-200);\n --focus-visible-outline-color-error: var(--pine-color-red-200);\n\n --label-font-size: var(--pine-font-size-body);\n --label-font-weight: var(--pine-font-weight-medium);\n --label-line-height: var(--pine-line-height-md);\n --label-margin-block-end: var(--pine-spacing-xs);\n\n --field-font-size: var(--pine-font-size-body);\n --field-font-weight: var(--pine-font-weight-regular);\n --field-line-height: var(--pine-line-height-md);\n --field-padding-block: var(--pine-spacing-xs);\n --field-padding-inline: var(--pine-spacing-sm);\n\n --helper-message-font-size: var(--pine-font-size-body-xs);\n --helper-message-font-weight: var(--pine-font-weight-regular);\n --helper-message-line-height: var(--pine-line-height-sm);\n --helper-message-margin-block-start: var(--pine-spacing-xs);\n\n display: inline;\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n display: block;\n font-size: var(--label-font-size);\n font-weight: var(--label-font-weight);\n line-height: var(--label-line-height);\n margin-block-end: var(--label-margin-block-end);\n}\n\n.pds-textarea__field {\n background-color: var(--background-color);\n border: var(--pine-border-interactive);\n border-radius: var(--pine-border-radius-md);\n font-family: inherit;\n font-size: var(--field-font-size);\n font-weight: var(--field-font-weight);\n line-height: var(--field-line-height);\n padding: var(--field-padding-block) var(--field-padding-inline);\n\n &:hover:not(:disabled, .is-invalid) {\n border-color: var(--border-color-hover);\n }\n\n &:disabled {\n background-color: var(--background-color-disabled);\n color: var(--color-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n border-color: var(--border-color-focus-visible);\n outline: 4px solid var(--focus-visible-outline-color);\n }\n\n &::placeholder {\n color: var(--color-placeholder);\n }\n\n &.is-invalid {\n border-color: var(--color-error);\n outline-color: var(--focus-visible-outline-color-error);\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font-size: var(--helper-message-font-size);\n font-weight: var(--helper-message-font-weight);\n line-height: var(--helper-message-line-height);\n margin-block-end: 0;\n margin-block-start: var(--helper-message-margin-block-start);\n}\n\n.pds-textarea__error-message {\n color: var(--color-error);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-textarea',\n styleUrl: 'pds-textarea.scss',\n shadow: true,\n})\nexport class PdsTextarea {\n @Element() el: HTMLPdsTextareaElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Indicates whether or not the textarea is disabled\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Specifies the error text and provides an error-themed treatment to the field\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a hint or description of the textarea\n */\n @Prop() helperMessage?: string;\n\n /**\n * Indicates whether or not the textarea is invalid or throws an error\n * @defaultValue false\n */\n @Prop({mutable: true}) invalid = false; // eslint-disable-line @stencil-community/strict-mutable\n\n /**\n * Text to be displayed as the textarea label\n */\n @Prop() label?: string;\n\n /**\n * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n */\n @Prop() name: string = this.componentId;\n\n /**\n * Specifies a short hint that describes the expected value of the textarea\n */\n @Prop() placeholder?: string;\n\n /**\n * Indicates whether or not the textarea is readonly\n * @defaultValue false\n */\n @Prop() readonly = false;\n\n /**\n * Indicates whether or not the textarea is required\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * Sets number of rows of text visible without needing to scroll in the textarea\n */\n @Prop() rows?: number;\n\n /**\n * The value of the textarea\n */\n @Prop({mutable: true}) value?: string;\n\n /**\n * Event emitted whenever the value of the textarea changes\n */\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n private onTextareaChange = (ev: Event) => {\n const textarea = ev.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n if (textarea) {\n this.value = textarea.innerHTML;\n }\n\n this.pdsTextareaChange.emit({value: this.value, event: ev});\n };\n\n private textareaClassNames() {\n const classNames = ['pds-textarea__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n }\n <textarea\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n class={this.textareaClassNames()}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onChange={this.onTextareaChange}\n >{this.value}</textarea>\n {this.helperMessage &&\n <p\n class=\"pds-textarea__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.invalid &&\n <p\n aria-live=\"assertive\"\n class=\"pds-textarea__error-message\"\n id={messageId(this.componentId, 'error')}\n >\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yHAAA,MAAMA,EAAiB,qpGACvB,MAAAC,EAAeD,E,MCSFE,EAAW,M,8EAwEdC,KAAAC,iBAAoBC,IAC1B,MAAMC,EAAWD,EAAGE,OACpBC,EAAWF,EAAUH,MAErB,GAAIG,EAAU,CACZH,KAAKM,MAAQH,EAASI,S,CAGxBP,KAAKQ,kBAAkBC,KAAK,CAACH,MAAON,KAAKM,MAAOI,MAAOR,GAAI,E,yCApE1C,M,sEAgBc,M,+BAUVF,KAAKW,Y,yCAWT,M,cAMA,M,yCA4BX,kBAAAC,GACN,MAAMC,EAAa,CAAC,uBAEpB,GAAIb,KAAKc,SAAWd,KAAKc,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYpB,KAAKqB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRtB,KAAKuB,OACJL,EAACM,EAAQ,CAACC,QAASzB,KAAKW,YAAae,KAAM1B,KAAKuB,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,EAAkB3B,KAAKW,YAAaX,KAAKc,QAASd,KAAK4B,eAAc,eACzE5B,KAAKc,QAAU,OAASe,UACtCP,MAAOtB,KAAKY,qBACZS,SAAUrB,KAAKqB,SACfS,GAAI9B,KAAKW,YACToB,KAAM/B,KAAK+B,KACXC,YAAahC,KAAKgC,YAClBC,SAAUjC,KAAKkC,SACfC,SAAUnC,KAAKmC,SACfC,KAAMpC,KAAKoC,KACXC,SAAUrC,KAAKC,kBACfD,KAAKM,OACNN,KAAK4B,eACJV,EAAA,KACEI,MAAM,+BACNQ,GAAIQ,EAAUtC,KAAKW,YAAa,WAE/BX,KAAK4B,eAGT5B,KAAKc,SACJI,EAAA,iBACY,YACVI,MAAM,8BACNQ,GAAIQ,EAAUtC,KAAKW,YAAa,UAE/BX,KAAKuC,e"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js"],(function(i){"use strict";var t,e,s;return{setters:[function(i){t=i.r;e=i.h;s=i.H}],execute:function(){var a=":host{--image-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--image-aspect-ratio);height:auto;width:100%}";var n=a;var h=i("pds_image",function(){function i(i){t(this,i);this.alt="";this.componentId=undefined;this.height=undefined;this.loading="eager";this.sizes=undefined;this.src=undefined;this.srcset=undefined;this.width=undefined}i.prototype.render=function(){return e(s,{key:"835f04e58f7a7f831575512bb4582fc22a563652",class:{"pds-image":true},id:this.componentId},e("img",{key:"d002c0ae968a6a4a8d965c9bbae905da31629d7f",alt:this.alt,height:this.height,loading:this.loading,sizes:this.sizes,src:this.src,srcset:this.srcset,width:this.width}))};return i}());h.style=n}}}));
|
|
2
|
-
//# sourceMappingURL=p-b851f394.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsImageCss","PdsImageStyle0","PdsImage","exports","class_1","prototype","render","h","Host","key","class","id","this","componentId","alt","height","loading","sizes","src","srcset","width"],"sources":["src/components/pds-image/pds-image.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.tsx"],"sourcesContent":[":host {\n /**\n * @prop --image-aspect-ratio: The image's aspect ratio.\n */\n\n --image-aspect-ratio: auto;\n display: inline-block;\n}\n\nimg {\n aspect-ratio: var(--image-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 styleUrl: '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,EAAc,0HACpB,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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js"],(function(e){"use strict";var a,t,n,i;return{setters:[function(e){a=e.r;t=e.h;n=e.H;i=e.g}],execute:function(){var s=":host{display:block}.pds-tabpanel{display:none;margin-top:var(--panel-margin-top);padding:var(--panel-padding)}.pds-tabpanel.is-active{display:block}";var d=s;var l=e("pds_tabpanel",function(){function e(e){a(this,e);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.selected=false}e.prototype.render=function(){return t(n,{key:"e38cf8aa09d76ce8e971d4e64f635fd2ac237aad",slot:"tabpanels"},t("div",{key:"316151ef0e305ecba207d2ea6d171fcb0c28b539",role:"tabpanel",id:this.parentComponentId+"__"+this.name+"-panel",tabindex:"0","aria-labelledby":this.parentComponentId+"__"+this.name,class:this.selected?"pds-tabpanel is-active":"pds-tabpanel"},t("slot",{key:"4214b2d070c6964f7d3ae41b1ed3d6713aaddf11"})))};Object.defineProperty(e.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});return e}());l.style=d}}}));
|
|
2
|
-
//# sourceMappingURL=p-c04fb6c0.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTabpanelCss","PdsTabpanelStyle0","PdsTabpanel","exports","class_1","prototype","render","h","Host","key","slot","role","id","this","parentComponentId","name","tabindex","class","selected"],"sources":["src/components/pds-tabs/pds-tabpanel/pds-tabpanel.scss?tag=pds-tabpanel","src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.pds-tabpanel {\n display: none;\n margin-top: var(--panel-margin-top);\n padding: var(--panel-padding);\n\n &.is-active {\n display: block;\n }\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-tabpanel',\n styleUrl: 'pds-tabpanel.scss',\n shadow: false,\n})\nexport class PdsTabpanel {\n @Element() el: HTMLPdsTabpanelElement;\n\n /**\n * Sets the related tab name, this name must match a `pds-tab`'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 the tabpanel selected state, this property is passed by parent component\n */\n /** @internal */\n @Prop({mutable: true}) selected = false; // eslint-disable-line @stencil-community/strict-mutable\n\n render() {\n return (\n <Host slot=\"tabpanels\">\n <div\n role=\"tabpanel\"\n id={this.parentComponentId + \"__\" + this.name + '-panel'}\n tabindex=\"0\"\n aria-labelledby={this.parentComponentId + \"__\" + this.name}\n class={this.selected ? \"pds-tabpanel is-active\" : \"pds-tabpanel\"}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0JAAA,IAAMA,EAAiB,wJACvB,IAAAC,EAAeD,E,ICMFE,EAAWC,EAAA,0B,kHAwBY,K,CAElCC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,aACTH,EAAA,OAAAE,IAAA,2CACEE,KAAK,WACLC,GAAIC,KAAKC,kBAAoB,KAAOD,KAAKE,KAAO,SAChDC,SAAS,IAAG,kBACKH,KAAKC,kBAAoB,KAAOD,KAAKE,KACtDE,MAAOJ,KAAKK,SAAW,yBAA2B,gBAElDX,EAAA,QAAAE,IAAA,8C,uHApCc,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as a,c as t,h as e,H as i,g as o}from"./p-e74f35bd.js";const s='pds-tab{--background-color-tab:var(--pine-color-neutral-grey-300);--background-color-tab-active:var(--pine-color-neutral-charcoal-400);--background-color-tab-hover:var(--pine-color-neutral-grey-400);--border-radius:var(--pine-border-radius-xs);--color:var(--pine-color-neutral-charcoal-200);--color-active:var(--pine-color-neutral-charcoal-400);--color-focus:var(--pine-color-neutral-charcoal-300);--color-white:var(--pine-color-base-white);--font-size-body:var(--pine-font-size-body);--font-size-sm:var(--pine-font-size-body-sm);--font-size-xs:var(--pine-font-size-body-xs);--font-weight:var(--pine-font-weight-medium);--line-height-md:var(--pine-line-height-md);--line-height-sm:var(--pine-line-height-sm);--line-height-xs:var(--pine-line-height-xs);--outline:4px solid var(--pine-color-primary-200);display:inline-block;position:relative}*:focus-visible{border-radius:var(--border-radius);outline:var(--outline)}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:0;-ms-flex-align:center;align-items:center;color:var(--color);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-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-active)}.pds-tab:focus-visible{color:var(--color-focus)}.pds-tab .pds-tab__content{font-family:inherit;font-size:var(--font-size-body);font-weight:var(--font-weight);line-height:var(--line-height-md);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:currentColor;bottom:0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--tab-background-color:transparent}.pds-tabs--availability .pds-tab{background-color:var(--tab-background-color);border-radius:8px 8px 0 0;padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--tab-background-color:var(--color-white)}.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]){--tab-background-color:var(--background-color-tab)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--color)}.pds-tabs--availability .pds-tab__content{font-size:var(--font-size-xs);line-height:var(--line-height-xs);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(--tab-background-color);box-shadow:4px 4px 0 0 var(--tab-background-color);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(--tab-background-color);box-shadow:-4px 4px 0 0 var(--tab-background-color);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter{--tab-background-color:var(--background-color-tab)}.pds-tabs--filter .pds-tab{background-color:var(--tab-background-color);border-radius:50px;color:var(--color-active);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{--tab-background-color:var(--background-color-tab-active);color:var(--color-white)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){--tab-background-color:var(--background-color-tab-hover)}.pds-tabs--filter .pds-tab__content{font-size:var(--font-size-sm);line-height:var(--line-height-sm);-webkit-padding-after:0;padding-block-end:0}.pds-tabs--filter .pds-tab__content::after{content:unset}';const r=s;const n=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:"08277d7cbe950dd18f41bd95c90f7c7389833311",class:"pds-tab-edge",role:"presentation"});const t=e("span",{key:"02d2d1acbc122a56bd01c53af8ff0f42b46cb3db",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return e(i,{key:"ae62d16ff39d937d3d635892a904870c436d1747",variant:this.variant,slot:"tabs",index:this.index},e("button",{key:"45221be5eb829f64c5a1f19de600d68da9c27ed2",role:"tab",id:this.parentComponentId+"__"+this.name,"aria-controls":this.parentComponentId+"__"+this.name+"-panel",tabindex:this.selected?"0":"-1","aria-selected":this.selected?"true":"false",class:this.selected?"pds-tab is-active":"pds-tab",onClick:this.onTabClick.bind(this,this.index,this.parentComponentId)},this.variant==="availability"&&a,this.variant==="availability"&&t,e("div",{key:"3e529a0253e4ecbfad3ab47760fa6d58771a58b8",class:"pds-tab__content"},e("slot",{key:"4491e7c5442c386623e389ac247c5a8a6a6db254"}))))}get el(){return o(this)}};n.style=r;export{n as pds_tab};
|
|
2
|
-
//# sourceMappingURL=p-c0713e59.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 --background-color-tab: var(--pine-color-neutral-grey-300);\n --background-color-tab-active: var(--pine-color-neutral-charcoal-400);\n --background-color-tab-hover: var(--pine-color-neutral-grey-400);\n --border-radius: var(--pine-border-radius-xs);\n\n --color: var(--pine-color-neutral-charcoal-200);\n --color-active: var(--pine-color-neutral-charcoal-400);\n --color-focus: var(--pine-color-neutral-charcoal-300);\n --color-white: var(--pine-color-base-white);\n\n --font-size-body: var(--pine-font-size-body);\n --font-size-sm: var(--pine-font-size-body-sm);\n --font-size-xs: var(--pine-font-size-body-xs);\n --font-weight: var(--pine-font-weight-medium);\n --line-height-md: var(--pine-line-height-md);\n --line-height-sm: var(--pine-line-height-sm);\n --line-height-xs: var(--pine-line-height-xs);\n\n --outline: 4px solid var(--pine-color-primary-200);\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: 0;\n box-shadow: none;\n color: inherit;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n}\n\n// delete later\n*:focus-visible {\n border-radius: var(--border-radius);\n outline: var(--outline);\n}\n\n.pds-tab {\n @include pds-button-style-reset();\n\n align-items: center;\n color: var(--color);\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-active);\n\n .pds-tab__content::after {\n opacity: 1;\n }\n }\n\n &:hover {\n color: var(--color-active);\n }\n\n &:focus-visible {\n color: var(--color-focus);\n }\n\n .pds-tab__content {\n font-family: inherit;\n font-size: var(--font-size-body);\n font-weight: var(--font-weight);\n line-height: var(--line-height-md);\n padding-block-end: 11px;\n position: relative;\n\n &::after {\n background-color: currentColor;\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 --tab-background-color: transparent;\n\n .pds-tab {\n background-color: var(--tab-background-color);\n border-radius: 8px 8px 0 0;\n padding: 8px 16px 13px;\n\n &.is-active,\n &[aria-selected='true'] {\n --tab-background-color: var(--color-white);\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 --tab-background-color: var(--background-color-tab);\n }\n\n &:focus-visible {\n color: var(--color);\n }\n }\n\n .pds-tab__content {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs);\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(--tab-background-color);\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(--tab-background-color);\n inset-inline-end: unset;\n inset-inline-start: 0;\n }\n }\n}\n\n.pds-tabs--filter {\n --tab-background-color: var(--background-color-tab);\n\n .pds-tab {\n background-color: var(--tab-background-color);\n border-radius: 50px;\n color: var(--color-active);\n padding: 6px 15px;\n\n &.is-active,\n &[aria-selected='true'] {\n --tab-background-color: var(--background-color-tab-active);\n color: var(--color-white)\n }\n\n &:hover:not(.is-active, [aria-selected='true']) {\n --tab-background-color: var(--background-color-tab-hover);\n }\n }\n\n .pds-tab__content {\n font-size: var(--font-size-sm);\n line-height: var(--line-height-sm);\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,urIAClB,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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js"],(function(a){"use strict";var t,e,i,o,r;return{setters:[function(a){t=a.r;e=a.c;i=a.h;o=a.H;r=a.g}],execute:function(){var s='pds-tab{--background-color-tab:var(--pine-color-neutral-grey-300);--background-color-tab-active:var(--pine-color-neutral-charcoal-400);--background-color-tab-hover:var(--pine-color-neutral-grey-400);--border-radius:var(--pine-border-radius-xs);--color:var(--pine-color-neutral-charcoal-200);--color-active:var(--pine-color-neutral-charcoal-400);--color-focus:var(--pine-color-neutral-charcoal-300);--color-white:var(--pine-color-base-white);--font-size-body:var(--pine-font-size-body);--font-size-sm:var(--pine-font-size-body-sm);--font-size-xs:var(--pine-font-size-body-xs);--font-weight:var(--pine-font-weight-medium);--line-height-md:var(--pine-line-height-md);--line-height-sm:var(--pine-line-height-sm);--line-height-xs:var(--pine-line-height-xs);--outline:4px solid var(--pine-color-primary-200);display:inline-block;position:relative}*:focus-visible{border-radius:var(--border-radius);outline:var(--outline)}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:0;-ms-flex-align:center;align-items:center;color:var(--color);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-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-active)}.pds-tab:focus-visible{color:var(--color-focus)}.pds-tab .pds-tab__content{font-family:inherit;font-size:var(--font-size-body);font-weight:var(--font-weight);line-height:var(--line-height-md);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:currentColor;bottom:0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--tab-background-color:transparent}.pds-tabs--availability .pds-tab{background-color:var(--tab-background-color);border-radius:8px 8px 0 0;padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--tab-background-color:var(--color-white)}.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]){--tab-background-color:var(--background-color-tab)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--color)}.pds-tabs--availability .pds-tab__content{font-size:var(--font-size-xs);line-height:var(--line-height-xs);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(--tab-background-color);box-shadow:4px 4px 0 0 var(--tab-background-color);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(--tab-background-color);box-shadow:-4px 4px 0 0 var(--tab-background-color);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter{--tab-background-color:var(--background-color-tab)}.pds-tabs--filter .pds-tab{background-color:var(--tab-background-color);border-radius:50px;color:var(--color-active);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{--tab-background-color:var(--background-color-tab-active);color:var(--color-white)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){--tab-background-color:var(--background-color-tab-hover)}.pds-tabs--filter .pds-tab__content{font-size:var(--font-size-sm);line-height:var(--line-height-sm);-webkit-padding-after:0;padding-block-end:0}.pds-tabs--filter .pds-tab__content::after{content:unset}';var n=s;var d=a("pds_tab",function(){function a(a){t(this,a);this.pdsTabClick=e(this,"pdsTabClick",7);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.index=undefined;this.selected=false}a.prototype.onTabClick=function(a,t){this.pdsTabClick.emit([a,t])};a.prototype.render=function(){var a=i("span",{key:"08277d7cbe950dd18f41bd95c90f7c7389833311",class:"pds-tab-edge",role:"presentation"});var t=i("span",{key:"02d2d1acbc122a56bd01c53af8ff0f42b46cb3db",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return i(o,{key:"ae62d16ff39d937d3d635892a904870c436d1747",variant:this.variant,slot:"tabs",index:this.index},i("button",{key:"45221be5eb829f64c5a1f19de600d68da9c27ed2",role:"tab",id:this.parentComponentId+"__"+this.name,"aria-controls":this.parentComponentId+"__"+this.name+"-panel",tabindex:this.selected?"0":"-1","aria-selected":this.selected?"true":"false",class:this.selected?"pds-tab is-active":"pds-tab",onClick:this.onTabClick.bind(this,this.index,this.parentComponentId)},this.variant==="availability"&&a,this.variant==="availability"&&t,i("div",{key:"3e529a0253e4ecbfad3ab47760fa6d58771a58b8",class:"pds-tab__content"},i("slot",{key:"4491e7c5442c386623e389ac247c5a8a6a6db254"}))))};Object.defineProperty(a.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return a}());d.style=n}}}));
|
|
2
|
-
//# sourceMappingURL=p-c20075a6.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTabCss","PdsTabStyle0","PdsTab","exports","class_1","prototype","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 --background-color-tab: var(--pine-color-neutral-grey-300);\n --background-color-tab-active: var(--pine-color-neutral-charcoal-400);\n --background-color-tab-hover: var(--pine-color-neutral-grey-400);\n --border-radius: var(--pine-border-radius-xs);\n\n --color: var(--pine-color-neutral-charcoal-200);\n --color-active: var(--pine-color-neutral-charcoal-400);\n --color-focus: var(--pine-color-neutral-charcoal-300);\n --color-white: var(--pine-color-base-white);\n\n --font-size-body: var(--pine-font-size-body);\n --font-size-sm: var(--pine-font-size-body-sm);\n --font-size-xs: var(--pine-font-size-body-xs);\n --font-weight: var(--pine-font-weight-medium);\n --line-height-md: var(--pine-line-height-md);\n --line-height-sm: var(--pine-line-height-sm);\n --line-height-xs: var(--pine-line-height-xs);\n\n --outline: 4px solid var(--pine-color-primary-200);\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: 0;\n box-shadow: none;\n color: inherit;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n}\n\n// delete later\n*:focus-visible {\n border-radius: var(--border-radius);\n outline: var(--outline);\n}\n\n.pds-tab {\n @include pds-button-style-reset();\n\n align-items: center;\n color: var(--color);\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-active);\n\n .pds-tab__content::after {\n opacity: 1;\n }\n }\n\n &:hover {\n color: var(--color-active);\n }\n\n &:focus-visible {\n color: var(--color-focus);\n }\n\n .pds-tab__content {\n font-family: inherit;\n font-size: var(--font-size-body);\n font-weight: var(--font-weight);\n line-height: var(--line-height-md);\n padding-block-end: 11px;\n position: relative;\n\n &::after {\n background-color: currentColor;\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 --tab-background-color: transparent;\n\n .pds-tab {\n background-color: var(--tab-background-color);\n border-radius: 8px 8px 0 0;\n padding: 8px 16px 13px;\n\n &.is-active,\n &[aria-selected='true'] {\n --tab-background-color: var(--color-white);\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 --tab-background-color: var(--background-color-tab);\n }\n\n &:focus-visible {\n color: var(--color);\n }\n }\n\n .pds-tab__content {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs);\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(--tab-background-color);\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(--tab-background-color);\n inset-inline-end: unset;\n inset-inline-start: 0;\n }\n }\n}\n\n.pds-tabs--filter {\n --tab-background-color: var(--background-color-tab);\n\n .pds-tab {\n background-color: var(--tab-background-color);\n border-radius: 50px;\n color: var(--color-active);\n padding: 6px 15px;\n\n &.is-active,\n &[aria-selected='true'] {\n --tab-background-color: var(--background-color-tab-active);\n color: var(--color-white)\n }\n\n &:hover:not(.is-active, [aria-selected='true']) {\n --tab-background-color: var(--background-color-tab-hover);\n }\n }\n\n .pds-tab__content {\n font-size: var(--font-size-sm);\n line-height: var(--line-height-sm);\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":"kKAAA,IAAMA,EAAY,urIAClB,IAAAC,EAAeD,E,ICMFE,EAAMC,EAAA,qB,gLA8BE,K,CAOXC,EAAAC,UAAAC,WAAA,SAAWC,EAAOC,GACxBC,KAAKC,YAAYC,KAAK,CAACJ,EAAOC,G,EAGhCJ,EAAAC,UAAAO,OAAA,WACE,IAAMC,EACJC,EAAA,QAAAC,IAAA,2CAAMC,MAAM,eAAeC,KAAK,iBAGlC,IAAMC,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,uHA/DrB,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js","./p-f5826ecc.system.js"],(function(e){"use strict";var i,r,a,n,o,t,l;return{setters:[function(e){i=e.r;r=e.c;a=e.h;n=e.H},function(e){o=e.P;t=e.a;l=e.m}],execute:function(){var s=":host{--background:var(--pine-color-base-white);--background-disabled:var(--pine-color-neutral-grey-100);--color:var(--pine-color-neutral-charcoal-500);--color-error:var(--pine-color-red-300);--color-placeholder:var(--pine-color-neutral-charcoal-200);--color-disabled:var(--pine-color-neutral-grey-500);--border-color-default:var(--pine-color-neutral-grey-400);--border-color-hover:var(--pine-color-neutral-grey-500);--focus-box-shadow:0 0 0 4px var(--pine-color-primary-200);--label-font-size:var(--pine-font-size-body);--label-font-weight:var(--pine-font-weight-medium);--label-line-height:var(--pine-line-height-md);--label-margin-block-end:var(--pine-spacing-xs);--field-font-size:var(--pine-font-size-body);--field-font-weight:var(--pine-font-weight-regular);--field-line-height:var(--pine-line-height-md);--field-padding-block:var(--pine-spacing-xs);--field-padding-inline:var(--pine-spacing-sm);--helper-message-font-size:var(--pine-font-size-body);--helper-message-font-weight:var(--pine-font-weight-regular);--helper-message-line-height:var(--pine-line-height-sm);--helper-message-margin-top:var(--pine-spacing-xs);display:inline}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);-webkit-margin-after:var(--label-margin-block-end);margin-block-end:var(--label-margin-block-end)}input{border:1px solid var(--border-color-default);border-radius:10px;font-size:var(--field-font-size);font-weight:var(--field-font-weight);line-height:var(--field-line-height);padding:var(--field-padding-block) var(--field-padding-inline);}input:disabled{background-color:var(--background-disabled);color:var(--color-disabled);cursor:not-allowed}input:hover{border-color:var(--border-color-hover)}input:focus{-webkit-box-shadow:var(--focus-box-shadow);box-shadow:var(--focus-box-shadow);outline:none}input::-webkit-input-placeholder{color:var(--color-placeholder)}input::-moz-placeholder{color:var(--color-placeholder)}input::-moz-placeholder{color:var(--color-placeholder)}input:-ms-input-placeholder{color:var(--color-placeholder)}input:has(~.pds-input__error-message){border-color:var(--color-error)}.pds-input__error-message,.pds-input__helper-message{font-size:var(--helper-message-font-size);font-weight:var(--helper-message-font-weight);line-height:var(--helper-message-line-height);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--helper-message-margin-top);margin-block-start:var(--helper-message-margin-top)}.pds-input__error-message{color:var(--color-error)}";var d=s;var h=e("pds_input",function(){function e(e){var a=this;i(this,e);this.pdsInput=r(this,"pdsInput",7);this.onInputEvent=function(e){var i=e.target;if(i){a.value=i.value||""}a.pdsInput.emit(e)};this.componentId=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=undefined;this.label=undefined;this.name=undefined;this.placeholder=undefined;this.readonly=undefined;this.required=undefined;this.type="text";this.value=undefined}e.prototype.render=function(){return a(n,{key:"bb6e9f4cb7515c3b8fbbc583ba1c9ade05d8ae90","aria-disabled":this.disabled?"true":null},a("div",{key:"960462be7a176c6b62412ce4b44af79f9b137a0c",class:"pds-input"},a(o,{key:"beb8f1c8e8a1b4b692d2838abc99e427cc13c392",htmlFor:this.componentId,text:this.label}),a("input",{key:"c69ceb5d687fb37b843e71e8aa9bad8b9f7bcaa8",class:"pds-input__field","aria-describedby":t(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,type:this.type,value:this.value,onInput:this.onInputEvent}),this.helperMessage&&a("p",{class:"pds-input__helper-message",id:l(this.componentId,"helper")},this.helperMessage),this.errorMessage&&a("p",{class:"pds-input__error-message",id:l(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage)))};return e}());h.style=d}}}));
|
|
2
|
-
//# sourceMappingURL=p-c6448545.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsInputCss","PdsInputStyle0","PdsInput","exports","this","onInputEvent","ev","input","target","_this","value","pdsInput","emit","class_1","prototype","render","h","Host","key","disabled","class","PdsLabel","htmlFor","componentId","text","label","assignDescription","invalid","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","type","onInput","messageId","errorMessage"],"sources":["src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":[":host {\n --background: var(--pine-color-base-white);\n --background-disabled: var(--pine-color-neutral-grey-100);\n\n --color: var(--pine-color-neutral-charcoal-500);\n --color-error: var(--pine-color-red-300);\n --color-placeholder: var(--pine-color-neutral-charcoal-200);\n --color-disabled: var(--pine-color-neutral-grey-500);\n\n --border-color-default: var(--pine-color-neutral-grey-400);\n --border-color-hover: var(--pine-color-neutral-grey-500);\n\n --focus-box-shadow: 0 0 0 4px var(--pine-color-primary-200);\n\n --label-font-size: var(--pine-font-size-body);\n --label-font-weight: var(--pine-font-weight-medium);\n --label-line-height: var(--pine-line-height-md);\n --label-margin-block-end: var(--pine-spacing-xs);\n\n --field-font-size: var(--pine-font-size-body);\n --field-font-weight: var(--pine-font-weight-regular);\n --field-line-height: var(--pine-line-height-md);\n --field-padding-block: var(--pine-spacing-xs);\n --field-padding-inline: var(--pine-spacing-sm);\n\n --helper-message-font-size: var(--pine-font-size-body);\n --helper-message-font-weight: var(--pine-font-weight-regular);\n --helper-message-line-height: var(--pine-line-height-sm);\n --helper-message-margin-top: var(--pine-spacing-xs);\n\n display: inline;\n}\n\n.pds-input {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n font-size: var(--label-font-size);\n font-weight: var(--label-font-weight);\n line-height: var(--label-line-height);\n margin-block-end: var(--label-margin-block-end);\n}\n\ninput {\n border: 1px solid var(--border-color-default);\n border-radius: 10px;\n font-size: var(--field-font-size);\n font-weight: var(--field-font-weight);\n line-height: var(--field-line-height);\n padding: var(--field-padding-block) var(--field-padding-inline);\n\n &:disabled {\n background-color: var(--background-disabled);\n color: var(--color-disabled);\n cursor: not-allowed;\n }\n\n &:hover {\n border-color: var(--border-color-hover);\n }\n\n &:focus {\n box-shadow: var(--focus-box-shadow);\n outline: none;\n }\n\n /* stylelint-disable */\n &::-webkit-input-placeholder {\n color: var(--color-placeholder);\n }\n\n &::-moz-placeholder {\n color: var(--color-placeholder);\n }\n\n &::-moz-placeholder {\n color: var(--color-placeholder);\n }\n\n &:-ms-input-placeholder {\n color: var(--color-placeholder);\n }\n\n &:has(~.pds-input__error-message) {\n border-color: var(--color-error);\n }\n /* stylelint-enable */\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n font-size: var(--helper-message-font-size);\n font-weight: var(--helper-message-font-weight);\n line-height: var(--helper-message-line-height);\n margin-block-end: 0;\n margin-block-start: var(--helper-message-margin-top);\n}\n\n.pds-input__error-message {\n color: var(--color-error);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-input',\n styleUrl: 'pds-input.scss',\n shadow: true,\n})\nexport class PdsInput {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Indicates whether or not the input field is disabled.\n */\n @Prop() disabled?: boolean;\n\n /**\n * Specifies the error message and provides an error-themed treatment to the field.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a message or hint below the input field.\n */\n @Prop() helperMessage?: string;\n\n /**\n * Indicates whether or not the input field is invalid or throws an error.\n */\n @Prop() invalid?: boolean;\n\n /**\n * Text to be displayed as the input label.\n */\n @Prop() label?: string;\n\n /**\n * Specifies the name. Submitted with the form name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * Specifies a short hint that describes the expected value of the input field.\n */\n @Prop() placeholder?: string;\n\n /**\n * Indicates whether or not the input field is readonly.\n */\n @Prop() readonly?: boolean;\n\n /**\n * Indicates whether or not the input field is required.\n */\n @Prop() required?: boolean;\n\n /**\n * Determines the type of control that will be displayed\n `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n * @defaultValue \"text\"\n */\n @Prop() type = 'text';\n\n /**\n * The value of the input.\n */\n @Prop({mutable: true}) value?: string;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() pdsInput: EventEmitter<InputEvent>;\n\n private onInputEvent = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.pdsInput.emit(ev as InputEvent);\n };\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n <div class=\"pds-input\">\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n <input class=\"pds-input__field\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInputEvent}\n />\n {this.helperMessage &&\n <p\n class=\"pds-input__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.errorMessage &&\n <p\n class=\"pds-input__error-message\"\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"wNAAA,IAAMA,EAAc,4kFACpB,IAAAC,EAAeD,E,ICQFE,EAAQC,EAAA,uB,sEAoEXC,KAAAC,aAAe,SAACC,GACtB,IAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTE,EAAKC,MAAQH,EAAMG,OAAS,E,CAE9BD,EAAKE,SAASC,KAAKN,E,mQAjBN,O,qBAoBfO,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYd,KAAKe,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aACTJ,EAACK,EAAQ,CAAAH,IAAA,2CAACI,QAASlB,KAAKmB,YAAaC,KAAMpB,KAAKqB,QAChDT,EAAA,SAAAE,IAAA,2CAAOE,MAAM,mBAAkB,mBACXM,EAAkBtB,KAAKmB,YAAanB,KAAKuB,QAASvB,KAAKwB,eAAc,eACzExB,KAAKuB,QAAU,OAASE,UACtCV,SAAUf,KAAKe,SACfW,GAAI1B,KAAKmB,YACTQ,KAAM3B,KAAK2B,KACXC,YAAa5B,KAAK4B,YAClBC,SAAU7B,KAAK8B,SACfC,SAAU/B,KAAK+B,SACfC,KAAMhC,KAAKgC,KACX1B,MAAON,KAAKM,MACZ2B,QAASjC,KAAKC,eAEfD,KAAKwB,eACJZ,EAAA,KACEI,MAAM,4BACNU,GAAIQ,EAAUlC,KAAKmB,YAAa,WAE/BnB,KAAKwB,eAGTxB,KAAKmC,cACJvB,EAAA,KACEI,MAAM,2BACNU,GAAIQ,EAAUlC,KAAKmB,YAAa,SAAQ,YAC9B,aAETnB,KAAKmC,e,WA9GC,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,h as r,H as o,g as t}from"./p-e74f35bd.js";const i=":host{--background-fixed:var(--pine-color-base-white);--border:var(--pine-border-default);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--background-fixed);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host pds-table-checkbox-cell{-webkit-border-after:var(--border);border-block-end:var(--border)}";const s=i;const d=class{constructor(r){e(this,r)}componentWillRender(){this.tableRef=this.hostElement.closest("pds-table");if(this.tableRef&&this.tableRef.fixedColumn){const e=this.hostElement.querySelector("pds-table-head-cell:first-child");e===null||e===void 0?void 0:e.classList.add("is-fixed")}}render(){return r(o,{key:"3fc715433db735a23fa49fd37553a8f430af78bc",role:"row"},this.tableRef&&this.tableRef.selectable&&r("pds-table-head-cell",{part:this.tableRef.fixedColumn?"checkbox-cell":""}),r("slot",{key:"f24a1ebc93b6718aaefbf9006d7fd89e43eb557c"}))}get hostElement(){return t(this)}};d.style=s;export{d as pds_table_head};
|
|
2
|
-
//# sourceMappingURL=p-c707d9d0.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTableHeadCss","PdsTableHeadStyle0","PdsTableHead","componentWillRender","this","tableRef","hostElement","closest","fixedColumn","tableCell","querySelector","classList","add","render","h","Host","key","role","selectable","part"],"sources":["src/components/pds-table/pds-table-head/pds-table-head.scss?tag=pds-table-head&encapsulation=shadow","src/components/pds-table/pds-table-head/pds-table-head.tsx"],"sourcesContent":[":host {\n --background-fixed: var(--pine-color-base-white);\n --border: var(--pine-border-default);\n\n border-color: inherit;\n box-sizing: border-box;\n display: table-header-group;\n vertical-align: middle;\n\n // used for pds-checkbox-cell\n // because it is in the ShadowDom\n &::part(checkbox-cell) {\n background-color: var(--background-fixed);\n left: 0;\n position: sticky;\n z-index: 1;\n }\n}\n\n:host pds-table-checkbox-cell {\n border-block-end: var(--border);\n}\n","import { Component, Element, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-head',\n styleUrl: 'pds-table-head.scss',\n shadow: true,\n})\nexport class PdsTableHead {\n @Element() hostElement: HTMLPdsTableHeadElement;\n tableRef: HTMLPdsTableElement\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-head-cell:first-child');\n tableCell?.classList.add(\"is-fixed\");\n }\n }\n render() {\n return (\n <Host role=\"row\">\n {this.tableRef && this.tableRef.selectable && (\n <pds-table-head-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : ''}></pds-table-head-cell>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,obACxB,MAAAC,EAAeD,E,MCMFE,EAAY,M,yBAIvB,mBAAAC,GACEC,KAAKC,SAAWD,KAAKE,YAAYC,QAAQ,aAEzC,GAAIH,KAAKC,UAAYD,KAAKC,SAASG,YAAa,CAC9C,MAAMC,EAAYL,KAAKE,YAAYI,cAAc,mCACjDD,IAAS,MAATA,SAAS,SAATA,EAAWE,UAAUC,IAAI,W,EAG7B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OACRb,KAAKC,UAAYD,KAAKC,SAASa,YAC9BJ,EAAA,uBAAqBK,KAAMf,KAAKC,SAASG,YAAc,gBAAkB,KAE3EM,EAAA,QAAAE,IAAA,6C"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{h as e}from"./p-e74f35bd.js";const s=(e,s)=>`${e}__${s}-message`;const r=(e,r,t)=>{if(!t)return;let a=s(e,"helper");if(r)a=s(e,"error");return a};const t=(e,s)=>{if(!e||!s)return;if(s.required===true){e.checkValidity()===false?s.invalid=true:s.invalid=false}};const a=({classNames:s,htmlFor:r,text:t})=>e("label",{class:s,htmlFor:r},t);export{a as P,r as a,t as i,s as m};
|
|
2
|
-
//# sourceMappingURL=p-caa88065.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js"],(function(r){"use strict";var e,s,i;return{setters:[function(r){e=r.r;s=r.h;i=r.H}],execute:function(){var a=":host{--progress-fill-color:var(--pine-color-primary-300);--height-progress-bar:8px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}@-webkit-keyframes progressBar{0%{width:0}100%{width:100%}}@keyframes progressBar{0%{width:0}100%{width:100%}}.pds-progress{--background-progress-bar:var(--pine-color-neutral-grey-300);--border-radius:var(--pine-border-radius-xs);-ms-flex-align:center;align-items:center;background-color:var(--background-progress-bar);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--height-progress-bar);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(--height-progress-bar);width:100%}progress::-webkit-progress-value{--background-color:var(--pine-color-primary-300);--border-radius:var(--pine-border-radius-xs);background-color:var(--progress-fill-color, var(--background-color));border-radius:var(--border-radius)}progress::-moz-progress-bar{--background-color:var(--pine-color-primary-300);--border-radius:var(--pine-border-radius-xs);background-color:var(--progress-fill-color, var(--background-color));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-body-sm);--line-height:var(--pine-line-height-sm);--font-weight:var(--pine-font-weight-medium);--margin-inline-start:var(--pine-spacing-md);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);-webkit-margin-start:calc(var(--margin-inline-start) / 2);margin-inline-start:calc(var(--margin-inline-start) / 2)}";var o=a;var t=r("pds_progress",function(){function r(r){e(this,r);this.animated=false;this.componentId=undefined;this.fillColor=undefined;this.label=undefined;this.percent=0;this.showPercent=false}r.prototype.render=function(){return s(i,{key:"68d38c1c9c0b21d20df22d9c9e21102f78143df7",class:this.animated?{"is-animated":this.animated}:""},s("div",{key:"2342ec7043319f3c9d6ee40b3d516523c40f8881",class:"pds-progress"},s("label",{key:"56740d2f23e1cf0039751eac229b6c81234c45a8",class:"pds-progress__label",htmlFor:this.componentId},this.label),s("progress",{key:"b11e4117dae38cc8828623fbd1e25d666a5ec63c",id:this.componentId,max:"100",style:this.fillColor?{"--progress-fill-color":this.fillColor}:{},value:this.percent})),this.showPercent&&s("div",{class:"pds-progress__percentage"},this.percent,"%"))};return r}());t.style=o}}}));
|
|
2
|
-
//# sourceMappingURL=p-cbe37d9d.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsProgressCss","PdsProgressStyle0","PdsProgress","exports","class_1","prototype","render","h","Host","key","class","this","animated","htmlFor","componentId","label","id","max","style","fillColor","value","percent","showPercent"],"sources":["src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":[":host {\n --progress-fill-color: var(--pine-color-primary-300);\n --height-progress-bar: 8px;\n\n align-items: center;\n display: flex;\n}\n\n@keyframes progressBar {\n 0% {\n width: 0\n }\n\n 100% {\n width: 100%\n }\n}\n\n.pds-progress {\n --background-progress-bar: var(--pine-color-neutral-grey-300);\n --border-radius: var(--pine-border-radius-xs);\n\n align-items: center;\n background-color: var(--background-progress-bar);\n border-radius: var(--border-radius);\n display: flex;\n flex-direction: row;\n height: var(--height-progress-bar);\n position: relative;\n width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n animation: progressBar 3s ease;\n animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n background-color: transparent;\n border: 0;\n height: var(--height-progress-bar);\n width: 100%;\n}\n\nprogress::-webkit-progress-value {\n --background-color: var(--pine-color-primary-300);\n --border-radius: var(--pine-border-radius-xs);\n\n background-color: var(--progress-fill-color, var(--background-color));\n border-radius: var(--border-radius);\n}\n\nprogress::-moz-progress-bar {\n --background-color: var(--pine-color-primary-300);\n --border-radius: var(--pine-border-radius-xs);\n\n background-color: var(--progress-fill-color, var(--background-color));\n border-radius: var(--border-radius);\n}\n\n.pds-progress__label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pds-progress__percentage {\n --font-size: var(--pine-font-size-body-sm);\n --line-height: var(--pine-line-height-sm);\n --font-weight: var(--pine-font-weight-medium);\n --margin-inline-start: var(--pine-spacing-md);\n\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n line-height: var(--line-height);\n margin-inline-start: calc(var(--margin-inline-start) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-progress',\n styleUrl: 'pds-progress.scss',\n shadow: true,\n})\nexport class PdsProgress {\n /**\n * Determines whether or not progress is animated.\n * @defaultValue false\n */\n @Prop() animated = 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 * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n * @defaultValue 'var(--pds-color-primary)'\n */\n @Prop() fillColor: string;\n\n /**\n * String used for label text. Label is visually hidden but required for better accessibility.\n */\n @Prop() label!: string;\n\n /**\n * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n * @defaultValue 0\n */\n @Prop() percent = 0;\n\n /**\n * Determines whether or not the percent value should be displayed as text.\n * @defaultValue false\n */\n @Prop() showPercent = false;\n\n render() {\n return (\n <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n <div class=\"pds-progress\">\n <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n {this.label}\n </label>\n <progress\n id={this.componentId}\n max=\"100\"\n style={this.fillColor ? { '--progress-fill-color': this.fillColor } : {}}\n value={this.percent}\n >\n </progress>\n </div>\n {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n </Host>\n );\n }\n}\n"],"mappings":"kJAAA,IAAMA,EAAiB,w7DACvB,IAAAC,EAAeD,E,ICMFE,EAAWC,EAAA,0B,sCAKH,M,sFAsBD,E,iBAMI,K,CAEtBC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOC,KAAKC,SAAW,CAAE,cAAeD,KAAKC,UAAa,IAC9DL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,sBAAsBG,QAASF,KAAKG,aAC9CH,KAAKI,OAERR,EAAA,YAAAE,IAAA,2CACEO,GAAIL,KAAKG,YACTG,IAAI,MACJC,MAAOP,KAAKQ,UAAY,CAAE,wBAAyBR,KAAKQ,WAAc,GACtEC,MAAOT,KAAKU,WAIfV,KAAKW,aAAef,EAAA,OAAKG,MAAM,4BAA4BC,KAAKU,QAAO,K,WAlDxD,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r,h as o,H as e}from"./p-e74f35bd.js";const a=":host{border-color:inherit;display:table-row-group;vertical-align:middle}";const s=a;const t=class{constructor(o){r(this,o)}render(){return o(e,{key:"8d71f826ae509e6ca5ab06016c3343036840af88",role:"rowgroup"},o("slot",{key:"b34bf96e2dc5232585dc3a28bbd81f5eafa42748"}))}};t.style=s;export{t as pds_table_body};
|
|
2
|
-
//# sourceMappingURL=p-ccb0d9ee.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js","./p-f5826ecc.system.js"],(function(r){"use strict";var o,i,e,a,d,s,c;return{setters:[function(r){o=r.r;i=r.c;e=r.h;a=r.H},function(r){d=r.m;s=r.P;c=r.a}],execute:function(){var n='.sc-pds-radio-h{--background-color:var(--pine-color-base-white);--background-color-hover:var(--pine-color-neutral-grey-100);--background-color-disabled:var(--pine-color-neutral-grey-200);--border:var(--pine-border-interactive);--border-color-hover:var(--pine-border-interactive-hover-color);--border-color-disabled:var(--pine-color-neutral-grey-300);--border-radius:50%;--color:var(--pine-color-neutral-charcoal-200);--color-checked:var(--pine-color-neutral-charcoal-500);--color-disabled:var(--pine-color-neutral-grey-500);--color-focus:var(--pine-color-primary-200);--color-invalid:var(--pine-color-red-300);--color-invalid-focus:var(--pine-color-red-200);--font-size:var(--pine-font-size-body-sm);--input-size:16px;--check-size:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-invalid-focus);box-shadow:0 0 0 4px var(--color-invalid-focus);outline:none}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--color-invalid)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border);border-radius:var(--border-radius);height:var(--input-size);margin:0;position:relative;width:var(--input-size)}input.sc-pds-radio:hover{background:var(--background-color-hover);border-color:var(--border-color-hover)}input.sc-pds-radio:checked{background:var(--color-checked);border-color:var(--color-checked)}input.sc-pds-radio:checked::after{background:var(--background-color);border-radius:50%;content:"";display:block;height:var(--check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--check-size)}input.sc-pds-radio:disabled{background:var(--background-color-disabled);border-color:var(--border-color-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background:var(--color-disabled);border-color:var(--border-color-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--border-color-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{color:var(--border-color-hover);cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--color-disabled)}input.sc-pds-radio:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-focus);box-shadow:0 0 0 4px var(--color-focus);outline:none}label.sc-pds-radio{-webkit-margin-start:10px;margin-inline-start:10px}.pds-radio__message.sc-pds-radio{color:var(--color);font-size:var(--font-size);-webkit-margin-before:var(--check-size);margin-block-start:var(--check-size);-webkit-margin-start:26px;margin-inline-start:26px;width:100%}';var t=n;var l=r("pds_radio",function(){function r(r){var e=this;o(this,r);this.pdsRadioChange=i(this,"pdsRadioChange",7);this.handleRadioChange=function(r){if(e.disabled){return}var o=r.target;var i=o.checked;e.pdsRadioChange.emit(i)};this.checked=false;this.disabled=false;this.errorMessage=undefined;this.invalid=false;this.componentId=undefined;this.label=undefined;this.helperMessage=undefined;this.name=undefined;this.required=false;this.value=undefined}r.prototype.classNames=function(){var r=[];if(this.invalid){r.push("is-invalid")}if(this.disabled){r.push("is-disabled")}return r.join(" ")};r.prototype.render=function(){return e(a,{key:"1427cdb78f9e67d64f1d41fbbcd69f142568be54",class:this.classNames()},e("input",{key:"e657db2c4d043871913ba314adb0b1666001dc8e","aria-describedby":c(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,type:"radio",id:this.componentId,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleRadioChange}),e(s,{key:"c7a15d4d55f7a82f21754d5a5c711ae2b60b5cdc",htmlFor:this.componentId,text:this.label}),this.helperMessage&&e("div",{class:"pds-radio__message",id:d(this.componentId,"helper")},this.helperMessage),this.errorMessage&&e("div",{class:"pds-radio__message pds-radio__message--error",id:d(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage))};return r}());l.style=t}}}));
|
|
2
|
-
//# sourceMappingURL=p-ce887d74.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsRadioCss","PdsRadioStyle0","PdsRadio","exports","this","handleRadioChange","e","_this","disabled","target","isChecked","checked","pdsRadioChange","emit","class_1","prototype","classNames","invalid","push","join","render","h","Host","key","class","assignDescription","componentId","helperMessage","undefined","type","id","name","value","required","onChange","PdsLabel","htmlFor","text","label","messageId","errorMessage"],"sources":["src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n --background-color: var(--pine-color-base-white);\n --background-color-hover: var(--pine-color-neutral-grey-100);\n --background-color-disabled: var(--pine-color-neutral-grey-200);\n --border: var(--pine-border-interactive);\n --border-color-hover: var(--pine-border-interactive-hover-color);\n --border-color-disabled: var(--pine-color-neutral-grey-300);\n --border-radius: 50%;\n --color: var(--pine-color-neutral-charcoal-200);\n --color-checked: var(--pine-color-neutral-charcoal-500);\n --color-disabled: var(--pine-color-neutral-grey-500);\n --color-focus: var(--pine-color-primary-200);\n --color-invalid: var(--pine-color-red-300);\n --color-invalid-focus: var(--pine-color-red-200);\n --font-size: var(--pine-font-size-body-sm);\n --input-size: 16px;\n --check-size: 6px;\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 box-shadow: 0 0 0 4px var(--color-invalid-focus);\n outline: none;\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--color-invalid);\n }\n}\n\ninput {\n appearance: none;\n border: var(--border);\n border-radius: var(--border-radius);\n height: var(--input-size);\n margin: 0;\n position: relative;\n width: var(--input-size);\n\n &:hover {\n background: var(--background-color-hover);\n border-color: var(--border-color-hover);\n }\n\n &:checked {\n background: var(--color-checked);\n border-color: var(--color-checked);\n\n &::after {\n background: var(--background-color);\n border-radius: 50%;\n content: \"\";\n display: block;\n height: var(--check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--check-size);\n }\n }\n\n &:disabled {\n background: var(--background-color-disabled);\n border-color: var(--border-color-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--color-disabled);\n border-color: var(--border-color-disabled);\n\n &::after {\n border-color: var(--border-color-disabled);\n }\n }\n\n + label {\n color: var(--border-color-hover);\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--color-disabled);\n }\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 4px var(--color-focus);\n outline: none;\n }\n\n}\n\nlabel {\n margin-inline-start: 10px;\n}\n\n.pds-radio__message {\n color: var(--color);\n font-size: var(--font-size);\n margin-block-start: var(--check-size);\n margin-inline-start: 26px;\n width: 100%;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-radio',\n styleUrl: 'pds-radio.scss',\n scoped: true,\n})\nexport class PdsRadio {\n /**\n * Determines whether or not the radio is checked.\n * @defaultValue false\n */\n @Prop() checked = false;\n\n /**\n * Determines whether or not the radio is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * Determines whether or not the radio is invalid.\n * @defaultValue false\n */\n @Prop() invalid = 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 * String used for label text next to radio.\n */\n @Prop() label: string;\n\n /**\n * String used for helper message below radio.\n */\n @Prop() helperMessage: string;\n\n /**\n * String used for radio `name` attribute.\n */\n @Prop() name: string;\n\n /**\n * Determines whether or not the radio is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * The value of the radio that is submitted with a form.\n */\n @Prop() value: string;\n\n /**\n * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n />\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n {this.helperMessage &&\n <div\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-radio__message pds-radio__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":"wNAAA,IAAMA,EAAc,y4FACpB,IAAAC,EAAeD,E,ICQFE,EAAQC,EAAA,uB,kFA4DXC,KAAAC,kBAAoB,SAACC,GAC3B,GAAIC,EAAKC,SAAU,CACjB,M,CAGF,IAAMC,EAASH,EAAEG,OACjB,IAAMC,EAAYD,EAAOE,QAEzBJ,EAAKK,eAAeC,KAAKH,E,eA/DT,M,cAMC,M,yCAWD,M,+GA0BC,M,qBAuBXI,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIZ,KAAKa,QAAS,CAChBD,EAAWE,KAAK,a,CAElB,GAAId,KAAKI,SAAU,CACjBQ,EAAWE,KAAK,c,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBL,EAAAC,UAAAK,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOpB,KAAKY,cAChBK,EAAA,SAAAE,IAAA,8DACoBE,EAAkBrB,KAAKsB,YAAatB,KAAKa,QAASb,KAAKuB,eAAc,eACzEvB,KAAKa,QAAU,OAASW,UACtCC,KAAK,QACLC,GAAI1B,KAAKsB,YACTK,KAAM3B,KAAK2B,KACXC,MAAO5B,KAAK4B,MACZrB,QAASP,KAAKO,QACdsB,SAAU7B,KAAK6B,SACfzB,SAAUJ,KAAKI,SACf0B,SAAU9B,KAAKC,oBAEjBgB,EAACc,EAAQ,CAAAZ,IAAA,2CAACa,QAAShC,KAAKsB,YAAaW,KAAMjC,KAAKkC,QAC/ClC,KAAKuB,eACJN,EAAA,OACEG,MAAO,qBACPM,GAAIS,EAAUnC,KAAKsB,YAAa,WAE/BtB,KAAKuB,eAGTvB,KAAKoC,cACJnB,EAAA,OACEG,MAAO,+CACPM,GAAIS,EAAUnC,KAAKsB,YAAa,SAAQ,YAC9B,aAETtB,KAAKoC,c,WAlHG,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as o,h as r,H as a,g as i}from"./p-e74f35bd.js";const e=({elem:t,elemPlacement:o,overlay:r,offset:a=8})=>{if(t==undefined)return;const i=t.getBoundingClientRect();const e=r.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):r.style.top="50%";r.style.left=`calc(${i.width}px + ${a}px)`;r.style.transform="translateY(-50%)";if(o.includes("start")){r.style.top="0";r.style.transform="translateY(0)"}if(o.includes("end")){r.style.bottom="0";r.style.top="initial";r.style.transform="translateY(0)"}break;case o.includes("left"):r.style.top="50%";r.style.right=`calc(${i.width}px + ${a}px)`;r.style.transform="translateY(-50%)";if(o.includes("start")){r.style.top="0";r.style.transform="translateY(0)"}if(o.includes("end")){r.style.bottom="0";r.style.top="initial";r.style.transform="translateY(0)"}break;case o.includes("bottom"):r.style.top=`calc(${i.height}px + ${a}px)`;r.style.left="50%";r.style.transform="translateX(-50%)";if(o.includes("start")){r.style.left="0";r.style.transform="translateX(0)"}if(o.includes("end")){r.style.left="initial";r.style.right="0";r.style.transform="translateX(0)"}break;case o.includes("top"):r.style.top=`calc((${e.height}px + ${a}px) * -1)`;r.style.left="50%";r.style.transform="translateX(-50%)";if(o.includes("start")){r.style.left="0";r.style.transform="translateX(0)"}if(o.includes("end")){r.style.left="initial";r.style.right="0";r.style.transform="translateX(0)"}break}};const n=':host{--background-color:var(--pine-color-neutral-charcoal-400);--box-shadow:var(--pine-box-shadow-md);--color:var(--pine-color-base-white);--width:320px;--arrow-size:6px;--arrow-offset:14px;--overlay-border-radius:var(--pine-border-radius-md);--overlay-font-size:var(--pine-font-size-body-sm);--overlay-line-height:var(--pine-line-height-sm);--overlay-padding:var(--pine-spacing-xs) calc(var(--pine-spacing-md) / 2);--arrow-pointing-down:var(--arrow-size) var(--arrow-size) 0;--arrow-pointing-to-the-right:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);--arrow-pointing-to-the-left:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;--arrow-pointing-up:0 var(--arrow-size) var(--arrow-size);display:inline-block;position:relative}:host ::slotted([slot=content]){white-space:normal;width:var(--width)}.pds-tooltip__content{background-color:var(--background-color);border-radius:var(--overlay-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);color:var(--color);font-size:var(--overlay-font-size);line-height:var(--overlay-line-height);opacity:0;padding:var(--overlay-padding);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--arrow-pointing-to-the-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);left:calc(var(--arrow-size) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);bottom:var(--arrow-offset);left:calc(var(--arrow-size) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);left:calc(var(--arrow-size) * -1);top:var(--arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:var(--arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:initial;right:var(--arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);left:initial;right:calc(var(--arrow-size) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);bottom:var(--arrow-offset);left:initial;right:calc(var(--arrow-size) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);left:initial;right:calc(var(--arrow-size) * -1);top:var(--arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:50%;top:calc(var(--arrow-size) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:initial;right:var(--arrow-offset);top:calc(var(--arrow-size) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:var(--arrow-offset);top:calc(var(--arrow-size) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';const s=n;const l=class{constructor(r){t(this,r);this.pdsTooltipHide=o(this,"pdsTooltipHide",7);this.pdsTooltipShow=o(this,"pdsTooltipShow",7);this.handleHide=()=>{this.hideTooltip();this.pdsTooltipHide.emit()};this.handleShow=()=>{this.showTooltip();this.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}handleOpenToggle(){if(this.opened){this.handleShow()}else{this.handleHide()}}componentWillLoad(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)}componentDidUpdate(){if(this.opened){this.showTooltip()}}componentDidRender(){e({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})}async showTooltip(){this.opened=true}async hideTooltip(){this.opened=false}render(){return r(a,{key:"b4b6ca5fbf3a5b99b4fe74d4b874c81f51d46e8d",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},r("div",{key:"234af23d5c082cbaf02c3f4026d094e19514520e",class:`\n pds-tooltip\n pds-tooltip--${this.placement}\n ${this.htmlContent?"pds-tooltip--has-html-content":""}\n ${this.opened?"pds-tooltip--is-open":""}\n ${this.hasArrow?"":"pds-tooltip--no-arrow"}\n `},r("span",{key:"8636e6ec54ca42b7a96683b2a97f26ee4994ce75","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},r("slot",{key:"915856a37e16dd9a5d19afec7111d90f3a1e1d0d"})),r("div",{key:"0e50c1c3559cfc529da2fc67a8b248e63ad8f75b",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:t=>this.contentEl=t,role:"tooltip"},r("slot",{key:"dafafd2a343b10ed140eb5bd325d3b17a3dc062a",name:"content"}),this.content)))}get el(){return i(this)}static get watchers(){return{opened:["handleOpenToggle"]}}};l.style=s;export{l as pds_tooltip};
|
|
2
|
-
//# sourceMappingURL=p-d3fe5de5.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["positionTooltip","elem","elemPlacement","overlay","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","width","transform","bottom","right","height","pdsTooltipCss","PdsTooltipStyle0","PdsTooltip","this","handleHide","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n elem: HTMLElement;\n elemPlacement: string;\n overlay: HTMLElement;\n offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n if (elem == undefined) return;\n\n const rect = elem.getBoundingClientRect();\n const contentRect = overlay.getBoundingClientRect();\n\n // Exit the function if the placement is not set\n if (!elemPlacement || elemPlacement == \"\") return;\n\n switch (true) {\n case elemPlacement.includes(\"right\"):\n overlay.style.top = '50%';\n overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n overlay.style.transform = 'translateY(-50%)';\n\n if (elemPlacement.includes(\"start\")) {\n overlay.style.top = '0';\n overlay.style.transform = 'translateY(0)';\n }\n\n if (elemPlacement.includes(\"end\")) {\n overlay.style.bottom = '0';\n overlay.style.top = 'initial';\n overlay.style.transform = 'translateY(0)';\n }\n\n break;\n\n case elemPlacement.includes(\"left\"):\n overlay.style.top = '50%';\n overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n overlay.style.transform = 'translateY(-50%)';\n\n if (elemPlacement.includes(\"start\")) {\n overlay.style.top = '0';\n overlay.style.transform = 'translateY(0)';\n }\n\n if (elemPlacement.includes(\"end\")) {\n overlay.style.bottom = '0';\n overlay.style.top = 'initial';\n overlay.style.transform = 'translateY(0)';\n }\n\n break;\n\n case elemPlacement.includes(\"bottom\"):\n overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n overlay.style.left = '50%';\n overlay.style.transform = 'translateX(-50%)';\n\n if (elemPlacement.includes(\"start\")) {\n overlay.style.left = '0';\n overlay.style.transform = 'translateX(0)';\n }\n\n if (elemPlacement.includes(\"end\")) {\n overlay.style.left = 'initial';\n overlay.style.right = '0';\n overlay.style.transform = 'translateX(0)';\n }\n\n break;\n\n case elemPlacement.includes(\"top\"):\n overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n overlay.style.left = '50%';\n overlay.style.transform = 'translateX(-50%)';\n\n if (elemPlacement.includes(\"start\")) {\n overlay.style.left = '0';\n overlay.style.transform = 'translateX(0)';\n }\n if (elemPlacement.includes(\"end\")) {\n overlay.style.left = 'initial';\n overlay.style.right = '0';\n overlay.style.transform = 'translateX(0)';\n }\n\n break;\n }\n}\n",":host {\n --background-color: var(--pine-color-neutral-charcoal-400);\n --box-shadow: var(--pine-box-shadow-md);\n --color: var(--pine-color-base-white);\n --width: 320px;\n --arrow-size: 6px;\n --arrow-offset: 14px;\n\n --overlay-border-radius: var(--pine-border-radius-md);\n --overlay-font-size: var(--pine-font-size-body-sm);\n --overlay-line-height: var(--pine-line-height-sm);\n --overlay-padding: var(--pine-spacing-xs) calc(var(--pine-spacing-md) / 2);\n\n --arrow-pointing-down: var(--arrow-size) var(--arrow-size) 0;\n --arrow-pointing-to-the-right: var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);\n --arrow-pointing-to-the-left: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;\n --arrow-pointing-up: 0 var(--arrow-size) var(--arrow-size);\n\n display: inline-block;\n position: relative;\n\n ::slotted([slot=\"content\"]) {\n white-space: normal;\n width: var(--width);\n }\n}\n\n.pds-tooltip__content {\n background-color: var(--background-color);\n border-radius: var(--overlay-border-radius);\n box-shadow: var(--box-shadow);\n color: var(--color);\n font-size: var(--overlay-font-size);\n line-height: var(--overlay-line-height);\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n opacity: 0;\n padding: var(--overlay-padding);\n position: absolute;\n visibility: hidden;\n width: max-content;\n\n .pds-tooltip--is-open & {\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n opacity: 1;\n visibility: visible;\n z-index: 1;\n }\n\n :host(.pds-tooltip--has-html-content) & {\n width: auto;\n }\n\n &::after {\n border-color: transparent;\n border-right-color: transparent;\n border-style: solid;\n border-width: var(--arrow-pointing-to-the-left);\n content: '';\n height: 0;\n position: absolute;\n width: 0;\n\n .pds-tooltip--right & {\n border-inline-end-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-left);\n left: calc(var(--arrow-size) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--right-end & {\n border-inline-end-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-left);\n bottom: var(--arrow-offset);\n left: calc(var(--arrow-size) * -1);\n top: initial;\n }\n\n .pds-tooltip--right-start & {\n border-inline-end-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-left);\n left: calc(var(--arrow-size) * -1);\n top: var(--arrow-offset);\n }\n\n .pds-tooltip--top & {\n border-block-start-color: var(--background-color);\n border-width: var(--arrow-pointing-down);\n bottom: calc(var(--arrow-size) * -1);\n left: 50%;\n top: initial;\n transform: translateX(-50%);\n }\n\n .pds-tooltip--top-start & {\n border-block-start-color: var(--background-color);\n border-width: var(--arrow-pointing-down);\n bottom: calc(var(--arrow-size) * -1);\n left: var(--arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--top-end & {\n border-block-start-color: var(--background-color);\n border-width: var(--arrow-pointing-down);\n bottom: calc(var(--arrow-size) * -1);\n left: initial;\n right: var(--arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--left & {\n border-inline-start-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-right);\n left: initial;\n right: calc(var(--arrow-size) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--left-end & {\n border-inline-start-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-right);\n bottom: var(--arrow-offset);\n left: initial;\n right: calc(var(--arrow-size) * -1);\n top: initial;\n }\n\n .pds-tooltip--left-start & {\n border-inline-start-color: var(--background-color);\n border-width: var(--arrow-pointing-to-the-right);\n left: initial;\n right: calc(var(--arrow-size) * -1);\n top: var(--arrow-offset);\n }\n\n .pds-tooltip--bottom & {\n border-block-end-color: var(--background-color);\n border-width: var(--arrow-pointing-up);\n left: 50%;\n top: calc(var(--arrow-size) * -1);\n transform: translateX(-50%);\n }\n\n .pds-tooltip--bottom-end & {\n border-block-end-color: var(--background-color);\n border-width: var(--arrow-pointing-up);\n left: initial;\n right: var(--arrow-offset);\n top: calc(var(--arrow-size) * -1);\n }\n\n .pds-tooltip--bottom-start & {\n border-block-end-color: var(--background-color);\n border-width: var(--arrow-pointing-up);\n left: var(--arrow-offset);\n top: calc(var(--arrow-size) * -1);\n }\n\n .pds-tooltip--no-arrow & {\n border-width: 0;\n }\n }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n tag: 'pds-tooltip',\n styleUrl: 'pds-tooltip.scss',\n shadow: true,\n})\nexport class PdsTooltip {\n private contentEl: HTMLElement | null;\n\n /**\n * Reference to the Host element\n */\n @Element() el: HTMLPdsTooltipElement;\n\n /**\n * Determines when the tooltip is open\n * @defaultValue false\n */\n @State() isOpen = false;\n\n /**\n * Content for the tooltip. If HTML is required, use the content slot\n */\n @Prop() content: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether or not the tooltip has an arrow\n * @defaultValue true\n */\n @Prop() hasArrow? = true;\n\n /**\n * Enable this option when using the content slot\n * @defaultValue false\n */\n @Prop() htmlContent = false;\n\n /**\n * Determines the preferred position of the tooltip\n * @defaultValue \"right\"\n */\n @Prop({ reflect: true }) placement:\n 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'right';\n\n /**\n * Determines whether or not the tooltip is visible\n * @defaultValue false\n */\n @Prop({mutable: true, reflect: true}) opened = false;\n\n @Watch('opened')\n handleOpenToggle() {\n if (this.opened) {\n this.handleShow();\n } else {\n this.handleHide();\n }\n }\n\n /**\n * Emitted after a tooltip is closed\n */\n @Event() pdsTooltipHide: EventEmitter;\n\n /**\n * Emitted after a tooltip is shown\n */\n @Event() pdsTooltipShow: EventEmitter;\n\n componentWillLoad() {\n if (this.opened) {\n this.showTooltip();\n }\n\n this.el.addEventListener('blur', this.handleHide, true);\n this.el.addEventListener('focus', this.handleShow, true);\n }\n\n componentDidUpdate() {\n if (this.opened) {\n this.showTooltip();\n }\n }\n\n componentDidRender() {\n positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n }\n\n /**\n * Shows the tooltip by enabling the opened property\n */\n @Method()\n async showTooltip() {\n this.opened = true;\n }\n\n /**\n * Hides the tooltip by disabling the opened property\n */\n @Method()\n async hideTooltip() {\n this.opened = false;\n }\n\n private handleHide = () => {\n this.hideTooltip();\n this.pdsTooltipHide.emit();\n };\n\n private handleShow = () => {\n this.showTooltip();\n this.pdsTooltipShow.emit();\n };\n\n render() {\n return (\n <Host\n onMouseEnter={this.handleShow}\n onMouseLeave={this.handleHide}\n onFocusin={this.handleShow}\n onFocusout={this.handleHide}\n >\n <div\n class={`\n pds-tooltip\n pds-tooltip--${this.placement}\n ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n ${this.opened ? 'pds-tooltip--is-open' : ''}\n ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n `}\n >\n <span\n aria-describedby={this.componentId}\n class=\"pds-tooltip__trigger\"\n >\n <slot />\n </span>\n\n <div class=\"pds-tooltip__content\"\n aria-hidden={this.opened ? 'false' : 'true'}\n aria-live={this.opened ? 'polite' : 'off'}\n id={this.componentId}\n ref={(el) => (this.contentEl = el)}\n role=\"tooltip\"\n >\n <slot\n name=\"content\"\n ></slot>\n {this.content}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAOO,MAAMA,EAAkB,EAAEC,OAAMC,gBAAeC,UAASC,SAAS,MACtE,GAAIH,GAAQI,UAAW,OAEvB,MAAMC,EAAOL,EAAKM,wBAClB,MAAMC,EAAcL,EAAQI,wBAG5B,IAAKL,GAAiBA,GAAiB,GAAI,OAE3C,OAAQ,MACN,KAAKA,EAAcO,SAAS,SAC1BN,EAAQO,MAAMC,IAAM,MACpBR,EAAQO,MAAME,KAAO,QAAQN,EAAKO,aAAaT,OAC/CD,EAAQO,MAAMI,UAAY,mBAE1B,GAAIZ,EAAcO,SAAS,SAAU,CACnCN,EAAQO,MAAMC,IAAM,IACpBR,EAAQO,MAAMI,UAAY,e,CAG5B,GAAIZ,EAAcO,SAAS,OAAQ,CACjCN,EAAQO,MAAMK,OAAS,IACvBZ,EAAQO,MAAMC,IAAM,UACpBR,EAAQO,MAAMI,UAAY,e,CAG5B,MAEF,KAAKZ,EAAcO,SAAS,QAC1BN,EAAQO,MAAMC,IAAM,MACpBR,EAAQO,MAAMM,MAAQ,QAAQV,EAAKO,aAAaT,OAChDD,EAAQO,MAAMI,UAAY,mBAE1B,GAAIZ,EAAcO,SAAS,SAAU,CACnCN,EAAQO,MAAMC,IAAM,IACpBR,EAAQO,MAAMI,UAAY,e,CAG5B,GAAIZ,EAAcO,SAAS,OAAQ,CACjCN,EAAQO,MAAMK,OAAS,IACvBZ,EAAQO,MAAMC,IAAM,UACpBR,EAAQO,MAAMI,UAAY,e,CAG5B,MAEF,KAAKZ,EAAcO,SAAS,UAC1BN,EAAQO,MAAMC,IAAM,QAAQL,EAAKW,cAAcb,OAC/CD,EAAQO,MAAME,KAAO,MACrBT,EAAQO,MAAMI,UAAY,mBAE1B,GAAIZ,EAAcO,SAAS,SAAU,CACnCN,EAAQO,MAAME,KAAO,IACrBT,EAAQO,MAAMI,UAAY,e,CAG5B,GAAIZ,EAAcO,SAAS,OAAQ,CACjCN,EAAQO,MAAME,KAAO,UACrBT,EAAQO,MAAMM,MAAQ,IACtBb,EAAQO,MAAMI,UAAY,e,CAG5B,MAEF,KAAKZ,EAAcO,SAAS,OAC1BN,EAAQO,MAAMC,IAAM,SAASH,EAAYS,cAAcb,aACvDD,EAAQO,MAAME,KAAO,MACrBT,EAAQO,MAAMI,UAAY,mBAE1B,GAAIZ,EAAcO,SAAS,SAAU,CACnCN,EAAQO,MAAME,KAAO,IACrBT,EAAQO,MAAMI,UAAY,e,CAE5B,GAAIZ,EAAcO,SAAS,OAAQ,CACjCN,EAAQO,MAAME,KAAO,UACrBT,EAAQO,MAAMM,MAAQ,IACtBb,EAAQO,MAAMI,UAAY,e,CAG5B,M,ECtFN,MAAMI,EAAgB,yyIACtB,MAAAC,EAAeD,E,MCcFE,EAAU,M,uHAkHbC,KAAAC,WAAa,KACnBD,KAAKE,cACLF,KAAKG,eAAeC,MAAM,EAGpBJ,KAAAK,WAAa,KACnBL,KAAKM,cACLN,KAAKO,eAAeH,MAAM,E,YA7GV,M,gEAgBE,K,iBAME,M,eAkBL,Q,YAM8B,K,CAG/C,gBAAAI,GACE,GAAIR,KAAKS,OAAQ,CACfT,KAAKK,Y,KACA,CACLL,KAAKC,Y,EAcT,iBAAAS,GACE,GAAIV,KAAKS,OAAQ,CACfT,KAAKM,a,CAGPN,KAAKW,GAAGC,iBAAiB,OAAQZ,KAAKC,WAAY,MAClDD,KAAKW,GAAGC,iBAAiB,QAASZ,KAAKK,WAAY,K,CAGrD,kBAAAQ,GACE,GAAIb,KAAKS,OAAQ,CACfT,KAAKM,a,EAIT,kBAAAQ,GACEnC,EAAgB,CAACC,KAAMoB,KAAKW,GAAI9B,cAAemB,KAAKe,UAAWjC,QAASkB,KAAKgB,W,CAO/E,iBAAMV,GACJN,KAAKS,OAAS,I,CAOhB,iBAAMP,GACJF,KAAKS,OAAS,K,CAahB,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,aAAcrB,KAAKK,WACnBiB,aAActB,KAAKC,WACnBsB,UAAWvB,KAAKK,WAChBmB,WAAYxB,KAAKC,YAEjBiB,EAAA,OAAAE,IAAA,2CACEK,MAAO,uDAEUzB,KAAKe,0BAClBf,KAAK0B,YAAc,gCAAkC,mBACrD1B,KAAKS,OAAS,uBAAyB,mBACvCT,KAAK2B,SAAW,GAAK,uCAGzBT,EAAA,QAAAE,IAAA,8DACoBpB,KAAK4B,YACvBH,MAAM,wBAENP,EAAA,QAAAE,IAAA,8CAGFF,EAAA,OAAAE,IAAA,2CAAKK,MAAM,uBAAsB,cAClBzB,KAAKS,OAAS,QAAU,OAAM,YAChCT,KAAKS,OAAS,SAAW,MACpCoB,GAAI7B,KAAK4B,YACTE,IAAMnB,GAAQX,KAAKgB,UAAYL,EAC/BoB,KAAK,WAELb,EAAA,QAAAE,IAAA,2CACEY,KAAK,YAENhC,KAAKiC,U"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js"],(function(t){"use strict";var e,r,a,n;return{setters:[function(t){e=t.r;r=t.h;a=t.H;n=t.g}],execute:function(){var i=":host{--background:var(--pine-color-base-white);background:var(--background);border-collapse:separate;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(.is-responsive){background-attachment:local, local, scroll, scroll;background-image:-webkit-gradient(linear, left top, right top, from(var(--background)), to(var(--background))), -webkit-gradient(linear, left top, right top, from(var(--background)), to(var(--background))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, var(--background), var(--background)), linear-gradient(to right, var(--background), var(--background)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));background-position:left center, right center, left center, right center;background-repeat:no-repeat;background-size:4px 100%, 4px 100%, 4px 100%, 4px 100%;display:block;margin:0 auto;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto;white-space:nowrap}";var o=i;var c=t("pds_table",function(){function t(t){e(this,t);this.compact=undefined;this.componentId=undefined;this.responsive=undefined;this.fixedColumn=undefined;this.selectable=undefined;this.sortingColumn=null;this.sortingDirection="asc"}t.prototype.componentWillLoad=function(){this.sortingColumn=null};t.prototype.classNames=function(){var t=["pds-table"];if(this.compact){t.push("is-compact")}if(this.responsive){t.push("is-responsive")}return t.join(" ")};t.prototype.sortTable=function(t,e){var r=this.el.querySelector("pds-table-body");var a=Array.from(r.querySelectorAll("pds-table-row"));var n=Array.from(this.el.querySelectorAll("pds-table-head-cell[sortable]"));var i=n.find((function(e){return e.innerText.trim()===t}));if(!i){console.warn('Column "'.concat(t,'" not found.'));return}var o=n.indexOf(i);a.sort((function(t,r){var a=t.querySelector("pds-table-cell:nth-child(".concat(o+1,")")).textContent.trim();var n=r.querySelector("pds-table-cell:nth-child(".concat(o+1,")")).textContent.trim();if(e==="asc"){return a.localeCompare(n)}else{return n.localeCompare(a)}}));r.innerHTML="";a.forEach((function(t){r.appendChild(t)}))};t.prototype.handleTableSort=function(t){var e=t.detail.direction;this.sortTable(t.detail.column,e);this.sortingColumn=t.detail.column;this.sortingDirection=e};t.prototype.render=function(){return r(a,{key:"61e4788551b8e01ce7e5d0e96869b742157a9f2b",class:this.classNames(),id:this.componentId,role:"grid",selectable:this.selectable},r("slot",{key:"bab0e40123fe8bc257221bbd1a2b2f6076a6c691"}))};Object.defineProperty(t.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});return t}());c.style=o}}}));
|
|
2
|
-
//# sourceMappingURL=p-d7606cb1.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTableCss","PdsTableStyle0","PdsTable","exports","class_1","prototype","componentWillLoad","this","sortingColumn","classNames","compact","push","responsive","join","sortTable","column","direction","tableBody","el","querySelector","tableRows","Array","from","querySelectorAll","columnHeaderCells","columnHeaderCell","find","cell","innerText","trim","console","warn","concat","columnIndex","indexOf","sort","a","b","valueA","textContent","valueB","localeCompare","innerHTML","forEach","row","appendChild","handleTableSort","event","detail","sortingDirection","render","h","Host","key","class","id","componentId","role","selectable"],"sources":["src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.tsx"],"sourcesContent":[":host {\n --background: var(--pine-color-base-white);\n\n background: var(--background);\n border-collapse: separate;\n box-sizing: border-box;\n display: table;\n width: 100%;\n}\n\n:host(.is-responsive) {\n background-attachment: local, local, scroll, scroll;\n background-image: linear-gradient(to right, var(--background), var(--background)),\n linear-gradient(to right, var(--background), var(--background)),\n linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),\n linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));\n background-position: left center, right center, left center, right center;\n background-repeat: no-repeat;\n background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%;\n display: block;\n margin: 0 auto;\n max-width: fit-content;\n overflow-x: auto;\n white-space: nowrap;\n}\n","import { Component, Element, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pds-table',\n styleUrl: 'pds-table.scss',\n shadow: true,\n})\nexport class PdsTable {\n @Element() el: HTMLPdsTableElement;\n tableRef: HTMLElement;\n\n /**\n * Determines if table displays compact which reduces the spacing of table cells.\n */\n @Prop() compact: boolean;\n\n /**\n * A unique identifier used for the table `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Enables the table to be responsive by horizontally scrolling on smaller screens.\n */\n @Prop() responsive: boolean;\n\n /**\n * Determines if table displays fixed column which fixes the first column of the table.\n */\n @Prop() fixedColumn: boolean;\n\n /**\n * Determines if table displays checkboxes for selectable rows.\n */\n @Prop() selectable: boolean;\n\n @State() sortingColumn: string | null = null;\n @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n componentWillLoad() {\n this.sortingColumn = null;\n }\n\n private classNames() {\n const classNames = ['pds-table'];\n\n if (this.compact) {\n classNames.push('is-compact');\n }\n\n if (this.responsive) {\n classNames.push('is-responsive');\n }\n\n return classNames.join(' ');\n }\n\n private sortTable(column: string, direction: 'asc' | 'desc') {\n const tableBody = this.el.querySelector('pds-table-body');\n\n // Get the rows in the table body\n const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n // Find the column index based on the column name\n const columnHeaderCells: HTMLElement[] = Array.from(\n this.el.querySelectorAll('pds-table-head-cell[sortable]')\n );\n\n const columnHeaderCell = columnHeaderCells.find(\n (cell) => cell.innerText.trim() === column\n );\n\n if (!columnHeaderCell) {\n console.warn(`Column \"${column}\" not found.`);\n return;\n }\n\n const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n // Sort the rows based on the content of the specified column\n tableRows.sort((a, b) => {\n const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n if (direction === 'asc') {\n return valueA.localeCompare(valueB);\n } else {\n return valueB.localeCompare(valueA);\n }\n });\n\n // Clear and append the sorted rows back to the table body\n tableBody.innerHTML = '';\n tableRows.forEach((row) => {\n tableBody.appendChild(row);\n });\n }\n\n @Listen('pdsTableSort')\n handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n const { direction } = event.detail;\n this.sortTable(event.detail.column, direction);\n this.sortingColumn = event.detail.column;\n this.sortingDirection = direction;\n }\n\n render() {\n return (\n <Host\n class={this.classNames()}\n id={this.componentId}\n role=\"grid\"\n selectable={this.selectable}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"0JAAA,IAAMA,EAAc,guCACpB,IAAAC,EAAeD,E,ICMFE,EAAQC,EAAA,uB,4KA6BqB,K,sBACI,K,CAE5CC,EAAAC,UAAAC,kBAAA,WACEC,KAAKC,cAAgB,I,EAGfJ,EAAAC,UAAAI,WAAA,WACN,IAAMA,EAAa,CAAC,aAEpB,GAAIF,KAAKG,QAAS,CAChBD,EAAWE,KAAK,a,CAGlB,GAAIJ,KAAKK,WAAY,CACnBH,EAAWE,KAAK,gB,CAGlB,OAAOF,EAAWI,KAAK,K,EAGjBT,EAAAC,UAAAS,UAAA,SAAUC,EAAgBC,GAChC,IAAMC,EAAYV,KAAKW,GAAGC,cAAc,kBAGxC,IAAMC,EAAYC,MAAMC,KAAKL,EAAUM,iBAAiB,kBAGxD,IAAMC,EAAmCH,MAAMC,KAC7Cf,KAAKW,GAAGK,iBAAiB,kCAG3B,IAAME,EAAmBD,EAAkBE,MACzC,SAACC,GAAS,OAAAA,EAAKC,UAAUC,SAAWd,CAA1B,IAGZ,IAAKU,EAAkB,CACrBK,QAAQC,KAAK,WAAAC,OAAWjB,EAAM,iBAC9B,M,CAGF,IAAMkB,EAAcT,EAAkBU,QAAQT,GAG9CL,EAAUe,MAAK,SAACC,EAAGC,GACjB,IAAMC,EAASF,EAAEjB,cAAc,4BAAAa,OAA4BC,EAAc,EAAC,MAAKM,YAAYV,OAC3F,IAAMW,EAASH,EAAElB,cAAc,4BAAAa,OAA4BC,EAAc,EAAC,MAAKM,YAAYV,OAE3F,GAAIb,IAAc,MAAO,CACvB,OAAOsB,EAAOG,cAAcD,E,KACvB,CACL,OAAOA,EAAOC,cAAcH,E,KAKhCrB,EAAUyB,UAAY,GACtBtB,EAAUuB,SAAQ,SAACC,GACjB3B,EAAU4B,YAAYD,E,KAK1BxC,EAAAC,UAAAyC,gBAAA,SAAgBC,GACN,IAAA/B,EAAc+B,EAAMC,OAAMhC,UAClCT,KAAKO,UAAUiC,EAAMC,OAAOjC,OAAQC,GACpCT,KAAKC,cAAgBuC,EAAMC,OAAOjC,OAClCR,KAAK0C,iBAAmBjC,C,EAG1BZ,EAAAC,UAAA6C,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO/C,KAAKE,aACZ8C,GAAIhD,KAAKiD,YACTC,KAAK,OACLC,WAAYnD,KAAKmD,YAEjBP,EAAA,QAAAE,IAAA,6C,uHA3Ga,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js"],(function(r){"use strict";var o,e,a,c;return{setters:[function(r){o=r.r;e=r.h;a=r.H;c=r.g}],execute:function(){var n=function(r){return!!r.shadowRoot&&!!r.attachShadow};var l=":host{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-disabled:transparent;--background-color-primary:var(--pine-color-neutral-charcoal-400);--background-color-hover-primary:var(--pine-color-neutral-charcoal-500);--background-color-disabled-primary:var(--pine-color-neutral-grey-300);--color-primary:var(--pine-color-base-white);--color-disabled-primary:var(--pine-color-neutral-charcoal-100);--outline-color-primary:var(--pine-color-primary-200);--border-color-secondary:var(--pine-color-neutral-grey-400);--border-color-hover-secondary:var(--pine-color-neutral-grey-500);--border-color-focus-secondary:var(--pine-color-neutral-grey-300);--border-color-disabled-secondary:var(--pine-color-neutral-grey-300);--color-secondary:var(--pine-color-neutral-charcoal-400);--color-disabled-secondary:var(--pine-color-neutral-charcoal-100);--outline-color-secondary:var(--pine-color-primary-200);--background-color-accent:var(--pine-color-primary-300);--background-color-hover-accent:var(--pine-color-primary-400);--background-color-disabled-accent:var(--pine-color-primary-100);--color-accent:var(--pine-color-base-white);--color-disabled-accent:var(--pine-color-primary-200);--outline-color-accent:var(--pine-color-primary-200);--background-color-destructive:var(--pine-color-red-300);--background-color-hover-destructive:var(--pine-color-red-400);--background-color-disabled-destructive:var(--pine-color-red-100);--color-destructive:var(--pine-color-base-white);--color-disabled-destructive:var(--pine-color-red-200);--outline-color-destructive:var(--pine-color-red-200);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:10px;color:var(--color);display:-ms-flexbox;display:flex;font-family:inherit;font-size:1rem;font-weight:500;min-height:40px;padding:0.5rem 1rem}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.pds-button:hover{background-color:var(--background-color-hover);border-color:var(--border-color-hover)}.pds-button:focus{border-color:var(--border-color-focus);outline:4px solid var(--outline-color)}.pds-button:disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled);color:var(--color-disabled)}.pds-button--primary{--background-color:var(--background-color-primary);--background-color-hover:var(--background-color-hover-primary);--background-color-disabled:var(--background-color-disabled-primary);--color:var(--color-primary);--color-disabled:var(--color-disabled-primary);--outline-color:var(--outline-color-primary)}.pds-button--accent{--background-color:var(--background-color-accent);--background-color-hover:var(--background-color-hover-accent);--background-color-disabled:var(--background-color-disabled-accent);--color:var(--color-accent);--color-disabled:var(--color-disabled-accent);--outline-color:var(--outline-color-accent)}.pds-button--destructive{--background-color:var(--background-color-destructive);--background-color-hover:var(--background-color-hover-destructive);--background-color-disabled:var(--background-color-disabled-destructive);--color:var(--color-destructive);--color-disabled:var(--color-disabled-destructive);--outline-color:var(--outline-color-destructive)}.pds-button--secondary,.pds-button--disclosure{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--border-color-disabled:var(--border-color-disabled-secondary);--border-color-focus:var(--border-color-focus-secondary);--border-color-hover:var(--border-color-hover-secondary);--border-color:var(--border-color-secondary);--color:var(--color-secondary);--color-disabled:var(--color-disabled-secondary);--outline-color:var(--outline-color-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.pds-button--unstyled{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--color:inherit;border:0;margin:0;min-height:auto;padding:0;width:inherit}";var d=l;var i=r("pds_button",function(){function r(r){var e=this;o(this,r);this.handleClick=function(r){if(e.type!="button"){if(n(e.el)){var o=e.el.closest("form");if(o){r.preventDefault();var a=document.createElement("button");a.type=e.type;a.style.display="none";o.appendChild(a);a.click();a.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}r.prototype.classNames=function(){var r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join(" ")};r.prototype.render=function(){return e(a,{key:"0f8f16b8e8d941481d66f1833a4a7e5402aab2bc","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},e("button",{key:"c8b0a1f8b0f6c984477e2bb6cdb77226f8250ac3",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&e("pds-icon",{name:this.icon,part:"icon"}),e("slot",{key:"76310f327aad59ecd150261a186e256c52cf6251"}),this.variant==="disclosure"&&e("pds-icon",{name:"caret-down",part:"caret"})))};Object.defineProperty(r.prototype,"el",{get:function(){return c(this)},enumerable:false,configurable:true});return r}());i.style=d}}}));
|
|
2
|
-
//# sourceMappingURL=p-df656817.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","exports","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","class_1","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon"],"sources":["src/utils/utils.ts","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",":host {\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: transparent;\n --border-color-disabled: transparent;\n\n // primary\n --background-color-primary: var(--pine-color-neutral-charcoal-400);\n --background-color-hover-primary: var(--pine-color-neutral-charcoal-500);\n --background-color-disabled-primary: var(--pine-color-neutral-grey-300);\n --color-primary: var(--pine-color-base-white);\n --color-disabled-primary: var(--pine-color-neutral-charcoal-100);\n --outline-color-primary: var(--pine-color-primary-200);\n\n // secondary\n --border-color-secondary: var(--pine-color-neutral-grey-400);\n --border-color-hover-secondary: var(--pine-color-neutral-grey-500);\n --border-color-focus-secondary: var(--pine-color-neutral-grey-300);\n --border-color-disabled-secondary: var(--pine-color-neutral-grey-300);\n --color-secondary: var(--pine-color-neutral-charcoal-400);\n --color-disabled-secondary: var(--pine-color-neutral-charcoal-100);\n --outline-color-secondary: var(--pine-color-primary-200);\n\n // accent\n --background-color-accent: var(--pine-color-primary-300);\n --background-color-hover-accent: var(--pine-color-primary-400);\n --background-color-disabled-accent: var(--pine-color-primary-100);\n --color-accent: var(--pine-color-base-white);\n --color-disabled-accent: var(--pine-color-primary-200);\n --outline-color-accent: var(--pine-color-primary-200);\n\n // destructive\n --background-color-destructive: var(--pine-color-red-300);\n --background-color-hover-destructive: var(--pine-color-red-400);\n --background-color-disabled-destructive: var(--pine-color-red-100);\n --color-destructive: var(--pine-color-base-white);\n --color-disabled-destructive: var(--pine-color-red-200);\n --outline-color-destructive: var(--pine-color-red-200);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n.pds-button {\n align-items: center;\n background-color: var(--background-color);\n border: 1px solid var(--border-color);\n border-radius: 10px;\n color: var(--color);\n display: flex;\n font-family: inherit;\n font-size: 1rem;\n font-weight: 500;\n min-height: 40px;\n padding: 0.5rem 1rem;\n\n pds-icon {\n fill: currentColor;\n margin-inline-end: 0.5rem;\n }\n\n &:hover {\n background-color: var(--background-color-hover);\n border-color: var(--border-color-hover);\n }\n\n &:focus {\n border-color: var(--border-color-focus);\n outline: 4px solid var(--outline-color);\n }\n\n &:disabled {\n background-color: var(--background-color-disabled);\n border-color: var(--border-color-disabled);\n color: var(--color-disabled);\n }\n}\n\n.pds-button--primary {\n --background-color: var(--background-color-primary);\n --background-color-hover: var(--background-color-hover-primary);\n --background-color-disabled: var(--background-color-disabled-primary);\n --color: var(--color-primary);\n --color-disabled: var(--color-disabled-primary);\n --outline-color: var(--outline-color-primary);\n}\n\n.pds-button--accent {\n --background-color: var(--background-color-accent);\n --background-color-hover: var(--background-color-hover-accent);\n --background-color-disabled: var(--background-color-disabled-accent);\n --color: var(--color-accent);\n --color-disabled: var(--color-disabled-accent);\n --outline-color: var(--outline-color-accent);\n}\n\n.pds-button--destructive {\n --background-color: var(--background-color-destructive);\n --background-color-hover: var(--background-color-hover-destructive);\n --background-color-disabled: var(--background-color-disabled-destructive);\n --color: var(--color-destructive);\n --color-disabled: var(--color-disabled-destructive);\n --outline-color: var(--outline-color-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --background-color: transparent;\n --background-color-hover: transparent;\n --background-color-disabled: transparent;\n --border-color-disabled: var(--border-color-disabled-secondary);\n --border-color-focus: var(--border-color-focus-secondary);\n --border-color-hover: var(--border-color-hover-secondary);\n --border-color: var(--border-color-secondary);\n --color: var(--color-secondary);\n --color-disabled: var(--color-disabled-secondary);\n --outline-color: var(--outline-color-secondary);\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: 0;\n margin-inline-start: 0.5rem;\n }\n}\n\n.pds-button--unstyled {\n --background-color: transparent;\n --background-color-hover: transparent;\n --background-color-disabled: transparent;\n --color: inherit;\n border: 0;\n margin: 0;\n min-height: auto;\n padding: 0;\n width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\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 styleUrl: '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 name=\"caret-down\" part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"0JAIO,IAAMA,EAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,EAAe,0pIACrB,IAAAC,EAAeD,E,ICaFE,EAASC,EAAA,wB,mCAwCZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIZ,EAAaW,EAAKV,IAAK,CACzB,IAAMY,EAAOF,EAAKV,GAAGa,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1FC,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAIlB,KAAKmB,QAAS,CAChBD,EAAWE,KAAK,eAAiBpB,KAAKmB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBL,EAAAC,UAAAK,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYzB,KAAK0B,SAAW,OAAS,KACxCC,GAAI3B,KAAK4B,YACTC,QAAS7B,KAAKC,YACdkB,QAASnB,KAAKmB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO9B,KAAKkB,aACZQ,SAAU1B,KAAK0B,SACfK,KAAM/B,KAAK+B,KACXC,KAAK,SACL5B,KAAMJ,KAAKI,KACX6B,MAAOjC,KAAKiC,OAEXjC,KAAKkC,MAAQlC,KAAKmB,UAAY,cAAgBI,EAAA,YAAUQ,KAAM/B,KAAKkC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCzB,KAAKmB,UAAY,cAAgBI,EAAA,YAAUQ,KAAK,aAAaC,KAAK,W,uHAvFvD,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(t,e,o,r){function n(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,i){function s(t){try{d(r.next(t))}catch(t){i(t)}}function a(t){try{d(r["throw"](t))}catch(t){i(t)}}function d(t){t.done?o(t.value):n(t.value).then(s,a)}d((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,n,i,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return d([t,e])}}function d(a){if(r)throw new TypeError("Generator is already executing.");while(s&&(s=0,a[0]&&(o=0)),o)try{if(r=1,n&&(i=a[0]&2?n["return"]:a[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,a[1])).done)return i;if(n=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:o.label++;return{value:a[1],done:false};case 5:o.label++;n=a[1];a=[0];continue;case 7:a=o.ops.pop();o.trys.pop();continue;default:if(!(i=o.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){o=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){o.label=a[1];break}if(a[0]===6&&o.label<i[1]){o.label=i[1];i=a;break}if(i&&o.label<i[2]){o.label=i[2];o.ops.push(a);break}if(i[2])o.ops.pop();o.trys.pop();continue}a=e.call(t,o)}catch(t){a=[6,t];n=0}finally{r=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-445792b5.system.js"],(function(t){"use strict";var e,o,r,n;return{setters:[function(t){e=t.r;o=t.c;r=t.h;n=t.H}],execute:function(){var i=":host(.pds-copytext){--background:var(--pine-color-base-white);--background-hover:var(--pine-color-neutral-grey-200);--border:var(--pine-border-interactive);--border-hover:var(--pine-border-interactive-hover-color);--border-radius:var(--pine-border-radius-md);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-hover:var(--pine-color-neutral-charcoal-400);--font-size:var(--pine-font-size-body);--font-weight:var(--pine-font-weight-semibold);--line-height:var(--pine-line-height-md);--spacing-sm:var(--pine-spacing-sm);--spacing-xs:var(--pine-spacing-xs);--spacing-xxs:var(--pine-spacing-xxs)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--background);border:0;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size);font-weight:var(--font-weight);max-width:100%;padding:var(--spacing-xxs) var(--spacing-xs)}:host(.pds-copytext) pds-button:hover{background-color:var(--background-hover);color:var(--color-hover)}:host(.pds-copytext) pds-button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-copytext) pds-button span{line-height:var(--line-height);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);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:0;padding:0}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:0}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border);border-radius:var(--border-radius);-webkit-margin-end:var(--spacing-sm);margin-inline-end:var(--spacing-sm);padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border-color:var(--border-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%}";var s=i;var a=t("pds_copytext",function(){function t(t){var r=this;e(this,t);this.pdsCopyTextClick=o(this,"pdsCopyTextClick",7);this.copyToClipboard=function(t){return __awaiter(r,void 0,void 0,(function(){var e,o;return __generator(this,(function(r){switch(r.label){case 0:r.trys.push([0,4,,5]);if(!navigator.clipboard)return[3,2];return[4,navigator.clipboard.writeText(t)];case 1:r.sent();this.pdsCopyTextClick.emit("Copied to clipboard");return[3,3];case 2:e=document.createElement("textarea");e.value=t;e.setAttribute("readonly","");e.style.position="absolute";e.style.left="-9999px";document.body.appendChild(e);e.focus();e.setSelectionRange(0,e.value.length);document.execCommand("copy");document.body.removeChild(e);this.pdsCopyTextClick.emit("Copied to clipboard");r.label=3;case 3:return[3,5];case 4:o=r.sent();this.pdsCopyTextClick.emit("Error writing text to clipboard: ".concat(o));return[3,5];case 5:return[2]}}))}))};this.handleClick=function(){r.copyToClipboard(r.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}t.prototype.classNames=function(){var t=["pds-copytext"];if(this.border){t.push("pds-copytext--bordered")}if(this.fullWidth){t.push("pds-copytext--full-width")}if(this.truncate){t.push("pds-copytext--truncated")}return t.join(" ")};t.prototype.render=function(){return r(n,{key:"650ef9a2f68e604211c98721ef61e68a44a619b2",class:this.classNames(),id:this.componentId},r("pds-button",{key:"3c4e3d7779e794c65115431ea93e6c321c5e8f83",type:"button",variant:"unstyled",onClick:this.handleClick},r("span",{key:"e755703bd191e440d1b10250027c1dfcf1340cbe"},this.value),r("pds-icon",{key:"6fc35fd7fef1a98b9f248054a2927a1b006561d0",name:"copy",size:"16px"})))};return t}());a.style=s}}}));
|
|
2
|
-
//# sourceMappingURL=p-e20cf701.system.entry.js.map
|