@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.mjs
CHANGED
|
@@ -2448,6 +2448,9 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
|
2448
2448
|
}
|
|
2449
2449
|
};
|
|
2450
2450
|
var getHostListenerTarget = (doc, elm, flags) => {
|
|
2451
|
+
if (flags & 4 /* TargetDocument */) {
|
|
2452
|
+
return doc;
|
|
2453
|
+
}
|
|
2451
2454
|
if (flags & 8 /* TargetWindow */) {
|
|
2452
2455
|
return win;
|
|
2453
2456
|
}
|
|
@@ -3071,7 +3074,7 @@ var registerHost = (elm, cmpMeta) => {
|
|
|
3071
3074
|
};
|
|
3072
3075
|
var styles = /* @__PURE__ */ new Map();
|
|
3073
3076
|
|
|
3074
|
-
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:
|
|
3077
|
+
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}";
|
|
3075
3078
|
|
|
3076
3079
|
/**
|
|
3077
3080
|
* Mock PdsModal component for testing purposes
|
|
@@ -3151,7 +3154,7 @@ class MockPdsModal {
|
|
|
3151
3154
|
'pds-modal__backdrop': true,
|
|
3152
3155
|
'open': this.open,
|
|
3153
3156
|
};
|
|
3154
|
-
return (hAsync("div", { key: '
|
|
3157
|
+
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" })))));
|
|
3155
3158
|
}
|
|
3156
3159
|
get el() { return getElement(this); }
|
|
3157
3160
|
static get style() { return pdsModalCss$1; }
|
|
@@ -3173,8 +3176,9 @@ class MockPdsModal {
|
|
|
3173
3176
|
}; }
|
|
3174
3177
|
}
|
|
3175
3178
|
|
|
3176
|
-
/* pds-icons v9.
|
|
3179
|
+
/* pds-icons v9.9.0, ES Modules */
|
|
3177
3180
|
|
|
3181
|
+
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>";
|
|
3178
3182
|
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>";
|
|
3179
3183
|
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>";
|
|
3180
3184
|
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>";
|
|
@@ -3184,6 +3188,7 @@ const enlarge = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
|
|
|
3184
3188
|
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>";
|
|
3185
3189
|
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>";
|
|
3186
3190
|
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>";
|
|
3191
|
+
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>";
|
|
3187
3192
|
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>";
|
|
3188
3193
|
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>";
|
|
3189
3194
|
|
|
@@ -3759,7 +3764,7 @@ class PdsBox {
|
|
|
3759
3764
|
}; }
|
|
3760
3765
|
}
|
|
3761
3766
|
|
|
3762
|
-
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-
|
|
3767
|
+
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}";
|
|
3763
3768
|
|
|
3764
3769
|
/**
|
|
3765
3770
|
* @part button - Exposes the button element for styling.
|
|
@@ -3902,9 +3907,12 @@ class PdsButton {
|
|
|
3902
3907
|
return elements.length > 0;
|
|
3903
3908
|
}
|
|
3904
3909
|
renderStartContent() {
|
|
3905
|
-
const hasIcon = this.icon && this.variant !== 'disclosure';
|
|
3910
|
+
const hasIcon = this.icon && this.variant !== 'disclosure' && this.variant !== 'filter';
|
|
3906
3911
|
const hasStartSlot = this.hasSlotContent('start');
|
|
3907
|
-
if (
|
|
3912
|
+
if (this.variant === 'filter') {
|
|
3913
|
+
return (hAsync("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', icon: addCircle, part: "icon", "aria-hidden": "true" }));
|
|
3914
|
+
}
|
|
3915
|
+
else if (Boolean(hasIcon)) {
|
|
3908
3916
|
return (hAsync("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon", "aria-hidden": "true" }));
|
|
3909
3917
|
}
|
|
3910
3918
|
else if (Boolean(hasStartSlot)) {
|
|
@@ -3994,6 +4002,21 @@ const isRequired = (target, component) => {
|
|
|
3994
4002
|
(target.checkValidity() === false) ? component.invalid = true : component.invalid = false;
|
|
3995
4003
|
}
|
|
3996
4004
|
};
|
|
4005
|
+
/**
|
|
4006
|
+
* Exposes a readonly type property on a custom form element to match native form element behavior.
|
|
4007
|
+
* This makes the type property enumerable and accessible via element.type, matching native HTML elements.
|
|
4008
|
+
* The property is non-configurable, preventing it from being redefined or deleted at runtime.
|
|
4009
|
+
*
|
|
4010
|
+
* @param element - The custom element to add the type property to
|
|
4011
|
+
* @param type - The type value (string literal) or a getter function that returns the type
|
|
4012
|
+
*/
|
|
4013
|
+
function exposeTypeProperty(element, type) {
|
|
4014
|
+
Object.defineProperty(element, 'type', {
|
|
4015
|
+
get: typeof type === 'function' ? type : () => type,
|
|
4016
|
+
enumerable: true,
|
|
4017
|
+
configurable: false
|
|
4018
|
+
});
|
|
4019
|
+
}
|
|
3997
4020
|
|
|
3998
4021
|
/**
|
|
3999
4022
|
* Inherit attributes from the host element
|
|
@@ -4086,6 +4109,7 @@ class PdsCheckbox {
|
|
|
4086
4109
|
this.pdsCheckboxChange = createEvent(this, "pdsCheckboxChange");
|
|
4087
4110
|
this.pdsCheckboxInput = createEvent(this, "pdsCheckboxInput");
|
|
4088
4111
|
this.inheritedAttributes = {};
|
|
4112
|
+
this._type = 'checkbox';
|
|
4089
4113
|
/**
|
|
4090
4114
|
* It determines whether or not the checkbox is checked.
|
|
4091
4115
|
*/
|
|
@@ -4129,6 +4153,8 @@ class PdsCheckbox {
|
|
|
4129
4153
|
if (this.el.attachInternals) {
|
|
4130
4154
|
this.internals = this.el.attachInternals();
|
|
4131
4155
|
}
|
|
4156
|
+
// Expose type property on the element instance to match native form element behavior
|
|
4157
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
4132
4158
|
}
|
|
4133
4159
|
componentDidLoad() {
|
|
4134
4160
|
this.updateFormValue();
|
|
@@ -4165,9 +4191,9 @@ class PdsCheckbox {
|
|
|
4165
4191
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
4166
4192
|
}
|
|
4167
4193
|
render() {
|
|
4168
|
-
return (hAsync(Host, { key: '
|
|
4169
|
-
hAsync("div", { key: '
|
|
4170
|
-
hAsync("div", { key: '
|
|
4194
|
+
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 &&
|
|
4195
|
+
hAsync("div", { key: 'c781a27975cdd7c4361fa9d29a06f915633f52ba', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
4196
|
+
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)));
|
|
4171
4197
|
}
|
|
4172
4198
|
static get formAssociated() { return true; }
|
|
4173
4199
|
get el() { return getElement(this); }
|
|
@@ -4200,7 +4226,7 @@ class PdsCheckbox {
|
|
|
4200
4226
|
|
|
4201
4227
|
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)}";
|
|
4202
4228
|
|
|
4203
|
-
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:
|
|
4229
|
+
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)}";
|
|
4204
4230
|
|
|
4205
4231
|
/**
|
|
4206
4232
|
* @slot (default) - The chip's label text.
|
|
@@ -4266,7 +4292,7 @@ class PdsChip {
|
|
|
4266
4292
|
return chipContent;
|
|
4267
4293
|
}
|
|
4268
4294
|
render() {
|
|
4269
|
-
return (hAsync(Host, { key: '
|
|
4295
|
+
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 })))));
|
|
4270
4296
|
}
|
|
4271
4297
|
static get style() { return pdsChipTokensCss + pdsChipCss; }
|
|
4272
4298
|
static get cmpMeta() { return {
|
|
@@ -7114,7 +7140,7 @@ function createDOMPurify() {
|
|
|
7114
7140
|
}
|
|
7115
7141
|
var purify = createDOMPurify();
|
|
7116
7142
|
|
|
7117
|
-
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)}";
|
|
7143
|
+
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)}";
|
|
7118
7144
|
|
|
7119
7145
|
/**
|
|
7120
7146
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -7162,7 +7188,7 @@ class PdsCombobox {
|
|
|
7162
7188
|
*/
|
|
7163
7189
|
this.mode = 'filter';
|
|
7164
7190
|
/**
|
|
7165
|
-
* Determines the combobox trigger: 'input' (editable input)
|
|
7191
|
+
* Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
|
|
7166
7192
|
* @default 'input'
|
|
7167
7193
|
*/
|
|
7168
7194
|
this.trigger = 'input';
|
|
@@ -7176,14 +7202,33 @@ class PdsCombobox {
|
|
|
7176
7202
|
* @default 'secondary'
|
|
7177
7203
|
*/
|
|
7178
7204
|
this.triggerVariant = 'secondary';
|
|
7205
|
+
/**
|
|
7206
|
+
* The sentiment for the chip trigger. Matches Pine chip sentiments.
|
|
7207
|
+
* @default 'neutral'
|
|
7208
|
+
*/
|
|
7209
|
+
this.chipSentiment = 'neutral';
|
|
7210
|
+
/**
|
|
7211
|
+
* Whether the chip trigger should be displayed in a larger size.
|
|
7212
|
+
* @default false
|
|
7213
|
+
*/
|
|
7214
|
+
this.chipLarge = false;
|
|
7215
|
+
/**
|
|
7216
|
+
* Whether a dot should be displayed on the chip trigger.
|
|
7217
|
+
* @default false
|
|
7218
|
+
*/
|
|
7219
|
+
this.chipDot = false;
|
|
7179
7220
|
/**
|
|
7180
7221
|
* The value of the combobox input.
|
|
7181
7222
|
*/
|
|
7182
7223
|
this.value = '';
|
|
7183
7224
|
/**
|
|
7184
|
-
* Internal state for
|
|
7225
|
+
* Internal state for the display text shown in the input/trigger
|
|
7226
|
+
*/
|
|
7227
|
+
this.displayText = '';
|
|
7228
|
+
/**
|
|
7229
|
+
* Internal state for filtered options and group labels
|
|
7185
7230
|
*/
|
|
7186
|
-
this.
|
|
7231
|
+
this.filteredItems = [];
|
|
7187
7232
|
/**
|
|
7188
7233
|
* Internal state for the currently highlighted option index
|
|
7189
7234
|
*/
|
|
@@ -7200,45 +7245,143 @@ class PdsCombobox {
|
|
|
7200
7245
|
* Internal state for the sanitized layout content of the selected option
|
|
7201
7246
|
*/
|
|
7202
7247
|
this.selectedOptionLayoutContent = '';
|
|
7248
|
+
/**
|
|
7249
|
+
* Internal state to track chip properties for automatic rendering
|
|
7250
|
+
*/
|
|
7251
|
+
this.selectedOptionChipProps = null;
|
|
7203
7252
|
this.optionEls = [];
|
|
7253
|
+
this.allItems = [];
|
|
7254
|
+
this.isUpdatingFromSelection = false;
|
|
7204
7255
|
this.handleInput = (e) => {
|
|
7205
7256
|
const target = e.target;
|
|
7206
|
-
this.
|
|
7257
|
+
this.displayText = target.value;
|
|
7207
7258
|
this.isOpen = true;
|
|
7208
7259
|
this.filterOptions();
|
|
7209
7260
|
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7210
7261
|
};
|
|
7211
|
-
this.
|
|
7212
|
-
|
|
7213
|
-
this.
|
|
7214
|
-
|
|
7262
|
+
this.handleInputClick = () => {
|
|
7263
|
+
// Open dropdown when input is clicked (but not when tabbed into)
|
|
7264
|
+
if (!this.isOpen) {
|
|
7265
|
+
this.isOpen = true;
|
|
7266
|
+
this.filterOptions();
|
|
7267
|
+
this.setInitialHighlightedIndex();
|
|
7268
|
+
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7269
|
+
}
|
|
7215
7270
|
};
|
|
7216
7271
|
this.handleKeyDown = (e) => {
|
|
7217
|
-
if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
7272
|
+
if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.altKey && e.key === 'ArrowDown'))) {
|
|
7273
|
+
e.preventDefault();
|
|
7218
7274
|
this.isOpen = true;
|
|
7275
|
+
this.filterOptions();
|
|
7276
|
+
// Set highlighted index immediately for testing
|
|
7277
|
+
this.setInitialHighlightedIndex();
|
|
7278
|
+
setTimeout(() => {
|
|
7279
|
+
this.openDropdownPositioning();
|
|
7280
|
+
// For input trigger, keep focus on input and use aria-activedescendant
|
|
7281
|
+
// For button trigger, move focus to first option for keyboard navigation
|
|
7282
|
+
if (this.trigger === 'input') {
|
|
7283
|
+
this.focusFirstOption();
|
|
7284
|
+
}
|
|
7285
|
+
else {
|
|
7286
|
+
this.focusFirstOptionForArrowKeys();
|
|
7287
|
+
}
|
|
7288
|
+
}, 0);
|
|
7289
|
+
return;
|
|
7290
|
+
}
|
|
7291
|
+
if (!this.isOpen) {
|
|
7219
7292
|
return;
|
|
7220
7293
|
}
|
|
7294
|
+
// Get only the option elements (skip group labels) for navigation
|
|
7295
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7221
7296
|
switch (e.key) {
|
|
7222
7297
|
case 'ArrowDown':
|
|
7223
|
-
|
|
7298
|
+
e.preventDefault();
|
|
7299
|
+
// If no option is highlighted and we have options, start at 0
|
|
7300
|
+
if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
|
|
7301
|
+
this.highlightedIndex = 0;
|
|
7302
|
+
}
|
|
7303
|
+
else {
|
|
7304
|
+
this.highlightedIndex = Math.min(this.highlightedIndex + 1, selectableOptions.length - 1);
|
|
7305
|
+
}
|
|
7306
|
+
this.updateOptionFocus();
|
|
7224
7307
|
break;
|
|
7225
7308
|
case 'ArrowUp':
|
|
7226
|
-
|
|
7309
|
+
e.preventDefault();
|
|
7310
|
+
// If no option is highlighted and we have options, start at last option
|
|
7311
|
+
if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
|
|
7312
|
+
this.highlightedIndex = selectableOptions.length - 1;
|
|
7313
|
+
}
|
|
7314
|
+
else {
|
|
7315
|
+
this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
|
|
7316
|
+
}
|
|
7317
|
+
this.updateOptionFocus();
|
|
7318
|
+
break;
|
|
7319
|
+
case 'Home':
|
|
7320
|
+
e.preventDefault();
|
|
7321
|
+
if (selectableOptions.length > 0) {
|
|
7322
|
+
this.highlightedIndex = 0;
|
|
7323
|
+
this.updateOptionFocus();
|
|
7324
|
+
}
|
|
7325
|
+
break;
|
|
7326
|
+
case 'End':
|
|
7327
|
+
e.preventDefault();
|
|
7328
|
+
if (selectableOptions.length > 0) {
|
|
7329
|
+
this.highlightedIndex = selectableOptions.length - 1;
|
|
7330
|
+
this.updateOptionFocus();
|
|
7331
|
+
}
|
|
7332
|
+
break;
|
|
7333
|
+
case 'PageDown':
|
|
7334
|
+
e.preventDefault();
|
|
7335
|
+
if (selectableOptions.length > 0) {
|
|
7336
|
+
const nextIndex = Math.min(this.highlightedIndex + 10, selectableOptions.length - 1);
|
|
7337
|
+
this.highlightedIndex = nextIndex;
|
|
7338
|
+
this.updateOptionFocus();
|
|
7339
|
+
}
|
|
7340
|
+
break;
|
|
7341
|
+
case 'PageUp':
|
|
7342
|
+
e.preventDefault();
|
|
7343
|
+
if (selectableOptions.length > 0) {
|
|
7344
|
+
const prevIndex = Math.max(this.highlightedIndex - 10, 0);
|
|
7345
|
+
this.highlightedIndex = prevIndex;
|
|
7346
|
+
this.updateOptionFocus();
|
|
7347
|
+
}
|
|
7227
7348
|
break;
|
|
7228
7349
|
case 'Enter':
|
|
7229
|
-
|
|
7230
|
-
|
|
7350
|
+
e.preventDefault();
|
|
7351
|
+
if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
|
|
7352
|
+
this.handleOptionClick(selectableOptions[this.highlightedIndex]);
|
|
7353
|
+
this.restoreFocusToTrigger();
|
|
7354
|
+
}
|
|
7355
|
+
break;
|
|
7356
|
+
case ' ':
|
|
7357
|
+
e.preventDefault();
|
|
7358
|
+
if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
|
|
7359
|
+
this.handleOptionClick(selectableOptions[this.highlightedIndex]);
|
|
7360
|
+
this.restoreFocusToTrigger();
|
|
7231
7361
|
}
|
|
7232
7362
|
break;
|
|
7233
7363
|
case 'Escape':
|
|
7364
|
+
e.preventDefault();
|
|
7234
7365
|
this.isOpen = false;
|
|
7366
|
+
this.highlightedIndex = -1;
|
|
7367
|
+
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7368
|
+
this.restoreFocusToTrigger();
|
|
7369
|
+
break;
|
|
7370
|
+
case 'Tab':
|
|
7371
|
+
// Allow normal tab behavior to close dropdown and move focus
|
|
7372
|
+
this.isOpen = false;
|
|
7373
|
+
this.highlightedIndex = -1;
|
|
7374
|
+
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7235
7375
|
break;
|
|
7236
7376
|
}
|
|
7237
7377
|
};
|
|
7378
|
+
// Track if we're in arrow-key navigation mode (focus should move between options)
|
|
7379
|
+
this.isArrowKeyNavigationMode = false;
|
|
7238
7380
|
// Event handler for option click
|
|
7239
7381
|
this.onOptionClick = (event) => {
|
|
7240
7382
|
const idx = Number(event.currentTarget.getAttribute('data-option-index'));
|
|
7241
|
-
const
|
|
7383
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7384
|
+
const option = selectableOptions[idx];
|
|
7242
7385
|
this.handleOptionClick(option);
|
|
7243
7386
|
};
|
|
7244
7387
|
// Event handler for mouse enter on option
|
|
@@ -7250,58 +7393,233 @@ class PdsCombobox {
|
|
|
7250
7393
|
this.onOptionMouseDown = (event) => {
|
|
7251
7394
|
event.preventDefault();
|
|
7252
7395
|
};
|
|
7396
|
+
// Event handler for option keyboard events
|
|
7397
|
+
this.onOptionKeyDown = (event) => {
|
|
7398
|
+
// Delegate to main keyboard handler
|
|
7399
|
+
this.handleKeyDown(event);
|
|
7400
|
+
};
|
|
7253
7401
|
// Handler for button trigger click
|
|
7254
7402
|
this.onButtonTriggerClick = () => {
|
|
7255
7403
|
this.isOpen = !this.isOpen;
|
|
7256
|
-
if (this.isOpen)
|
|
7404
|
+
if (this.isOpen) {
|
|
7405
|
+
this.filterOptions();
|
|
7406
|
+
// Set highlighted index and prepare for keyboard navigation
|
|
7407
|
+
this.setInitialHighlightedIndex();
|
|
7408
|
+
// For button trigger, prepare for arrow-key navigation mode
|
|
7409
|
+
this.isArrowKeyNavigationMode = true;
|
|
7257
7410
|
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7411
|
+
}
|
|
7412
|
+
else {
|
|
7413
|
+
// Reset navigation mode when closing
|
|
7414
|
+
this.isArrowKeyNavigationMode = false;
|
|
7415
|
+
}
|
|
7258
7416
|
};
|
|
7259
7417
|
// Handler for button trigger keyboard events
|
|
7260
7418
|
this.onButtonTriggerKeyDown = (e) => {
|
|
7261
|
-
if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
|
|
7419
|
+
if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown' || e.key === 'ArrowUp') && !this.isOpen) {
|
|
7262
7420
|
e.preventDefault();
|
|
7421
|
+
e.stopPropagation(); // Prevent the event from bubbling and triggering click
|
|
7263
7422
|
this.isOpen = true;
|
|
7264
|
-
this.
|
|
7265
|
-
|
|
7423
|
+
this.filterOptions();
|
|
7424
|
+
// Set highlighted index immediately
|
|
7425
|
+
this.setInitialHighlightedIndex();
|
|
7426
|
+
setTimeout(() => {
|
|
7427
|
+
this.openDropdownPositioning();
|
|
7428
|
+
// For all button trigger keyboard opening, focus the first option so subsequent navigation works
|
|
7429
|
+
this.focusFirstOptionForArrowKeys();
|
|
7430
|
+
}, 0);
|
|
7266
7431
|
}
|
|
7267
7432
|
else if (e.key === 'Escape') {
|
|
7268
|
-
|
|
7433
|
+
e.preventDefault();
|
|
7434
|
+
if (this.isOpen) {
|
|
7435
|
+
this.isOpen = false;
|
|
7436
|
+
this.highlightedIndex = -1;
|
|
7437
|
+
this.updateAriaActiveDescendant(); // Clear aria-activedescendant
|
|
7438
|
+
this.restoreFocusToTrigger();
|
|
7439
|
+
}
|
|
7440
|
+
}
|
|
7441
|
+
else if (this.isOpen) {
|
|
7442
|
+
// Delegate other keys to main keyboard handler when dropdown is open
|
|
7443
|
+
this.handleKeyDown(e);
|
|
7444
|
+
}
|
|
7445
|
+
};
|
|
7446
|
+
// Handler for button trigger keyup events - prevents space key from triggering synthetic click
|
|
7447
|
+
this.onButtonTriggerKeyUp = (e) => {
|
|
7448
|
+
if (e.key === ' ') {
|
|
7449
|
+
e.preventDefault();
|
|
7450
|
+
e.stopPropagation();
|
|
7269
7451
|
}
|
|
7270
7452
|
};
|
|
7271
7453
|
// Close dropdown when focus leaves the combobox
|
|
7272
7454
|
this.onComboboxFocusOut = (event) => {
|
|
7455
|
+
var _a;
|
|
7273
7456
|
const relatedTarget = event.relatedTarget;
|
|
7274
|
-
if (
|
|
7457
|
+
// Check if the related target is within our shadow DOM (listbox options)
|
|
7458
|
+
const isRelatedTargetInListbox = relatedTarget && ((_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget));
|
|
7459
|
+
const isRelatedTargetInCombobox = this.el.contains(relatedTarget);
|
|
7460
|
+
// Don't close if focus is moving to an option in the listbox or staying within the combobox
|
|
7461
|
+
if (!isRelatedTargetInCombobox && !isRelatedTargetInListbox) {
|
|
7275
7462
|
this.isOpen = false;
|
|
7276
|
-
|
|
7277
|
-
|
|
7278
|
-
|
|
7463
|
+
this.highlightedIndex = -1;
|
|
7464
|
+
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7465
|
+
this.updateAriaActiveDescendant(); // Clear aria-activedescendant
|
|
7466
|
+
// If there's a selected option but the display text doesn't match, restore the selected option's display text
|
|
7467
|
+
if (this.selectedOption && this.displayText !== this.getOptionLabel(this.selectedOption)) {
|
|
7468
|
+
this.displayText = this.getOptionLabel(this.selectedOption);
|
|
7469
|
+
// The @Watch('selectedOption') will handle value and form internals if needed
|
|
7279
7470
|
}
|
|
7280
7471
|
}
|
|
7281
7472
|
};
|
|
7282
7473
|
}
|
|
7474
|
+
connectedCallback() {
|
|
7475
|
+
// Initialize ElementInternals for form association
|
|
7476
|
+
if (this.el.attachInternals) {
|
|
7477
|
+
this.internals = this.el.attachInternals();
|
|
7478
|
+
}
|
|
7479
|
+
}
|
|
7283
7480
|
componentWillLoad() {
|
|
7284
7481
|
this.updateOptions();
|
|
7285
7482
|
}
|
|
7483
|
+
componentDidLoad() {
|
|
7484
|
+
var _a, _b, _c;
|
|
7485
|
+
// Check for value-based preselection if no option is selected yet
|
|
7486
|
+
if (!this.selectedOption && this.value && this.optionEls.length > 0) {
|
|
7487
|
+
const matchingOption = this.optionEls.find(opt => opt.value === this.value);
|
|
7488
|
+
if (matchingOption) {
|
|
7489
|
+
this.setSelectedOption(matchingOption);
|
|
7490
|
+
// Update the display text to show the option's text content
|
|
7491
|
+
this.displayText = this.getOptionLabel(matchingOption);
|
|
7492
|
+
// Keep this.value as the actual option value
|
|
7493
|
+
// this.value remains unchanged (already matches matchingOption.value)
|
|
7494
|
+
}
|
|
7495
|
+
}
|
|
7496
|
+
// Initialize form value with current value
|
|
7497
|
+
if (this.internals) {
|
|
7498
|
+
try {
|
|
7499
|
+
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 : '');
|
|
7500
|
+
}
|
|
7501
|
+
catch (e) {
|
|
7502
|
+
// ElementInternals.setFormValue not available in unit tests
|
|
7503
|
+
}
|
|
7504
|
+
}
|
|
7505
|
+
}
|
|
7286
7506
|
handleValueChange() {
|
|
7287
7507
|
this.filterOptions();
|
|
7508
|
+
// Sync with form internals for form association
|
|
7509
|
+
if (this.internals) {
|
|
7510
|
+
try {
|
|
7511
|
+
this.internals.setFormValue(this.value);
|
|
7512
|
+
}
|
|
7513
|
+
catch (e) {
|
|
7514
|
+
// ElementInternals.setFormValue not available in unit tests
|
|
7515
|
+
}
|
|
7516
|
+
}
|
|
7517
|
+
// Find and select option that matches the value (for external value changes)
|
|
7518
|
+
// Only do this if we're not already updating from a selection
|
|
7519
|
+
if (!this.isUpdatingFromSelection && this.value && this.optionEls.length > 0) {
|
|
7520
|
+
const currentSelectedValue = this.selectedOption ? this.selectedOption.value : null;
|
|
7521
|
+
// If the value doesn't match the currently selected option's value, we need to update
|
|
7522
|
+
if (this.value !== currentSelectedValue) {
|
|
7523
|
+
const matchingOption = this.optionEls.find(opt => opt.value === this.value);
|
|
7524
|
+
if (matchingOption) {
|
|
7525
|
+
this.isUpdatingFromSelection = true;
|
|
7526
|
+
this.setSelectedOption(matchingOption);
|
|
7527
|
+
// Update the display text to show the option's text content
|
|
7528
|
+
this.displayText = this.getOptionLabel(matchingOption);
|
|
7529
|
+
// Keep this.value as the actual option value (already correct)
|
|
7530
|
+
this.isUpdatingFromSelection = false;
|
|
7531
|
+
}
|
|
7532
|
+
}
|
|
7533
|
+
}
|
|
7288
7534
|
}
|
|
7289
7535
|
handleSelectedOptionChange() {
|
|
7290
7536
|
// Update the layout content when selected option changes
|
|
7291
7537
|
this.selectedOptionLayoutContent = this.selectedOption && this.isOptionLayout(this.selectedOption)
|
|
7292
7538
|
? this.getOptionLayoutContent(this.selectedOption)
|
|
7293
7539
|
: '';
|
|
7540
|
+
// Update chip properties for automatic rendering when selected option changes
|
|
7541
|
+
this.selectedOptionChipProps = this.selectedOption && this.isOptionChip(this.selectedOption)
|
|
7542
|
+
? this.getOptionChipProps(this.selectedOption)
|
|
7543
|
+
: null;
|
|
7544
|
+
// Update display text when selected option changes
|
|
7545
|
+
if (this.selectedOption) {
|
|
7546
|
+
this.displayText = this.getOptionLabel(this.selectedOption);
|
|
7547
|
+
this.value = this.selectedOption.value;
|
|
7548
|
+
// Update form internals with the actual option value
|
|
7549
|
+
if (this.internals) {
|
|
7550
|
+
try {
|
|
7551
|
+
this.internals.setFormValue(this.selectedOption.value);
|
|
7552
|
+
}
|
|
7553
|
+
catch (e) {
|
|
7554
|
+
// ElementInternals.setFormValue not available in unit tests
|
|
7555
|
+
}
|
|
7556
|
+
}
|
|
7557
|
+
}
|
|
7558
|
+
else {
|
|
7559
|
+
this.displayText = '';
|
|
7560
|
+
this.value = '';
|
|
7561
|
+
if (this.internals) {
|
|
7562
|
+
try {
|
|
7563
|
+
this.internals.setFormValue('');
|
|
7564
|
+
}
|
|
7565
|
+
catch (e) {
|
|
7566
|
+
// ElementInternals.setFormValue not available in unit tests
|
|
7567
|
+
}
|
|
7568
|
+
}
|
|
7569
|
+
}
|
|
7294
7570
|
}
|
|
7295
7571
|
updateOptions() {
|
|
7296
7572
|
var _a;
|
|
7297
|
-
// Get all
|
|
7573
|
+
// Get all elements from the slot
|
|
7298
7574
|
const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="option"], slot:not([name])');
|
|
7299
7575
|
if (slot) {
|
|
7300
|
-
|
|
7301
|
-
|
|
7302
|
-
|
|
7303
|
-
|
|
7304
|
-
|
|
7576
|
+
const allElements = slot.assignedElements({ flatten: true });
|
|
7577
|
+
// Separate options from group labels and flatten optgroups
|
|
7578
|
+
this.allItems = [];
|
|
7579
|
+
this.optionEls = [];
|
|
7580
|
+
allElements.forEach(el => {
|
|
7581
|
+
if (el.tagName === 'OPTION') {
|
|
7582
|
+
this.optionEls.push(el);
|
|
7583
|
+
this.allItems.push(el);
|
|
7584
|
+
}
|
|
7585
|
+
else if (el.tagName === 'OPTGROUP') {
|
|
7586
|
+
const optgroup = el;
|
|
7587
|
+
this.allItems.push(optgroup);
|
|
7588
|
+
// Add optgroup children (options)
|
|
7589
|
+
Array.from(optgroup.children).forEach(child => {
|
|
7590
|
+
if (child.tagName === 'OPTION') {
|
|
7591
|
+
this.optionEls.push(child);
|
|
7592
|
+
this.allItems.push(child);
|
|
7593
|
+
}
|
|
7594
|
+
});
|
|
7595
|
+
}
|
|
7596
|
+
else if (el.tagName === 'PDS-TEXT') {
|
|
7597
|
+
this.allItems.push(el);
|
|
7598
|
+
}
|
|
7599
|
+
});
|
|
7600
|
+
// Set initial selected option based on value property
|
|
7601
|
+
let initialSelected = null;
|
|
7602
|
+
// Check if value property matches any option
|
|
7603
|
+
if (this.value) {
|
|
7604
|
+
initialSelected = this.optionEls.find(opt => opt.value === this.value) || null;
|
|
7605
|
+
if (initialSelected) {
|
|
7606
|
+
// Update the display text to show the option's text content
|
|
7607
|
+
this.displayText = this.getOptionLabel(initialSelected);
|
|
7608
|
+
// Keep this.value as the actual option value (already correct)
|
|
7609
|
+
}
|
|
7610
|
+
}
|
|
7611
|
+
// For chip triggers, ensure we always have a selected option
|
|
7612
|
+
if (!initialSelected && this.trigger === 'chip' && this.optionEls.length > 0) {
|
|
7613
|
+
initialSelected = this.optionEls[0]; // Select first option as default
|
|
7614
|
+
this.value = initialSelected.value;
|
|
7615
|
+
this.displayText = this.getOptionLabel(initialSelected);
|
|
7616
|
+
console.warn('PDS Combobox: Chip triggers should always have a selected option. Automatically selected the first option.');
|
|
7617
|
+
}
|
|
7618
|
+
// Update selection if we found a different selected option or if we don't have one
|
|
7619
|
+
if (initialSelected && initialSelected !== this.selectedOption) {
|
|
7620
|
+
this.setSelectedOption(initialSelected);
|
|
7621
|
+
}
|
|
7622
|
+
else if (!this.selectedOption && initialSelected) {
|
|
7305
7623
|
this.setSelectedOption(initialSelected);
|
|
7306
7624
|
}
|
|
7307
7625
|
this.filterOptions();
|
|
@@ -7351,6 +7669,22 @@ class PdsCombobox {
|
|
|
7351
7669
|
isOptionLayout(option) {
|
|
7352
7670
|
return this.customOptionLayouts && option.hasAttribute('data-layout');
|
|
7353
7671
|
}
|
|
7672
|
+
// Helper method to check if option has chip attributes (new automatic approach)
|
|
7673
|
+
isOptionChip(option) {
|
|
7674
|
+
return option.hasAttribute('chip-sentiment') ||
|
|
7675
|
+
option.hasAttribute('chip-large') ||
|
|
7676
|
+
option.hasAttribute('chip-icon') ||
|
|
7677
|
+
option.hasAttribute('chip-dot');
|
|
7678
|
+
}
|
|
7679
|
+
// Helper method to get chip properties from option attributes
|
|
7680
|
+
getOptionChipProps(option) {
|
|
7681
|
+
return {
|
|
7682
|
+
sentiment: option.getAttribute('chip-sentiment') || 'neutral',
|
|
7683
|
+
large: option.hasAttribute('chip-large'),
|
|
7684
|
+
icon: option.getAttribute('chip-icon') || undefined,
|
|
7685
|
+
dot: option.hasAttribute('chip-dot')
|
|
7686
|
+
};
|
|
7687
|
+
}
|
|
7354
7688
|
// Helper method to check if option is selected (single source of truth)
|
|
7355
7689
|
isOptionSelected(option) {
|
|
7356
7690
|
return this.selectedOption === option;
|
|
@@ -7358,14 +7692,25 @@ class PdsCombobox {
|
|
|
7358
7692
|
// Helper method to set selected option (centralized state management)
|
|
7359
7693
|
setSelectedOption(option) {
|
|
7360
7694
|
this.selectedOption = option;
|
|
7695
|
+
// Immediately update chip properties for automatic rendering to ensure reactivity
|
|
7696
|
+
if (option && this.isOptionChip(option)) {
|
|
7697
|
+
this.selectedOptionChipProps = this.getOptionChipProps(option);
|
|
7698
|
+
}
|
|
7699
|
+
else {
|
|
7700
|
+
this.selectedOptionChipProps = null;
|
|
7701
|
+
}
|
|
7361
7702
|
}
|
|
7362
7703
|
filterOptions() {
|
|
7704
|
+
// Ensure allItems includes optionEls if not already populated (for edge cases)
|
|
7705
|
+
if (this.allItems.length === 0 && this.optionEls.length > 0) {
|
|
7706
|
+
this.allItems = [...this.optionEls];
|
|
7707
|
+
}
|
|
7363
7708
|
if (this.mode === 'select-only') {
|
|
7364
|
-
this.
|
|
7709
|
+
this.filteredItems = [...this.allItems];
|
|
7365
7710
|
}
|
|
7366
7711
|
else {
|
|
7367
|
-
const val = this.
|
|
7368
|
-
|
|
7712
|
+
const val = this.displayText.toLowerCase();
|
|
7713
|
+
const filteredOptions = this.optionEls.filter(option => {
|
|
7369
7714
|
// For layout options, search both text content and data-search-text attribute
|
|
7370
7715
|
if (this.isOptionLayout(option)) {
|
|
7371
7716
|
const searchText = option.getAttribute('data-search-text') || option.textContent || '';
|
|
@@ -7373,6 +7718,31 @@ class PdsCombobox {
|
|
|
7373
7718
|
}
|
|
7374
7719
|
return this.getOptionLabel(option).toLowerCase().includes(val);
|
|
7375
7720
|
});
|
|
7721
|
+
// Rebuild filtered items maintaining group structure - simplified approach
|
|
7722
|
+
this.filteredItems = [];
|
|
7723
|
+
let currentGroupLabel = null;
|
|
7724
|
+
this.allItems.forEach(item => {
|
|
7725
|
+
if (item.tagName === 'OPTGROUP' || item.tagName === 'PDS-TEXT') {
|
|
7726
|
+
currentGroupLabel = item;
|
|
7727
|
+
}
|
|
7728
|
+
else if (item.tagName === 'OPTION' && filteredOptions.includes(item)) {
|
|
7729
|
+
const optionEl = item;
|
|
7730
|
+
const parent = optionEl.parentElement;
|
|
7731
|
+
let labelToUse = null;
|
|
7732
|
+
if (parent && parent.tagName === 'OPTGROUP') {
|
|
7733
|
+
// Only use the actual parent optgroup as label
|
|
7734
|
+
labelToUse = parent;
|
|
7735
|
+
}
|
|
7736
|
+
else if (currentGroupLabel && currentGroupLabel.tagName === 'PDS-TEXT') {
|
|
7737
|
+
// Allow pds-text to label subsequent top-level options until another label appears
|
|
7738
|
+
labelToUse = currentGroupLabel;
|
|
7739
|
+
}
|
|
7740
|
+
if (labelToUse && !this.filteredItems.includes(labelToUse)) {
|
|
7741
|
+
this.filteredItems.push(labelToUse);
|
|
7742
|
+
}
|
|
7743
|
+
this.filteredItems.push(optionEl);
|
|
7744
|
+
}
|
|
7745
|
+
});
|
|
7376
7746
|
}
|
|
7377
7747
|
this.highlightedIndex = -1;
|
|
7378
7748
|
}
|
|
@@ -7393,7 +7763,7 @@ class PdsCombobox {
|
|
|
7393
7763
|
left: `${x}px`,
|
|
7394
7764
|
top: `${y}px`,
|
|
7395
7765
|
position: 'absolute',
|
|
7396
|
-
zIndex:
|
|
7766
|
+
zIndex: 'var(--pine-z-index-raised)',
|
|
7397
7767
|
});
|
|
7398
7768
|
});
|
|
7399
7769
|
}
|
|
@@ -7403,7 +7773,130 @@ class PdsCombobox {
|
|
|
7403
7773
|
*/
|
|
7404
7774
|
async setFocus() {
|
|
7405
7775
|
var _a;
|
|
7406
|
-
(
|
|
7776
|
+
if (this.inputEl) {
|
|
7777
|
+
this.inputEl.focus();
|
|
7778
|
+
}
|
|
7779
|
+
else {
|
|
7780
|
+
(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
7781
|
+
}
|
|
7782
|
+
}
|
|
7783
|
+
/**
|
|
7784
|
+
* Sets the initial highlighted index when dropdown opens.
|
|
7785
|
+
* If there's a selected option, highlight it. Otherwise, highlight the first option.
|
|
7786
|
+
*/
|
|
7787
|
+
setInitialHighlightedIndex() {
|
|
7788
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7789
|
+
if (selectableOptions.length === 0) {
|
|
7790
|
+
this.highlightedIndex = -1;
|
|
7791
|
+
return;
|
|
7792
|
+
}
|
|
7793
|
+
// If there's a selected option, find its index in the filtered options
|
|
7794
|
+
if (this.selectedOption) {
|
|
7795
|
+
const selectedIndex = selectableOptions.findIndex(option => option === this.selectedOption);
|
|
7796
|
+
if (selectedIndex >= 0) {
|
|
7797
|
+
this.highlightedIndex = selectedIndex;
|
|
7798
|
+
return;
|
|
7799
|
+
}
|
|
7800
|
+
}
|
|
7801
|
+
// No selected option or selected option not in filtered results, highlight first option
|
|
7802
|
+
this.highlightedIndex = 0;
|
|
7803
|
+
}
|
|
7804
|
+
/**
|
|
7805
|
+
* Focus management helper - moves focus to the first option when dropdown opens
|
|
7806
|
+
*/
|
|
7807
|
+
focusFirstOption() {
|
|
7808
|
+
if (this.isOpen) {
|
|
7809
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7810
|
+
if (selectableOptions.length > 0) {
|
|
7811
|
+
this.setInitialHighlightedIndex();
|
|
7812
|
+
// DON'T focus the option elements - keep focus on trigger and use aria-activedescendant
|
|
7813
|
+
// This prevents the focusout event that was closing the dropdown
|
|
7814
|
+
// But still call updateOptionFocus for scrolling
|
|
7815
|
+
if (this.listboxEl) {
|
|
7816
|
+
this.updateOptionFocus();
|
|
7817
|
+
}
|
|
7818
|
+
}
|
|
7819
|
+
}
|
|
7820
|
+
}
|
|
7821
|
+
/**
|
|
7822
|
+
* Focus management helper - actually focuses the first option when opened via arrow keys
|
|
7823
|
+
*/
|
|
7824
|
+
focusFirstOptionForArrowKeys() {
|
|
7825
|
+
if (this.isOpen) {
|
|
7826
|
+
// Set arrow-key navigation mode
|
|
7827
|
+
this.isArrowKeyNavigationMode = true;
|
|
7828
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7829
|
+
if (selectableOptions.length > 0) {
|
|
7830
|
+
this.setInitialHighlightedIndex();
|
|
7831
|
+
// For arrow key navigation, actually focus the highlighted option
|
|
7832
|
+
if (this.listboxEl) {
|
|
7833
|
+
const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
|
|
7834
|
+
const highlightedOption = optionElements[this.highlightedIndex];
|
|
7835
|
+
if (highlightedOption) {
|
|
7836
|
+
// Remove tabindex from all options first
|
|
7837
|
+
optionElements.forEach(option => {
|
|
7838
|
+
option.setAttribute('tabindex', '-1');
|
|
7839
|
+
});
|
|
7840
|
+
// Set tabindex and focus on highlighted option
|
|
7841
|
+
highlightedOption.setAttribute('tabindex', '0');
|
|
7842
|
+
highlightedOption.focus();
|
|
7843
|
+
highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
7844
|
+
}
|
|
7845
|
+
}
|
|
7846
|
+
// Update aria-activedescendant on trigger
|
|
7847
|
+
this.updateAriaActiveDescendant();
|
|
7848
|
+
}
|
|
7849
|
+
}
|
|
7850
|
+
}
|
|
7851
|
+
/**
|
|
7852
|
+
* Focus management helper - updates visual state and scrolling for the currently highlighted option
|
|
7853
|
+
* Note: We don't actually focus the option to prevent focusout events that close the dropdown
|
|
7854
|
+
*/
|
|
7855
|
+
updateOptionFocus() {
|
|
7856
|
+
if (!this.listboxEl || this.highlightedIndex < 0)
|
|
7857
|
+
return;
|
|
7858
|
+
const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
|
|
7859
|
+
const currentOption = optionElements[this.highlightedIndex];
|
|
7860
|
+
if (currentOption) {
|
|
7861
|
+
// Check if any option currently has focus OR if we're in arrow-key navigation mode
|
|
7862
|
+
const hasOptionFocus = Array.from(optionElements).some(el => el === document.activeElement);
|
|
7863
|
+
if (hasOptionFocus || this.isArrowKeyNavigationMode) {
|
|
7864
|
+
// We're in arrow-key navigation mode, so actually move focus between options
|
|
7865
|
+
optionElements.forEach(option => {
|
|
7866
|
+
option.setAttribute('tabindex', '-1');
|
|
7867
|
+
});
|
|
7868
|
+
currentOption.setAttribute('tabindex', '0');
|
|
7869
|
+
currentOption.focus();
|
|
7870
|
+
}
|
|
7871
|
+
// Always scroll the option into view
|
|
7872
|
+
currentOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
7873
|
+
}
|
|
7874
|
+
// Always update aria-activedescendant on the trigger element
|
|
7875
|
+
this.updateAriaActiveDescendant();
|
|
7876
|
+
}
|
|
7877
|
+
/**
|
|
7878
|
+
* Updates aria-activedescendant on the trigger element
|
|
7879
|
+
*/
|
|
7880
|
+
updateAriaActiveDescendant() {
|
|
7881
|
+
if (this.triggerEl && this.highlightedIndex >= 0) {
|
|
7882
|
+
this.triggerEl.setAttribute('aria-activedescendant', `pds-combobox-option-${this.highlightedIndex}`);
|
|
7883
|
+
}
|
|
7884
|
+
else if (this.triggerEl) {
|
|
7885
|
+
this.triggerEl.removeAttribute('aria-activedescendant');
|
|
7886
|
+
}
|
|
7887
|
+
}
|
|
7888
|
+
/**
|
|
7889
|
+
* Focus management helper - restores focus to the trigger element
|
|
7890
|
+
*/
|
|
7891
|
+
restoreFocusToTrigger() {
|
|
7892
|
+
setTimeout(() => {
|
|
7893
|
+
if (this.inputEl) {
|
|
7894
|
+
this.inputEl.focus();
|
|
7895
|
+
}
|
|
7896
|
+
else if (this.triggerEl) {
|
|
7897
|
+
this.triggerEl.focus();
|
|
7898
|
+
}
|
|
7899
|
+
}, 0);
|
|
7407
7900
|
}
|
|
7408
7901
|
/**
|
|
7409
7902
|
* Gets the value of the currently selected option.
|
|
@@ -7413,7 +7906,7 @@ class PdsCombobox {
|
|
|
7413
7906
|
}
|
|
7414
7907
|
// Get the label of the selected option
|
|
7415
7908
|
get selectedLabel() {
|
|
7416
|
-
return this.
|
|
7909
|
+
return this.displayText || '';
|
|
7417
7910
|
}
|
|
7418
7911
|
// Get the layout content of the selected option for button trigger
|
|
7419
7912
|
get selectedLayoutContent() {
|
|
@@ -7423,30 +7916,148 @@ class PdsCombobox {
|
|
|
7423
7916
|
get selectedHasLayout() {
|
|
7424
7917
|
return this.selectedOption ? this.isOptionLayout(this.selectedOption) : false;
|
|
7425
7918
|
}
|
|
7919
|
+
// Extract chip sentiment from selected option's attributes, layout content, or slotted trigger content
|
|
7920
|
+
get selectedChipSentiment() {
|
|
7921
|
+
// First priority: Check selected option's chip attributes (new automatic approach)
|
|
7922
|
+
if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
|
|
7923
|
+
const sentiment = this.selectedOption.getAttribute('chip-sentiment');
|
|
7924
|
+
if (sentiment)
|
|
7925
|
+
return sentiment;
|
|
7926
|
+
}
|
|
7927
|
+
// Second priority: Check selected option's layout content (existing custom layout approach)
|
|
7928
|
+
if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
|
|
7929
|
+
const chipElement = this.selectedOption.querySelector('pds-chip');
|
|
7930
|
+
const sentiment = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('sentiment');
|
|
7931
|
+
if (sentiment)
|
|
7932
|
+
return sentiment;
|
|
7933
|
+
}
|
|
7934
|
+
// Third priority: Check if we have custom trigger content with a chip (initial state)
|
|
7935
|
+
if (this.customTriggerContent) {
|
|
7936
|
+
const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
|
|
7937
|
+
if (slottedChip) {
|
|
7938
|
+
const sentiment = slottedChip.getAttribute('sentiment');
|
|
7939
|
+
if (sentiment)
|
|
7940
|
+
return sentiment;
|
|
7941
|
+
}
|
|
7942
|
+
}
|
|
7943
|
+
// Fallback: Use component props
|
|
7944
|
+
return this.chipSentiment;
|
|
7945
|
+
}
|
|
7946
|
+
// Extract chip large from selected option's attributes, layout content, or slotted trigger content
|
|
7947
|
+
get selectedChipLarge() {
|
|
7948
|
+
// First priority: Check selected option's chip attributes (new automatic approach)
|
|
7949
|
+
if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
|
|
7950
|
+
if (this.selectedOption.hasAttribute('chip-large'))
|
|
7951
|
+
return true;
|
|
7952
|
+
}
|
|
7953
|
+
// Second priority: Check selected option's layout content (existing custom layout approach)
|
|
7954
|
+
if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
|
|
7955
|
+
const chipElement = this.selectedOption.querySelector('pds-chip');
|
|
7956
|
+
if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('large'))
|
|
7957
|
+
return true;
|
|
7958
|
+
}
|
|
7959
|
+
// Third priority: Check if we have custom trigger content with a chip (initial state)
|
|
7960
|
+
if (this.customTriggerContent) {
|
|
7961
|
+
const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
|
|
7962
|
+
if (slottedChip && slottedChip.hasAttribute('large')) {
|
|
7963
|
+
return true;
|
|
7964
|
+
}
|
|
7965
|
+
}
|
|
7966
|
+
// Fallback: Use component props
|
|
7967
|
+
return this.chipLarge;
|
|
7968
|
+
}
|
|
7969
|
+
// Extract chip icon from selected option's attributes, layout content, or slotted trigger content
|
|
7970
|
+
get selectedChipIcon() {
|
|
7971
|
+
// First priority: Check selected option's chip attributes (new automatic approach)
|
|
7972
|
+
if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
|
|
7973
|
+
const icon = this.selectedOption.getAttribute('chip-icon');
|
|
7974
|
+
if (icon)
|
|
7975
|
+
return icon;
|
|
7976
|
+
}
|
|
7977
|
+
// Second priority: Check selected option's layout content (existing custom layout approach)
|
|
7978
|
+
if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
|
|
7979
|
+
const chipElement = this.selectedOption.querySelector('pds-chip');
|
|
7980
|
+
const icon = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('icon');
|
|
7981
|
+
if (icon)
|
|
7982
|
+
return icon;
|
|
7983
|
+
}
|
|
7984
|
+
// Third priority: Check if we have custom trigger content with a chip (initial state)
|
|
7985
|
+
if (this.customTriggerContent) {
|
|
7986
|
+
const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
|
|
7987
|
+
if (slottedChip) {
|
|
7988
|
+
const icon = slottedChip.getAttribute('icon');
|
|
7989
|
+
if (icon)
|
|
7990
|
+
return icon;
|
|
7991
|
+
}
|
|
7992
|
+
}
|
|
7993
|
+
// Fallback: Use component props
|
|
7994
|
+
return this.chipIcon;
|
|
7995
|
+
}
|
|
7996
|
+
// Extract chip dot from selected option's attributes, layout content, or slotted trigger content
|
|
7997
|
+
get selectedChipDot() {
|
|
7998
|
+
// First priority: Check selected option's chip attributes (new automatic approach)
|
|
7999
|
+
if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
|
|
8000
|
+
if (this.selectedOption.hasAttribute('chip-dot'))
|
|
8001
|
+
return true;
|
|
8002
|
+
}
|
|
8003
|
+
// Second priority: Check selected option's layout content (existing custom layout approach)
|
|
8004
|
+
if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
|
|
8005
|
+
const chipElement = this.selectedOption.querySelector('pds-chip');
|
|
8006
|
+
if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('dot'))
|
|
8007
|
+
return true;
|
|
8008
|
+
}
|
|
8009
|
+
// Third priority: Check if we have custom trigger content with a chip (initial state)
|
|
8010
|
+
if (this.customTriggerContent) {
|
|
8011
|
+
const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
|
|
8012
|
+
if (slottedChip && slottedChip.hasAttribute('dot')) {
|
|
8013
|
+
return true;
|
|
8014
|
+
}
|
|
8015
|
+
}
|
|
8016
|
+
// Fallback: Use component props
|
|
8017
|
+
return this.chipDot;
|
|
8018
|
+
}
|
|
7426
8019
|
handleOptionClick(option) {
|
|
7427
8020
|
// Update reactive state - single source of truth
|
|
8021
|
+
// The @Watch('selectedOption') will handle displayText, value, and form internals
|
|
7428
8022
|
this.setSelectedOption(option);
|
|
7429
|
-
this.value = this.getOptionLabel(option);
|
|
7430
8023
|
this.isOpen = false;
|
|
7431
8024
|
this.pdsComboboxChange.emit({ value: option.value });
|
|
7432
8025
|
}
|
|
7433
8026
|
renderDropdown() {
|
|
7434
|
-
if (!this.isOpen || this.
|
|
8027
|
+
if (!this.isOpen || this.filteredItems.length === 0) {
|
|
8028
|
+
return null;
|
|
8029
|
+
}
|
|
8030
|
+
let optionIndex = 0;
|
|
8031
|
+
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
8032
|
+
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) => {
|
|
8033
|
+
if (item.tagName === 'OPTGROUP') {
|
|
8034
|
+
const optgroup = item;
|
|
8035
|
+
return (hAsync("li", { key: `optgroup-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation", "aria-label": optgroup.label }, optgroup.label));
|
|
8036
|
+
}
|
|
8037
|
+
else if (item.tagName === 'PDS-TEXT') {
|
|
8038
|
+
const pdsText = item;
|
|
8039
|
+
return (hAsync("li", { key: `pds-text-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation" }, pdsText.textContent));
|
|
8040
|
+
}
|
|
8041
|
+
else if (item.tagName === 'OPTION') {
|
|
8042
|
+
const option = item;
|
|
8043
|
+
const isSelected = this.isOptionSelected(option);
|
|
8044
|
+
const isHighlighted = this.highlightedIndex === optionIndex;
|
|
8045
|
+
const isLayout = this.isOptionLayout(option);
|
|
8046
|
+
const isChip = this.isOptionChip(option);
|
|
8047
|
+
const currentOptionIndex = optionIndex++;
|
|
8048
|
+
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: {
|
|
8049
|
+
'pds-combobox__option': true,
|
|
8050
|
+
'pds-combobox__option--highlighted': isHighlighted,
|
|
8051
|
+
'pds-combobox__option--layout': isLayout,
|
|
8052
|
+
'pds-combobox__option--chip': isChip,
|
|
8053
|
+
}, "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" })));
|
|
8054
|
+
}
|
|
7435
8055
|
return null;
|
|
7436
|
-
return (hAsync("ul", { class: "pds-combobox__listbox", role: "listbox", id: "pds-combobox-listbox", ref: el => (this.listboxEl = el) }, this.filteredOptions.map((option, idx) => {
|
|
7437
|
-
const isSelected = this.isOptionSelected(option);
|
|
7438
|
-
const isHighlighted = this.highlightedIndex === idx;
|
|
7439
|
-
const isLayout = this.isOptionLayout(option);
|
|
7440
|
-
return (hAsync("li", { key: option.value, id: `pds-combobox-option-${idx}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', class: {
|
|
7441
|
-
'pds-combobox__option': true,
|
|
7442
|
-
'pds-combobox__option--highlighted': isHighlighted,
|
|
7443
|
-
'pds-combobox__option--layout': isLayout,
|
|
7444
|
-
}, "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" })));
|
|
7445
8056
|
})));
|
|
7446
8057
|
}
|
|
7447
8058
|
// Helper method to render the caret icon
|
|
7448
8059
|
renderCaretIcon() {
|
|
7449
|
-
return hAsync("pds-icon", { icon: "caret-down", "aria-hidden": "true",
|
|
8060
|
+
return hAsync("pds-icon", { icon: "caret-down", "aria-hidden": "true", class: "pds-combobox__button-trigger-chevron" });
|
|
7450
8061
|
}
|
|
7451
8062
|
// Helper method to render layout content
|
|
7452
8063
|
renderLayoutContent() {
|
|
@@ -7460,6 +8071,23 @@ class PdsCombobox {
|
|
|
7460
8071
|
shouldShowLayoutContent() {
|
|
7461
8072
|
return this.selectedHasLayout && !!this.selectedLayoutContent;
|
|
7462
8073
|
}
|
|
8074
|
+
// Helper method to build chip trigger CSS classes
|
|
8075
|
+
getChipTriggerClass() {
|
|
8076
|
+
const classes = ['pds-combobox__chip-trigger'];
|
|
8077
|
+
// Add sentiment class
|
|
8078
|
+
classes.push(`pds-combobox__chip-trigger--${this.selectedChipSentiment}`);
|
|
8079
|
+
// Always use dropdown variant for chip triggers
|
|
8080
|
+
classes.push('pds-combobox__chip-trigger--dropdown');
|
|
8081
|
+
// Add large class if needed
|
|
8082
|
+
if (this.selectedChipLarge) {
|
|
8083
|
+
classes.push('pds-combobox__chip-trigger--large');
|
|
8084
|
+
}
|
|
8085
|
+
// Add dot class if needed
|
|
8086
|
+
if (this.selectedChipDot) {
|
|
8087
|
+
classes.push('pds-combobox__chip-trigger--dot');
|
|
8088
|
+
}
|
|
8089
|
+
return classes.join(' ');
|
|
8090
|
+
}
|
|
7463
8091
|
renderButtonTriggerContent() {
|
|
7464
8092
|
// Case 1: Custom trigger content with layout priority
|
|
7465
8093
|
if (this.customTriggerContent) {
|
|
@@ -7476,13 +8104,79 @@ class PdsCombobox {
|
|
|
7476
8104
|
// Case 3: Standard mode with default text content
|
|
7477
8105
|
return [this.renderDefaultContent(), this.renderCaretIcon()];
|
|
7478
8106
|
}
|
|
8107
|
+
renderChipTriggerContent() {
|
|
8108
|
+
// Case 1: Custom trigger content with layout priority
|
|
8109
|
+
if (this.customTriggerContent) {
|
|
8110
|
+
if (this.shouldShowLayoutContent()) {
|
|
8111
|
+
// When using custom layouts, the chip handles its own dropdown arrow
|
|
8112
|
+
return this.renderChipTriggerLayoutContent();
|
|
8113
|
+
}
|
|
8114
|
+
// Fall back to slot content when no layout is available - chip handles its own dropdown arrow
|
|
8115
|
+
return hAsync("slot", { name: "trigger-content" });
|
|
8116
|
+
}
|
|
8117
|
+
// Case 2: Standard mode with layout content
|
|
8118
|
+
if (this.shouldShowLayoutContent()) {
|
|
8119
|
+
// When using custom layouts, the chip handles its own dropdown arrow
|
|
8120
|
+
return this.renderChipTriggerLayoutContent();
|
|
8121
|
+
}
|
|
8122
|
+
// Case 3: Automatic chip mode - selected option has chip attributes
|
|
8123
|
+
if (this.selectedOption && this.selectedOptionChipProps) {
|
|
8124
|
+
// Render as chip automatically - chip handles its own dropdown arrow
|
|
8125
|
+
return this.renderSelectedOptionAsChip();
|
|
8126
|
+
}
|
|
8127
|
+
// Case 4: Standard mode with default text content
|
|
8128
|
+
return [
|
|
8129
|
+
this.renderChipTriggerDefaultContent(),
|
|
8130
|
+
this.renderCaretIcon()
|
|
8131
|
+
];
|
|
8132
|
+
}
|
|
8133
|
+
// Helper method to render selected option as chip for trigger (automatic approach)
|
|
8134
|
+
renderSelectedOptionAsChip() {
|
|
8135
|
+
if (!this.selectedOption || !this.selectedOptionChipProps)
|
|
8136
|
+
return null;
|
|
8137
|
+
return (hAsync("pds-chip", { sentiment: this.selectedOptionChipProps.sentiment, variant: "dropdown" // Always use dropdown variant for triggers
|
|
8138
|
+
,
|
|
8139
|
+
large: this.selectedOptionChipProps.large, icon: this.selectedOptionChipProps.icon, dot: this.selectedOptionChipProps.dot, class: "pds-combobox__chip-trigger-auto" }, this.getOptionLabel(this.selectedOption)));
|
|
8140
|
+
}
|
|
8141
|
+
// Helper method to render chip trigger layout content
|
|
8142
|
+
renderChipTriggerLayoutContent() {
|
|
8143
|
+
return (hAsync("div", { class: "pds-combobox__chip-trigger-layout-wrapper", innerHTML: this.getModifiedLayoutContentForTrigger() }));
|
|
8144
|
+
}
|
|
8145
|
+
// Helper method to modify layout content for trigger use (ensure dropdown variant)
|
|
8146
|
+
getModifiedLayoutContentForTrigger() {
|
|
8147
|
+
let content = this.selectedLayoutContent;
|
|
8148
|
+
// If the content contains a pds-chip, ensure it has variant="dropdown"
|
|
8149
|
+
if (content.includes('<pds-chip')) {
|
|
8150
|
+
// Use a temporary div to parse and modify the HTML
|
|
8151
|
+
const tempDiv = document.createElement('div');
|
|
8152
|
+
tempDiv.innerHTML = content;
|
|
8153
|
+
const chipElement = tempDiv.querySelector('pds-chip');
|
|
8154
|
+
if (chipElement) {
|
|
8155
|
+
chipElement.setAttribute('variant', 'dropdown');
|
|
8156
|
+
content = tempDiv.innerHTML;
|
|
8157
|
+
}
|
|
8158
|
+
}
|
|
8159
|
+
return content;
|
|
8160
|
+
}
|
|
8161
|
+
// Helper method to render chip trigger default content
|
|
8162
|
+
renderChipTriggerDefaultContent() {
|
|
8163
|
+
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));
|
|
8164
|
+
}
|
|
8165
|
+
// Helper method to render option as chip (new automatic approach)
|
|
8166
|
+
renderOptionChip(option) {
|
|
8167
|
+
const chipProps = this.getOptionChipProps(option);
|
|
8168
|
+
return (hAsync("pds-chip", { sentiment: chipProps.sentiment, variant: "text" // Dropdown options use text variant, not dropdown
|
|
8169
|
+
,
|
|
8170
|
+
large: chipProps.large, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
|
|
8171
|
+
}
|
|
7479
8172
|
render() {
|
|
7480
8173
|
const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
|
|
7481
|
-
return (hAsync(Host, { key: '
|
|
8174
|
+
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 => {
|
|
7482
8175
|
this.inputEl = el;
|
|
7483
8176
|
this.triggerEl = el;
|
|
7484
|
-
}, class: "pds-combobox__input",
|
|
8177
|
+
}, 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())));
|
|
7485
8178
|
}
|
|
8179
|
+
static get formAssociated() { return true; }
|
|
7486
8180
|
get el() { return getElement(this); }
|
|
7487
8181
|
static get watchers() { return {
|
|
7488
8182
|
"value": ["handleValueChange"],
|
|
@@ -7490,10 +8184,11 @@ class PdsCombobox {
|
|
|
7490
8184
|
}; }
|
|
7491
8185
|
static get style() { return pdsComboboxCss; }
|
|
7492
8186
|
static get cmpMeta() { return {
|
|
7493
|
-
"$flags$":
|
|
8187
|
+
"$flags$": 73,
|
|
7494
8188
|
"$tagName$": "pds-combobox",
|
|
7495
8189
|
"$members$": {
|
|
7496
8190
|
"componentId": [1, "component-id"],
|
|
8191
|
+
"name": [513],
|
|
7497
8192
|
"customOptionLayouts": [4, "custom-option-layouts"],
|
|
7498
8193
|
"customTriggerContent": [4, "custom-trigger-content"],
|
|
7499
8194
|
"disabled": [4],
|
|
@@ -7507,22 +8202,28 @@ class PdsCombobox {
|
|
|
7507
8202
|
"trigger": [1],
|
|
7508
8203
|
"triggerWidth": [1, "trigger-width"],
|
|
7509
8204
|
"triggerVariant": [1, "trigger-variant"],
|
|
8205
|
+
"chipSentiment": [1, "chip-sentiment"],
|
|
8206
|
+
"chipLarge": [4, "chip-large"],
|
|
8207
|
+
"chipIcon": [1, "chip-icon"],
|
|
8208
|
+
"chipDot": [4, "chip-dot"],
|
|
7510
8209
|
"value": [1025],
|
|
7511
|
-
"
|
|
8210
|
+
"displayText": [32],
|
|
8211
|
+
"filteredItems": [32],
|
|
7512
8212
|
"highlightedIndex": [32],
|
|
7513
8213
|
"isOpen": [32],
|
|
7514
8214
|
"selectedOption": [32],
|
|
7515
8215
|
"selectedOptionLayoutContent": [32],
|
|
8216
|
+
"selectedOptionChipProps": [32],
|
|
7516
8217
|
"setFocus": [64],
|
|
7517
8218
|
"getSelectedValue": [64]
|
|
7518
8219
|
},
|
|
7519
8220
|
"$listeners$": undefined,
|
|
7520
8221
|
"$lazyBundleId$": "-",
|
|
7521
|
-
"$attrsToReflect$": []
|
|
8222
|
+
"$attrsToReflect$": [["name", "name"]]
|
|
7522
8223
|
}; }
|
|
7523
8224
|
}
|
|
7524
8225
|
|
|
7525
|
-
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
|
|
8226
|
+
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}";
|
|
7526
8227
|
|
|
7527
8228
|
class PdsCopytext {
|
|
7528
8229
|
constructor(hostRef) {
|
|
@@ -7569,10 +8270,10 @@ class PdsCopytext {
|
|
|
7569
8270
|
if (this.truncate) {
|
|
7570
8271
|
classNames.push('pds-copytext--truncated');
|
|
7571
8272
|
}
|
|
7572
|
-
return classNames.join('
|
|
8273
|
+
return classNames.join(' ');
|
|
7573
8274
|
}
|
|
7574
8275
|
render() {
|
|
7575
|
-
return (hAsync(Host, { key: '
|
|
8276
|
+
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" }))));
|
|
7576
8277
|
}
|
|
7577
8278
|
static get style() { return pdsCopytextCss; }
|
|
7578
8279
|
static get cmpMeta() { return {
|
|
@@ -7631,7 +8332,7 @@ class PdsDivider {
|
|
|
7631
8332
|
}; }
|
|
7632
8333
|
}
|
|
7633
8334
|
|
|
7634
|
-
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:
|
|
8335
|
+
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)}";
|
|
7635
8336
|
|
|
7636
8337
|
class PdsDropdownMenu {
|
|
7637
8338
|
constructor(hostRef) {
|
|
@@ -7981,7 +8682,7 @@ class PdsDropdownMenuItem {
|
|
|
7981
8682
|
}; }
|
|
7982
8683
|
}
|
|
7983
8684
|
|
|
7984
|
-
const pdsDropdownMenuSeparatorCss = ":host hr{border:1px solid var(--pine-color-border);margin-block:var(--pine-dimension-xs)}";
|
|
8685
|
+
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)}";
|
|
7985
8686
|
|
|
7986
8687
|
class PdsDropdownMenuSeparator {
|
|
7987
8688
|
constructor(hostRef) {
|
|
@@ -8009,6 +8710,540 @@ class PdsDropdownMenuSeparator {
|
|
|
8009
8710
|
}; }
|
|
8010
8711
|
}
|
|
8011
8712
|
|
|
8713
|
+
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)))}}";
|
|
8714
|
+
|
|
8715
|
+
/**
|
|
8716
|
+
* Individual filter component with cross-browser popover positioning.
|
|
8717
|
+
*
|
|
8718
|
+
* Uses a hybrid approach for optimal cross-browser compatibility:
|
|
8719
|
+
* - Modern browsers: CSS anchor positioning + JavaScript flip classes
|
|
8720
|
+
* - Fallback browsers: JavaScript positioning with viewport boundary detection
|
|
8721
|
+
*
|
|
8722
|
+
* @part button - Exposes the trigger button element for styling.
|
|
8723
|
+
* @part button-content - Exposes the button content container for styling.
|
|
8724
|
+
* @part button-text - Exposes the button text for styling.
|
|
8725
|
+
* @part icon - Exposes the icon component for styling.
|
|
8726
|
+
* @part popover - Exposes the popover container for styling.
|
|
8727
|
+
* @slot (default) - Popover content that will be displayed when the filter is open.
|
|
8728
|
+
*/
|
|
8729
|
+
class PdsFilter {
|
|
8730
|
+
constructor(hostRef) {
|
|
8731
|
+
registerInstance(this, hostRef);
|
|
8732
|
+
this.pdsFilterOpen = createEvent(this, "pdsFilterOpen");
|
|
8733
|
+
this.pdsFilterClose = createEvent(this, "pdsFilterClose");
|
|
8734
|
+
this.pdsFilterClear = createEvent(this, "pdsFilterClear");
|
|
8735
|
+
this.scrollRAF = null;
|
|
8736
|
+
this.lastScrollTime = 0;
|
|
8737
|
+
/**
|
|
8738
|
+
* The variant style of the filter trigger.
|
|
8739
|
+
* @defaultValue 'default'
|
|
8740
|
+
*/
|
|
8741
|
+
this.variant = 'default';
|
|
8742
|
+
/**
|
|
8743
|
+
* State to track if the popover is open.
|
|
8744
|
+
*/
|
|
8745
|
+
this.isOpen = false;
|
|
8746
|
+
/**
|
|
8747
|
+
* Handle native popover toggle events directly on the element
|
|
8748
|
+
* This is needed for browsers with native Popover API support
|
|
8749
|
+
*/
|
|
8750
|
+
this.handleNativePopoverToggle = (event) => {
|
|
8751
|
+
const target = event.target;
|
|
8752
|
+
if (target && target.id === `${this.componentId}-popover`) {
|
|
8753
|
+
// Check current popover state
|
|
8754
|
+
let isCurrentlyOpen = false;
|
|
8755
|
+
try {
|
|
8756
|
+
isCurrentlyOpen = target.matches(':popover-open');
|
|
8757
|
+
}
|
|
8758
|
+
catch (error) {
|
|
8759
|
+
// Fallback if :popover-open selector isn't supported
|
|
8760
|
+
isCurrentlyOpen = target.style.display === 'block';
|
|
8761
|
+
}
|
|
8762
|
+
// Update state
|
|
8763
|
+
this.isOpen = isCurrentlyOpen;
|
|
8764
|
+
if (this.isOpen) {
|
|
8765
|
+
setTimeout(() => this.adjustPopoverPosition(), 0);
|
|
8766
|
+
this.pdsFilterOpen.emit({
|
|
8767
|
+
componentId: this.componentId,
|
|
8768
|
+
variant: this.variant,
|
|
8769
|
+
text: this.text,
|
|
8770
|
+
});
|
|
8771
|
+
}
|
|
8772
|
+
else {
|
|
8773
|
+
this.pdsFilterClose.emit({
|
|
8774
|
+
componentId: this.componentId,
|
|
8775
|
+
variant: this.variant,
|
|
8776
|
+
text: this.text,
|
|
8777
|
+
});
|
|
8778
|
+
}
|
|
8779
|
+
}
|
|
8780
|
+
};
|
|
8781
|
+
/**
|
|
8782
|
+
* Handle keyboard interactions for clear variant only.
|
|
8783
|
+
*/
|
|
8784
|
+
this.handleKeyDown = (event) => {
|
|
8785
|
+
// Only handle clear variant manually, let native API handle everything else
|
|
8786
|
+
if (this.variant === 'clear' && (event.key === 'Enter' || event.key === ' ')) {
|
|
8787
|
+
event.preventDefault();
|
|
8788
|
+
this.handleClick();
|
|
8789
|
+
}
|
|
8790
|
+
};
|
|
8791
|
+
/**
|
|
8792
|
+
* Handle trigger button click. Clear variant emits event, others toggle popover.
|
|
8793
|
+
*/
|
|
8794
|
+
this.handleClick = (event) => {
|
|
8795
|
+
if (this.variant === 'clear') {
|
|
8796
|
+
this.pdsFilterClear.emit({
|
|
8797
|
+
componentId: this.componentId,
|
|
8798
|
+
text: this.text,
|
|
8799
|
+
});
|
|
8800
|
+
return;
|
|
8801
|
+
}
|
|
8802
|
+
this.closeOtherPopovers();
|
|
8803
|
+
// Check for popover API support
|
|
8804
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8805
|
+
if (!supportsPopoverAPI) {
|
|
8806
|
+
// Manual fallback for browsers without popover API support
|
|
8807
|
+
// Prevent default to avoid conflicts with any native behavior
|
|
8808
|
+
if (event) {
|
|
8809
|
+
event.preventDefault();
|
|
8810
|
+
}
|
|
8811
|
+
setTimeout(() => {
|
|
8812
|
+
if (this.popoverEl != null) {
|
|
8813
|
+
this.isOpen = !this.isOpen;
|
|
8814
|
+
if (this.isOpen) {
|
|
8815
|
+
this.popoverEl.style.display = 'block';
|
|
8816
|
+
this.popoverEl.classList.add('is-open');
|
|
8817
|
+
this.adjustPopoverPosition();
|
|
8818
|
+
this.pdsFilterOpen.emit({
|
|
8819
|
+
componentId: this.componentId,
|
|
8820
|
+
variant: this.variant,
|
|
8821
|
+
text: this.text,
|
|
8822
|
+
});
|
|
8823
|
+
}
|
|
8824
|
+
else {
|
|
8825
|
+
this.popoverEl.style.display = 'none';
|
|
8826
|
+
this.popoverEl.classList.remove('is-open');
|
|
8827
|
+
this.pdsFilterClose.emit({
|
|
8828
|
+
componentId: this.componentId,
|
|
8829
|
+
variant: this.variant,
|
|
8830
|
+
text: this.text,
|
|
8831
|
+
});
|
|
8832
|
+
}
|
|
8833
|
+
}
|
|
8834
|
+
}, 0);
|
|
8835
|
+
}
|
|
8836
|
+
// For browsers with native popover API, let the native behavior handle the toggle
|
|
8837
|
+
// The toggle event listener will capture the state change and emit events
|
|
8838
|
+
};
|
|
8839
|
+
}
|
|
8840
|
+
/**
|
|
8841
|
+
* Component lifecycle: Clean up when disconnected from DOM.
|
|
8842
|
+
* Prevents memory leaks by canceling pending operations and closing popovers.
|
|
8843
|
+
*/
|
|
8844
|
+
disconnectedCallback() {
|
|
8845
|
+
// Cancel pending animation frames
|
|
8846
|
+
if (this.scrollRAF) {
|
|
8847
|
+
cancelAnimationFrame(this.scrollRAF);
|
|
8848
|
+
this.scrollRAF = null;
|
|
8849
|
+
}
|
|
8850
|
+
this.lastScrollTime = 0;
|
|
8851
|
+
// Clean up native popover event listeners
|
|
8852
|
+
if (this.popoverEl) {
|
|
8853
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8854
|
+
if (supportsPopoverAPI) {
|
|
8855
|
+
this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
|
|
8856
|
+
}
|
|
8857
|
+
}
|
|
8858
|
+
// Ensure popover is closed
|
|
8859
|
+
if (this.isOpen && this.popoverEl) {
|
|
8860
|
+
try {
|
|
8861
|
+
this.popoverEl.hidePopover();
|
|
8862
|
+
}
|
|
8863
|
+
catch (error) {
|
|
8864
|
+
this.popoverEl.style.display = 'none';
|
|
8865
|
+
this.popoverEl.classList.remove('is-open');
|
|
8866
|
+
}
|
|
8867
|
+
}
|
|
8868
|
+
}
|
|
8869
|
+
componentDidRender() {
|
|
8870
|
+
// Note: popoverEl is set via ref callback in render method
|
|
8871
|
+
// For browsers with native popover API, we need direct element listeners
|
|
8872
|
+
// since the document listener may not capture native popover toggle events
|
|
8873
|
+
if (this.popoverEl) {
|
|
8874
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
8875
|
+
if (supportsPopoverAPI) {
|
|
8876
|
+
// Remove any existing listeners to avoid duplicates
|
|
8877
|
+
this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
|
|
8878
|
+
// Add direct listener for native popover events
|
|
8879
|
+
this.popoverEl.addEventListener('toggle', this.handleNativePopoverToggle);
|
|
8880
|
+
}
|
|
8881
|
+
}
|
|
8882
|
+
}
|
|
8883
|
+
/**
|
|
8884
|
+
* Reposition popovers on window resize.
|
|
8885
|
+
*/
|
|
8886
|
+
handleWindowResize() {
|
|
8887
|
+
if (this.isOpen) {
|
|
8888
|
+
setTimeout(() => this.adjustPopoverPosition(), 16);
|
|
8889
|
+
}
|
|
8890
|
+
}
|
|
8891
|
+
/**
|
|
8892
|
+
* Reposition popovers on scroll with performance throttling.
|
|
8893
|
+
*/
|
|
8894
|
+
handleWindowScroll() {
|
|
8895
|
+
if (this.isOpen) {
|
|
8896
|
+
const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
|
|
8897
|
+
const now = performance.now();
|
|
8898
|
+
const throttleMs = supportsAnchorPositioning ? 66 : 33;
|
|
8899
|
+
if (now - this.lastScrollTime < throttleMs) {
|
|
8900
|
+
return;
|
|
8901
|
+
}
|
|
8902
|
+
this.lastScrollTime = now;
|
|
8903
|
+
if (this.scrollRAF) {
|
|
8904
|
+
cancelAnimationFrame(this.scrollRAF);
|
|
8905
|
+
}
|
|
8906
|
+
this.scrollRAF = requestAnimationFrame(() => {
|
|
8907
|
+
if (this.isOpen && this.popoverEl && this.el.isConnected) {
|
|
8908
|
+
this.adjustPopoverPosition();
|
|
8909
|
+
}
|
|
8910
|
+
this.scrollRAF = null;
|
|
8911
|
+
});
|
|
8912
|
+
}
|
|
8913
|
+
}
|
|
8914
|
+
/**
|
|
8915
|
+
* Closes other open filter popovers to ensure only one is open at a time.
|
|
8916
|
+
*/
|
|
8917
|
+
closeOtherPopovers() {
|
|
8918
|
+
const allFilters = document.querySelectorAll('pds-filter');
|
|
8919
|
+
allFilters.forEach((filter) => {
|
|
8920
|
+
var _a;
|
|
8921
|
+
if (filter === this.el)
|
|
8922
|
+
return;
|
|
8923
|
+
const popover = (_a = filter.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__popover');
|
|
8924
|
+
if (popover) {
|
|
8925
|
+
// Check for popover API support to avoid crashes
|
|
8926
|
+
let isPopoverOpen = false;
|
|
8927
|
+
try {
|
|
8928
|
+
isPopoverOpen = popover.matches(':popover-open');
|
|
8929
|
+
}
|
|
8930
|
+
catch (error) {
|
|
8931
|
+
// Fallback if :popover-open selector isn't supported
|
|
8932
|
+
isPopoverOpen = popover.style.display === 'block';
|
|
8933
|
+
}
|
|
8934
|
+
if (isPopoverOpen) {
|
|
8935
|
+
try {
|
|
8936
|
+
popover.hidePopover();
|
|
8937
|
+
}
|
|
8938
|
+
catch (error) {
|
|
8939
|
+
popover.style.display = 'none';
|
|
8940
|
+
popover.classList.remove('is-open');
|
|
8941
|
+
}
|
|
8942
|
+
}
|
|
8943
|
+
}
|
|
8944
|
+
});
|
|
8945
|
+
}
|
|
8946
|
+
/**
|
|
8947
|
+
* Adjusts popover position to keep it within viewport bounds.
|
|
8948
|
+
* Uses CSS anchor positioning for modern browsers, JavaScript for fallback browsers.
|
|
8949
|
+
*/
|
|
8950
|
+
adjustPopoverPosition() {
|
|
8951
|
+
var _a;
|
|
8952
|
+
if (!this.popoverEl || this.variant === 'clear')
|
|
8953
|
+
return;
|
|
8954
|
+
const triggerEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__trigger');
|
|
8955
|
+
if (!triggerEl)
|
|
8956
|
+
return;
|
|
8957
|
+
const triggerRect = triggerEl.getBoundingClientRect();
|
|
8958
|
+
const viewportWidth = window.innerWidth;
|
|
8959
|
+
const viewportHeight = window.innerHeight;
|
|
8960
|
+
const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
|
|
8961
|
+
// Get dimensions for boundary detection
|
|
8962
|
+
const popoverWidth = 228;
|
|
8963
|
+
const popoverHeight = this.popoverEl.getBoundingClientRect().height || 200;
|
|
8964
|
+
// Boundary detection for flipping
|
|
8965
|
+
const bufferSpace = 20;
|
|
8966
|
+
const wouldOverflowRight = (triggerRect.left + popoverWidth + bufferSpace) > viewportWidth;
|
|
8967
|
+
const wouldOverflowBottom = (triggerRect.bottom + 8 + popoverHeight + bufferSpace) > viewportHeight;
|
|
8968
|
+
if (supportsAnchorPositioning) {
|
|
8969
|
+
// Modern browsers: CSS anchor positioning + JavaScript-controlled flipping
|
|
8970
|
+
this.popoverEl.classList.remove('popover-flip-horizontal', 'popover-flip-vertical');
|
|
8971
|
+
if (wouldOverflowRight) {
|
|
8972
|
+
this.popoverEl.classList.add('popover-flip-horizontal');
|
|
8973
|
+
}
|
|
8974
|
+
if (wouldOverflowBottom) {
|
|
8975
|
+
this.popoverEl.classList.add('popover-flip-vertical');
|
|
8976
|
+
}
|
|
8977
|
+
}
|
|
8978
|
+
else {
|
|
8979
|
+
// Fallback browsers: JavaScript positioning with boundary detection
|
|
8980
|
+
let left = triggerRect.left;
|
|
8981
|
+
let top = triggerRect.bottom + 8;
|
|
8982
|
+
let transformOrigin = 'top left';
|
|
8983
|
+
// Apply horizontal flipping if needed
|
|
8984
|
+
if (wouldOverflowRight) {
|
|
8985
|
+
const actualPopoverWidth = this.popoverEl.getBoundingClientRect().width || popoverWidth;
|
|
8986
|
+
left = triggerRect.right - actualPopoverWidth;
|
|
8987
|
+
transformOrigin = 'top right';
|
|
8988
|
+
}
|
|
8989
|
+
// Apply vertical flipping if needed
|
|
8990
|
+
if (wouldOverflowBottom) {
|
|
8991
|
+
top = triggerRect.top - popoverHeight - 8;
|
|
8992
|
+
transformOrigin = transformOrigin.replace('top', 'bottom');
|
|
8993
|
+
}
|
|
8994
|
+
// Apply positioning in single DOM write for performance
|
|
8995
|
+
this.popoverEl.style.cssText = `
|
|
8996
|
+
position: fixed;
|
|
8997
|
+
left: ${left}px;
|
|
8998
|
+
top: ${top}px;
|
|
8999
|
+
z-index: var(--pine-z-index-overlay);
|
|
9000
|
+
transform-origin: ${transformOrigin};
|
|
9001
|
+
`;
|
|
9002
|
+
}
|
|
9003
|
+
}
|
|
9004
|
+
/**
|
|
9005
|
+
* Opens the filter popover programmatically.
|
|
9006
|
+
* Note: Clear variant does not support popover functionality.
|
|
9007
|
+
*/
|
|
9008
|
+
async showFilter() {
|
|
9009
|
+
if (this.variant === 'clear') {
|
|
9010
|
+
console.warn('Clear variant does not support showFilter method');
|
|
9011
|
+
return;
|
|
9012
|
+
}
|
|
9013
|
+
if (this.popoverEl != null) {
|
|
9014
|
+
try {
|
|
9015
|
+
this.popoverEl.showPopover();
|
|
9016
|
+
}
|
|
9017
|
+
catch (error) {
|
|
9018
|
+
// Fallback for testing environment where showPopover is not available
|
|
9019
|
+
this.popoverEl.style.display = 'block';
|
|
9020
|
+
this.popoverEl.classList.add('is-open');
|
|
9021
|
+
}
|
|
9022
|
+
}
|
|
9023
|
+
}
|
|
9024
|
+
/**
|
|
9025
|
+
* Closes the filter popover programmatically.
|
|
9026
|
+
* Note: Clear variant does not support popover functionality.
|
|
9027
|
+
*/
|
|
9028
|
+
async hideFilter() {
|
|
9029
|
+
if (this.variant === 'clear') {
|
|
9030
|
+
console.warn('Clear variant does not support hideFilter method');
|
|
9031
|
+
return;
|
|
9032
|
+
}
|
|
9033
|
+
if (this.popoverEl != null) {
|
|
9034
|
+
try {
|
|
9035
|
+
this.popoverEl.hidePopover();
|
|
9036
|
+
}
|
|
9037
|
+
catch (error) {
|
|
9038
|
+
// Fallback for testing environment where hidePopover is not available
|
|
9039
|
+
this.popoverEl.style.display = 'none';
|
|
9040
|
+
this.popoverEl.classList.remove('is-open');
|
|
9041
|
+
}
|
|
9042
|
+
}
|
|
9043
|
+
}
|
|
9044
|
+
/**
|
|
9045
|
+
* Listen for popover toggle events for browsers without native Popover API (fallback).
|
|
9046
|
+
* Native API browsers use direct element listeners to avoid conflicts.
|
|
9047
|
+
*/
|
|
9048
|
+
handlePopoverToggle(event) {
|
|
9049
|
+
const target = event.target;
|
|
9050
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
9051
|
+
// Only handle events for fallback browsers (Firefox) to avoid duplicate handling
|
|
9052
|
+
if (!supportsPopoverAPI && target && target.id === `${this.componentId}-popover`) {
|
|
9053
|
+
// Check for popover API support to avoid crashes
|
|
9054
|
+
let isCurrentlyOpen = false;
|
|
9055
|
+
try {
|
|
9056
|
+
isCurrentlyOpen = target.matches(':popover-open');
|
|
9057
|
+
}
|
|
9058
|
+
catch (error) {
|
|
9059
|
+
// Fallback if :popover-open selector isn't supported
|
|
9060
|
+
isCurrentlyOpen = target.style.display === 'block';
|
|
9061
|
+
}
|
|
9062
|
+
// Update state
|
|
9063
|
+
this.isOpen = isCurrentlyOpen;
|
|
9064
|
+
if (this.isOpen) {
|
|
9065
|
+
setTimeout(() => this.adjustPopoverPosition(), 0);
|
|
9066
|
+
this.pdsFilterOpen.emit({
|
|
9067
|
+
componentId: this.componentId,
|
|
9068
|
+
variant: this.variant,
|
|
9069
|
+
text: this.text,
|
|
9070
|
+
});
|
|
9071
|
+
}
|
|
9072
|
+
else {
|
|
9073
|
+
this.pdsFilterClose.emit({
|
|
9074
|
+
componentId: this.componentId,
|
|
9075
|
+
variant: this.variant,
|
|
9076
|
+
text: this.text,
|
|
9077
|
+
});
|
|
9078
|
+
}
|
|
9079
|
+
}
|
|
9080
|
+
}
|
|
9081
|
+
/**
|
|
9082
|
+
* Listen for clicks to detect outside dismissal.
|
|
9083
|
+
*/
|
|
9084
|
+
handleDocumentClick(event) {
|
|
9085
|
+
// Check if click is outside and popover gets closed
|
|
9086
|
+
if (!this.el.contains(event.target) && this.isOpen && this.variant !== 'clear') {
|
|
9087
|
+
setTimeout(() => {
|
|
9088
|
+
if (this.popoverEl && this.isOpen) {
|
|
9089
|
+
// Check for popover API support to avoid crashes
|
|
9090
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
9091
|
+
let popoverIsClosed = false;
|
|
9092
|
+
if (supportsPopoverAPI) {
|
|
9093
|
+
try {
|
|
9094
|
+
popoverIsClosed = !this.popoverEl.matches(':popover-open');
|
|
9095
|
+
}
|
|
9096
|
+
catch (error) {
|
|
9097
|
+
// Fallback if :popover-open selector isn't supported
|
|
9098
|
+
popoverIsClosed = this.popoverEl.style.display !== 'block';
|
|
9099
|
+
}
|
|
9100
|
+
}
|
|
9101
|
+
else {
|
|
9102
|
+
// Manual fallback - assume popover was closed by outside click
|
|
9103
|
+
popoverIsClosed = true;
|
|
9104
|
+
}
|
|
9105
|
+
if (popoverIsClosed) {
|
|
9106
|
+
this.isOpen = false;
|
|
9107
|
+
if (!supportsPopoverAPI) {
|
|
9108
|
+
this.popoverEl.style.display = 'none';
|
|
9109
|
+
this.popoverEl.classList.remove('is-open');
|
|
9110
|
+
}
|
|
9111
|
+
this.pdsFilterClose.emit({
|
|
9112
|
+
componentId: this.componentId,
|
|
9113
|
+
variant: this.variant,
|
|
9114
|
+
text: this.text,
|
|
9115
|
+
});
|
|
9116
|
+
}
|
|
9117
|
+
}
|
|
9118
|
+
}, 0);
|
|
9119
|
+
}
|
|
9120
|
+
}
|
|
9121
|
+
/**
|
|
9122
|
+
* Listen for Escape key to ensure close event fires.
|
|
9123
|
+
*/
|
|
9124
|
+
handleEscapeKey(event) {
|
|
9125
|
+
if (event.key === 'Escape' && this.isOpen && this.variant !== 'clear') {
|
|
9126
|
+
// Check if popover was closed by Escape
|
|
9127
|
+
setTimeout(() => {
|
|
9128
|
+
if (this.popoverEl && this.isOpen) {
|
|
9129
|
+
// Check for popover API support to avoid crashes
|
|
9130
|
+
const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
|
|
9131
|
+
let popoverIsClosed = false;
|
|
9132
|
+
if (supportsPopoverAPI) {
|
|
9133
|
+
try {
|
|
9134
|
+
popoverIsClosed = !this.popoverEl.matches(':popover-open');
|
|
9135
|
+
}
|
|
9136
|
+
catch (error) {
|
|
9137
|
+
// Fallback if :popover-open selector isn't supported
|
|
9138
|
+
popoverIsClosed = this.popoverEl.style.display !== 'block';
|
|
9139
|
+
}
|
|
9140
|
+
}
|
|
9141
|
+
else {
|
|
9142
|
+
// Manual fallback - assume popover was closed by Escape
|
|
9143
|
+
popoverIsClosed = true;
|
|
9144
|
+
}
|
|
9145
|
+
if (popoverIsClosed) {
|
|
9146
|
+
this.isOpen = false;
|
|
9147
|
+
if (!supportsPopoverAPI) {
|
|
9148
|
+
this.popoverEl.style.display = 'none';
|
|
9149
|
+
this.popoverEl.classList.remove('is-open');
|
|
9150
|
+
}
|
|
9151
|
+
this.pdsFilterClose.emit({
|
|
9152
|
+
componentId: this.componentId,
|
|
9153
|
+
variant: this.variant,
|
|
9154
|
+
text: this.text,
|
|
9155
|
+
});
|
|
9156
|
+
}
|
|
9157
|
+
}
|
|
9158
|
+
}, 0);
|
|
9159
|
+
}
|
|
9160
|
+
}
|
|
9161
|
+
/**
|
|
9162
|
+
* Get the appropriate icon for the variant.
|
|
9163
|
+
*/
|
|
9164
|
+
getIcon() {
|
|
9165
|
+
if (this.variant === 'clear') {
|
|
9166
|
+
return trash;
|
|
9167
|
+
}
|
|
9168
|
+
return this.icon;
|
|
9169
|
+
}
|
|
9170
|
+
/**
|
|
9171
|
+
* Get CSS classes for the trigger button.
|
|
9172
|
+
*/
|
|
9173
|
+
getTriggerClasses() {
|
|
9174
|
+
const classes = ['pds-filter__trigger'];
|
|
9175
|
+
classes.push(`pds-filter__trigger--${this.variant}`);
|
|
9176
|
+
if (this.isOpen && this.variant !== 'clear') {
|
|
9177
|
+
classes.push('pds-filter__trigger--open');
|
|
9178
|
+
}
|
|
9179
|
+
return classes.join(' ');
|
|
9180
|
+
}
|
|
9181
|
+
/**
|
|
9182
|
+
* Render the trigger icon.
|
|
9183
|
+
*/
|
|
9184
|
+
renderIcon() {
|
|
9185
|
+
const iconToRender = this.getIcon();
|
|
9186
|
+
if (iconToRender == null || iconToRender === '')
|
|
9187
|
+
return null;
|
|
9188
|
+
return (hAsync("pds-icon", { icon: iconToRender, size: "var(--pine-font-size-100)", "aria-hidden": "true", part: "icon" }));
|
|
9189
|
+
}
|
|
9190
|
+
/**
|
|
9191
|
+
* Render the dropdown icon for selected variant.
|
|
9192
|
+
*/
|
|
9193
|
+
renderDropdownIcon() {
|
|
9194
|
+
if (this.variant === 'selected') {
|
|
9195
|
+
return (hAsync("pds-icon", { icon: enlarge, size: "var(--pine-dimension-200)", "aria-hidden": "true", class: "pds-filter__dropdown-icon", part: "icon" }));
|
|
9196
|
+
}
|
|
9197
|
+
return null;
|
|
9198
|
+
}
|
|
9199
|
+
render() {
|
|
9200
|
+
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' })))));
|
|
9201
|
+
}
|
|
9202
|
+
get el() { return getElement(this); }
|
|
9203
|
+
static get style() { return pdsFilterCss; }
|
|
9204
|
+
static get cmpMeta() { return {
|
|
9205
|
+
"$flags$": 9,
|
|
9206
|
+
"$tagName$": "pds-filter",
|
|
9207
|
+
"$members$": {
|
|
9208
|
+
"componentId": [1, "component-id"],
|
|
9209
|
+
"variant": [1],
|
|
9210
|
+
"icon": [1],
|
|
9211
|
+
"text": [1],
|
|
9212
|
+
"isOpen": [32],
|
|
9213
|
+
"showFilter": [64],
|
|
9214
|
+
"hideFilter": [64]
|
|
9215
|
+
},
|
|
9216
|
+
"$listeners$": [[9, "resize", "handleWindowResize"], [9, "scroll", "handleWindowScroll"], [4, "toggle", "handlePopoverToggle"], [4, "click", "handleDocumentClick"], [4, "keydown", "handleEscapeKey"]],
|
|
9217
|
+
"$lazyBundleId$": "-",
|
|
9218
|
+
"$attrsToReflect$": []
|
|
9219
|
+
}; }
|
|
9220
|
+
}
|
|
9221
|
+
|
|
9222
|
+
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)}";
|
|
9223
|
+
|
|
9224
|
+
/**
|
|
9225
|
+
* @slot (default) - Container for pds-filter components.
|
|
9226
|
+
*/
|
|
9227
|
+
class PdsFilters {
|
|
9228
|
+
constructor(hostRef) {
|
|
9229
|
+
registerInstance(this, hostRef);
|
|
9230
|
+
}
|
|
9231
|
+
render() {
|
|
9232
|
+
return (hAsync(Host, { key: '7007a635d3866781dfd67bd2d3b2dab46d36cffc', id: this.componentId }, hAsync("div", { key: 'e6eb4c76bfb39050aaa01ad297df995de7df484b', class: "pds-filters" }, hAsync("slot", { key: '543c83c7422b3e1e9a2446618fe8119d76478df4' }))));
|
|
9233
|
+
}
|
|
9234
|
+
static get style() { return pdsFiltersCss; }
|
|
9235
|
+
static get cmpMeta() { return {
|
|
9236
|
+
"$flags$": 9,
|
|
9237
|
+
"$tagName$": "pds-filters",
|
|
9238
|
+
"$members$": {
|
|
9239
|
+
"componentId": [1, "component-id"]
|
|
9240
|
+
},
|
|
9241
|
+
"$listeners$": undefined,
|
|
9242
|
+
"$lazyBundleId$": "-",
|
|
9243
|
+
"$attrsToReflect$": []
|
|
9244
|
+
}; }
|
|
9245
|
+
}
|
|
9246
|
+
|
|
8012
9247
|
let missingAssetPathWarning = false;
|
|
8013
9248
|
/**
|
|
8014
9249
|
*
|
|
@@ -8457,9 +9692,9 @@ class PdsImage {
|
|
|
8457
9692
|
this.loading = 'eager';
|
|
8458
9693
|
}
|
|
8459
9694
|
render() {
|
|
8460
|
-
return (hAsync(Host, { key: '
|
|
9695
|
+
return (hAsync(Host, { key: 'fa205f03d5c378d27a66cbfd520ae2bc7ab9e9df', class: {
|
|
8461
9696
|
'pds-image': true,
|
|
8462
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
9697
|
+
}, 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 })));
|
|
8463
9698
|
}
|
|
8464
9699
|
static get style() { return pdsImageCss; }
|
|
8465
9700
|
static get cmpMeta() { return {
|
|
@@ -8485,7 +9720,7 @@ const pdsInputTokensCss$1 = ":host{--pine-input-color-background-danger:var(--pi
|
|
|
8485
9720
|
|
|
8486
9721
|
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)}";
|
|
8487
9722
|
|
|
8488
|
-
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}";
|
|
9723
|
+
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}";
|
|
8489
9724
|
|
|
8490
9725
|
/**
|
|
8491
9726
|
* @slot append - Content to be displayed after the input field
|
|
@@ -8743,7 +9978,7 @@ class PdsInput {
|
|
|
8743
9978
|
'has-prepend': this.hasPrepend,
|
|
8744
9979
|
'has-append': this.hasAppend,
|
|
8745
9980
|
};
|
|
8746
|
-
return (hAsync(Host, { key: '
|
|
9981
|
+
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)))));
|
|
8747
9982
|
}
|
|
8748
9983
|
static get formAssociated() { return true; }
|
|
8749
9984
|
get el() { return getElement(this); }
|
|
@@ -8839,8 +10074,8 @@ class PdsLink {
|
|
|
8839
10074
|
return linkStyles;
|
|
8840
10075
|
}
|
|
8841
10076
|
render() {
|
|
8842
|
-
return (hAsync("a", { key: '
|
|
8843
|
-
hAsync("pds-icon", { key: '
|
|
10077
|
+
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 &&
|
|
10078
|
+
hAsync("pds-icon", { key: '19fc60fe515fa53b22ad770c5d8f52ef42d16fd5', icon: launch, size: this.fontSize })));
|
|
8844
10079
|
}
|
|
8845
10080
|
static get style() { return pdsLinkCss; }
|
|
8846
10081
|
static get cmpMeta() { return {
|
|
@@ -8910,7 +10145,7 @@ class PdsLoader {
|
|
|
8910
10145
|
}
|
|
8911
10146
|
}
|
|
8912
10147
|
render() {
|
|
8913
|
-
return (hAsync(Host, { key: '
|
|
10148
|
+
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..."))));
|
|
8914
10149
|
}
|
|
8915
10150
|
static get style() { return pdsLoaderCss; }
|
|
8916
10151
|
static get cmpMeta() { return {
|
|
@@ -8928,7 +10163,7 @@ class PdsLoader {
|
|
|
8928
10163
|
}; }
|
|
8929
10164
|
}
|
|
8930
10165
|
|
|
8931
|
-
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:
|
|
10166
|
+
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}";
|
|
8932
10167
|
|
|
8933
10168
|
class PdsModal {
|
|
8934
10169
|
constructor(hostRef) {
|
|
@@ -9166,14 +10401,14 @@ class PdsModal {
|
|
|
9166
10401
|
return thisZIndex === maxZIndex;
|
|
9167
10402
|
}
|
|
9168
10403
|
render() {
|
|
9169
|
-
return (hAsync("dialog", { key: '
|
|
10404
|
+
return (hAsync("dialog", { key: 'ca1fe22c9f9aa26e74234e5195c007760cbbf818', class: {
|
|
9170
10405
|
'pds-modal__backdrop': true,
|
|
9171
10406
|
'open': this.open
|
|
9172
|
-
}, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '
|
|
10407
|
+
}, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: 'd0f297574d53dc1718277a58c2ade00a5451f96b', class: {
|
|
9173
10408
|
'pds-modal': true,
|
|
9174
10409
|
[`pds-modal--${this.size}`]: true,
|
|
9175
10410
|
'pds-modal--scrollable': this.scrollable
|
|
9176
|
-
} }, hAsync("slot", { key: '
|
|
10411
|
+
} }, hAsync("slot", { key: '37bb5abda88b4db9304884532951980ea8b9eaf8' }))));
|
|
9177
10412
|
}
|
|
9178
10413
|
get el() { return getElement(this); }
|
|
9179
10414
|
static get watchers() { return {
|
|
@@ -9392,10 +10627,10 @@ class PdsModalContent {
|
|
|
9392
10627
|
render() {
|
|
9393
10628
|
// Only apply max-height style if it's not 'none'
|
|
9394
10629
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
9395
|
-
return (hAsync(Host, { key: '
|
|
10630
|
+
return (hAsync(Host, { key: '5357ae43a3c7e6922a182a00ddf0241775d5a2a2' }, hAsync("div", { key: '100bf34dbc72b4d7ec7de8dfe64aaa617f840a70', class: {
|
|
9396
10631
|
'pds-modal-content': true,
|
|
9397
10632
|
[`pds-modal-content--border-${this.border}`]: true
|
|
9398
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
10633
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '3f4a2281f3e1243a86dfb7ac496e6e190c1df548' }))));
|
|
9399
10634
|
}
|
|
9400
10635
|
get el() { return getElement(this); }
|
|
9401
10636
|
static get style() { return pdsModalContentCss; }
|
|
@@ -9419,7 +10654,7 @@ class PdsModalFooter {
|
|
|
9419
10654
|
registerInstance(this, hostRef);
|
|
9420
10655
|
}
|
|
9421
10656
|
render() {
|
|
9422
|
-
return (hAsync("footer", { key: '
|
|
10657
|
+
return (hAsync("footer", { key: '0fa58ce225ce31a1f40d6ce1d3276e716b36de8d', class: "pds-modal__footer" }, hAsync("slot", { key: 'df0bbdb56c711c7eb34db7181f940de11d4449ef' })));
|
|
9423
10658
|
}
|
|
9424
10659
|
static get style() { return pdsModalFooterCss; }
|
|
9425
10660
|
static get cmpMeta() { return {
|
|
@@ -9439,7 +10674,7 @@ class PdsModalHeader {
|
|
|
9439
10674
|
registerInstance(this, hostRef);
|
|
9440
10675
|
}
|
|
9441
10676
|
render() {
|
|
9442
|
-
return (hAsync("header", { key: '
|
|
10677
|
+
return (hAsync("header", { key: '1a471bd6dfa2b654f5a6ebdf8fb5baef728324b3', class: "pds-modal__header" }, hAsync("slot", { key: '946a365ab3c2ca627d618188890d385c054b4c16' })));
|
|
9443
10678
|
}
|
|
9444
10679
|
static get style() { return pdsModalHeaderCss; }
|
|
9445
10680
|
static get cmpMeta() { return {
|
|
@@ -9452,16 +10687,22 @@ class PdsModalHeader {
|
|
|
9452
10687
|
}; }
|
|
9453
10688
|
}
|
|
9454
10689
|
|
|
9455
|
-
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)}";
|
|
10690
|
+
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)}";
|
|
9456
10691
|
|
|
9457
10692
|
class PdsPopover {
|
|
9458
10693
|
constructor(hostRef) {
|
|
9459
10694
|
registerInstance(this, hostRef);
|
|
10695
|
+
this.pdsPopoverOpen = createEvent(this, "pdsPopoverOpen");
|
|
10696
|
+
this.pdsPopoverClose = createEvent(this, "pdsPopoverClose");
|
|
9460
10697
|
/**
|
|
9461
10698
|
* Determines when the popover is active
|
|
9462
10699
|
* @defaultValue false
|
|
9463
10700
|
*/
|
|
9464
10701
|
this.active = false;
|
|
10702
|
+
/**
|
|
10703
|
+
* Tracks if the component is still mounted to prevent memory leaks
|
|
10704
|
+
*/
|
|
10705
|
+
this.isComponentMounted = true;
|
|
9465
10706
|
/**
|
|
9466
10707
|
* Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
|
|
9467
10708
|
* @defaultValue "show"
|
|
@@ -9483,24 +10724,123 @@ class PdsPopover {
|
|
|
9483
10724
|
*/
|
|
9484
10725
|
this.placement = 'right';
|
|
9485
10726
|
}
|
|
9486
|
-
|
|
9487
|
-
|
|
10727
|
+
componentDidLoad() {
|
|
10728
|
+
var _a;
|
|
10729
|
+
// Attach toggle event listener to the popover element
|
|
10730
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10731
|
+
if (popoverEl != null) {
|
|
10732
|
+
this.boundToggleHandler = this.handleToggle.bind(this);
|
|
10733
|
+
popoverEl.addEventListener('toggle', this.boundToggleHandler);
|
|
10734
|
+
}
|
|
9488
10735
|
}
|
|
9489
|
-
|
|
9490
|
-
|
|
10736
|
+
disconnectedCallback() {
|
|
10737
|
+
var _a;
|
|
10738
|
+
this.isComponentMounted = false;
|
|
10739
|
+
// Clean up event listener
|
|
10740
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10741
|
+
if (popoverEl != null && this.boundToggleHandler != null) {
|
|
10742
|
+
popoverEl.removeEventListener('toggle', this.boundToggleHandler);
|
|
10743
|
+
}
|
|
10744
|
+
}
|
|
10745
|
+
/**
|
|
10746
|
+
* Opens the popover programmatically
|
|
10747
|
+
*/
|
|
10748
|
+
async show() {
|
|
10749
|
+
var _a;
|
|
10750
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10751
|
+
if (popoverEl != null && typeof popoverEl.showPopover === 'function') {
|
|
10752
|
+
try {
|
|
10753
|
+
popoverEl.showPopover();
|
|
10754
|
+
}
|
|
10755
|
+
catch (e) {
|
|
10756
|
+
// Popover might already be open
|
|
10757
|
+
console.warn('Failed to show popover:', e);
|
|
10758
|
+
}
|
|
10759
|
+
}
|
|
10760
|
+
}
|
|
10761
|
+
/**
|
|
10762
|
+
* Closes the popover programmatically
|
|
10763
|
+
*/
|
|
10764
|
+
async hide() {
|
|
10765
|
+
var _a;
|
|
10766
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10767
|
+
if (popoverEl != null && typeof popoverEl.hidePopover === 'function') {
|
|
10768
|
+
try {
|
|
10769
|
+
popoverEl.hidePopover();
|
|
10770
|
+
}
|
|
10771
|
+
catch (e) {
|
|
10772
|
+
// Popover might already be closed
|
|
10773
|
+
console.warn('Failed to hide popover:', e);
|
|
10774
|
+
}
|
|
10775
|
+
}
|
|
10776
|
+
}
|
|
10777
|
+
/**
|
|
10778
|
+
* Toggles the popover open/closed state programmatically
|
|
10779
|
+
*/
|
|
10780
|
+
async toggle() {
|
|
10781
|
+
var _a;
|
|
10782
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10783
|
+
if (popoverEl != null && typeof popoverEl.togglePopover === 'function') {
|
|
10784
|
+
try {
|
|
10785
|
+
popoverEl.togglePopover();
|
|
10786
|
+
}
|
|
10787
|
+
catch (e) {
|
|
10788
|
+
console.warn('Failed to toggle popover:', e);
|
|
10789
|
+
}
|
|
10790
|
+
}
|
|
10791
|
+
}
|
|
10792
|
+
handleToggle(event) {
|
|
10793
|
+
var _a;
|
|
10794
|
+
const toggleEvent = event;
|
|
10795
|
+
// Prepare event detail
|
|
10796
|
+
const eventDetail = {
|
|
10797
|
+
componentId: this.componentId,
|
|
10798
|
+
popoverType: this.popoverType,
|
|
10799
|
+
text: this.text,
|
|
10800
|
+
};
|
|
10801
|
+
// Update internal state based on native popover state
|
|
10802
|
+
if (toggleEvent.newState === 'open') {
|
|
10803
|
+
this.active = true;
|
|
10804
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10805
|
+
// Remove positioned class to hide popover via CSS
|
|
10806
|
+
if (popoverEl != null) {
|
|
10807
|
+
popoverEl.classList.remove('pds-popover--positioned');
|
|
10808
|
+
}
|
|
10809
|
+
// Position after the browser has rendered the popover, then show it
|
|
10810
|
+
requestAnimationFrame(() => {
|
|
10811
|
+
// Prevent memory leak if component unmounts during animation frame
|
|
10812
|
+
if (!this.isComponentMounted)
|
|
10813
|
+
return;
|
|
10814
|
+
this.handlePopoverPositioning();
|
|
10815
|
+
if (popoverEl != null) {
|
|
10816
|
+
popoverEl.classList.add('pds-popover--positioned');
|
|
10817
|
+
}
|
|
10818
|
+
});
|
|
10819
|
+
this.pdsPopoverOpen.emit(eventDetail);
|
|
10820
|
+
}
|
|
10821
|
+
else if (toggleEvent.newState === 'closed') {
|
|
10822
|
+
this.active = false;
|
|
10823
|
+
this.pdsPopoverClose.emit(eventDetail);
|
|
10824
|
+
}
|
|
9491
10825
|
}
|
|
9492
10826
|
handleScroll() {
|
|
9493
|
-
|
|
10827
|
+
var _a;
|
|
10828
|
+
// Only reposition if the popover is actually open
|
|
10829
|
+
const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
|
|
10830
|
+
if (popoverEl != null && this.active === true) {
|
|
9494
10831
|
this.handlePopoverPositioning();
|
|
9495
10832
|
}
|
|
9496
10833
|
}
|
|
9497
10834
|
handlePopoverPositioning() {
|
|
9498
10835
|
const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger');
|
|
9499
10836
|
const popoverEl = this.el.shadowRoot.querySelector('div[popover]');
|
|
9500
|
-
if (
|
|
10837
|
+
if (triggerEl == null || popoverEl == null)
|
|
9501
10838
|
return;
|
|
9502
|
-
|
|
9503
|
-
const
|
|
10839
|
+
// Cast to HTMLElement after null check for proper typing
|
|
10840
|
+
const triggerElement = triggerEl;
|
|
10841
|
+
const popoverElement = popoverEl;
|
|
10842
|
+
const triggerRect = triggerElement.getBoundingClientRect();
|
|
10843
|
+
const popoverRect = popoverElement.getBoundingClientRect();
|
|
9504
10844
|
let top = 0;
|
|
9505
10845
|
let left = 0;
|
|
9506
10846
|
const offset = 8;
|
|
@@ -9554,11 +10894,11 @@ class PdsPopover {
|
|
|
9554
10894
|
left = triggerRect.left - popoverRect.width - offset;
|
|
9555
10895
|
break;
|
|
9556
10896
|
}
|
|
9557
|
-
|
|
9558
|
-
|
|
10897
|
+
popoverElement.style.top = `${top}px`;
|
|
10898
|
+
popoverElement.style.left = `${left}px`;
|
|
9559
10899
|
}
|
|
9560
10900
|
render() {
|
|
9561
|
-
return (hAsync(Host, { key: '
|
|
10901
|
+
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' }))));
|
|
9562
10902
|
}
|
|
9563
10903
|
get el() { return getElement(this); }
|
|
9564
10904
|
static get style() { return pdsPopoverCss; }
|
|
@@ -9572,9 +10912,12 @@ class PdsPopover {
|
|
|
9572
10912
|
"text": [1],
|
|
9573
10913
|
"maxWidth": [2, "max-width"],
|
|
9574
10914
|
"placement": [513],
|
|
9575
|
-
"active": [32]
|
|
10915
|
+
"active": [32],
|
|
10916
|
+
"show": [64],
|
|
10917
|
+
"hide": [64],
|
|
10918
|
+
"toggle": [64]
|
|
9576
10919
|
},
|
|
9577
|
-
"$listeners$": [[
|
|
10920
|
+
"$listeners$": [[11, "scroll", "handleScroll"]],
|
|
9578
10921
|
"$lazyBundleId$": "-",
|
|
9579
10922
|
"$attrsToReflect$": [["placement", "placement"]]
|
|
9580
10923
|
}; }
|
|
@@ -9602,7 +10945,7 @@ class PdsProgress {
|
|
|
9602
10945
|
this.showPercent = false;
|
|
9603
10946
|
}
|
|
9604
10947
|
render() {
|
|
9605
|
-
return (hAsync(Host, { key: '
|
|
10948
|
+
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, "%")));
|
|
9606
10949
|
}
|
|
9607
10950
|
static get style() { return pdsProgressCss; }
|
|
9608
10951
|
static get cmpMeta() { return {
|
|
@@ -9636,7 +10979,7 @@ class PdsProperty {
|
|
|
9636
10979
|
this.icon = 'star';
|
|
9637
10980
|
}
|
|
9638
10981
|
render() {
|
|
9639
|
-
return (hAsync(Host, { key: '
|
|
10982
|
+
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' }))));
|
|
9640
10983
|
}
|
|
9641
10984
|
static get style() { return pdsPropertyCss; }
|
|
9642
10985
|
static get cmpMeta() { return {
|
|
@@ -9660,6 +11003,7 @@ class PdsRadio {
|
|
|
9660
11003
|
constructor(hostRef) {
|
|
9661
11004
|
registerInstance(this, hostRef);
|
|
9662
11005
|
this.pdsRadioChange = createEvent(this, "pdsRadioChange");
|
|
11006
|
+
this._type = 'radio';
|
|
9663
11007
|
/**
|
|
9664
11008
|
* Determines whether or not the radio is checked.
|
|
9665
11009
|
* @defaultValue false
|
|
@@ -9699,11 +11043,16 @@ class PdsRadio {
|
|
|
9699
11043
|
}
|
|
9700
11044
|
return classNames.join(' ');
|
|
9701
11045
|
}
|
|
11046
|
+
connectedCallback() {
|
|
11047
|
+
// Expose type property on the element instance to match native form element behavior
|
|
11048
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
11049
|
+
}
|
|
9702
11050
|
render() {
|
|
9703
|
-
return (hAsync(Host, { key: '
|
|
9704
|
-
hAsync("div", { key: '
|
|
9705
|
-
hAsync("div", { key: '
|
|
11051
|
+
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 &&
|
|
11052
|
+
hAsync("div", { key: 'd4c416a2c24331bb23c6bd829aff51dfe142ac4a', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
11053
|
+
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)));
|
|
9706
11054
|
}
|
|
11055
|
+
get el() { return getElement(this); }
|
|
9707
11056
|
static get style() { return labelCss$3 + pdsRadioCss; }
|
|
9708
11057
|
static get cmpMeta() { return {
|
|
9709
11058
|
"$flags$": 2,
|
|
@@ -9768,7 +11117,7 @@ class PdsRow {
|
|
|
9768
11117
|
})), (this.minHeight && {
|
|
9769
11118
|
'min-height': this.minHeight,
|
|
9770
11119
|
}));
|
|
9771
|
-
return hAsync(Host, { key: '
|
|
11120
|
+
return hAsync(Host, { key: 'd9fd2087c959b16ca168ee2b011a3d4bd466c113', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
9772
11121
|
}
|
|
9773
11122
|
static get style() { return pdsRowCss; }
|
|
9774
11123
|
static get cmpMeta() { return {
|
|
@@ -9795,7 +11144,7 @@ const pdsSelectTokensCss = ":host{--pine-select-color-background-danger:var(--pi
|
|
|
9795
11144
|
|
|
9796
11145
|
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)}";
|
|
9797
11146
|
|
|
9798
|
-
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:
|
|
11147
|
+
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}";
|
|
9799
11148
|
|
|
9800
11149
|
/**
|
|
9801
11150
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
@@ -9804,6 +11153,7 @@ class PdsSelect {
|
|
|
9804
11153
|
constructor(hostRef) {
|
|
9805
11154
|
registerInstance(this, hostRef);
|
|
9806
11155
|
this.pdsSelectChange = createEvent(this, "pdsSelectChange");
|
|
11156
|
+
this._type = 'select-one';
|
|
9807
11157
|
/**
|
|
9808
11158
|
* Indicates whether or not the select field is disabled.
|
|
9809
11159
|
* @defaultValue false
|
|
@@ -9866,13 +11216,26 @@ class PdsSelect {
|
|
|
9866
11216
|
this.updateSelectedOption();
|
|
9867
11217
|
this.updateFormValue();
|
|
9868
11218
|
}
|
|
11219
|
+
/**
|
|
11220
|
+
* Updates the type property when multiple changes to match native select behavior.
|
|
11221
|
+
*/
|
|
11222
|
+
multipleChanged() {
|
|
11223
|
+
this.updateType();
|
|
11224
|
+
}
|
|
11225
|
+
updateType() {
|
|
11226
|
+
this._type = this.multiple ? 'select-multiple' : 'select-one';
|
|
11227
|
+
}
|
|
9869
11228
|
connectedCallback() {
|
|
9870
11229
|
// Initialize ElementInternals for form association
|
|
9871
11230
|
if (this.el.attachInternals) {
|
|
9872
11231
|
this.internals = this.el.attachInternals();
|
|
9873
11232
|
}
|
|
11233
|
+
// Expose type property on the element instance to match native form element behavior
|
|
11234
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
9874
11235
|
}
|
|
9875
11236
|
componentWillLoad() {
|
|
11237
|
+
// Set initial type based on multiple prop
|
|
11238
|
+
this.updateType();
|
|
9876
11239
|
this.updateSelectedOption();
|
|
9877
11240
|
}
|
|
9878
11241
|
componentDidLoad() {
|
|
@@ -9995,12 +11358,13 @@ class PdsSelect {
|
|
|
9995
11358
|
}
|
|
9996
11359
|
render() {
|
|
9997
11360
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
9998
|
-
return (hAsync(Host, { key: '
|
|
11361
|
+
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 }))));
|
|
9999
11362
|
}
|
|
10000
11363
|
static get formAssociated() { return true; }
|
|
10001
11364
|
get el() { return getElement(this); }
|
|
10002
11365
|
static get watchers() { return {
|
|
10003
|
-
"value": ["valueChanged"]
|
|
11366
|
+
"value": ["valueChanged"],
|
|
11367
|
+
"multiple": ["multipleChanged"]
|
|
10004
11368
|
}; }
|
|
10005
11369
|
static get style() { return pdsSelectTokensCss + (labelCss$2 + pdsSelectCss); }
|
|
10006
11370
|
static get cmpMeta() { return {
|
|
@@ -12737,7 +14101,7 @@ class PdsSortable {
|
|
|
12737
14101
|
Sortable.create(this.el, sortableOptions);
|
|
12738
14102
|
}
|
|
12739
14103
|
render() {
|
|
12740
|
-
return (hAsync(Host, { key: '
|
|
14104
|
+
return (hAsync(Host, { key: '925de28efdf7d2f1b6f6f5b94da4dbb383c0421a', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: '3525abab4ff66a63c90f4db99e5bb090308afc9d' })));
|
|
12741
14105
|
}
|
|
12742
14106
|
get el() { return getElement(this); }
|
|
12743
14107
|
static get style() { return pdsSortableCss; }
|
|
@@ -12784,7 +14148,7 @@ class PdsSortableItem {
|
|
|
12784
14148
|
}
|
|
12785
14149
|
}
|
|
12786
14150
|
render() {
|
|
12787
|
-
return (hAsync(Host, { key: '
|
|
14151
|
+
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" })))));
|
|
12788
14152
|
}
|
|
12789
14153
|
get el() { return getElement(this); }
|
|
12790
14154
|
static get style() { return pdsSortableItemCss; }
|
|
@@ -12811,6 +14175,7 @@ class PdsSwitch {
|
|
|
12811
14175
|
registerInstance(this, hostRef);
|
|
12812
14176
|
this.pdsSwitchChange = createEvent(this, "pdsSwitchChange");
|
|
12813
14177
|
this.inheritedAttributes = {};
|
|
14178
|
+
this._type = 'checkbox';
|
|
12814
14179
|
/**
|
|
12815
14180
|
* Determines the input 'checked' state.
|
|
12816
14181
|
*/
|
|
@@ -12850,6 +14215,8 @@ class PdsSwitch {
|
|
|
12850
14215
|
if (this.el.attachInternals) {
|
|
12851
14216
|
this.internals = this.el.attachInternals();
|
|
12852
14217
|
}
|
|
14218
|
+
// Expose type property on the element instance to match native form element behavior
|
|
14219
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
12853
14220
|
}
|
|
12854
14221
|
componentDidLoad() {
|
|
12855
14222
|
this.updateFormValue();
|
|
@@ -12886,9 +14253,9 @@ class PdsSwitch {
|
|
|
12886
14253
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
12887
14254
|
}
|
|
12888
14255
|
render() {
|
|
12889
|
-
return (hAsync(Host, { key: '
|
|
12890
|
-
hAsync("div", { key: '
|
|
12891
|
-
hAsync("div", { key: '
|
|
14256
|
+
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 &&
|
|
14257
|
+
hAsync("div", { key: 'd16fc523de5eacdd14dc4edce347e3be63edeb3e', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
14258
|
+
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)));
|
|
12892
14259
|
}
|
|
12893
14260
|
static get formAssociated() { return true; }
|
|
12894
14261
|
get el() { return getElement(this); }
|
|
@@ -12918,7 +14285,7 @@ class PdsSwitch {
|
|
|
12918
14285
|
}; }
|
|
12919
14286
|
}
|
|
12920
14287
|
|
|
12921
|
-
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:
|
|
14288
|
+
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}";
|
|
12922
14289
|
|
|
12923
14290
|
class PdsTab {
|
|
12924
14291
|
constructor(hostRef) {
|
|
@@ -12934,9 +14301,9 @@ class PdsTab {
|
|
|
12934
14301
|
this.pdsTabClick.emit([index, parentComponentId]);
|
|
12935
14302
|
}
|
|
12936
14303
|
render() {
|
|
12937
|
-
const availabilityTabEdgeInlineStart = (hAsync("span", { key: '
|
|
12938
|
-
const availabilityTabEdgeInlineEnd = (hAsync("span", { key: '
|
|
12939
|
-
return (hAsync(Host, { key: '
|
|
14304
|
+
const availabilityTabEdgeInlineStart = (hAsync("span", { key: '837cf57372db654f6ca411054446ebf0bc27b539', class: "pds-tab-edge", role: "presentation" }));
|
|
14305
|
+
const availabilityTabEdgeInlineEnd = (hAsync("span", { key: 'e15055442d56b50e6ac21bfb76fc0f599406a4fb', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
|
|
14306
|
+
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' })))));
|
|
12940
14307
|
}
|
|
12941
14308
|
get el() { return getElement(this); }
|
|
12942
14309
|
static get style() { return pdsTabCss; }
|
|
@@ -12956,7 +14323,7 @@ class PdsTab {
|
|
|
12956
14323
|
}; }
|
|
12957
14324
|
}
|
|
12958
14325
|
|
|
12959
|
-
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:
|
|
14326
|
+
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}";
|
|
12960
14327
|
|
|
12961
14328
|
class PdsTable {
|
|
12962
14329
|
constructor(hostRef) {
|
|
@@ -13176,7 +14543,7 @@ class PdsTableBody {
|
|
|
13176
14543
|
registerInstance(this, hostRef);
|
|
13177
14544
|
}
|
|
13178
14545
|
render() {
|
|
13179
|
-
return (hAsync(Host, { key: '
|
|
14546
|
+
return (hAsync(Host, { key: '7c9b15bea47bcede62a93ef11ee9dba093450ab9', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'fab0b2ca27185373cdb7b29d9cb1807b4097aea9' })));
|
|
13180
14547
|
}
|
|
13181
14548
|
static get style() { return pdsTableBodyCss; }
|
|
13182
14549
|
static get cmpMeta() { return {
|
|
@@ -13189,7 +14556,7 @@ class PdsTableBody {
|
|
|
13189
14556
|
}; }
|
|
13190
14557
|
}
|
|
13191
14558
|
|
|
13192
|
-
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:
|
|
14559
|
+
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}";
|
|
13193
14560
|
|
|
13194
14561
|
class PdsTableCell {
|
|
13195
14562
|
constructor(hostRef) {
|
|
@@ -13287,11 +14654,11 @@ class PdsTableCell {
|
|
|
13287
14654
|
return classNames.join(' ');
|
|
13288
14655
|
}
|
|
13289
14656
|
render() {
|
|
13290
|
-
return (hAsync(Host, { key: '
|
|
14657
|
+
return (hAsync(Host, { key: 'b1c76cfb3fa26b7e59586cfd693380701c9146ff', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
13291
14658
|
this.tableRef.fixedColumn &&
|
|
13292
14659
|
this.tableRef.selectable
|
|
13293
14660
|
? { '--fixed-cell-position': '40px' }
|
|
13294
|
-
: {} }, hAsync("slot", { key: '
|
|
14661
|
+
: {} }, hAsync("slot", { key: '1a04730905bf7ad930141c1914f37dd7717570d8' })));
|
|
13295
14662
|
}
|
|
13296
14663
|
get hostElement() { return getElement(this); }
|
|
13297
14664
|
static get style() { return pdsTableCellCss; }
|
|
@@ -13317,7 +14684,7 @@ const closest = (selector, el) => {
|
|
|
13317
14684
|
closest(selector, el.getRootNode().host)));
|
|
13318
14685
|
};
|
|
13319
14686
|
|
|
13320
|
-
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:
|
|
14687
|
+
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)}";
|
|
13321
14688
|
|
|
13322
14689
|
class PdsTableHead {
|
|
13323
14690
|
constructor(hostRef) {
|
|
@@ -13353,7 +14720,7 @@ class PdsTableHead {
|
|
|
13353
14720
|
}
|
|
13354
14721
|
}
|
|
13355
14722
|
render() {
|
|
13356
|
-
return (hAsync(Host, { key: '
|
|
14723
|
+
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' })));
|
|
13357
14724
|
}
|
|
13358
14725
|
get hostElement() { return getElement(this); }
|
|
13359
14726
|
static get style() { return pdsTableHeadCss; }
|
|
@@ -13370,7 +14737,7 @@ class PdsTableHead {
|
|
|
13370
14737
|
}; }
|
|
13371
14738
|
}
|
|
13372
14739
|
|
|
13373
|
-
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:
|
|
14740
|
+
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}";
|
|
13374
14741
|
|
|
13375
14742
|
class PdsTableHeadCell {
|
|
13376
14743
|
constructor(hostRef) {
|
|
@@ -13492,11 +14859,11 @@ class PdsTableHeadCell {
|
|
|
13492
14859
|
return classNames.join(' ');
|
|
13493
14860
|
}
|
|
13494
14861
|
render() {
|
|
13495
|
-
return (hAsync(Host, { key: '
|
|
14862
|
+
return (hAsync(Host, { key: '3d950a2997ef4c095d08f9c4e67b9a963fea093d', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
13496
14863
|
this.tableRef.fixedColumn &&
|
|
13497
14864
|
this.tableRef.selectable
|
|
13498
14865
|
? { '--fixed-cell-position': '40px' }
|
|
13499
|
-
: {} }, hAsync("slot", { key: '
|
|
14866
|
+
: {} }, hAsync("slot", { key: '8ca7d4d169612e5ba237691d9a5ec9ed35610230' }), this.sortable && (hAsync("pds-icon", { key: 'e2e214b39a1706d887bb34a0d4fc3f632e752306', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
|
|
13500
14867
|
}
|
|
13501
14868
|
get hostElement() { return getElement(this); }
|
|
13502
14869
|
static get style() { return pdsTableHeadCellCss; }
|
|
@@ -13516,7 +14883,7 @@ class PdsTableHeadCell {
|
|
|
13516
14883
|
}; }
|
|
13517
14884
|
}
|
|
13518
14885
|
|
|
13519
|
-
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:
|
|
14886
|
+
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)}";
|
|
13520
14887
|
|
|
13521
14888
|
class PdsTableRow {
|
|
13522
14889
|
constructor(hostRef) {
|
|
@@ -13563,7 +14930,7 @@ class PdsTableRow {
|
|
|
13563
14930
|
}
|
|
13564
14931
|
}
|
|
13565
14932
|
render() {
|
|
13566
|
-
return (hAsync(Host, { key: '
|
|
14933
|
+
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' })));
|
|
13567
14934
|
}
|
|
13568
14935
|
get hostElement() { return getElement(this); }
|
|
13569
14936
|
static get style() { return pdsTableRowCss; }
|
|
@@ -13592,7 +14959,7 @@ class PdsTabpanel {
|
|
|
13592
14959
|
this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
|
|
13593
14960
|
}
|
|
13594
14961
|
render() {
|
|
13595
|
-
return (hAsync(Host, { key: '
|
|
14962
|
+
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' }))));
|
|
13596
14963
|
}
|
|
13597
14964
|
get el() { return getElement(this); }
|
|
13598
14965
|
static get style() { return pdsTabpanelCss; }
|
|
@@ -13616,6 +14983,7 @@ const pdsTabsCss = ":host{--tabs-dimension-panel-margin-top:var(--pine-dimension
|
|
|
13616
14983
|
/**
|
|
13617
14984
|
* @slot tabs - Content is placed within the `div[role="tablist"]` element as children
|
|
13618
14985
|
* @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
|
|
14986
|
+
* @part tab-list - Exposes the container element that holds all the tab buttons for styling.
|
|
13619
14987
|
*/
|
|
13620
14988
|
class PdsTabs {
|
|
13621
14989
|
constructor(hostRef) {
|
|
@@ -13629,7 +14997,13 @@ class PdsTabs {
|
|
|
13629
14997
|
}
|
|
13630
14998
|
handleKeyDown(ev) {
|
|
13631
14999
|
const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
|
|
13632
|
-
if
|
|
15000
|
+
// Only handle keyboard navigation if the event originated from a tab button
|
|
15001
|
+
// that belongs to THIS tabs component
|
|
15002
|
+
const target = ev.target;
|
|
15003
|
+
const targetTab = target.closest('pds-tab');
|
|
15004
|
+
// Check if the tab belongs to this tabs instance (not a nested one)
|
|
15005
|
+
const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;
|
|
15006
|
+
if (keySet.includes(ev.key) && isOwnTab) {
|
|
13633
15007
|
ev.preventDefault();
|
|
13634
15008
|
this.moveActiveTab(ev.key);
|
|
13635
15009
|
}
|
|
@@ -13658,8 +15032,12 @@ class PdsTabs {
|
|
|
13658
15032
|
this.activeTabIndex = moveFocusTo;
|
|
13659
15033
|
}
|
|
13660
15034
|
findAllChildren() {
|
|
13661
|
-
|
|
13662
|
-
|
|
15035
|
+
// Only select direct children tabs/tabpanels, not nested ones
|
|
15036
|
+
const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));
|
|
15037
|
+
const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));
|
|
15038
|
+
// Filter to only include tabs that belong to this tabs component (not nested)
|
|
15039
|
+
this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
|
|
15040
|
+
this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
|
|
13663
15041
|
}
|
|
13664
15042
|
propGeneration(child, index = 0) {
|
|
13665
15043
|
child.parentComponentId = this.componentId.toString();
|
|
@@ -13693,7 +15071,7 @@ class PdsTabs {
|
|
|
13693
15071
|
this.passPropsToChildren();
|
|
13694
15072
|
}
|
|
13695
15073
|
render() {
|
|
13696
|
-
return (hAsync(Host, { key: '
|
|
15074
|
+
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" })));
|
|
13697
15075
|
}
|
|
13698
15076
|
get el() { return getElement(this); }
|
|
13699
15077
|
static get style() { return pdsTabsCss; }
|
|
@@ -13736,7 +15114,7 @@ class PdsText {
|
|
|
13736
15114
|
${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
|
|
13737
15115
|
${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
|
|
13738
15116
|
`;
|
|
13739
|
-
return (hAsync(Tag, { key: '
|
|
15117
|
+
return (hAsync(Tag, { key: '101a42ae93ac81968a177c7e0d569417f376909c', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: '903b04a19b948e04d577c8585a76647033b9c36e' })));
|
|
13740
15118
|
}
|
|
13741
15119
|
get el() { return getElement(this); }
|
|
13742
15120
|
static get style() { return pdsTextCss; }
|
|
@@ -13764,7 +15142,7 @@ const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{c
|
|
|
13764
15142
|
|
|
13765
15143
|
const pdsInputTokensCss = ":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";
|
|
13766
15144
|
|
|
13767
|
-
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:
|
|
15145
|
+
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}";
|
|
13768
15146
|
|
|
13769
15147
|
/**
|
|
13770
15148
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
@@ -13777,6 +15155,7 @@ class PdsTextarea {
|
|
|
13777
15155
|
this.pdsInput = createEvent(this, "pdsInput");
|
|
13778
15156
|
this.pdsTextareaChange = createEvent(this, "pdsTextareaChange");
|
|
13779
15157
|
this.inheritedAttributes = {};
|
|
15158
|
+
this._type = 'textarea';
|
|
13780
15159
|
/**
|
|
13781
15160
|
* Determines whether or not the textarea is disabled.
|
|
13782
15161
|
* @defaultValue false
|
|
@@ -13940,6 +15319,8 @@ class PdsTextarea {
|
|
|
13940
15319
|
this.updateFormValue();
|
|
13941
15320
|
// Setup ResizeObserver for character counter positioning
|
|
13942
15321
|
this.setupResizeObserver();
|
|
15322
|
+
// Expose type property on the element instance to match native form element behavior
|
|
15323
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
13943
15324
|
}
|
|
13944
15325
|
/**
|
|
13945
15326
|
* Sets up ResizeObserver to track textarea resize for character counter positioning
|
|
@@ -14054,10 +15435,10 @@ class PdsTextarea {
|
|
|
14054
15435
|
}
|
|
14055
15436
|
render() {
|
|
14056
15437
|
const value = this.getValue();
|
|
14057
|
-
return (hAsync(Host, { key: '
|
|
14058
|
-
hAsync("div", { key: '
|
|
14059
|
-
hAsync("p", { key: '
|
|
14060
|
-
hAsync("p", { key: '
|
|
15438
|
+
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 &&
|
|
15439
|
+
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 &&
|
|
15440
|
+
hAsync("p", { key: '237e251d35403fc4225123ac56476b656ab9ad48', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
15441
|
+
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))));
|
|
14061
15442
|
}
|
|
14062
15443
|
static get formAssociated() { return true; }
|
|
14063
15444
|
get el() { return getElement(this); }
|
|
@@ -14179,13 +15560,13 @@ class PdsToast {
|
|
|
14179
15560
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
14180
15561
|
}
|
|
14181
15562
|
render() {
|
|
14182
|
-
return (hAsync(Host, { key: '
|
|
15563
|
+
return (hAsync(Host, { key: 'cf03483967a2414e2c6ee68587af609af0bb64c6', hidden: !this.isVisible }, hAsync("div", { key: '70413e3220f6890dd2367bc96a7060269a33124c', class: {
|
|
14183
15564
|
'pds-toast': true,
|
|
14184
15565
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
14185
15566
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
14186
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
15567
|
+
}, 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: () => {
|
|
14187
15568
|
this.dismiss();
|
|
14188
|
-
}, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: '
|
|
15569
|
+
}, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: '495a71b67c4a6690f4c1b9562ddd8862d88a85e4', name: "remove" }))))));
|
|
14189
15570
|
}
|
|
14190
15571
|
static get watchers() { return {
|
|
14191
15572
|
"duration": ["handleDurationChange"]
|
|
@@ -14210,7 +15591,7 @@ class PdsToast {
|
|
|
14210
15591
|
}; }
|
|
14211
15592
|
}
|
|
14212
15593
|
|
|
14213
|
-
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:
|
|
15594
|
+
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}";
|
|
14214
15595
|
|
|
14215
15596
|
/**
|
|
14216
15597
|
* @slot (default) - The tooltip's target element
|
|
@@ -14425,7 +15806,7 @@ class PdsTooltip {
|
|
|
14425
15806
|
this.portalEl = document.createElement('div');
|
|
14426
15807
|
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'}`;
|
|
14427
15808
|
this.portalEl.style.position = 'fixed';
|
|
14428
|
-
this.portalEl.style.zIndex = '
|
|
15809
|
+
this.portalEl.style.zIndex = 'var(--pine-z-index-nuclear)';
|
|
14429
15810
|
if (this.portalEl.id === '') {
|
|
14430
15811
|
const suffix = PdsTooltip.instanceCounter++;
|
|
14431
15812
|
const baseId = this.componentId || this.el.id || 'pds-tooltip';
|
|
@@ -14525,9 +15906,9 @@ class PdsTooltip {
|
|
|
14525
15906
|
}
|
|
14526
15907
|
render() {
|
|
14527
15908
|
const hostId = this.componentId || undefined;
|
|
14528
|
-
return (hAsync(Host, { key: '
|
|
15909
|
+
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,
|
|
14529
15910
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
14530
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
15911
|
+
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" }))));
|
|
14531
15912
|
}
|
|
14532
15913
|
get el() { return getElement(this); }
|
|
14533
15914
|
static get watchers() { return {
|
|
@@ -14571,6 +15952,8 @@ registerComponents([
|
|
|
14571
15952
|
PdsDropdownMenu,
|
|
14572
15953
|
PdsDropdownMenuItem,
|
|
14573
15954
|
PdsDropdownMenuSeparator,
|
|
15955
|
+
PdsFilter,
|
|
15956
|
+
PdsFilters,
|
|
14574
15957
|
PdsIcon,
|
|
14575
15958
|
PdsImage,
|
|
14576
15959
|
PdsInput,
|