@pine-ds/core 3.6.0 → 3.8.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/form.js +16 -1
- package/components/form.js.map +1 -1
- package/components/index.d.ts +4 -0
- package/components/index.js +2 -0
- package/components/index.js.map +1 -1
- package/components/index2.js +4 -2
- package/components/index2.js.map +1 -1
- package/components/mock-pds-modal.js +2 -2
- package/components/mock-pds-modal.js.map +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-button2.js +7 -4
- package/components/pds-button2.js.map +1 -1
- package/components/pds-checkbox2.js +8 -5
- package/components/pds-checkbox2.js.map +1 -1
- package/components/pds-chip.js +1 -100
- package/components/pds-chip.js.map +1 -1
- package/components/pds-chip2.js +105 -0
- package/components/pds-chip2.js.map +1 -0
- package/components/pds-combobox.js +735 -54
- package/components/pds-combobox.js.map +1 -1
- package/components/pds-copytext.js +4 -4
- package/components/pds-copytext.js.map +1 -1
- package/components/pds-dropdown-menu-separator.js +1 -1
- package/components/pds-dropdown-menu-separator.js.map +1 -1
- package/components/pds-dropdown-menu.js +1 -1
- package/components/pds-dropdown-menu.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 +3 -3
- package/components/pds-input.js.map +1 -1
- package/components/pds-link2.js +2 -2
- package/components/pds-loader2.js +1 -1
- package/components/pds-modal-content.js +2 -2
- package/components/pds-modal-footer.js +1 -1
- package/components/pds-modal-header.js +1 -1
- package/components/pds-modal.js +4 -4
- package/components/pds-modal.js.map +1 -1
- package/components/pds-popover.js +123 -15
- package/components/pds-popover.js.map +1 -1
- package/components/pds-progress.js +1 -1
- package/components/pds-property.js +1 -1
- package/components/pds-radio.js +11 -5
- package/components/pds-radio.js.map +1 -1
- package/components/pds-row.js +1 -1
- package/components/pds-select.js +22 -6
- package/components/pds-select.js.map +1 -1
- package/components/pds-sortable-item.js +1 -1
- package/components/pds-sortable.js +1 -1
- package/components/pds-switch.js +8 -5
- package/components/pds-switch.js.map +1 -1
- package/components/pds-tab.js +4 -4
- package/components/pds-tab.js.map +1 -1
- package/components/pds-table-body.js +1 -1
- package/components/pds-table-cell2.js +3 -3
- package/components/pds-table-cell2.js.map +1 -1
- package/components/pds-table-head-cell2.js +3 -3
- package/components/pds-table-head-cell2.js.map +1 -1
- package/components/pds-table-head.js +2 -2
- package/components/pds-table-head.js.map +1 -1
- package/components/pds-table-row.js +2 -2
- package/components/pds-table-row.js.map +1 -1
- package/components/pds-table.js +1 -1
- package/components/pds-table.js.map +1 -1
- package/components/pds-tabpanel.js +1 -1
- package/components/pds-tabs.js +14 -4
- package/components/pds-tabs.js.map +1 -1
- package/components/pds-text2.js +1 -1
- package/components/pds-textarea.js +10 -7
- package/components/pds-textarea.js.map +1 -1
- package/components/pds-toast.js +3 -3
- package/components/pds-tooltip.js +4 -4
- package/components/pds-tooltip.js.map +1 -1
- package/dist/cjs/{form-Bx4nzJBo.js → form-hmpgbT1I.js} +18 -2
- package/dist/cjs/form-hmpgbT1I.js.map +1 -0
- 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-DVaLegMK.js → index-DtnvzYhe.js} +7 -3
- package/dist/cjs/index-DtnvzYhe.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 +3 -3
- 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 +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +8 -5
- 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 +9 -6
- package/dist/cjs/pds-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-checkbox.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +4 -4
- package/dist/cjs/pds-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-combobox.cjs.entry.js +719 -51
- 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 +5 -5
- package/dist/cjs/pds-copytext.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-copytext.entry.cjs.js.map +1 -1
- 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 +2 -2
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-dropdown-menu.entry.cjs.js.map +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 +5 -5
- package/dist/cjs/pds-input.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-input.entry.cjs.js.map +1 -1
- 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 +3 -3
- 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 +5 -5
- 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 +118 -13
- package/dist/cjs/pds-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-popover.entry.cjs.js.map +1 -1
- 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 +12 -6
- package/dist/cjs/pds-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-radio.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-row.cjs.entry.js +2 -2
- package/dist/cjs/pds-select.cjs.entry.js +21 -6
- package/dist/cjs/pds-select.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-select.entry.cjs.js.map +1 -1
- 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 +9 -6
- package/dist/cjs/pds-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-switch.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-tab.cjs.entry.js +5 -5
- package/dist/cjs/pds-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-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 +4 -4
- package/dist/cjs/pds-table-cell.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-cell.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +5 -5
- package/dist/cjs/pds-table-head-cell.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-head-cell.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-table-head.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-head.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-head.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-table-row.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-row.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-row.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-table.cjs.entry.js +2 -2
- package/dist/cjs/pds-table.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-tabpanel.cjs.entry.js +2 -2
- package/dist/cjs/pds-tabs.cjs.entry.js +15 -5
- 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 +11 -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 +5 -5
- package/dist/cjs/pds-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tooltip.entry.cjs.js.map +1 -1
- package/dist/cjs/pine-core.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/pds-button/pds-button.css +29 -3
- package/dist/collection/components/pds-button/pds-button.js +8 -5
- 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-checkbox/pds-checkbox.js +7 -4
- package/dist/collection/components/pds-checkbox/pds-checkbox.js.map +1 -1
- package/dist/collection/components/pds-chip/pds-chip.css +2 -2
- package/dist/collection/components/pds-chip/pds-chip.js +17 -5
- package/dist/collection/components/pds-chip/pds-chip.js.map +1 -1
- package/dist/collection/components/pds-combobox/pds-combobox.css +213 -4
- package/dist/collection/components/pds-combobox/pds-combobox.js +837 -54
- package/dist/collection/components/pds-combobox/pds-combobox.js.map +1 -1
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +182 -2
- package/dist/collection/components/pds-copytext/pds-copytext.css +6 -3
- package/dist/collection/components/pds-copytext/pds-copytext.js +2 -2
- package/dist/collection/components/pds-copytext/pds-copytext.js.map +1 -1
- package/dist/collection/components/pds-copytext/stories/pds-copytext.stories.js +1 -1
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.css +4 -1
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.css +1 -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.css +18 -3
- package/dist/collection/components/pds-input/pds-input.js +1 -1
- package/dist/collection/components/pds-input/stories/pds-input.stories.js +42 -0
- 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.js +2 -2
- 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 +2 -2
- package/dist/collection/components/pds-modal/pds-modal.js +3 -3
- package/dist/collection/components/pds-modal/test/mock-pds-modal.js +1 -1
- package/dist/collection/components/pds-popover/pds-popover.css +3 -0
- package/dist/collection/components/pds-popover/pds-popover.js +226 -17
- package/dist/collection/components/pds-popover/pds-popover.js.map +1 -1
- package/dist/collection/components/pds-popover/popover-interface.js +2 -0
- package/dist/collection/components/pds-popover/popover-interface.js.map +1 -0
- package/dist/collection/components/pds-popover/stories/pds-popover.stories.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 +10 -4
- package/dist/collection/components/pds-radio/pds-radio.js.map +1 -1
- package/dist/collection/components/pds-row/pds-row.js +1 -1
- package/dist/collection/components/pds-select/pds-select.css +1 -1
- package/dist/collection/components/pds-select/pds-select.js +19 -2
- package/dist/collection/components/pds-select/pds-select.js.map +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 +7 -4
- package/dist/collection/components/pds-switch/pds-switch.js.map +1 -1
- package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css +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.css +1 -1
- 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.css +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.css +1 -1
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
- package/dist/collection/components/pds-table/pds-table.css +1 -1
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +5 -2
- 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 +15 -4
- package/dist/collection/components/pds-tabs/pds-tabs.js.map +1 -1
- package/dist/collection/components/pds-tabs/stories/pds-tabs.stories.js +1 -1
- package/dist/collection/components/pds-text/pds-text.js +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.css +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.js +8 -5
- package/dist/collection/components/pds-textarea/pds-textarea.js.map +1 -1
- package/dist/collection/components/pds-toast/pds-toast.js +3 -3
- package/dist/collection/components/pds-tooltip/pds-tooltip.css +1 -1
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +3 -3
- package/dist/collection/components/pds-tooltip/pds-tooltip.js.map +1 -1
- package/dist/collection/utils/form.js +15 -0
- package/dist/collection/utils/form.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/docs.json +825 -84
- package/dist/esm/form-DwjNklzi.js +47 -0
- package/dist/esm/form-DwjNklzi.js.map +1 -0
- 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-D4zJBIgl.js} +6 -4
- package/dist/esm/index-D4zJBIgl.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mock-pds-modal.entry.js +3 -3
- 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 +1 -1
- package/dist/esm/pds-button.entry.js +8 -5
- package/dist/esm/pds-button.entry.js.map +1 -1
- package/dist/esm/pds-checkbox.entry.js +9 -6
- package/dist/esm/pds-checkbox.entry.js.map +1 -1
- package/dist/esm/pds-chip.entry.js +4 -4
- package/dist/esm/pds-chip.entry.js.map +1 -1
- package/dist/esm/pds-combobox.entry.js +719 -51
- package/dist/esm/pds-combobox.entry.js.map +1 -1
- package/dist/esm/pds-copytext.entry.js +5 -5
- package/dist/esm/pds-copytext.entry.js.map +1 -1
- 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 +2 -2
- package/dist/esm/pds-dropdown-menu.entry.js.map +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 +5 -5
- package/dist/esm/pds-input.entry.js.map +1 -1
- 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 +3 -3
- 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 +5 -5
- package/dist/esm/pds-modal.entry.js.map +1 -1
- package/dist/esm/pds-popover.entry.js +118 -13
- package/dist/esm/pds-popover.entry.js.map +1 -1
- 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 +12 -6
- package/dist/esm/pds-radio.entry.js.map +1 -1
- package/dist/esm/pds-row.entry.js +2 -2
- package/dist/esm/pds-select.entry.js +21 -6
- package/dist/esm/pds-select.entry.js.map +1 -1
- 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 +9 -6
- package/dist/esm/pds-switch.entry.js.map +1 -1
- package/dist/esm/pds-tab.entry.js +5 -5
- package/dist/esm/pds-tab.entry.js.map +1 -1
- package/dist/esm/pds-table-body.entry.js +2 -2
- package/dist/esm/pds-table-cell.entry.js +4 -4
- package/dist/esm/pds-table-cell.entry.js.map +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +5 -5
- package/dist/esm/pds-table-head-cell.entry.js.map +1 -1
- package/dist/esm/pds-table-head.entry.js +3 -3
- package/dist/esm/pds-table-head.entry.js.map +1 -1
- package/dist/esm/pds-table-row.entry.js +3 -3
- package/dist/esm/pds-table-row.entry.js.map +1 -1
- package/dist/esm/pds-table.entry.js +2 -2
- package/dist/esm/pds-table.entry.js.map +1 -1
- package/dist/esm/pds-tabpanel.entry.js +2 -2
- package/dist/esm/pds-tabs.entry.js +15 -5
- 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 +11 -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 +5 -5
- package/dist/esm/pds-tooltip.entry.js.map +1 -1
- package/dist/esm/pine-core.js +3 -3
- package/dist/esm-es5/form-DwjNklzi.js +2 -0
- package/dist/esm-es5/form-DwjNklzi.js.map +1 -0
- 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-D4zJBIgl.js +2 -0
- package/dist/esm-es5/index-D4zJBIgl.js.map +1 -0
- 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-button.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js.map +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js.map +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js.map +1 -1
- package/dist/esm-es5/pds-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-copytext.entry.js.map +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-dropdown-menu.entry.js.map +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-input.entry.js.map +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-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-popover.entry.js.map +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-radio.entry.js.map +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-select.entry.js.map +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-switch.entry.js.map +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-body.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-head.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-row.entry.js +1 -1
- package/dist/esm-es5/pds-table-row.entry.js.map +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js.map +1 -1
- package/dist/esm-es5/pds-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/pds-tooltip.entry.js.map +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-00346c62.system.entry.js +2 -0
- package/dist/pine-core/p-00346c62.system.entry.js.map +1 -0
- package/dist/pine-core/{p-72b05928.system.entry.js → p-0486ecc6.system.entry.js} +2 -2
- package/dist/pine-core/{p-72b05928.system.entry.js.map → p-0486ecc6.system.entry.js.map} +1 -1
- package/dist/pine-core/p-07e129db.entry.js +2 -0
- package/dist/pine-core/{p-540cfd70.entry.js → p-1009009c.entry.js} +2 -2
- package/dist/pine-core/{p-349a8869.entry.js → p-100de2b7.entry.js} +2 -2
- package/dist/pine-core/p-1b932ee3.entry.js +2 -0
- package/dist/pine-core/p-1b932ee3.entry.js.map +1 -0
- 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-20466115.entry.js +2 -0
- package/dist/pine-core/p-20466115.entry.js.map +1 -0
- package/dist/pine-core/{p-dfc5ab34.system.entry.js → p-2054b5cb.system.entry.js} +2 -2
- package/dist/pine-core/{p-8726c99d.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-54183d70.system.entry.js → p-2aab28b1.system.entry.js} +2 -2
- 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-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-378df5eb.system.entry.js +2 -0
- package/dist/pine-core/{p-e08f492a.entry.js → p-39648ce2.entry.js} +2 -2
- package/dist/pine-core/p-3dce3bc0.system.entry.js +2 -0
- package/dist/pine-core/p-3dce3bc0.system.entry.js.map +1 -0
- package/dist/pine-core/{p-5f5b19f4.entry.js → p-41e2fe3a.entry.js} +2 -2
- package/dist/pine-core/p-449ebe39.system.entry.js +2 -0
- package/dist/pine-core/p-45d574f1.system.entry.js +2 -0
- package/dist/pine-core/p-45d574f1.system.entry.js.map +1 -0
- package/dist/pine-core/p-465e3418.system.entry.js +2 -0
- package/dist/pine-core/p-465e3418.system.entry.js.map +1 -0
- package/dist/pine-core/p-4xv5UVkx.system.js.map +1 -0
- package/dist/pine-core/p-538b3902.system.entry.js +2 -0
- package/dist/pine-core/p-538b3902.system.entry.js.map +1 -0
- package/dist/pine-core/{p-c13ef6a7.system.entry.js → p-55d06d0a.system.entry.js} +3 -3
- package/dist/pine-core/{p-075eecf9.entry.js → p-5ac7af9e.entry.js} +2 -2
- package/dist/pine-core/p-61a25ab2.entry.js +2 -0
- package/dist/pine-core/p-61a25ab2.entry.js.map +1 -0
- package/dist/pine-core/p-6381a811.system.entry.js +4 -0
- package/dist/pine-core/p-6381a811.system.entry.js.map +1 -0
- package/dist/pine-core/p-6c36cab6.entry.js +2 -0
- package/dist/pine-core/p-6c36cab6.entry.js.map +1 -0
- package/dist/pine-core/p-6ed297cb.entry.js +2 -0
- package/dist/pine-core/p-6ed297cb.entry.js.map +1 -0
- package/dist/pine-core/p-708e963c.system.entry.js +2 -0
- package/dist/pine-core/p-708e963c.system.entry.js.map +1 -0
- package/dist/pine-core/p-7090d42d.system.entry.js +2 -0
- package/dist/pine-core/p-7090d42d.system.entry.js.map +1 -0
- package/dist/pine-core/{p-4deb7b8c.entry.js → p-725c350c.entry.js} +2 -2
- package/dist/pine-core/{p-4deb7b8c.entry.js.map → p-725c350c.entry.js.map} +1 -1
- package/dist/pine-core/{p-b2b1b7a9.system.entry.js → p-73a2e028.system.entry.js} +2 -2
- package/dist/pine-core/p-75187352.system.entry.js +2 -0
- package/dist/pine-core/p-75187352.system.entry.js.map +1 -0
- package/dist/pine-core/p-786967e8.entry.js +2 -0
- package/dist/pine-core/p-79422986.entry.js +2 -0
- package/dist/pine-core/p-79422986.entry.js.map +1 -0
- package/dist/pine-core/p-81bc089e.entry.js +2 -0
- package/dist/pine-core/p-81bc089e.entry.js.map +1 -0
- package/dist/pine-core/p-85c41629.entry.js +2 -0
- package/dist/pine-core/p-85c41629.entry.js.map +1 -0
- package/dist/pine-core/p-86263a62.entry.js +2 -0
- package/dist/pine-core/p-86263a62.entry.js.map +1 -0
- package/dist/pine-core/p-875d5d5a.system.entry.js +2 -0
- package/dist/pine-core/p-87ed43d5.entry.js +2 -0
- package/dist/pine-core/p-87ed43d5.entry.js.map +1 -0
- package/dist/pine-core/{p-c8122bea.entry.js → p-88773b86.entry.js} +2 -2
- package/dist/pine-core/p-8b4fb3f0.entry.js +2 -0
- package/dist/pine-core/p-8b4fb3f0.entry.js.map +1 -0
- package/dist/pine-core/p-8b5fc4b4.system.entry.js +2 -0
- package/dist/pine-core/p-8b5fc4b4.system.entry.js.map +1 -0
- package/dist/pine-core/{p-e89cb1f2.system.entry.js → p-8f69dd71.system.entry.js} +2 -2
- package/dist/pine-core/p-94183716.entry.js +2 -0
- package/dist/pine-core/p-94183716.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-9766923f.entry.js +2 -0
- package/dist/pine-core/p-9766923f.entry.js.map +1 -0
- package/dist/pine-core/p-9b335a9f.entry.js +2 -0
- package/dist/pine-core/p-9b335a9f.entry.js.map +1 -0
- package/dist/pine-core/p-9c579956.system.entry.js +2 -0
- package/dist/pine-core/p-9c579956.system.entry.js.map +1 -0
- package/dist/pine-core/p-9cf2b7a6.entry.js +2 -0
- package/dist/pine-core/p-9cf2b7a6.entry.js.map +1 -0
- package/dist/pine-core/{p-Dh7jcLgJ.system.js.map → p-B-Doh1Wu.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-BG99uNIQ.system.js +2 -0
- package/dist/pine-core/p-BG99uNIQ.system.js.map +1 -0
- package/dist/pine-core/p-BHavepTY.system.js +2 -0
- package/dist/pine-core/p-BHavepTY.system.js.map +1 -0
- package/dist/pine-core/{p-_E9ZEzfO.system.js.map → p-BIjeWHX_.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-BLC5kuro.system.js.map +1 -0
- 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-D05FrqXr.system.js.map → p-BRIdBthP.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-Kj_j7PHx.system.js.map → p-BkPtASB1.system.js.map} +1 -1
- package/dist/pine-core/p-Bkfqi7zE.system.js.map +1 -0
- package/dist/pine-core/p-ByzULH8m.system.js.map +1 -0
- package/dist/pine-core/p-C1KChp5Q.system.js.map +1 -0
- package/dist/pine-core/p-C2W-sHx5.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-CIBXMJd-.system.js.map +1 -0
- package/dist/pine-core/p-CJNB_wrl.system.js.map +1 -0
- package/dist/pine-core/p-CSa_b_JX.system.js.map +1 -0
- package/dist/pine-core/p-Cid662up.system.js.map +1 -0
- 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-Cqzmj3D8.system.js.map +1 -0
- package/dist/pine-core/{p-B1FQkx7R.system.js.map → p-Ctdx1tCG.system.js.map} +1 -1
- package/dist/pine-core/{p-3gYSFJIn.system.js.map → p-CwNRZQss.system.js.map} +1 -1
- package/dist/pine-core/p-Cxlv_2hD.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-D0foS5EP.system.js.map +1 -0
- package/dist/pine-core/p-D4zJBIgl.js +2 -0
- package/dist/pine-core/p-D4zJBIgl.js.map +1 -0
- package/dist/pine-core/{p-MBv7PsKc.system.js.map → p-D52TGCLt.system.js.map} +1 -1
- package/dist/pine-core/{p-CHJgq_z7.system.js.map → p-D7B3vOdC.system.js.map} +1 -1
- package/dist/pine-core/p-DCjZr2HA.system.js.map +1 -0
- package/dist/pine-core/p-DN3VK2yy.system.js.map +1 -0
- package/dist/pine-core/{p-Df_3qA_L.system.js.map → p-DOqVoXeA.system.js.map} +1 -1
- package/dist/pine-core/p-DW3lkDNz.system.js.map +1 -0
- package/dist/pine-core/p-DfrSuf6X.system.js.map +1 -0
- package/dist/pine-core/{p-CLoi4eKt.system.js.map → p-DmWU0f_O.system.js.map} +1 -1
- package/dist/pine-core/p-DpemOPFJ.system.js.map +1 -0
- package/dist/pine-core/p-DpzRSULT.system.js.map +1 -0
- package/dist/pine-core/{p-DYb5Y47j.system.js.map → p-Dq7Wu9rr.system.js.map} +1 -1
- package/dist/pine-core/p-DtdXdmNp.system.js.map +1 -0
- package/dist/pine-core/p-Dw05F6Xg.system.js.map +1 -0
- package/dist/pine-core/p-Dw7zXw_6.system.js.map +1 -0
- package/dist/pine-core/p-DwjNklzi.js +2 -0
- package/dist/pine-core/p-DwjNklzi.js.map +1 -0
- package/dist/pine-core/p-GrmqKqN8.system.js.map +1 -0
- package/dist/pine-core/p-HHZU8rBT.system.js.map +1 -0
- package/dist/pine-core/{p-C5Y492i0.system.js.map → p-M-zMP2QX.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-a2708028.entry.js +2 -0
- package/dist/pine-core/p-a2708028.entry.js.map +1 -0
- package/dist/pine-core/{p-72053224.entry.js → p-a2cb65df.entry.js} +3 -3
- package/dist/pine-core/{p-52d37cc1.entry.js → p-a3785977.entry.js} +2 -2
- package/dist/pine-core/p-a645818a.entry.js +2 -0
- package/dist/pine-core/p-a707a7da.system.entry.js +2 -0
- package/dist/pine-core/p-a707a7da.system.entry.js.map +1 -0
- package/dist/pine-core/{p-f583e5d4.entry.js → p-a9cfaa1f.entry.js} +2 -2
- package/dist/pine-core/p-acd87a10.entry.js +2 -0
- package/dist/pine-core/p-acd87a10.entry.js.map +1 -0
- package/dist/pine-core/p-ae4ec5cf.system.entry.js +2 -0
- package/dist/pine-core/p-ae4ec5cf.system.entry.js.map +1 -0
- package/dist/pine-core/p-b23dd01c.entry.js +2 -0
- package/dist/pine-core/p-b23dd01c.entry.js.map +1 -0
- package/dist/pine-core/p-b669e1d9.entry.js +2 -0
- package/dist/pine-core/p-b9aafec7.system.entry.js +2 -0
- package/dist/pine-core/p-b9aafec7.system.entry.js.map +1 -0
- package/dist/pine-core/{p-52cb152b.system.entry.js → p-bc2fecd4.system.entry.js} +2 -2
- 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-c3579585.system.entry.js +2 -0
- package/dist/pine-core/p-c3579585.system.entry.js.map +1 -0
- package/dist/pine-core/{p-fcb39155.system.entry.js → p-c3f84df8.system.entry.js} +2 -2
- 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-cffc98ae.entry.js +3 -0
- package/dist/pine-core/p-cffc98ae.entry.js.map +1 -0
- package/dist/pine-core/{p-5e8badb9.entry.js → p-d1b27fa4.entry.js} +2 -2
- package/dist/pine-core/p-d2b15290.system.entry.js +2 -0
- package/dist/pine-core/p-d2b15290.system.entry.js.map +1 -0
- package/dist/pine-core/p-d4d22aee.entry.js +2 -0
- package/dist/pine-core/p-d4d22aee.entry.js.map +1 -0
- package/dist/pine-core/{p-5da82e8c.system.entry.js → p-dace69e7.system.entry.js} +2 -2
- package/dist/pine-core/p-db12273e.system.entry.js +2 -0
- package/dist/pine-core/p-e34c1224.system.entry.js +2 -0
- package/dist/pine-core/p-e34c1224.system.entry.js.map +1 -0
- package/dist/pine-core/p-e5adbf74.system.entry.js +2 -0
- package/dist/pine-core/p-e5adbf74.system.entry.js.map +1 -0
- package/dist/pine-core/p-e6085566.system.entry.js +2 -0
- package/dist/pine-core/p-e6085566.system.entry.js.map +1 -0
- package/dist/pine-core/p-e683e197.system.entry.js +2 -0
- package/dist/pine-core/p-e683e197.system.entry.js.map +1 -0
- package/dist/pine-core/p-e6b051e8.system.entry.js +2 -0
- package/dist/pine-core/p-e6b051e8.system.entry.js.map +1 -0
- package/dist/pine-core/{p-f55b9f90.system.entry.js → p-e702a8dc.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-f15cd180.entry.js +2 -0
- package/dist/pine-core/p-f15cd180.entry.js.map +1 -0
- 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-f6d0bd39.entry.js +2 -0
- package/dist/pine-core/p-f6d0bd39.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-f92d7570.system.entry.js +2 -0
- package/dist/pine-core/p-f92d7570.system.entry.js.map +1 -0
- package/dist/pine-core/{p-BZoPY2dP.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-B7S-9dbT.system.js.map → p-kcOuXqWo.system.js.map} +1 -1
- package/dist/pine-core/{p-c0df3222.entry.js.map → p-ozqEY4Zc.system.js.map} +1 -1
- package/dist/pine-core/{p-CqK-uhv8.system.js.map → p-yaM1kuaC.system.js.map} +1 -1
- package/dist/pine-core/pds-button.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-checkbox.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-chip.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-combobox.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-copytext.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-dropdown-menu.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-input.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-modal.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-popover.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-radio.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-select.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-switch.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-tab.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-table-cell.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-table-head-cell.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-table-head.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-table-row.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-table.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/pds-tooltip.entry.esm.js.map +1 -1
- package/dist/pine-core/pine-core.css +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/pine-core/pine-core.js +1 -1
- package/dist/types/components/pds-button/pds-button.d.ts +1 -1
- package/dist/types/components/pds-checkbox/pds-checkbox.d.ts +1 -0
- package/dist/types/components/pds-chip/pds-chip.d.ts +3 -2
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +84 -5
- 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-popover/pds-popover.d.ts +33 -2
- package/dist/types/components/pds-popover/popover-interface.d.ts +8 -0
- package/dist/types/components/pds-radio/pds-radio.d.ts +3 -0
- package/dist/types/components/pds-select/pds-select.d.ts +6 -0
- package/dist/types/components/pds-switch/pds-switch.d.ts +1 -0
- package/dist/types/components/pds-tabs/pds-tabs.d.ts +1 -0
- package/dist/types/components/pds-textarea/pds-textarea.d.ts +1 -0
- package/dist/types/components.d.ts +227 -12
- package/dist/types/utils/form.d.ts +9 -0
- package/dist/types/utils/types.d.ts +2 -0
- package/hydrate/index.js +1529 -146
- package/hydrate/index.mjs +1529 -146
- package/package.json +2 -2
- package/dist/cjs/form-Bx4nzJBo.js.map +0 -1
- package/dist/cjs/index-DVaLegMK.js.map +0 -1
- package/dist/cjs/index-g-uSeICs.js.map +0 -1
- package/dist/esm/form-DTL_39D_.js +0 -32
- package/dist/esm/form-DTL_39D_.js.map +0 -1
- package/dist/esm/index-BVCWKPy3.js.map +0 -1
- package/dist/esm/index-DrJ5r5Pu.js.map +0 -1
- package/dist/esm-es5/form-DTL_39D_.js +0 -2
- package/dist/esm-es5/form-DTL_39D_.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/esm-es5/index-DrJ5r5Pu.js.map +0 -1
- package/dist/pine-core/p-00616fc9.entry.js +0 -2
- package/dist/pine-core/p-00616fc9.entry.js.map +0 -1
- package/dist/pine-core/p-023d8b71.system.entry.js +0 -2
- package/dist/pine-core/p-023d8b71.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-0TIvNV5c.system.js.map +0 -1
- package/dist/pine-core/p-0de9f8da.system.entry.js +0 -2
- package/dist/pine-core/p-0de9f8da.system.entry.js.map +0 -1
- package/dist/pine-core/p-14a52961.system.entry.js +0 -2
- package/dist/pine-core/p-14a52961.system.entry.js.map +0 -1
- package/dist/pine-core/p-232a2043.entry.js +0 -2
- package/dist/pine-core/p-25190921.entry.js +0 -2
- package/dist/pine-core/p-25190921.entry.js.map +0 -1
- package/dist/pine-core/p-297afc49.system.entry.js +0 -2
- package/dist/pine-core/p-297afc49.system.entry.js.map +0 -1
- package/dist/pine-core/p-2e19f167.system.entry.js +0 -2
- package/dist/pine-core/p-2e19f167.system.entry.js.map +0 -1
- package/dist/pine-core/p-318fd0cf.entry.js +0 -2
- package/dist/pine-core/p-318fd0cf.entry.js.map +0 -1
- package/dist/pine-core/p-346561a6.system.entry.js +0 -2
- package/dist/pine-core/p-346561a6.system.entry.js.map +0 -1
- package/dist/pine-core/p-3pEJO0vO.system.js.map +0 -1
- package/dist/pine-core/p-41d1b164.entry.js +0 -2
- package/dist/pine-core/p-41d1b164.entry.js.map +0 -1
- package/dist/pine-core/p-44087d1c.entry.js +0 -2
- package/dist/pine-core/p-44087d1c.entry.js.map +0 -1
- package/dist/pine-core/p-464dd476.entry.js +0 -2
- package/dist/pine-core/p-464dd476.entry.js.map +0 -1
- 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-4bbf3e31.entry.js +0 -2
- package/dist/pine-core/p-4bbf3e31.entry.js.map +0 -1
- package/dist/pine-core/p-4c81420c.entry.js +0 -2
- package/dist/pine-core/p-4c81420c.entry.js.map +0 -1
- package/dist/pine-core/p-503cab1f.entry.js +0 -2
- package/dist/pine-core/p-503cab1f.entry.js.map +0 -1
- package/dist/pine-core/p-50c9e865.entry.js +0 -2
- package/dist/pine-core/p-50c9e865.entry.js.map +0 -1
- package/dist/pine-core/p-5708f95a.entry.js +0 -2
- package/dist/pine-core/p-651861ff.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-6d4d4705.system.entry.js +0 -2
- package/dist/pine-core/p-6d4d4705.system.entry.js.map +0 -1
- package/dist/pine-core/p-6f4a6d0b.entry.js +0 -2
- package/dist/pine-core/p-6f4a6d0b.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-73158adf.system.entry.js.map +0 -1
- 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-7cb4f0de.entry.js +0 -2
- package/dist/pine-core/p-7cb4f0de.entry.js.map +0 -1
- package/dist/pine-core/p-84949a12.entry.js +0 -2
- package/dist/pine-core/p-84949a12.entry.js.map +0 -1
- package/dist/pine-core/p-8722865f.system.entry.js +0 -2
- package/dist/pine-core/p-8722865f.system.entry.js.map +0 -1
- package/dist/pine-core/p-8999b63d.system.entry.js +0 -2
- package/dist/pine-core/p-8999b63d.system.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-8d7abc83.entry.js +0 -2
- package/dist/pine-core/p-8d7abc83.entry.js.map +0 -1
- package/dist/pine-core/p-92c52409.system.entry.js +0 -2
- package/dist/pine-core/p-92c52409.system.entry.js.map +0 -1
- package/dist/pine-core/p-98fe56d9.entry.js +0 -2
- package/dist/pine-core/p-98fe56d9.entry.js.map +0 -1
- package/dist/pine-core/p-BEn3hirk.system.js +0 -2
- package/dist/pine-core/p-BEn3hirk.system.js.map +0 -1
- package/dist/pine-core/p-BG7_qxVr.system.js +0 -2
- package/dist/pine-core/p-BG7_qxVr.system.js.map +0 -1
- 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-BRygGju8.system.js.map +0 -1
- package/dist/pine-core/p-BVCWKPy3.js.map +0 -1
- package/dist/pine-core/p-BVKCNX0X.system.js.map +0 -1
- package/dist/pine-core/p-B_C-mRjx.system.js.map +0 -1
- package/dist/pine-core/p-C0zqu7Gr.system.js.map +0 -1
- package/dist/pine-core/p-CCQUgOoR.system.js.map +0 -1
- package/dist/pine-core/p-CJT--ZXC.system.js.map +0 -1
- package/dist/pine-core/p-CQ8f8GnD.system.js.map +0 -1
- package/dist/pine-core/p-CcXaBX2A.system.js.map +0 -1
- package/dist/pine-core/p-CgyVIfOY.system.js.map +0 -1
- package/dist/pine-core/p-Cmzqpibo.system.js.map +0 -1
- package/dist/pine-core/p-Co5XZmTN.system.js.map +0 -1
- package/dist/pine-core/p-CpdNWpfd.system.js.map +0 -1
- package/dist/pine-core/p-Czoq9yJM.system.js.map +0 -1
- package/dist/pine-core/p-D9_z2w3q.system.js.map +0 -1
- package/dist/pine-core/p-DHmJZxQk.system.js.map +0 -1
- package/dist/pine-core/p-DTL_39D_.js +0 -2
- package/dist/pine-core/p-DTL_39D_.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-DrJ5r5Pu.js.map +0 -1
- package/dist/pine-core/p-IhWWc2L_.system.js.map +0 -1
- package/dist/pine-core/p-UsEwlBJ0.system.js.map +0 -1
- package/dist/pine-core/p-WkrM7Vv0.system.js.map +0 -1
- package/dist/pine-core/p-a04556e4.system.entry.js +0 -2
- package/dist/pine-core/p-a04556e4.system.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-a9895385.system.entry.js +0 -2
- package/dist/pine-core/p-a9895385.system.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-ac37cf0d.entry.js +0 -2
- package/dist/pine-core/p-ac37cf0d.entry.js.map +0 -1
- package/dist/pine-core/p-ba187a35.entry.js +0 -2
- package/dist/pine-core/p-ba187a35.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-c0df3222.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-cd785026.system.entry.js +0 -2
- package/dist/pine-core/p-d8d8fe07.system.entry.js +0 -2
- package/dist/pine-core/p-d8d8fe07.system.entry.js.map +0 -1
- package/dist/pine-core/p-da367b5e.system.entry.js +0 -2
- package/dist/pine-core/p-da367b5e.system.entry.js.map +0 -1
- package/dist/pine-core/p-dc19ce6c.system.entry.js +0 -2
- package/dist/pine-core/p-dc19ce6c.system.entry.js.map +0 -1
- package/dist/pine-core/p-deb8a499.system.entry.js +0 -2
- package/dist/pine-core/p-deb8a499.system.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-fd091234.system.entry.js +0 -2
- package/dist/pine-core/p-fd091234.system.entry.js.map +0 -1
- package/dist/pine-core/p-m6UZWRsP.system.js.map +0 -1
- package/dist/pine-core/p-pQqXEKPh.system.js.map +0 -1
- /package/dist/pine-core/{p-66b10d29.entry.js.map → p-07e129db.entry.js.map} +0 -0
- /package/dist/pine-core/{p-540cfd70.entry.js.map → p-1009009c.entry.js.map} +0 -0
- /package/dist/pine-core/{p-349a8869.entry.js.map → p-100de2b7.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-dfc5ab34.system.entry.js.map → p-2054b5cb.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-8726c99d.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-54183d70.system.entry.js.map → p-2aab28b1.system.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-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-e08f492a.entry.js.map → p-39648ce2.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5f5b19f4.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-c13ef6a7.system.entry.js.map → p-55d06d0a.system.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-b2b1b7a9.system.entry.js.map → p-73a2e028.system.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-e65a7d1c.system.entry.js.map → p-875d5d5a.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c8122bea.entry.js.map → p-88773b86.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-72053224.entry.js.map → p-a2cb65df.entry.js.map} +0 -0
- /package/dist/pine-core/{p-52d37cc1.entry.js.map → p-a3785977.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-5708f95a.entry.js.map → p-b669e1d9.entry.js.map} +0 -0
- /package/dist/pine-core/{p-52cb152b.system.entry.js.map → p-bc2fecd4.system.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-fcb39155.system.entry.js.map → p-c3f84df8.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-5e8badb9.entry.js.map → p-d1b27fa4.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5da82e8c.system.entry.js.map → p-dace69e7.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-f55b9f90.system.entry.js.map → p-e702a8dc.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-52af1890.system.entry.js.map → p-f911dde3.system.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:
|
|
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:var(--pine-z-index-modal)}@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:var(--pine-z-index-priority)}.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
|
|
@@ -3153,7 +3156,7 @@ class MockPdsModal {
|
|
|
3153
3156
|
'pds-modal__backdrop': true,
|
|
3154
3157
|
'open': this.open,
|
|
3155
3158
|
};
|
|
3156
|
-
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" })))));
|
|
3157
3160
|
}
|
|
3158
3161
|
get el() { return getElement(this); }
|
|
3159
3162
|
static get style() { return pdsModalCss$1; }
|
|
@@ -3175,8 +3178,9 @@ class MockPdsModal {
|
|
|
3175
3178
|
}; }
|
|
3176
3179
|
}
|
|
3177
3180
|
|
|
3178
|
-
/* pds-icons v9.
|
|
3181
|
+
/* pds-icons v9.9.0, ES Modules */
|
|
3179
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>";
|
|
3180
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>";
|
|
3181
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>";
|
|
3182
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>";
|
|
@@ -3186,6 +3190,7 @@ const enlarge = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
|
|
|
3186
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>";
|
|
3187
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>";
|
|
3188
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>";
|
|
3189
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>";
|
|
3190
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>";
|
|
3191
3196
|
|
|
@@ -3761,7 +3766,7 @@ class PdsBox {
|
|
|
3761
3766
|
}; }
|
|
3762
3767
|
}
|
|
3763
3768
|
|
|
3764
|
-
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-
|
|
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);--pds-button-outline-offset:var(--pine-border-width);--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-radius:var(--pds-button-border-radius);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-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);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.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}";
|
|
3765
3770
|
|
|
3766
3771
|
/**
|
|
3767
3772
|
* @part button - Exposes the button element for styling.
|
|
@@ -3904,9 +3909,12 @@ class PdsButton {
|
|
|
3904
3909
|
return elements.length > 0;
|
|
3905
3910
|
}
|
|
3906
3911
|
renderStartContent() {
|
|
3907
|
-
const hasIcon = this.icon && this.variant !== 'disclosure';
|
|
3912
|
+
const hasIcon = this.icon && this.variant !== 'disclosure' && this.variant !== 'filter';
|
|
3908
3913
|
const hasStartSlot = this.hasSlotContent('start');
|
|
3909
|
-
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)) {
|
|
3910
3918
|
return (hAsync("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon", "aria-hidden": "true" }));
|
|
3911
3919
|
}
|
|
3912
3920
|
else if (Boolean(hasStartSlot)) {
|
|
@@ -3996,6 +4004,21 @@ const isRequired = (target, component) => {
|
|
|
3996
4004
|
(target.checkValidity() === false) ? component.invalid = true : component.invalid = false;
|
|
3997
4005
|
}
|
|
3998
4006
|
};
|
|
4007
|
+
/**
|
|
4008
|
+
* Exposes a readonly type property on a custom form element to match native form element behavior.
|
|
4009
|
+
* This makes the type property enumerable and accessible via element.type, matching native HTML elements.
|
|
4010
|
+
* The property is non-configurable, preventing it from being redefined or deleted at runtime.
|
|
4011
|
+
*
|
|
4012
|
+
* @param element - The custom element to add the type property to
|
|
4013
|
+
* @param type - The type value (string literal) or a getter function that returns the type
|
|
4014
|
+
*/
|
|
4015
|
+
function exposeTypeProperty(element, type) {
|
|
4016
|
+
Object.defineProperty(element, 'type', {
|
|
4017
|
+
get: typeof type === 'function' ? type : () => type,
|
|
4018
|
+
enumerable: true,
|
|
4019
|
+
configurable: false
|
|
4020
|
+
});
|
|
4021
|
+
}
|
|
3999
4022
|
|
|
4000
4023
|
/**
|
|
4001
4024
|
* Inherit attributes from the host element
|
|
@@ -4088,6 +4111,7 @@ class PdsCheckbox {
|
|
|
4088
4111
|
this.pdsCheckboxChange = createEvent(this, "pdsCheckboxChange");
|
|
4089
4112
|
this.pdsCheckboxInput = createEvent(this, "pdsCheckboxInput");
|
|
4090
4113
|
this.inheritedAttributes = {};
|
|
4114
|
+
this._type = 'checkbox';
|
|
4091
4115
|
/**
|
|
4092
4116
|
* It determines whether or not the checkbox is checked.
|
|
4093
4117
|
*/
|
|
@@ -4131,6 +4155,8 @@ class PdsCheckbox {
|
|
|
4131
4155
|
if (this.el.attachInternals) {
|
|
4132
4156
|
this.internals = this.el.attachInternals();
|
|
4133
4157
|
}
|
|
4158
|
+
// Expose type property on the element instance to match native form element behavior
|
|
4159
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
4134
4160
|
}
|
|
4135
4161
|
componentDidLoad() {
|
|
4136
4162
|
this.updateFormValue();
|
|
@@ -4167,9 +4193,9 @@ class PdsCheckbox {
|
|
|
4167
4193
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
4168
4194
|
}
|
|
4169
4195
|
render() {
|
|
4170
|
-
return (hAsync(Host, { key: '
|
|
4171
|
-
hAsync("div", { key: '
|
|
4172
|
-
hAsync("div", { key: '
|
|
4196
|
+
return (hAsync(Host, { key: '03464c7d6a3dc475e266b5f913928d17b2a338d6', class: this.classNames() }, hAsync("label", { key: '194a98ecdaa1c2627c4a94a4aff9c3c83ddd3a0b', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '8878b64c34ad11dca1e90b72afb0cd30017d3bc2', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), hAsync("span", { key: 'f3db09d434084bf96b5f1b0da8c095d6517d91b5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
4197
|
+
hAsync("div", { key: 'c781a27975cdd7c4361fa9d29a06f915633f52ba', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
4198
|
+
hAsync("div", { key: 'b586e97855401f21dcbd5822e4bad099b6a7dc2a', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '98c8db2a196b84683aa777fd1a9a9291e30acf78', icon: danger, size: "small" }), this.errorMessage)));
|
|
4173
4199
|
}
|
|
4174
4200
|
static get formAssociated() { return true; }
|
|
4175
4201
|
get el() { return getElement(this); }
|
|
@@ -4202,7 +4228,7 @@ class PdsCheckbox {
|
|
|
4202
4228
|
|
|
4203
4229
|
const pdsChipTokensCss = ":host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600)}";
|
|
4204
4230
|
|
|
4205
|
-
const pdsChipCss = ":host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pine-chip-color-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-color-text-accent);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pine-chip-color-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-color-text-danger);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pine-chip-color-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-color-text-info);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pine-chip-color-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pine-chip-color-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-color-text-success);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pine-chip-color-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-color-text-warning);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--large){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--large) .pds-chip__label,:host(.pds-chip--large) .pds-chip__button{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--large.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--large.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:
|
|
4231
|
+
const pdsChipCss = ":host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pine-chip-color-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-color-text-accent);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pine-chip-color-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-color-text-danger);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pine-chip-color-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-color-text-info);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pine-chip-color-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pine-chip-color-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-color-text-success);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pine-chip-color-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-color-text-warning);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--large){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--large) .pds-chip__label,:host(.pds-chip--large) .pds-chip__button{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--large.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--large.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}";
|
|
4206
4232
|
|
|
4207
4233
|
/**
|
|
4208
4234
|
* @slot (default) - The chip's label text.
|
|
@@ -4268,7 +4294,7 @@ class PdsChip {
|
|
|
4268
4294
|
return chipContent;
|
|
4269
4295
|
}
|
|
4270
4296
|
render() {
|
|
4271
|
-
return (hAsync(Host, { key: '
|
|
4297
|
+
return (hAsync(Host, { key: '4cabdea812310c96b07b9404ac2633157b5001dd', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && (hAsync("button", { key: 'b46734c75fe179f632bccc8f8aecd9cde83f8816', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, hAsync("pds-icon", { key: '846822efb7116a2f109b5950182f3e1529266f1c', icon: remove, size: this.iconSize })))));
|
|
4272
4298
|
}
|
|
4273
4299
|
static get style() { return pdsChipTokensCss + pdsChipCss; }
|
|
4274
4300
|
static get cmpMeta() { return {
|
|
@@ -7116,7 +7142,7 @@ function createDOMPurify() {
|
|
|
7116
7142
|
}
|
|
7117
7143
|
var purify = createDOMPurify();
|
|
7118
7144
|
|
|
7119
|
-
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)}";
|
|
7145
|
+
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{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.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:var(--pine-z-index-raised)}.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:var(--pine-z-index-raised)}.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 .pds-combobox__option--chip .pds-combobox__option-chip{-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)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:\"\";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}";
|
|
7120
7146
|
|
|
7121
7147
|
/**
|
|
7122
7148
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -7164,7 +7190,7 @@ class PdsCombobox {
|
|
|
7164
7190
|
*/
|
|
7165
7191
|
this.mode = 'filter';
|
|
7166
7192
|
/**
|
|
7167
|
-
* Determines the combobox trigger: 'input' (editable input)
|
|
7193
|
+
* Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
|
|
7168
7194
|
* @default 'input'
|
|
7169
7195
|
*/
|
|
7170
7196
|
this.trigger = 'input';
|
|
@@ -7178,14 +7204,33 @@ class PdsCombobox {
|
|
|
7178
7204
|
* @default 'secondary'
|
|
7179
7205
|
*/
|
|
7180
7206
|
this.triggerVariant = 'secondary';
|
|
7207
|
+
/**
|
|
7208
|
+
* The sentiment for the chip trigger. Matches Pine chip sentiments.
|
|
7209
|
+
* @default 'neutral'
|
|
7210
|
+
*/
|
|
7211
|
+
this.chipSentiment = 'neutral';
|
|
7212
|
+
/**
|
|
7213
|
+
* Whether the chip trigger should be displayed in a larger size.
|
|
7214
|
+
* @default false
|
|
7215
|
+
*/
|
|
7216
|
+
this.chipLarge = false;
|
|
7217
|
+
/**
|
|
7218
|
+
* Whether a dot should be displayed on the chip trigger.
|
|
7219
|
+
* @default false
|
|
7220
|
+
*/
|
|
7221
|
+
this.chipDot = false;
|
|
7181
7222
|
/**
|
|
7182
7223
|
* The value of the combobox input.
|
|
7183
7224
|
*/
|
|
7184
7225
|
this.value = '';
|
|
7185
7226
|
/**
|
|
7186
|
-
* Internal state for
|
|
7227
|
+
* Internal state for the display text shown in the input/trigger
|
|
7228
|
+
*/
|
|
7229
|
+
this.displayText = '';
|
|
7230
|
+
/**
|
|
7231
|
+
* Internal state for filtered options and group labels
|
|
7187
7232
|
*/
|
|
7188
|
-
this.
|
|
7233
|
+
this.filteredItems = [];
|
|
7189
7234
|
/**
|
|
7190
7235
|
* Internal state for the currently highlighted option index
|
|
7191
7236
|
*/
|
|
@@ -7202,45 +7247,143 @@ class PdsCombobox {
|
|
|
7202
7247
|
* Internal state for the sanitized layout content of the selected option
|
|
7203
7248
|
*/
|
|
7204
7249
|
this.selectedOptionLayoutContent = '';
|
|
7250
|
+
/**
|
|
7251
|
+
* Internal state to track chip properties for automatic rendering
|
|
7252
|
+
*/
|
|
7253
|
+
this.selectedOptionChipProps = null;
|
|
7205
7254
|
this.optionEls = [];
|
|
7255
|
+
this.allItems = [];
|
|
7256
|
+
this.isUpdatingFromSelection = false;
|
|
7206
7257
|
this.handleInput = (e) => {
|
|
7207
7258
|
const target = e.target;
|
|
7208
|
-
this.
|
|
7259
|
+
this.displayText = target.value;
|
|
7209
7260
|
this.isOpen = true;
|
|
7210
7261
|
this.filterOptions();
|
|
7211
7262
|
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7212
7263
|
};
|
|
7213
|
-
this.
|
|
7214
|
-
|
|
7215
|
-
this.
|
|
7216
|
-
|
|
7264
|
+
this.handleInputClick = () => {
|
|
7265
|
+
// Open dropdown when input is clicked (but not when tabbed into)
|
|
7266
|
+
if (!this.isOpen) {
|
|
7267
|
+
this.isOpen = true;
|
|
7268
|
+
this.filterOptions();
|
|
7269
|
+
this.setInitialHighlightedIndex();
|
|
7270
|
+
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7271
|
+
}
|
|
7217
7272
|
};
|
|
7218
7273
|
this.handleKeyDown = (e) => {
|
|
7219
|
-
if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
7274
|
+
if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.altKey && e.key === 'ArrowDown'))) {
|
|
7275
|
+
e.preventDefault();
|
|
7220
7276
|
this.isOpen = true;
|
|
7277
|
+
this.filterOptions();
|
|
7278
|
+
// Set highlighted index immediately for testing
|
|
7279
|
+
this.setInitialHighlightedIndex();
|
|
7280
|
+
setTimeout(() => {
|
|
7281
|
+
this.openDropdownPositioning();
|
|
7282
|
+
// For input trigger, keep focus on input and use aria-activedescendant
|
|
7283
|
+
// For button trigger, move focus to first option for keyboard navigation
|
|
7284
|
+
if (this.trigger === 'input') {
|
|
7285
|
+
this.focusFirstOption();
|
|
7286
|
+
}
|
|
7287
|
+
else {
|
|
7288
|
+
this.focusFirstOptionForArrowKeys();
|
|
7289
|
+
}
|
|
7290
|
+
}, 0);
|
|
7291
|
+
return;
|
|
7292
|
+
}
|
|
7293
|
+
if (!this.isOpen) {
|
|
7221
7294
|
return;
|
|
7222
7295
|
}
|
|
7296
|
+
// Get only the option elements (skip group labels) for navigation
|
|
7297
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7223
7298
|
switch (e.key) {
|
|
7224
7299
|
case 'ArrowDown':
|
|
7225
|
-
|
|
7300
|
+
e.preventDefault();
|
|
7301
|
+
// If no option is highlighted and we have options, start at 0
|
|
7302
|
+
if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
|
|
7303
|
+
this.highlightedIndex = 0;
|
|
7304
|
+
}
|
|
7305
|
+
else {
|
|
7306
|
+
this.highlightedIndex = Math.min(this.highlightedIndex + 1, selectableOptions.length - 1);
|
|
7307
|
+
}
|
|
7308
|
+
this.updateOptionFocus();
|
|
7226
7309
|
break;
|
|
7227
7310
|
case 'ArrowUp':
|
|
7228
|
-
|
|
7311
|
+
e.preventDefault();
|
|
7312
|
+
// If no option is highlighted and we have options, start at last option
|
|
7313
|
+
if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
|
|
7314
|
+
this.highlightedIndex = selectableOptions.length - 1;
|
|
7315
|
+
}
|
|
7316
|
+
else {
|
|
7317
|
+
this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
|
|
7318
|
+
}
|
|
7319
|
+
this.updateOptionFocus();
|
|
7320
|
+
break;
|
|
7321
|
+
case 'Home':
|
|
7322
|
+
e.preventDefault();
|
|
7323
|
+
if (selectableOptions.length > 0) {
|
|
7324
|
+
this.highlightedIndex = 0;
|
|
7325
|
+
this.updateOptionFocus();
|
|
7326
|
+
}
|
|
7327
|
+
break;
|
|
7328
|
+
case 'End':
|
|
7329
|
+
e.preventDefault();
|
|
7330
|
+
if (selectableOptions.length > 0) {
|
|
7331
|
+
this.highlightedIndex = selectableOptions.length - 1;
|
|
7332
|
+
this.updateOptionFocus();
|
|
7333
|
+
}
|
|
7334
|
+
break;
|
|
7335
|
+
case 'PageDown':
|
|
7336
|
+
e.preventDefault();
|
|
7337
|
+
if (selectableOptions.length > 0) {
|
|
7338
|
+
const nextIndex = Math.min(this.highlightedIndex + 10, selectableOptions.length - 1);
|
|
7339
|
+
this.highlightedIndex = nextIndex;
|
|
7340
|
+
this.updateOptionFocus();
|
|
7341
|
+
}
|
|
7342
|
+
break;
|
|
7343
|
+
case 'PageUp':
|
|
7344
|
+
e.preventDefault();
|
|
7345
|
+
if (selectableOptions.length > 0) {
|
|
7346
|
+
const prevIndex = Math.max(this.highlightedIndex - 10, 0);
|
|
7347
|
+
this.highlightedIndex = prevIndex;
|
|
7348
|
+
this.updateOptionFocus();
|
|
7349
|
+
}
|
|
7229
7350
|
break;
|
|
7230
7351
|
case 'Enter':
|
|
7231
|
-
|
|
7232
|
-
|
|
7352
|
+
e.preventDefault();
|
|
7353
|
+
if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
|
|
7354
|
+
this.handleOptionClick(selectableOptions[this.highlightedIndex]);
|
|
7355
|
+
this.restoreFocusToTrigger();
|
|
7356
|
+
}
|
|
7357
|
+
break;
|
|
7358
|
+
case ' ':
|
|
7359
|
+
e.preventDefault();
|
|
7360
|
+
if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
|
|
7361
|
+
this.handleOptionClick(selectableOptions[this.highlightedIndex]);
|
|
7362
|
+
this.restoreFocusToTrigger();
|
|
7233
7363
|
}
|
|
7234
7364
|
break;
|
|
7235
7365
|
case 'Escape':
|
|
7366
|
+
e.preventDefault();
|
|
7236
7367
|
this.isOpen = false;
|
|
7368
|
+
this.highlightedIndex = -1;
|
|
7369
|
+
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7370
|
+
this.restoreFocusToTrigger();
|
|
7371
|
+
break;
|
|
7372
|
+
case 'Tab':
|
|
7373
|
+
// Allow normal tab behavior to close dropdown and move focus
|
|
7374
|
+
this.isOpen = false;
|
|
7375
|
+
this.highlightedIndex = -1;
|
|
7376
|
+
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7237
7377
|
break;
|
|
7238
7378
|
}
|
|
7239
7379
|
};
|
|
7380
|
+
// Track if we're in arrow-key navigation mode (focus should move between options)
|
|
7381
|
+
this.isArrowKeyNavigationMode = false;
|
|
7240
7382
|
// Event handler for option click
|
|
7241
7383
|
this.onOptionClick = (event) => {
|
|
7242
7384
|
const idx = Number(event.currentTarget.getAttribute('data-option-index'));
|
|
7243
|
-
const
|
|
7385
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7386
|
+
const option = selectableOptions[idx];
|
|
7244
7387
|
this.handleOptionClick(option);
|
|
7245
7388
|
};
|
|
7246
7389
|
// Event handler for mouse enter on option
|
|
@@ -7252,58 +7395,233 @@ class PdsCombobox {
|
|
|
7252
7395
|
this.onOptionMouseDown = (event) => {
|
|
7253
7396
|
event.preventDefault();
|
|
7254
7397
|
};
|
|
7398
|
+
// Event handler for option keyboard events
|
|
7399
|
+
this.onOptionKeyDown = (event) => {
|
|
7400
|
+
// Delegate to main keyboard handler
|
|
7401
|
+
this.handleKeyDown(event);
|
|
7402
|
+
};
|
|
7255
7403
|
// Handler for button trigger click
|
|
7256
7404
|
this.onButtonTriggerClick = () => {
|
|
7257
7405
|
this.isOpen = !this.isOpen;
|
|
7258
|
-
if (this.isOpen)
|
|
7406
|
+
if (this.isOpen) {
|
|
7407
|
+
this.filterOptions();
|
|
7408
|
+
// Set highlighted index and prepare for keyboard navigation
|
|
7409
|
+
this.setInitialHighlightedIndex();
|
|
7410
|
+
// For button trigger, prepare for arrow-key navigation mode
|
|
7411
|
+
this.isArrowKeyNavigationMode = true;
|
|
7259
7412
|
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7413
|
+
}
|
|
7414
|
+
else {
|
|
7415
|
+
// Reset navigation mode when closing
|
|
7416
|
+
this.isArrowKeyNavigationMode = false;
|
|
7417
|
+
}
|
|
7260
7418
|
};
|
|
7261
7419
|
// Handler for button trigger keyboard events
|
|
7262
7420
|
this.onButtonTriggerKeyDown = (e) => {
|
|
7263
|
-
if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
|
|
7421
|
+
if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown' || e.key === 'ArrowUp') && !this.isOpen) {
|
|
7264
7422
|
e.preventDefault();
|
|
7423
|
+
e.stopPropagation(); // Prevent the event from bubbling and triggering click
|
|
7265
7424
|
this.isOpen = true;
|
|
7266
|
-
this.
|
|
7267
|
-
|
|
7425
|
+
this.filterOptions();
|
|
7426
|
+
// Set highlighted index immediately
|
|
7427
|
+
this.setInitialHighlightedIndex();
|
|
7428
|
+
setTimeout(() => {
|
|
7429
|
+
this.openDropdownPositioning();
|
|
7430
|
+
// For all button trigger keyboard opening, focus the first option so subsequent navigation works
|
|
7431
|
+
this.focusFirstOptionForArrowKeys();
|
|
7432
|
+
}, 0);
|
|
7268
7433
|
}
|
|
7269
7434
|
else if (e.key === 'Escape') {
|
|
7270
|
-
|
|
7435
|
+
e.preventDefault();
|
|
7436
|
+
if (this.isOpen) {
|
|
7437
|
+
this.isOpen = false;
|
|
7438
|
+
this.highlightedIndex = -1;
|
|
7439
|
+
this.updateAriaActiveDescendant(); // Clear aria-activedescendant
|
|
7440
|
+
this.restoreFocusToTrigger();
|
|
7441
|
+
}
|
|
7442
|
+
}
|
|
7443
|
+
else if (this.isOpen) {
|
|
7444
|
+
// Delegate other keys to main keyboard handler when dropdown is open
|
|
7445
|
+
this.handleKeyDown(e);
|
|
7446
|
+
}
|
|
7447
|
+
};
|
|
7448
|
+
// Handler for button trigger keyup events - prevents space key from triggering synthetic click
|
|
7449
|
+
this.onButtonTriggerKeyUp = (e) => {
|
|
7450
|
+
if (e.key === ' ') {
|
|
7451
|
+
e.preventDefault();
|
|
7452
|
+
e.stopPropagation();
|
|
7271
7453
|
}
|
|
7272
7454
|
};
|
|
7273
7455
|
// Close dropdown when focus leaves the combobox
|
|
7274
7456
|
this.onComboboxFocusOut = (event) => {
|
|
7457
|
+
var _a;
|
|
7275
7458
|
const relatedTarget = event.relatedTarget;
|
|
7276
|
-
if (
|
|
7459
|
+
// Check if the related target is within our shadow DOM (listbox options)
|
|
7460
|
+
const isRelatedTargetInListbox = relatedTarget && ((_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget));
|
|
7461
|
+
const isRelatedTargetInCombobox = this.el.contains(relatedTarget);
|
|
7462
|
+
// Don't close if focus is moving to an option in the listbox or staying within the combobox
|
|
7463
|
+
if (!isRelatedTargetInCombobox && !isRelatedTargetInListbox) {
|
|
7277
7464
|
this.isOpen = false;
|
|
7278
|
-
|
|
7279
|
-
|
|
7280
|
-
|
|
7465
|
+
this.highlightedIndex = -1;
|
|
7466
|
+
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7467
|
+
this.updateAriaActiveDescendant(); // Clear aria-activedescendant
|
|
7468
|
+
// If there's a selected option but the display text doesn't match, restore the selected option's display text
|
|
7469
|
+
if (this.selectedOption && this.displayText !== this.getOptionLabel(this.selectedOption)) {
|
|
7470
|
+
this.displayText = this.getOptionLabel(this.selectedOption);
|
|
7471
|
+
// The @Watch('selectedOption') will handle value and form internals if needed
|
|
7281
7472
|
}
|
|
7282
7473
|
}
|
|
7283
7474
|
};
|
|
7284
7475
|
}
|
|
7476
|
+
connectedCallback() {
|
|
7477
|
+
// Initialize ElementInternals for form association
|
|
7478
|
+
if (this.el.attachInternals) {
|
|
7479
|
+
this.internals = this.el.attachInternals();
|
|
7480
|
+
}
|
|
7481
|
+
}
|
|
7285
7482
|
componentWillLoad() {
|
|
7286
7483
|
this.updateOptions();
|
|
7287
7484
|
}
|
|
7485
|
+
componentDidLoad() {
|
|
7486
|
+
var _a, _b, _c;
|
|
7487
|
+
// Check for value-based preselection if no option is selected yet
|
|
7488
|
+
if (!this.selectedOption && this.value && this.optionEls.length > 0) {
|
|
7489
|
+
const matchingOption = this.optionEls.find(opt => opt.value === this.value);
|
|
7490
|
+
if (matchingOption) {
|
|
7491
|
+
this.setSelectedOption(matchingOption);
|
|
7492
|
+
// Update the display text to show the option's text content
|
|
7493
|
+
this.displayText = this.getOptionLabel(matchingOption);
|
|
7494
|
+
// Keep this.value as the actual option value
|
|
7495
|
+
// this.value remains unchanged (already matches matchingOption.value)
|
|
7496
|
+
}
|
|
7497
|
+
}
|
|
7498
|
+
// Initialize form value with current value
|
|
7499
|
+
if (this.internals) {
|
|
7500
|
+
try {
|
|
7501
|
+
this.internals.setFormValue((_c = (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : '');
|
|
7502
|
+
}
|
|
7503
|
+
catch (e) {
|
|
7504
|
+
// ElementInternals.setFormValue not available in unit tests
|
|
7505
|
+
}
|
|
7506
|
+
}
|
|
7507
|
+
}
|
|
7288
7508
|
handleValueChange() {
|
|
7289
7509
|
this.filterOptions();
|
|
7510
|
+
// Sync with form internals for form association
|
|
7511
|
+
if (this.internals) {
|
|
7512
|
+
try {
|
|
7513
|
+
this.internals.setFormValue(this.value);
|
|
7514
|
+
}
|
|
7515
|
+
catch (e) {
|
|
7516
|
+
// ElementInternals.setFormValue not available in unit tests
|
|
7517
|
+
}
|
|
7518
|
+
}
|
|
7519
|
+
// Find and select option that matches the value (for external value changes)
|
|
7520
|
+
// Only do this if we're not already updating from a selection
|
|
7521
|
+
if (!this.isUpdatingFromSelection && this.value && this.optionEls.length > 0) {
|
|
7522
|
+
const currentSelectedValue = this.selectedOption ? this.selectedOption.value : null;
|
|
7523
|
+
// If the value doesn't match the currently selected option's value, we need to update
|
|
7524
|
+
if (this.value !== currentSelectedValue) {
|
|
7525
|
+
const matchingOption = this.optionEls.find(opt => opt.value === this.value);
|
|
7526
|
+
if (matchingOption) {
|
|
7527
|
+
this.isUpdatingFromSelection = true;
|
|
7528
|
+
this.setSelectedOption(matchingOption);
|
|
7529
|
+
// Update the display text to show the option's text content
|
|
7530
|
+
this.displayText = this.getOptionLabel(matchingOption);
|
|
7531
|
+
// Keep this.value as the actual option value (already correct)
|
|
7532
|
+
this.isUpdatingFromSelection = false;
|
|
7533
|
+
}
|
|
7534
|
+
}
|
|
7535
|
+
}
|
|
7290
7536
|
}
|
|
7291
7537
|
handleSelectedOptionChange() {
|
|
7292
7538
|
// Update the layout content when selected option changes
|
|
7293
7539
|
this.selectedOptionLayoutContent = this.selectedOption && this.isOptionLayout(this.selectedOption)
|
|
7294
7540
|
? this.getOptionLayoutContent(this.selectedOption)
|
|
7295
7541
|
: '';
|
|
7542
|
+
// Update chip properties for automatic rendering when selected option changes
|
|
7543
|
+
this.selectedOptionChipProps = this.selectedOption && this.isOptionChip(this.selectedOption)
|
|
7544
|
+
? this.getOptionChipProps(this.selectedOption)
|
|
7545
|
+
: null;
|
|
7546
|
+
// Update display text when selected option changes
|
|
7547
|
+
if (this.selectedOption) {
|
|
7548
|
+
this.displayText = this.getOptionLabel(this.selectedOption);
|
|
7549
|
+
this.value = this.selectedOption.value;
|
|
7550
|
+
// Update form internals with the actual option value
|
|
7551
|
+
if (this.internals) {
|
|
7552
|
+
try {
|
|
7553
|
+
this.internals.setFormValue(this.selectedOption.value);
|
|
7554
|
+
}
|
|
7555
|
+
catch (e) {
|
|
7556
|
+
// ElementInternals.setFormValue not available in unit tests
|
|
7557
|
+
}
|
|
7558
|
+
}
|
|
7559
|
+
}
|
|
7560
|
+
else {
|
|
7561
|
+
this.displayText = '';
|
|
7562
|
+
this.value = '';
|
|
7563
|
+
if (this.internals) {
|
|
7564
|
+
try {
|
|
7565
|
+
this.internals.setFormValue('');
|
|
7566
|
+
}
|
|
7567
|
+
catch (e) {
|
|
7568
|
+
// ElementInternals.setFormValue not available in unit tests
|
|
7569
|
+
}
|
|
7570
|
+
}
|
|
7571
|
+
}
|
|
7296
7572
|
}
|
|
7297
7573
|
updateOptions() {
|
|
7298
7574
|
var _a;
|
|
7299
|
-
// Get all
|
|
7575
|
+
// Get all elements from the slot
|
|
7300
7576
|
const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="option"], slot:not([name])');
|
|
7301
7577
|
if (slot) {
|
|
7302
|
-
|
|
7303
|
-
|
|
7304
|
-
|
|
7305
|
-
|
|
7306
|
-
|
|
7578
|
+
const allElements = slot.assignedElements({ flatten: true });
|
|
7579
|
+
// Separate options from group labels and flatten optgroups
|
|
7580
|
+
this.allItems = [];
|
|
7581
|
+
this.optionEls = [];
|
|
7582
|
+
allElements.forEach(el => {
|
|
7583
|
+
if (el.tagName === 'OPTION') {
|
|
7584
|
+
this.optionEls.push(el);
|
|
7585
|
+
this.allItems.push(el);
|
|
7586
|
+
}
|
|
7587
|
+
else if (el.tagName === 'OPTGROUP') {
|
|
7588
|
+
const optgroup = el;
|
|
7589
|
+
this.allItems.push(optgroup);
|
|
7590
|
+
// Add optgroup children (options)
|
|
7591
|
+
Array.from(optgroup.children).forEach(child => {
|
|
7592
|
+
if (child.tagName === 'OPTION') {
|
|
7593
|
+
this.optionEls.push(child);
|
|
7594
|
+
this.allItems.push(child);
|
|
7595
|
+
}
|
|
7596
|
+
});
|
|
7597
|
+
}
|
|
7598
|
+
else if (el.tagName === 'PDS-TEXT') {
|
|
7599
|
+
this.allItems.push(el);
|
|
7600
|
+
}
|
|
7601
|
+
});
|
|
7602
|
+
// Set initial selected option based on value property
|
|
7603
|
+
let initialSelected = null;
|
|
7604
|
+
// Check if value property matches any option
|
|
7605
|
+
if (this.value) {
|
|
7606
|
+
initialSelected = this.optionEls.find(opt => opt.value === this.value) || null;
|
|
7607
|
+
if (initialSelected) {
|
|
7608
|
+
// Update the display text to show the option's text content
|
|
7609
|
+
this.displayText = this.getOptionLabel(initialSelected);
|
|
7610
|
+
// Keep this.value as the actual option value (already correct)
|
|
7611
|
+
}
|
|
7612
|
+
}
|
|
7613
|
+
// For chip triggers, ensure we always have a selected option
|
|
7614
|
+
if (!initialSelected && this.trigger === 'chip' && this.optionEls.length > 0) {
|
|
7615
|
+
initialSelected = this.optionEls[0]; // Select first option as default
|
|
7616
|
+
this.value = initialSelected.value;
|
|
7617
|
+
this.displayText = this.getOptionLabel(initialSelected);
|
|
7618
|
+
console.warn('PDS Combobox: Chip triggers should always have a selected option. Automatically selected the first option.');
|
|
7619
|
+
}
|
|
7620
|
+
// Update selection if we found a different selected option or if we don't have one
|
|
7621
|
+
if (initialSelected && initialSelected !== this.selectedOption) {
|
|
7622
|
+
this.setSelectedOption(initialSelected);
|
|
7623
|
+
}
|
|
7624
|
+
else if (!this.selectedOption && initialSelected) {
|
|
7307
7625
|
this.setSelectedOption(initialSelected);
|
|
7308
7626
|
}
|
|
7309
7627
|
this.filterOptions();
|
|
@@ -7353,6 +7671,22 @@ class PdsCombobox {
|
|
|
7353
7671
|
isOptionLayout(option) {
|
|
7354
7672
|
return this.customOptionLayouts && option.hasAttribute('data-layout');
|
|
7355
7673
|
}
|
|
7674
|
+
// Helper method to check if option has chip attributes (new automatic approach)
|
|
7675
|
+
isOptionChip(option) {
|
|
7676
|
+
return option.hasAttribute('chip-sentiment') ||
|
|
7677
|
+
option.hasAttribute('chip-large') ||
|
|
7678
|
+
option.hasAttribute('chip-icon') ||
|
|
7679
|
+
option.hasAttribute('chip-dot');
|
|
7680
|
+
}
|
|
7681
|
+
// Helper method to get chip properties from option attributes
|
|
7682
|
+
getOptionChipProps(option) {
|
|
7683
|
+
return {
|
|
7684
|
+
sentiment: option.getAttribute('chip-sentiment') || 'neutral',
|
|
7685
|
+
large: option.hasAttribute('chip-large'),
|
|
7686
|
+
icon: option.getAttribute('chip-icon') || undefined,
|
|
7687
|
+
dot: option.hasAttribute('chip-dot')
|
|
7688
|
+
};
|
|
7689
|
+
}
|
|
7356
7690
|
// Helper method to check if option is selected (single source of truth)
|
|
7357
7691
|
isOptionSelected(option) {
|
|
7358
7692
|
return this.selectedOption === option;
|
|
@@ -7360,14 +7694,25 @@ class PdsCombobox {
|
|
|
7360
7694
|
// Helper method to set selected option (centralized state management)
|
|
7361
7695
|
setSelectedOption(option) {
|
|
7362
7696
|
this.selectedOption = option;
|
|
7697
|
+
// Immediately update chip properties for automatic rendering to ensure reactivity
|
|
7698
|
+
if (option && this.isOptionChip(option)) {
|
|
7699
|
+
this.selectedOptionChipProps = this.getOptionChipProps(option);
|
|
7700
|
+
}
|
|
7701
|
+
else {
|
|
7702
|
+
this.selectedOptionChipProps = null;
|
|
7703
|
+
}
|
|
7363
7704
|
}
|
|
7364
7705
|
filterOptions() {
|
|
7706
|
+
// Ensure allItems includes optionEls if not already populated (for edge cases)
|
|
7707
|
+
if (this.allItems.length === 0 && this.optionEls.length > 0) {
|
|
7708
|
+
this.allItems = [...this.optionEls];
|
|
7709
|
+
}
|
|
7365
7710
|
if (this.mode === 'select-only') {
|
|
7366
|
-
this.
|
|
7711
|
+
this.filteredItems = [...this.allItems];
|
|
7367
7712
|
}
|
|
7368
7713
|
else {
|
|
7369
|
-
const val = this.
|
|
7370
|
-
|
|
7714
|
+
const val = this.displayText.toLowerCase();
|
|
7715
|
+
const filteredOptions = this.optionEls.filter(option => {
|
|
7371
7716
|
// For layout options, search both text content and data-search-text attribute
|
|
7372
7717
|
if (this.isOptionLayout(option)) {
|
|
7373
7718
|
const searchText = option.getAttribute('data-search-text') || option.textContent || '';
|
|
@@ -7375,6 +7720,31 @@ class PdsCombobox {
|
|
|
7375
7720
|
}
|
|
7376
7721
|
return this.getOptionLabel(option).toLowerCase().includes(val);
|
|
7377
7722
|
});
|
|
7723
|
+
// Rebuild filtered items maintaining group structure - simplified approach
|
|
7724
|
+
this.filteredItems = [];
|
|
7725
|
+
let currentGroupLabel = null;
|
|
7726
|
+
this.allItems.forEach(item => {
|
|
7727
|
+
if (item.tagName === 'OPTGROUP' || item.tagName === 'PDS-TEXT') {
|
|
7728
|
+
currentGroupLabel = item;
|
|
7729
|
+
}
|
|
7730
|
+
else if (item.tagName === 'OPTION' && filteredOptions.includes(item)) {
|
|
7731
|
+
const optionEl = item;
|
|
7732
|
+
const parent = optionEl.parentElement;
|
|
7733
|
+
let labelToUse = null;
|
|
7734
|
+
if (parent && parent.tagName === 'OPTGROUP') {
|
|
7735
|
+
// Only use the actual parent optgroup as label
|
|
7736
|
+
labelToUse = parent;
|
|
7737
|
+
}
|
|
7738
|
+
else if (currentGroupLabel && currentGroupLabel.tagName === 'PDS-TEXT') {
|
|
7739
|
+
// Allow pds-text to label subsequent top-level options until another label appears
|
|
7740
|
+
labelToUse = currentGroupLabel;
|
|
7741
|
+
}
|
|
7742
|
+
if (labelToUse && !this.filteredItems.includes(labelToUse)) {
|
|
7743
|
+
this.filteredItems.push(labelToUse);
|
|
7744
|
+
}
|
|
7745
|
+
this.filteredItems.push(optionEl);
|
|
7746
|
+
}
|
|
7747
|
+
});
|
|
7378
7748
|
}
|
|
7379
7749
|
this.highlightedIndex = -1;
|
|
7380
7750
|
}
|
|
@@ -7395,7 +7765,7 @@ class PdsCombobox {
|
|
|
7395
7765
|
left: `${x}px`,
|
|
7396
7766
|
top: `${y}px`,
|
|
7397
7767
|
position: 'absolute',
|
|
7398
|
-
zIndex:
|
|
7768
|
+
zIndex: 'var(--pine-z-index-raised)',
|
|
7399
7769
|
});
|
|
7400
7770
|
});
|
|
7401
7771
|
}
|
|
@@ -7405,7 +7775,130 @@ class PdsCombobox {
|
|
|
7405
7775
|
*/
|
|
7406
7776
|
async setFocus() {
|
|
7407
7777
|
var _a;
|
|
7408
|
-
(
|
|
7778
|
+
if (this.inputEl) {
|
|
7779
|
+
this.inputEl.focus();
|
|
7780
|
+
}
|
|
7781
|
+
else {
|
|
7782
|
+
(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
7783
|
+
}
|
|
7784
|
+
}
|
|
7785
|
+
/**
|
|
7786
|
+
* Sets the initial highlighted index when dropdown opens.
|
|
7787
|
+
* If there's a selected option, highlight it. Otherwise, highlight the first option.
|
|
7788
|
+
*/
|
|
7789
|
+
setInitialHighlightedIndex() {
|
|
7790
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7791
|
+
if (selectableOptions.length === 0) {
|
|
7792
|
+
this.highlightedIndex = -1;
|
|
7793
|
+
return;
|
|
7794
|
+
}
|
|
7795
|
+
// If there's a selected option, find its index in the filtered options
|
|
7796
|
+
if (this.selectedOption) {
|
|
7797
|
+
const selectedIndex = selectableOptions.findIndex(option => option === this.selectedOption);
|
|
7798
|
+
if (selectedIndex >= 0) {
|
|
7799
|
+
this.highlightedIndex = selectedIndex;
|
|
7800
|
+
return;
|
|
7801
|
+
}
|
|
7802
|
+
}
|
|
7803
|
+
// No selected option or selected option not in filtered results, highlight first option
|
|
7804
|
+
this.highlightedIndex = 0;
|
|
7805
|
+
}
|
|
7806
|
+
/**
|
|
7807
|
+
* Focus management helper - moves focus to the first option when dropdown opens
|
|
7808
|
+
*/
|
|
7809
|
+
focusFirstOption() {
|
|
7810
|
+
if (this.isOpen) {
|
|
7811
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7812
|
+
if (selectableOptions.length > 0) {
|
|
7813
|
+
this.setInitialHighlightedIndex();
|
|
7814
|
+
// DON'T focus the option elements - keep focus on trigger and use aria-activedescendant
|
|
7815
|
+
// This prevents the focusout event that was closing the dropdown
|
|
7816
|
+
// But still call updateOptionFocus for scrolling
|
|
7817
|
+
if (this.listboxEl) {
|
|
7818
|
+
this.updateOptionFocus();
|
|
7819
|
+
}
|
|
7820
|
+
}
|
|
7821
|
+
}
|
|
7822
|
+
}
|
|
7823
|
+
/**
|
|
7824
|
+
* Focus management helper - actually focuses the first option when opened via arrow keys
|
|
7825
|
+
*/
|
|
7826
|
+
focusFirstOptionForArrowKeys() {
|
|
7827
|
+
if (this.isOpen) {
|
|
7828
|
+
// Set arrow-key navigation mode
|
|
7829
|
+
this.isArrowKeyNavigationMode = true;
|
|
7830
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7831
|
+
if (selectableOptions.length > 0) {
|
|
7832
|
+
this.setInitialHighlightedIndex();
|
|
7833
|
+
// For arrow key navigation, actually focus the highlighted option
|
|
7834
|
+
if (this.listboxEl) {
|
|
7835
|
+
const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
|
|
7836
|
+
const highlightedOption = optionElements[this.highlightedIndex];
|
|
7837
|
+
if (highlightedOption) {
|
|
7838
|
+
// Remove tabindex from all options first
|
|
7839
|
+
optionElements.forEach(option => {
|
|
7840
|
+
option.setAttribute('tabindex', '-1');
|
|
7841
|
+
});
|
|
7842
|
+
// Set tabindex and focus on highlighted option
|
|
7843
|
+
highlightedOption.setAttribute('tabindex', '0');
|
|
7844
|
+
highlightedOption.focus();
|
|
7845
|
+
highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
7846
|
+
}
|
|
7847
|
+
}
|
|
7848
|
+
// Update aria-activedescendant on trigger
|
|
7849
|
+
this.updateAriaActiveDescendant();
|
|
7850
|
+
}
|
|
7851
|
+
}
|
|
7852
|
+
}
|
|
7853
|
+
/**
|
|
7854
|
+
* Focus management helper - updates visual state and scrolling for the currently highlighted option
|
|
7855
|
+
* Note: We don't actually focus the option to prevent focusout events that close the dropdown
|
|
7856
|
+
*/
|
|
7857
|
+
updateOptionFocus() {
|
|
7858
|
+
if (!this.listboxEl || this.highlightedIndex < 0)
|
|
7859
|
+
return;
|
|
7860
|
+
const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
|
|
7861
|
+
const currentOption = optionElements[this.highlightedIndex];
|
|
7862
|
+
if (currentOption) {
|
|
7863
|
+
// Check if any option currently has focus OR if we're in arrow-key navigation mode
|
|
7864
|
+
const hasOptionFocus = Array.from(optionElements).some(el => el === document.activeElement);
|
|
7865
|
+
if (hasOptionFocus || this.isArrowKeyNavigationMode) {
|
|
7866
|
+
// We're in arrow-key navigation mode, so actually move focus between options
|
|
7867
|
+
optionElements.forEach(option => {
|
|
7868
|
+
option.setAttribute('tabindex', '-1');
|
|
7869
|
+
});
|
|
7870
|
+
currentOption.setAttribute('tabindex', '0');
|
|
7871
|
+
currentOption.focus();
|
|
7872
|
+
}
|
|
7873
|
+
// Always scroll the option into view
|
|
7874
|
+
currentOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
7875
|
+
}
|
|
7876
|
+
// Always update aria-activedescendant on the trigger element
|
|
7877
|
+
this.updateAriaActiveDescendant();
|
|
7878
|
+
}
|
|
7879
|
+
/**
|
|
7880
|
+
* Updates aria-activedescendant on the trigger element
|
|
7881
|
+
*/
|
|
7882
|
+
updateAriaActiveDescendant() {
|
|
7883
|
+
if (this.triggerEl && this.highlightedIndex >= 0) {
|
|
7884
|
+
this.triggerEl.setAttribute('aria-activedescendant', `pds-combobox-option-${this.highlightedIndex}`);
|
|
7885
|
+
}
|
|
7886
|
+
else if (this.triggerEl) {
|
|
7887
|
+
this.triggerEl.removeAttribute('aria-activedescendant');
|
|
7888
|
+
}
|
|
7889
|
+
}
|
|
7890
|
+
/**
|
|
7891
|
+
* Focus management helper - restores focus to the trigger element
|
|
7892
|
+
*/
|
|
7893
|
+
restoreFocusToTrigger() {
|
|
7894
|
+
setTimeout(() => {
|
|
7895
|
+
if (this.inputEl) {
|
|
7896
|
+
this.inputEl.focus();
|
|
7897
|
+
}
|
|
7898
|
+
else if (this.triggerEl) {
|
|
7899
|
+
this.triggerEl.focus();
|
|
7900
|
+
}
|
|
7901
|
+
}, 0);
|
|
7409
7902
|
}
|
|
7410
7903
|
/**
|
|
7411
7904
|
* Gets the value of the currently selected option.
|
|
@@ -7415,7 +7908,7 @@ class PdsCombobox {
|
|
|
7415
7908
|
}
|
|
7416
7909
|
// Get the label of the selected option
|
|
7417
7910
|
get selectedLabel() {
|
|
7418
|
-
return this.
|
|
7911
|
+
return this.displayText || '';
|
|
7419
7912
|
}
|
|
7420
7913
|
// Get the layout content of the selected option for button trigger
|
|
7421
7914
|
get selectedLayoutContent() {
|
|
@@ -7425,30 +7918,148 @@ class PdsCombobox {
|
|
|
7425
7918
|
get selectedHasLayout() {
|
|
7426
7919
|
return this.selectedOption ? this.isOptionLayout(this.selectedOption) : false;
|
|
7427
7920
|
}
|
|
7921
|
+
// Extract chip sentiment from selected option's attributes, layout content, or slotted trigger content
|
|
7922
|
+
get selectedChipSentiment() {
|
|
7923
|
+
// First priority: Check selected option's chip attributes (new automatic approach)
|
|
7924
|
+
if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
|
|
7925
|
+
const sentiment = this.selectedOption.getAttribute('chip-sentiment');
|
|
7926
|
+
if (sentiment)
|
|
7927
|
+
return sentiment;
|
|
7928
|
+
}
|
|
7929
|
+
// Second priority: Check selected option's layout content (existing custom layout approach)
|
|
7930
|
+
if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
|
|
7931
|
+
const chipElement = this.selectedOption.querySelector('pds-chip');
|
|
7932
|
+
const sentiment = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('sentiment');
|
|
7933
|
+
if (sentiment)
|
|
7934
|
+
return sentiment;
|
|
7935
|
+
}
|
|
7936
|
+
// Third priority: Check if we have custom trigger content with a chip (initial state)
|
|
7937
|
+
if (this.customTriggerContent) {
|
|
7938
|
+
const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
|
|
7939
|
+
if (slottedChip) {
|
|
7940
|
+
const sentiment = slottedChip.getAttribute('sentiment');
|
|
7941
|
+
if (sentiment)
|
|
7942
|
+
return sentiment;
|
|
7943
|
+
}
|
|
7944
|
+
}
|
|
7945
|
+
// Fallback: Use component props
|
|
7946
|
+
return this.chipSentiment;
|
|
7947
|
+
}
|
|
7948
|
+
// Extract chip large from selected option's attributes, layout content, or slotted trigger content
|
|
7949
|
+
get selectedChipLarge() {
|
|
7950
|
+
// First priority: Check selected option's chip attributes (new automatic approach)
|
|
7951
|
+
if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
|
|
7952
|
+
if (this.selectedOption.hasAttribute('chip-large'))
|
|
7953
|
+
return true;
|
|
7954
|
+
}
|
|
7955
|
+
// Second priority: Check selected option's layout content (existing custom layout approach)
|
|
7956
|
+
if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
|
|
7957
|
+
const chipElement = this.selectedOption.querySelector('pds-chip');
|
|
7958
|
+
if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('large'))
|
|
7959
|
+
return true;
|
|
7960
|
+
}
|
|
7961
|
+
// Third priority: Check if we have custom trigger content with a chip (initial state)
|
|
7962
|
+
if (this.customTriggerContent) {
|
|
7963
|
+
const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
|
|
7964
|
+
if (slottedChip && slottedChip.hasAttribute('large')) {
|
|
7965
|
+
return true;
|
|
7966
|
+
}
|
|
7967
|
+
}
|
|
7968
|
+
// Fallback: Use component props
|
|
7969
|
+
return this.chipLarge;
|
|
7970
|
+
}
|
|
7971
|
+
// Extract chip icon from selected option's attributes, layout content, or slotted trigger content
|
|
7972
|
+
get selectedChipIcon() {
|
|
7973
|
+
// First priority: Check selected option's chip attributes (new automatic approach)
|
|
7974
|
+
if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
|
|
7975
|
+
const icon = this.selectedOption.getAttribute('chip-icon');
|
|
7976
|
+
if (icon)
|
|
7977
|
+
return icon;
|
|
7978
|
+
}
|
|
7979
|
+
// Second priority: Check selected option's layout content (existing custom layout approach)
|
|
7980
|
+
if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
|
|
7981
|
+
const chipElement = this.selectedOption.querySelector('pds-chip');
|
|
7982
|
+
const icon = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('icon');
|
|
7983
|
+
if (icon)
|
|
7984
|
+
return icon;
|
|
7985
|
+
}
|
|
7986
|
+
// Third priority: Check if we have custom trigger content with a chip (initial state)
|
|
7987
|
+
if (this.customTriggerContent) {
|
|
7988
|
+
const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
|
|
7989
|
+
if (slottedChip) {
|
|
7990
|
+
const icon = slottedChip.getAttribute('icon');
|
|
7991
|
+
if (icon)
|
|
7992
|
+
return icon;
|
|
7993
|
+
}
|
|
7994
|
+
}
|
|
7995
|
+
// Fallback: Use component props
|
|
7996
|
+
return this.chipIcon;
|
|
7997
|
+
}
|
|
7998
|
+
// Extract chip dot from selected option's attributes, layout content, or slotted trigger content
|
|
7999
|
+
get selectedChipDot() {
|
|
8000
|
+
// First priority: Check selected option's chip attributes (new automatic approach)
|
|
8001
|
+
if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
|
|
8002
|
+
if (this.selectedOption.hasAttribute('chip-dot'))
|
|
8003
|
+
return true;
|
|
8004
|
+
}
|
|
8005
|
+
// Second priority: Check selected option's layout content (existing custom layout approach)
|
|
8006
|
+
if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
|
|
8007
|
+
const chipElement = this.selectedOption.querySelector('pds-chip');
|
|
8008
|
+
if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('dot'))
|
|
8009
|
+
return true;
|
|
8010
|
+
}
|
|
8011
|
+
// Third priority: Check if we have custom trigger content with a chip (initial state)
|
|
8012
|
+
if (this.customTriggerContent) {
|
|
8013
|
+
const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
|
|
8014
|
+
if (slottedChip && slottedChip.hasAttribute('dot')) {
|
|
8015
|
+
return true;
|
|
8016
|
+
}
|
|
8017
|
+
}
|
|
8018
|
+
// Fallback: Use component props
|
|
8019
|
+
return this.chipDot;
|
|
8020
|
+
}
|
|
7428
8021
|
handleOptionClick(option) {
|
|
7429
8022
|
// Update reactive state - single source of truth
|
|
8023
|
+
// The @Watch('selectedOption') will handle displayText, value, and form internals
|
|
7430
8024
|
this.setSelectedOption(option);
|
|
7431
|
-
this.value = this.getOptionLabel(option);
|
|
7432
8025
|
this.isOpen = false;
|
|
7433
8026
|
this.pdsComboboxChange.emit({ value: option.value });
|
|
7434
8027
|
}
|
|
7435
8028
|
renderDropdown() {
|
|
7436
|
-
if (!this.isOpen || this.
|
|
8029
|
+
if (!this.isOpen || this.filteredItems.length === 0) {
|
|
8030
|
+
return null;
|
|
8031
|
+
}
|
|
8032
|
+
let optionIndex = 0;
|
|
8033
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
8034
|
+
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) => {
|
|
8035
|
+
if (item.tagName === 'OPTGROUP') {
|
|
8036
|
+
const optgroup = item;
|
|
8037
|
+
return (hAsync("li", { key: `optgroup-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation", "aria-label": optgroup.label }, optgroup.label));
|
|
8038
|
+
}
|
|
8039
|
+
else if (item.tagName === 'PDS-TEXT') {
|
|
8040
|
+
const pdsText = item;
|
|
8041
|
+
return (hAsync("li", { key: `pds-text-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation" }, pdsText.textContent));
|
|
8042
|
+
}
|
|
8043
|
+
else if (item.tagName === 'OPTION') {
|
|
8044
|
+
const option = item;
|
|
8045
|
+
const isSelected = this.isOptionSelected(option);
|
|
8046
|
+
const isHighlighted = this.highlightedIndex === optionIndex;
|
|
8047
|
+
const isLayout = this.isOptionLayout(option);
|
|
8048
|
+
const isChip = this.isOptionChip(option);
|
|
8049
|
+
const currentOptionIndex = optionIndex++;
|
|
8050
|
+
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 || isChip ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: isHighlighted ? '0' : '-1', class: {
|
|
8051
|
+
'pds-combobox__option': true,
|
|
8052
|
+
'pds-combobox__option--highlighted': isHighlighted,
|
|
8053
|
+
'pds-combobox__option--layout': isLayout,
|
|
8054
|
+
'pds-combobox__option--chip': isChip,
|
|
8055
|
+
}, "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) })) : isChip ? (this.renderOptionChip(option)) : (this.getOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
|
|
8056
|
+
}
|
|
7437
8057
|
return null;
|
|
7438
|
-
return (hAsync("ul", { class: "pds-combobox__listbox", role: "listbox", id: "pds-combobox-listbox", ref: el => (this.listboxEl = el) }, this.filteredOptions.map((option, idx) => {
|
|
7439
|
-
const isSelected = this.isOptionSelected(option);
|
|
7440
|
-
const isHighlighted = this.highlightedIndex === idx;
|
|
7441
|
-
const isLayout = this.isOptionLayout(option);
|
|
7442
|
-
return (hAsync("li", { key: option.value, id: `pds-combobox-option-${idx}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', class: {
|
|
7443
|
-
'pds-combobox__option': true,
|
|
7444
|
-
'pds-combobox__option--highlighted': isHighlighted,
|
|
7445
|
-
'pds-combobox__option--layout': isLayout,
|
|
7446
|
-
}, "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" })));
|
|
7447
8058
|
})));
|
|
7448
8059
|
}
|
|
7449
8060
|
// Helper method to render the caret icon
|
|
7450
8061
|
renderCaretIcon() {
|
|
7451
|
-
return hAsync("pds-icon", { icon: "caret-down", "aria-hidden": "true",
|
|
8062
|
+
return hAsync("pds-icon", { icon: "caret-down", "aria-hidden": "true", class: "pds-combobox__button-trigger-chevron" });
|
|
7452
8063
|
}
|
|
7453
8064
|
// Helper method to render layout content
|
|
7454
8065
|
renderLayoutContent() {
|
|
@@ -7462,6 +8073,23 @@ class PdsCombobox {
|
|
|
7462
8073
|
shouldShowLayoutContent() {
|
|
7463
8074
|
return this.selectedHasLayout && !!this.selectedLayoutContent;
|
|
7464
8075
|
}
|
|
8076
|
+
// Helper method to build chip trigger CSS classes
|
|
8077
|
+
getChipTriggerClass() {
|
|
8078
|
+
const classes = ['pds-combobox__chip-trigger'];
|
|
8079
|
+
// Add sentiment class
|
|
8080
|
+
classes.push(`pds-combobox__chip-trigger--${this.selectedChipSentiment}`);
|
|
8081
|
+
// Always use dropdown variant for chip triggers
|
|
8082
|
+
classes.push('pds-combobox__chip-trigger--dropdown');
|
|
8083
|
+
// Add large class if needed
|
|
8084
|
+
if (this.selectedChipLarge) {
|
|
8085
|
+
classes.push('pds-combobox__chip-trigger--large');
|
|
8086
|
+
}
|
|
8087
|
+
// Add dot class if needed
|
|
8088
|
+
if (this.selectedChipDot) {
|
|
8089
|
+
classes.push('pds-combobox__chip-trigger--dot');
|
|
8090
|
+
}
|
|
8091
|
+
return classes.join(' ');
|
|
8092
|
+
}
|
|
7465
8093
|
renderButtonTriggerContent() {
|
|
7466
8094
|
// Case 1: Custom trigger content with layout priority
|
|
7467
8095
|
if (this.customTriggerContent) {
|
|
@@ -7478,13 +8106,79 @@ class PdsCombobox {
|
|
|
7478
8106
|
// Case 3: Standard mode with default text content
|
|
7479
8107
|
return [this.renderDefaultContent(), this.renderCaretIcon()];
|
|
7480
8108
|
}
|
|
8109
|
+
renderChipTriggerContent() {
|
|
8110
|
+
// Case 1: Custom trigger content with layout priority
|
|
8111
|
+
if (this.customTriggerContent) {
|
|
8112
|
+
if (this.shouldShowLayoutContent()) {
|
|
8113
|
+
// When using custom layouts, the chip handles its own dropdown arrow
|
|
8114
|
+
return this.renderChipTriggerLayoutContent();
|
|
8115
|
+
}
|
|
8116
|
+
// Fall back to slot content when no layout is available - chip handles its own dropdown arrow
|
|
8117
|
+
return hAsync("slot", { name: "trigger-content" });
|
|
8118
|
+
}
|
|
8119
|
+
// Case 2: Standard mode with layout content
|
|
8120
|
+
if (this.shouldShowLayoutContent()) {
|
|
8121
|
+
// When using custom layouts, the chip handles its own dropdown arrow
|
|
8122
|
+
return this.renderChipTriggerLayoutContent();
|
|
8123
|
+
}
|
|
8124
|
+
// Case 3: Automatic chip mode - selected option has chip attributes
|
|
8125
|
+
if (this.selectedOption && this.selectedOptionChipProps) {
|
|
8126
|
+
// Render as chip automatically - chip handles its own dropdown arrow
|
|
8127
|
+
return this.renderSelectedOptionAsChip();
|
|
8128
|
+
}
|
|
8129
|
+
// Case 4: Standard mode with default text content
|
|
8130
|
+
return [
|
|
8131
|
+
this.renderChipTriggerDefaultContent(),
|
|
8132
|
+
this.renderCaretIcon()
|
|
8133
|
+
];
|
|
8134
|
+
}
|
|
8135
|
+
// Helper method to render selected option as chip for trigger (automatic approach)
|
|
8136
|
+
renderSelectedOptionAsChip() {
|
|
8137
|
+
if (!this.selectedOption || !this.selectedOptionChipProps)
|
|
8138
|
+
return null;
|
|
8139
|
+
return (hAsync("pds-chip", { sentiment: this.selectedOptionChipProps.sentiment, variant: "dropdown" // Always use dropdown variant for triggers
|
|
8140
|
+
,
|
|
8141
|
+
large: this.selectedOptionChipProps.large, icon: this.selectedOptionChipProps.icon, dot: this.selectedOptionChipProps.dot, class: "pds-combobox__chip-trigger-auto" }, this.getOptionLabel(this.selectedOption)));
|
|
8142
|
+
}
|
|
8143
|
+
// Helper method to render chip trigger layout content
|
|
8144
|
+
renderChipTriggerLayoutContent() {
|
|
8145
|
+
return (hAsync("div", { class: "pds-combobox__chip-trigger-layout-wrapper", innerHTML: this.getModifiedLayoutContentForTrigger() }));
|
|
8146
|
+
}
|
|
8147
|
+
// Helper method to modify layout content for trigger use (ensure dropdown variant)
|
|
8148
|
+
getModifiedLayoutContentForTrigger() {
|
|
8149
|
+
let content = this.selectedLayoutContent;
|
|
8150
|
+
// If the content contains a pds-chip, ensure it has variant="dropdown"
|
|
8151
|
+
if (content.includes('<pds-chip')) {
|
|
8152
|
+
// Use a temporary div to parse and modify the HTML
|
|
8153
|
+
const tempDiv = document.createElement('div');
|
|
8154
|
+
tempDiv.innerHTML = content;
|
|
8155
|
+
const chipElement = tempDiv.querySelector('pds-chip');
|
|
8156
|
+
if (chipElement) {
|
|
8157
|
+
chipElement.setAttribute('variant', 'dropdown');
|
|
8158
|
+
content = tempDiv.innerHTML;
|
|
8159
|
+
}
|
|
8160
|
+
}
|
|
8161
|
+
return content;
|
|
8162
|
+
}
|
|
8163
|
+
// Helper method to render chip trigger default content
|
|
8164
|
+
renderChipTriggerDefaultContent() {
|
|
8165
|
+
return (hAsync("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && hAsync("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
|
|
8166
|
+
}
|
|
8167
|
+
// Helper method to render option as chip (new automatic approach)
|
|
8168
|
+
renderOptionChip(option) {
|
|
8169
|
+
const chipProps = this.getOptionChipProps(option);
|
|
8170
|
+
return (hAsync("pds-chip", { sentiment: chipProps.sentiment, variant: "text" // Dropdown options use text variant, not dropdown
|
|
8171
|
+
,
|
|
8172
|
+
large: chipProps.large, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
|
|
8173
|
+
}
|
|
7481
8174
|
render() {
|
|
7482
8175
|
const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
|
|
7483
|
-
return (hAsync(Host, { key: '
|
|
8176
|
+
return (hAsync(Host, { key: 'd62992abd6eae05cfff52cfc0272490ca6370291' }, hAsync("div", { key: 'affff971535065b7352daee494742bf7b65a61f4', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (hAsync("label", { key: 'c27f88928932bc4535698cb88595b1559cb22e55', htmlFor: this.componentId, class: "pds-combobox__label" }, hAsync("span", { key: '0b65e67897735819cb2a4dc7d6d7d355af2f28d5', 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 => {
|
|
7484
8177
|
this.inputEl = el;
|
|
7485
8178
|
this.triggerEl = el;
|
|
7486
|
-
}, class: "pds-combobox__input",
|
|
8179
|
+
}, 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.displayText, 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" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), 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: "chip-trigger" }, this.renderChipTriggerContent())) : (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: '47c259c2bc5b6f4f1d249d9bddd476b11c5a90fe', style: { display: 'none' } }, hAsync("slot", { key: '83355a804fe978b6fb58838b4174bc815cf2f933', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
|
|
7487
8180
|
}
|
|
8181
|
+
static get formAssociated() { return true; }
|
|
7488
8182
|
get el() { return getElement(this); }
|
|
7489
8183
|
static get watchers() { return {
|
|
7490
8184
|
"value": ["handleValueChange"],
|
|
@@ -7492,10 +8186,11 @@ class PdsCombobox {
|
|
|
7492
8186
|
}; }
|
|
7493
8187
|
static get style() { return pdsComboboxCss; }
|
|
7494
8188
|
static get cmpMeta() { return {
|
|
7495
|
-
"$flags$":
|
|
8189
|
+
"$flags$": 73,
|
|
7496
8190
|
"$tagName$": "pds-combobox",
|
|
7497
8191
|
"$members$": {
|
|
7498
8192
|
"componentId": [1, "component-id"],
|
|
8193
|
+
"name": [513],
|
|
7499
8194
|
"customOptionLayouts": [4, "custom-option-layouts"],
|
|
7500
8195
|
"customTriggerContent": [4, "custom-trigger-content"],
|
|
7501
8196
|
"disabled": [4],
|
|
@@ -7509,22 +8204,28 @@ class PdsCombobox {
|
|
|
7509
8204
|
"trigger": [1],
|
|
7510
8205
|
"triggerWidth": [1, "trigger-width"],
|
|
7511
8206
|
"triggerVariant": [1, "trigger-variant"],
|
|
8207
|
+
"chipSentiment": [1, "chip-sentiment"],
|
|
8208
|
+
"chipLarge": [4, "chip-large"],
|
|
8209
|
+
"chipIcon": [1, "chip-icon"],
|
|
8210
|
+
"chipDot": [4, "chip-dot"],
|
|
7512
8211
|
"value": [1025],
|
|
7513
|
-
"
|
|
8212
|
+
"displayText": [32],
|
|
8213
|
+
"filteredItems": [32],
|
|
7514
8214
|
"highlightedIndex": [32],
|
|
7515
8215
|
"isOpen": [32],
|
|
7516
8216
|
"selectedOption": [32],
|
|
7517
8217
|
"selectedOptionLayoutContent": [32],
|
|
8218
|
+
"selectedOptionChipProps": [32],
|
|
7518
8219
|
"setFocus": [64],
|
|
7519
8220
|
"getSelectedValue": [64]
|
|
7520
8221
|
},
|
|
7521
8222
|
"$listeners$": undefined,
|
|
7522
8223
|
"$lazyBundleId$": "-",
|
|
7523
|
-
"$attrsToReflect$": []
|
|
8224
|
+
"$attrsToReflect$": [["name", "name"]]
|
|
7524
8225
|
}; }
|
|
7525
8226
|
}
|
|
7526
8227
|
|
|
7527
|
-
const pdsCopytextCss = ":host(.pds-copytext){--copytext-color-background-hover:var(--pine-color-grey-200)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);border-width:var(--pine-dimension-none);display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-body-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);max-width:100
|
|
8228
|
+
const pdsCopytextCss = ":host(.pds-copytext){--copytext-color-background-hover:var(--pine-color-grey-200)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);border-width:var(--pine-dimension-none);display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-body-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);max-width:100%}:host(.pds-copytext) pds-button::part(button){padding-block:var(--pine-dimension-2xs);padding-inline:var(--pine-dimension-xs)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);color:var(--pine-color-text-secondary-hover)}:host(.pds-copytext) pds-button span{font-weight:var(--pine-font-weight-medium);-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border-width:var(--pine-dimension-none);padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button::part(button){padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button::part(button):hover{background-color:transparent}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-sm)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--pine-border-hover)}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button,:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-inline-flexbox;display:inline-flex;min-width:auto;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-content),:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-text),:host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-content),:host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-text){-ms-flex-negative:1;flex-shrink:1;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span,:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{text-align:start;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{-ms-flex-pack:justify;justify-content:space-between}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-overflow:ellipsis}";
|
|
7528
8229
|
|
|
7529
8230
|
class PdsCopytext {
|
|
7530
8231
|
constructor(hostRef) {
|
|
@@ -7571,10 +8272,10 @@ class PdsCopytext {
|
|
|
7571
8272
|
if (this.truncate) {
|
|
7572
8273
|
classNames.push('pds-copytext--truncated');
|
|
7573
8274
|
}
|
|
7574
|
-
return classNames.join('
|
|
8275
|
+
return classNames.join(' ');
|
|
7575
8276
|
}
|
|
7576
8277
|
render() {
|
|
7577
|
-
return (hAsync(Host, { key: '
|
|
8278
|
+
return (hAsync(Host, { key: '4e2807a9779817005eb3278473be655d7115923b', class: this.classNames(), id: this.componentId }, hAsync("pds-button", { key: '5a1ca42426b7c11e3bbc7667d42ba3aba8d9cc7d', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '5d6be503f6a31e07af483134b4c3a5f8699f43c3' }, this.value), hAsync("pds-icon", { key: '6e1ad7232addedf1d34ed6a3fa1c8ddc11000ef3', icon: copy, size: "16px" }))));
|
|
7578
8279
|
}
|
|
7579
8280
|
static get style() { return pdsCopytextCss; }
|
|
7580
8281
|
static get cmpMeta() { return {
|
|
@@ -7633,7 +8334,7 @@ class PdsDivider {
|
|
|
7633
8334
|
}; }
|
|
7634
8335
|
}
|
|
7635
8336
|
|
|
7636
|
-
const pdsDropdownMenuCss = ":host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-container);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:absolute;z-index:
|
|
8337
|
+
const pdsDropdownMenuCss = ":host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-container);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-overlay)}";
|
|
7637
8338
|
|
|
7638
8339
|
class PdsDropdownMenu {
|
|
7639
8340
|
constructor(hostRef) {
|
|
@@ -7983,7 +8684,7 @@ class PdsDropdownMenuItem {
|
|
|
7983
8684
|
}; }
|
|
7984
8685
|
}
|
|
7985
8686
|
|
|
7986
|
-
const pdsDropdownMenuSeparatorCss = ":host hr{border:1px solid var(--pine-color-border);margin-block:var(--pine-dimension-xs)}";
|
|
8687
|
+
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)}";
|
|
7987
8688
|
|
|
7988
8689
|
class PdsDropdownMenuSeparator {
|
|
7989
8690
|
constructor(hostRef) {
|
|
@@ -8011,6 +8712,540 @@ class PdsDropdownMenuSeparator {
|
|
|
8011
8712
|
}; }
|
|
8012
8713
|
}
|
|
8013
8714
|
|
|
8715
|
+
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:var(--pine-z-index-overlay);}.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)))}}";
|
|
8716
|
+
|
|
8717
|
+
/**
|
|
8718
|
+
* Individual filter component with cross-browser popover positioning.
|
|
8719
|
+
*
|
|
8720
|
+
* Uses a hybrid approach for optimal cross-browser compatibility:
|
|
8721
|
+
* - Modern browsers: CSS anchor positioning + JavaScript flip classes
|
|
8722
|
+
* - Fallback browsers: JavaScript positioning with viewport boundary detection
|
|
8723
|
+
*
|
|
8724
|
+
* @part button - Exposes the trigger button element for styling.
|
|
8725
|
+
* @part button-content - Exposes the button content container for styling.
|
|
8726
|
+
* @part button-text - Exposes the button text for styling.
|
|
8727
|
+
* @part icon - Exposes the icon component for styling.
|
|
8728
|
+
* @part popover - Exposes the popover container for styling.
|
|
8729
|
+
* @slot (default) - Popover content that will be displayed when the filter is open.
|
|
8730
|
+
*/
|
|
8731
|
+
class PdsFilter {
|
|
8732
|
+
constructor(hostRef) {
|
|
8733
|
+
registerInstance(this, hostRef);
|
|
8734
|
+
this.pdsFilterOpen = createEvent(this, "pdsFilterOpen");
|
|
8735
|
+
this.pdsFilterClose = createEvent(this, "pdsFilterClose");
|
|
8736
|
+
this.pdsFilterClear = createEvent(this, "pdsFilterClear");
|
|
8737
|
+
this.scrollRAF = null;
|
|
8738
|
+
this.lastScrollTime = 0;
|
|
8739
|
+
/**
|
|
8740
|
+
* The variant style of the filter trigger.
|
|
8741
|
+
* @defaultValue 'default'
|
|
8742
|
+
*/
|
|
8743
|
+
this.variant = 'default';
|
|
8744
|
+
/**
|
|
8745
|
+
* State to track if the popover is open.
|
|
8746
|
+
*/
|
|
8747
|
+
this.isOpen = false;
|
|
8748
|
+
/**
|
|
8749
|
+
* Handle native popover toggle events directly on the element
|
|
8750
|
+
* This is needed for browsers with native Popover API support
|
|
8751
|
+
*/
|
|
8752
|
+
this.handleNativePopoverToggle = (event) => {
|
|
8753
|
+
const target = event.target;
|
|
8754
|
+
if (target && target.id === `${this.componentId}-popover`) {
|
|
8755
|
+
// Check current popover state
|
|
8756
|
+
let isCurrentlyOpen = false;
|
|
8757
|
+
try {
|
|
8758
|
+
isCurrentlyOpen = target.matches(':popover-open');
|
|
8759
|
+
}
|
|
8760
|
+
catch (error) {
|
|
8761
|
+
// Fallback if :popover-open selector isn't supported
|
|
8762
|
+
isCurrentlyOpen = target.style.display === 'block';
|
|
8763
|
+
}
|
|
8764
|
+
// Update state
|
|
8765
|
+
this.isOpen = isCurrentlyOpen;
|
|
8766
|
+
if (this.isOpen) {
|
|
8767
|
+
setTimeout(() => this.adjustPopoverPosition(), 0);
|
|
8768
|
+
this.pdsFilterOpen.emit({
|
|
8769
|
+
componentId: this.componentId,
|
|
8770
|
+
variant: this.variant,
|
|
8771
|
+
text: this.text,
|
|
8772
|
+
});
|
|
8773
|
+
}
|
|
8774
|
+
else {
|
|
8775
|
+
this.pdsFilterClose.emit({
|
|
8776
|
+
componentId: this.componentId,
|
|
8777
|
+
variant: this.variant,
|
|
8778
|
+
text: this.text,
|
|
8779
|
+
});
|
|
8780
|
+
}
|
|
8781
|
+
}
|
|
8782
|
+
};
|
|
8783
|
+
/**
|
|
8784
|
+
* Handle keyboard interactions for clear variant only.
|
|
8785
|
+
*/
|
|
8786
|
+
this.handleKeyDown = (event) => {
|
|
8787
|
+
// Only handle clear variant manually, let native API handle everything else
|
|
8788
|
+
if (this.variant === 'clear' && (event.key === 'Enter' || event.key === ' ')) {
|
|
8789
|
+
event.preventDefault();
|
|
8790
|
+
this.handleClick();
|
|
8791
|
+
}
|
|
8792
|
+
};
|
|
8793
|
+
/**
|
|
8794
|
+
* Handle trigger button click. Clear variant emits event, others toggle popover.
|
|
8795
|
+
*/
|
|
8796
|
+
this.handleClick = (event) => {
|
|
8797
|
+
if (this.variant === 'clear') {
|
|
8798
|
+
this.pdsFilterClear.emit({
|
|
8799
|
+
componentId: this.componentId,
|
|
8800
|
+
text: this.text,
|
|
8801
|
+
});
|
|
8802
|
+
return;
|
|
8803
|
+
}
|
|
8804
|
+
this.closeOtherPopovers();
|
|
8805
|
+
// Check for popover API support
|
|
8806
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8807
|
+
if (!supportsPopoverAPI) {
|
|
8808
|
+
// Manual fallback for browsers without popover API support
|
|
8809
|
+
// Prevent default to avoid conflicts with any native behavior
|
|
8810
|
+
if (event) {
|
|
8811
|
+
event.preventDefault();
|
|
8812
|
+
}
|
|
8813
|
+
setTimeout(() => {
|
|
8814
|
+
if (this.popoverEl != null) {
|
|
8815
|
+
this.isOpen = !this.isOpen;
|
|
8816
|
+
if (this.isOpen) {
|
|
8817
|
+
this.popoverEl.style.display = 'block';
|
|
8818
|
+
this.popoverEl.classList.add('is-open');
|
|
8819
|
+
this.adjustPopoverPosition();
|
|
8820
|
+
this.pdsFilterOpen.emit({
|
|
8821
|
+
componentId: this.componentId,
|
|
8822
|
+
variant: this.variant,
|
|
8823
|
+
text: this.text,
|
|
8824
|
+
});
|
|
8825
|
+
}
|
|
8826
|
+
else {
|
|
8827
|
+
this.popoverEl.style.display = 'none';
|
|
8828
|
+
this.popoverEl.classList.remove('is-open');
|
|
8829
|
+
this.pdsFilterClose.emit({
|
|
8830
|
+
componentId: this.componentId,
|
|
8831
|
+
variant: this.variant,
|
|
8832
|
+
text: this.text,
|
|
8833
|
+
});
|
|
8834
|
+
}
|
|
8835
|
+
}
|
|
8836
|
+
}, 0);
|
|
8837
|
+
}
|
|
8838
|
+
// For browsers with native popover API, let the native behavior handle the toggle
|
|
8839
|
+
// The toggle event listener will capture the state change and emit events
|
|
8840
|
+
};
|
|
8841
|
+
}
|
|
8842
|
+
/**
|
|
8843
|
+
* Component lifecycle: Clean up when disconnected from DOM.
|
|
8844
|
+
* Prevents memory leaks by canceling pending operations and closing popovers.
|
|
8845
|
+
*/
|
|
8846
|
+
disconnectedCallback() {
|
|
8847
|
+
// Cancel pending animation frames
|
|
8848
|
+
if (this.scrollRAF) {
|
|
8849
|
+
cancelAnimationFrame(this.scrollRAF);
|
|
8850
|
+
this.scrollRAF = null;
|
|
8851
|
+
}
|
|
8852
|
+
this.lastScrollTime = 0;
|
|
8853
|
+
// Clean up native popover event listeners
|
|
8854
|
+
if (this.popoverEl) {
|
|
8855
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8856
|
+
if (supportsPopoverAPI) {
|
|
8857
|
+
this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
|
|
8858
|
+
}
|
|
8859
|
+
}
|
|
8860
|
+
// Ensure popover is closed
|
|
8861
|
+
if (this.isOpen && this.popoverEl) {
|
|
8862
|
+
try {
|
|
8863
|
+
this.popoverEl.hidePopover();
|
|
8864
|
+
}
|
|
8865
|
+
catch (error) {
|
|
8866
|
+
this.popoverEl.style.display = 'none';
|
|
8867
|
+
this.popoverEl.classList.remove('is-open');
|
|
8868
|
+
}
|
|
8869
|
+
}
|
|
8870
|
+
}
|
|
8871
|
+
componentDidRender() {
|
|
8872
|
+
// Note: popoverEl is set via ref callback in render method
|
|
8873
|
+
// For browsers with native popover API, we need direct element listeners
|
|
8874
|
+
// since the document listener may not capture native popover toggle events
|
|
8875
|
+
if (this.popoverEl) {
|
|
8876
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8877
|
+
if (supportsPopoverAPI) {
|
|
8878
|
+
// Remove any existing listeners to avoid duplicates
|
|
8879
|
+
this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
|
|
8880
|
+
// Add direct listener for native popover events
|
|
8881
|
+
this.popoverEl.addEventListener('toggle', this.handleNativePopoverToggle);
|
|
8882
|
+
}
|
|
8883
|
+
}
|
|
8884
|
+
}
|
|
8885
|
+
/**
|
|
8886
|
+
* Reposition popovers on window resize.
|
|
8887
|
+
*/
|
|
8888
|
+
handleWindowResize() {
|
|
8889
|
+
if (this.isOpen) {
|
|
8890
|
+
setTimeout(() => this.adjustPopoverPosition(), 16);
|
|
8891
|
+
}
|
|
8892
|
+
}
|
|
8893
|
+
/**
|
|
8894
|
+
* Reposition popovers on scroll with performance throttling.
|
|
8895
|
+
*/
|
|
8896
|
+
handleWindowScroll() {
|
|
8897
|
+
if (this.isOpen) {
|
|
8898
|
+
const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
|
|
8899
|
+
const now = performance.now();
|
|
8900
|
+
const throttleMs = supportsAnchorPositioning ? 66 : 33;
|
|
8901
|
+
if (now - this.lastScrollTime < throttleMs) {
|
|
8902
|
+
return;
|
|
8903
|
+
}
|
|
8904
|
+
this.lastScrollTime = now;
|
|
8905
|
+
if (this.scrollRAF) {
|
|
8906
|
+
cancelAnimationFrame(this.scrollRAF);
|
|
8907
|
+
}
|
|
8908
|
+
this.scrollRAF = requestAnimationFrame(() => {
|
|
8909
|
+
if (this.isOpen && this.popoverEl && this.el.isConnected) {
|
|
8910
|
+
this.adjustPopoverPosition();
|
|
8911
|
+
}
|
|
8912
|
+
this.scrollRAF = null;
|
|
8913
|
+
});
|
|
8914
|
+
}
|
|
8915
|
+
}
|
|
8916
|
+
/**
|
|
8917
|
+
* Closes other open filter popovers to ensure only one is open at a time.
|
|
8918
|
+
*/
|
|
8919
|
+
closeOtherPopovers() {
|
|
8920
|
+
const allFilters = document.querySelectorAll('pds-filter');
|
|
8921
|
+
allFilters.forEach((filter) => {
|
|
8922
|
+
var _a;
|
|
8923
|
+
if (filter === this.el)
|
|
8924
|
+
return;
|
|
8925
|
+
const popover = (_a = filter.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__popover');
|
|
8926
|
+
if (popover) {
|
|
8927
|
+
// Check for popover API support to avoid crashes
|
|
8928
|
+
let isPopoverOpen = false;
|
|
8929
|
+
try {
|
|
8930
|
+
isPopoverOpen = popover.matches(':popover-open');
|
|
8931
|
+
}
|
|
8932
|
+
catch (error) {
|
|
8933
|
+
// Fallback if :popover-open selector isn't supported
|
|
8934
|
+
isPopoverOpen = popover.style.display === 'block';
|
|
8935
|
+
}
|
|
8936
|
+
if (isPopoverOpen) {
|
|
8937
|
+
try {
|
|
8938
|
+
popover.hidePopover();
|
|
8939
|
+
}
|
|
8940
|
+
catch (error) {
|
|
8941
|
+
popover.style.display = 'none';
|
|
8942
|
+
popover.classList.remove('is-open');
|
|
8943
|
+
}
|
|
8944
|
+
}
|
|
8945
|
+
}
|
|
8946
|
+
});
|
|
8947
|
+
}
|
|
8948
|
+
/**
|
|
8949
|
+
* Adjusts popover position to keep it within viewport bounds.
|
|
8950
|
+
* Uses CSS anchor positioning for modern browsers, JavaScript for fallback browsers.
|
|
8951
|
+
*/
|
|
8952
|
+
adjustPopoverPosition() {
|
|
8953
|
+
var _a;
|
|
8954
|
+
if (!this.popoverEl || this.variant === 'clear')
|
|
8955
|
+
return;
|
|
8956
|
+
const triggerEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__trigger');
|
|
8957
|
+
if (!triggerEl)
|
|
8958
|
+
return;
|
|
8959
|
+
const triggerRect = triggerEl.getBoundingClientRect();
|
|
8960
|
+
const viewportWidth = window.innerWidth;
|
|
8961
|
+
const viewportHeight = window.innerHeight;
|
|
8962
|
+
const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
|
|
8963
|
+
// Get dimensions for boundary detection
|
|
8964
|
+
const popoverWidth = 228;
|
|
8965
|
+
const popoverHeight = this.popoverEl.getBoundingClientRect().height || 200;
|
|
8966
|
+
// Boundary detection for flipping
|
|
8967
|
+
const bufferSpace = 20;
|
|
8968
|
+
const wouldOverflowRight = (triggerRect.left + popoverWidth + bufferSpace) > viewportWidth;
|
|
8969
|
+
const wouldOverflowBottom = (triggerRect.bottom + 8 + popoverHeight + bufferSpace) > viewportHeight;
|
|
8970
|
+
if (supportsAnchorPositioning) {
|
|
8971
|
+
// Modern browsers: CSS anchor positioning + JavaScript-controlled flipping
|
|
8972
|
+
this.popoverEl.classList.remove('popover-flip-horizontal', 'popover-flip-vertical');
|
|
8973
|
+
if (wouldOverflowRight) {
|
|
8974
|
+
this.popoverEl.classList.add('popover-flip-horizontal');
|
|
8975
|
+
}
|
|
8976
|
+
if (wouldOverflowBottom) {
|
|
8977
|
+
this.popoverEl.classList.add('popover-flip-vertical');
|
|
8978
|
+
}
|
|
8979
|
+
}
|
|
8980
|
+
else {
|
|
8981
|
+
// Fallback browsers: JavaScript positioning with boundary detection
|
|
8982
|
+
let left = triggerRect.left;
|
|
8983
|
+
let top = triggerRect.bottom + 8;
|
|
8984
|
+
let transformOrigin = 'top left';
|
|
8985
|
+
// Apply horizontal flipping if needed
|
|
8986
|
+
if (wouldOverflowRight) {
|
|
8987
|
+
const actualPopoverWidth = this.popoverEl.getBoundingClientRect().width || popoverWidth;
|
|
8988
|
+
left = triggerRect.right - actualPopoverWidth;
|
|
8989
|
+
transformOrigin = 'top right';
|
|
8990
|
+
}
|
|
8991
|
+
// Apply vertical flipping if needed
|
|
8992
|
+
if (wouldOverflowBottom) {
|
|
8993
|
+
top = triggerRect.top - popoverHeight - 8;
|
|
8994
|
+
transformOrigin = transformOrigin.replace('top', 'bottom');
|
|
8995
|
+
}
|
|
8996
|
+
// Apply positioning in single DOM write for performance
|
|
8997
|
+
this.popoverEl.style.cssText = `
|
|
8998
|
+
position: fixed;
|
|
8999
|
+
left: ${left}px;
|
|
9000
|
+
top: ${top}px;
|
|
9001
|
+
z-index: var(--pine-z-index-overlay);
|
|
9002
|
+
transform-origin: ${transformOrigin};
|
|
9003
|
+
`;
|
|
9004
|
+
}
|
|
9005
|
+
}
|
|
9006
|
+
/**
|
|
9007
|
+
* Opens the filter popover programmatically.
|
|
9008
|
+
* Note: Clear variant does not support popover functionality.
|
|
9009
|
+
*/
|
|
9010
|
+
async showFilter() {
|
|
9011
|
+
if (this.variant === 'clear') {
|
|
9012
|
+
console.warn('Clear variant does not support showFilter method');
|
|
9013
|
+
return;
|
|
9014
|
+
}
|
|
9015
|
+
if (this.popoverEl != null) {
|
|
9016
|
+
try {
|
|
9017
|
+
this.popoverEl.showPopover();
|
|
9018
|
+
}
|
|
9019
|
+
catch (error) {
|
|
9020
|
+
// Fallback for testing environment where showPopover is not available
|
|
9021
|
+
this.popoverEl.style.display = 'block';
|
|
9022
|
+
this.popoverEl.classList.add('is-open');
|
|
9023
|
+
}
|
|
9024
|
+
}
|
|
9025
|
+
}
|
|
9026
|
+
/**
|
|
9027
|
+
* Closes the filter popover programmatically.
|
|
9028
|
+
* Note: Clear variant does not support popover functionality.
|
|
9029
|
+
*/
|
|
9030
|
+
async hideFilter() {
|
|
9031
|
+
if (this.variant === 'clear') {
|
|
9032
|
+
console.warn('Clear variant does not support hideFilter method');
|
|
9033
|
+
return;
|
|
9034
|
+
}
|
|
9035
|
+
if (this.popoverEl != null) {
|
|
9036
|
+
try {
|
|
9037
|
+
this.popoverEl.hidePopover();
|
|
9038
|
+
}
|
|
9039
|
+
catch (error) {
|
|
9040
|
+
// Fallback for testing environment where hidePopover is not available
|
|
9041
|
+
this.popoverEl.style.display = 'none';
|
|
9042
|
+
this.popoverEl.classList.remove('is-open');
|
|
9043
|
+
}
|
|
9044
|
+
}
|
|
9045
|
+
}
|
|
9046
|
+
/**
|
|
9047
|
+
* Listen for popover toggle events for browsers without native Popover API (fallback).
|
|
9048
|
+
* Native API browsers use direct element listeners to avoid conflicts.
|
|
9049
|
+
*/
|
|
9050
|
+
handlePopoverToggle(event) {
|
|
9051
|
+
const target = event.target;
|
|
9052
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
9053
|
+
// Only handle events for fallback browsers (Firefox) to avoid duplicate handling
|
|
9054
|
+
if (!supportsPopoverAPI && target && target.id === `${this.componentId}-popover`) {
|
|
9055
|
+
// Check for popover API support to avoid crashes
|
|
9056
|
+
let isCurrentlyOpen = false;
|
|
9057
|
+
try {
|
|
9058
|
+
isCurrentlyOpen = target.matches(':popover-open');
|
|
9059
|
+
}
|
|
9060
|
+
catch (error) {
|
|
9061
|
+
// Fallback if :popover-open selector isn't supported
|
|
9062
|
+
isCurrentlyOpen = target.style.display === 'block';
|
|
9063
|
+
}
|
|
9064
|
+
// Update state
|
|
9065
|
+
this.isOpen = isCurrentlyOpen;
|
|
9066
|
+
if (this.isOpen) {
|
|
9067
|
+
setTimeout(() => this.adjustPopoverPosition(), 0);
|
|
9068
|
+
this.pdsFilterOpen.emit({
|
|
9069
|
+
componentId: this.componentId,
|
|
9070
|
+
variant: this.variant,
|
|
9071
|
+
text: this.text,
|
|
9072
|
+
});
|
|
9073
|
+
}
|
|
9074
|
+
else {
|
|
9075
|
+
this.pdsFilterClose.emit({
|
|
9076
|
+
componentId: this.componentId,
|
|
9077
|
+
variant: this.variant,
|
|
9078
|
+
text: this.text,
|
|
9079
|
+
});
|
|
9080
|
+
}
|
|
9081
|
+
}
|
|
9082
|
+
}
|
|
9083
|
+
/**
|
|
9084
|
+
* Listen for clicks to detect outside dismissal.
|
|
9085
|
+
*/
|
|
9086
|
+
handleDocumentClick(event) {
|
|
9087
|
+
// Check if click is outside and popover gets closed
|
|
9088
|
+
if (!this.el.contains(event.target) && this.isOpen && this.variant !== 'clear') {
|
|
9089
|
+
setTimeout(() => {
|
|
9090
|
+
if (this.popoverEl && this.isOpen) {
|
|
9091
|
+
// Check for popover API support to avoid crashes
|
|
9092
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
9093
|
+
let popoverIsClosed = false;
|
|
9094
|
+
if (supportsPopoverAPI) {
|
|
9095
|
+
try {
|
|
9096
|
+
popoverIsClosed = !this.popoverEl.matches(':popover-open');
|
|
9097
|
+
}
|
|
9098
|
+
catch (error) {
|
|
9099
|
+
// Fallback if :popover-open selector isn't supported
|
|
9100
|
+
popoverIsClosed = this.popoverEl.style.display !== 'block';
|
|
9101
|
+
}
|
|
9102
|
+
}
|
|
9103
|
+
else {
|
|
9104
|
+
// Manual fallback - assume popover was closed by outside click
|
|
9105
|
+
popoverIsClosed = true;
|
|
9106
|
+
}
|
|
9107
|
+
if (popoverIsClosed) {
|
|
9108
|
+
this.isOpen = false;
|
|
9109
|
+
if (!supportsPopoverAPI) {
|
|
9110
|
+
this.popoverEl.style.display = 'none';
|
|
9111
|
+
this.popoverEl.classList.remove('is-open');
|
|
9112
|
+
}
|
|
9113
|
+
this.pdsFilterClose.emit({
|
|
9114
|
+
componentId: this.componentId,
|
|
9115
|
+
variant: this.variant,
|
|
9116
|
+
text: this.text,
|
|
9117
|
+
});
|
|
9118
|
+
}
|
|
9119
|
+
}
|
|
9120
|
+
}, 0);
|
|
9121
|
+
}
|
|
9122
|
+
}
|
|
9123
|
+
/**
|
|
9124
|
+
* Listen for Escape key to ensure close event fires.
|
|
9125
|
+
*/
|
|
9126
|
+
handleEscapeKey(event) {
|
|
9127
|
+
if (event.key === 'Escape' && this.isOpen && this.variant !== 'clear') {
|
|
9128
|
+
// Check if popover was closed by Escape
|
|
9129
|
+
setTimeout(() => {
|
|
9130
|
+
if (this.popoverEl && this.isOpen) {
|
|
9131
|
+
// Check for popover API support to avoid crashes
|
|
9132
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
9133
|
+
let popoverIsClosed = false;
|
|
9134
|
+
if (supportsPopoverAPI) {
|
|
9135
|
+
try {
|
|
9136
|
+
popoverIsClosed = !this.popoverEl.matches(':popover-open');
|
|
9137
|
+
}
|
|
9138
|
+
catch (error) {
|
|
9139
|
+
// Fallback if :popover-open selector isn't supported
|
|
9140
|
+
popoverIsClosed = this.popoverEl.style.display !== 'block';
|
|
9141
|
+
}
|
|
9142
|
+
}
|
|
9143
|
+
else {
|
|
9144
|
+
// Manual fallback - assume popover was closed by Escape
|
|
9145
|
+
popoverIsClosed = true;
|
|
9146
|
+
}
|
|
9147
|
+
if (popoverIsClosed) {
|
|
9148
|
+
this.isOpen = false;
|
|
9149
|
+
if (!supportsPopoverAPI) {
|
|
9150
|
+
this.popoverEl.style.display = 'none';
|
|
9151
|
+
this.popoverEl.classList.remove('is-open');
|
|
9152
|
+
}
|
|
9153
|
+
this.pdsFilterClose.emit({
|
|
9154
|
+
componentId: this.componentId,
|
|
9155
|
+
variant: this.variant,
|
|
9156
|
+
text: this.text,
|
|
9157
|
+
});
|
|
9158
|
+
}
|
|
9159
|
+
}
|
|
9160
|
+
}, 0);
|
|
9161
|
+
}
|
|
9162
|
+
}
|
|
9163
|
+
/**
|
|
9164
|
+
* Get the appropriate icon for the variant.
|
|
9165
|
+
*/
|
|
9166
|
+
getIcon() {
|
|
9167
|
+
if (this.variant === 'clear') {
|
|
9168
|
+
return trash;
|
|
9169
|
+
}
|
|
9170
|
+
return this.icon;
|
|
9171
|
+
}
|
|
9172
|
+
/**
|
|
9173
|
+
* Get CSS classes for the trigger button.
|
|
9174
|
+
*/
|
|
9175
|
+
getTriggerClasses() {
|
|
9176
|
+
const classes = ['pds-filter__trigger'];
|
|
9177
|
+
classes.push(`pds-filter__trigger--${this.variant}`);
|
|
9178
|
+
if (this.isOpen && this.variant !== 'clear') {
|
|
9179
|
+
classes.push('pds-filter__trigger--open');
|
|
9180
|
+
}
|
|
9181
|
+
return classes.join(' ');
|
|
9182
|
+
}
|
|
9183
|
+
/**
|
|
9184
|
+
* Render the trigger icon.
|
|
9185
|
+
*/
|
|
9186
|
+
renderIcon() {
|
|
9187
|
+
const iconToRender = this.getIcon();
|
|
9188
|
+
if (iconToRender == null || iconToRender === '')
|
|
9189
|
+
return null;
|
|
9190
|
+
return (hAsync("pds-icon", { icon: iconToRender, size: "var(--pine-font-size-100)", "aria-hidden": "true", part: "icon" }));
|
|
9191
|
+
}
|
|
9192
|
+
/**
|
|
9193
|
+
* Render the dropdown icon for selected variant.
|
|
9194
|
+
*/
|
|
9195
|
+
renderDropdownIcon() {
|
|
9196
|
+
if (this.variant === 'selected') {
|
|
9197
|
+
return (hAsync("pds-icon", { icon: enlarge, size: "var(--pine-dimension-200)", "aria-hidden": "true", class: "pds-filter__dropdown-icon", part: "icon" }));
|
|
9198
|
+
}
|
|
9199
|
+
return null;
|
|
9200
|
+
}
|
|
9201
|
+
render() {
|
|
9202
|
+
return (hAsync(Host, { key: 'e70f7bf3612c5c8abe7445ba3a4e53391a68de9e', id: this.componentId }, hAsync("button", { key: '2cba723795c43509762f75cb4b6607ce547f7c39', 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: '8244dd35cc74c6f0138be2d3495d94b97f60474f', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: 'd97c085d1df1ca13ccaf1f26ca2dac81bdfb105a', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: '0b9daf4591ea20db06813ce4c39442d69af3fda1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: 'f4499fe2d5a6a169318fe65cbbc558565c8644f9' })))));
|
|
9203
|
+
}
|
|
9204
|
+
get el() { return getElement(this); }
|
|
9205
|
+
static get style() { return pdsFilterCss; }
|
|
9206
|
+
static get cmpMeta() { return {
|
|
9207
|
+
"$flags$": 9,
|
|
9208
|
+
"$tagName$": "pds-filter",
|
|
9209
|
+
"$members$": {
|
|
9210
|
+
"componentId": [1, "component-id"],
|
|
9211
|
+
"variant": [1],
|
|
9212
|
+
"icon": [1],
|
|
9213
|
+
"text": [1],
|
|
9214
|
+
"isOpen": [32],
|
|
9215
|
+
"showFilter": [64],
|
|
9216
|
+
"hideFilter": [64]
|
|
9217
|
+
},
|
|
9218
|
+
"$listeners$": [[9, "resize", "handleWindowResize"], [9, "scroll", "handleWindowScroll"], [4, "toggle", "handlePopoverToggle"], [4, "click", "handleDocumentClick"], [4, "keydown", "handleEscapeKey"]],
|
|
9219
|
+
"$lazyBundleId$": "-",
|
|
9220
|
+
"$attrsToReflect$": []
|
|
9221
|
+
}; }
|
|
9222
|
+
}
|
|
9223
|
+
|
|
9224
|
+
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)}";
|
|
9225
|
+
|
|
9226
|
+
/**
|
|
9227
|
+
* @slot (default) - Container for pds-filter components.
|
|
9228
|
+
*/
|
|
9229
|
+
class PdsFilters {
|
|
9230
|
+
constructor(hostRef) {
|
|
9231
|
+
registerInstance(this, hostRef);
|
|
9232
|
+
}
|
|
9233
|
+
render() {
|
|
9234
|
+
return (hAsync(Host, { key: '7007a635d3866781dfd67bd2d3b2dab46d36cffc', id: this.componentId }, hAsync("div", { key: 'e6eb4c76bfb39050aaa01ad297df995de7df484b', class: "pds-filters" }, hAsync("slot", { key: '543c83c7422b3e1e9a2446618fe8119d76478df4' }))));
|
|
9235
|
+
}
|
|
9236
|
+
static get style() { return pdsFiltersCss; }
|
|
9237
|
+
static get cmpMeta() { return {
|
|
9238
|
+
"$flags$": 9,
|
|
9239
|
+
"$tagName$": "pds-filters",
|
|
9240
|
+
"$members$": {
|
|
9241
|
+
"componentId": [1, "component-id"]
|
|
9242
|
+
},
|
|
9243
|
+
"$listeners$": undefined,
|
|
9244
|
+
"$lazyBundleId$": "-",
|
|
9245
|
+
"$attrsToReflect$": []
|
|
9246
|
+
}; }
|
|
9247
|
+
}
|
|
9248
|
+
|
|
8014
9249
|
let missingAssetPathWarning = false;
|
|
8015
9250
|
/**
|
|
8016
9251
|
*
|
|
@@ -8459,9 +9694,9 @@ class PdsImage {
|
|
|
8459
9694
|
this.loading = 'eager';
|
|
8460
9695
|
}
|
|
8461
9696
|
render() {
|
|
8462
|
-
return (hAsync(Host, { key: '
|
|
9697
|
+
return (hAsync(Host, { key: 'fa205f03d5c378d27a66cbfd520ae2bc7ab9e9df', class: {
|
|
8463
9698
|
'pds-image': true,
|
|
8464
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
9699
|
+
}, 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 })));
|
|
8465
9700
|
}
|
|
8466
9701
|
static get style() { return pdsImageCss; }
|
|
8467
9702
|
static get cmpMeta() { return {
|
|
@@ -8487,7 +9722,7 @@ const pdsInputTokensCss$1 = ":host{--pine-input-color-background-danger:var(--pi
|
|
|
8487
9722
|
|
|
8488
9723
|
const labelCss$4 = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
|
|
8489
9724
|
|
|
8490
|
-
const pdsInputCss = ":host{--pds-input-background:var(--pine-color-background-container);--pds-input-border-color:var(--pine-color-border);--pds-input-border-color-hover:var(--pine-color-border-hover);--pds-input-border-color-disabled:var(--pine-color-border-disabled);--pds-input-border-radius:var(--pine-dimension-125);--pds-input-border-width:var(--pine-border-width-thin);--pds-input-padding-x:var(--pine-dimension-150);--pds-input-padding-y:calc(var(--pine-dimension-xs) - var(--pine-border-width));--pds-input-font:var(--pine-typography-body);--pds-input-text-color:var(--pine-color-text-active);--pds-input-placeholder-color:var(--pine-color-text-placeholder);--pds-input-icon-color:var(--pine-color-text-secondary);--pds-input-disabled-background:var(--pine-color-background-container-disabled);--pds-input-disabled-text-color:var(--pine-color-text-disabled);--pds-input-error-color:var(--pine-color-text-message-danger);--pds-input-error-background:var(--pine-input-color-background-danger);--pds-input-error-border:var(--pine-color-border-danger);--pds-input-error-border-hover:var(--pine-color-border-danger-hover);--pds-input-addon-background:var(--pine-color-background-subtle);--pds-input-addon-color:var(--pine-color-text-secondary);--pds-input-field-min-height:var(--pine-dimension-450);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host pds-select::part(select){background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host::part(prefix),:host::part(suffix){-ms-flex-align:center;align-items:center;color:var(--pine-color-text-label-readonly);display:-ms-flexbox;display:flex;height:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);white-space:nowrap;z-index:1}:host::part(prefix){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius);left:var(--pds-input-padding-x)}:host::part(suffix){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius);right:var(--pds-input-padding-x)}:host::part(prepend),:host::part(append){-ms-flex-align:center;align-items:center;background-color:var(--pds-input-addon-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);color:var(--pds-input-addon-color);display:-ms-flexbox;display:flex}:host::part(prepend){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius)}:host::part(append){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius)}:host([has-prepend]) ::slotted(pds-button[slot=prepend]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius-end-end:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pine-dimension-none);--pds-button-min-height:var(--pine-dimension-450)}:host([has-append]) ::slotted(pds-button[slot=append]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius-end-start:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pine-dimension-none);--pds-button-min-height:var(--pine-dimension-450)}:host([has-prepend]) ::slotted(pds-select[slot=prepend]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pine-dimension-none);--pds-select-border-radius-start-end:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([has-append]) ::slotted(pds-select[slot=append]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-start:var(--pine-dimension-none);--pds-select-border-radius-start-start:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([disabled=true])::part(prepend),:host([disabled=true])::part(append){background-color:var(--pds-input-disabled-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color-disabled)}:host([full-width=true]){width:100%}:host([invalid=true])::part(prepend),:host([invalid=true])::part(append){background-color:var(--pds-input-error-background);border:var(--pds-input-border-width) solid var(--pds-input-error-border)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label{color:var(--pine-color-text-active);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label-wrapper .pds-input__label{-webkit-margin-after:0;margin-block-end:0}.pds-input__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)}.pds-input__field-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-input__field-wrapper.has-prefix .pds-input__field{-webkit-padding-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));padding-inline-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em))}.pds-input__field-wrapper.has-suffix .pds-input__field{-webkit-padding-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));padding-inline-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em))}.pds-input__field-wrapper.has-prepend .pds-input__field{border-end-start-radius:var(--pine-dimension-none);border-start-start-radius:var(--pine-dimension-none)}.pds-input__field-wrapper.has-append .pds-input__field{border-end-end-radius:var(--pine-dimension-none);border-start-end-radius:var(--pine-dimension-none)}.pds-input__field{background:var(--pds-input-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);border-radius:var(--pds-input-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-input-text-color);-ms-flex:1;flex:1;font:var(--pds-input-font);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-input-field-min-height);min-width:var(--pine-dimension-none);padding:var(--pds-input-padding-y) var(--pds-input-padding-x);-webkit-transition:border-color 0.2s ease;transition:border-color 0.2s ease;width:100%}.pds-input__field:hover:not(:disabled){border-color:var(--pds-input-border-color-hover)}.pds-input__field:disabled{background:var(--pds-input-disabled-background);border-color:var(--pine-color-border-disabled);color:var(--pds-input-disabled-text-color);cursor:not-allowed}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.has-error .pds-input__field:hover:not(:disabled){border-color:var(--pds-input-error-border-hover)}.pds-input__field:focus-visible:not(.has-error){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error),:host([has-append]) .pds-input__field:focus-visible:not(.has-error),:host([has-prefix]) .pds-input__field:focus-visible:not(.has-error),:host([has-suffix]) .pds-input__field:focus-visible:not(.has-error){outline-offset:var(--pine-dimension-none)}.pds-input__field::-webkit-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-moz-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::placeholder{color:var(--pds-input-placeholder-color)}.has-error .pds-input__field{background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}.has-error .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-input__error-message,.pds-input__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-after:var(--pine-dimension-none);margin-block-end:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{-ms-flex-align:center;align-items:center;color:var(--pds-input-error-color);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.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}";
|
|
9725
|
+
const pdsInputCss = ":host{--pds-input-background:var(--pine-color-background-container);--pds-input-border-color:var(--pine-color-border);--pds-input-border-color-hover:var(--pine-color-border-hover);--pds-input-border-color-disabled:var(--pine-color-border-disabled);--pds-input-border-radius:var(--pine-dimension-125);--pds-input-border-width:var(--pine-border-width-thin);--pds-input-padding-x:var(--pine-dimension-150);--pds-input-padding-y:calc(var(--pine-dimension-xs) - var(--pine-border-width));--pds-input-font:var(--pine-typography-body);--pds-input-text-color:var(--pine-color-text-active);--pds-input-placeholder-color:var(--pine-color-text-placeholder);--pds-input-icon-color:var(--pine-color-text-secondary);--pds-input-disabled-background:var(--pine-color-background-container-disabled);--pds-input-disabled-text-color:var(--pine-color-text-disabled);--pds-input-error-color:var(--pine-color-text-message-danger);--pds-input-error-background:var(--pine-input-color-background-danger);--pds-input-error-border:var(--pine-color-border-danger);--pds-input-error-border-hover:var(--pine-color-border-danger-hover);--pds-input-addon-background:var(--pine-color-background-subtle);--pds-input-addon-color:var(--pine-color-text-secondary);--pds-input-field-min-height:var(--pine-dimension-450);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host pds-select::part(select){background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host::part(prefix),:host::part(suffix){-ms-flex-align:center;align-items:center;color:var(--pine-color-text-label-readonly);display:-ms-flexbox;display:flex;height:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);white-space:nowrap;z-index:var(--pine-z-index-raised)}:host::part(prefix){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius);left:var(--pds-input-padding-x)}:host::part(suffix){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius);right:var(--pds-input-padding-x)}:host::part(prepend),:host::part(append){-ms-flex-align:center;align-items:center;background-color:var(--pds-input-addon-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);color:var(--pds-input-addon-color);display:-ms-flexbox;display:flex;overflow:visible}:host::part(prepend){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius)}:host::part(append){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius)}:host([has-prepend]) ::slotted(pds-button[slot=prepend]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-end:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pds-input-border-radius);--pds-button-border-radius-end-start:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-append]) ::slotted(pds-button[slot=append]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-start:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pds-input-border-radius);--pds-button-border-radius-end-end:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-prepend]) ::slotted(pds-select[slot=prepend]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pine-dimension-none);--pds-select-border-radius-start-end:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([has-append]) ::slotted(pds-select[slot=append]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-start:var(--pine-dimension-none);--pds-select-border-radius-start-start:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([disabled=true])::part(prepend),:host([disabled=true])::part(append){background-color:var(--pds-input-disabled-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color-disabled)}:host([full-width=true]){width:100%}:host([invalid=true])::part(prepend),:host([invalid=true])::part(append){background-color:var(--pds-input-error-background);border:var(--pds-input-border-width) solid var(--pds-input-error-border)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label{color:var(--pine-color-text-active);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label-wrapper .pds-input__label{-webkit-margin-after:0;margin-block-end:0}.pds-input__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)}.pds-input__field-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-input__field-wrapper.has-prefix .pds-input__field{-webkit-padding-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));padding-inline-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em))}.pds-input__field-wrapper.has-suffix .pds-input__field{-webkit-padding-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));padding-inline-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em))}.pds-input__field-wrapper.has-prepend .pds-input__field{border-end-start-radius:var(--pine-dimension-none);border-start-start-radius:var(--pine-dimension-none)}.pds-input__field-wrapper.has-append .pds-input__field{border-end-end-radius:var(--pine-dimension-none);border-start-end-radius:var(--pine-dimension-none)}.pds-input__field{background:var(--pds-input-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);border-radius:var(--pds-input-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-input-text-color);-ms-flex:1;flex:1;font:var(--pds-input-font);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-input-field-min-height);min-width:var(--pine-dimension-none);padding:var(--pds-input-padding-y) var(--pds-input-padding-x);-webkit-transition:border-color 0.2s ease;transition:border-color 0.2s ease;width:100%}.pds-input__field:hover:not(:disabled){border-color:var(--pds-input-border-color-hover)}.pds-input__field:disabled{background:var(--pds-input-disabled-background);border-color:var(--pine-color-border-disabled);color:var(--pds-input-disabled-text-color);cursor:not-allowed}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.has-error .pds-input__field:hover:not(:disabled){border-color:var(--pds-input-error-border-hover)}.pds-input__field:focus-visible:not(.has-error){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width);position:relative;z-index:1}:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error),:host([has-append]) .pds-input__field:focus-visible:not(.has-error),:host([has-prefix]) .pds-input__field:focus-visible:not(.has-error),:host([has-suffix]) .pds-input__field:focus-visible:not(.has-error){outline-offset:var(--pine-dimension-none)}.pds-input__field::-webkit-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-moz-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::placeholder{color:var(--pds-input-placeholder-color)}.has-error .pds-input__field{background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}.has-error .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring-danger);position:relative;z-index:1}.pds-input__error-message,.pds-input__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-after:var(--pine-dimension-none);margin-block-end:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{-ms-flex-align:center;align-items:center;color:var(--pds-input-error-color);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.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}";
|
|
8491
9726
|
|
|
8492
9727
|
/**
|
|
8493
9728
|
* @slot append - Content to be displayed after the input field
|
|
@@ -8745,7 +9980,7 @@ class PdsInput {
|
|
|
8745
9980
|
'has-prepend': this.hasPrepend,
|
|
8746
9981
|
'has-append': this.hasAppend,
|
|
8747
9982
|
};
|
|
8748
|
-
return (hAsync(Host, { key: '
|
|
9983
|
+
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)))));
|
|
8749
9984
|
}
|
|
8750
9985
|
static get formAssociated() { return true; }
|
|
8751
9986
|
get el() { return getElement(this); }
|
|
@@ -8841,8 +10076,8 @@ class PdsLink {
|
|
|
8841
10076
|
return linkStyles;
|
|
8842
10077
|
}
|
|
8843
10078
|
render() {
|
|
8844
|
-
return (hAsync("a", { key: '
|
|
8845
|
-
hAsync("pds-icon", { key: '
|
|
10079
|
+
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 &&
|
|
10080
|
+
hAsync("pds-icon", { key: '19fc60fe515fa53b22ad770c5d8f52ef42d16fd5', icon: launch, size: this.fontSize })));
|
|
8846
10081
|
}
|
|
8847
10082
|
static get style() { return pdsLinkCss; }
|
|
8848
10083
|
static get cmpMeta() { return {
|
|
@@ -8912,7 +10147,7 @@ class PdsLoader {
|
|
|
8912
10147
|
}
|
|
8913
10148
|
}
|
|
8914
10149
|
render() {
|
|
8915
|
-
return (hAsync(Host, { key: '
|
|
10150
|
+
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..."))));
|
|
8916
10151
|
}
|
|
8917
10152
|
static get style() { return pdsLoaderCss; }
|
|
8918
10153
|
static get cmpMeta() { return {
|
|
@@ -8930,7 +10165,7 @@ class PdsLoader {
|
|
|
8930
10165
|
}; }
|
|
8931
10166
|
}
|
|
8932
10167
|
|
|
8933
|
-
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:
|
|
10168
|
+
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:var(--pine-z-index-modal)}@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:var(--pine-z-index-priority)}.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}";
|
|
8934
10169
|
|
|
8935
10170
|
class PdsModal {
|
|
8936
10171
|
constructor(hostRef) {
|
|
@@ -9168,14 +10403,14 @@ class PdsModal {
|
|
|
9168
10403
|
return thisZIndex === maxZIndex;
|
|
9169
10404
|
}
|
|
9170
10405
|
render() {
|
|
9171
|
-
return (hAsync("dialog", { key: '
|
|
10406
|
+
return (hAsync("dialog", { key: 'ca1fe22c9f9aa26e74234e5195c007760cbbf818', class: {
|
|
9172
10407
|
'pds-modal__backdrop': true,
|
|
9173
10408
|
'open': this.open
|
|
9174
|
-
}, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '
|
|
10409
|
+
}, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: 'd0f297574d53dc1718277a58c2ade00a5451f96b', class: {
|
|
9175
10410
|
'pds-modal': true,
|
|
9176
10411
|
[`pds-modal--${this.size}`]: true,
|
|
9177
10412
|
'pds-modal--scrollable': this.scrollable
|
|
9178
|
-
} }, hAsync("slot", { key: '
|
|
10413
|
+
} }, hAsync("slot", { key: '37bb5abda88b4db9304884532951980ea8b9eaf8' }))));
|
|
9179
10414
|
}
|
|
9180
10415
|
get el() { return getElement(this); }
|
|
9181
10416
|
static get watchers() { return {
|
|
@@ -9394,10 +10629,10 @@ class PdsModalContent {
|
|
|
9394
10629
|
render() {
|
|
9395
10630
|
// Only apply max-height style if it's not 'none'
|
|
9396
10631
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
9397
|
-
return (hAsync(Host, { key: '
|
|
10632
|
+
return (hAsync(Host, { key: '5357ae43a3c7e6922a182a00ddf0241775d5a2a2' }, hAsync("div", { key: '100bf34dbc72b4d7ec7de8dfe64aaa617f840a70', class: {
|
|
9398
10633
|
'pds-modal-content': true,
|
|
9399
10634
|
[`pds-modal-content--border-${this.border}`]: true
|
|
9400
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
10635
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '3f4a2281f3e1243a86dfb7ac496e6e190c1df548' }))));
|
|
9401
10636
|
}
|
|
9402
10637
|
get el() { return getElement(this); }
|
|
9403
10638
|
static get style() { return pdsModalContentCss; }
|
|
@@ -9421,7 +10656,7 @@ class PdsModalFooter {
|
|
|
9421
10656
|
registerInstance(this, hostRef);
|
|
9422
10657
|
}
|
|
9423
10658
|
render() {
|
|
9424
|
-
return (hAsync("footer", { key: '
|
|
10659
|
+
return (hAsync("footer", { key: '0fa58ce225ce31a1f40d6ce1d3276e716b36de8d', class: "pds-modal__footer" }, hAsync("slot", { key: 'df0bbdb56c711c7eb34db7181f940de11d4449ef' })));
|
|
9425
10660
|
}
|
|
9426
10661
|
static get style() { return pdsModalFooterCss; }
|
|
9427
10662
|
static get cmpMeta() { return {
|
|
@@ -9441,7 +10676,7 @@ class PdsModalHeader {
|
|
|
9441
10676
|
registerInstance(this, hostRef);
|
|
9442
10677
|
}
|
|
9443
10678
|
render() {
|
|
9444
|
-
return (hAsync("header", { key: '
|
|
10679
|
+
return (hAsync("header", { key: '1a471bd6dfa2b654f5a6ebdf8fb5baef728324b3', class: "pds-modal__header" }, hAsync("slot", { key: '946a365ab3c2ca627d618188890d385c054b4c16' })));
|
|
9445
10680
|
}
|
|
9446
10681
|
static get style() { return pdsModalHeaderCss; }
|
|
9447
10682
|
static get cmpMeta() { return {
|
|
@@ -9454,16 +10689,22 @@ class PdsModalHeader {
|
|
|
9454
10689
|
}; }
|
|
9455
10690
|
}
|
|
9456
10691
|
|
|
9457
|
-
const pdsPopoverCss = ":host{--sizing-max-width-default:352px;display:inline-block}:host [popover]{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);margin:var(--pine-dimension-none);max-width:var(--sizing-max-width-default);padding:var(--pine-dimension-md);position:fixed}:host button{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);font-family:var(--pine-font-family-heading);letter-spacing:var(--pine-letter-spacing);min-height:40px;padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}:host button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host button:hover{background-color:var(--pine-color-secondary-hover)}";
|
|
10692
|
+
const pdsPopoverCss = ":host{--sizing-max-width-default:352px;display:inline-block}:host [popover]{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);margin:var(--pine-dimension-none);max-width:var(--sizing-max-width-default);padding:var(--pine-dimension-md);position:fixed}:host [popover]:popover-open:not(.pds-popover--positioned){visibility:hidden}:host button{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);font-family:var(--pine-font-family-heading);letter-spacing:var(--pine-letter-spacing);min-height:40px;padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}:host button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host button:hover{background-color:var(--pine-color-secondary-hover)}";
|
|
9458
10693
|
|
|
9459
10694
|
class PdsPopover {
|
|
9460
10695
|
constructor(hostRef) {
|
|
9461
10696
|
registerInstance(this, hostRef);
|
|
10697
|
+
this.pdsPopoverOpen = createEvent(this, "pdsPopoverOpen");
|
|
10698
|
+
this.pdsPopoverClose = createEvent(this, "pdsPopoverClose");
|
|
9462
10699
|
/**
|
|
9463
10700
|
* Determines when the popover is active
|
|
9464
10701
|
* @defaultValue false
|
|
9465
10702
|
*/
|
|
9466
10703
|
this.active = false;
|
|
10704
|
+
/**
|
|
10705
|
+
* Tracks if the component is still mounted to prevent memory leaks
|
|
10706
|
+
*/
|
|
10707
|
+
this.isComponentMounted = true;
|
|
9467
10708
|
/**
|
|
9468
10709
|
* Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
|
|
9469
10710
|
* @defaultValue "show"
|
|
@@ -9485,24 +10726,123 @@ class PdsPopover {
|
|
|
9485
10726
|
*/
|
|
9486
10727
|
this.placement = 'right';
|
|
9487
10728
|
}
|
|
9488
|
-
|
|
9489
|
-
|
|
10729
|
+
componentDidLoad() {
|
|
10730
|
+
var _a;
|
|
10731
|
+
// Attach toggle event listener to the popover element
|
|
10732
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10733
|
+
if (popoverEl != null) {
|
|
10734
|
+
this.boundToggleHandler = this.handleToggle.bind(this);
|
|
10735
|
+
popoverEl.addEventListener('toggle', this.boundToggleHandler);
|
|
10736
|
+
}
|
|
9490
10737
|
}
|
|
9491
|
-
|
|
9492
|
-
|
|
10738
|
+
disconnectedCallback() {
|
|
10739
|
+
var _a;
|
|
10740
|
+
this.isComponentMounted = false;
|
|
10741
|
+
// Clean up event listener
|
|
10742
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10743
|
+
if (popoverEl != null && this.boundToggleHandler != null) {
|
|
10744
|
+
popoverEl.removeEventListener('toggle', this.boundToggleHandler);
|
|
10745
|
+
}
|
|
10746
|
+
}
|
|
10747
|
+
/**
|
|
10748
|
+
* Opens the popover programmatically
|
|
10749
|
+
*/
|
|
10750
|
+
async show() {
|
|
10751
|
+
var _a;
|
|
10752
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10753
|
+
if (popoverEl != null && typeof popoverEl.showPopover === 'function') {
|
|
10754
|
+
try {
|
|
10755
|
+
popoverEl.showPopover();
|
|
10756
|
+
}
|
|
10757
|
+
catch (e) {
|
|
10758
|
+
// Popover might already be open
|
|
10759
|
+
console.warn('Failed to show popover:', e);
|
|
10760
|
+
}
|
|
10761
|
+
}
|
|
10762
|
+
}
|
|
10763
|
+
/**
|
|
10764
|
+
* Closes the popover programmatically
|
|
10765
|
+
*/
|
|
10766
|
+
async hide() {
|
|
10767
|
+
var _a;
|
|
10768
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10769
|
+
if (popoverEl != null && typeof popoverEl.hidePopover === 'function') {
|
|
10770
|
+
try {
|
|
10771
|
+
popoverEl.hidePopover();
|
|
10772
|
+
}
|
|
10773
|
+
catch (e) {
|
|
10774
|
+
// Popover might already be closed
|
|
10775
|
+
console.warn('Failed to hide popover:', e);
|
|
10776
|
+
}
|
|
10777
|
+
}
|
|
10778
|
+
}
|
|
10779
|
+
/**
|
|
10780
|
+
* Toggles the popover open/closed state programmatically
|
|
10781
|
+
*/
|
|
10782
|
+
async toggle() {
|
|
10783
|
+
var _a;
|
|
10784
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10785
|
+
if (popoverEl != null && typeof popoverEl.togglePopover === 'function') {
|
|
10786
|
+
try {
|
|
10787
|
+
popoverEl.togglePopover();
|
|
10788
|
+
}
|
|
10789
|
+
catch (e) {
|
|
10790
|
+
console.warn('Failed to toggle popover:', e);
|
|
10791
|
+
}
|
|
10792
|
+
}
|
|
10793
|
+
}
|
|
10794
|
+
handleToggle(event) {
|
|
10795
|
+
var _a;
|
|
10796
|
+
const toggleEvent = event;
|
|
10797
|
+
// Prepare event detail
|
|
10798
|
+
const eventDetail = {
|
|
10799
|
+
componentId: this.componentId,
|
|
10800
|
+
popoverType: this.popoverType,
|
|
10801
|
+
text: this.text,
|
|
10802
|
+
};
|
|
10803
|
+
// Update internal state based on native popover state
|
|
10804
|
+
if (toggleEvent.newState === 'open') {
|
|
10805
|
+
this.active = true;
|
|
10806
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10807
|
+
// Remove positioned class to hide popover via CSS
|
|
10808
|
+
if (popoverEl != null) {
|
|
10809
|
+
popoverEl.classList.remove('pds-popover--positioned');
|
|
10810
|
+
}
|
|
10811
|
+
// Position after the browser has rendered the popover, then show it
|
|
10812
|
+
requestAnimationFrame(() => {
|
|
10813
|
+
// Prevent memory leak if component unmounts during animation frame
|
|
10814
|
+
if (!this.isComponentMounted)
|
|
10815
|
+
return;
|
|
10816
|
+
this.handlePopoverPositioning();
|
|
10817
|
+
if (popoverEl != null) {
|
|
10818
|
+
popoverEl.classList.add('pds-popover--positioned');
|
|
10819
|
+
}
|
|
10820
|
+
});
|
|
10821
|
+
this.pdsPopoverOpen.emit(eventDetail);
|
|
10822
|
+
}
|
|
10823
|
+
else if (toggleEvent.newState === 'closed') {
|
|
10824
|
+
this.active = false;
|
|
10825
|
+
this.pdsPopoverClose.emit(eventDetail);
|
|
10826
|
+
}
|
|
9493
10827
|
}
|
|
9494
10828
|
handleScroll() {
|
|
9495
|
-
|
|
10829
|
+
var _a;
|
|
10830
|
+
// Only reposition if the popover is actually open
|
|
10831
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10832
|
+
if (popoverEl != null && this.active === true) {
|
|
9496
10833
|
this.handlePopoverPositioning();
|
|
9497
10834
|
}
|
|
9498
10835
|
}
|
|
9499
10836
|
handlePopoverPositioning() {
|
|
9500
10837
|
const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger');
|
|
9501
10838
|
const popoverEl = this.el.shadowRoot.querySelector('div[popover]');
|
|
9502
|
-
if (
|
|
10839
|
+
if (triggerEl == null || popoverEl == null)
|
|
9503
10840
|
return;
|
|
9504
|
-
|
|
9505
|
-
const
|
|
10841
|
+
// Cast to HTMLElement after null check for proper typing
|
|
10842
|
+
const triggerElement = triggerEl;
|
|
10843
|
+
const popoverElement = popoverEl;
|
|
10844
|
+
const triggerRect = triggerElement.getBoundingClientRect();
|
|
10845
|
+
const popoverRect = popoverElement.getBoundingClientRect();
|
|
9506
10846
|
let top = 0;
|
|
9507
10847
|
let left = 0;
|
|
9508
10848
|
const offset = 8;
|
|
@@ -9556,11 +10896,11 @@ class PdsPopover {
|
|
|
9556
10896
|
left = triggerRect.left - popoverRect.width - offset;
|
|
9557
10897
|
break;
|
|
9558
10898
|
}
|
|
9559
|
-
|
|
9560
|
-
|
|
10899
|
+
popoverElement.style.top = `${top}px`;
|
|
10900
|
+
popoverElement.style.left = `${left}px`;
|
|
9561
10901
|
}
|
|
9562
10902
|
render() {
|
|
9563
|
-
return (hAsync(Host, { key: '
|
|
10903
|
+
return (hAsync(Host, { key: 'c3da1b2ab23b4678aeb2f7fdfe59383c1c5e6766' }, hAsync("button", { key: 'd426d0c3145820c161858123cb71cdf92a6da3f6', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction }, this.text), hAsync("div", { key: 'aad97aedfc716085d1e7609649cc7aaeb7de7358', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, hAsync("slot", { key: '1b5dde4a0643ee6dbdf4116cc74fff8b188e498b' }))));
|
|
9564
10904
|
}
|
|
9565
10905
|
get el() { return getElement(this); }
|
|
9566
10906
|
static get style() { return pdsPopoverCss; }
|
|
@@ -9574,9 +10914,12 @@ class PdsPopover {
|
|
|
9574
10914
|
"text": [1],
|
|
9575
10915
|
"maxWidth": [2, "max-width"],
|
|
9576
10916
|
"placement": [513],
|
|
9577
|
-
"active": [32]
|
|
10917
|
+
"active": [32],
|
|
10918
|
+
"show": [64],
|
|
10919
|
+
"hide": [64],
|
|
10920
|
+
"toggle": [64]
|
|
9578
10921
|
},
|
|
9579
|
-
"$listeners$": [[
|
|
10922
|
+
"$listeners$": [[11, "scroll", "handleScroll"]],
|
|
9580
10923
|
"$lazyBundleId$": "-",
|
|
9581
10924
|
"$attrsToReflect$": [["placement", "placement"]]
|
|
9582
10925
|
}; }
|
|
@@ -9604,7 +10947,7 @@ class PdsProgress {
|
|
|
9604
10947
|
this.showPercent = false;
|
|
9605
10948
|
}
|
|
9606
10949
|
render() {
|
|
9607
|
-
return (hAsync(Host, { key: '
|
|
10950
|
+
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, "%")));
|
|
9608
10951
|
}
|
|
9609
10952
|
static get style() { return pdsProgressCss; }
|
|
9610
10953
|
static get cmpMeta() { return {
|
|
@@ -9638,7 +10981,7 @@ class PdsProperty {
|
|
|
9638
10981
|
this.icon = 'star';
|
|
9639
10982
|
}
|
|
9640
10983
|
render() {
|
|
9641
|
-
return (hAsync(Host, { key: '
|
|
10984
|
+
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' }))));
|
|
9642
10985
|
}
|
|
9643
10986
|
static get style() { return pdsPropertyCss; }
|
|
9644
10987
|
static get cmpMeta() { return {
|
|
@@ -9662,6 +11005,7 @@ class PdsRadio {
|
|
|
9662
11005
|
constructor(hostRef) {
|
|
9663
11006
|
registerInstance(this, hostRef);
|
|
9664
11007
|
this.pdsRadioChange = createEvent(this, "pdsRadioChange");
|
|
11008
|
+
this._type = 'radio';
|
|
9665
11009
|
/**
|
|
9666
11010
|
* Determines whether or not the radio is checked.
|
|
9667
11011
|
* @defaultValue false
|
|
@@ -9701,11 +11045,16 @@ class PdsRadio {
|
|
|
9701
11045
|
}
|
|
9702
11046
|
return classNames.join(' ');
|
|
9703
11047
|
}
|
|
11048
|
+
connectedCallback() {
|
|
11049
|
+
// Expose type property on the element instance to match native form element behavior
|
|
11050
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
11051
|
+
}
|
|
9704
11052
|
render() {
|
|
9705
|
-
return (hAsync(Host, { key: '
|
|
9706
|
-
hAsync("div", { key: '
|
|
9707
|
-
hAsync("div", { key: '
|
|
11053
|
+
return (hAsync(Host, { key: '06e5b348a9fe664ac157f0383dab869885644f28', class: this.classNames() }, hAsync("label", { key: '12d203aa9a181de09a4323b0644905f308209e10', htmlFor: this.componentId }, hAsync("input", { key: '693af2832937dfa368859bc5d34e33813093bd19', "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: '12cbafe6f967b0336e12083e506d0347fd60bb1a', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
11054
|
+
hAsync("div", { key: 'd4c416a2c24331bb23c6bd829aff51dfe142ac4a', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
11055
|
+
hAsync("div", { key: '8b973854356bdf1d36401bb7f818bacf573da010', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '85abae586504b4d64a19bf078ddd5fab099e4e06', icon: danger, size: "small" }), this.errorMessage)));
|
|
9708
11056
|
}
|
|
11057
|
+
get el() { return getElement(this); }
|
|
9709
11058
|
static get style() { return labelCss$3 + pdsRadioCss; }
|
|
9710
11059
|
static get cmpMeta() { return {
|
|
9711
11060
|
"$flags$": 2,
|
|
@@ -9770,7 +11119,7 @@ class PdsRow {
|
|
|
9770
11119
|
})), (this.minHeight && {
|
|
9771
11120
|
'min-height': this.minHeight,
|
|
9772
11121
|
}));
|
|
9773
|
-
return hAsync(Host, { key: '
|
|
11122
|
+
return hAsync(Host, { key: 'd9fd2087c959b16ca168ee2b011a3d4bd466c113', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
9774
11123
|
}
|
|
9775
11124
|
static get style() { return pdsRowCss; }
|
|
9776
11125
|
static get cmpMeta() { return {
|
|
@@ -9797,7 +11146,7 @@ const pdsSelectTokensCss = ":host{--pine-select-color-background-danger:var(--pi
|
|
|
9797
11146
|
|
|
9798
11147
|
const labelCss$2 = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
|
|
9799
11148
|
|
|
9800
|
-
const pdsSelectCss = ":host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:\"label label\" \"field field\" \"message message\";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__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{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-radius:var(--pds-select-border-radius);border-bottom-left-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-bottom-right-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-top-left-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));border-top-right-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:
|
|
11149
|
+
const pdsSelectCss = ":host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:\"label label\" \"field field\" \"message message\";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__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{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-radius:var(--pds-select-border-radius);border-bottom-left-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-bottom-right-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-top-left-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));border-top-right-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:var(--pine-z-index-raised)}.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}";
|
|
9801
11150
|
|
|
9802
11151
|
/**
|
|
9803
11152
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
@@ -9806,6 +11155,7 @@ class PdsSelect {
|
|
|
9806
11155
|
constructor(hostRef) {
|
|
9807
11156
|
registerInstance(this, hostRef);
|
|
9808
11157
|
this.pdsSelectChange = createEvent(this, "pdsSelectChange");
|
|
11158
|
+
this._type = 'select-one';
|
|
9809
11159
|
/**
|
|
9810
11160
|
* Indicates whether or not the select field is disabled.
|
|
9811
11161
|
* @defaultValue false
|
|
@@ -9868,13 +11218,26 @@ class PdsSelect {
|
|
|
9868
11218
|
this.updateSelectedOption();
|
|
9869
11219
|
this.updateFormValue();
|
|
9870
11220
|
}
|
|
11221
|
+
/**
|
|
11222
|
+
* Updates the type property when multiple changes to match native select behavior.
|
|
11223
|
+
*/
|
|
11224
|
+
multipleChanged() {
|
|
11225
|
+
this.updateType();
|
|
11226
|
+
}
|
|
11227
|
+
updateType() {
|
|
11228
|
+
this._type = this.multiple ? 'select-multiple' : 'select-one';
|
|
11229
|
+
}
|
|
9871
11230
|
connectedCallback() {
|
|
9872
11231
|
// Initialize ElementInternals for form association
|
|
9873
11232
|
if (this.el.attachInternals) {
|
|
9874
11233
|
this.internals = this.el.attachInternals();
|
|
9875
11234
|
}
|
|
11235
|
+
// Expose type property on the element instance to match native form element behavior
|
|
11236
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
9876
11237
|
}
|
|
9877
11238
|
componentWillLoad() {
|
|
11239
|
+
// Set initial type based on multiple prop
|
|
11240
|
+
this.updateType();
|
|
9878
11241
|
this.updateSelectedOption();
|
|
9879
11242
|
}
|
|
9880
11243
|
componentDidLoad() {
|
|
@@ -9997,12 +11360,13 @@ class PdsSelect {
|
|
|
9997
11360
|
}
|
|
9998
11361
|
render() {
|
|
9999
11362
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
10000
|
-
return (hAsync(Host, { key: '
|
|
11363
|
+
return (hAsync(Host, { key: '807a2ecdb0734b8c91936ec4c46e4d4f08572ccb', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'febbc7cac34855dc9574ba5b1ab1edef4acef664', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '92d97d395ac108616a67111a8dc25ee554a33c12', class: "pds-select__label-wrapper" }, hAsync("label", { key: '42885b3d3d01af615e248655308324ba843dab42', htmlFor: this.componentId }, hAsync("span", { key: '24ffeb13dafc9a042c4099442a81d020732f0336', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: '7be3328511bb074844715ed649e22ef6d0d9866a', "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: '0febab292f965293e53be574c492619294fcbe26', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'e8022a71a6391c72388a681ee47c8720d751afb8', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: 'cb196851d9afacd32c81d64922492fda1b937d74', class: "pds-select__select-icon", icon: enlarge }))));
|
|
10001
11364
|
}
|
|
10002
11365
|
static get formAssociated() { return true; }
|
|
10003
11366
|
get el() { return getElement(this); }
|
|
10004
11367
|
static get watchers() { return {
|
|
10005
|
-
"value": ["valueChanged"]
|
|
11368
|
+
"value": ["valueChanged"],
|
|
11369
|
+
"multiple": ["multipleChanged"]
|
|
10006
11370
|
}; }
|
|
10007
11371
|
static get style() { return pdsSelectTokensCss + (labelCss$2 + pdsSelectCss); }
|
|
10008
11372
|
static get cmpMeta() { return {
|
|
@@ -12739,7 +14103,7 @@ class PdsSortable {
|
|
|
12739
14103
|
Sortable.create(this.el, sortableOptions);
|
|
12740
14104
|
}
|
|
12741
14105
|
render() {
|
|
12742
|
-
return (hAsync(Host, { key: '
|
|
14106
|
+
return (hAsync(Host, { key: '925de28efdf7d2f1b6f6f5b94da4dbb383c0421a', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: '3525abab4ff66a63c90f4db99e5bb090308afc9d' })));
|
|
12743
14107
|
}
|
|
12744
14108
|
get el() { return getElement(this); }
|
|
12745
14109
|
static get style() { return pdsSortableCss; }
|
|
@@ -12786,7 +14150,7 @@ class PdsSortableItem {
|
|
|
12786
14150
|
}
|
|
12787
14151
|
}
|
|
12788
14152
|
render() {
|
|
12789
|
-
return (hAsync(Host, { key: '
|
|
14153
|
+
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" })))));
|
|
12790
14154
|
}
|
|
12791
14155
|
get el() { return getElement(this); }
|
|
12792
14156
|
static get style() { return pdsSortableItemCss; }
|
|
@@ -12813,6 +14177,7 @@ class PdsSwitch {
|
|
|
12813
14177
|
registerInstance(this, hostRef);
|
|
12814
14178
|
this.pdsSwitchChange = createEvent(this, "pdsSwitchChange");
|
|
12815
14179
|
this.inheritedAttributes = {};
|
|
14180
|
+
this._type = 'checkbox';
|
|
12816
14181
|
/**
|
|
12817
14182
|
* Determines the input 'checked' state.
|
|
12818
14183
|
*/
|
|
@@ -12852,6 +14217,8 @@ class PdsSwitch {
|
|
|
12852
14217
|
if (this.el.attachInternals) {
|
|
12853
14218
|
this.internals = this.el.attachInternals();
|
|
12854
14219
|
}
|
|
14220
|
+
// Expose type property on the element instance to match native form element behavior
|
|
14221
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
12855
14222
|
}
|
|
12856
14223
|
componentDidLoad() {
|
|
12857
14224
|
this.updateFormValue();
|
|
@@ -12888,9 +14255,9 @@ class PdsSwitch {
|
|
|
12888
14255
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
12889
14256
|
}
|
|
12890
14257
|
render() {
|
|
12891
|
-
return (hAsync(Host, { key: '
|
|
12892
|
-
hAsync("div", { key: '
|
|
12893
|
-
hAsync("div", { key: '
|
|
14258
|
+
return (hAsync(Host, { key: 'bc66c138352b3de0330f5b725e043b4055bec2d6', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: 'c4e400efb2dd2701217bb1044f036d1a281d0001', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '7b80961fb73cd330088f2c93d46475c1d1853da7', "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: '318e23af1f6126302b8bb0bb8b9f12a0dc7f71b5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
14259
|
+
hAsync("div", { key: 'd16fc523de5eacdd14dc4edce347e3be63edeb3e', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
14260
|
+
hAsync("div", { key: '3c4ecef3cdb08568b0f52ed4af58a60c5f6ace62', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'ef58ca016b5e0cf63cb43591ec7b50e84b19595d', icon: danger, size: "small" }), this.errorMessage)));
|
|
12894
14261
|
}
|
|
12895
14262
|
static get formAssociated() { return true; }
|
|
12896
14263
|
get el() { return getElement(this); }
|
|
@@ -12920,7 +14287,7 @@ class PdsSwitch {
|
|
|
12920
14287
|
}; }
|
|
12921
14288
|
}
|
|
12922
14289
|
|
|
12923
|
-
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:
|
|
14290
|
+
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:var(--pine-z-index-raised)}.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:var(--pine-z-index-raised);}.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}";
|
|
12924
14291
|
|
|
12925
14292
|
class PdsTab {
|
|
12926
14293
|
constructor(hostRef) {
|
|
@@ -12936,9 +14303,9 @@ class PdsTab {
|
|
|
12936
14303
|
this.pdsTabClick.emit([index, parentComponentId]);
|
|
12937
14304
|
}
|
|
12938
14305
|
render() {
|
|
12939
|
-
const availabilityTabEdgeInlineStart = (hAsync("span", { key: '
|
|
12940
|
-
const availabilityTabEdgeInlineEnd = (hAsync("span", { key: '
|
|
12941
|
-
return (hAsync(Host, { key: '
|
|
14306
|
+
const availabilityTabEdgeInlineStart = (hAsync("span", { key: '837cf57372db654f6ca411054446ebf0bc27b539', class: "pds-tab-edge", role: "presentation" }));
|
|
14307
|
+
const availabilityTabEdgeInlineEnd = (hAsync("span", { key: 'e15055442d56b50e6ac21bfb76fc0f599406a4fb', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
|
|
14308
|
+
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' })))));
|
|
12942
14309
|
}
|
|
12943
14310
|
get el() { return getElement(this); }
|
|
12944
14311
|
static get style() { return pdsTabCss; }
|
|
@@ -12958,7 +14325,7 @@ class PdsTab {
|
|
|
12958
14325
|
}; }
|
|
12959
14326
|
}
|
|
12960
14327
|
|
|
12961
|
-
const pdsTableCss = "@charset \"UTF-8\";:host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){outline:var(--pine-outline-focus)}:host(.pds-table-responsive-host){border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;max-width:100% !important;overflow:hidden !important;position:relative !important;width:100% !important}.pds-table-responsive-container{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;overflow-x:auto !important;overflow-y:visible !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper .pds-table{display:table !important;min-width:-webkit-max-content !important;min-width:-moz-max-content !important;min-width:max-content !important;table-layout:auto !important;white-space:nowrap !important;width:100% !important}.scroll-shadow-left,.scroll-shadow-right{height:100%;opacity:0;pointer-events:none;position:absolute;top:0;-webkit-transition:opacity 0.1s ease;transition:opacity 0.1s ease;width:4px;z-index:
|
|
14328
|
+
const pdsTableCss = "@charset \"UTF-8\";:host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){outline:var(--pine-outline-focus)}:host(.pds-table-responsive-host){border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;max-width:100% !important;overflow:hidden !important;position:relative !important;width:100% !important}.pds-table-responsive-container{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;overflow-x:auto !important;overflow-y:visible !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper .pds-table{display:table !important;min-width:-webkit-max-content !important;min-width:-moz-max-content !important;min-width:max-content !important;table-layout:auto !important;white-space:nowrap !important;width:100% !important}.scroll-shadow-left,.scroll-shadow-right{height:100%;opacity:0;pointer-events:none;position:absolute;top:0;-webkit-transition:opacity 0.1s ease;transition:opacity 0.1s ease;width:4px;z-index:var(--pine-z-index)}.scroll-shadow-left{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);border-bottom-left-radius:inherit;border-top-left-radius:inherit;left:0}.scroll-shadow-right{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);border-bottom-right-radius:inherit;border-top-right-radius:inherit;right:0}";
|
|
12962
14329
|
|
|
12963
14330
|
class PdsTable {
|
|
12964
14331
|
constructor(hostRef) {
|
|
@@ -13178,7 +14545,7 @@ class PdsTableBody {
|
|
|
13178
14545
|
registerInstance(this, hostRef);
|
|
13179
14546
|
}
|
|
13180
14547
|
render() {
|
|
13181
|
-
return (hAsync(Host, { key: '
|
|
14548
|
+
return (hAsync(Host, { key: '7c9b15bea47bcede62a93ef11ee9dba093450ab9', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'fab0b2ca27185373cdb7b29d9cb1807b4097aea9' })));
|
|
13182
14549
|
}
|
|
13183
14550
|
static get style() { return pdsTableBodyCss; }
|
|
13184
14551
|
static get cmpMeta() { return {
|
|
@@ -13191,7 +14558,7 @@ class PdsTableBody {
|
|
|
13191
14558
|
}; }
|
|
13192
14559
|
}
|
|
13193
14560
|
|
|
13194
|
-
const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);inset-inline-start:var(--pine-dimension-none);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-sm);vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:0;position:-webkit-sticky;position:sticky;z-index:
|
|
14561
|
+
const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);inset-inline-start:var(--pine-dimension-none);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-sm);vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:0;position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}:host(.pds-table-cell--align-start){text-align:start}:host(.pds-table-cell--align-center){text-align:center}:host(.pds-table-cell--align-end){text-align:end}:host(.pds-table-cell--align-justify){text-align:justify}";
|
|
13195
14562
|
|
|
13196
14563
|
class PdsTableCell {
|
|
13197
14564
|
constructor(hostRef) {
|
|
@@ -13289,11 +14656,11 @@ class PdsTableCell {
|
|
|
13289
14656
|
return classNames.join(' ');
|
|
13290
14657
|
}
|
|
13291
14658
|
render() {
|
|
13292
|
-
return (hAsync(Host, { key: '
|
|
14659
|
+
return (hAsync(Host, { key: 'b1c76cfb3fa26b7e59586cfd693380701c9146ff', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
13293
14660
|
this.tableRef.fixedColumn &&
|
|
13294
14661
|
this.tableRef.selectable
|
|
13295
14662
|
? { '--fixed-cell-position': '40px' }
|
|
13296
|
-
: {} }, hAsync("slot", { key: '
|
|
14663
|
+
: {} }, hAsync("slot", { key: '1a04730905bf7ad930141c1914f37dd7717570d8' })));
|
|
13297
14664
|
}
|
|
13298
14665
|
get hostElement() { return getElement(this); }
|
|
13299
14666
|
static get style() { return pdsTableCellCss; }
|
|
@@ -13319,7 +14686,7 @@ const closest = (selector, el) => {
|
|
|
13319
14686
|
closest(selector, el.getRootNode().host)));
|
|
13320
14687
|
};
|
|
13321
14688
|
|
|
13322
|
-
const pdsTableHeadCss = ":host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:
|
|
14689
|
+
const pdsTableHeadCss = ":host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host pds-table-checkbox-cell{-webkit-border-after:var(--border-head-default);border-block-end:var(--border-head-default)}";
|
|
13323
14690
|
|
|
13324
14691
|
class PdsTableHead {
|
|
13325
14692
|
constructor(hostRef) {
|
|
@@ -13355,7 +14722,7 @@ class PdsTableHead {
|
|
|
13355
14722
|
}
|
|
13356
14723
|
}
|
|
13357
14724
|
render() {
|
|
13358
|
-
return (hAsync(Host, { key: '
|
|
14725
|
+
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' })));
|
|
13359
14726
|
}
|
|
13360
14727
|
get hostElement() { return getElement(this); }
|
|
13361
14728
|
static get style() { return pdsTableHeadCss; }
|
|
@@ -13372,7 +14739,7 @@ class PdsTableHead {
|
|
|
13372
14739
|
}; }
|
|
13373
14740
|
}
|
|
13374
14741
|
|
|
13375
|
-
const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-150);position:relative;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:
|
|
14742
|
+
const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-150);position:relative;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-active)}:host(.pds-table-head-cell--align-start){text-align:start}:host(.pds-table-head-cell--align-center){text-align:center}:host(.pds-table-head-cell--align-end){text-align:end}:host(.pds-table-head-cell--align-justify){text-align:justify}";
|
|
13376
14743
|
|
|
13377
14744
|
class PdsTableHeadCell {
|
|
13378
14745
|
constructor(hostRef) {
|
|
@@ -13494,11 +14861,11 @@ class PdsTableHeadCell {
|
|
|
13494
14861
|
return classNames.join(' ');
|
|
13495
14862
|
}
|
|
13496
14863
|
render() {
|
|
13497
|
-
return (hAsync(Host, { key: '
|
|
14864
|
+
return (hAsync(Host, { key: '3d950a2997ef4c095d08f9c4e67b9a963fea093d', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
13498
14865
|
this.tableRef.fixedColumn &&
|
|
13499
14866
|
this.tableRef.selectable
|
|
13500
14867
|
? { '--fixed-cell-position': '40px' }
|
|
13501
|
-
: {} }, hAsync("slot", { key: '
|
|
14868
|
+
: {} }, hAsync("slot", { key: '8ca7d4d169612e5ba237691d9a5ec9ed35610230' }), this.sortable && (hAsync("pds-icon", { key: 'e2e214b39a1706d887bb34a0d4fc3f632e752306', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
|
|
13502
14869
|
}
|
|
13503
14870
|
get hostElement() { return getElement(this); }
|
|
13504
14871
|
static get style() { return pdsTableHeadCellCss; }
|
|
@@ -13518,7 +14885,7 @@ class PdsTableHeadCell {
|
|
|
13518
14885
|
}; }
|
|
13519
14886
|
}
|
|
13520
14887
|
|
|
13521
|
-
const pdsTableRowCss = ":host{--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:
|
|
14888
|
+
const pdsTableRowCss = ":host{--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}";
|
|
13522
14889
|
|
|
13523
14890
|
class PdsTableRow {
|
|
13524
14891
|
constructor(hostRef) {
|
|
@@ -13565,7 +14932,7 @@ class PdsTableRow {
|
|
|
13565
14932
|
}
|
|
13566
14933
|
}
|
|
13567
14934
|
render() {
|
|
13568
|
-
return (hAsync(Host, { key: '
|
|
14935
|
+
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' })));
|
|
13569
14936
|
}
|
|
13570
14937
|
get hostElement() { return getElement(this); }
|
|
13571
14938
|
static get style() { return pdsTableRowCss; }
|
|
@@ -13594,7 +14961,7 @@ class PdsTabpanel {
|
|
|
13594
14961
|
this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
|
|
13595
14962
|
}
|
|
13596
14963
|
render() {
|
|
13597
|
-
return (hAsync(Host, { key: '
|
|
14964
|
+
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' }))));
|
|
13598
14965
|
}
|
|
13599
14966
|
get el() { return getElement(this); }
|
|
13600
14967
|
static get style() { return pdsTabpanelCss; }
|
|
@@ -13618,6 +14985,7 @@ const pdsTabsCss = ":host{--tabs-dimension-panel-margin-top:var(--pine-dimension
|
|
|
13618
14985
|
/**
|
|
13619
14986
|
* @slot tabs - Content is placed within the `div[role="tablist"]` element as children
|
|
13620
14987
|
* @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
|
|
14988
|
+
* @part tab-list - Exposes the container element that holds all the tab buttons for styling.
|
|
13621
14989
|
*/
|
|
13622
14990
|
class PdsTabs {
|
|
13623
14991
|
constructor(hostRef) {
|
|
@@ -13631,7 +14999,13 @@ class PdsTabs {
|
|
|
13631
14999
|
}
|
|
13632
15000
|
handleKeyDown(ev) {
|
|
13633
15001
|
const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
|
|
13634
|
-
if
|
|
15002
|
+
// Only handle keyboard navigation if the event originated from a tab button
|
|
15003
|
+
// that belongs to THIS tabs component
|
|
15004
|
+
const target = ev.target;
|
|
15005
|
+
const targetTab = target.closest('pds-tab');
|
|
15006
|
+
// Check if the tab belongs to this tabs instance (not a nested one)
|
|
15007
|
+
const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;
|
|
15008
|
+
if (keySet.includes(ev.key) && isOwnTab) {
|
|
13635
15009
|
ev.preventDefault();
|
|
13636
15010
|
this.moveActiveTab(ev.key);
|
|
13637
15011
|
}
|
|
@@ -13660,8 +15034,12 @@ class PdsTabs {
|
|
|
13660
15034
|
this.activeTabIndex = moveFocusTo;
|
|
13661
15035
|
}
|
|
13662
15036
|
findAllChildren() {
|
|
13663
|
-
|
|
13664
|
-
|
|
15037
|
+
// Only select direct children tabs/tabpanels, not nested ones
|
|
15038
|
+
const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));
|
|
15039
|
+
const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));
|
|
15040
|
+
// Filter to only include tabs that belong to this tabs component (not nested)
|
|
15041
|
+
this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
|
|
15042
|
+
this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
|
|
13665
15043
|
}
|
|
13666
15044
|
propGeneration(child, index = 0) {
|
|
13667
15045
|
child.parentComponentId = this.componentId.toString();
|
|
@@ -13695,7 +15073,7 @@ class PdsTabs {
|
|
|
13695
15073
|
this.passPropsToChildren();
|
|
13696
15074
|
}
|
|
13697
15075
|
render() {
|
|
13698
|
-
return (hAsync(Host, { key: '
|
|
15076
|
+
return (hAsync(Host, { key: '89db4772ef4dab7f4dba38306b0fdf1ae55c8a9b', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, hAsync("div", { key: 'c1596be516168b0f2548b90344ad3bffcc5cb844', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, hAsync("slot", { key: 'be58f90ec895da67fc84eded670183151feb261f', name: "tabs" })), hAsync("slot", { key: '24d3bed1750d8b64a8ffc9c86f517b5e8b15f615', name: "tabpanels" })));
|
|
13699
15077
|
}
|
|
13700
15078
|
get el() { return getElement(this); }
|
|
13701
15079
|
static get style() { return pdsTabsCss; }
|
|
@@ -13738,7 +15116,7 @@ class PdsText {
|
|
|
13738
15116
|
${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
|
|
13739
15117
|
${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
|
|
13740
15118
|
`;
|
|
13741
|
-
return (hAsync(Tag, { key: '
|
|
15119
|
+
return (hAsync(Tag, { key: '101a42ae93ac81968a177c7e0d569417f376909c', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: '903b04a19b948e04d577c8585a76647033b9c36e' })));
|
|
13742
15120
|
}
|
|
13743
15121
|
get el() { return getElement(this); }
|
|
13744
15122
|
static get style() { return pdsTextCss; }
|
|
@@ -13766,7 +15144,7 @@ const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{c
|
|
|
13766
15144
|
|
|
13767
15145
|
const pdsInputTokensCss = ":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";
|
|
13768
15146
|
|
|
13769
|
-
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:
|
|
15147
|
+
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:var(--pine-z-index)}: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}";
|
|
13770
15148
|
|
|
13771
15149
|
/**
|
|
13772
15150
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
@@ -13779,6 +15157,7 @@ class PdsTextarea {
|
|
|
13779
15157
|
this.pdsInput = createEvent(this, "pdsInput");
|
|
13780
15158
|
this.pdsTextareaChange = createEvent(this, "pdsTextareaChange");
|
|
13781
15159
|
this.inheritedAttributes = {};
|
|
15160
|
+
this._type = 'textarea';
|
|
13782
15161
|
/**
|
|
13783
15162
|
* Determines whether or not the textarea is disabled.
|
|
13784
15163
|
* @defaultValue false
|
|
@@ -13942,6 +15321,8 @@ class PdsTextarea {
|
|
|
13942
15321
|
this.updateFormValue();
|
|
13943
15322
|
// Setup ResizeObserver for character counter positioning
|
|
13944
15323
|
this.setupResizeObserver();
|
|
15324
|
+
// Expose type property on the element instance to match native form element behavior
|
|
15325
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
13945
15326
|
}
|
|
13946
15327
|
/**
|
|
13947
15328
|
* Sets up ResizeObserver to track textarea resize for character counter positioning
|
|
@@ -14056,10 +15437,10 @@ class PdsTextarea {
|
|
|
14056
15437
|
}
|
|
14057
15438
|
render() {
|
|
14058
15439
|
const value = this.getValue();
|
|
14059
|
-
return (hAsync(Host, { key: '
|
|
14060
|
-
hAsync("div", { key: '
|
|
14061
|
-
hAsync("p", { key: '
|
|
14062
|
-
hAsync("p", { key: '
|
|
15440
|
+
return (hAsync(Host, { key: '5ca3fed52ff7fd0b0497d01412bb7ca3746b2e7e', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '3761f27f234f9667ce8dffc77c5ede89159afaea', class: "pds-textarea" }, this.label &&
|
|
15441
|
+
hAsync("div", { key: 'db533228166be7a303969703b2e92327e02e0b88', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '6e215f009e9297f5a1a415419f40064fd3168ad8', htmlFor: this.componentId }, hAsync("span", { key: 'b48b3427bfdff3cef0ed18799cf64547b7e77e97', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '23c4a2231dfd1b42e45d04f35e9dc2772d2df2fb', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '7081f83eacc8dd5fdef8774b3887eb6109281aa6', 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 &&
|
|
15442
|
+
hAsync("p", { key: '237e251d35403fc4225123ac56476b656ab9ad48', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
15443
|
+
hAsync("p", { key: 'f4102e758212c00074bfbd144d311fa4fedf5b49', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '92535a264a990ff133a1e6dde709236b3157b2d0', icon: danger, size: "small" }), this.errorMessage))));
|
|
14063
15444
|
}
|
|
14064
15445
|
static get formAssociated() { return true; }
|
|
14065
15446
|
get el() { return getElement(this); }
|
|
@@ -14181,13 +15562,13 @@ class PdsToast {
|
|
|
14181
15562
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
14182
15563
|
}
|
|
14183
15564
|
render() {
|
|
14184
|
-
return (hAsync(Host, { key: '
|
|
15565
|
+
return (hAsync(Host, { key: 'cf03483967a2414e2c6ee68587af609af0bb64c6', hidden: !this.isVisible }, hAsync("div", { key: '70413e3220f6890dd2367bc96a7060269a33124c', class: {
|
|
14185
15566
|
'pds-toast': true,
|
|
14186
15567
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
14187
15568
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
14188
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
15569
|
+
}, 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: () => {
|
|
14189
15570
|
this.dismiss();
|
|
14190
|
-
}, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: '
|
|
15571
|
+
}, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: '495a71b67c4a6690f4c1b9562ddd8862d88a85e4', name: "remove" }))))));
|
|
14191
15572
|
}
|
|
14192
15573
|
static get watchers() { return {
|
|
14193
15574
|
"duration": ["handleDurationChange"]
|
|
@@ -14212,7 +15593,7 @@ class PdsToast {
|
|
|
14212
15593
|
}; }
|
|
14213
15594
|
}
|
|
14214
15595
|
|
|
14215
|
-
const pdsTooltipCss = ".pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:
|
|
15596
|
+
const pdsTooltipCss = ".pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:var(--pine-z-index-raised)}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}";
|
|
14216
15597
|
|
|
14217
15598
|
/**
|
|
14218
15599
|
* @slot (default) - The tooltip's target element
|
|
@@ -14427,7 +15808,7 @@ class PdsTooltip {
|
|
|
14427
15808
|
this.portalEl = document.createElement('div');
|
|
14428
15809
|
this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
|
|
14429
15810
|
this.portalEl.style.position = 'fixed';
|
|
14430
|
-
this.portalEl.style.zIndex = '
|
|
15811
|
+
this.portalEl.style.zIndex = 'var(--pine-z-index-nuclear)';
|
|
14431
15812
|
if (this.portalEl.id === '') {
|
|
14432
15813
|
const suffix = PdsTooltip.instanceCounter++;
|
|
14433
15814
|
const baseId = this.componentId || this.el.id || 'pds-tooltip';
|
|
@@ -14527,9 +15908,9 @@ class PdsTooltip {
|
|
|
14527
15908
|
}
|
|
14528
15909
|
render() {
|
|
14529
15910
|
const hostId = this.componentId || undefined;
|
|
14530
|
-
return (hAsync(Host, { key: '
|
|
15911
|
+
return (hAsync(Host, { key: 'ef40605b8ed95b1920caa425a021b900bdaef847', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '953a0ddd6070fa99e89307f6ddb9bacfa6932b5c', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
14531
15912
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
14532
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
15913
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '9fa52468a1d99d4dd5af8a8c07d11b1591c5204c' })), hAsync("div", { key: 'c4dfe98893fc2abacff788177d1f143afb2aa502', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '468d06248f384f727517de3fd4c15af8d6e7b118', name: "content" }))));
|
|
14533
15914
|
}
|
|
14534
15915
|
get el() { return getElement(this); }
|
|
14535
15916
|
static get watchers() { return {
|
|
@@ -14573,6 +15954,8 @@ registerComponents([
|
|
|
14573
15954
|
PdsDropdownMenu,
|
|
14574
15955
|
PdsDropdownMenuItem,
|
|
14575
15956
|
PdsDropdownMenuSeparator,
|
|
15957
|
+
PdsFilter,
|
|
15958
|
+
PdsFilters,
|
|
14576
15959
|
PdsIcon,
|
|
14577
15960
|
PdsImage,
|
|
14578
15961
|
PdsInput,
|