@pine-ds/core 3.5.2 → 3.7.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/index.d.ts +4 -0
- package/components/index.js +2 -0
- package/components/index.js.map +1 -1
- package/components/index2.js +3 -1
- package/components/index2.js.map +1 -1
- package/components/mock-pds-modal.js +9 -4
- package/components/mock-pds-modal.js.map +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-box2.js +132 -2
- package/components/pds-box2.js.map +1 -1
- package/components/pds-button2.js +58 -6
- package/components/pds-button2.js.map +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-combobox.js +349 -39
- package/components/pds-combobox.js.map +1 -1
- package/components/pds-copytext.js +1 -1
- package/components/pds-dropdown-menu-separator.js +1 -1
- package/components/pds-dropdown-menu-separator.js.map +1 -1
- package/components/pds-filter.d.ts +11 -0
- package/components/pds-filter.js +518 -0
- package/components/pds-filter.js.map +1 -0
- package/components/pds-filters.d.ts +11 -0
- package/components/pds-filters.js +38 -0
- package/components/pds-filters.js.map +1 -0
- package/components/pds-image.js +2 -2
- package/components/pds-input.js +2 -2
- package/components/pds-link2.js +2 -2
- package/components/pds-loader2.js +1 -1
- package/components/pds-modal-content.js +128 -11
- package/components/pds-modal-content.js.map +1 -1
- package/components/pds-modal-footer.js +1 -1
- package/components/pds-modal-header.js +1 -1
- package/components/pds-modal.js +13 -3
- package/components/pds-modal.js.map +1 -1
- package/components/pds-popover.js +1 -1
- package/components/pds-progress.js +1 -1
- package/components/pds-property.js +1 -1
- package/components/pds-radio.js +4 -4
- package/components/pds-row.js +1 -1
- package/components/pds-select.js +2 -2
- package/components/pds-sortable-item.js +1 -1
- package/components/pds-sortable.js +1 -1
- package/components/pds-switch.js +4 -4
- 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 +2 -2
- package/components/pds-table-head-cell2.js +2 -2
- package/components/pds-table-head.js +1 -1
- package/components/pds-table-row.js +1 -1
- package/components/pds-tabpanel.js +1 -1
- package/components/pds-tabs.js +1 -1
- package/components/pds-tabs.js.map +1 -1
- package/components/pds-text2.js +1 -1
- package/components/pds-textarea.js +112 -8
- package/components/pds-textarea.js.map +1 -1
- package/components/pds-toast.js +3 -3
- package/components/pds-tooltip.js +2 -2
- package/dist/cjs/{index-DVaLegMK.js → index-CTirFLR-.js} +6 -2
- package/dist/cjs/{index-DVaLegMK.js.map → index-CTirFLR-.js.map} +1 -1
- package/dist/cjs/{index-g-uSeICs.js → index-DDTyvZD7.js} +5 -2
- package/dist/cjs/index-DDTyvZD7.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mock-pds-modal.cjs.entry.js +9 -5
- package/dist/cjs/mock-pds-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/mock-pds-modal.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js +2 -2
- package/dist/cjs/pds-alert.cjs.entry.js +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +2 -2
- package/dist/cjs/pds-box.cjs.entry.js +68 -3
- package/dist/cjs/pds-box.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-box.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +58 -6
- package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/pds-chip.cjs.entry.js +2 -2
- package/dist/cjs/pds-combobox.cjs.entry.js +349 -39
- package/dist/cjs/pds-combobox.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-combobox.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +2 -2
- package/dist/cjs/pds-divider.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu-separator.cjs.entry.js +2 -2
- package/dist/cjs/pds-dropdown-menu-separator.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-dropdown-menu-separator.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +1 -1
- package/dist/cjs/pds-filter.cjs.entry.js +488 -0
- package/dist/cjs/pds-filter.cjs.entry.js.map +1 -0
- package/dist/cjs/pds-filter.entry.cjs.js.map +1 -0
- package/dist/cjs/pds-filters.cjs.entry.js +20 -0
- package/dist/cjs/pds-filters.cjs.entry.js.map +1 -0
- package/dist/cjs/pds-filters.entry.cjs.js.map +1 -0
- package/dist/cjs/pds-icon.cjs.entry.js +1 -1
- package/dist/cjs/pds-image.cjs.entry.js +3 -3
- package/dist/cjs/pds-input.cjs.entry.js +3 -3
- package/dist/cjs/pds-link.cjs.entry.js +4 -4
- package/dist/cjs/pds-loader.cjs.entry.js +2 -2
- package/dist/cjs/pds-modal-content.cjs.entry.js +129 -12
- package/dist/cjs/pds-modal-content.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-modal-content.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-modal-footer.cjs.entry.js +2 -2
- package/dist/cjs/pds-modal-header.cjs.entry.js +2 -2
- package/dist/cjs/pds-modal.cjs.entry.js +13 -4
- package/dist/cjs/pds-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-modal.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-popover.cjs.entry.js +2 -2
- package/dist/cjs/pds-progress.cjs.entry.js +2 -2
- package/dist/cjs/pds-property.cjs.entry.js +2 -2
- package/dist/cjs/pds-radio.cjs.entry.js +5 -5
- package/dist/cjs/pds-row.cjs.entry.js +2 -2
- package/dist/cjs/pds-select.cjs.entry.js +3 -3
- package/dist/cjs/pds-sortable-item.cjs.entry.js +3 -3
- package/dist/cjs/pds-sortable.cjs.entry.js +2 -2
- package/dist/cjs/pds-switch.cjs.entry.js +5 -5
- 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-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-table-body.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-cell.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +4 -4
- package/dist/cjs/pds-table-head.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-row.cjs.entry.js +2 -2
- package/dist/cjs/pds-table.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabpanel.cjs.entry.js +2 -2
- package/dist/cjs/pds-tabs.cjs.entry.js +2 -2
- package/dist/cjs/pds-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tabs.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-text.cjs.entry.js +2 -2
- package/dist/cjs/pds-textarea.cjs.entry.js +110 -8
- package/dist/cjs/pds-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-toast.cjs.entry.js +4 -4
- package/dist/cjs/pds-tooltip.cjs.entry.js +3 -3
- package/dist/cjs/pine-core.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/pds-box/pds-box.css +1325 -0
- package/dist/collection/components/pds-box/pds-box.js +1913 -148
- package/dist/collection/components/pds-box/pds-box.js.map +1 -1
- package/dist/collection/components/pds-button/pds-button.css +23 -0
- package/dist/collection/components/pds-button/pds-button.js +67 -6
- package/dist/collection/components/pds-button/pds-button.js.map +1 -1
- package/dist/collection/components/pds-button/stories/pds-button.stories.js +28 -1
- package/dist/collection/components/pds-combobox/pds-combobox.css +39 -1
- package/dist/collection/components/pds-combobox/pds-combobox.js +348 -38
- package/dist/collection/components/pds-combobox/pds-combobox.js.map +1 -1
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +103 -0
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.css +4 -1
- package/dist/collection/components/pds-filters/pds-filter/filter-interface.js +2 -0
- package/dist/collection/components/pds-filters/pds-filter/filter-interface.js.map +1 -0
- package/dist/collection/components/pds-filters/pds-filter/pds-filter.css +193 -0
- package/dist/collection/components/pds-filters/pds-filter/pds-filter.js +732 -0
- package/dist/collection/components/pds-filters/pds-filter/pds-filter.js.map +1 -0
- package/dist/collection/components/pds-filters/pds-filter/stories/pds-filter.stories.js +93 -0
- package/dist/collection/components/pds-filters/pds-filters.css +10 -0
- package/dist/collection/components/pds-filters/pds-filters.js +45 -0
- package/dist/collection/components/pds-filters/pds-filters.js.map +1 -0
- package/dist/collection/components/pds-filters/stories/pds-filters.stories.js +40 -0
- package/dist/collection/components/pds-image/pds-image.js +2 -2
- package/dist/collection/components/pds-input/pds-input.js +1 -1
- package/dist/collection/components/pds-link/pds-link.js +2 -2
- package/dist/collection/components/pds-loader/pds-loader.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.css +4 -6
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +128 -11
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js.map +1 -1
- package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal.css +42 -1
- package/dist/collection/components/pds-modal/pds-modal.js +34 -2
- package/dist/collection/components/pds-modal/pds-modal.js.map +1 -1
- package/dist/collection/components/pds-modal/stories/pds-modal.stories.js +245 -0
- package/dist/collection/components/pds-modal/test/mock-pds-modal.js +30 -3
- package/dist/collection/components/pds-modal/test/mock-pds-modal.js.map +1 -1
- package/dist/collection/components/pds-popover/pds-popover.js +1 -1
- package/dist/collection/components/pds-progress/pds-progress.js +1 -1
- package/dist/collection/components/pds-property/pds-property.js +1 -1
- package/dist/collection/components/pds-radio/pds-radio.js +3 -3
- package/dist/collection/components/pds-row/pds-row.js +1 -1
- package/dist/collection/components/pds-select/pds-select.js +1 -1
- package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +1 -1
- package/dist/collection/components/pds-sortable/pds-sortable.js +1 -1
- package/dist/collection/components/pds-switch/pds-switch.js +3 -3
- package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +3 -0
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +3 -3
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +1 -1
- package/dist/collection/components/pds-tabs/pds-tabs.js +2 -1
- package/dist/collection/components/pds-tabs/pds-tabs.js.map +1 -1
- package/dist/collection/components/pds-text/pds-text.js +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.css +51 -11
- package/dist/collection/components/pds-textarea/pds-textarea.js +127 -4
- package/dist/collection/components/pds-textarea/pds-textarea.js.map +1 -1
- package/dist/collection/components/pds-textarea/stories/pds-textarea.stories.js +13 -0
- package/dist/collection/components/pds-toast/pds-toast.js +3 -3
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
- package/dist/docs.json +4440 -415
- package/dist/esm/{index-BVCWKPy3.js → index-Bf1dou5H.js} +5 -2
- package/dist/esm/index-Bf1dou5H.js.map +1 -0
- package/dist/esm/{index-DrJ5r5Pu.js → index-D4MkIUXU.js} +5 -3
- package/dist/{esm-es5/index-DrJ5r5Pu.js.map → esm/index-D4MkIUXU.js.map} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mock-pds-modal.entry.js +9 -5
- package/dist/esm/mock-pds-modal.entry.js.map +1 -1
- package/dist/esm/pds-accordion.entry.js +2 -2
- package/dist/esm/pds-alert.entry.js +1 -1
- package/dist/esm/pds-avatar.entry.js +2 -2
- package/dist/esm/pds-box.entry.js +68 -3
- package/dist/esm/pds-box.entry.js.map +1 -1
- package/dist/esm/pds-button.entry.js +58 -6
- package/dist/esm/pds-button.entry.js.map +1 -1
- package/dist/esm/pds-checkbox.entry.js +2 -2
- package/dist/esm/pds-chip.entry.js +2 -2
- package/dist/esm/pds-combobox.entry.js +349 -39
- package/dist/esm/pds-combobox.entry.js.map +1 -1
- package/dist/esm/pds-copytext.entry.js +2 -2
- package/dist/esm/pds-divider.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu-separator.entry.js +2 -2
- package/dist/esm/pds-dropdown-menu-separator.entry.js.map +1 -1
- package/dist/esm/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm/pds-filter.entry.js +486 -0
- package/dist/esm/pds-filter.entry.js.map +1 -0
- package/dist/esm/pds-filters.entry.js +18 -0
- package/dist/esm/pds-filters.entry.js.map +1 -0
- package/dist/esm/pds-icon.entry.js +1 -1
- package/dist/esm/pds-image.entry.js +3 -3
- package/dist/esm/pds-input.entry.js +3 -3
- package/dist/esm/pds-link.entry.js +4 -4
- package/dist/esm/pds-loader.entry.js +2 -2
- package/dist/esm/pds-modal-content.entry.js +129 -12
- package/dist/esm/pds-modal-content.entry.js.map +1 -1
- package/dist/esm/pds-modal-footer.entry.js +2 -2
- package/dist/esm/pds-modal-header.entry.js +2 -2
- package/dist/esm/pds-modal.entry.js +13 -4
- package/dist/esm/pds-modal.entry.js.map +1 -1
- package/dist/esm/pds-popover.entry.js +2 -2
- package/dist/esm/pds-progress.entry.js +2 -2
- package/dist/esm/pds-property.entry.js +2 -2
- package/dist/esm/pds-radio.entry.js +5 -5
- package/dist/esm/pds-row.entry.js +2 -2
- package/dist/esm/pds-select.entry.js +3 -3
- package/dist/esm/pds-sortable-item.entry.js +3 -3
- package/dist/esm/pds-sortable.entry.js +2 -2
- package/dist/esm/pds-switch.entry.js +5 -5
- 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-cell.entry.js +3 -3
- package/dist/esm/pds-table-head-cell.entry.js +4 -4
- package/dist/esm/pds-table-head.entry.js +2 -2
- package/dist/esm/pds-table-row.entry.js +2 -2
- package/dist/esm/pds-table.entry.js +1 -1
- package/dist/esm/pds-tabpanel.entry.js +2 -2
- package/dist/esm/pds-tabs.entry.js +2 -2
- package/dist/esm/pds-tabs.entry.js.map +1 -1
- package/dist/esm/pds-text.entry.js +2 -2
- package/dist/esm/pds-textarea.entry.js +110 -8
- package/dist/esm/pds-textarea.entry.js.map +1 -1
- package/dist/esm/pds-toast.entry.js +4 -4
- package/dist/esm/pds-tooltip.entry.js +3 -3
- package/dist/esm/pine-core.js +3 -3
- package/dist/esm-es5/{index-BVCWKPy3.js → index-Bf1dou5H.js} +2 -2
- package/dist/esm-es5/index-Bf1dou5H.js.map +1 -0
- package/dist/esm-es5/index-D4MkIUXU.js +2 -0
- package/dist/{esm/index-DrJ5r5Pu.js.map → esm-es5/index-D4MkIUXU.js.map} +1 -1
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mock-pds-modal.entry.js +1 -1
- package/dist/esm-es5/mock-pds-modal.entry.js.map +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-alert.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js.map +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js.map +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +2 -2
- package/dist/esm-es5/pds-combobox.entry.js.map +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-divider.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-separator.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-separator.entry.js.map +1 -1
- package/dist/esm-es5/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm-es5/pds-filter.entry.js +2 -0
- package/dist/esm-es5/pds-filter.entry.js.map +1 -0
- package/dist/esm-es5/pds-filters.entry.js +2 -0
- package/dist/esm-es5/pds-filters.entry.js.map +1 -0
- 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-input.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-loader.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js.map +1 -1
- package/dist/esm-es5/pds-modal-footer.entry.js +1 -1
- package/dist/esm-es5/pds-modal-header.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js.map +1 -1
- package/dist/esm-es5/pds-popover.entry.js +1 -1
- package/dist/esm-es5/pds-progress.entry.js +1 -1
- package/dist/esm-es5/pds-property.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-sortable.entry.js +2 -2
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-body.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.entry.js +1 -1
- package/dist/esm-es5/pds-table-row.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js.map +1 -1
- package/dist/esm-es5/pds-text.entry.js +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-toast.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/pine-core/index.esm.js +1 -1
- package/dist/pine-core/mock-pds-modal.entry.esm.js.map +1 -1
- package/dist/pine-core/{p-fd091234.system.entry.js → p-0075bbbe.system.entry.js} +2 -2
- package/dist/pine-core/p-07e129db.entry.js +2 -0
- package/dist/pine-core/{p-8999b63d.system.entry.js → p-0975b749.system.entry.js} +2 -2
- package/dist/pine-core/{p-02326ac3.entry.js → p-0befa8f0.entry.js} +2 -2
- package/dist/pine-core/p-0d18171c.system.entry.js +2 -0
- package/dist/pine-core/p-0d18171c.system.entry.js.map +1 -0
- package/dist/pine-core/p-1009009c.entry.js +2 -0
- package/dist/pine-core/p-1009009c.entry.js.map +1 -0
- package/dist/pine-core/{p-8722865f.system.entry.js → p-1773aeac.system.entry.js} +2 -2
- package/dist/pine-core/{p-e2887e78.entry.js → p-1b9d4482.entry.js} +2 -2
- package/dist/pine-core/p-1c32ffb3.entry.js +2 -0
- package/dist/pine-core/p-1c32ffb3.entry.js.map +1 -0
- package/dist/pine-core/{p-7a95a90f.system.entry.js → p-2597bc59.system.entry.js} +2 -2
- package/dist/pine-core/{p-5a709348.entry.js → p-25cb810d.entry.js} +2 -2
- package/dist/pine-core/{p-a1b51557.system.entry.js → p-25cf2860.system.entry.js} +2 -2
- package/dist/pine-core/{p-6f4a6d0b.entry.js → p-265372d3.entry.js} +2 -2
- package/dist/pine-core/p-29b2af94.entry.js +2 -0
- package/dist/pine-core/{p-44087d1c.entry.js.map → p-29b2af94.entry.js.map} +1 -1
- package/dist/pine-core/p-2b102034.system.entry.js +2 -0
- package/dist/pine-core/p-2b102034.system.entry.js.map +1 -0
- package/dist/pine-core/p-2b12bc55.system.entry.js +2 -0
- package/dist/pine-core/{p-297afc49.system.entry.js → p-2b452883.system.entry.js} +2 -2
- package/dist/pine-core/p-2efc646c.system.entry.js +2 -0
- package/dist/pine-core/{p-ecb9edf8.entry.js → p-2fb6f9d5.entry.js} +2 -2
- package/dist/pine-core/p-2fd7f74e.entry.js +2 -0
- package/dist/pine-core/{p-39488f2c.system.entry.js → p-302849cf.system.entry.js} +2 -2
- package/dist/pine-core/{p-51d83489.system.entry.js → p-307f415a.system.entry.js} +2 -2
- package/dist/pine-core/{p-651861ff.entry.js → p-30e8c3ea.entry.js} +2 -2
- package/dist/pine-core/p-30e8c3ea.entry.js.map +1 -0
- package/dist/pine-core/p-31f6fcc1.entry.js +2 -0
- package/dist/pine-core/p-31f6fcc1.entry.js.map +1 -0
- package/dist/pine-core/p-378df5eb.system.entry.js +2 -0
- package/dist/pine-core/p-39648ce2.entry.js +2 -0
- package/dist/pine-core/p-39648ce2.entry.js.map +1 -0
- package/dist/pine-core/p-3b20aa93.system.entry.js +2 -0
- package/dist/pine-core/p-3b20aa93.system.entry.js.map +1 -0
- package/dist/pine-core/{p-50c9e865.entry.js → p-3e7933bf.entry.js} +2 -2
- package/dist/pine-core/{p-11d4036e.entry.js → p-41e2fe3a.entry.js} +2 -2
- package/dist/pine-core/p-449ebe39.system.entry.js +2 -0
- package/dist/pine-core/{p-023d8b71.system.entry.js → p-4534e8cc.system.entry.js} +2 -2
- package/dist/pine-core/{p-52d37cc1.entry.js → p-46820152.entry.js} +2 -2
- package/dist/pine-core/{p-ba187a35.entry.js → p-4b3a8cab.entry.js} +2 -2
- package/dist/pine-core/{p-da367b5e.system.entry.js → p-4c8bebd8.system.entry.js} +2 -2
- package/dist/pine-core/{p-503cab1f.entry.js → p-4dda1edf.entry.js} +2 -2
- package/dist/pine-core/p-4e55730d.entry.js +2 -0
- package/dist/pine-core/p-4e55730d.entry.js.map +1 -0
- package/dist/pine-core/{p-5e8badb9.entry.js → p-559b4ebc.entry.js} +2 -2
- package/dist/pine-core/{p-c13ef6a7.system.entry.js → p-55d06d0a.system.entry.js} +3 -3
- package/dist/pine-core/{p-25190921.entry.js → p-56f6f106.entry.js} +2 -2
- package/dist/pine-core/{p-075eecf9.entry.js → p-5ac7af9e.entry.js} +2 -2
- package/dist/pine-core/p-5cc0244d.system.entry.js +2 -0
- package/dist/pine-core/p-5cc0244d.system.entry.js.map +1 -0
- package/dist/pine-core/{p-dfc5ab34.system.entry.js → p-72d87dc6.system.entry.js} +2 -2
- package/dist/pine-core/{p-b2b1b7a9.system.entry.js → p-73a2e028.system.entry.js} +2 -2
- package/dist/pine-core/{p-4bbf3e31.entry.js → p-74f03e75.entry.js} +2 -2
- package/dist/pine-core/p-786967e8.entry.js +2 -0
- package/dist/pine-core/{p-0de9f8da.system.entry.js → p-7b0517e5.system.entry.js} +2 -2
- package/dist/pine-core/p-7b66bc50.entry.js +3 -0
- package/dist/pine-core/p-7b66bc50.entry.js.map +1 -0
- package/dist/pine-core/p-7eb22880.entry.js +2 -0
- package/dist/pine-core/p-7eb22880.entry.js.map +1 -0
- package/dist/pine-core/{p-464dd476.entry.js → p-8501429f.entry.js} +2 -2
- package/dist/pine-core/p-875d5d5a.system.entry.js +2 -0
- package/dist/pine-core/{p-4deb7b8c.entry.js → p-896e2f1b.entry.js} +2 -2
- package/dist/pine-core/{p-72b05928.system.entry.js → p-8ded79aa.system.entry.js} +2 -2
- package/dist/pine-core/{p-e89cb1f2.system.entry.js → p-8f69dd71.system.entry.js} +2 -2
- package/dist/pine-core/{p-2e19f167.system.entry.js → p-94fe15b0.system.entry.js} +2 -2
- package/dist/pine-core/p-95aee0b1.entry.js +2 -0
- package/dist/pine-core/p-95aee0b1.entry.js.map +1 -0
- package/dist/pine-core/p-96c27dba.entry.js +2 -0
- package/dist/pine-core/p-96c27dba.entry.js.map +1 -0
- package/dist/pine-core/p-B02VgXkx.system.js.map +1 -0
- package/dist/pine-core/{p-Kj_j7PHx.system.js.map → p-B57Bybw-.system.js.map} +1 -1
- package/dist/pine-core/{p-B1fiSdbt.system.js.map → p-BEgEi4w5.system.js.map} +1 -1
- package/dist/pine-core/{p-CJT--ZXC.system.js.map → p-BFiM1S8V.system.js.map} +1 -1
- package/dist/pine-core/{p-_E9ZEzfO.system.js.map → p-BIjeWHX_.system.js.map} +1 -1
- package/dist/pine-core/{p-BVKCNX0X.system.js.map → p-BJhtHwq5.system.js.map} +1 -1
- package/dist/pine-core/{p-EYhpJx2s.system.js.map → p-BJjdD3yf.system.js.map} +1 -1
- package/dist/pine-core/p-BPjnTOEL.system.js +2 -0
- package/dist/pine-core/{p-De9tROL-.system.js.map → p-BPjnTOEL.system.js.map} +1 -1
- package/dist/pine-core/{p-CCQUgOoR.system.js.map → p-BQFgzIQT.system.js.map} +1 -1
- package/dist/pine-core/p-BSkbMuB5.system.js +2 -0
- package/dist/pine-core/{p-BEn3hirk.system.js.map → p-BSkbMuB5.system.js.map} +1 -1
- package/dist/pine-core/{p-BVCWKPy3.js → p-Bf1dou5H.js} +2 -2
- package/dist/pine-core/p-Bf1dou5H.js.map +1 -0
- package/dist/pine-core/p-BigOVPun.system.js.map +1 -0
- package/dist/pine-core/{p-CcXaBX2A.system.js.map → p-BmFGXXkm.system.js.map} +1 -1
- package/dist/pine-core/p-ByzULH8m.system.js.map +1 -0
- package/dist/pine-core/{p-CE6b_LzB.system.js.map → p-C3iAHQC6.system.js.map} +1 -1
- package/dist/pine-core/{p-ACQU83St.system.js.map → p-CCQd5PVN.system.js.map} +1 -1
- package/dist/pine-core/{p-ChslVme6.system.js.map → p-CG2PKUWT.system.js.map} +1 -1
- package/dist/pine-core/{p-CQ8f8GnD.system.js.map → p-CHVzHNgU.system.js.map} +1 -1
- package/dist/pine-core/{p-Dh7jcLgJ.system.js.map → p-COwpA8ab.system.js.map} +1 -1
- package/dist/pine-core/p-CV0Lw9gs.system.js.map +1 -0
- package/dist/pine-core/p-CZqgW7e3.system.js.map +1 -0
- package/dist/pine-core/{p-pQqXEKPh.system.js.map → p-Cc1q-FuD.system.js.map} +1 -1
- package/dist/pine-core/{p-CWdEolqa.system.js.map → p-Cl47ROcT.system.js.map} +1 -1
- package/dist/pine-core/{p-0KTU2Jt-.system.js.map → p-CnPN6prI.system.js.map} +1 -1
- package/dist/pine-core/{p-B1FQkx7R.system.js.map → p-Ctdx1tCG.system.js.map} +1 -1
- package/dist/pine-core/p-CwNRZQss.system.js.map +1 -0
- package/dist/pine-core/{p-B_C-mRjx.system.js → p-Cxvdulqq.system.js} +2 -2
- package/dist/pine-core/p-Cxvdulqq.system.js.map +1 -0
- package/dist/pine-core/p-D3SrjYeb.system.js.map +1 -0
- package/dist/pine-core/p-D4MkIUXU.js +2 -0
- package/dist/pine-core/{p-DrJ5r5Pu.js.map → p-D4MkIUXU.js.map} +1 -1
- package/dist/pine-core/{p-MBv7PsKc.system.js.map → p-D52TGCLt.system.js.map} +1 -1
- package/dist/pine-core/p-D7B3vOdC.system.js.map +1 -0
- package/dist/pine-core/{p-0TIvNV5c.system.js.map → p-D9veIL-g.system.js.map} +1 -1
- package/dist/pine-core/{p-D9_z2w3q.system.js.map → p-DGFR-x7P.system.js.map} +1 -1
- package/dist/pine-core/p-DeR0sSWy.system.js.map +1 -0
- package/dist/pine-core/{p-BRygGju8.system.js.map → p-Df597YUK.system.js.map} +1 -1
- package/dist/pine-core/{p-Df_3qA_L.system.js.map → p-DgE9ds9o.system.js.map} +1 -1
- package/dist/pine-core/{p-CLoi4eKt.system.js.map → p-DmWU0f_O.system.js.map} +1 -1
- package/dist/pine-core/{p-DYb5Y47j.system.js.map → p-Dq7Wu9rr.system.js.map} +1 -1
- package/dist/pine-core/p-Dw7zXw_6.system.js.map +1 -0
- package/dist/pine-core/{p-CpdNWpfd.system.js.map → p-Ek6vvXfI.system.js.map} +1 -1
- package/dist/pine-core/{p-C5Y492i0.system.js.map → p-M-zMP2QX.system.js.map} +1 -1
- package/dist/pine-core/{p-IhWWc2L_.system.js.map → p-WO5h6NYA.system.js.map} +1 -1
- package/dist/pine-core/p-WWWd_vEd.system.js +2 -0
- package/dist/pine-core/p-WWWd_vEd.system.js.map +1 -0
- package/dist/pine-core/{p-D05FrqXr.system.js.map → p-X5M4eshC.system.js.map} +1 -1
- package/dist/pine-core/{p-m6UZWRsP.system.js.map → p-Z5rOSkoA.system.js.map} +1 -1
- package/dist/pine-core/{p-72053224.entry.js → p-a2cb65df.entry.js} +3 -3
- package/dist/pine-core/{p-c8122bea.entry.js → p-a54d6a53.entry.js} +2 -2
- package/dist/pine-core/{p-a04556e4.system.entry.js → p-a5cf0088.system.entry.js} +2 -2
- package/dist/pine-core/p-a645818a.entry.js +2 -0
- package/dist/pine-core/{p-f583e5d4.entry.js → p-a9cfaa1f.entry.js} +2 -2
- package/dist/pine-core/{p-14a52961.system.entry.js → p-aa2782b9.system.entry.js} +2 -2
- package/dist/pine-core/{p-f55b9f90.system.entry.js → p-ab4307c7.system.entry.js} +2 -2
- package/dist/pine-core/{p-349a8869.entry.js → p-af56cb57.entry.js} +2 -2
- package/dist/pine-core/{p-8d7abc83.entry.js → p-b32d34d0.entry.js} +2 -2
- package/dist/pine-core/{p-00616fc9.entry.js → p-b378ca03.entry.js} +2 -2
- package/dist/pine-core/p-b669e1d9.entry.js +2 -0
- package/dist/pine-core/p-b699a14f.system.entry.js +2 -0
- package/dist/pine-core/p-b699a14f.system.entry.js.map +1 -0
- package/dist/pine-core/p-bc2fecd4.system.entry.js +2 -0
- package/dist/pine-core/p-bc2fecd4.system.entry.js.map +1 -0
- package/dist/pine-core/{p-e3fb0bc2.system.entry.js → p-bc637bed.system.entry.js} +2 -2
- package/dist/pine-core/{p-b6ea3332.entry.js → p-be5ef841.entry.js} +2 -2
- package/dist/pine-core/{p-54183d70.system.entry.js → p-c0601420.system.entry.js} +2 -2
- package/dist/pine-core/p-c2d2fe64.system.entry.js +2 -0
- package/dist/pine-core/p-c3f84df8.system.entry.js +2 -0
- package/dist/pine-core/p-c3f84df8.system.entry.js.map +1 -0
- package/dist/pine-core/p-c44d3551.entry.js +2 -0
- package/dist/pine-core/{p-e8d76117.entry.js → p-c55fc47e.entry.js} +2 -2
- package/dist/pine-core/{p-5da82e8c.system.entry.js → p-c63e7909.system.entry.js} +2 -2
- package/dist/pine-core/p-d325287b.entry.js +2 -0
- package/dist/pine-core/p-d325287b.entry.js.map +1 -0
- package/dist/pine-core/p-d52d96b5.system.entry.js +4 -0
- package/dist/pine-core/p-d52d96b5.system.entry.js.map +1 -0
- package/dist/pine-core/{p-884b9ae6.system.entry.js → p-d5c63517.system.entry.js} +2 -2
- package/dist/pine-core/p-d65d252d.entry.js +2 -0
- package/dist/pine-core/p-d65d252d.entry.js.map +1 -0
- package/dist/pine-core/p-db12273e.system.entry.js +2 -0
- package/dist/pine-core/{p-92c52409.system.entry.js → p-dbe41087.system.entry.js} +2 -2
- package/dist/pine-core/{p-deb8a499.system.entry.js → p-e03b7f4a.system.entry.js} +2 -2
- package/dist/pine-core/{p-6db1e029.system.entry.js → p-ee583234.system.entry.js} +2 -2
- package/dist/pine-core/{p-0066d249.entry.js → p-f5d78141.entry.js} +2 -2
- package/dist/pine-core/p-f61ee383.system.entry.js +2 -0
- package/dist/pine-core/p-f61ee383.system.entry.js.map +1 -0
- package/dist/pine-core/{p-98fe56d9.entry.js → p-f6b269ac.entry.js} +2 -2
- package/dist/pine-core/p-f70aef6e.system.entry.js +2 -0
- package/dist/pine-core/p-f70aef6e.system.entry.js.map +1 -0
- package/dist/pine-core/{p-52af1890.system.entry.js → p-f911dde3.system.entry.js} +2 -2
- package/dist/pine-core/{p-7cb4f0de.entry.js → p-fd3d548f.entry.js} +2 -2
- package/dist/pine-core/{p-ac37cf0d.entry.js → p-fddf82f8.entry.js} +2 -2
- package/dist/pine-core/p-fdf22be1.system.entry.js +2 -0
- package/dist/pine-core/p-fdf22be1.system.entry.js.map +1 -0
- package/dist/pine-core/p-fe7ece91.system.entry.js +2 -0
- package/dist/pine-core/p-fe7ece91.system.entry.js.map +1 -0
- package/dist/pine-core/{p-DHmJZxQk.system.js.map → p-iM8w34Dq.system.js.map} +1 -1
- package/dist/pine-core/{p-2kXtbFXu.system.js.map → p-iazk4jjL.system.js.map} +1 -1
- package/dist/pine-core/{p-CqzGa2j0.system.js.map → p-k9JOparb.system.js.map} +1 -1
- package/dist/pine-core/{p-CgyVIfOY.system.js.map → p-kbAzjMDU.system.js.map} +1 -1
- package/dist/pine-core/{p-B7S-9dbT.system.js.map → p-kcOuXqWo.system.js.map} +1 -1
- package/dist/pine-core/{p-IG5YumI3.system.js.map → p-nawkAoxk.system.js.map} +1 -1
- package/dist/pine-core/p-oDk-2Jyq.system.js.map +1 -0
- package/dist/pine-core/p-wlxYjeBe.system.js.map +1 -0
- package/dist/pine-core/{p-CqK-uhv8.system.js.map → p-yaM1kuaC.system.js.map} +1 -1
- package/dist/pine-core/pds-box.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-button.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-combobox.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-dropdown-menu-separator.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-filter.entry.esm.js.map +1 -0
- package/dist/pine-core/pds-filters.entry.esm.js.map +1 -0
- package/dist/pine-core/pds-modal-content.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-modal.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-tab.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-tabs.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-textarea.entry.esm.js.map +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/pine-core/pine-core.js +1 -1
- package/dist/types/components/pds-box/pds-box.d.ts +315 -0
- package/dist/types/components/pds-button/pds-button.d.ts +5 -1
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +28 -3
- package/dist/types/components/pds-filters/pds-filter/filter-interface.d.ts +19 -0
- package/dist/types/components/pds-filters/pds-filter/pds-filter.d.ts +133 -0
- package/dist/types/components/pds-filters/pds-filters.d.ts +11 -0
- package/dist/types/components/pds-modal/pds-modal-content/pds-modal-content.d.ts +18 -1
- package/dist/types/components/pds-modal/pds-modal.d.ts +5 -0
- package/dist/types/components/pds-modal/test/mock-pds-modal.d.ts +5 -0
- package/dist/types/components/pds-tabs/pds-tabs.d.ts +1 -0
- package/dist/types/components/pds-textarea/pds-textarea.d.ts +20 -0
- package/dist/types/components.d.ts +793 -4
- package/hydrate/index.js +1381 -112
- package/hydrate/index.mjs +1381 -112
- package/package.json +2 -2
- package/dist/cjs/index-g-uSeICs.js.map +0 -1
- package/dist/esm/index-BVCWKPy3.js.map +0 -1
- package/dist/esm-es5/index-BVCWKPy3.js.map +0 -1
- package/dist/esm-es5/index-DrJ5r5Pu.js +0 -2
- package/dist/pine-core/p-007b61e9.system.entry.js +0 -2
- package/dist/pine-core/p-007b61e9.system.entry.js.map +0 -1
- package/dist/pine-core/p-0485aa93.system.entry.js +0 -2
- package/dist/pine-core/p-0485aa93.system.entry.js.map +0 -1
- package/dist/pine-core/p-051ff780.system.entry.js +0 -2
- package/dist/pine-core/p-051ff780.system.entry.js.map +0 -1
- package/dist/pine-core/p-2186e5d4.system.entry.js +0 -2
- package/dist/pine-core/p-2186e5d4.system.entry.js.map +0 -1
- package/dist/pine-core/p-232a2043.entry.js +0 -2
- package/dist/pine-core/p-44087d1c.entry.js +0 -2
- package/dist/pine-core/p-47670150.entry.js +0 -3
- package/dist/pine-core/p-47670150.entry.js.map +0 -1
- package/dist/pine-core/p-54061a33.entry.js +0 -2
- package/dist/pine-core/p-54061a33.entry.js.map +0 -1
- package/dist/pine-core/p-5708f95a.entry.js +0 -2
- package/dist/pine-core/p-651861ff.entry.js.map +0 -1
- package/dist/pine-core/p-66b10d29.entry.js +0 -2
- package/dist/pine-core/p-68b5665a.entry.js +0 -2
- package/dist/pine-core/p-68b5665a.entry.js.map +0 -1
- package/dist/pine-core/p-7004d1ea.system.entry.js +0 -2
- package/dist/pine-core/p-71169b66.system.entry.js +0 -2
- package/dist/pine-core/p-71169b66.system.entry.js.map +0 -1
- package/dist/pine-core/p-73158adf.system.entry.js +0 -2
- package/dist/pine-core/p-77336705.entry.js +0 -2
- package/dist/pine-core/p-77336705.entry.js.map +0 -1
- package/dist/pine-core/p-8ab7f0d7.system.entry.js +0 -4
- package/dist/pine-core/p-8ab7f0d7.system.entry.js.map +0 -1
- package/dist/pine-core/p-96a89cd5.system.entry.js +0 -2
- package/dist/pine-core/p-96a89cd5.system.entry.js.map +0 -1
- package/dist/pine-core/p-BEn3hirk.system.js +0 -2
- package/dist/pine-core/p-BGbUqsWH.system.js +0 -2
- package/dist/pine-core/p-BGbUqsWH.system.js.map +0 -1
- package/dist/pine-core/p-BKFboaI5.system.js.map +0 -1
- package/dist/pine-core/p-BVCWKPy3.js.map +0 -1
- package/dist/pine-core/p-B_C-mRjx.system.js.map +0 -1
- package/dist/pine-core/p-Bv5PJxD8.system.js.map +0 -1
- package/dist/pine-core/p-CD_nPb2F.system.js.map +0 -1
- package/dist/pine-core/p-Cmzqpibo.system.js.map +0 -1
- package/dist/pine-core/p-DJekRkSL.system.js.map +0 -1
- package/dist/pine-core/p-DNYl_6t_.system.js.map +0 -1
- package/dist/pine-core/p-DXuK7cEc.system.js.map +0 -1
- package/dist/pine-core/p-De9tROL-.system.js +0 -2
- package/dist/pine-core/p-DrJ5r5Pu.js +0 -2
- package/dist/pine-core/p-Dt10r3RZ.system.js.map +0 -1
- package/dist/pine-core/p-IIl2cTlj.system.js.map +0 -1
- package/dist/pine-core/p-UsEwlBJ0.system.js.map +0 -1
- package/dist/pine-core/p-a24c46e4.entry.js +0 -2
- package/dist/pine-core/p-a24c46e4.entry.js.map +0 -1
- package/dist/pine-core/p-a54f1d9e.entry.js +0 -2
- package/dist/pine-core/p-a54f1d9e.entry.js.map +0 -1
- package/dist/pine-core/p-aa645f28.system.entry.js +0 -2
- package/dist/pine-core/p-aa645f28.system.entry.js.map +0 -1
- package/dist/pine-core/p-bb8ef74a.system.entry.js +0 -2
- package/dist/pine-core/p-be939cb0.entry.js +0 -2
- package/dist/pine-core/p-c1099665.system.entry.js +0 -2
- package/dist/pine-core/p-c2ffb466.system.entry.js +0 -2
- package/dist/pine-core/p-c4d6fe50.system.entry.js +0 -2
- package/dist/pine-core/p-c4d6fe50.system.entry.js.map +0 -1
- package/dist/pine-core/p-c6badcf8.entry.js +0 -2
- package/dist/pine-core/p-c6badcf8.entry.js.map +0 -1
- package/dist/pine-core/p-cd785026.system.entry.js +0 -2
- package/dist/pine-core/p-d714f68f.system.entry.js +0 -2
- package/dist/pine-core/p-d714f68f.system.entry.js.map +0 -1
- package/dist/pine-core/p-e5ca5b8e.entry.js +0 -2
- package/dist/pine-core/p-e5ca5b8e.entry.js.map +0 -1
- package/dist/pine-core/p-e65a7d1c.system.entry.js +0 -2
- package/dist/pine-core/p-efa788ea.entry.js +0 -2
- package/dist/pine-core/p-f880adaa.entry.js +0 -2
- package/dist/pine-core/p-fb4058e6.entry.js +0 -2
- package/dist/pine-core/p-fb4058e6.entry.js.map +0 -1
- /package/dist/pine-core/{p-fd091234.system.entry.js.map → p-0075bbbe.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-66b10d29.entry.js.map → p-07e129db.entry.js.map} +0 -0
- /package/dist/pine-core/{p-8999b63d.system.entry.js.map → p-0975b749.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-02326ac3.entry.js.map → p-0befa8f0.entry.js.map} +0 -0
- /package/dist/pine-core/{p-8722865f.system.entry.js.map → p-1773aeac.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e2887e78.entry.js.map → p-1b9d4482.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7a95a90f.system.entry.js.map → p-2597bc59.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5a709348.entry.js.map → p-25cb810d.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a1b51557.system.entry.js.map → p-25cf2860.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-6f4a6d0b.entry.js.map → p-265372d3.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c2ffb466.system.entry.js.map → p-2b12bc55.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-297afc49.system.entry.js.map → p-2b452883.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-cd785026.system.entry.js.map → p-2efc646c.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-ecb9edf8.entry.js.map → p-2fb6f9d5.entry.js.map} +0 -0
- /package/dist/pine-core/{p-efa788ea.entry.js.map → p-2fd7f74e.entry.js.map} +0 -0
- /package/dist/pine-core/{p-39488f2c.system.entry.js.map → p-302849cf.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-51d83489.system.entry.js.map → p-307f415a.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-bb8ef74a.system.entry.js.map → p-378df5eb.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-50c9e865.entry.js.map → p-3e7933bf.entry.js.map} +0 -0
- /package/dist/pine-core/{p-11d4036e.entry.js.map → p-41e2fe3a.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7004d1ea.system.entry.js.map → p-449ebe39.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-023d8b71.system.entry.js.map → p-4534e8cc.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-52d37cc1.entry.js.map → p-46820152.entry.js.map} +0 -0
- /package/dist/pine-core/{p-ba187a35.entry.js.map → p-4b3a8cab.entry.js.map} +0 -0
- /package/dist/pine-core/{p-da367b5e.system.entry.js.map → p-4c8bebd8.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-503cab1f.entry.js.map → p-4dda1edf.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5e8badb9.entry.js.map → p-559b4ebc.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c13ef6a7.system.entry.js.map → p-55d06d0a.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-25190921.entry.js.map → p-56f6f106.entry.js.map} +0 -0
- /package/dist/pine-core/{p-075eecf9.entry.js.map → p-5ac7af9e.entry.js.map} +0 -0
- /package/dist/pine-core/{p-dfc5ab34.system.entry.js.map → p-72d87dc6.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b2b1b7a9.system.entry.js.map → p-73a2e028.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-4bbf3e31.entry.js.map → p-74f03e75.entry.js.map} +0 -0
- /package/dist/pine-core/{p-be939cb0.entry.js.map → p-786967e8.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0de9f8da.system.entry.js.map → p-7b0517e5.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-464dd476.entry.js.map → p-8501429f.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e65a7d1c.system.entry.js.map → p-875d5d5a.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-4deb7b8c.entry.js.map → p-896e2f1b.entry.js.map} +0 -0
- /package/dist/pine-core/{p-72b05928.system.entry.js.map → p-8ded79aa.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e89cb1f2.system.entry.js.map → p-8f69dd71.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-2e19f167.system.entry.js.map → p-94fe15b0.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-72053224.entry.js.map → p-a2cb65df.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c8122bea.entry.js.map → p-a54d6a53.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a04556e4.system.entry.js.map → p-a5cf0088.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f880adaa.entry.js.map → p-a645818a.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f583e5d4.entry.js.map → p-a9cfaa1f.entry.js.map} +0 -0
- /package/dist/pine-core/{p-14a52961.system.entry.js.map → p-aa2782b9.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f55b9f90.system.entry.js.map → p-ab4307c7.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-349a8869.entry.js.map → p-af56cb57.entry.js.map} +0 -0
- /package/dist/pine-core/{p-8d7abc83.entry.js.map → p-b32d34d0.entry.js.map} +0 -0
- /package/dist/pine-core/{p-00616fc9.entry.js.map → p-b378ca03.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5708f95a.entry.js.map → p-b669e1d9.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e3fb0bc2.system.entry.js.map → p-bc637bed.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b6ea3332.entry.js.map → p-be5ef841.entry.js.map} +0 -0
- /package/dist/pine-core/{p-54183d70.system.entry.js.map → p-c0601420.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-73158adf.system.entry.js.map → p-c2d2fe64.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-232a2043.entry.js.map → p-c44d3551.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e8d76117.entry.js.map → p-c55fc47e.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5da82e8c.system.entry.js.map → p-c63e7909.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-884b9ae6.system.entry.js.map → p-d5c63517.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c1099665.system.entry.js.map → p-db12273e.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-92c52409.system.entry.js.map → p-dbe41087.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-deb8a499.system.entry.js.map → p-e03b7f4a.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-6db1e029.system.entry.js.map → p-ee583234.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0066d249.entry.js.map → p-f5d78141.entry.js.map} +0 -0
- /package/dist/pine-core/{p-98fe56d9.entry.js.map → p-f6b269ac.entry.js.map} +0 -0
- /package/dist/pine-core/{p-52af1890.system.entry.js.map → p-f911dde3.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7cb4f0de.entry.js.map → p-fd3d548f.entry.js.map} +0 -0
- /package/dist/pine-core/{p-ac37cf0d.entry.js.map → p-fddf82f8.entry.js.map} +0 -0
package/hydrate/index.js
CHANGED
|
@@ -2450,6 +2450,9 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
|
2450
2450
|
}
|
|
2451
2451
|
};
|
|
2452
2452
|
var getHostListenerTarget = (doc, elm, flags) => {
|
|
2453
|
+
if (flags & 4 /* TargetDocument */) {
|
|
2454
|
+
return doc;
|
|
2455
|
+
}
|
|
2453
2456
|
if (flags & 8 /* TargetWindow */) {
|
|
2454
2457
|
return win;
|
|
2455
2458
|
}
|
|
@@ -3073,7 +3076,7 @@ var registerHost = (elm, cmpMeta) => {
|
|
|
3073
3076
|
};
|
|
3074
3077
|
var styles = /* @__PURE__ */ new Map();
|
|
3075
3078
|
|
|
3076
|
-
const pdsModalCss$1 = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:1000}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:1001}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:calc(100vh - (5vh + 96px))
|
|
3079
|
+
const pdsModalCss$1 = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:1000}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:1001}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}";
|
|
3077
3080
|
|
|
3078
3081
|
/**
|
|
3079
3082
|
* Mock PdsModal component for testing purposes
|
|
@@ -3089,7 +3092,11 @@ class MockPdsModal {
|
|
|
3089
3092
|
* The size of the modal
|
|
3090
3093
|
*/
|
|
3091
3094
|
this.size = 'md';
|
|
3092
|
-
|
|
3095
|
+
/**
|
|
3096
|
+
* Whether the modal content should be scrollable
|
|
3097
|
+
* @default true
|
|
3098
|
+
*/
|
|
3099
|
+
this.scrollable = true;
|
|
3093
3100
|
/**
|
|
3094
3101
|
* Whether the modal can be dismissed by clicking the backdrop
|
|
3095
3102
|
*/
|
|
@@ -3143,13 +3150,13 @@ class MockPdsModal {
|
|
|
3143
3150
|
const modalClasses = {
|
|
3144
3151
|
'pds-modal': true,
|
|
3145
3152
|
[`pds-modal--${this.size}`]: true,
|
|
3146
|
-
'pds-modal--scrollable':
|
|
3153
|
+
'pds-modal--scrollable': this.scrollable
|
|
3147
3154
|
};
|
|
3148
3155
|
const backdropClasses = {
|
|
3149
3156
|
'pds-modal__backdrop': true,
|
|
3150
3157
|
'open': this.open,
|
|
3151
3158
|
};
|
|
3152
|
-
return (hAsync("div", { key: '
|
|
3159
|
+
return (hAsync("div", { key: 'f8f3e1da60eb943d8f857755e2dbd2c08264f2cf', class: backdropClasses }, hAsync("div", { key: '0f7454db09265e84962a24cf412ca77b4005a5fd', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null }, hAsync("div", { key: '78e9988c584c6c4d0947722468f730f537acb933', class: "pds-modal__header" }, hAsync("slot", { key: '40f16731657da0112b0ef1954101304e9a3a8bdc', name: "header" })), hAsync("div", { key: 'f5bd52f05b1d34d747f34e7d1a28aec90019630a', class: "pds-modal-content" }, hAsync("slot", { key: 'bf8812eb47a747d897889a91a997b5fd5b57c3d9' })), hAsync("div", { key: '70e9b90cce8108b71afe434610b09624d9b4037a', class: "pds-modal__footer" }, hAsync("slot", { key: '283e94934656711f12b9d75e29520ee8d04bb5d8', name: "footer" })))));
|
|
3153
3160
|
}
|
|
3154
3161
|
get el() { return getElement(this); }
|
|
3155
3162
|
static get style() { return pdsModalCss$1; }
|
|
@@ -3159,6 +3166,7 @@ class MockPdsModal {
|
|
|
3159
3166
|
"$members$": {
|
|
3160
3167
|
"componentId": [1, "component-id"],
|
|
3161
3168
|
"size": [1],
|
|
3169
|
+
"scrollable": [4],
|
|
3162
3170
|
"backdropDismiss": [4, "backdrop-dismiss"],
|
|
3163
3171
|
"open": [1028],
|
|
3164
3172
|
"showModal": [64],
|
|
@@ -3172,6 +3180,7 @@ class MockPdsModal {
|
|
|
3172
3180
|
|
|
3173
3181
|
/* pds-icons v9.8.0, ES Modules */
|
|
3174
3182
|
|
|
3183
|
+
const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
|
|
3175
3184
|
const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
|
|
3176
3185
|
const checkCircleFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1m5.207 8.707a1 1 0 0 0-1.414-1.414L10.5 13.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0z'/></svg>";
|
|
3177
3186
|
const copy = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M11.162 1h7.676c.528 0 .982 0 1.357.03.395.033.789.104 1.167.297a3 3 0 0 1 1.311 1.311c.193.378.264.772.296 1.167.031.375.031.83.031 1.356v7.678c0 .527 0 .981-.03 1.356-.033.395-.104.789-.297 1.167a3 3 0 0 1-1.311 1.311c-.378.193-.772.264-1.167.296-.375.031-.83.031-1.357.031H17v1.838c0 .528 0 .982-.03 1.357-.033.395-.104.789-.297 1.167a3 3 0 0 1-1.311 1.311c-.378.193-.772.264-1.167.296-.375.031-.83.031-1.356.031H5.16c-.527 0-.981 0-1.356-.03-.395-.033-.789-.104-1.167-.297a3 3 0 0 1-1.311-1.311c-.193-.378-.264-.772-.296-1.167C1 19.82 1 19.365 1 18.838v-7.677c0-.527 0-.981.03-1.356.033-.395.104-.789.297-1.167a3 3 0 0 1 1.311-1.311c.378-.193.772-.264 1.167-.296C4.18 7 4.635 7 5.161 7H7V5.161c0-.527 0-.981.03-1.356.033-.395.104-.789.297-1.167a3 3 0 0 1 1.311-1.311c.378-.193.772-.264 1.167-.296C10.18 1 10.635 1 11.162 1M5.2 9c-.577 0-.949 0-1.232.024-.272.022-.373.06-.422.085a1 1 0 0 0-.437.437c-.025.05-.063.15-.085.422C3 10.25 3 10.623 3 11.2v7.6c0 .577 0 .949.024 1.232.022.272.06.373.085.422a1 1 0 0 0 .437.437c.05.025.15.063.422.085C4.25 21 4.623 21 5.2 21h7.6c.577 0 .949 0 1.232-.024.272-.022.373-.06.422-.085a1 1 0 0 0 .437-.437c.025-.05.063-.15.085-.422C15 19.75 15 19.377 15 18.8v-7.6c0-.577 0-.949-.024-1.232-.022-.272-.06-.373-.085-.422a1 1 0 0 0-.437-.437c-.05-.025-.15-.063-.422-.085C13.75 9 13.377 9 12.8 9zM17 15v-3.838c0-.528 0-.982-.03-1.357-.033-.395-.104-.789-.297-1.167a3 3 0 0 0-1.311-1.311c-.378-.193-.772-.264-1.167-.296A18 18 0 0 0 12.838 7H9V5.2c0-.577 0-.949.024-1.232.022-.272.06-.373.085-.422a1 1 0 0 1 .437-.437c.05-.025.15-.063.422-.085C10.25 3 10.623 3 11.2 3h7.6c.577 0 .949 0 1.232.024.272.022.373.06.422.085a1 1 0 0 1 .437.437c.025.05.063.15.085.422C21 4.25 21 4.623 21 5.2v7.6c0 .577 0 .949-.024 1.232-.022.272-.06.373-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085C19.75 15 19.377 15 18.8 15z'/></svg>";
|
|
@@ -3181,6 +3190,7 @@ const enlarge = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
|
|
|
3181
3190
|
const handle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path d='M2.833 7.5c-.46 0-.833.448-.833 1s.373 1 .833 1h18.334c.46 0 .833-.448.833-1s-.373-1-.833-1zM2.833 14.5c-.46 0-.833.448-.833 1s.373 1 .833 1h18.334c.46 0 .833-.448.833-1s-.373-1-.833-1z'/></svg>";
|
|
3182
3191
|
const launch = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M14 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V5.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L18.586 4H15a1 1 0 0 1-1-1M7.759 4H10a1 1 0 1 1 0 2H7.8c-.857 0-1.439 0-1.889.038-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C4 8.361 4 8.943 4 9.8v6.4c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C6.361 20 6.943 20 7.8 20h6.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889V14a1 1 0 1 1 2 0v2.241c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H7.758c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564C2 17.71 2 17.046 2 16.242V9.758c0-.805 0-1.47.044-2.01.046-.563.145-1.08.392-1.565a4 4 0 0 1 1.748-1.748c.485-.247 1.002-.346 1.564-.392C6.29 4 6.954 4 7.758 4'/></svg>";
|
|
3183
3192
|
const remove = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 5.293a1 1 0 0 1 1.414 0L12 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 0-1.414'/></svg>";
|
|
3193
|
+
const trash = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M11.162 1h1.676c.528 0 .982 0 1.357.03.395.033.789.104 1.167.297a3 3 0 0 1 1.311 1.311c.193.378.264.772.296 1.167.028.336.03.736.031 1.195h4a1 1 0 1 1 0 2h-1v10.241c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H9.758c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564C4 18.71 4 18.046 4 17.242V7H3a1 1 0 1 1 0-2h4c0-.459.003-.86.03-1.195.033-.395.104-.789.297-1.167a3 3 0 0 1 1.311-1.311c.378-.193.772-.264 1.167-.296C10.18 1 10.635 1 11.162 1M6 7v10.2c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C8.361 21 8.943 21 9.8 21h4.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889V7zm9-2H9c0-.465.004-.783.024-1.032.022-.272.06-.373.085-.422a1 1 0 0 1 .437-.437c.05-.025.15-.063.422-.085C10.25 3 10.623 3 11.2 3h1.6c.577 0 .949 0 1.232.024.272.022.373.06.422.085a1 1 0 0 1 .437.437c.025.05.063.15.085.422.02.249.023.567.024 1.032m-5 5.5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1'/></svg>";
|
|
3184
3194
|
const upSmall = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M11.293 8.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 10.414l-5.293 5.293a1 1 0 0 1-1.414-1.414z'/></svg>";
|
|
3185
3195
|
const userFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M8.786 14.5h6.428c.727 0 1.222 0 1.654.076a5 5 0 0 1 4.056 4.056c.076.432.076.927.076 1.654 0 .158.005.318-.023.474a1.5 1.5 0 0 1-1.216 1.217c-.137.024-.28.023-.351.023Q12 21.961 4.59 22c-.07 0-.214.001-.35-.023a1.5 1.5 0 0 1-1.217-1.216c-.028-.157-.023-.317-.023-.475 0-.727 0-1.222.076-1.654a5 5 0 0 1 4.056-4.056c.432-.076.927-.076 1.654-.076M6.5 7.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0'/></svg>";
|
|
3186
3196
|
|
|
@@ -3488,7 +3498,7 @@ const setColor = (color, customColors) => {
|
|
|
3488
3498
|
};
|
|
3489
3499
|
};
|
|
3490
3500
|
|
|
3491
|
-
const pdsBoxCss = "pds-box{--border-width-default:var(--pine-border-width-thin);--color-background-box:inherit;--color-border-box:inherit;display:block}[class*=pds-box]{background-color:var(--color-background-box);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex}[class*=pds-box][min-height]{min-height:var(--sizing-min-height-box)}[class*=pds-box][min-width]{min-width:var(--sizing-min-width-box)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-xxl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-xxl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-xxl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-xxl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-xxl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-row>.pds-box[class*=pds-box-]{-ms-flex-preferred-size:auto;flex-basis:auto}.pds-box--auto{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--color-border-box, var(--pine-color-grey-300));border-style:solid;border-width:var(--border-width-default)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-dimension-2xs)}.pds-border-radius-sm{border-radius:var(--pine-dimension-xs)}.pds-border-radius-md{border-radius:var(--pine-dimension-125)}.pds-border-radius-lg{border-radius:var(--pine-dimension-sm)}.pds-border-radius-circle{border-radius:var(--pine-border-radius-full)}.pds-shadow-050{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-100{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-150{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-200{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-shadow-300{-webkit-box-shadow:var(--pine-box-shadow-300);box-shadow:var(--pine-box-shadow-300)}.pds-shadow-400{-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400)}.pds-shadow-500{-webkit-box-shadow:var(--pine-box-shadow-500);box-shadow:var(--pine-box-shadow-500)}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-md{gap:var(--pine-dimension-md)}.pds-box-gap-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xxl{gap:var(--pine-dimension-2xl)}.pds-margin-block-start-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-block-start-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-block-start-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-block-start-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-block-start-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-block-start-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-block-start-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-start-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-start-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-start-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-start-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-start-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-start-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-inline-end-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-inline-end-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-inline-end-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-inline-end-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-inline-end-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-inline-end-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-inline-end-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-end-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-end-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-end-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-end-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-end-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-end-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-end-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-xs{padding:var(--pine-dimension-xs)}.pds-padding-sm{padding:var(--pine-dimension-sm)}.pds-padding-md{padding:var(--pine-dimension-md)}.pds-padding-lg{padding:var(--pine-dimension-lg)}.pds-padding-xl{padding:var(--pine-dimension-xl)}.pds-padding-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-start-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-start-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-start-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-start-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-start-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-start-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-start-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-block-end-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-block-end-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-block-end-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-block-end-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-block-end-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-block-end-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-block-end-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-start-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-start-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-start-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-start-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-start-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-start-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-start-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-inline-end-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-inline-end-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-inline-end-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-inline-end-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-inline-end-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-inline-end-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-inline-end-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}.pds-box-display-block{display:block}.pds-box-display-inline-block{display:inline-block}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-box--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}@media (max-width: 575px){.pds-justify-content-xs-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-xs-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-xs-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-xs-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-xs-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-xs-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 576px){.pds-justify-content-sm-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-sm-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-sm-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-sm-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-sm-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-sm-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 768px){.pds-justify-content-md-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-md-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-md-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-md-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-md-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-md-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 992px){.pds-justify-content-lg-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-lg-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-lg-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-lg-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-lg-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-lg-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 1200px){.pds-justify-content-xl-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-xl-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-xl-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-xl-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-xl-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-xl-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}@media (max-width: 575px){.pds-align-items-xs-start{-ms-flex-align:start;align-items:start}.pds-align-items-xs-center{-ms-flex-align:center;align-items:center}.pds-align-items-xs-end{-ms-flex-align:end;align-items:end}.pds-align-items-xs-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-xs-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 576px){.pds-align-items-sm-start{-ms-flex-align:start;align-items:start}.pds-align-items-sm-center{-ms-flex-align:center;align-items:center}.pds-align-items-sm-end{-ms-flex-align:end;align-items:end}.pds-align-items-sm-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-sm-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 768px){.pds-align-items-md-start{-ms-flex-align:start;align-items:start}.pds-align-items-md-center{-ms-flex-align:center;align-items:center}.pds-align-items-md-end{-ms-flex-align:end;align-items:end}.pds-align-items-md-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-md-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 992px){.pds-align-items-lg-start{-ms-flex-align:start;align-items:start}.pds-align-items-lg-center{-ms-flex-align:center;align-items:center}.pds-align-items-lg-end{-ms-flex-align:end;align-items:end}.pds-align-items-lg-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-lg-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 1200px){.pds-align-items-xl-start{-ms-flex-align:start;align-items:start}.pds-align-items-xl-center{-ms-flex-align:center;align-items:center}.pds-align-items-xl-end{-ms-flex-align:end;align-items:end}.pds-align-items-xl-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-xl-stretch{-ms-flex-align:stretch;align-items:stretch}}.pds-align-self-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-stretch{-ms-flex-item-align:stretch;align-self:stretch}@media (max-width: 575px){.pds-align-self-xs-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-xs-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-xs-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-xs-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-xs-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 576px){.pds-align-self-sm-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-sm-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-sm-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-sm-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-sm-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 768px){.pds-align-self-md-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-md-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-md-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-md-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-md-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 992px){.pds-align-self-lg-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-lg-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-lg-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-lg-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-lg-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1200px){.pds-align-self-xl-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-xl-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-xl-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-xl-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-xl-stretch{-ms-flex-item-align:stretch;align-self:stretch}}";
|
|
3501
|
+
const pdsBoxCss = "pds-box{--border-width-default:var(--pine-border-width-thin);--color-background-box:inherit;--color-border-box:inherit;display:block}[class*=pds-box]{background-color:var(--color-background-box);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex}[class*=pds-box][min-height]{min-height:var(--sizing-min-height-box)}[class*=pds-box][min-width]{min-width:var(--sizing-min-width-box)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-xxl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-xxl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-xxl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-xxl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-xxl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-row>.pds-box[class*=pds-box-]{-ms-flex-preferred-size:auto;flex-basis:auto}.pds-box--auto{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--color-border-box, var(--pine-color-grey-300));border-style:solid;border-width:var(--border-width-default)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-dimension-2xs)}.pds-border-radius-sm{border-radius:var(--pine-dimension-xs)}.pds-border-radius-md{border-radius:var(--pine-dimension-125)}.pds-border-radius-lg{border-radius:var(--pine-dimension-sm)}.pds-border-radius-circle{border-radius:var(--pine-border-radius-full)}.pds-shadow-050{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-100{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-150{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-200{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-shadow-300{-webkit-box-shadow:var(--pine-box-shadow-300);box-shadow:var(--pine-box-shadow-300)}.pds-shadow-400{-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400)}.pds-shadow-500{-webkit-box-shadow:var(--pine-box-shadow-500);box-shadow:var(--pine-box-shadow-500)}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-md{gap:var(--pine-dimension-md)}.pds-box-gap-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xxl{gap:var(--pine-dimension-2xl)}.pds-margin-block-start-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-block-start-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-block-start-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-block-start-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-block-start-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-block-start-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-block-start-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-start-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-start-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-start-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-start-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-start-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-start-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-inline-end-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-inline-end-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-inline-end-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-inline-end-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-inline-end-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-inline-end-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-inline-end-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-end-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-end-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-end-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-end-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-end-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-end-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-end-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-xs{padding:var(--pine-dimension-xs)}.pds-padding-sm{padding:var(--pine-dimension-sm)}.pds-padding-md{padding:var(--pine-dimension-md)}.pds-padding-lg{padding:var(--pine-dimension-lg)}.pds-padding-xl{padding:var(--pine-dimension-xl)}.pds-padding-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-start-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-start-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-start-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-start-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-start-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-start-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-start-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-block-end-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-block-end-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-block-end-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-block-end-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-block-end-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-block-end-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-block-end-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-start-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-start-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-start-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-start-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-start-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-start-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-start-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-inline-end-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-inline-end-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-inline-end-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-inline-end-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-inline-end-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-inline-end-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-inline-end-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}.pds-box-display-block{display:block}.pds-box-display-inline-block{display:inline-block}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-box--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}@media (max-width: 575px){.pds-justify-content-xs-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-xs-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-xs-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-xs-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-xs-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-xs-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 576px){.pds-justify-content-sm-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-sm-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-sm-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-sm-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-sm-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-sm-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 768px){.pds-justify-content-md-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-md-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-md-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-md-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-md-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-md-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 992px){.pds-justify-content-lg-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-lg-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-lg-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-lg-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-lg-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-lg-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 1200px){.pds-justify-content-xl-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-xl-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-xl-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-xl-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-xl-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-xl-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}@media (max-width: 575px){.pds-align-items-xs-start{-ms-flex-align:start;align-items:start}.pds-align-items-xs-center{-ms-flex-align:center;align-items:center}.pds-align-items-xs-end{-ms-flex-align:end;align-items:end}.pds-align-items-xs-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-xs-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 576px){.pds-align-items-sm-start{-ms-flex-align:start;align-items:start}.pds-align-items-sm-center{-ms-flex-align:center;align-items:center}.pds-align-items-sm-end{-ms-flex-align:end;align-items:end}.pds-align-items-sm-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-sm-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 768px){.pds-align-items-md-start{-ms-flex-align:start;align-items:start}.pds-align-items-md-center{-ms-flex-align:center;align-items:center}.pds-align-items-md-end{-ms-flex-align:end;align-items:end}.pds-align-items-md-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-md-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 992px){.pds-align-items-lg-start{-ms-flex-align:start;align-items:start}.pds-align-items-lg-center{-ms-flex-align:center;align-items:center}.pds-align-items-lg-end{-ms-flex-align:end;align-items:end}.pds-align-items-lg-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-lg-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 1200px){.pds-align-items-xl-start{-ms-flex-align:start;align-items:start}.pds-align-items-xl-center{-ms-flex-align:center;align-items:center}.pds-align-items-xl-end{-ms-flex-align:end;align-items:end}.pds-align-items-xl-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-xl-stretch{-ms-flex-align:stretch;align-items:stretch}}.pds-align-self-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-stretch{-ms-flex-item-align:stretch;align-self:stretch}@media (max-width: 575px){.pds-align-self-xs-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-xs-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-xs-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-xs-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-xs-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 576px){.pds-align-self-sm-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-sm-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-sm-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-sm-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-sm-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 768px){.pds-align-self-md-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-md-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-md-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-md-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-md-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 992px){.pds-align-self-lg-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-lg-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-lg-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-lg-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-lg-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1200px){.pds-align-self-xl-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-xl-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-xl-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-xl-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-xl-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (max-width: 575px){.pds-box--wrap-xs{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (min-width: 576px){.pds-box--wrap-sm{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (min-width: 768px){.pds-box--wrap-md{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (min-width: 992px){.pds-box--wrap-lg{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (min-width: 1200px){.pds-box--wrap-xl{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (max-width: 575px){.pds-box--auto-xs{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (min-width: 576px){.pds-box--auto-sm{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (min-width: 768px){.pds-box--auto-md{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (min-width: 992px){.pds-box--auto-lg{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (min-width: 1200px){.pds-box--auto-xl{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (max-width: 575px){.pds-box--fit-xs{max-width:100%;min-width:100%;width:100%}}@media (min-width: 576px){.pds-box--fit-sm{max-width:100%;min-width:100%;width:100%}}@media (min-width: 768px){.pds-box--fit-md{max-width:100%;min-width:100%;width:100%}}@media (min-width: 992px){.pds-box--fit-lg{max-width:100%;min-width:100%;width:100%}}@media (min-width: 1200px){.pds-box--fit-xl{max-width:100%;min-width:100%;width:100%}}@media (max-width: 575px){.pds-box-gap-xs-none{gap:0}.pds-box-gap-xs-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-xs-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-xs-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-xs-md{gap:var(--pine-dimension-md)}.pds-box-gap-xs-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xs-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xs-xxl{gap:var(--pine-dimension-2xl)}}@media (min-width: 576px){.pds-box-gap-sm-none{gap:0}.pds-box-gap-sm-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-sm-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-sm-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-sm-md{gap:var(--pine-dimension-md)}.pds-box-gap-sm-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-sm-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-sm-xxl{gap:var(--pine-dimension-2xl)}}@media (min-width: 768px){.pds-box-gap-md-none{gap:0}.pds-box-gap-md-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-md-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-md-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-md-md{gap:var(--pine-dimension-md)}.pds-box-gap-md-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-md-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-md-xxl{gap:var(--pine-dimension-2xl)}}@media (min-width: 992px){.pds-box-gap-lg-none{gap:0}.pds-box-gap-lg-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-lg-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-lg-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-lg-md{gap:var(--pine-dimension-md)}.pds-box-gap-lg-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-lg-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-lg-xxl{gap:var(--pine-dimension-2xl)}}@media (min-width: 1200px){.pds-box-gap-xl-none{gap:0}.pds-box-gap-xl-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-xl-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-xl-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-xl-md{gap:var(--pine-dimension-md)}.pds-box-gap-xl-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xl-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xl-xxl{gap:var(--pine-dimension-2xl)}}@media (max-width: 575px){.pds-margin-block-start-xs-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-xs-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-xs-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-xs-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-xs-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-xs-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-xs-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-xs-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-xs-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-xs-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-xs-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-xs-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-xs-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-xs-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-xs-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-xs-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-xs-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-xs-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-xs-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-xs-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-xs-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-xs-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-xs-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-xs-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-xs-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-xs-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-xs-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-xs-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-xs-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-xs-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-xs-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-xs-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (min-width: 576px){.pds-margin-block-start-sm-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-sm-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-sm-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-sm-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-sm-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-sm-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-sm-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-sm-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-sm-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-sm-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-sm-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-sm-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-sm-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-sm-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-sm-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-sm-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-sm-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-sm-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-sm-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-sm-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-sm-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-sm-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-sm-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-sm-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-sm-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-sm-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-sm-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-sm-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-sm-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-sm-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-sm-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-sm-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (min-width: 768px){.pds-margin-block-start-md-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-md-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-md-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-md-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-md-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-md-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-md-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-md-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-md-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-md-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-md-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-md-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-md-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-md-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-md-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-md-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-md-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-md-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-md-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-md-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-md-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-md-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-md-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-md-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-md-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-md-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-md-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-md-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-md-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-md-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-md-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-md-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (min-width: 992px){.pds-margin-block-start-lg-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-lg-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-lg-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-lg-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-lg-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-lg-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-lg-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-lg-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-lg-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-lg-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-lg-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-lg-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-lg-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-lg-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-lg-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-lg-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-lg-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-lg-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-lg-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-lg-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-lg-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-lg-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-lg-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-lg-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-lg-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-lg-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-lg-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-lg-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-lg-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-lg-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-lg-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-lg-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (min-width: 1200px){.pds-margin-block-start-xl-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-xl-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-xl-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-xl-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-xl-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-xl-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-xl-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-xl-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-xl-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-xl-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-xl-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-xl-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-xl-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-xl-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-xl-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-xl-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-xl-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-xl-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-xl-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-xl-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-xl-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-xl-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-xl-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-xl-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-xl-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-xl-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-xl-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-xl-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-xl-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-xl-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-xl-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-xl-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (max-width: 575px){.pds-padding-xs-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-xs-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-xs-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-xs-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-xs-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-xs-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-xs-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-xs-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-xs-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-xs-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-xs-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-xs-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-xs-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-xs-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-xs-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-xs-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-xs-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-xs-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-xs-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-xs-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-xs-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-xs-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-xs-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-xs-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-xs-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-xs-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-xs-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-xs-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-xs-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-xs-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-xs-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-xs-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-xs-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-xs-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-xs-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-xs-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-xs-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-xs-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-xs-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-xs-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}@media (min-width: 576px){.pds-padding-sm-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-sm-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-sm-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-sm-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-sm-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-sm-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-sm-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-sm-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-sm-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-sm-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-sm-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-sm-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-sm-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-sm-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-sm-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-sm-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-sm-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-sm-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-sm-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-sm-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-sm-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-sm-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-sm-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-sm-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-sm-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-sm-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-sm-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-sm-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-sm-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-sm-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-sm-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-sm-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-sm-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-sm-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-sm-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-sm-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-sm-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-sm-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-sm-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-sm-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}@media (min-width: 768px){.pds-padding-md-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-md-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-md-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-md-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-md-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-md-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-md-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-md-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-md-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-md-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-md-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-md-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-md-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-md-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-md-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-md-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-md-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-md-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-md-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-md-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-md-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-md-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-md-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-md-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-md-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-md-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-md-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-md-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-md-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-md-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-md-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-md-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-md-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-md-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-md-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-md-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-md-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-md-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-md-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-md-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}@media (min-width: 992px){.pds-padding-lg-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-lg-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-lg-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-lg-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-lg-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-lg-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-lg-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-lg-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-lg-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-lg-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-lg-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-lg-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-lg-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-lg-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-lg-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-lg-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-lg-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-lg-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-lg-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-lg-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-lg-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-lg-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-lg-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-lg-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-lg-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-lg-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-lg-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-lg-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-lg-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-lg-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-lg-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-lg-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-lg-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-lg-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-lg-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-lg-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-lg-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-lg-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-lg-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-lg-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}@media (min-width: 1200px){.pds-padding-xl-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-xl-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-xl-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-xl-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-xl-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-xl-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-xl-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-xl-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-xl-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-xl-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-xl-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-xl-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-xl-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-xl-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-xl-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-xl-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-xl-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-xl-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-xl-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-xl-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-xl-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-xl-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-xl-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-xl-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-xl-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-xl-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-xl-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-xl-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-xl-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-xl-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-xl-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-xl-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-xl-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-xl-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-xl-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-xl-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-xl-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-xl-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-xl-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-xl-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}";
|
|
3492
3502
|
|
|
3493
3503
|
class PdsBox {
|
|
3494
3504
|
constructor(hostRef) {
|
|
@@ -3513,13 +3523,33 @@ class PdsBox {
|
|
|
3513
3523
|
${this.alignSelfLg !== undefined && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}
|
|
3514
3524
|
${this.alignSelfXl !== undefined && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}
|
|
3515
3525
|
${this.auto ? 'pds-box--auto' : ''}
|
|
3526
|
+
${this.autoXs ? 'pds-box--auto-xs' : ''}
|
|
3527
|
+
${this.autoSm ? 'pds-box--auto-sm' : ''}
|
|
3528
|
+
${this.autoMd ? 'pds-box--auto-md' : ''}
|
|
3529
|
+
${this.autoLg ? 'pds-box--auto-lg' : ''}
|
|
3530
|
+
${this.autoXl ? 'pds-box--auto-xl' : ''}
|
|
3516
3531
|
${this.border ? 'pds-box--border' : ''}
|
|
3517
3532
|
${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
|
|
3518
3533
|
${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
|
|
3519
3534
|
${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
|
|
3520
3535
|
${this.fit ? 'pds-box--fit' : ''}
|
|
3536
|
+
${this.fitXs ? 'pds-box--fit-xs' : ''}
|
|
3537
|
+
${this.fitSm ? 'pds-box--fit-sm' : ''}
|
|
3538
|
+
${this.fitMd ? 'pds-box--fit-md' : ''}
|
|
3539
|
+
${this.fitLg ? 'pds-box--fit-lg' : ''}
|
|
3540
|
+
${this.fitXl ? 'pds-box--fit-xl' : ''}
|
|
3521
3541
|
${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
|
|
3542
|
+
${this.gapXs !== undefined && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}
|
|
3543
|
+
${this.gapSm !== undefined && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}
|
|
3544
|
+
${this.gapMd !== undefined && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}
|
|
3545
|
+
${this.gapLg !== undefined && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}
|
|
3546
|
+
${this.gapXl !== undefined && this.gapXl.trim() !== '' ? `pds-box-gap-xl-${this.gapXl}` : ''}
|
|
3522
3547
|
${this.wrap ? 'pds-box--wrap' : ''}
|
|
3548
|
+
${this.wrapXs ? 'pds-box--wrap-xs' : ''}
|
|
3549
|
+
${this.wrapSm ? 'pds-box--wrap-sm' : ''}
|
|
3550
|
+
${this.wrapMd ? 'pds-box--wrap-md' : ''}
|
|
3551
|
+
${this.wrapLg ? 'pds-box--wrap-lg' : ''}
|
|
3552
|
+
${this.wrapXl ? 'pds-box--wrap-xl' : ''}
|
|
3523
3553
|
${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}
|
|
3524
3554
|
${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
|
|
3525
3555
|
${this.justifyContentXs !== undefined && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}
|
|
@@ -3528,9 +3558,29 @@ class PdsBox {
|
|
|
3528
3558
|
${this.justifyContentLg !== undefined && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}
|
|
3529
3559
|
${this.justifyContentXl !== undefined && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}
|
|
3530
3560
|
${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}
|
|
3561
|
+
${this.marginBlockStartXs !== undefined && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}
|
|
3562
|
+
${this.marginBlockStartSm !== undefined && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}
|
|
3563
|
+
${this.marginBlockStartMd !== undefined && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}
|
|
3564
|
+
${this.marginBlockStartLg !== undefined && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}
|
|
3565
|
+
${this.marginBlockStartXl !== undefined && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}
|
|
3531
3566
|
${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}
|
|
3567
|
+
${this.marginInlineStartXs !== undefined && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}
|
|
3568
|
+
${this.marginInlineStartSm !== undefined && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}
|
|
3569
|
+
${this.marginInlineStartMd !== undefined && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}
|
|
3570
|
+
${this.marginInlineStartLg !== undefined && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}
|
|
3571
|
+
${this.marginInlineStartXl !== undefined && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}
|
|
3532
3572
|
${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}
|
|
3573
|
+
${this.marginInlineEndXs !== undefined && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}
|
|
3574
|
+
${this.marginInlineEndSm !== undefined && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}
|
|
3575
|
+
${this.marginInlineEndMd !== undefined && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}
|
|
3576
|
+
${this.marginInlineEndLg !== undefined && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}
|
|
3577
|
+
${this.marginInlineEndXl !== undefined && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}
|
|
3533
3578
|
${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}
|
|
3579
|
+
${this.marginBlockEndXs !== undefined && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}
|
|
3580
|
+
${this.marginBlockEndSm !== undefined && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}
|
|
3581
|
+
${this.marginBlockEndMd !== undefined && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}
|
|
3582
|
+
${this.marginBlockEndLg !== undefined && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}
|
|
3583
|
+
${this.marginBlockEndXl !== undefined && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}
|
|
3534
3584
|
${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
|
|
3535
3585
|
${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
|
|
3536
3586
|
${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
|
|
@@ -3538,10 +3588,35 @@ class PdsBox {
|
|
|
3538
3588
|
${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
|
|
3539
3589
|
${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
|
|
3540
3590
|
${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
|
|
3591
|
+
${this.paddingXs !== undefined && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}
|
|
3592
|
+
${this.paddingSm !== undefined && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}
|
|
3593
|
+
${this.paddingMd !== undefined && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}
|
|
3594
|
+
${this.paddingLg !== undefined && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}
|
|
3595
|
+
${this.paddingXl !== undefined && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}
|
|
3541
3596
|
${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}
|
|
3597
|
+
${this.paddingBlockStartXs !== undefined && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}
|
|
3598
|
+
${this.paddingBlockStartSm !== undefined && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}
|
|
3599
|
+
${this.paddingBlockStartMd !== undefined && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}
|
|
3600
|
+
${this.paddingBlockStartLg !== undefined && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}
|
|
3601
|
+
${this.paddingBlockStartXl !== undefined && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}
|
|
3542
3602
|
${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}
|
|
3603
|
+
${this.paddingBlockEndXs !== undefined && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}
|
|
3604
|
+
${this.paddingBlockEndSm !== undefined && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}
|
|
3605
|
+
${this.paddingBlockEndMd !== undefined && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}
|
|
3606
|
+
${this.paddingBlockEndLg !== undefined && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}
|
|
3607
|
+
${this.paddingBlockEndXl !== undefined && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}
|
|
3543
3608
|
${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}
|
|
3609
|
+
${this.paddingInlineStartXs !== undefined && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}
|
|
3610
|
+
${this.paddingInlineStartSm !== undefined && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}
|
|
3611
|
+
${this.paddingInlineStartMd !== undefined && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}
|
|
3612
|
+
${this.paddingInlineStartLg !== undefined && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}
|
|
3613
|
+
${this.paddingInlineStartXl !== undefined && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}
|
|
3544
3614
|
${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}
|
|
3615
|
+
${this.paddingInlineEndXs !== undefined && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}
|
|
3616
|
+
${this.paddingInlineEndSm !== undefined && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}
|
|
3617
|
+
${this.paddingInlineEndMd !== undefined && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}
|
|
3618
|
+
${this.paddingInlineEndLg !== undefined && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}
|
|
3619
|
+
${this.paddingInlineEndXl !== undefined && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}
|
|
3545
3620
|
${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
|
|
3546
3621
|
${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
|
|
3547
3622
|
${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
|
|
@@ -3559,7 +3634,7 @@ class PdsBox {
|
|
|
3559
3634
|
const normalizedBackground = normalizeColorValue(this.backgroundColor);
|
|
3560
3635
|
const normalizedBorder = normalizeColorValue(this.borderColor);
|
|
3561
3636
|
const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
|
|
3562
|
-
return (hAsync(Host, { key: '
|
|
3637
|
+
return (hAsync(Host, { key: '63a5dfc55625ad930494caa79f2b26a663d9cddd', class: boxClasses, style: boxInlineStyles }));
|
|
3563
3638
|
}
|
|
3564
3639
|
static get style() { return pdsBoxCss; }
|
|
3565
3640
|
static get cmpMeta() { return {
|
|
@@ -3579,6 +3654,11 @@ class PdsBox {
|
|
|
3579
3654
|
"alignSelfLg": [1, "align-self-lg"],
|
|
3580
3655
|
"alignSelfXl": [1, "align-self-xl"],
|
|
3581
3656
|
"auto": [4],
|
|
3657
|
+
"autoXs": [4, "auto-xs"],
|
|
3658
|
+
"autoSm": [4, "auto-sm"],
|
|
3659
|
+
"autoMd": [4, "auto-md"],
|
|
3660
|
+
"autoLg": [4, "auto-lg"],
|
|
3661
|
+
"autoXl": [4, "auto-xl"],
|
|
3582
3662
|
"backgroundColor": [1, "background-color"],
|
|
3583
3663
|
"border": [4],
|
|
3584
3664
|
"borderColor": [1, "border-color"],
|
|
@@ -3586,8 +3666,23 @@ class PdsBox {
|
|
|
3586
3666
|
"direction": [1],
|
|
3587
3667
|
"display": [1],
|
|
3588
3668
|
"fit": [4],
|
|
3669
|
+
"fitXs": [4, "fit-xs"],
|
|
3670
|
+
"fitSm": [4, "fit-sm"],
|
|
3671
|
+
"fitMd": [4, "fit-md"],
|
|
3672
|
+
"fitLg": [4, "fit-lg"],
|
|
3673
|
+
"fitXl": [4, "fit-xl"],
|
|
3589
3674
|
"gap": [1],
|
|
3675
|
+
"gapXs": [1, "gap-xs"],
|
|
3676
|
+
"gapSm": [1, "gap-sm"],
|
|
3677
|
+
"gapMd": [1, "gap-md"],
|
|
3678
|
+
"gapLg": [1, "gap-lg"],
|
|
3679
|
+
"gapXl": [1, "gap-xl"],
|
|
3590
3680
|
"wrap": [4],
|
|
3681
|
+
"wrapXs": [4, "wrap-xs"],
|
|
3682
|
+
"wrapSm": [4, "wrap-sm"],
|
|
3683
|
+
"wrapMd": [4, "wrap-md"],
|
|
3684
|
+
"wrapLg": [4, "wrap-lg"],
|
|
3685
|
+
"wrapXl": [4, "wrap-xl"],
|
|
3591
3686
|
"flex": [1],
|
|
3592
3687
|
"justifyContent": [1, "justify-content"],
|
|
3593
3688
|
"justifyContentXs": [1, "justify-content-xs"],
|
|
@@ -3596,9 +3691,29 @@ class PdsBox {
|
|
|
3596
3691
|
"justifyContentLg": [1, "justify-content-lg"],
|
|
3597
3692
|
"justifyContentXl": [1, "justify-content-xl"],
|
|
3598
3693
|
"marginBlockStart": [1, "margin-block-start"],
|
|
3694
|
+
"marginBlockStartXs": [1, "margin-block-start-xs"],
|
|
3695
|
+
"marginBlockStartSm": [1, "margin-block-start-sm"],
|
|
3696
|
+
"marginBlockStartMd": [1, "margin-block-start-md"],
|
|
3697
|
+
"marginBlockStartLg": [1, "margin-block-start-lg"],
|
|
3698
|
+
"marginBlockStartXl": [1, "margin-block-start-xl"],
|
|
3599
3699
|
"marginInlineStart": [1, "margin-inline-start"],
|
|
3700
|
+
"marginInlineStartXs": [1, "margin-inline-start-xs"],
|
|
3701
|
+
"marginInlineStartSm": [1, "margin-inline-start-sm"],
|
|
3702
|
+
"marginInlineStartMd": [1, "margin-inline-start-md"],
|
|
3703
|
+
"marginInlineStartLg": [1, "margin-inline-start-lg"],
|
|
3704
|
+
"marginInlineStartXl": [1, "margin-inline-start-xl"],
|
|
3600
3705
|
"marginInlineEnd": [1, "margin-inline-end"],
|
|
3706
|
+
"marginInlineEndXs": [1, "margin-inline-end-xs"],
|
|
3707
|
+
"marginInlineEndSm": [1, "margin-inline-end-sm"],
|
|
3708
|
+
"marginInlineEndMd": [1, "margin-inline-end-md"],
|
|
3709
|
+
"marginInlineEndLg": [1, "margin-inline-end-lg"],
|
|
3710
|
+
"marginInlineEndXl": [1, "margin-inline-end-xl"],
|
|
3601
3711
|
"marginBlockEnd": [1, "margin-block-end"],
|
|
3712
|
+
"marginBlockEndXs": [1, "margin-block-end-xs"],
|
|
3713
|
+
"marginBlockEndSm": [1, "margin-block-end-sm"],
|
|
3714
|
+
"marginBlockEndMd": [1, "margin-block-end-md"],
|
|
3715
|
+
"marginBlockEndLg": [1, "margin-block-end-lg"],
|
|
3716
|
+
"marginBlockEndXl": [1, "margin-block-end-xl"],
|
|
3602
3717
|
"minHeight": [513, "min-height"],
|
|
3603
3718
|
"minWidth": [513, "min-width"],
|
|
3604
3719
|
"offset": [1],
|
|
@@ -3608,10 +3723,35 @@ class PdsBox {
|
|
|
3608
3723
|
"offsetLg": [1, "offset-lg"],
|
|
3609
3724
|
"offsetXl": [1, "offset-xl"],
|
|
3610
3725
|
"padding": [1],
|
|
3726
|
+
"paddingXs": [1, "padding-xs"],
|
|
3727
|
+
"paddingSm": [1, "padding-sm"],
|
|
3728
|
+
"paddingMd": [1, "padding-md"],
|
|
3729
|
+
"paddingLg": [1, "padding-lg"],
|
|
3730
|
+
"paddingXl": [1, "padding-xl"],
|
|
3611
3731
|
"paddingBlockStart": [1, "padding-block-start"],
|
|
3732
|
+
"paddingBlockStartXs": [1, "padding-block-start-xs"],
|
|
3733
|
+
"paddingBlockStartSm": [1, "padding-block-start-sm"],
|
|
3734
|
+
"paddingBlockStartMd": [1, "padding-block-start-md"],
|
|
3735
|
+
"paddingBlockStartLg": [1, "padding-block-start-lg"],
|
|
3736
|
+
"paddingBlockStartXl": [1, "padding-block-start-xl"],
|
|
3612
3737
|
"paddingBlockEnd": [1, "padding-block-end"],
|
|
3738
|
+
"paddingBlockEndXs": [1, "padding-block-end-xs"],
|
|
3739
|
+
"paddingBlockEndSm": [1, "padding-block-end-sm"],
|
|
3740
|
+
"paddingBlockEndMd": [1, "padding-block-end-md"],
|
|
3741
|
+
"paddingBlockEndLg": [1, "padding-block-end-lg"],
|
|
3742
|
+
"paddingBlockEndXl": [1, "padding-block-end-xl"],
|
|
3613
3743
|
"paddingInlineStart": [1, "padding-inline-start"],
|
|
3744
|
+
"paddingInlineStartXs": [1, "padding-inline-start-xs"],
|
|
3745
|
+
"paddingInlineStartSm": [1, "padding-inline-start-sm"],
|
|
3746
|
+
"paddingInlineStartMd": [1, "padding-inline-start-md"],
|
|
3747
|
+
"paddingInlineStartLg": [1, "padding-inline-start-lg"],
|
|
3748
|
+
"paddingInlineStartXl": [1, "padding-inline-start-xl"],
|
|
3614
3749
|
"paddingInlineEnd": [1, "padding-inline-end"],
|
|
3750
|
+
"paddingInlineEndXs": [1, "padding-inline-end-xs"],
|
|
3751
|
+
"paddingInlineEndSm": [1, "padding-inline-end-sm"],
|
|
3752
|
+
"paddingInlineEndMd": [1, "padding-inline-end-md"],
|
|
3753
|
+
"paddingInlineEndLg": [1, "padding-inline-end-lg"],
|
|
3754
|
+
"paddingInlineEndXl": [1, "padding-inline-end-xl"],
|
|
3615
3755
|
"shadow": [1],
|
|
3616
3756
|
"size": [1],
|
|
3617
3757
|
"sizeXs": [1, "size-xs"],
|
|
@@ -3626,7 +3766,7 @@ class PdsBox {
|
|
|
3626
3766
|
}; }
|
|
3627
3767
|
}
|
|
3628
3768
|
|
|
3629
|
-
const pdsButtonCss = ":host{--pds-button-background:var(--color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--color-background-default));border:var(--pds-button-border);border-color:var(--color-border-default);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-radius:var(--pds-button-border-radius);border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;--button-loader-color:inherit;border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
|
|
3769
|
+
const pdsButtonCss = ":host{--pds-button-background:var(--color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--color-background-default));border:var(--pds-button-border);border-color:var(--color-border-default);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-radius:var(--pds-button-border-radius);border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--filter{--color-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-100);--color-background-disabled:var(--pine-color-white);--color-border-default:transparent;--color-border-hover:transparent;--color-border-focus:transparent;--color-text-default:var(--pine-color-text-secondary);--color-text-hover:var(--pine-color-text-hover);--color-text-disabled:var(--pine-color-text-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:hover{color:var(--color-text-hover)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;--button-loader-color:inherit;border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
|
|
3630
3770
|
|
|
3631
3771
|
/**
|
|
3632
3772
|
* @part button - Exposes the button element for styling.
|
|
@@ -3684,8 +3824,13 @@ class PdsButton {
|
|
|
3684
3824
|
ev.preventDefault();
|
|
3685
3825
|
return;
|
|
3686
3826
|
}
|
|
3827
|
+
// Prevent form submission for disabled buttons
|
|
3828
|
+
if (this.disabled) {
|
|
3829
|
+
ev.preventDefault();
|
|
3830
|
+
return;
|
|
3831
|
+
}
|
|
3687
3832
|
if (!this.href && this.type != 'button') {
|
|
3688
|
-
//
|
|
3833
|
+
// Handle form submission for Shadow DOM buttons
|
|
3689
3834
|
if (hasShadowDom(this.el)) {
|
|
3690
3835
|
const form = this.el.closest('form');
|
|
3691
3836
|
if (form) {
|
|
@@ -3702,6 +3847,50 @@ class PdsButton {
|
|
|
3702
3847
|
this.pdsClick.emit(ev);
|
|
3703
3848
|
};
|
|
3704
3849
|
}
|
|
3850
|
+
/**
|
|
3851
|
+
* Listen for Enter key presses on form inputs to trigger submit
|
|
3852
|
+
*/
|
|
3853
|
+
handleFormKeyDown(event) {
|
|
3854
|
+
// Only handle Enter key for submit buttons that are not disabled
|
|
3855
|
+
if (event.key !== 'Enter' || this.type !== 'submit' || this.href || this.disabled) {
|
|
3856
|
+
return;
|
|
3857
|
+
}
|
|
3858
|
+
const target = event.target;
|
|
3859
|
+
// Ensure event.target is an Element with matches method before proceeding
|
|
3860
|
+
if (!target || typeof target.matches !== 'function') {
|
|
3861
|
+
return;
|
|
3862
|
+
}
|
|
3863
|
+
const form = this.el.closest('form');
|
|
3864
|
+
// Check if the Enter key was pressed in a form input within the same form
|
|
3865
|
+
if (!form || !target || !form.contains(target)) {
|
|
3866
|
+
return;
|
|
3867
|
+
}
|
|
3868
|
+
// Check if target is a form input element (exclude reset buttons)
|
|
3869
|
+
const isFormInput = target.matches('input:not([type="submit"]):not([type="button"]):not([type="reset"])') ||
|
|
3870
|
+
target.matches('pds-input') ||
|
|
3871
|
+
target.matches('pds-select') ||
|
|
3872
|
+
target.matches('pds-switch') ||
|
|
3873
|
+
target.matches('pds-checkbox') ||
|
|
3874
|
+
target.matches('pds-radio');
|
|
3875
|
+
if (isFormInput) {
|
|
3876
|
+
// Find all submit buttons in the form and check their actual properties
|
|
3877
|
+
const allSubmitButtons = Array.from(form.querySelectorAll('pds-button, button[type="submit"], input[type="submit"]'));
|
|
3878
|
+
const enabledSubmitButtons = allSubmitButtons.filter(button => {
|
|
3879
|
+
if (button.tagName.toLowerCase() === 'pds-button') {
|
|
3880
|
+
const pdsButton = button;
|
|
3881
|
+
return pdsButton.type === 'submit' && !pdsButton.disabled;
|
|
3882
|
+
}
|
|
3883
|
+
else {
|
|
3884
|
+
return !button.hasAttribute('disabled');
|
|
3885
|
+
}
|
|
3886
|
+
});
|
|
3887
|
+
// Only synthesize click if this button is strictly the first enabled submit button
|
|
3888
|
+
if (enabledSubmitButtons.length > 0 && enabledSubmitButtons[0] === this.el) {
|
|
3889
|
+
event.preventDefault();
|
|
3890
|
+
this.el.click();
|
|
3891
|
+
}
|
|
3892
|
+
}
|
|
3893
|
+
}
|
|
3705
3894
|
classNames() {
|
|
3706
3895
|
const classNames = ['pds-button'];
|
|
3707
3896
|
if (this.variant) {
|
|
@@ -3720,9 +3909,12 @@ class PdsButton {
|
|
|
3720
3909
|
return elements.length > 0;
|
|
3721
3910
|
}
|
|
3722
3911
|
renderStartContent() {
|
|
3723
|
-
const hasIcon = this.icon && this.variant !== 'disclosure';
|
|
3912
|
+
const hasIcon = this.icon && this.variant !== 'disclosure' && this.variant !== 'filter';
|
|
3724
3913
|
const hasStartSlot = this.hasSlotContent('start');
|
|
3725
|
-
if (
|
|
3914
|
+
if (this.variant === 'filter') {
|
|
3915
|
+
return (hAsync("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', icon: addCircle, part: "icon", "aria-hidden": "true" }));
|
|
3916
|
+
}
|
|
3917
|
+
else if (Boolean(hasIcon)) {
|
|
3726
3918
|
return (hAsync("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon", "aria-hidden": "true" }));
|
|
3727
3919
|
}
|
|
3728
3920
|
else if (Boolean(hasStartSlot)) {
|
|
@@ -3779,7 +3971,7 @@ class PdsButton {
|
|
|
3779
3971
|
"value": [1],
|
|
3780
3972
|
"variant": [1]
|
|
3781
3973
|
},
|
|
3782
|
-
"$listeners$":
|
|
3974
|
+
"$listeners$": [[16, "keydown", "handleFormKeyDown"]],
|
|
3783
3975
|
"$lazyBundleId$": "-",
|
|
3784
3976
|
"$attrsToReflect$": []
|
|
3785
3977
|
}; }
|
|
@@ -6932,7 +7124,7 @@ function createDOMPurify() {
|
|
|
6932
7124
|
}
|
|
6933
7125
|
var purify = createDOMPurify();
|
|
6934
7126
|
|
|
6935
|
-
const pdsComboboxCss = ":host{display:block}.pds-combobox{position:relative}.pds-combobox__label{display:block;font-size:0.95rem;-webkit-margin-after:var(--pine-dimension-150);margin-block-end:var(--pine-dimension-150)}.pds-combobox__input{background:var(--pine-color-background-container);border:1px solid var(--pine-color-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color 0.2s ease;transition:border-color 0.2s ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__listbox{background:var(--pine-color-background-container);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:1000}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-grey-150)}.pds-combobox__option .pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-grey-150)}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--color-text-default, #ffffff);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}";
|
|
7127
|
+
const pdsComboboxCss = ":host{display:block}:host([disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{display:block;font-size:0.95rem;-webkit-margin-after:var(--pine-dimension-150);margin-block-end:var(--pine-dimension-150)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:1px solid var(--pine-color-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color 0.2s ease;transition:border-color 0.2s ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);pointer-events:none;position:absolute;right:var(--pine-dimension-150);z-index:1}.pds-combobox__listbox{background:var(--pine-color-background-container);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:1000}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-grey-150)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option .pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-grey-150)}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-placeholder);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--color-text-default, #ffffff);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}";
|
|
6936
7128
|
|
|
6937
7129
|
/**
|
|
6938
7130
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -6999,9 +7191,9 @@ class PdsCombobox {
|
|
|
6999
7191
|
*/
|
|
7000
7192
|
this.value = '';
|
|
7001
7193
|
/**
|
|
7002
|
-
* Internal state for filtered options
|
|
7194
|
+
* Internal state for filtered options and group labels
|
|
7003
7195
|
*/
|
|
7004
|
-
this.
|
|
7196
|
+
this.filteredItems = [];
|
|
7005
7197
|
/**
|
|
7006
7198
|
* Internal state for the currently highlighted option index
|
|
7007
7199
|
*/
|
|
@@ -7019,6 +7211,7 @@ class PdsCombobox {
|
|
|
7019
7211
|
*/
|
|
7020
7212
|
this.selectedOptionLayoutContent = '';
|
|
7021
7213
|
this.optionEls = [];
|
|
7214
|
+
this.allItems = [];
|
|
7022
7215
|
this.handleInput = (e) => {
|
|
7023
7216
|
const target = e.target;
|
|
7024
7217
|
this.value = target.value;
|
|
@@ -7026,37 +7219,124 @@ class PdsCombobox {
|
|
|
7026
7219
|
this.filterOptions();
|
|
7027
7220
|
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7028
7221
|
};
|
|
7029
|
-
this.
|
|
7030
|
-
|
|
7031
|
-
this.
|
|
7032
|
-
|
|
7222
|
+
this.handleInputClick = () => {
|
|
7223
|
+
// Open dropdown when input is clicked (but not when tabbed into)
|
|
7224
|
+
if (!this.isOpen) {
|
|
7225
|
+
this.isOpen = true;
|
|
7226
|
+
this.filterOptions();
|
|
7227
|
+
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7228
|
+
}
|
|
7033
7229
|
};
|
|
7034
7230
|
this.handleKeyDown = (e) => {
|
|
7035
|
-
if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
7231
|
+
if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.altKey && e.key === 'ArrowDown'))) {
|
|
7232
|
+
e.preventDefault();
|
|
7036
7233
|
this.isOpen = true;
|
|
7234
|
+
this.filterOptions();
|
|
7235
|
+
// Set highlighted index immediately for testing
|
|
7236
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7237
|
+
if (selectableOptions.length > 0) {
|
|
7238
|
+
this.highlightedIndex = 0;
|
|
7239
|
+
}
|
|
7240
|
+
setTimeout(() => {
|
|
7241
|
+
this.openDropdownPositioning();
|
|
7242
|
+
// For input trigger, keep focus on input and use aria-activedescendant
|
|
7243
|
+
// For button trigger, move focus to first option for keyboard navigation
|
|
7244
|
+
if (this.trigger === 'input') {
|
|
7245
|
+
this.focusFirstOption();
|
|
7246
|
+
}
|
|
7247
|
+
else {
|
|
7248
|
+
this.focusFirstOptionForArrowKeys();
|
|
7249
|
+
}
|
|
7250
|
+
}, 0);
|
|
7037
7251
|
return;
|
|
7038
7252
|
}
|
|
7253
|
+
if (!this.isOpen) {
|
|
7254
|
+
return;
|
|
7255
|
+
}
|
|
7256
|
+
// Get only the option elements (skip group labels) for navigation
|
|
7257
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7039
7258
|
switch (e.key) {
|
|
7040
7259
|
case 'ArrowDown':
|
|
7041
|
-
|
|
7260
|
+
e.preventDefault();
|
|
7261
|
+
// If no option is highlighted and we have options, start at 0
|
|
7262
|
+
if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
|
|
7263
|
+
this.highlightedIndex = 0;
|
|
7264
|
+
}
|
|
7265
|
+
else {
|
|
7266
|
+
this.highlightedIndex = Math.min(this.highlightedIndex + 1, selectableOptions.length - 1);
|
|
7267
|
+
}
|
|
7268
|
+
this.updateOptionFocus();
|
|
7042
7269
|
break;
|
|
7043
7270
|
case 'ArrowUp':
|
|
7044
|
-
|
|
7271
|
+
e.preventDefault();
|
|
7272
|
+
// If no option is highlighted and we have options, start at last option
|
|
7273
|
+
if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
|
|
7274
|
+
this.highlightedIndex = selectableOptions.length - 1;
|
|
7275
|
+
}
|
|
7276
|
+
else {
|
|
7277
|
+
this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
|
|
7278
|
+
}
|
|
7279
|
+
this.updateOptionFocus();
|
|
7280
|
+
break;
|
|
7281
|
+
case 'Home':
|
|
7282
|
+
e.preventDefault();
|
|
7283
|
+
if (selectableOptions.length > 0) {
|
|
7284
|
+
this.highlightedIndex = 0;
|
|
7285
|
+
this.updateOptionFocus();
|
|
7286
|
+
}
|
|
7287
|
+
break;
|
|
7288
|
+
case 'End':
|
|
7289
|
+
e.preventDefault();
|
|
7290
|
+
if (selectableOptions.length > 0) {
|
|
7291
|
+
this.highlightedIndex = selectableOptions.length - 1;
|
|
7292
|
+
this.updateOptionFocus();
|
|
7293
|
+
}
|
|
7294
|
+
break;
|
|
7295
|
+
case 'PageDown':
|
|
7296
|
+
e.preventDefault();
|
|
7297
|
+
if (selectableOptions.length > 0) {
|
|
7298
|
+
const nextIndex = Math.min(this.highlightedIndex + 10, selectableOptions.length - 1);
|
|
7299
|
+
this.highlightedIndex = nextIndex;
|
|
7300
|
+
this.updateOptionFocus();
|
|
7301
|
+
}
|
|
7302
|
+
break;
|
|
7303
|
+
case 'PageUp':
|
|
7304
|
+
e.preventDefault();
|
|
7305
|
+
if (selectableOptions.length > 0) {
|
|
7306
|
+
const prevIndex = Math.max(this.highlightedIndex - 10, 0);
|
|
7307
|
+
this.highlightedIndex = prevIndex;
|
|
7308
|
+
this.updateOptionFocus();
|
|
7309
|
+
}
|
|
7045
7310
|
break;
|
|
7046
7311
|
case 'Enter':
|
|
7047
|
-
|
|
7048
|
-
|
|
7312
|
+
e.preventDefault();
|
|
7313
|
+
if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
|
|
7314
|
+
this.handleOptionClick(selectableOptions[this.highlightedIndex]);
|
|
7315
|
+
this.restoreFocusToTrigger();
|
|
7049
7316
|
}
|
|
7050
7317
|
break;
|
|
7051
7318
|
case 'Escape':
|
|
7319
|
+
e.preventDefault();
|
|
7320
|
+
this.isOpen = false;
|
|
7321
|
+
this.highlightedIndex = -1;
|
|
7322
|
+
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7323
|
+
this.restoreFocusToTrigger();
|
|
7324
|
+
break;
|
|
7325
|
+
case 'Tab':
|
|
7326
|
+
// Allow normal tab behavior to close dropdown and move focus
|
|
7052
7327
|
this.isOpen = false;
|
|
7328
|
+
this.highlightedIndex = -1;
|
|
7329
|
+
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7053
7330
|
break;
|
|
7054
7331
|
}
|
|
7055
7332
|
};
|
|
7333
|
+
// Track if we're in arrow-key navigation mode (focus should move between options)
|
|
7334
|
+
this.isArrowKeyNavigationMode = false;
|
|
7056
7335
|
// Event handler for option click
|
|
7057
7336
|
this.onOptionClick = (event) => {
|
|
7058
7337
|
const idx = Number(event.currentTarget.getAttribute('data-option-index'));
|
|
7059
|
-
const
|
|
7338
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7339
|
+
const option = selectableOptions[idx];
|
|
7060
7340
|
this.handleOptionClick(option);
|
|
7061
7341
|
};
|
|
7062
7342
|
// Event handler for mouse enter on option
|
|
@@ -7068,29 +7348,82 @@ class PdsCombobox {
|
|
|
7068
7348
|
this.onOptionMouseDown = (event) => {
|
|
7069
7349
|
event.preventDefault();
|
|
7070
7350
|
};
|
|
7351
|
+
// Event handler for option keyboard events
|
|
7352
|
+
this.onOptionKeyDown = (event) => {
|
|
7353
|
+
// Delegate to main keyboard handler
|
|
7354
|
+
this.handleKeyDown(event);
|
|
7355
|
+
};
|
|
7071
7356
|
// Handler for button trigger click
|
|
7072
7357
|
this.onButtonTriggerClick = () => {
|
|
7073
7358
|
this.isOpen = !this.isOpen;
|
|
7074
|
-
if (this.isOpen)
|
|
7359
|
+
if (this.isOpen) {
|
|
7360
|
+
this.filterOptions();
|
|
7361
|
+
// Set highlighted index and prepare for keyboard navigation
|
|
7362
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7363
|
+
if (selectableOptions.length > 0) {
|
|
7364
|
+
this.highlightedIndex = 0;
|
|
7365
|
+
// For button trigger, prepare for arrow-key navigation mode
|
|
7366
|
+
this.isArrowKeyNavigationMode = true;
|
|
7367
|
+
}
|
|
7075
7368
|
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7369
|
+
}
|
|
7370
|
+
else {
|
|
7371
|
+
// Reset navigation mode when closing
|
|
7372
|
+
this.isArrowKeyNavigationMode = false;
|
|
7373
|
+
}
|
|
7076
7374
|
};
|
|
7077
7375
|
// Handler for button trigger keyboard events
|
|
7078
7376
|
this.onButtonTriggerKeyDown = (e) => {
|
|
7079
|
-
if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
|
|
7377
|
+
if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown' || e.key === 'ArrowUp') && !this.isOpen) {
|
|
7080
7378
|
e.preventDefault();
|
|
7379
|
+
e.stopPropagation(); // Prevent the event from bubbling and triggering click
|
|
7081
7380
|
this.isOpen = true;
|
|
7082
|
-
this.
|
|
7083
|
-
|
|
7381
|
+
this.filterOptions();
|
|
7382
|
+
// Set highlighted index immediately
|
|
7383
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7384
|
+
if (selectableOptions.length > 0) {
|
|
7385
|
+
this.highlightedIndex = 0;
|
|
7386
|
+
}
|
|
7387
|
+
setTimeout(() => {
|
|
7388
|
+
this.openDropdownPositioning();
|
|
7389
|
+
// For all button trigger keyboard opening, focus the first option so subsequent navigation works
|
|
7390
|
+
this.focusFirstOptionForArrowKeys();
|
|
7391
|
+
}, 0);
|
|
7084
7392
|
}
|
|
7085
7393
|
else if (e.key === 'Escape') {
|
|
7086
|
-
|
|
7394
|
+
e.preventDefault();
|
|
7395
|
+
if (this.isOpen) {
|
|
7396
|
+
this.isOpen = false;
|
|
7397
|
+
this.highlightedIndex = -1;
|
|
7398
|
+
this.updateAriaActiveDescendant(); // Clear aria-activedescendant
|
|
7399
|
+
this.restoreFocusToTrigger();
|
|
7400
|
+
}
|
|
7401
|
+
}
|
|
7402
|
+
else if (this.isOpen) {
|
|
7403
|
+
// Delegate other keys to main keyboard handler when dropdown is open
|
|
7404
|
+
this.handleKeyDown(e);
|
|
7405
|
+
}
|
|
7406
|
+
};
|
|
7407
|
+
// Handler for button trigger keyup events - prevents space key from triggering synthetic click
|
|
7408
|
+
this.onButtonTriggerKeyUp = (e) => {
|
|
7409
|
+
if (e.key === ' ') {
|
|
7410
|
+
e.preventDefault();
|
|
7411
|
+
e.stopPropagation();
|
|
7087
7412
|
}
|
|
7088
7413
|
};
|
|
7089
7414
|
// Close dropdown when focus leaves the combobox
|
|
7090
7415
|
this.onComboboxFocusOut = (event) => {
|
|
7416
|
+
var _a;
|
|
7091
7417
|
const relatedTarget = event.relatedTarget;
|
|
7092
|
-
if (
|
|
7418
|
+
// Check if the related target is within our shadow DOM (listbox options)
|
|
7419
|
+
const isRelatedTargetInListbox = relatedTarget && ((_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget));
|
|
7420
|
+
const isRelatedTargetInCombobox = this.el.contains(relatedTarget);
|
|
7421
|
+
// Don't close if focus is moving to an option in the listbox or staying within the combobox
|
|
7422
|
+
if (!isRelatedTargetInCombobox && !isRelatedTargetInListbox) {
|
|
7093
7423
|
this.isOpen = false;
|
|
7424
|
+
this.highlightedIndex = -1;
|
|
7425
|
+
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7426
|
+
this.updateAriaActiveDescendant(); // Clear aria-activedescendant
|
|
7094
7427
|
// If there's a selected option but the input value doesn't match, restore the selected option's value
|
|
7095
7428
|
if (this.selectedOption && this.value !== this.getOptionLabel(this.selectedOption)) {
|
|
7096
7429
|
this.value = this.getOptionLabel(this.selectedOption);
|
|
@@ -7112,11 +7445,33 @@ class PdsCombobox {
|
|
|
7112
7445
|
}
|
|
7113
7446
|
updateOptions() {
|
|
7114
7447
|
var _a;
|
|
7115
|
-
// Get all
|
|
7448
|
+
// Get all elements from the slot
|
|
7116
7449
|
const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="option"], slot:not([name])');
|
|
7117
7450
|
if (slot) {
|
|
7118
|
-
|
|
7119
|
-
|
|
7451
|
+
const allElements = slot.assignedElements({ flatten: true });
|
|
7452
|
+
// Separate options from group labels and flatten optgroups
|
|
7453
|
+
this.allItems = [];
|
|
7454
|
+
this.optionEls = [];
|
|
7455
|
+
allElements.forEach(el => {
|
|
7456
|
+
if (el.tagName === 'OPTION') {
|
|
7457
|
+
this.optionEls.push(el);
|
|
7458
|
+
this.allItems.push(el);
|
|
7459
|
+
}
|
|
7460
|
+
else if (el.tagName === 'OPTGROUP') {
|
|
7461
|
+
const optgroup = el;
|
|
7462
|
+
this.allItems.push(optgroup);
|
|
7463
|
+
// Add optgroup children (options)
|
|
7464
|
+
Array.from(optgroup.children).forEach(child => {
|
|
7465
|
+
if (child.tagName === 'OPTION') {
|
|
7466
|
+
this.optionEls.push(child);
|
|
7467
|
+
this.allItems.push(child);
|
|
7468
|
+
}
|
|
7469
|
+
});
|
|
7470
|
+
}
|
|
7471
|
+
else if (el.tagName === 'PDS-TEXT') {
|
|
7472
|
+
this.allItems.push(el);
|
|
7473
|
+
}
|
|
7474
|
+
});
|
|
7120
7475
|
// Set initial selected option if one exists (only check DOM on initialization)
|
|
7121
7476
|
if (!this.selectedOption) {
|
|
7122
7477
|
const initialSelected = this.optionEls.find(opt => opt.hasAttribute('selected')) || null;
|
|
@@ -7178,12 +7533,16 @@ class PdsCombobox {
|
|
|
7178
7533
|
this.selectedOption = option;
|
|
7179
7534
|
}
|
|
7180
7535
|
filterOptions() {
|
|
7536
|
+
// Ensure allItems includes optionEls if not already populated (for edge cases)
|
|
7537
|
+
if (this.allItems.length === 0 && this.optionEls.length > 0) {
|
|
7538
|
+
this.allItems = [...this.optionEls];
|
|
7539
|
+
}
|
|
7181
7540
|
if (this.mode === 'select-only') {
|
|
7182
|
-
this.
|
|
7541
|
+
this.filteredItems = [...this.allItems];
|
|
7183
7542
|
}
|
|
7184
7543
|
else {
|
|
7185
7544
|
const val = this.value.toLowerCase();
|
|
7186
|
-
|
|
7545
|
+
const filteredOptions = this.optionEls.filter(option => {
|
|
7187
7546
|
// For layout options, search both text content and data-search-text attribute
|
|
7188
7547
|
if (this.isOptionLayout(option)) {
|
|
7189
7548
|
const searchText = option.getAttribute('data-search-text') || option.textContent || '';
|
|
@@ -7191,6 +7550,31 @@ class PdsCombobox {
|
|
|
7191
7550
|
}
|
|
7192
7551
|
return this.getOptionLabel(option).toLowerCase().includes(val);
|
|
7193
7552
|
});
|
|
7553
|
+
// Rebuild filtered items maintaining group structure - simplified approach
|
|
7554
|
+
this.filteredItems = [];
|
|
7555
|
+
let currentGroupLabel = null;
|
|
7556
|
+
this.allItems.forEach(item => {
|
|
7557
|
+
if (item.tagName === 'OPTGROUP' || item.tagName === 'PDS-TEXT') {
|
|
7558
|
+
currentGroupLabel = item;
|
|
7559
|
+
}
|
|
7560
|
+
else if (item.tagName === 'OPTION' && filteredOptions.includes(item)) {
|
|
7561
|
+
const optionEl = item;
|
|
7562
|
+
const parent = optionEl.parentElement;
|
|
7563
|
+
let labelToUse = null;
|
|
7564
|
+
if (parent && parent.tagName === 'OPTGROUP') {
|
|
7565
|
+
// Only use the actual parent optgroup as label
|
|
7566
|
+
labelToUse = parent;
|
|
7567
|
+
}
|
|
7568
|
+
else if (currentGroupLabel && currentGroupLabel.tagName === 'PDS-TEXT') {
|
|
7569
|
+
// Allow pds-text to label subsequent top-level options until another label appears
|
|
7570
|
+
labelToUse = currentGroupLabel;
|
|
7571
|
+
}
|
|
7572
|
+
if (labelToUse && !this.filteredItems.includes(labelToUse)) {
|
|
7573
|
+
this.filteredItems.push(labelToUse);
|
|
7574
|
+
}
|
|
7575
|
+
this.filteredItems.push(optionEl);
|
|
7576
|
+
}
|
|
7577
|
+
});
|
|
7194
7578
|
}
|
|
7195
7579
|
this.highlightedIndex = -1;
|
|
7196
7580
|
}
|
|
@@ -7221,7 +7605,109 @@ class PdsCombobox {
|
|
|
7221
7605
|
*/
|
|
7222
7606
|
async setFocus() {
|
|
7223
7607
|
var _a;
|
|
7224
|
-
(
|
|
7608
|
+
if (this.inputEl) {
|
|
7609
|
+
this.inputEl.focus();
|
|
7610
|
+
}
|
|
7611
|
+
else {
|
|
7612
|
+
(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
7613
|
+
}
|
|
7614
|
+
}
|
|
7615
|
+
/**
|
|
7616
|
+
* Focus management helper - moves focus to the first option when dropdown opens
|
|
7617
|
+
*/
|
|
7618
|
+
focusFirstOption() {
|
|
7619
|
+
if (this.isOpen) {
|
|
7620
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7621
|
+
if (selectableOptions.length > 0) {
|
|
7622
|
+
this.highlightedIndex = 0;
|
|
7623
|
+
// DON'T focus the option elements - keep focus on trigger and use aria-activedescendant
|
|
7624
|
+
// This prevents the focusout event that was closing the dropdown
|
|
7625
|
+
// But still call updateOptionFocus for scrolling
|
|
7626
|
+
if (this.listboxEl) {
|
|
7627
|
+
this.updateOptionFocus();
|
|
7628
|
+
}
|
|
7629
|
+
}
|
|
7630
|
+
}
|
|
7631
|
+
}
|
|
7632
|
+
/**
|
|
7633
|
+
* Focus management helper - actually focuses the first option when opened via arrow keys
|
|
7634
|
+
*/
|
|
7635
|
+
focusFirstOptionForArrowKeys() {
|
|
7636
|
+
if (this.isOpen) {
|
|
7637
|
+
// Set arrow-key navigation mode
|
|
7638
|
+
this.isArrowKeyNavigationMode = true;
|
|
7639
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7640
|
+
if (selectableOptions.length > 0) {
|
|
7641
|
+
this.highlightedIndex = 0;
|
|
7642
|
+
// For arrow key navigation, actually focus the first option
|
|
7643
|
+
if (this.listboxEl) {
|
|
7644
|
+
const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
|
|
7645
|
+
const firstOption = optionElements[0];
|
|
7646
|
+
if (firstOption) {
|
|
7647
|
+
// Remove tabindex from all options first
|
|
7648
|
+
optionElements.forEach(option => {
|
|
7649
|
+
option.setAttribute('tabindex', '-1');
|
|
7650
|
+
});
|
|
7651
|
+
// Set tabindex and focus on first option
|
|
7652
|
+
firstOption.setAttribute('tabindex', '0');
|
|
7653
|
+
firstOption.focus();
|
|
7654
|
+
firstOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
7655
|
+
}
|
|
7656
|
+
}
|
|
7657
|
+
// Update aria-activedescendant on trigger
|
|
7658
|
+
this.updateAriaActiveDescendant();
|
|
7659
|
+
}
|
|
7660
|
+
}
|
|
7661
|
+
}
|
|
7662
|
+
/**
|
|
7663
|
+
* Focus management helper - updates visual state and scrolling for the currently highlighted option
|
|
7664
|
+
* Note: We don't actually focus the option to prevent focusout events that close the dropdown
|
|
7665
|
+
*/
|
|
7666
|
+
updateOptionFocus() {
|
|
7667
|
+
if (!this.listboxEl || this.highlightedIndex < 0)
|
|
7668
|
+
return;
|
|
7669
|
+
const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
|
|
7670
|
+
const currentOption = optionElements[this.highlightedIndex];
|
|
7671
|
+
if (currentOption) {
|
|
7672
|
+
// Check if any option currently has focus OR if we're in arrow-key navigation mode
|
|
7673
|
+
const hasOptionFocus = Array.from(optionElements).some(el => el === document.activeElement);
|
|
7674
|
+
if (hasOptionFocus || this.isArrowKeyNavigationMode) {
|
|
7675
|
+
// We're in arrow-key navigation mode, so actually move focus between options
|
|
7676
|
+
optionElements.forEach(option => {
|
|
7677
|
+
option.setAttribute('tabindex', '-1');
|
|
7678
|
+
});
|
|
7679
|
+
currentOption.setAttribute('tabindex', '0');
|
|
7680
|
+
currentOption.focus();
|
|
7681
|
+
}
|
|
7682
|
+
// Always scroll the option into view
|
|
7683
|
+
currentOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
7684
|
+
}
|
|
7685
|
+
// Always update aria-activedescendant on the trigger element
|
|
7686
|
+
this.updateAriaActiveDescendant();
|
|
7687
|
+
}
|
|
7688
|
+
/**
|
|
7689
|
+
* Updates aria-activedescendant on the trigger element
|
|
7690
|
+
*/
|
|
7691
|
+
updateAriaActiveDescendant() {
|
|
7692
|
+
if (this.triggerEl && this.highlightedIndex >= 0) {
|
|
7693
|
+
this.triggerEl.setAttribute('aria-activedescendant', `pds-combobox-option-${this.highlightedIndex}`);
|
|
7694
|
+
}
|
|
7695
|
+
else if (this.triggerEl) {
|
|
7696
|
+
this.triggerEl.removeAttribute('aria-activedescendant');
|
|
7697
|
+
}
|
|
7698
|
+
}
|
|
7699
|
+
/**
|
|
7700
|
+
* Focus management helper - restores focus to the trigger element
|
|
7701
|
+
*/
|
|
7702
|
+
restoreFocusToTrigger() {
|
|
7703
|
+
setTimeout(() => {
|
|
7704
|
+
if (this.inputEl) {
|
|
7705
|
+
this.inputEl.focus();
|
|
7706
|
+
}
|
|
7707
|
+
else if (this.triggerEl) {
|
|
7708
|
+
this.triggerEl.focus();
|
|
7709
|
+
}
|
|
7710
|
+
}, 0);
|
|
7225
7711
|
}
|
|
7226
7712
|
/**
|
|
7227
7713
|
* Gets the value of the currently selected option.
|
|
@@ -7249,22 +7735,38 @@ class PdsCombobox {
|
|
|
7249
7735
|
this.pdsComboboxChange.emit({ value: option.value });
|
|
7250
7736
|
}
|
|
7251
7737
|
renderDropdown() {
|
|
7252
|
-
if (!this.isOpen || this.
|
|
7738
|
+
if (!this.isOpen || this.filteredItems.length === 0) {
|
|
7739
|
+
return null;
|
|
7740
|
+
}
|
|
7741
|
+
let optionIndex = 0;
|
|
7742
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7743
|
+
return (hAsync("ul", { class: "pds-combobox__listbox", role: "listbox", id: "pds-combobox-listbox", "aria-label": this.label || 'Options', "aria-multiselectable": "false", ref: el => (this.listboxEl = el) }, this.filteredItems.map((item, itemIdx) => {
|
|
7744
|
+
if (item.tagName === 'OPTGROUP') {
|
|
7745
|
+
const optgroup = item;
|
|
7746
|
+
return (hAsync("li", { key: `optgroup-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation", "aria-label": optgroup.label }, optgroup.label));
|
|
7747
|
+
}
|
|
7748
|
+
else if (item.tagName === 'PDS-TEXT') {
|
|
7749
|
+
const pdsText = item;
|
|
7750
|
+
return (hAsync("li", { key: `pds-text-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation" }, pdsText.textContent));
|
|
7751
|
+
}
|
|
7752
|
+
else if (item.tagName === 'OPTION') {
|
|
7753
|
+
const option = item;
|
|
7754
|
+
const isSelected = this.isOptionSelected(option);
|
|
7755
|
+
const isHighlighted = this.highlightedIndex === optionIndex;
|
|
7756
|
+
const isLayout = this.isOptionLayout(option);
|
|
7757
|
+
const currentOptionIndex = optionIndex++;
|
|
7758
|
+
return (hAsync("li", { key: option.value, id: `pds-combobox-option-${currentOptionIndex}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-setsize": selectableOptions.length, "aria-posinset": currentOptionIndex + 1, "aria-label": isLayout ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: isHighlighted ? '0' : '-1', class: {
|
|
7759
|
+
'pds-combobox__option': true,
|
|
7760
|
+
'pds-combobox__option--highlighted': isHighlighted,
|
|
7761
|
+
'pds-combobox__option--layout': isLayout,
|
|
7762
|
+
}, "data-option-index": currentOptionIndex, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : (this.getOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
|
|
7763
|
+
}
|
|
7253
7764
|
return null;
|
|
7254
|
-
return (hAsync("ul", { class: "pds-combobox__listbox", role: "listbox", id: "pds-combobox-listbox", ref: el => (this.listboxEl = el) }, this.filteredOptions.map((option, idx) => {
|
|
7255
|
-
const isSelected = this.isOptionSelected(option);
|
|
7256
|
-
const isHighlighted = this.highlightedIndex === idx;
|
|
7257
|
-
const isLayout = this.isOptionLayout(option);
|
|
7258
|
-
return (hAsync("li", { key: option.value, id: `pds-combobox-option-${idx}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', class: {
|
|
7259
|
-
'pds-combobox__option': true,
|
|
7260
|
-
'pds-combobox__option--highlighted': isHighlighted,
|
|
7261
|
-
'pds-combobox__option--layout': isLayout,
|
|
7262
|
-
}, "data-option-index": idx, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : (this.getOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
|
|
7263
7765
|
})));
|
|
7264
7766
|
}
|
|
7265
7767
|
// Helper method to render the caret icon
|
|
7266
7768
|
renderCaretIcon() {
|
|
7267
|
-
return hAsync("pds-icon", { icon: "caret-down", "aria-hidden": "true",
|
|
7769
|
+
return hAsync("pds-icon", { icon: "caret-down", "aria-hidden": "true", class: "pds-combobox__button-trigger-chevron" });
|
|
7268
7770
|
}
|
|
7269
7771
|
// Helper method to render layout content
|
|
7270
7772
|
renderLayoutContent() {
|
|
@@ -7296,10 +7798,10 @@ class PdsCombobox {
|
|
|
7296
7798
|
}
|
|
7297
7799
|
render() {
|
|
7298
7800
|
const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
|
|
7299
|
-
return (hAsync(Host, { key: '
|
|
7801
|
+
return (hAsync(Host, { key: 'a7e29f0e0c5ee43f1516b3668dbabb3231ecf728' }, hAsync("div", { key: '67da7d8953761ec64f30a4292785b7e8ed5d1449', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (hAsync("label", { key: '0f013de1a3d6ccdce2fe31c18b144f7178a2c30f', htmlFor: this.componentId, class: "pds-combobox__label" }, hAsync("span", { key: '3c7dfa84d68565e10b5784aa2365d9c5164b7d06', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
7300
7802
|
this.inputEl = el;
|
|
7301
7803
|
this.triggerEl = el;
|
|
7302
|
-
}, class: "pds-combobox__input",
|
|
7804
|
+
}, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), hAsync("div", { key: 'cbf26d489f2ffc32fc1f0820f962aef74b62bed4', style: { display: 'none' } }, hAsync("slot", { key: 'ad01cd795f9cd5aba1bbe25d0dac2d489b3e5f20', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
|
|
7303
7805
|
}
|
|
7304
7806
|
get el() { return getElement(this); }
|
|
7305
7807
|
static get watchers() { return {
|
|
@@ -7326,7 +7828,7 @@ class PdsCombobox {
|
|
|
7326
7828
|
"triggerWidth": [1, "trigger-width"],
|
|
7327
7829
|
"triggerVariant": [1, "trigger-variant"],
|
|
7328
7830
|
"value": [1025],
|
|
7329
|
-
"
|
|
7831
|
+
"filteredItems": [32],
|
|
7330
7832
|
"highlightedIndex": [32],
|
|
7331
7833
|
"isOpen": [32],
|
|
7332
7834
|
"selectedOption": [32],
|
|
@@ -7799,7 +8301,7 @@ class PdsDropdownMenuItem {
|
|
|
7799
8301
|
}; }
|
|
7800
8302
|
}
|
|
7801
8303
|
|
|
7802
|
-
const pdsDropdownMenuSeparatorCss = ":host hr{border:1px solid var(--pine-color-border);margin-block:var(--pine-dimension-xs)}";
|
|
8304
|
+
const pdsDropdownMenuSeparatorCss = ":host hr{border:0;border-top:1px solid var(--pine-color-border);height:0;margin-block:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1)}";
|
|
7803
8305
|
|
|
7804
8306
|
class PdsDropdownMenuSeparator {
|
|
7805
8307
|
constructor(hostRef) {
|
|
@@ -7827,6 +8329,540 @@ class PdsDropdownMenuSeparator {
|
|
|
7827
8329
|
}; }
|
|
7828
8330
|
}
|
|
7829
8331
|
|
|
8332
|
+
const pdsFilterCss = ":host{--box-shadow-focus:0 0 0 1px var(--pine-color-white), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border-width-thin) solid var(--pine-color-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-placeholder);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-grey-800);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-grey-100);border-color:var(--pine-color-grey-400);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-grey-800)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-grey-050);border:var(--pine-border-width-thin) dashed var(--pine-color-grey-300);color:var(--pine-color-text-placeholder)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-grey-800)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-grey-100);border-color:var(--pine-color-grey-400);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-grey-800)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-container);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);display:none;inline-size:228px;inset:unset;padding:var(--pine-dimension-100);z-index:1000;}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger left);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-start:anchor(--filter-trigger right);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-start:anchor(--filter-trigger right);-webkit-transform:translate(-100%, calc(-100% - var(--pine-dimension-100)));transform:translate(-100%, calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-start:anchor(--filter-trigger right);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-start:anchor(--filter-trigger right);-webkit-transform:translate(-100%, calc(-100% - var(--pine-dimension-100)));transform:translate(-100%, calc(-100% - var(--pine-dimension-100)))}}";
|
|
8333
|
+
|
|
8334
|
+
/**
|
|
8335
|
+
* Individual filter component with cross-browser popover positioning.
|
|
8336
|
+
*
|
|
8337
|
+
* Uses a hybrid approach for optimal cross-browser compatibility:
|
|
8338
|
+
* - Modern browsers: CSS anchor positioning + JavaScript flip classes
|
|
8339
|
+
* - Fallback browsers: JavaScript positioning with viewport boundary detection
|
|
8340
|
+
*
|
|
8341
|
+
* @part button - Exposes the trigger button element for styling.
|
|
8342
|
+
* @part button-content - Exposes the button content container for styling.
|
|
8343
|
+
* @part button-text - Exposes the button text for styling.
|
|
8344
|
+
* @part icon - Exposes the icon component for styling.
|
|
8345
|
+
* @part popover - Exposes the popover container for styling.
|
|
8346
|
+
* @slot (default) - Popover content that will be displayed when the filter is open.
|
|
8347
|
+
*/
|
|
8348
|
+
class PdsFilter {
|
|
8349
|
+
constructor(hostRef) {
|
|
8350
|
+
registerInstance(this, hostRef);
|
|
8351
|
+
this.pdsFilterOpen = createEvent(this, "pdsFilterOpen");
|
|
8352
|
+
this.pdsFilterClose = createEvent(this, "pdsFilterClose");
|
|
8353
|
+
this.pdsFilterClear = createEvent(this, "pdsFilterClear");
|
|
8354
|
+
this.scrollRAF = null;
|
|
8355
|
+
this.lastScrollTime = 0;
|
|
8356
|
+
/**
|
|
8357
|
+
* The variant style of the filter trigger.
|
|
8358
|
+
* @defaultValue 'default'
|
|
8359
|
+
*/
|
|
8360
|
+
this.variant = 'default';
|
|
8361
|
+
/**
|
|
8362
|
+
* State to track if the popover is open.
|
|
8363
|
+
*/
|
|
8364
|
+
this.isOpen = false;
|
|
8365
|
+
/**
|
|
8366
|
+
* Handle native popover toggle events directly on the element
|
|
8367
|
+
* This is needed for browsers with native Popover API support
|
|
8368
|
+
*/
|
|
8369
|
+
this.handleNativePopoverToggle = (event) => {
|
|
8370
|
+
const target = event.target;
|
|
8371
|
+
if (target && target.id === `${this.componentId}-popover`) {
|
|
8372
|
+
// Check current popover state
|
|
8373
|
+
let isCurrentlyOpen = false;
|
|
8374
|
+
try {
|
|
8375
|
+
isCurrentlyOpen = target.matches(':popover-open');
|
|
8376
|
+
}
|
|
8377
|
+
catch (error) {
|
|
8378
|
+
// Fallback if :popover-open selector isn't supported
|
|
8379
|
+
isCurrentlyOpen = target.style.display === 'block';
|
|
8380
|
+
}
|
|
8381
|
+
// Update state
|
|
8382
|
+
this.isOpen = isCurrentlyOpen;
|
|
8383
|
+
if (this.isOpen) {
|
|
8384
|
+
setTimeout(() => this.adjustPopoverPosition(), 0);
|
|
8385
|
+
this.pdsFilterOpen.emit({
|
|
8386
|
+
componentId: this.componentId,
|
|
8387
|
+
variant: this.variant,
|
|
8388
|
+
text: this.text,
|
|
8389
|
+
});
|
|
8390
|
+
}
|
|
8391
|
+
else {
|
|
8392
|
+
this.pdsFilterClose.emit({
|
|
8393
|
+
componentId: this.componentId,
|
|
8394
|
+
variant: this.variant,
|
|
8395
|
+
text: this.text,
|
|
8396
|
+
});
|
|
8397
|
+
}
|
|
8398
|
+
}
|
|
8399
|
+
};
|
|
8400
|
+
/**
|
|
8401
|
+
* Handle keyboard interactions for clear variant only.
|
|
8402
|
+
*/
|
|
8403
|
+
this.handleKeyDown = (event) => {
|
|
8404
|
+
// Only handle clear variant manually, let native API handle everything else
|
|
8405
|
+
if (this.variant === 'clear' && (event.key === 'Enter' || event.key === ' ')) {
|
|
8406
|
+
event.preventDefault();
|
|
8407
|
+
this.handleClick();
|
|
8408
|
+
}
|
|
8409
|
+
};
|
|
8410
|
+
/**
|
|
8411
|
+
* Handle trigger button click. Clear variant emits event, others toggle popover.
|
|
8412
|
+
*/
|
|
8413
|
+
this.handleClick = (event) => {
|
|
8414
|
+
if (this.variant === 'clear') {
|
|
8415
|
+
this.pdsFilterClear.emit({
|
|
8416
|
+
componentId: this.componentId,
|
|
8417
|
+
text: this.text,
|
|
8418
|
+
});
|
|
8419
|
+
return;
|
|
8420
|
+
}
|
|
8421
|
+
this.closeOtherPopovers();
|
|
8422
|
+
// Check for popover API support
|
|
8423
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8424
|
+
if (!supportsPopoverAPI) {
|
|
8425
|
+
// Manual fallback for browsers without popover API support
|
|
8426
|
+
// Prevent default to avoid conflicts with any native behavior
|
|
8427
|
+
if (event) {
|
|
8428
|
+
event.preventDefault();
|
|
8429
|
+
}
|
|
8430
|
+
setTimeout(() => {
|
|
8431
|
+
if (this.popoverEl != null) {
|
|
8432
|
+
this.isOpen = !this.isOpen;
|
|
8433
|
+
if (this.isOpen) {
|
|
8434
|
+
this.popoverEl.style.display = 'block';
|
|
8435
|
+
this.popoverEl.classList.add('is-open');
|
|
8436
|
+
this.adjustPopoverPosition();
|
|
8437
|
+
this.pdsFilterOpen.emit({
|
|
8438
|
+
componentId: this.componentId,
|
|
8439
|
+
variant: this.variant,
|
|
8440
|
+
text: this.text,
|
|
8441
|
+
});
|
|
8442
|
+
}
|
|
8443
|
+
else {
|
|
8444
|
+
this.popoverEl.style.display = 'none';
|
|
8445
|
+
this.popoverEl.classList.remove('is-open');
|
|
8446
|
+
this.pdsFilterClose.emit({
|
|
8447
|
+
componentId: this.componentId,
|
|
8448
|
+
variant: this.variant,
|
|
8449
|
+
text: this.text,
|
|
8450
|
+
});
|
|
8451
|
+
}
|
|
8452
|
+
}
|
|
8453
|
+
}, 0);
|
|
8454
|
+
}
|
|
8455
|
+
// For browsers with native popover API, let the native behavior handle the toggle
|
|
8456
|
+
// The toggle event listener will capture the state change and emit events
|
|
8457
|
+
};
|
|
8458
|
+
}
|
|
8459
|
+
/**
|
|
8460
|
+
* Component lifecycle: Clean up when disconnected from DOM.
|
|
8461
|
+
* Prevents memory leaks by canceling pending operations and closing popovers.
|
|
8462
|
+
*/
|
|
8463
|
+
disconnectedCallback() {
|
|
8464
|
+
// Cancel pending animation frames
|
|
8465
|
+
if (this.scrollRAF) {
|
|
8466
|
+
cancelAnimationFrame(this.scrollRAF);
|
|
8467
|
+
this.scrollRAF = null;
|
|
8468
|
+
}
|
|
8469
|
+
this.lastScrollTime = 0;
|
|
8470
|
+
// Clean up native popover event listeners
|
|
8471
|
+
if (this.popoverEl) {
|
|
8472
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8473
|
+
if (supportsPopoverAPI) {
|
|
8474
|
+
this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
|
|
8475
|
+
}
|
|
8476
|
+
}
|
|
8477
|
+
// Ensure popover is closed
|
|
8478
|
+
if (this.isOpen && this.popoverEl) {
|
|
8479
|
+
try {
|
|
8480
|
+
this.popoverEl.hidePopover();
|
|
8481
|
+
}
|
|
8482
|
+
catch (error) {
|
|
8483
|
+
this.popoverEl.style.display = 'none';
|
|
8484
|
+
this.popoverEl.classList.remove('is-open');
|
|
8485
|
+
}
|
|
8486
|
+
}
|
|
8487
|
+
}
|
|
8488
|
+
componentDidRender() {
|
|
8489
|
+
// Note: popoverEl is set via ref callback in render method
|
|
8490
|
+
// For browsers with native popover API, we need direct element listeners
|
|
8491
|
+
// since the document listener may not capture native popover toggle events
|
|
8492
|
+
if (this.popoverEl) {
|
|
8493
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8494
|
+
if (supportsPopoverAPI) {
|
|
8495
|
+
// Remove any existing listeners to avoid duplicates
|
|
8496
|
+
this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
|
|
8497
|
+
// Add direct listener for native popover events
|
|
8498
|
+
this.popoverEl.addEventListener('toggle', this.handleNativePopoverToggle);
|
|
8499
|
+
}
|
|
8500
|
+
}
|
|
8501
|
+
}
|
|
8502
|
+
/**
|
|
8503
|
+
* Reposition popovers on window resize.
|
|
8504
|
+
*/
|
|
8505
|
+
handleWindowResize() {
|
|
8506
|
+
if (this.isOpen) {
|
|
8507
|
+
setTimeout(() => this.adjustPopoverPosition(), 16);
|
|
8508
|
+
}
|
|
8509
|
+
}
|
|
8510
|
+
/**
|
|
8511
|
+
* Reposition popovers on scroll with performance throttling.
|
|
8512
|
+
*/
|
|
8513
|
+
handleWindowScroll() {
|
|
8514
|
+
if (this.isOpen) {
|
|
8515
|
+
const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
|
|
8516
|
+
const now = performance.now();
|
|
8517
|
+
const throttleMs = supportsAnchorPositioning ? 66 : 33;
|
|
8518
|
+
if (now - this.lastScrollTime < throttleMs) {
|
|
8519
|
+
return;
|
|
8520
|
+
}
|
|
8521
|
+
this.lastScrollTime = now;
|
|
8522
|
+
if (this.scrollRAF) {
|
|
8523
|
+
cancelAnimationFrame(this.scrollRAF);
|
|
8524
|
+
}
|
|
8525
|
+
this.scrollRAF = requestAnimationFrame(() => {
|
|
8526
|
+
if (this.isOpen && this.popoverEl && this.el.isConnected) {
|
|
8527
|
+
this.adjustPopoverPosition();
|
|
8528
|
+
}
|
|
8529
|
+
this.scrollRAF = null;
|
|
8530
|
+
});
|
|
8531
|
+
}
|
|
8532
|
+
}
|
|
8533
|
+
/**
|
|
8534
|
+
* Closes other open filter popovers to ensure only one is open at a time.
|
|
8535
|
+
*/
|
|
8536
|
+
closeOtherPopovers() {
|
|
8537
|
+
const allFilters = document.querySelectorAll('pds-filter');
|
|
8538
|
+
allFilters.forEach((filter) => {
|
|
8539
|
+
var _a;
|
|
8540
|
+
if (filter === this.el)
|
|
8541
|
+
return;
|
|
8542
|
+
const popover = (_a = filter.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__popover');
|
|
8543
|
+
if (popover) {
|
|
8544
|
+
// Check for popover API support to avoid crashes
|
|
8545
|
+
let isPopoverOpen = false;
|
|
8546
|
+
try {
|
|
8547
|
+
isPopoverOpen = popover.matches(':popover-open');
|
|
8548
|
+
}
|
|
8549
|
+
catch (error) {
|
|
8550
|
+
// Fallback if :popover-open selector isn't supported
|
|
8551
|
+
isPopoverOpen = popover.style.display === 'block';
|
|
8552
|
+
}
|
|
8553
|
+
if (isPopoverOpen) {
|
|
8554
|
+
try {
|
|
8555
|
+
popover.hidePopover();
|
|
8556
|
+
}
|
|
8557
|
+
catch (error) {
|
|
8558
|
+
popover.style.display = 'none';
|
|
8559
|
+
popover.classList.remove('is-open');
|
|
8560
|
+
}
|
|
8561
|
+
}
|
|
8562
|
+
}
|
|
8563
|
+
});
|
|
8564
|
+
}
|
|
8565
|
+
/**
|
|
8566
|
+
* Adjusts popover position to keep it within viewport bounds.
|
|
8567
|
+
* Uses CSS anchor positioning for modern browsers, JavaScript for fallback browsers.
|
|
8568
|
+
*/
|
|
8569
|
+
adjustPopoverPosition() {
|
|
8570
|
+
var _a;
|
|
8571
|
+
if (!this.popoverEl || this.variant === 'clear')
|
|
8572
|
+
return;
|
|
8573
|
+
const triggerEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__trigger');
|
|
8574
|
+
if (!triggerEl)
|
|
8575
|
+
return;
|
|
8576
|
+
const triggerRect = triggerEl.getBoundingClientRect();
|
|
8577
|
+
const viewportWidth = window.innerWidth;
|
|
8578
|
+
const viewportHeight = window.innerHeight;
|
|
8579
|
+
const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
|
|
8580
|
+
// Get dimensions for boundary detection
|
|
8581
|
+
const popoverWidth = 228;
|
|
8582
|
+
const popoverHeight = this.popoverEl.getBoundingClientRect().height || 200;
|
|
8583
|
+
// Boundary detection for flipping
|
|
8584
|
+
const bufferSpace = 20;
|
|
8585
|
+
const wouldOverflowRight = (triggerRect.left + popoverWidth + bufferSpace) > viewportWidth;
|
|
8586
|
+
const wouldOverflowBottom = (triggerRect.bottom + 8 + popoverHeight + bufferSpace) > viewportHeight;
|
|
8587
|
+
if (supportsAnchorPositioning) {
|
|
8588
|
+
// Modern browsers: CSS anchor positioning + JavaScript-controlled flipping
|
|
8589
|
+
this.popoverEl.classList.remove('popover-flip-horizontal', 'popover-flip-vertical');
|
|
8590
|
+
if (wouldOverflowRight) {
|
|
8591
|
+
this.popoverEl.classList.add('popover-flip-horizontal');
|
|
8592
|
+
}
|
|
8593
|
+
if (wouldOverflowBottom) {
|
|
8594
|
+
this.popoverEl.classList.add('popover-flip-vertical');
|
|
8595
|
+
}
|
|
8596
|
+
}
|
|
8597
|
+
else {
|
|
8598
|
+
// Fallback browsers: JavaScript positioning with boundary detection
|
|
8599
|
+
let left = triggerRect.left;
|
|
8600
|
+
let top = triggerRect.bottom + 8;
|
|
8601
|
+
let transformOrigin = 'top left';
|
|
8602
|
+
// Apply horizontal flipping if needed
|
|
8603
|
+
if (wouldOverflowRight) {
|
|
8604
|
+
const actualPopoverWidth = this.popoverEl.getBoundingClientRect().width || popoverWidth;
|
|
8605
|
+
left = triggerRect.right - actualPopoverWidth;
|
|
8606
|
+
transformOrigin = 'top right';
|
|
8607
|
+
}
|
|
8608
|
+
// Apply vertical flipping if needed
|
|
8609
|
+
if (wouldOverflowBottom) {
|
|
8610
|
+
top = triggerRect.top - popoverHeight - 8;
|
|
8611
|
+
transformOrigin = transformOrigin.replace('top', 'bottom');
|
|
8612
|
+
}
|
|
8613
|
+
// Apply positioning in single DOM write for performance
|
|
8614
|
+
this.popoverEl.style.cssText = `
|
|
8615
|
+
position: fixed;
|
|
8616
|
+
left: ${left}px;
|
|
8617
|
+
top: ${top}px;
|
|
8618
|
+
z-index: 1000;
|
|
8619
|
+
transform-origin: ${transformOrigin};
|
|
8620
|
+
`;
|
|
8621
|
+
}
|
|
8622
|
+
}
|
|
8623
|
+
/**
|
|
8624
|
+
* Opens the filter popover programmatically.
|
|
8625
|
+
* Note: Clear variant does not support popover functionality.
|
|
8626
|
+
*/
|
|
8627
|
+
async showFilter() {
|
|
8628
|
+
if (this.variant === 'clear') {
|
|
8629
|
+
console.warn('Clear variant does not support showFilter method');
|
|
8630
|
+
return;
|
|
8631
|
+
}
|
|
8632
|
+
if (this.popoverEl != null) {
|
|
8633
|
+
try {
|
|
8634
|
+
this.popoverEl.showPopover();
|
|
8635
|
+
}
|
|
8636
|
+
catch (error) {
|
|
8637
|
+
// Fallback for testing environment where showPopover is not available
|
|
8638
|
+
this.popoverEl.style.display = 'block';
|
|
8639
|
+
this.popoverEl.classList.add('is-open');
|
|
8640
|
+
}
|
|
8641
|
+
}
|
|
8642
|
+
}
|
|
8643
|
+
/**
|
|
8644
|
+
* Closes the filter popover programmatically.
|
|
8645
|
+
* Note: Clear variant does not support popover functionality.
|
|
8646
|
+
*/
|
|
8647
|
+
async hideFilter() {
|
|
8648
|
+
if (this.variant === 'clear') {
|
|
8649
|
+
console.warn('Clear variant does not support hideFilter method');
|
|
8650
|
+
return;
|
|
8651
|
+
}
|
|
8652
|
+
if (this.popoverEl != null) {
|
|
8653
|
+
try {
|
|
8654
|
+
this.popoverEl.hidePopover();
|
|
8655
|
+
}
|
|
8656
|
+
catch (error) {
|
|
8657
|
+
// Fallback for testing environment where hidePopover is not available
|
|
8658
|
+
this.popoverEl.style.display = 'none';
|
|
8659
|
+
this.popoverEl.classList.remove('is-open');
|
|
8660
|
+
}
|
|
8661
|
+
}
|
|
8662
|
+
}
|
|
8663
|
+
/**
|
|
8664
|
+
* Listen for popover toggle events for browsers without native Popover API (fallback).
|
|
8665
|
+
* Native API browsers use direct element listeners to avoid conflicts.
|
|
8666
|
+
*/
|
|
8667
|
+
handlePopoverToggle(event) {
|
|
8668
|
+
const target = event.target;
|
|
8669
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8670
|
+
// Only handle events for fallback browsers (Firefox) to avoid duplicate handling
|
|
8671
|
+
if (!supportsPopoverAPI && target && target.id === `${this.componentId}-popover`) {
|
|
8672
|
+
// Check for popover API support to avoid crashes
|
|
8673
|
+
let isCurrentlyOpen = false;
|
|
8674
|
+
try {
|
|
8675
|
+
isCurrentlyOpen = target.matches(':popover-open');
|
|
8676
|
+
}
|
|
8677
|
+
catch (error) {
|
|
8678
|
+
// Fallback if :popover-open selector isn't supported
|
|
8679
|
+
isCurrentlyOpen = target.style.display === 'block';
|
|
8680
|
+
}
|
|
8681
|
+
// Update state
|
|
8682
|
+
this.isOpen = isCurrentlyOpen;
|
|
8683
|
+
if (this.isOpen) {
|
|
8684
|
+
setTimeout(() => this.adjustPopoverPosition(), 0);
|
|
8685
|
+
this.pdsFilterOpen.emit({
|
|
8686
|
+
componentId: this.componentId,
|
|
8687
|
+
variant: this.variant,
|
|
8688
|
+
text: this.text,
|
|
8689
|
+
});
|
|
8690
|
+
}
|
|
8691
|
+
else {
|
|
8692
|
+
this.pdsFilterClose.emit({
|
|
8693
|
+
componentId: this.componentId,
|
|
8694
|
+
variant: this.variant,
|
|
8695
|
+
text: this.text,
|
|
8696
|
+
});
|
|
8697
|
+
}
|
|
8698
|
+
}
|
|
8699
|
+
}
|
|
8700
|
+
/**
|
|
8701
|
+
* Listen for clicks to detect outside dismissal.
|
|
8702
|
+
*/
|
|
8703
|
+
handleDocumentClick(event) {
|
|
8704
|
+
// Check if click is outside and popover gets closed
|
|
8705
|
+
if (!this.el.contains(event.target) && this.isOpen && this.variant !== 'clear') {
|
|
8706
|
+
setTimeout(() => {
|
|
8707
|
+
if (this.popoverEl && this.isOpen) {
|
|
8708
|
+
// Check for popover API support to avoid crashes
|
|
8709
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8710
|
+
let popoverIsClosed = false;
|
|
8711
|
+
if (supportsPopoverAPI) {
|
|
8712
|
+
try {
|
|
8713
|
+
popoverIsClosed = !this.popoverEl.matches(':popover-open');
|
|
8714
|
+
}
|
|
8715
|
+
catch (error) {
|
|
8716
|
+
// Fallback if :popover-open selector isn't supported
|
|
8717
|
+
popoverIsClosed = this.popoverEl.style.display !== 'block';
|
|
8718
|
+
}
|
|
8719
|
+
}
|
|
8720
|
+
else {
|
|
8721
|
+
// Manual fallback - assume popover was closed by outside click
|
|
8722
|
+
popoverIsClosed = true;
|
|
8723
|
+
}
|
|
8724
|
+
if (popoverIsClosed) {
|
|
8725
|
+
this.isOpen = false;
|
|
8726
|
+
if (!supportsPopoverAPI) {
|
|
8727
|
+
this.popoverEl.style.display = 'none';
|
|
8728
|
+
this.popoverEl.classList.remove('is-open');
|
|
8729
|
+
}
|
|
8730
|
+
this.pdsFilterClose.emit({
|
|
8731
|
+
componentId: this.componentId,
|
|
8732
|
+
variant: this.variant,
|
|
8733
|
+
text: this.text,
|
|
8734
|
+
});
|
|
8735
|
+
}
|
|
8736
|
+
}
|
|
8737
|
+
}, 0);
|
|
8738
|
+
}
|
|
8739
|
+
}
|
|
8740
|
+
/**
|
|
8741
|
+
* Listen for Escape key to ensure close event fires.
|
|
8742
|
+
*/
|
|
8743
|
+
handleEscapeKey(event) {
|
|
8744
|
+
if (event.key === 'Escape' && this.isOpen && this.variant !== 'clear') {
|
|
8745
|
+
// Check if popover was closed by Escape
|
|
8746
|
+
setTimeout(() => {
|
|
8747
|
+
if (this.popoverEl && this.isOpen) {
|
|
8748
|
+
// Check for popover API support to avoid crashes
|
|
8749
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8750
|
+
let popoverIsClosed = false;
|
|
8751
|
+
if (supportsPopoverAPI) {
|
|
8752
|
+
try {
|
|
8753
|
+
popoverIsClosed = !this.popoverEl.matches(':popover-open');
|
|
8754
|
+
}
|
|
8755
|
+
catch (error) {
|
|
8756
|
+
// Fallback if :popover-open selector isn't supported
|
|
8757
|
+
popoverIsClosed = this.popoverEl.style.display !== 'block';
|
|
8758
|
+
}
|
|
8759
|
+
}
|
|
8760
|
+
else {
|
|
8761
|
+
// Manual fallback - assume popover was closed by Escape
|
|
8762
|
+
popoverIsClosed = true;
|
|
8763
|
+
}
|
|
8764
|
+
if (popoverIsClosed) {
|
|
8765
|
+
this.isOpen = false;
|
|
8766
|
+
if (!supportsPopoverAPI) {
|
|
8767
|
+
this.popoverEl.style.display = 'none';
|
|
8768
|
+
this.popoverEl.classList.remove('is-open');
|
|
8769
|
+
}
|
|
8770
|
+
this.pdsFilterClose.emit({
|
|
8771
|
+
componentId: this.componentId,
|
|
8772
|
+
variant: this.variant,
|
|
8773
|
+
text: this.text,
|
|
8774
|
+
});
|
|
8775
|
+
}
|
|
8776
|
+
}
|
|
8777
|
+
}, 0);
|
|
8778
|
+
}
|
|
8779
|
+
}
|
|
8780
|
+
/**
|
|
8781
|
+
* Get the appropriate icon for the variant.
|
|
8782
|
+
*/
|
|
8783
|
+
getIcon() {
|
|
8784
|
+
if (this.variant === 'clear') {
|
|
8785
|
+
return trash;
|
|
8786
|
+
}
|
|
8787
|
+
return this.icon;
|
|
8788
|
+
}
|
|
8789
|
+
/**
|
|
8790
|
+
* Get CSS classes for the trigger button.
|
|
8791
|
+
*/
|
|
8792
|
+
getTriggerClasses() {
|
|
8793
|
+
const classes = ['pds-filter__trigger'];
|
|
8794
|
+
classes.push(`pds-filter__trigger--${this.variant}`);
|
|
8795
|
+
if (this.isOpen && this.variant !== 'clear') {
|
|
8796
|
+
classes.push('pds-filter__trigger--open');
|
|
8797
|
+
}
|
|
8798
|
+
return classes.join(' ');
|
|
8799
|
+
}
|
|
8800
|
+
/**
|
|
8801
|
+
* Render the trigger icon.
|
|
8802
|
+
*/
|
|
8803
|
+
renderIcon() {
|
|
8804
|
+
const iconToRender = this.getIcon();
|
|
8805
|
+
if (iconToRender == null || iconToRender === '')
|
|
8806
|
+
return null;
|
|
8807
|
+
return (hAsync("pds-icon", { icon: iconToRender, size: "var(--pine-font-size-100)", "aria-hidden": "true", part: "icon" }));
|
|
8808
|
+
}
|
|
8809
|
+
/**
|
|
8810
|
+
* Render the dropdown icon for selected variant.
|
|
8811
|
+
*/
|
|
8812
|
+
renderDropdownIcon() {
|
|
8813
|
+
if (this.variant === 'selected') {
|
|
8814
|
+
return (hAsync("pds-icon", { icon: enlarge, size: "var(--pine-dimension-200)", "aria-hidden": "true", class: "pds-filter__dropdown-icon", part: "icon" }));
|
|
8815
|
+
}
|
|
8816
|
+
return null;
|
|
8817
|
+
}
|
|
8818
|
+
render() {
|
|
8819
|
+
return (hAsync(Host, { key: 'b71d1cab5042924f757ddda1eacfb890f42e9fed', id: this.componentId }, hAsync("button", { key: '0ffe440aa5ac796b11a07f0628c51ed7a9d2788c', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, hAsync("span", { key: 'b4c2039d6eb44f7f0126cbe7a6d93a24b5fbcece', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: 'ef09dc1271e7229600cc9dc325e050639b68576d', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: '32348303268d267afa96649f8b289bb729757a00', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: '416aa12e660af5b69033f9145229da3b170d0414' })))));
|
|
8820
|
+
}
|
|
8821
|
+
get el() { return getElement(this); }
|
|
8822
|
+
static get style() { return pdsFilterCss; }
|
|
8823
|
+
static get cmpMeta() { return {
|
|
8824
|
+
"$flags$": 9,
|
|
8825
|
+
"$tagName$": "pds-filter",
|
|
8826
|
+
"$members$": {
|
|
8827
|
+
"componentId": [1, "component-id"],
|
|
8828
|
+
"variant": [1],
|
|
8829
|
+
"icon": [1],
|
|
8830
|
+
"text": [1],
|
|
8831
|
+
"isOpen": [32],
|
|
8832
|
+
"showFilter": [64],
|
|
8833
|
+
"hideFilter": [64]
|
|
8834
|
+
},
|
|
8835
|
+
"$listeners$": [[9, "resize", "handleWindowResize"], [9, "scroll", "handleWindowScroll"], [4, "toggle", "handlePopoverToggle"], [4, "click", "handleDocumentClick"], [4, "keydown", "handleEscapeKey"]],
|
|
8836
|
+
"$lazyBundleId$": "-",
|
|
8837
|
+
"$attrsToReflect$": []
|
|
8838
|
+
}; }
|
|
8839
|
+
}
|
|
8840
|
+
|
|
8841
|
+
const pdsFiltersCss = ":host{display:block}.pds-filters{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-100)}";
|
|
8842
|
+
|
|
8843
|
+
/**
|
|
8844
|
+
* @slot (default) - Container for pds-filter components.
|
|
8845
|
+
*/
|
|
8846
|
+
class PdsFilters {
|
|
8847
|
+
constructor(hostRef) {
|
|
8848
|
+
registerInstance(this, hostRef);
|
|
8849
|
+
}
|
|
8850
|
+
render() {
|
|
8851
|
+
return (hAsync(Host, { key: '7007a635d3866781dfd67bd2d3b2dab46d36cffc', id: this.componentId }, hAsync("div", { key: 'e6eb4c76bfb39050aaa01ad297df995de7df484b', class: "pds-filters" }, hAsync("slot", { key: '543c83c7422b3e1e9a2446618fe8119d76478df4' }))));
|
|
8852
|
+
}
|
|
8853
|
+
static get style() { return pdsFiltersCss; }
|
|
8854
|
+
static get cmpMeta() { return {
|
|
8855
|
+
"$flags$": 9,
|
|
8856
|
+
"$tagName$": "pds-filters",
|
|
8857
|
+
"$members$": {
|
|
8858
|
+
"componentId": [1, "component-id"]
|
|
8859
|
+
},
|
|
8860
|
+
"$listeners$": undefined,
|
|
8861
|
+
"$lazyBundleId$": "-",
|
|
8862
|
+
"$attrsToReflect$": []
|
|
8863
|
+
}; }
|
|
8864
|
+
}
|
|
8865
|
+
|
|
7830
8866
|
let missingAssetPathWarning = false;
|
|
7831
8867
|
/**
|
|
7832
8868
|
*
|
|
@@ -8275,9 +9311,9 @@ class PdsImage {
|
|
|
8275
9311
|
this.loading = 'eager';
|
|
8276
9312
|
}
|
|
8277
9313
|
render() {
|
|
8278
|
-
return (hAsync(Host, { key: '
|
|
9314
|
+
return (hAsync(Host, { key: 'fa205f03d5c378d27a66cbfd520ae2bc7ab9e9df', class: {
|
|
8279
9315
|
'pds-image': true,
|
|
8280
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
9316
|
+
}, id: this.componentId }, hAsync("img", { key: '8d03dddf6e924ef8aebea2bf34a32e326bee329a', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
|
|
8281
9317
|
}
|
|
8282
9318
|
static get style() { return pdsImageCss; }
|
|
8283
9319
|
static get cmpMeta() { return {
|
|
@@ -8561,7 +9597,7 @@ class PdsInput {
|
|
|
8561
9597
|
'has-prepend': this.hasPrepend,
|
|
8562
9598
|
'has-append': this.hasAppend,
|
|
8563
9599
|
};
|
|
8564
|
-
return (hAsync(Host, { key: '
|
|
9600
|
+
return (hAsync(Host, { key: '354d45806da5e4b1c7a40f08f78d969b67e590ec', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: '9298d99d233733fd4da14ae3e47f9f111539b976', class: "pds-input" }, label && (hAsync("div", { key: 'ade5fa1c70587487d62f5c3f8f50c3c567ca1f76', class: "pds-input__label-wrapper" }, hAsync("label", { key: '86a3a890317e2bf4e8d0b0cdc2d4ea10c8656a9f', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: '279a7b4540cd984a7c99a083f18b7a1854415ef1', class: this.hideLabel ? 'visually-hidden' : '' }, label, this.required && hAsync("span", { key: 'a12223c985ae3a6474a1ea6cb850a500c38af4e4', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '1b618690bbe9178b9b4c917fb7894ec2c17ac563', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '171361ec863409965e71b96a636c6c5450047bf6', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (hAsync("p", { key: '22f2f1d5efe8c9178bb2eecba072de728826f0c0', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'd13ca2940f42cfaac744db106dbd5c6442fdd7e0', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: 'a1622ddd2868470683a2413893cb87d7479acde1', icon: danger, size: "small" }), errorMessage)))));
|
|
8565
9601
|
}
|
|
8566
9602
|
static get formAssociated() { return true; }
|
|
8567
9603
|
get el() { return getElement(this); }
|
|
@@ -8657,8 +9693,8 @@ class PdsLink {
|
|
|
8657
9693
|
return linkStyles;
|
|
8658
9694
|
}
|
|
8659
9695
|
render() {
|
|
8660
|
-
return (hAsync("a", { key: '
|
|
8661
|
-
hAsync("pds-icon", { key: '
|
|
9696
|
+
return (hAsync("a", { key: '41fb1adaf85b50054f6ea67e96a36d221a00a5b7', class: this.classNames(), href: this.href, id: this.componentId, part: "link", target: this.external ? '_blank' : undefined, style: this.setLinkStyles() }, hAsync("slot", { key: '189205c07159e481e26d74db98b34e1d37edd8b5' }, this.href), this.external &&
|
|
9697
|
+
hAsync("pds-icon", { key: '19fc60fe515fa53b22ad770c5d8f52ef42d16fd5', icon: launch, size: this.fontSize })));
|
|
8662
9698
|
}
|
|
8663
9699
|
static get style() { return pdsLinkCss; }
|
|
8664
9700
|
static get cmpMeta() { return {
|
|
@@ -8728,7 +9764,7 @@ class PdsLoader {
|
|
|
8728
9764
|
}
|
|
8729
9765
|
}
|
|
8730
9766
|
render() {
|
|
8731
|
-
return (hAsync(Host, { key: '
|
|
9767
|
+
return (hAsync(Host, { key: 'd648f1d95f06915b3192955f78c9a4ba459adf3d', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (hAsync("div", { key: 'a1152f82ddffc3ff18ac23f522432e73eaa4051e', class: "pds-loader--spinner" }, hAsync("svg", { key: 'd313737376105c1d74fd8bd006d18499294e99d7', style: this.style(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: '756278ffc85e9aaeb91ba451ad21810131431f99' }, hAsync("linearGradient", { key: '17c8edf68002c4d73012eb040dbe1a349199894d', id: "spinner-secondHalf" }, hAsync("stop", { key: '3610ebe3ac877590905e61de933c564a89ef2342', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: 'bce6d94cebf01f7f5a5bd46477dace921390ed35', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '3ea22a61e3a871fe09df54f07c7f51cff8f84fb0', id: "spinner-firstHalf" }, hAsync("stop", { key: '40a3dc4d486b9caa23f219503fd70cca44421d33', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: 'ecc86f15149dd7fbd49311463c28ca2e2e7106ed', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: '0a9f8307abd79d39d665b94c7b7273f8768b2d89', class: "pds-loader__spinner-path" }, hAsync("path", { key: '8c87a83b7fb89345d5357559c3b5485d08b89518', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: 'b4a1aebf06c2b47fcdeb8b822ea27d893c855280', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '5a1880eba9eec32622b2353d78bef605519d7235', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: '4864108fd2d7aa7c163302950e54083901cdf5d7', class: "pds-loader--typing" }, hAsync("span", { key: '6b71380af9b30e99a4819e081d0e7b7d8f2f9eb2' }), hAsync("span", { key: '8f64d209593c813e71a4858c9ccb0aaa2c4eef4a' }), hAsync("span", { key: '15ccbc6661214218f15d624bced8370609c6c232' }))), hAsync("div", { key: 'd26ce663fbf08163764e70236b742b3d12c4b950', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: '10562b45b4917c88dda50d5ebe24169421a193dc', name: "label" }, "Loading..."))));
|
|
8732
9768
|
}
|
|
8733
9769
|
static get style() { return pdsLoaderCss; }
|
|
8734
9770
|
static get cmpMeta() { return {
|
|
@@ -8746,7 +9782,7 @@ class PdsLoader {
|
|
|
8746
9782
|
}; }
|
|
8747
9783
|
}
|
|
8748
9784
|
|
|
8749
|
-
const pdsModalCss = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:1000}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:1001}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:calc(100vh - (5vh + 96px))
|
|
9785
|
+
const pdsModalCss = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:1000}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:1001}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}";
|
|
8750
9786
|
|
|
8751
9787
|
class PdsModal {
|
|
8752
9788
|
constructor(hostRef) {
|
|
@@ -8769,6 +9805,11 @@ class PdsModal {
|
|
|
8769
9805
|
* @default 'md'
|
|
8770
9806
|
*/
|
|
8771
9807
|
this.size = 'md';
|
|
9808
|
+
/**
|
|
9809
|
+
* Whether the modal content should be scrollable
|
|
9810
|
+
* @default true
|
|
9811
|
+
*/
|
|
9812
|
+
this.scrollable = true;
|
|
8772
9813
|
/**
|
|
8773
9814
|
* Stores the list of focusable elements in the modal
|
|
8774
9815
|
*/
|
|
@@ -8979,10 +10020,14 @@ class PdsModal {
|
|
|
8979
10020
|
return thisZIndex === maxZIndex;
|
|
8980
10021
|
}
|
|
8981
10022
|
render() {
|
|
8982
|
-
return (hAsync("dialog", { key: '
|
|
10023
|
+
return (hAsync("dialog", { key: 'ca1fe22c9f9aa26e74234e5195c007760cbbf818', class: {
|
|
8983
10024
|
'pds-modal__backdrop': true,
|
|
8984
10025
|
'open': this.open
|
|
8985
|
-
}, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '
|
|
10026
|
+
}, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: 'd0f297574d53dc1718277a58c2ade00a5451f96b', class: {
|
|
10027
|
+
'pds-modal': true,
|
|
10028
|
+
[`pds-modal--${this.size}`]: true,
|
|
10029
|
+
'pds-modal--scrollable': this.scrollable
|
|
10030
|
+
} }, hAsync("slot", { key: '37bb5abda88b4db9304884532951980ea8b9eaf8' }))));
|
|
8986
10031
|
}
|
|
8987
10032
|
get el() { return getElement(this); }
|
|
8988
10033
|
static get watchers() { return {
|
|
@@ -8997,6 +10042,7 @@ class PdsModal {
|
|
|
8997
10042
|
"componentId": [1, "component-id"],
|
|
8998
10043
|
"open": [1028],
|
|
8999
10044
|
"size": [1],
|
|
10045
|
+
"scrollable": [4],
|
|
9000
10046
|
"focusableElementsArray": [32],
|
|
9001
10047
|
"showModal": [64],
|
|
9002
10048
|
"hideModal": [64]
|
|
@@ -9007,31 +10053,133 @@ class PdsModal {
|
|
|
9007
10053
|
}; }
|
|
9008
10054
|
}
|
|
9009
10055
|
|
|
9010
|
-
const pdsModalContentCss = "pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;
|
|
10056
|
+
const pdsModalContentCss = "pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;width:100%}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-none){border:0}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-both){-webkit-border-after:1px solid var(--pine-color-grey-200);border-block-end:1px solid var(--pine-color-grey-200);-webkit-border-before:1px solid var(--pine-color-grey-200);border-block-start:1px solid var(--pine-color-grey-200)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-top){-webkit-border-before:1px solid var(--pine-color-grey-200);border-block-start:1px solid var(--pine-color-grey-200)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-bottom){-webkit-border-after:1px solid var(--pine-color-grey-200);border-block-end:1px solid var(--pine-color-grey-200)}.pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}";
|
|
9011
10057
|
|
|
9012
10058
|
class PdsModalContent {
|
|
9013
10059
|
constructor(hostRef) {
|
|
9014
10060
|
registerInstance(this, hostRef);
|
|
9015
10061
|
/**
|
|
9016
|
-
* The border style for the content area.
|
|
10062
|
+
* The border style for the content area. When not explicitly set, automatically determined based on scroll state.
|
|
9017
10063
|
* @default 'none'
|
|
9018
10064
|
*/
|
|
9019
10065
|
this.border = 'none';
|
|
9020
|
-
this.contentMaxHeight = '
|
|
10066
|
+
this.contentMaxHeight = 'none';
|
|
10067
|
+
/**
|
|
10068
|
+
* Tracks whether the border prop was explicitly set by the user
|
|
10069
|
+
*/
|
|
10070
|
+
this.userSetBorder = false;
|
|
10071
|
+
}
|
|
10072
|
+
componentWillLoad() {
|
|
10073
|
+
// Check if border was explicitly set via attribute or property
|
|
10074
|
+
const borderAttr = this.el.getAttribute('border');
|
|
10075
|
+
const hasBorderAttribute = borderAttr !== null;
|
|
10076
|
+
// If border attribute exists or border prop is not the default, user set it
|
|
10077
|
+
this.userSetBorder = hasBorderAttribute || this.border !== 'none';
|
|
9021
10078
|
}
|
|
9022
10079
|
componentDidLoad() {
|
|
9023
|
-
const slotContent = this.el.firstElementChild;
|
|
9024
|
-
const isScrollable = slotContent.scrollHeight > slotContent.clientHeight;
|
|
9025
|
-
this.border = isScrollable ? 'both' : 'none';
|
|
9026
10080
|
this.calculateMaxHeight();
|
|
9027
|
-
|
|
10081
|
+
// Set up resize listener
|
|
10082
|
+
window.addEventListener('resize', this.handleResize.bind(this));
|
|
10083
|
+
// Only set up scroll listener for border updates if borders are managed automatically
|
|
10084
|
+
if (!this.userSetBorder) {
|
|
10085
|
+
setTimeout(() => {
|
|
10086
|
+
// The scroll happens on the component element itself (this.el), not the inner div
|
|
10087
|
+
console.log('Setting up scroll listener on component element:', this.el);
|
|
10088
|
+
this.el.addEventListener('scroll', this.handleScroll.bind(this));
|
|
10089
|
+
// Initial border update after everything is set up
|
|
10090
|
+
setTimeout(() => this.updateBorders(), 100);
|
|
10091
|
+
}, 100);
|
|
10092
|
+
}
|
|
9028
10093
|
}
|
|
9029
10094
|
disconnectedCallback() {
|
|
9030
|
-
window.removeEventListener('resize', this.
|
|
10095
|
+
window.removeEventListener('resize', this.handleResize.bind(this));
|
|
10096
|
+
// Clean up scroll listener only if it was set up
|
|
10097
|
+
if (!this.userSetBorder) {
|
|
10098
|
+
this.el.removeEventListener('scroll', this.handleScroll.bind(this));
|
|
10099
|
+
}
|
|
9031
10100
|
if (this.mutationObserver) {
|
|
9032
10101
|
this.mutationObserver.disconnect();
|
|
9033
10102
|
}
|
|
9034
10103
|
}
|
|
10104
|
+
/**
|
|
10105
|
+
* Handle scroll events
|
|
10106
|
+
*/
|
|
10107
|
+
handleScroll() {
|
|
10108
|
+
console.log('Scroll event fired!');
|
|
10109
|
+
this.updateBorders();
|
|
10110
|
+
}
|
|
10111
|
+
/**
|
|
10112
|
+
* Handle resize events
|
|
10113
|
+
*/
|
|
10114
|
+
handleResize() {
|
|
10115
|
+
this.calculateMaxHeight();
|
|
10116
|
+
// Update borders after resize as content scrollability might change
|
|
10117
|
+
setTimeout(() => this.updateBorders(), 50);
|
|
10118
|
+
}
|
|
10119
|
+
/**
|
|
10120
|
+
* Updates border visibility based on scroll state (only if not user-defined)
|
|
10121
|
+
*/
|
|
10122
|
+
updateBorders() {
|
|
10123
|
+
// If user explicitly set a border value, don't override it
|
|
10124
|
+
if (this.userSetBorder) {
|
|
10125
|
+
return;
|
|
10126
|
+
}
|
|
10127
|
+
// Find the modal element (parent of this component)
|
|
10128
|
+
const modalElement = this.el.closest('pds-modal');
|
|
10129
|
+
if (!modalElement)
|
|
10130
|
+
return;
|
|
10131
|
+
// Only apply border logic if modal is scrollable
|
|
10132
|
+
const isModalScrollable = modalElement.scrollable !== false;
|
|
10133
|
+
if (!isModalScrollable) {
|
|
10134
|
+
this.border = 'none';
|
|
10135
|
+
return;
|
|
10136
|
+
}
|
|
10137
|
+
// The scrollable element is the component itself (this.el), not the inner div
|
|
10138
|
+
const scrollableElement = this.el;
|
|
10139
|
+
// Check if content is actually scrollable
|
|
10140
|
+
const isContentScrollable = scrollableElement.scrollHeight > scrollableElement.clientHeight;
|
|
10141
|
+
if (!isContentScrollable) {
|
|
10142
|
+
this.border = 'none';
|
|
10143
|
+
return;
|
|
10144
|
+
}
|
|
10145
|
+
// Determine border position based on scroll position
|
|
10146
|
+
const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
|
|
10147
|
+
const scrollBottom = scrollTop + clientHeight;
|
|
10148
|
+
// More generous tolerance for scroll detection (3px instead of 1px)
|
|
10149
|
+
const tolerance = 3;
|
|
10150
|
+
const isAtTop = scrollTop <= tolerance;
|
|
10151
|
+
const isAtBottom = scrollBottom >= scrollHeight - tolerance;
|
|
10152
|
+
// Debug logging (can be removed later)
|
|
10153
|
+
console.log('Border Debug:', {
|
|
10154
|
+
scrollTop,
|
|
10155
|
+
scrollHeight,
|
|
10156
|
+
clientHeight,
|
|
10157
|
+
scrollBottom,
|
|
10158
|
+
isAtTop,
|
|
10159
|
+
isAtBottom,
|
|
10160
|
+
currentBorder: this.border
|
|
10161
|
+
});
|
|
10162
|
+
if (isAtTop && isAtBottom) {
|
|
10163
|
+
// Content fits exactly, no borders needed
|
|
10164
|
+
this.border = 'none';
|
|
10165
|
+
console.log('Content fits exactly, no borders needed');
|
|
10166
|
+
}
|
|
10167
|
+
else if (isAtTop && !isAtBottom) {
|
|
10168
|
+
// At top, show bottom border only
|
|
10169
|
+
this.border = 'bottom';
|
|
10170
|
+
console.log('At top, show bottom border only');
|
|
10171
|
+
}
|
|
10172
|
+
else if (!isAtTop && isAtBottom) {
|
|
10173
|
+
// At bottom, show top border only
|
|
10174
|
+
this.border = 'top';
|
|
10175
|
+
console.log('At bottom, show top border only');
|
|
10176
|
+
}
|
|
10177
|
+
else {
|
|
10178
|
+
// In middle, show both borders
|
|
10179
|
+
this.border = 'both';
|
|
10180
|
+
console.log('In middle, show both borders');
|
|
10181
|
+
}
|
|
10182
|
+
}
|
|
9035
10183
|
/**
|
|
9036
10184
|
* Calculates the max-height based on header and footer heights
|
|
9037
10185
|
*/
|
|
@@ -9040,7 +10188,18 @@ class PdsModalContent {
|
|
|
9040
10188
|
const modalElement = this.el.closest('pds-modal');
|
|
9041
10189
|
if (!modalElement)
|
|
9042
10190
|
return;
|
|
10191
|
+
// Check if the parent modal is scrollable
|
|
10192
|
+
const isScrollable = modalElement.scrollable !== false;
|
|
9043
10193
|
setTimeout(() => {
|
|
10194
|
+
// If modal is not scrollable, don't apply max-height constraints
|
|
10195
|
+
if (!isScrollable) {
|
|
10196
|
+
this.contentMaxHeight = 'none';
|
|
10197
|
+
const contentElement = this.el.querySelector('.pds-modal-content');
|
|
10198
|
+
if (contentElement) {
|
|
10199
|
+
contentElement.style.maxHeight = 'none';
|
|
10200
|
+
}
|
|
10201
|
+
return;
|
|
10202
|
+
}
|
|
9044
10203
|
// Find header and footer elements
|
|
9045
10204
|
const headerElement = modalElement.querySelector('pds-modal-header');
|
|
9046
10205
|
const footerElement = modalElement.querySelector('pds-modal-footer');
|
|
@@ -9065,8 +10224,10 @@ class PdsModalContent {
|
|
|
9065
10224
|
}
|
|
9066
10225
|
}
|
|
9067
10226
|
else {
|
|
9068
|
-
this.contentMaxHeight = '
|
|
10227
|
+
this.contentMaxHeight = 'none'; // Default fallback
|
|
9069
10228
|
}
|
|
10229
|
+
// Update borders after height calculations with longer delay
|
|
10230
|
+
setTimeout(() => this.updateBorders(), 150);
|
|
9070
10231
|
}, 100); // Delay to ensure DOM is fully rendered
|
|
9071
10232
|
// Set up mutation observer if not already done
|
|
9072
10233
|
if (!this.mutationObserver && modalElement) {
|
|
@@ -9083,10 +10244,12 @@ class PdsModalContent {
|
|
|
9083
10244
|
}
|
|
9084
10245
|
}
|
|
9085
10246
|
render() {
|
|
9086
|
-
|
|
10247
|
+
// Only apply max-height style if it's not 'none'
|
|
10248
|
+
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
10249
|
+
return (hAsync(Host, { key: '5357ae43a3c7e6922a182a00ddf0241775d5a2a2' }, hAsync("div", { key: '100bf34dbc72b4d7ec7de8dfe64aaa617f840a70', class: {
|
|
9087
10250
|
'pds-modal-content': true,
|
|
9088
10251
|
[`pds-modal-content--border-${this.border}`]: true
|
|
9089
|
-
}, style:
|
|
10252
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '3f4a2281f3e1243a86dfb7ac496e6e190c1df548' }))));
|
|
9090
10253
|
}
|
|
9091
10254
|
get el() { return getElement(this); }
|
|
9092
10255
|
static get style() { return pdsModalContentCss; }
|
|
@@ -9110,7 +10273,7 @@ class PdsModalFooter {
|
|
|
9110
10273
|
registerInstance(this, hostRef);
|
|
9111
10274
|
}
|
|
9112
10275
|
render() {
|
|
9113
|
-
return (hAsync("footer", { key: '
|
|
10276
|
+
return (hAsync("footer", { key: '0fa58ce225ce31a1f40d6ce1d3276e716b36de8d', class: "pds-modal__footer" }, hAsync("slot", { key: 'df0bbdb56c711c7eb34db7181f940de11d4449ef' })));
|
|
9114
10277
|
}
|
|
9115
10278
|
static get style() { return pdsModalFooterCss; }
|
|
9116
10279
|
static get cmpMeta() { return {
|
|
@@ -9130,7 +10293,7 @@ class PdsModalHeader {
|
|
|
9130
10293
|
registerInstance(this, hostRef);
|
|
9131
10294
|
}
|
|
9132
10295
|
render() {
|
|
9133
|
-
return (hAsync("header", { key: '
|
|
10296
|
+
return (hAsync("header", { key: '1a471bd6dfa2b654f5a6ebdf8fb5baef728324b3', class: "pds-modal__header" }, hAsync("slot", { key: '946a365ab3c2ca627d618188890d385c054b4c16' })));
|
|
9134
10297
|
}
|
|
9135
10298
|
static get style() { return pdsModalHeaderCss; }
|
|
9136
10299
|
static get cmpMeta() { return {
|
|
@@ -9249,7 +10412,7 @@ class PdsPopover {
|
|
|
9249
10412
|
popoverEl.style.left = `${left}px`;
|
|
9250
10413
|
}
|
|
9251
10414
|
render() {
|
|
9252
|
-
return (hAsync(Host, { key: '
|
|
10415
|
+
return (hAsync(Host, { key: 'f31ca22bbebb2df24412cfab4660e6953d35d65c' }, hAsync("button", { key: '74e0c9b393df28138b7f4c11d15e7fc4c6b8de14', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), hAsync("div", { key: '0f4d6e601cb4e9d2c890261a72ce92725fa62846', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, hAsync("slot", { key: '8ab8d2f7de3a175d73f3bfa7d42a84431a82bef1' }))));
|
|
9253
10416
|
}
|
|
9254
10417
|
get el() { return getElement(this); }
|
|
9255
10418
|
static get style() { return pdsPopoverCss; }
|
|
@@ -9293,7 +10456,7 @@ class PdsProgress {
|
|
|
9293
10456
|
this.showPercent = false;
|
|
9294
10457
|
}
|
|
9295
10458
|
render() {
|
|
9296
|
-
return (hAsync(Host, { key: '
|
|
10459
|
+
return (hAsync(Host, { key: '4b85286ee1fcc7ae77f733b915a996bb82aecb5b', class: this.animated ? { 'is-animated': this.animated } : '' }, hAsync("div", { key: 'ea3dfbafae2d416aac9903ec50dfade77c315e05', class: "pds-progress" }, hAsync("label", { key: '3ece69ae8b90e968d7f86b986faee633d7802a0b', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: '68beb43763d001495159e253562b0934521072d9', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '8480b66191aec536b0c2c588e71e5c568f5d0eeb', class: "pds-progress__percentage" }, this.percent, "%")));
|
|
9297
10460
|
}
|
|
9298
10461
|
static get style() { return pdsProgressCss; }
|
|
9299
10462
|
static get cmpMeta() { return {
|
|
@@ -9327,7 +10490,7 @@ class PdsProperty {
|
|
|
9327
10490
|
this.icon = 'star';
|
|
9328
10491
|
}
|
|
9329
10492
|
render() {
|
|
9330
|
-
return (hAsync(Host, { key: '
|
|
10493
|
+
return (hAsync(Host, { key: '4ff2ed5a1b7e551b6c4d86fb43fa64bc83b4e785', id: this.componentId }, hAsync("pds-box", { key: '0420487b64550d42621b9548e67c3a79e14b4c91', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: 'dc8e675839b1f7a6fbce5c7fc10ece743f4a1905', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: '9b01e2e02d26f8e7629612c617405b9ce7e5397b' }))));
|
|
9331
10494
|
}
|
|
9332
10495
|
static get style() { return pdsPropertyCss; }
|
|
9333
10496
|
static get cmpMeta() { return {
|
|
@@ -9391,9 +10554,9 @@ class PdsRadio {
|
|
|
9391
10554
|
return classNames.join(' ');
|
|
9392
10555
|
}
|
|
9393
10556
|
render() {
|
|
9394
|
-
return (hAsync(Host, { key: '
|
|
9395
|
-
hAsync("div", { key: '
|
|
9396
|
-
hAsync("div", { key: '
|
|
10557
|
+
return (hAsync(Host, { key: 'd898e84535e8280a1bec120b0e0b85e6aed57b26', class: this.classNames() }, hAsync("label", { key: 'c5731c63d8a177258d6e68b63904e348ee063590', htmlFor: this.componentId }, hAsync("input", { key: '30bc1cbdaba793c5e2dc85e662c21cb3cf1eded1', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), hAsync("span", { key: 'c349c5b2397acdf1e2d3cf665570c986e0ca0377', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
10558
|
+
hAsync("div", { key: '3348ae72477cc9ea7f202b458bbcc6e2cc6b2854', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
10559
|
+
hAsync("div", { key: '1b698ac0ee37a89f4ced06f9fd5da4a40dbff5a2', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '2b28cedb3277d98bc458b8fe7ac5e49efd28cf1e', icon: danger, size: "small" }), this.errorMessage)));
|
|
9397
10560
|
}
|
|
9398
10561
|
static get style() { return labelCss$3 + pdsRadioCss; }
|
|
9399
10562
|
static get cmpMeta() { return {
|
|
@@ -9459,7 +10622,7 @@ class PdsRow {
|
|
|
9459
10622
|
})), (this.minHeight && {
|
|
9460
10623
|
'min-height': this.minHeight,
|
|
9461
10624
|
}));
|
|
9462
|
-
return hAsync(Host, { key: '
|
|
10625
|
+
return hAsync(Host, { key: 'd9fd2087c959b16ca168ee2b011a3d4bd466c113', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
9463
10626
|
}
|
|
9464
10627
|
static get style() { return pdsRowCss; }
|
|
9465
10628
|
static get cmpMeta() { return {
|
|
@@ -9686,7 +10849,7 @@ class PdsSelect {
|
|
|
9686
10849
|
}
|
|
9687
10850
|
render() {
|
|
9688
10851
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
9689
|
-
return (hAsync(Host, { key: '
|
|
10852
|
+
return (hAsync(Host, { key: '7d2f9b013ba40e8feb4282099eaf2db32b94497b', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'fad19d788ff8f3b3b6ec9ef198c753ef4b4dc4c4', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '870c405e80fbeb3890116a53cd986056af7e4795', class: "pds-select__label-wrapper" }, hAsync("label", { key: '6c7232f371f0bd95a94584fe8403eefc25862f5b', htmlFor: this.componentId }, hAsync("span", { key: '7a6816bd7d51b05cd935f3e13e27f540cf09e1e1', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'a2bbae963ed55ed73eb614725258745ad20d9acb', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: 'cd9ef83c08806ab2efc1c4b6851bc634168ede69', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'ae605bfc434bedf4b37e0e96a9124ea7b59d1ede', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '360b635e7b4aed8522f0176be553c9e3804dbb3a', class: "pds-select__select-icon", icon: enlarge }))));
|
|
9690
10853
|
}
|
|
9691
10854
|
static get formAssociated() { return true; }
|
|
9692
10855
|
get el() { return getElement(this); }
|
|
@@ -12428,7 +13591,7 @@ class PdsSortable {
|
|
|
12428
13591
|
Sortable.create(this.el, sortableOptions);
|
|
12429
13592
|
}
|
|
12430
13593
|
render() {
|
|
12431
|
-
return (hAsync(Host, { key: '
|
|
13594
|
+
return (hAsync(Host, { key: '925de28efdf7d2f1b6f6f5b94da4dbb383c0421a', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: '3525abab4ff66a63c90f4db99e5bb090308afc9d' })));
|
|
12432
13595
|
}
|
|
12433
13596
|
get el() { return getElement(this); }
|
|
12434
13597
|
static get style() { return pdsSortableCss; }
|
|
@@ -12475,7 +13638,7 @@ class PdsSortableItem {
|
|
|
12475
13638
|
}
|
|
12476
13639
|
}
|
|
12477
13640
|
render() {
|
|
12478
|
-
return (hAsync(Host, { key: '
|
|
13641
|
+
return (hAsync(Host, { key: '5c5ada49c505d935bfe505997ab69e7eafc2f642', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: '3041977b792e192192fa9c101f113eb42e87ceea', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '082a98c200abcc8023dc126ed83091167c59290e', icon: handle }))), hAsync("slot", { key: '1e2b2154acee0c3ce09ec77b9949c761ff37181d' }), this.enableActions && (hAsync("div", { key: '5b318f04eb9c74f660900163e17ba51e2c354538', class: "pds-sortable-item__actions" }, hAsync("slot", { key: '2c6631a860af0da48b3a007daeff69b59cfaff59', name: "sortable-item-actions" })))));
|
|
12479
13642
|
}
|
|
12480
13643
|
get el() { return getElement(this); }
|
|
12481
13644
|
static get style() { return pdsSortableItemCss; }
|
|
@@ -12577,9 +13740,9 @@ class PdsSwitch {
|
|
|
12577
13740
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
12578
13741
|
}
|
|
12579
13742
|
render() {
|
|
12580
|
-
return (hAsync(Host, { key: '
|
|
12581
|
-
hAsync("div", { key: '
|
|
12582
|
-
hAsync("div", { key: '
|
|
13743
|
+
return (hAsync(Host, { key: '9dc66ed3d7fa512dec9ab58a451a8c5533000f3b', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: '2f4f9284be0dafe15a78def82f4e2da71b632c11', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '3c183f75fb5ca94ffe50a1f75d233d454374fb98', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: 'b6cf2e5d68d540413fbebb65e5f942af9dddd718', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
13744
|
+
hAsync("div", { key: 'bb1c48c72dbce12e0ebf134d084648ed86125653', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
13745
|
+
hAsync("div", { key: '771e1f08e84f8d37f647443e1835d9db3ea82a2f', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'd54e078c0ea22deedec1ff6b0d1c4881ed0befc1', icon: danger, size: "small" }), this.errorMessage)));
|
|
12583
13746
|
}
|
|
12584
13747
|
static get formAssociated() { return true; }
|
|
12585
13748
|
get el() { return getElement(this); }
|
|
@@ -12609,7 +13772,7 @@ class PdsSwitch {
|
|
|
12609
13772
|
}; }
|
|
12610
13773
|
}
|
|
12611
13774
|
|
|
12612
|
-
const pdsTabCss = "pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);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(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover{color:var(--pine-color-text)}.pds-tab:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:\"\";height:3px;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);inset-inline-start:var(--pine-dimension-none);opacity:0;position:absolute}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-secondary)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:1}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--pine-color-secondary-hover)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab__content{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:\"\";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-container-disabled);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{background-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab.is-active:hover,.pds-tabs--filter .pds-tab[aria-selected=true]:hover{background-color:var(--pine-color-primary-hover)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){background-color:var(--pine-color-border-disabled)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-readonly);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;padding-block-end:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-white);border-color:var(--pine-color-border);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);color:var(--pine-color-text-active);z-index:1;}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after,.pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:0}";
|
|
13775
|
+
const pdsTabCss = "pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);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(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover{color:var(--pine-color-text)}.pds-tab:focus{outline:none}.pds-tab:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:\"\";height:3px;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);inset-inline-start:var(--pine-dimension-none);opacity:0;position:absolute}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-secondary)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:1}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--pine-color-secondary-hover)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab__content{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:\"\";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-container-disabled);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{background-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab.is-active:hover,.pds-tabs--filter .pds-tab[aria-selected=true]:hover{background-color:var(--pine-color-primary-hover)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){background-color:var(--pine-color-border-disabled)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-readonly);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;padding-block-end:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-white);border-color:var(--pine-color-border);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);color:var(--pine-color-text-active);z-index:1;}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after,.pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:0}";
|
|
12613
13776
|
|
|
12614
13777
|
class PdsTab {
|
|
12615
13778
|
constructor(hostRef) {
|
|
@@ -12625,9 +13788,9 @@ class PdsTab {
|
|
|
12625
13788
|
this.pdsTabClick.emit([index, parentComponentId]);
|
|
12626
13789
|
}
|
|
12627
13790
|
render() {
|
|
12628
|
-
const availabilityTabEdgeInlineStart = (hAsync("span", { key: '
|
|
12629
|
-
const availabilityTabEdgeInlineEnd = (hAsync("span", { key: '
|
|
12630
|
-
return (hAsync(Host, { key: '
|
|
13791
|
+
const availabilityTabEdgeInlineStart = (hAsync("span", { key: '837cf57372db654f6ca411054446ebf0bc27b539', class: "pds-tab-edge", role: "presentation" }));
|
|
13792
|
+
const availabilityTabEdgeInlineEnd = (hAsync("span", { key: 'e15055442d56b50e6ac21bfb76fc0f599406a4fb', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
|
|
13793
|
+
return (hAsync(Host, { key: '1c02a1c8e5e562449ab954061a10acc3d54c3efc', variant: this.variant, slot: "tabs", index: this.index }, hAsync("button", { key: '31b0e173dd738fa272dcaf4fc48a0581978f43b2', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { key: '95b4f8d4c226e3b3a174d439816ec4d28cef0686', class: "pds-tab__content" }, hAsync("slot", { key: '452a208775d54a290c0fcc6a69f6e546fde29afe' })))));
|
|
12631
13794
|
}
|
|
12632
13795
|
get el() { return getElement(this); }
|
|
12633
13796
|
static get style() { return pdsTabCss; }
|
|
@@ -12867,7 +14030,7 @@ class PdsTableBody {
|
|
|
12867
14030
|
registerInstance(this, hostRef);
|
|
12868
14031
|
}
|
|
12869
14032
|
render() {
|
|
12870
|
-
return (hAsync(Host, { key: '
|
|
14033
|
+
return (hAsync(Host, { key: '7c9b15bea47bcede62a93ef11ee9dba093450ab9', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'fab0b2ca27185373cdb7b29d9cb1807b4097aea9' })));
|
|
12871
14034
|
}
|
|
12872
14035
|
static get style() { return pdsTableBodyCss; }
|
|
12873
14036
|
static get cmpMeta() { return {
|
|
@@ -12978,11 +14141,11 @@ class PdsTableCell {
|
|
|
12978
14141
|
return classNames.join(' ');
|
|
12979
14142
|
}
|
|
12980
14143
|
render() {
|
|
12981
|
-
return (hAsync(Host, { key: '
|
|
14144
|
+
return (hAsync(Host, { key: 'b1c76cfb3fa26b7e59586cfd693380701c9146ff', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
12982
14145
|
this.tableRef.fixedColumn &&
|
|
12983
14146
|
this.tableRef.selectable
|
|
12984
14147
|
? { '--fixed-cell-position': '40px' }
|
|
12985
|
-
: {} }, hAsync("slot", { key: '
|
|
14148
|
+
: {} }, hAsync("slot", { key: '1a04730905bf7ad930141c1914f37dd7717570d8' })));
|
|
12986
14149
|
}
|
|
12987
14150
|
get hostElement() { return getElement(this); }
|
|
12988
14151
|
static get style() { return pdsTableCellCss; }
|
|
@@ -13044,7 +14207,7 @@ class PdsTableHead {
|
|
|
13044
14207
|
}
|
|
13045
14208
|
}
|
|
13046
14209
|
render() {
|
|
13047
|
-
return (hAsync(Host, { key: '
|
|
14210
|
+
return (hAsync(Host, { key: '933e69ad28aaf0b899a8ee504088bc5b6396889d', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: 'a006c965a4e9bacb4b8e07b34799bab6a0bd482a', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, hAsync("pds-checkbox", { key: 'd7f94ac83be970b2c2ed334296971bc6762602e2', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" }))), hAsync("slot", { key: '22edaaa12d31b2be1fd2835d6d4c2801386405af' })));
|
|
13048
14211
|
}
|
|
13049
14212
|
get hostElement() { return getElement(this); }
|
|
13050
14213
|
static get style() { return pdsTableHeadCss; }
|
|
@@ -13183,11 +14346,11 @@ class PdsTableHeadCell {
|
|
|
13183
14346
|
return classNames.join(' ');
|
|
13184
14347
|
}
|
|
13185
14348
|
render() {
|
|
13186
|
-
return (hAsync(Host, { key: '
|
|
14349
|
+
return (hAsync(Host, { key: '3d950a2997ef4c095d08f9c4e67b9a963fea093d', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
13187
14350
|
this.tableRef.fixedColumn &&
|
|
13188
14351
|
this.tableRef.selectable
|
|
13189
14352
|
? { '--fixed-cell-position': '40px' }
|
|
13190
|
-
: {} }, hAsync("slot", { key: '
|
|
14353
|
+
: {} }, hAsync("slot", { key: '8ca7d4d169612e5ba237691d9a5ec9ed35610230' }), this.sortable && (hAsync("pds-icon", { key: 'e2e214b39a1706d887bb34a0d4fc3f632e752306', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
|
|
13191
14354
|
}
|
|
13192
14355
|
get hostElement() { return getElement(this); }
|
|
13193
14356
|
static get style() { return pdsTableHeadCellCss; }
|
|
@@ -13254,7 +14417,7 @@ class PdsTableRow {
|
|
|
13254
14417
|
}
|
|
13255
14418
|
}
|
|
13256
14419
|
render() {
|
|
13257
|
-
return (hAsync(Host, { key: '
|
|
14420
|
+
return (hAsync(Host, { key: 'cffeb199c48f2a06af70a2e5a5b41a21649c24c7', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '02a80cd54efe360550e636f7bc0f11e3de59af1c', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: 'a8cd6c303ec35f71e0a97f130c5d53a2e81a3e4a', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '820a502627ffc329f650f7f0110e34ae3f096357' })));
|
|
13258
14421
|
}
|
|
13259
14422
|
get hostElement() { return getElement(this); }
|
|
13260
14423
|
static get style() { return pdsTableRowCss; }
|
|
@@ -13283,7 +14446,7 @@ class PdsTabpanel {
|
|
|
13283
14446
|
this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
|
|
13284
14447
|
}
|
|
13285
14448
|
render() {
|
|
13286
|
-
return (hAsync(Host, { key: '
|
|
14449
|
+
return (hAsync(Host, { key: '84aa81506200fd7f06a94a4c7570b2702b36d9e8', slot: "tabpanels" }, hAsync("div", { key: '0e890243eb41ebda64183cc4fd559abf38f5dfdc', 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" }, hAsync("slot", { key: 'aaabfd72a45f6cd52c9c279bf0c014315a659959' }))));
|
|
13287
14450
|
}
|
|
13288
14451
|
get el() { return getElement(this); }
|
|
13289
14452
|
static get style() { return pdsTabpanelCss; }
|
|
@@ -13307,6 +14470,7 @@ const pdsTabsCss = ":host{--tabs-dimension-panel-margin-top:var(--pine-dimension
|
|
|
13307
14470
|
/**
|
|
13308
14471
|
* @slot tabs - Content is placed within the `div[role="tablist"]` element as children
|
|
13309
14472
|
* @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
|
|
14473
|
+
* @part tab-list - Exposes the container element that holds all the tab buttons for styling.
|
|
13310
14474
|
*/
|
|
13311
14475
|
class PdsTabs {
|
|
13312
14476
|
constructor(hostRef) {
|
|
@@ -13384,7 +14548,7 @@ class PdsTabs {
|
|
|
13384
14548
|
this.passPropsToChildren();
|
|
13385
14549
|
}
|
|
13386
14550
|
render() {
|
|
13387
|
-
return (hAsync(Host, { key: '
|
|
14551
|
+
return (hAsync(Host, { key: '46ae07c28f9fb645e0e4a8165b5c3d2b0b9bdc4a', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, hAsync("div", { key: 'ab3ea42f6998356ea4a089e07bbe49c6f8e45d54', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, hAsync("slot", { key: 'e63be406b7d26ba2eff737d31fbc0d3bf959c99f', name: "tabs" })), hAsync("slot", { key: 'cacce277c237acfff91b879ea90ba134cf7e2b80', name: "tabpanels" })));
|
|
13388
14552
|
}
|
|
13389
14553
|
get el() { return getElement(this); }
|
|
13390
14554
|
static get style() { return pdsTabsCss; }
|
|
@@ -13427,7 +14591,7 @@ class PdsText {
|
|
|
13427
14591
|
${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
|
|
13428
14592
|
${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
|
|
13429
14593
|
`;
|
|
13430
|
-
return (hAsync(Tag, { key: '
|
|
14594
|
+
return (hAsync(Tag, { key: '101a42ae93ac81968a177c7e0d569417f376909c', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: '903b04a19b948e04d577c8585a76647033b9c36e' })));
|
|
13431
14595
|
}
|
|
13432
14596
|
get el() { return getElement(this); }
|
|
13433
14597
|
static get style() { return pdsTextCss; }
|
|
@@ -13455,7 +14619,7 @@ const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{c
|
|
|
13455
14619
|
|
|
13456
14620
|
const pdsInputTokensCss = ":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";
|
|
13457
14621
|
|
|
13458
|
-
const pdsTextareaCss = ":host{display:inline}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-
|
|
14622
|
+
const pdsTextareaCss = ":host{display:inline-block;width:100%}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__field-wrapper{display:inline-block;position:relative;width:100%}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-sizing:border-box;box-sizing:border-box;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:calc(var(--pine-dimension-xl) * 2);min-width:calc(var(--pine-dimension-xl) * 2);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);resize:both;width:100%}:host([max-length]) .pds-textarea__field{padding-bottom:calc(var(--pine-dimension-xs) + var(--pine-dimension-md))}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);border-radius:calc(var(--pine-dimension-2xs) * 0.5);color:var(--pine-color-text-readonly);font:var(--pine-typography-body-sm-medium);padding:calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:2}:host([aria-disabled=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled)}:host([aria-readonly=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-input-color-background-danger)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
|
|
13459
14623
|
|
|
13460
14624
|
/**
|
|
13461
14625
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
@@ -13516,9 +14680,21 @@ class PdsTextarea {
|
|
|
13516
14680
|
this.onInput = (ev) => {
|
|
13517
14681
|
const input = ev.target;
|
|
13518
14682
|
if (input) {
|
|
14683
|
+
// Handle maxLength validation
|
|
14684
|
+
if (this.maxLength && input.value.length > this.maxLength) {
|
|
14685
|
+
// Prevent input beyond maxLength
|
|
14686
|
+
input.value = input.value.substring(0, this.maxLength);
|
|
14687
|
+
}
|
|
13519
14688
|
this.value = input.value || '';
|
|
13520
14689
|
}
|
|
13521
14690
|
this.emitInputChange(ev);
|
|
14691
|
+
// Update counter position when content changes
|
|
14692
|
+
if (this.maxLength && typeof ResizeObserver !== 'undefined') {
|
|
14693
|
+
// Use requestAnimationFrame to ensure DOM is updated
|
|
14694
|
+
requestAnimationFrame(() => {
|
|
14695
|
+
this.updateCharacterCounterPosition();
|
|
14696
|
+
});
|
|
14697
|
+
}
|
|
13522
14698
|
};
|
|
13523
14699
|
this.onTextareaChange = (ev) => {
|
|
13524
14700
|
this.emitValueChange(ev);
|
|
@@ -13548,6 +14724,24 @@ class PdsTextarea {
|
|
|
13548
14724
|
}
|
|
13549
14725
|
// Update form value for Form Associated Custom Elements API
|
|
13550
14726
|
this.updateFormValue();
|
|
14727
|
+
// Update character counter position in case content changes affect sizing
|
|
14728
|
+
if (this.maxLength && typeof ResizeObserver !== 'undefined') {
|
|
14729
|
+
this.updateCharacterCounterPosition();
|
|
14730
|
+
}
|
|
14731
|
+
}
|
|
14732
|
+
maxLengthChanged() {
|
|
14733
|
+
// Setup or teardown ResizeObserver based on maxLength
|
|
14734
|
+
if (this.resizeObserver) {
|
|
14735
|
+
this.resizeObserver.disconnect();
|
|
14736
|
+
}
|
|
14737
|
+
if (this.maxLength && this.nativeTextarea) {
|
|
14738
|
+
this.setupResizeObserver();
|
|
14739
|
+
}
|
|
14740
|
+
// Update ElementInternals validity when maxLength changes
|
|
14741
|
+
if (this.internals && this.internals.setValidity && this.nativeTextarea) {
|
|
14742
|
+
const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);
|
|
14743
|
+
this.internals.setValidity({ tooLong: isTooLong }, isTooLong ? 'Value exceeds maxLength' : '', this.nativeTextarea);
|
|
14744
|
+
}
|
|
13551
14745
|
}
|
|
13552
14746
|
/**
|
|
13553
14747
|
* Emits an `pdsInput` event.
|
|
@@ -13585,6 +14779,12 @@ class PdsTextarea {
|
|
|
13585
14779
|
this.internals = this.el.attachInternals();
|
|
13586
14780
|
}
|
|
13587
14781
|
}
|
|
14782
|
+
disconnectedCallback() {
|
|
14783
|
+
// Clean up ResizeObserver
|
|
14784
|
+
if (this.resizeObserver) {
|
|
14785
|
+
this.resizeObserver.disconnect();
|
|
14786
|
+
}
|
|
14787
|
+
}
|
|
13588
14788
|
componentWillLoad() {
|
|
13589
14789
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el));
|
|
13590
14790
|
this.hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
@@ -13593,6 +14793,71 @@ class PdsTextarea {
|
|
|
13593
14793
|
this.originalPdsInput = this.pdsInput;
|
|
13594
14794
|
// Set initial form value
|
|
13595
14795
|
this.updateFormValue();
|
|
14796
|
+
// Setup ResizeObserver for character counter positioning
|
|
14797
|
+
this.setupResizeObserver();
|
|
14798
|
+
}
|
|
14799
|
+
/**
|
|
14800
|
+
* Sets up ResizeObserver to track textarea resize for character counter positioning
|
|
14801
|
+
*/
|
|
14802
|
+
setupResizeObserver() {
|
|
14803
|
+
if (!this.maxLength || !this.nativeTextarea)
|
|
14804
|
+
return;
|
|
14805
|
+
// ResizeObserver may not be available in test environments
|
|
14806
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
14807
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
14808
|
+
// Use requestAnimationFrame to ensure DOM updates are complete
|
|
14809
|
+
requestAnimationFrame(() => {
|
|
14810
|
+
this.updateCharacterCounterPosition();
|
|
14811
|
+
});
|
|
14812
|
+
});
|
|
14813
|
+
this.resizeObserver.observe(this.nativeTextarea);
|
|
14814
|
+
// Initial positioning with a small delay to ensure counter is rendered
|
|
14815
|
+
requestAnimationFrame(() => {
|
|
14816
|
+
this.updateCharacterCounterPosition();
|
|
14817
|
+
});
|
|
14818
|
+
}
|
|
14819
|
+
}
|
|
14820
|
+
/**
|
|
14821
|
+
* Updates character counter position to stay within textarea boundaries during resize
|
|
14822
|
+
*/
|
|
14823
|
+
updateCharacterCounterPosition() {
|
|
14824
|
+
if (!this.characterCounter || !this.nativeTextarea)
|
|
14825
|
+
return;
|
|
14826
|
+
// Skip positioning in test environments where ResizeObserver isn't available
|
|
14827
|
+
if (typeof ResizeObserver === 'undefined')
|
|
14828
|
+
return;
|
|
14829
|
+
// Ensure the character counter has been rendered and has dimensions
|
|
14830
|
+
if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {
|
|
14831
|
+
// Counter not ready or component hidden - return and let resize/input observers handle positioning later
|
|
14832
|
+
return;
|
|
14833
|
+
}
|
|
14834
|
+
// Position based on textarea's actual dimensions (which change during manual resize)
|
|
14835
|
+
const textareaWidth = this.nativeTextarea.offsetWidth;
|
|
14836
|
+
const textareaHeight = this.nativeTextarea.offsetHeight;
|
|
14837
|
+
const counterWidth = this.characterCounter.offsetWidth;
|
|
14838
|
+
const counterHeight = this.characterCounter.offsetHeight;
|
|
14839
|
+
// Calculate position within textarea boundaries with padding from edges
|
|
14840
|
+
const rightPosition = textareaWidth - counterWidth - 8;
|
|
14841
|
+
const bottomPosition = textareaHeight - counterHeight - 8;
|
|
14842
|
+
// Ensure counter stays within textarea boundaries even when resized very small
|
|
14843
|
+
const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));
|
|
14844
|
+
const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));
|
|
14845
|
+
// Apply absolute positioning within the field wrapper
|
|
14846
|
+
this.characterCounter.style.position = 'absolute';
|
|
14847
|
+
this.characterCounter.style.left = `${finalLeft}px`;
|
|
14848
|
+
this.characterCounter.style.top = `${finalTop}px`;
|
|
14849
|
+
this.characterCounter.style.right = 'auto';
|
|
14850
|
+
this.characterCounter.style.bottom = 'auto';
|
|
14851
|
+
}
|
|
14852
|
+
/**
|
|
14853
|
+
* Renders the character counter when maxLength is set
|
|
14854
|
+
*/
|
|
14855
|
+
renderCharacterCounter() {
|
|
14856
|
+
if (!this.maxLength) {
|
|
14857
|
+
return null;
|
|
14858
|
+
}
|
|
14859
|
+
const currentLength = this.getValue().length;
|
|
14860
|
+
return (hAsync("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": `${currentLength} of ${this.maxLength} characters` }, currentLength, " / ", this.maxLength));
|
|
13596
14861
|
}
|
|
13597
14862
|
renderAction() {
|
|
13598
14863
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
@@ -13644,16 +14909,17 @@ class PdsTextarea {
|
|
|
13644
14909
|
}
|
|
13645
14910
|
render() {
|
|
13646
14911
|
const value = this.getValue();
|
|
13647
|
-
return (hAsync(Host, { key: '
|
|
13648
|
-
hAsync("div", { key: '
|
|
13649
|
-
hAsync("p", { key: '
|
|
13650
|
-
hAsync("p", { key: '
|
|
14912
|
+
return (hAsync(Host, { key: '8a26dea3e236078cdcc24b9d862e7ecabd5ca456', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'ea3a606459ac06b710e11adbf414310fc4af27b8', class: "pds-textarea" }, this.label &&
|
|
14913
|
+
hAsync("div", { key: '970ef900e888e94e752686b543f87c49da43c3b9', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: 'fd17142249728dea905b5cfbf365b35bad35ad5f', htmlFor: this.componentId }, hAsync("span", { key: '17d15c0f9c0c45931b94ee5385f02bcab932ac49', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: 'eb4c78830a99fa7725e8423a923b66aa155e2082', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'eb1b3354e8b74a998f4b7f9592eefb3bec0fce8f', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
|
|
14914
|
+
hAsync("p", { key: '44dfd62abeff5e7fa43bf09aa21a130e806d48d7', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
14915
|
+
hAsync("p", { key: '8b12ec36446e8dc4af1091f5fb7e677059a32dea', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '4728a615f8d46475a4345b78713232073547ad0c', icon: danger, size: "small" }), this.errorMessage))));
|
|
13651
14916
|
}
|
|
13652
14917
|
static get formAssociated() { return true; }
|
|
13653
14918
|
get el() { return getElement(this); }
|
|
13654
14919
|
static get watchers() { return {
|
|
13655
14920
|
"debounce": ["debounceChanged"],
|
|
13656
|
-
"value": ["valueChanged"]
|
|
14921
|
+
"value": ["valueChanged"],
|
|
14922
|
+
"maxLength": ["maxLengthChanged"]
|
|
13657
14923
|
}; }
|
|
13658
14924
|
static get style() { return labelCss + (pdsInputTokensCss + pdsTextareaCss); }
|
|
13659
14925
|
static get cmpMeta() { return {
|
|
@@ -13674,6 +14940,7 @@ class PdsTextarea {
|
|
|
13674
14940
|
"readonly": [4],
|
|
13675
14941
|
"required": [4],
|
|
13676
14942
|
"rows": [2],
|
|
14943
|
+
"maxLength": [514, "max-length"],
|
|
13677
14944
|
"value": [1025],
|
|
13678
14945
|
"hasFocus": [32],
|
|
13679
14946
|
"hasAction": [32],
|
|
@@ -13681,7 +14948,7 @@ class PdsTextarea {
|
|
|
13681
14948
|
},
|
|
13682
14949
|
"$listeners$": undefined,
|
|
13683
14950
|
"$lazyBundleId$": "-",
|
|
13684
|
-
"$attrsToReflect$": []
|
|
14951
|
+
"$attrsToReflect$": [["maxLength", "max-length"]]
|
|
13685
14952
|
}; }
|
|
13686
14953
|
}
|
|
13687
14954
|
|
|
@@ -13767,13 +15034,13 @@ class PdsToast {
|
|
|
13767
15034
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
13768
15035
|
}
|
|
13769
15036
|
render() {
|
|
13770
|
-
return (hAsync(Host, { key: '
|
|
15037
|
+
return (hAsync(Host, { key: 'cf03483967a2414e2c6ee68587af609af0bb64c6', hidden: !this.isVisible }, hAsync("div", { key: '70413e3220f6890dd2367bc96a7060269a33124c', class: {
|
|
13771
15038
|
'pds-toast': true,
|
|
13772
15039
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
13773
15040
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
13774
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
15041
|
+
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '52a991d93d9530e4689586f51b2b78978ff9f4d5', class: "pds-toast__message" }, hAsync("slot", { key: 'fb00a8204606a4621315656e91b3928ed8ad4827' })), this.dismissible && (hAsync("button", { key: 'de78866e9b4f746d823bf68b7d8736ab4bafb9d7', type: "button", class: "pds-toast__button", onClick: () => {
|
|
13775
15042
|
this.dismiss();
|
|
13776
|
-
}, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: '
|
|
15043
|
+
}, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: '495a71b67c4a6690f4c1b9562ddd8862d88a85e4', name: "remove" }))))));
|
|
13777
15044
|
}
|
|
13778
15045
|
static get watchers() { return {
|
|
13779
15046
|
"duration": ["handleDurationChange"]
|
|
@@ -14113,9 +15380,9 @@ class PdsTooltip {
|
|
|
14113
15380
|
}
|
|
14114
15381
|
render() {
|
|
14115
15382
|
const hostId = this.componentId || undefined;
|
|
14116
|
-
return (hAsync(Host, { key: '
|
|
15383
|
+
return (hAsync(Host, { key: 'a07130a894d2e76cbbeab98b62f7d44883b2ffbf', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '3b78462857e4b196caca8d1fa12fc2a4ac286af5', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
14117
15384
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
14118
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
15385
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'a480486c0a4e39d1afe236e344b4711b4914a89f' })), hAsync("div", { key: '1ccfb6f48fbaccc6ba99b4d3e263c6f68c00d3f0', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '67a4d2346c8d1574e17e9ccd035d83e1b232580d', name: "content" }))));
|
|
14119
15386
|
}
|
|
14120
15387
|
get el() { return getElement(this); }
|
|
14121
15388
|
static get watchers() { return {
|
|
@@ -14159,6 +15426,8 @@ registerComponents([
|
|
|
14159
15426
|
PdsDropdownMenu,
|
|
14160
15427
|
PdsDropdownMenuItem,
|
|
14161
15428
|
PdsDropdownMenuSeparator,
|
|
15429
|
+
PdsFilter,
|
|
15430
|
+
PdsFilters,
|
|
14162
15431
|
PdsIcon,
|
|
14163
15432
|
PdsImage,
|
|
14164
15433
|
PdsInput,
|