@pine-ds/core 3.7.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/index2.js +1 -1
- package/components/index2.js.map +1 -1
- package/components/mock-pds-modal.js +1 -1
- package/components/mock-pds-modal.js.map +1 -1
- package/components/pds-button2.js +1 -1
- package/components/pds-button2.js.map +1 -1
- package/components/pds-checkbox2.js +7 -4
- 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 +414 -43
- package/components/pds-combobox.js.map +1 -1
- package/components/pds-copytext.js +3 -3
- package/components/pds-copytext.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.js +3 -3
- package/components/pds-filter.js.map +1 -1
- package/components/pds-input.js +1 -1
- package/components/pds-input.js.map +1 -1
- package/components/pds-modal.js +1 -1
- 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-radio.js +10 -4
- package/components/pds-radio.js.map +1 -1
- package/components/pds-select.js +21 -5
- package/components/pds-select.js.map +1 -1
- package/components/pds-switch.js +7 -4
- package/components/pds-switch.js.map +1 -1
- package/components/pds-tab.js +1 -1
- package/components/pds-tab.js.map +1 -1
- package/components/pds-table-cell2.js +1 -1
- package/components/pds-table-cell2.js.map +1 -1
- package/components/pds-table-head-cell2.js +1 -1
- package/components/pds-table-head-cell2.js.map +1 -1
- package/components/pds-table-head.js +1 -1
- package/components/pds-table-head.js.map +1 -1
- package/components/pds-table-row.js +1 -1
- package/components/pds-table-row.js.map +1 -1
- package/components/pds-table.js +1 -1
- package/components/pds-table.js.map +1 -1
- package/components/pds-tabs.js +14 -4
- package/components/pds-tabs.js.map +1 -1
- package/components/pds-textarea.js +9 -6
- package/components/pds-textarea.js.map +1 -1
- 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-CTirFLR-.js → index-DtnvzYhe.js} +3 -3
- package/dist/cjs/index-DtnvzYhe.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mock-pds-modal.cjs.entry.js +1 -1
- 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 +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +2 -2
- package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js +8 -5
- 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 +3 -3
- 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 +398 -40
- 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 +4 -4
- 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-dropdown-menu.cjs.entry.js +1 -1
- 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 +4 -4
- package/dist/cjs/pds-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-filter.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +3 -3
- 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 +1 -1
- package/dist/cjs/pds-modal.cjs.entry.js +1 -1
- 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 +117 -12
- 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-radio.cjs.entry.js +11 -5
- 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-select.cjs.entry.js +20 -5
- 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 +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +8 -5
- 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 +1 -1
- 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-cell.cjs.entry.js +1 -1
- 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 +2 -2
- 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 +1 -1
- 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 +1 -1
- 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 +1 -1
- 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-tabs.cjs.entry.js +14 -4
- 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-textarea.cjs.entry.js +10 -7
- 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-tooltip.cjs.entry.js +4 -4
- 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 +1 -1
- package/dist/collection/components/pds-button/pds-button.css +6 -3
- 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 +175 -4
- package/dist/collection/components/pds-combobox/pds-combobox.js +516 -43
- package/dist/collection/components/pds-combobox/pds-combobox.js.map +1 -1
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +79 -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.css +1 -1
- package/dist/collection/components/pds-filters/pds-filter/pds-filter.css +1 -1
- package/dist/collection/components/pds-filters/pds-filter/pds-filter.js +2 -2
- package/dist/collection/components/pds-filters/pds-filter/pds-filter.js.map +1 -1
- package/dist/collection/components/pds-input/pds-input.css +18 -3
- package/dist/collection/components/pds-input/stories/pds-input.stories.js +42 -0
- package/dist/collection/components/pds-modal/pds-modal.css +2 -2
- 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-radio/pds-radio.js +10 -4
- package/dist/collection/components/pds-radio/pds-radio.js.map +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-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-cell/pds-table-cell.css +1 -1
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.css +1 -1
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css +1 -1
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.css +1 -1
- package/dist/collection/components/pds-table/pds-table.css +1 -1
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +2 -2
- package/dist/collection/components/pds-tabs/pds-tabs.js +14 -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-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-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 +341 -17
- package/dist/esm/form-DwjNklzi.js +47 -0
- package/dist/esm/form-DwjNklzi.js.map +1 -0
- package/dist/esm/{index-D4MkIUXU.js → index-D4zJBIgl.js} +3 -3
- package/dist/esm/index-D4zJBIgl.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mock-pds-modal.entry.js +1 -1
- package/dist/esm/mock-pds-modal.entry.js.map +1 -1
- package/dist/esm/pds-accordion.entry.js +1 -1
- package/dist/esm/pds-avatar.entry.js +1 -1
- package/dist/esm/pds-button.entry.js +2 -2
- package/dist/esm/pds-button.entry.js.map +1 -1
- package/dist/esm/pds-checkbox.entry.js +8 -5
- package/dist/esm/pds-checkbox.entry.js.map +1 -1
- package/dist/esm/pds-chip.entry.js +3 -3
- package/dist/esm/pds-chip.entry.js.map +1 -1
- package/dist/esm/pds-combobox.entry.js +398 -40
- package/dist/esm/pds-combobox.entry.js.map +1 -1
- package/dist/esm/pds-copytext.entry.js +4 -4
- package/dist/esm/pds-copytext.entry.js.map +1 -1
- package/dist/esm/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu.entry.js.map +1 -1
- package/dist/esm/pds-filter.entry.js +4 -4
- package/dist/esm/pds-filter.entry.js.map +1 -1
- package/dist/esm/pds-input.entry.js +3 -3
- package/dist/esm/pds-input.entry.js.map +1 -1
- package/dist/esm/pds-link.entry.js +1 -1
- package/dist/esm/pds-modal.entry.js +1 -1
- 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-radio.entry.js +12 -6
- package/dist/esm/pds-radio.entry.js.map +1 -1
- package/dist/esm/pds-select.entry.js +20 -5
- package/dist/esm/pds-select.entry.js.map +1 -1
- package/dist/esm/pds-sortable-item.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js +8 -5
- package/dist/esm/pds-switch.entry.js.map +1 -1
- package/dist/esm/pds-tab.entry.js +1 -1
- package/dist/esm/pds-tab.entry.js.map +1 -1
- package/dist/esm/pds-table-cell.entry.js +1 -1
- package/dist/esm/pds-table-cell.entry.js.map +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +2 -2
- package/dist/esm/pds-table-head-cell.entry.js.map +1 -1
- package/dist/esm/pds-table-head.entry.js +1 -1
- package/dist/esm/pds-table-head.entry.js.map +1 -1
- package/dist/esm/pds-table-row.entry.js +1 -1
- package/dist/esm/pds-table-row.entry.js.map +1 -1
- package/dist/esm/pds-table.entry.js +1 -1
- package/dist/esm/pds-table.entry.js.map +1 -1
- package/dist/esm/pds-tabs.entry.js +14 -4
- package/dist/esm/pds-tabs.entry.js.map +1 -1
- package/dist/esm/pds-textarea.entry.js +10 -7
- package/dist/esm/pds-textarea.entry.js.map +1 -1
- package/dist/esm/pds-tooltip.entry.js +4 -4
- package/dist/esm/pds-tooltip.entry.js.map +1 -1
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm-es5/form-DwjNklzi.js +2 -0
- package/dist/esm-es5/form-DwjNklzi.js.map +1 -0
- package/dist/esm-es5/{index-D4MkIUXU.js → index-D4zJBIgl.js} +1 -1
- package/dist/esm-es5/index-D4zJBIgl.js.map +1 -0
- 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-avatar.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 +1 -1
- 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-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 +1 -1
- package/dist/esm-es5/pds-filter.entry.js.map +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js.map +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-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-radio.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js.map +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-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-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-head.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-row.entry.js +1 -1
- package/dist/esm-es5/pds-table-row.entry.js.map +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js.map +1 -1
- package/dist/esm-es5/pds-tabs.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js.map +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js.map +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js.map +1 -1
- package/dist/esm-es5/pine-core.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-8ded79aa.system.entry.js → p-0486ecc6.system.entry.js} +2 -2
- package/dist/pine-core/{p-8ded79aa.system.entry.js.map → p-0486ecc6.system.entry.js.map} +1 -1
- package/dist/pine-core/{p-af56cb57.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-20466115.entry.js +2 -0
- package/dist/pine-core/p-20466115.entry.js.map +1 -0
- package/dist/pine-core/{p-72d87dc6.system.entry.js → p-2054b5cb.system.entry.js} +2 -2
- package/dist/pine-core/{p-c0601420.system.entry.js → p-2aab28b1.system.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-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-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-896e2f1b.entry.js → p-725c350c.entry.js} +2 -2
- package/dist/pine-core/{p-896e2f1b.entry.js.map → p-725c350c.entry.js.map} +1 -1
- 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-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-87ed43d5.entry.js +2 -0
- package/dist/pine-core/p-87ed43d5.entry.js.map +1 -0
- package/dist/pine-core/{p-a54d6a53.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-94183716.entry.js +2 -0
- package/dist/pine-core/p-94183716.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-COwpA8ab.system.js.map → p-B-Doh1Wu.system.js.map} +1 -1
- package/dist/pine-core/{p-BSkbMuB5.system.js → p-BG99uNIQ.system.js} +1 -1
- 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-BLC5kuro.system.js.map +1 -0
- package/dist/pine-core/p-BPjnTOEL.system.js +1 -1
- package/dist/pine-core/{p-X5M4eshC.system.js.map → p-BRIdBthP.system.js.map} +1 -1
- package/dist/pine-core/{p-B57Bybw-.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-C1KChp5Q.system.js.map +1 -0
- package/dist/pine-core/p-C2W-sHx5.system.js.map +1 -0
- 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-Cqzmj3D8.system.js.map +1 -0
- package/dist/pine-core/p-Cxlv_2hD.system.js.map +1 -0
- package/dist/pine-core/p-D0foS5EP.system.js.map +1 -0
- package/dist/pine-core/{p-D4MkIUXU.js → p-D4zJBIgl.js} +1 -1
- package/dist/pine-core/p-D4zJBIgl.js.map +1 -0
- 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-DgE9ds9o.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-DpemOPFJ.system.js.map +1 -0
- package/dist/pine-core/p-DpzRSULT.system.js.map +1 -0
- 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-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-a2708028.entry.js +2 -0
- package/dist/pine-core/p-a2708028.entry.js.map +1 -0
- package/dist/pine-core/{p-46820152.entry.js → p-a3785977.entry.js} +2 -2
- 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-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-b9aafec7.system.entry.js +2 -0
- package/dist/pine-core/p-b9aafec7.system.entry.js.map +1 -0
- 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-cffc98ae.entry.js +3 -0
- package/dist/pine-core/p-cffc98ae.entry.js.map +1 -0
- package/dist/pine-core/{p-559b4ebc.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-c63e7909.system.entry.js → p-dace69e7.system.entry.js} +2 -2
- 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-ab4307c7.system.entry.js → p-e702a8dc.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-f6d0bd39.entry.js +2 -0
- package/dist/pine-core/p-f6d0bd39.entry.js.map +1 -0
- 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-d325287b.entry.js.map → p-ozqEY4Zc.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.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-filter.entry.esm.js.map +1 -1
- 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/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 +56 -2
- 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-textarea/pds-textarea.d.ts +1 -0
- package/dist/types/components.d.ts +94 -10
- package/dist/types/utils/form.d.ts +9 -0
- package/dist/types/utils/types.d.ts +2 -0
- package/hydrate/index.js +629 -101
- package/hydrate/index.mjs +629 -101
- package/package.json +2 -2
- package/dist/cjs/form-Bx4nzJBo.js.map +0 -1
- package/dist/cjs/index-CTirFLR-.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-D4MkIUXU.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-D4MkIUXU.js.map +0 -1
- package/dist/pine-core/p-0075bbbe.system.entry.js +0 -2
- package/dist/pine-core/p-0075bbbe.system.entry.js.map +0 -1
- package/dist/pine-core/p-0975b749.system.entry.js +0 -2
- package/dist/pine-core/p-0975b749.system.entry.js.map +0 -1
- package/dist/pine-core/p-0befa8f0.entry.js +0 -2
- package/dist/pine-core/p-0befa8f0.entry.js.map +0 -1
- package/dist/pine-core/p-0d18171c.system.entry.js +0 -2
- package/dist/pine-core/p-0d18171c.system.entry.js.map +0 -1
- package/dist/pine-core/p-1773aeac.system.entry.js +0 -2
- package/dist/pine-core/p-1773aeac.system.entry.js.map +0 -1
- package/dist/pine-core/p-265372d3.entry.js +0 -2
- package/dist/pine-core/p-265372d3.entry.js.map +0 -1
- package/dist/pine-core/p-29b2af94.entry.js +0 -2
- package/dist/pine-core/p-29b2af94.entry.js.map +0 -1
- package/dist/pine-core/p-2b452883.system.entry.js +0 -2
- package/dist/pine-core/p-2b452883.system.entry.js.map +0 -1
- package/dist/pine-core/p-30e8c3ea.entry.js +0 -2
- package/dist/pine-core/p-30e8c3ea.entry.js.map +0 -1
- package/dist/pine-core/p-31f6fcc1.entry.js +0 -2
- package/dist/pine-core/p-31f6fcc1.entry.js.map +0 -1
- package/dist/pine-core/p-3b20aa93.system.entry.js +0 -2
- package/dist/pine-core/p-3b20aa93.system.entry.js.map +0 -1
- package/dist/pine-core/p-3e7933bf.entry.js +0 -2
- package/dist/pine-core/p-3e7933bf.entry.js.map +0 -1
- package/dist/pine-core/p-4534e8cc.system.entry.js +0 -2
- package/dist/pine-core/p-4534e8cc.system.entry.js.map +0 -1
- package/dist/pine-core/p-4b3a8cab.entry.js +0 -2
- package/dist/pine-core/p-4b3a8cab.entry.js.map +0 -1
- package/dist/pine-core/p-4c8bebd8.system.entry.js +0 -2
- package/dist/pine-core/p-4c8bebd8.system.entry.js.map +0 -1
- package/dist/pine-core/p-4dda1edf.entry.js +0 -2
- package/dist/pine-core/p-4dda1edf.entry.js.map +0 -1
- package/dist/pine-core/p-4e55730d.entry.js +0 -2
- package/dist/pine-core/p-4e55730d.entry.js.map +0 -1
- package/dist/pine-core/p-56f6f106.entry.js +0 -2
- package/dist/pine-core/p-56f6f106.entry.js.map +0 -1
- package/dist/pine-core/p-5cc0244d.system.entry.js +0 -2
- package/dist/pine-core/p-5cc0244d.system.entry.js.map +0 -1
- package/dist/pine-core/p-74f03e75.entry.js +0 -2
- package/dist/pine-core/p-74f03e75.entry.js.map +0 -1
- package/dist/pine-core/p-7b0517e5.system.entry.js +0 -2
- package/dist/pine-core/p-7b0517e5.system.entry.js.map +0 -1
- package/dist/pine-core/p-7b66bc50.entry.js +0 -3
- package/dist/pine-core/p-7b66bc50.entry.js.map +0 -1
- package/dist/pine-core/p-7eb22880.entry.js +0 -2
- package/dist/pine-core/p-7eb22880.entry.js.map +0 -1
- package/dist/pine-core/p-8501429f.entry.js +0 -2
- package/dist/pine-core/p-8501429f.entry.js.map +0 -1
- package/dist/pine-core/p-94fe15b0.system.entry.js +0 -2
- package/dist/pine-core/p-94fe15b0.system.entry.js.map +0 -1
- package/dist/pine-core/p-95aee0b1.entry.js +0 -2
- package/dist/pine-core/p-95aee0b1.entry.js.map +0 -1
- package/dist/pine-core/p-B02VgXkx.system.js.map +0 -1
- package/dist/pine-core/p-BFiM1S8V.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-BJhtHwq5.system.js.map +0 -1
- package/dist/pine-core/p-BQFgzIQT.system.js.map +0 -1
- package/dist/pine-core/p-BSkbMuB5.system.js.map +0 -1
- package/dist/pine-core/p-BigOVPun.system.js.map +0 -1
- package/dist/pine-core/p-BmFGXXkm.system.js.map +0 -1
- package/dist/pine-core/p-CHVzHNgU.system.js.map +0 -1
- package/dist/pine-core/p-CV0Lw9gs.system.js.map +0 -1
- package/dist/pine-core/p-CZqgW7e3.system.js.map +0 -1
- package/dist/pine-core/p-Cc1q-FuD.system.js.map +0 -1
- package/dist/pine-core/p-D3SrjYeb.system.js.map +0 -1
- package/dist/pine-core/p-D4MkIUXU.js.map +0 -1
- package/dist/pine-core/p-D9veIL-g.system.js.map +0 -1
- package/dist/pine-core/p-DGFR-x7P.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-DeR0sSWy.system.js.map +0 -1
- package/dist/pine-core/p-Df597YUK.system.js.map +0 -1
- package/dist/pine-core/p-Ek6vvXfI.system.js.map +0 -1
- package/dist/pine-core/p-WO5h6NYA.system.js.map +0 -1
- package/dist/pine-core/p-Z5rOSkoA.system.js.map +0 -1
- package/dist/pine-core/p-a5cf0088.system.entry.js +0 -2
- package/dist/pine-core/p-a5cf0088.system.entry.js.map +0 -1
- package/dist/pine-core/p-aa2782b9.system.entry.js +0 -2
- package/dist/pine-core/p-aa2782b9.system.entry.js.map +0 -1
- package/dist/pine-core/p-b32d34d0.entry.js +0 -2
- package/dist/pine-core/p-b32d34d0.entry.js.map +0 -1
- package/dist/pine-core/p-b378ca03.entry.js +0 -2
- package/dist/pine-core/p-b378ca03.entry.js.map +0 -1
- package/dist/pine-core/p-b699a14f.system.entry.js +0 -2
- package/dist/pine-core/p-b699a14f.system.entry.js.map +0 -1
- package/dist/pine-core/p-c2d2fe64.system.entry.js +0 -2
- package/dist/pine-core/p-c2d2fe64.system.entry.js.map +0 -1
- package/dist/pine-core/p-d325287b.entry.js +0 -2
- package/dist/pine-core/p-d52d96b5.system.entry.js +0 -4
- package/dist/pine-core/p-d52d96b5.system.entry.js.map +0 -1
- package/dist/pine-core/p-d5c63517.system.entry.js +0 -2
- package/dist/pine-core/p-d5c63517.system.entry.js.map +0 -1
- package/dist/pine-core/p-d65d252d.entry.js +0 -2
- package/dist/pine-core/p-d65d252d.entry.js.map +0 -1
- package/dist/pine-core/p-dbe41087.system.entry.js +0 -2
- package/dist/pine-core/p-dbe41087.system.entry.js.map +0 -1
- package/dist/pine-core/p-e03b7f4a.system.entry.js +0 -2
- package/dist/pine-core/p-e03b7f4a.system.entry.js.map +0 -1
- package/dist/pine-core/p-f6b269ac.entry.js +0 -2
- package/dist/pine-core/p-f6b269ac.entry.js.map +0 -1
- package/dist/pine-core/p-f70aef6e.system.entry.js +0 -2
- package/dist/pine-core/p-f70aef6e.system.entry.js.map +0 -1
- package/dist/pine-core/p-fd3d548f.entry.js +0 -2
- package/dist/pine-core/p-fd3d548f.entry.js.map +0 -1
- package/dist/pine-core/p-fddf82f8.entry.js +0 -2
- package/dist/pine-core/p-fddf82f8.entry.js.map +0 -1
- package/dist/pine-core/p-fdf22be1.system.entry.js +0 -2
- package/dist/pine-core/p-fdf22be1.system.entry.js.map +0 -1
- package/dist/pine-core/p-fe7ece91.system.entry.js +0 -2
- package/dist/pine-core/p-fe7ece91.system.entry.js.map +0 -1
- package/dist/pine-core/p-iM8w34Dq.system.js.map +0 -1
- package/dist/pine-core/p-kbAzjMDU.system.js.map +0 -1
- package/dist/pine-core/p-nawkAoxk.system.js.map +0 -1
- package/dist/pine-core/p-oDk-2Jyq.system.js.map +0 -1
- package/dist/pine-core/p-wlxYjeBe.system.js.map +0 -1
- /package/dist/pine-core/{p-af56cb57.entry.js.map → p-100de2b7.entry.js.map} +0 -0
- /package/dist/pine-core/{p-72d87dc6.system.entry.js.map → p-2054b5cb.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c0601420.system.entry.js.map → p-2aab28b1.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a54d6a53.entry.js.map → p-88773b86.entry.js.map} +0 -0
- /package/dist/pine-core/{p-46820152.entry.js.map → p-a3785977.entry.js.map} +0 -0
- /package/dist/pine-core/{p-559b4ebc.entry.js.map → p-d1b27fa4.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c63e7909.system.entry.js.map → p-dace69e7.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-ab4307c7.system.entry.js.map → p-e702a8dc.system.entry.js.map} +0 -0
package/hydrate/index.mjs
CHANGED
|
@@ -3074,7 +3074,7 @@ var registerHost = (elm, cmpMeta) => {
|
|
|
3074
3074
|
};
|
|
3075
3075
|
var styles = /* @__PURE__ */ new Map();
|
|
3076
3076
|
|
|
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:
|
|
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}";
|
|
3078
3078
|
|
|
3079
3079
|
/**
|
|
3080
3080
|
* Mock PdsModal component for testing purposes
|
|
@@ -3176,7 +3176,7 @@ class MockPdsModal {
|
|
|
3176
3176
|
}; }
|
|
3177
3177
|
}
|
|
3178
3178
|
|
|
3179
|
-
/* pds-icons v9.
|
|
3179
|
+
/* pds-icons v9.9.0, ES Modules */
|
|
3180
3180
|
|
|
3181
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>";
|
|
3182
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>";
|
|
@@ -3764,7 +3764,7 @@ class PdsBox {
|
|
|
3764
3764
|
}; }
|
|
3765
3765
|
}
|
|
3766
3766
|
|
|
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);--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}";
|
|
3768
3768
|
|
|
3769
3769
|
/**
|
|
3770
3770
|
* @part button - Exposes the button element for styling.
|
|
@@ -4002,6 +4002,21 @@ const isRequired = (target, component) => {
|
|
|
4002
4002
|
(target.checkValidity() === false) ? component.invalid = true : component.invalid = false;
|
|
4003
4003
|
}
|
|
4004
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
|
+
}
|
|
4005
4020
|
|
|
4006
4021
|
/**
|
|
4007
4022
|
* Inherit attributes from the host element
|
|
@@ -4094,6 +4109,7 @@ class PdsCheckbox {
|
|
|
4094
4109
|
this.pdsCheckboxChange = createEvent(this, "pdsCheckboxChange");
|
|
4095
4110
|
this.pdsCheckboxInput = createEvent(this, "pdsCheckboxInput");
|
|
4096
4111
|
this.inheritedAttributes = {};
|
|
4112
|
+
this._type = 'checkbox';
|
|
4097
4113
|
/**
|
|
4098
4114
|
* It determines whether or not the checkbox is checked.
|
|
4099
4115
|
*/
|
|
@@ -4137,6 +4153,8 @@ class PdsCheckbox {
|
|
|
4137
4153
|
if (this.el.attachInternals) {
|
|
4138
4154
|
this.internals = this.el.attachInternals();
|
|
4139
4155
|
}
|
|
4156
|
+
// Expose type property on the element instance to match native form element behavior
|
|
4157
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
4140
4158
|
}
|
|
4141
4159
|
componentDidLoad() {
|
|
4142
4160
|
this.updateFormValue();
|
|
@@ -4173,9 +4191,9 @@ class PdsCheckbox {
|
|
|
4173
4191
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
4174
4192
|
}
|
|
4175
4193
|
render() {
|
|
4176
|
-
return (hAsync(Host, { key: '
|
|
4177
|
-
hAsync("div", { key: '
|
|
4178
|
-
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)));
|
|
4179
4197
|
}
|
|
4180
4198
|
static get formAssociated() { return true; }
|
|
4181
4199
|
get el() { return getElement(this); }
|
|
@@ -4208,7 +4226,7 @@ class PdsCheckbox {
|
|
|
4208
4226
|
|
|
4209
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)}";
|
|
4210
4228
|
|
|
4211
|
-
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)}";
|
|
4212
4230
|
|
|
4213
4231
|
/**
|
|
4214
4232
|
* @slot (default) - The chip's label text.
|
|
@@ -4274,7 +4292,7 @@ class PdsChip {
|
|
|
4274
4292
|
return chipContent;
|
|
4275
4293
|
}
|
|
4276
4294
|
render() {
|
|
4277
|
-
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 })))));
|
|
4278
4296
|
}
|
|
4279
4297
|
static get style() { return pdsChipTokensCss + pdsChipCss; }
|
|
4280
4298
|
static get cmpMeta() { return {
|
|
@@ -7122,7 +7140,7 @@ function createDOMPurify() {
|
|
|
7122
7140
|
}
|
|
7123
7141
|
var purify = createDOMPurify();
|
|
7124
7142
|
|
|
7125
|
-
const pdsComboboxCss = ":host{display:block}:host([disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{display:block;font-size:0.95rem;-webkit-margin-after:var(--pine-dimension-150);margin-block-end:var(--pine-dimension-150)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:1px solid var(--pine-color-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color 0.2s ease;transition:border-color 0.2s ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);pointer-events:none;position:absolute;right:var(--pine-dimension-150);z-index:1}.pds-combobox__listbox{background:var(--pine-color-background-container);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:1000}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-grey-150)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option .pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-grey-150)}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-placeholder);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--color-text-default, #ffffff);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}";
|
|
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)}";
|
|
7126
7144
|
|
|
7127
7145
|
/**
|
|
7128
7146
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -7170,7 +7188,7 @@ class PdsCombobox {
|
|
|
7170
7188
|
*/
|
|
7171
7189
|
this.mode = 'filter';
|
|
7172
7190
|
/**
|
|
7173
|
-
* 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).
|
|
7174
7192
|
* @default 'input'
|
|
7175
7193
|
*/
|
|
7176
7194
|
this.trigger = 'input';
|
|
@@ -7184,10 +7202,29 @@ class PdsCombobox {
|
|
|
7184
7202
|
* @default 'secondary'
|
|
7185
7203
|
*/
|
|
7186
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;
|
|
7187
7220
|
/**
|
|
7188
7221
|
* The value of the combobox input.
|
|
7189
7222
|
*/
|
|
7190
7223
|
this.value = '';
|
|
7224
|
+
/**
|
|
7225
|
+
* Internal state for the display text shown in the input/trigger
|
|
7226
|
+
*/
|
|
7227
|
+
this.displayText = '';
|
|
7191
7228
|
/**
|
|
7192
7229
|
* Internal state for filtered options and group labels
|
|
7193
7230
|
*/
|
|
@@ -7208,11 +7245,16 @@ class PdsCombobox {
|
|
|
7208
7245
|
* Internal state for the sanitized layout content of the selected option
|
|
7209
7246
|
*/
|
|
7210
7247
|
this.selectedOptionLayoutContent = '';
|
|
7248
|
+
/**
|
|
7249
|
+
* Internal state to track chip properties for automatic rendering
|
|
7250
|
+
*/
|
|
7251
|
+
this.selectedOptionChipProps = null;
|
|
7211
7252
|
this.optionEls = [];
|
|
7212
7253
|
this.allItems = [];
|
|
7254
|
+
this.isUpdatingFromSelection = false;
|
|
7213
7255
|
this.handleInput = (e) => {
|
|
7214
7256
|
const target = e.target;
|
|
7215
|
-
this.
|
|
7257
|
+
this.displayText = target.value;
|
|
7216
7258
|
this.isOpen = true;
|
|
7217
7259
|
this.filterOptions();
|
|
7218
7260
|
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
@@ -7222,6 +7264,7 @@ class PdsCombobox {
|
|
|
7222
7264
|
if (!this.isOpen) {
|
|
7223
7265
|
this.isOpen = true;
|
|
7224
7266
|
this.filterOptions();
|
|
7267
|
+
this.setInitialHighlightedIndex();
|
|
7225
7268
|
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7226
7269
|
}
|
|
7227
7270
|
};
|
|
@@ -7231,10 +7274,7 @@ class PdsCombobox {
|
|
|
7231
7274
|
this.isOpen = true;
|
|
7232
7275
|
this.filterOptions();
|
|
7233
7276
|
// Set highlighted index immediately for testing
|
|
7234
|
-
|
|
7235
|
-
if (selectableOptions.length > 0) {
|
|
7236
|
-
this.highlightedIndex = 0;
|
|
7237
|
-
}
|
|
7277
|
+
this.setInitialHighlightedIndex();
|
|
7238
7278
|
setTimeout(() => {
|
|
7239
7279
|
this.openDropdownPositioning();
|
|
7240
7280
|
// For input trigger, keep focus on input and use aria-activedescendant
|
|
@@ -7313,6 +7353,13 @@ class PdsCombobox {
|
|
|
7313
7353
|
this.restoreFocusToTrigger();
|
|
7314
7354
|
}
|
|
7315
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();
|
|
7361
|
+
}
|
|
7362
|
+
break;
|
|
7316
7363
|
case 'Escape':
|
|
7317
7364
|
e.preventDefault();
|
|
7318
7365
|
this.isOpen = false;
|
|
@@ -7357,12 +7404,9 @@ class PdsCombobox {
|
|
|
7357
7404
|
if (this.isOpen) {
|
|
7358
7405
|
this.filterOptions();
|
|
7359
7406
|
// Set highlighted index and prepare for keyboard navigation
|
|
7360
|
-
|
|
7361
|
-
|
|
7362
|
-
|
|
7363
|
-
// For button trigger, prepare for arrow-key navigation mode
|
|
7364
|
-
this.isArrowKeyNavigationMode = true;
|
|
7365
|
-
}
|
|
7407
|
+
this.setInitialHighlightedIndex();
|
|
7408
|
+
// For button trigger, prepare for arrow-key navigation mode
|
|
7409
|
+
this.isArrowKeyNavigationMode = true;
|
|
7366
7410
|
setTimeout(() => this.openDropdownPositioning(), 0);
|
|
7367
7411
|
}
|
|
7368
7412
|
else {
|
|
@@ -7378,10 +7422,7 @@ class PdsCombobox {
|
|
|
7378
7422
|
this.isOpen = true;
|
|
7379
7423
|
this.filterOptions();
|
|
7380
7424
|
// Set highlighted index immediately
|
|
7381
|
-
|
|
7382
|
-
if (selectableOptions.length > 0) {
|
|
7383
|
-
this.highlightedIndex = 0;
|
|
7384
|
-
}
|
|
7425
|
+
this.setInitialHighlightedIndex();
|
|
7385
7426
|
setTimeout(() => {
|
|
7386
7427
|
this.openDropdownPositioning();
|
|
7387
7428
|
// For all button trigger keyboard opening, focus the first option so subsequent navigation works
|
|
@@ -7422,24 +7463,110 @@ class PdsCombobox {
|
|
|
7422
7463
|
this.highlightedIndex = -1;
|
|
7423
7464
|
this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
|
|
7424
7465
|
this.updateAriaActiveDescendant(); // Clear aria-activedescendant
|
|
7425
|
-
// If there's a selected option but the
|
|
7426
|
-
if (this.selectedOption && this.
|
|
7427
|
-
this.
|
|
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
|
|
7428
7470
|
}
|
|
7429
7471
|
}
|
|
7430
7472
|
};
|
|
7431
7473
|
}
|
|
7474
|
+
connectedCallback() {
|
|
7475
|
+
// Initialize ElementInternals for form association
|
|
7476
|
+
if (this.el.attachInternals) {
|
|
7477
|
+
this.internals = this.el.attachInternals();
|
|
7478
|
+
}
|
|
7479
|
+
}
|
|
7432
7480
|
componentWillLoad() {
|
|
7433
7481
|
this.updateOptions();
|
|
7434
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
|
+
}
|
|
7435
7506
|
handleValueChange() {
|
|
7436
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
|
+
}
|
|
7437
7534
|
}
|
|
7438
7535
|
handleSelectedOptionChange() {
|
|
7439
7536
|
// Update the layout content when selected option changes
|
|
7440
7537
|
this.selectedOptionLayoutContent = this.selectedOption && this.isOptionLayout(this.selectedOption)
|
|
7441
7538
|
? this.getOptionLayoutContent(this.selectedOption)
|
|
7442
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
|
+
}
|
|
7443
7570
|
}
|
|
7444
7571
|
updateOptions() {
|
|
7445
7572
|
var _a;
|
|
@@ -7470,9 +7597,29 @@ class PdsCombobox {
|
|
|
7470
7597
|
this.allItems.push(el);
|
|
7471
7598
|
}
|
|
7472
7599
|
});
|
|
7473
|
-
// Set initial selected option
|
|
7474
|
-
|
|
7475
|
-
|
|
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) {
|
|
7476
7623
|
this.setSelectedOption(initialSelected);
|
|
7477
7624
|
}
|
|
7478
7625
|
this.filterOptions();
|
|
@@ -7522,6 +7669,22 @@ class PdsCombobox {
|
|
|
7522
7669
|
isOptionLayout(option) {
|
|
7523
7670
|
return this.customOptionLayouts && option.hasAttribute('data-layout');
|
|
7524
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
|
+
}
|
|
7525
7688
|
// Helper method to check if option is selected (single source of truth)
|
|
7526
7689
|
isOptionSelected(option) {
|
|
7527
7690
|
return this.selectedOption === option;
|
|
@@ -7529,6 +7692,13 @@ class PdsCombobox {
|
|
|
7529
7692
|
// Helper method to set selected option (centralized state management)
|
|
7530
7693
|
setSelectedOption(option) {
|
|
7531
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
|
+
}
|
|
7532
7702
|
}
|
|
7533
7703
|
filterOptions() {
|
|
7534
7704
|
// Ensure allItems includes optionEls if not already populated (for edge cases)
|
|
@@ -7539,7 +7709,7 @@ class PdsCombobox {
|
|
|
7539
7709
|
this.filteredItems = [...this.allItems];
|
|
7540
7710
|
}
|
|
7541
7711
|
else {
|
|
7542
|
-
const val = this.
|
|
7712
|
+
const val = this.displayText.toLowerCase();
|
|
7543
7713
|
const filteredOptions = this.optionEls.filter(option => {
|
|
7544
7714
|
// For layout options, search both text content and data-search-text attribute
|
|
7545
7715
|
if (this.isOptionLayout(option)) {
|
|
@@ -7593,7 +7763,7 @@ class PdsCombobox {
|
|
|
7593
7763
|
left: `${x}px`,
|
|
7594
7764
|
top: `${y}px`,
|
|
7595
7765
|
position: 'absolute',
|
|
7596
|
-
zIndex:
|
|
7766
|
+
zIndex: 'var(--pine-z-index-raised)',
|
|
7597
7767
|
});
|
|
7598
7768
|
});
|
|
7599
7769
|
}
|
|
@@ -7610,6 +7780,27 @@ class PdsCombobox {
|
|
|
7610
7780
|
(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
7611
7781
|
}
|
|
7612
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
|
+
}
|
|
7613
7804
|
/**
|
|
7614
7805
|
* Focus management helper - moves focus to the first option when dropdown opens
|
|
7615
7806
|
*/
|
|
@@ -7617,7 +7808,7 @@ class PdsCombobox {
|
|
|
7617
7808
|
if (this.isOpen) {
|
|
7618
7809
|
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7619
7810
|
if (selectableOptions.length > 0) {
|
|
7620
|
-
this.
|
|
7811
|
+
this.setInitialHighlightedIndex();
|
|
7621
7812
|
// DON'T focus the option elements - keep focus on trigger and use aria-activedescendant
|
|
7622
7813
|
// This prevents the focusout event that was closing the dropdown
|
|
7623
7814
|
// But still call updateOptionFocus for scrolling
|
|
@@ -7636,20 +7827,20 @@ class PdsCombobox {
|
|
|
7636
7827
|
this.isArrowKeyNavigationMode = true;
|
|
7637
7828
|
const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
|
|
7638
7829
|
if (selectableOptions.length > 0) {
|
|
7639
|
-
this.
|
|
7640
|
-
// For arrow key navigation, actually focus the
|
|
7830
|
+
this.setInitialHighlightedIndex();
|
|
7831
|
+
// For arrow key navigation, actually focus the highlighted option
|
|
7641
7832
|
if (this.listboxEl) {
|
|
7642
7833
|
const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
|
|
7643
|
-
const
|
|
7644
|
-
if (
|
|
7834
|
+
const highlightedOption = optionElements[this.highlightedIndex];
|
|
7835
|
+
if (highlightedOption) {
|
|
7645
7836
|
// Remove tabindex from all options first
|
|
7646
7837
|
optionElements.forEach(option => {
|
|
7647
7838
|
option.setAttribute('tabindex', '-1');
|
|
7648
7839
|
});
|
|
7649
|
-
// Set tabindex and focus on
|
|
7650
|
-
|
|
7651
|
-
|
|
7652
|
-
|
|
7840
|
+
// Set tabindex and focus on highlighted option
|
|
7841
|
+
highlightedOption.setAttribute('tabindex', '0');
|
|
7842
|
+
highlightedOption.focus();
|
|
7843
|
+
highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
7653
7844
|
}
|
|
7654
7845
|
}
|
|
7655
7846
|
// Update aria-activedescendant on trigger
|
|
@@ -7715,7 +7906,7 @@ class PdsCombobox {
|
|
|
7715
7906
|
}
|
|
7716
7907
|
// Get the label of the selected option
|
|
7717
7908
|
get selectedLabel() {
|
|
7718
|
-
return this.
|
|
7909
|
+
return this.displayText || '';
|
|
7719
7910
|
}
|
|
7720
7911
|
// Get the layout content of the selected option for button trigger
|
|
7721
7912
|
get selectedLayoutContent() {
|
|
@@ -7725,10 +7916,110 @@ class PdsCombobox {
|
|
|
7725
7916
|
get selectedHasLayout() {
|
|
7726
7917
|
return this.selectedOption ? this.isOptionLayout(this.selectedOption) : false;
|
|
7727
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
|
+
}
|
|
7728
8019
|
handleOptionClick(option) {
|
|
7729
8020
|
// Update reactive state - single source of truth
|
|
8021
|
+
// The @Watch('selectedOption') will handle displayText, value, and form internals
|
|
7730
8022
|
this.setSelectedOption(option);
|
|
7731
|
-
this.value = this.getOptionLabel(option);
|
|
7732
8023
|
this.isOpen = false;
|
|
7733
8024
|
this.pdsComboboxChange.emit({ value: option.value });
|
|
7734
8025
|
}
|
|
@@ -7752,12 +8043,14 @@ class PdsCombobox {
|
|
|
7752
8043
|
const isSelected = this.isOptionSelected(option);
|
|
7753
8044
|
const isHighlighted = this.highlightedIndex === optionIndex;
|
|
7754
8045
|
const isLayout = this.isOptionLayout(option);
|
|
8046
|
+
const isChip = this.isOptionChip(option);
|
|
7755
8047
|
const currentOptionIndex = optionIndex++;
|
|
7756
|
-
return (hAsync("li", { key: option.value, id: `pds-combobox-option-${currentOptionIndex}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-setsize": selectableOptions.length, "aria-posinset": currentOptionIndex + 1, "aria-label": isLayout ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: isHighlighted ? '0' : '-1', class: {
|
|
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: {
|
|
7757
8049
|
'pds-combobox__option': true,
|
|
7758
8050
|
'pds-combobox__option--highlighted': isHighlighted,
|
|
7759
8051
|
'pds-combobox__option--layout': isLayout,
|
|
7760
|
-
|
|
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" })));
|
|
7761
8054
|
}
|
|
7762
8055
|
return null;
|
|
7763
8056
|
})));
|
|
@@ -7778,6 +8071,23 @@ class PdsCombobox {
|
|
|
7778
8071
|
shouldShowLayoutContent() {
|
|
7779
8072
|
return this.selectedHasLayout && !!this.selectedLayoutContent;
|
|
7780
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
|
+
}
|
|
7781
8091
|
renderButtonTriggerContent() {
|
|
7782
8092
|
// Case 1: Custom trigger content with layout priority
|
|
7783
8093
|
if (this.customTriggerContent) {
|
|
@@ -7794,13 +8104,79 @@ class PdsCombobox {
|
|
|
7794
8104
|
// Case 3: Standard mode with default text content
|
|
7795
8105
|
return [this.renderDefaultContent(), this.renderCaretIcon()];
|
|
7796
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
|
+
}
|
|
7797
8172
|
render() {
|
|
7798
8173
|
const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
|
|
7799
|
-
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 => {
|
|
7800
8175
|
this.inputEl = el;
|
|
7801
8176
|
this.triggerEl = el;
|
|
7802
|
-
}, 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.
|
|
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())));
|
|
7803
8178
|
}
|
|
8179
|
+
static get formAssociated() { return true; }
|
|
7804
8180
|
get el() { return getElement(this); }
|
|
7805
8181
|
static get watchers() { return {
|
|
7806
8182
|
"value": ["handleValueChange"],
|
|
@@ -7808,10 +8184,11 @@ class PdsCombobox {
|
|
|
7808
8184
|
}; }
|
|
7809
8185
|
static get style() { return pdsComboboxCss; }
|
|
7810
8186
|
static get cmpMeta() { return {
|
|
7811
|
-
"$flags$":
|
|
8187
|
+
"$flags$": 73,
|
|
7812
8188
|
"$tagName$": "pds-combobox",
|
|
7813
8189
|
"$members$": {
|
|
7814
8190
|
"componentId": [1, "component-id"],
|
|
8191
|
+
"name": [513],
|
|
7815
8192
|
"customOptionLayouts": [4, "custom-option-layouts"],
|
|
7816
8193
|
"customTriggerContent": [4, "custom-trigger-content"],
|
|
7817
8194
|
"disabled": [4],
|
|
@@ -7825,22 +8202,28 @@ class PdsCombobox {
|
|
|
7825
8202
|
"trigger": [1],
|
|
7826
8203
|
"triggerWidth": [1, "trigger-width"],
|
|
7827
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"],
|
|
7828
8209
|
"value": [1025],
|
|
8210
|
+
"displayText": [32],
|
|
7829
8211
|
"filteredItems": [32],
|
|
7830
8212
|
"highlightedIndex": [32],
|
|
7831
8213
|
"isOpen": [32],
|
|
7832
8214
|
"selectedOption": [32],
|
|
7833
8215
|
"selectedOptionLayoutContent": [32],
|
|
8216
|
+
"selectedOptionChipProps": [32],
|
|
7834
8217
|
"setFocus": [64],
|
|
7835
8218
|
"getSelectedValue": [64]
|
|
7836
8219
|
},
|
|
7837
8220
|
"$listeners$": undefined,
|
|
7838
8221
|
"$lazyBundleId$": "-",
|
|
7839
|
-
"$attrsToReflect$": []
|
|
8222
|
+
"$attrsToReflect$": [["name", "name"]]
|
|
7840
8223
|
}; }
|
|
7841
8224
|
}
|
|
7842
8225
|
|
|
7843
|
-
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}";
|
|
7844
8227
|
|
|
7845
8228
|
class PdsCopytext {
|
|
7846
8229
|
constructor(hostRef) {
|
|
@@ -7887,10 +8270,10 @@ class PdsCopytext {
|
|
|
7887
8270
|
if (this.truncate) {
|
|
7888
8271
|
classNames.push('pds-copytext--truncated');
|
|
7889
8272
|
}
|
|
7890
|
-
return classNames.join('
|
|
8273
|
+
return classNames.join(' ');
|
|
7891
8274
|
}
|
|
7892
8275
|
render() {
|
|
7893
|
-
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" }))));
|
|
7894
8277
|
}
|
|
7895
8278
|
static get style() { return pdsCopytextCss; }
|
|
7896
8279
|
static get cmpMeta() { return {
|
|
@@ -7949,7 +8332,7 @@ class PdsDivider {
|
|
|
7949
8332
|
}; }
|
|
7950
8333
|
}
|
|
7951
8334
|
|
|
7952
|
-
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)}";
|
|
7953
8336
|
|
|
7954
8337
|
class PdsDropdownMenu {
|
|
7955
8338
|
constructor(hostRef) {
|
|
@@ -8327,7 +8710,7 @@ class PdsDropdownMenuSeparator {
|
|
|
8327
8710
|
}; }
|
|
8328
8711
|
}
|
|
8329
8712
|
|
|
8330
|
-
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:
|
|
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)))}}";
|
|
8331
8714
|
|
|
8332
8715
|
/**
|
|
8333
8716
|
* Individual filter component with cross-browser popover positioning.
|
|
@@ -8613,7 +8996,7 @@ class PdsFilter {
|
|
|
8613
8996
|
position: fixed;
|
|
8614
8997
|
left: ${left}px;
|
|
8615
8998
|
top: ${top}px;
|
|
8616
|
-
z-index:
|
|
8999
|
+
z-index: var(--pine-z-index-overlay);
|
|
8617
9000
|
transform-origin: ${transformOrigin};
|
|
8618
9001
|
`;
|
|
8619
9002
|
}
|
|
@@ -8814,7 +9197,7 @@ class PdsFilter {
|
|
|
8814
9197
|
return null;
|
|
8815
9198
|
}
|
|
8816
9199
|
render() {
|
|
8817
|
-
return (hAsync(Host, { key: '
|
|
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' })))));
|
|
8818
9201
|
}
|
|
8819
9202
|
get el() { return getElement(this); }
|
|
8820
9203
|
static get style() { return pdsFilterCss; }
|
|
@@ -9337,7 +9720,7 @@ const pdsInputTokensCss$1 = ":host{--pine-input-color-background-danger:var(--pi
|
|
|
9337
9720
|
|
|
9338
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)}";
|
|
9339
9722
|
|
|
9340
|
-
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}";
|
|
9341
9724
|
|
|
9342
9725
|
/**
|
|
9343
9726
|
* @slot append - Content to be displayed after the input field
|
|
@@ -9780,7 +10163,7 @@ class PdsLoader {
|
|
|
9780
10163
|
}; }
|
|
9781
10164
|
}
|
|
9782
10165
|
|
|
9783
|
-
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}";
|
|
9784
10167
|
|
|
9785
10168
|
class PdsModal {
|
|
9786
10169
|
constructor(hostRef) {
|
|
@@ -10304,16 +10687,22 @@ class PdsModalHeader {
|
|
|
10304
10687
|
}; }
|
|
10305
10688
|
}
|
|
10306
10689
|
|
|
10307
|
-
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)}";
|
|
10308
10691
|
|
|
10309
10692
|
class PdsPopover {
|
|
10310
10693
|
constructor(hostRef) {
|
|
10311
10694
|
registerInstance(this, hostRef);
|
|
10695
|
+
this.pdsPopoverOpen = createEvent(this, "pdsPopoverOpen");
|
|
10696
|
+
this.pdsPopoverClose = createEvent(this, "pdsPopoverClose");
|
|
10312
10697
|
/**
|
|
10313
10698
|
* Determines when the popover is active
|
|
10314
10699
|
* @defaultValue false
|
|
10315
10700
|
*/
|
|
10316
10701
|
this.active = false;
|
|
10702
|
+
/**
|
|
10703
|
+
* Tracks if the component is still mounted to prevent memory leaks
|
|
10704
|
+
*/
|
|
10705
|
+
this.isComponentMounted = true;
|
|
10317
10706
|
/**
|
|
10318
10707
|
* Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
|
|
10319
10708
|
* @defaultValue "show"
|
|
@@ -10335,24 +10724,123 @@ class PdsPopover {
|
|
|
10335
10724
|
*/
|
|
10336
10725
|
this.placement = 'right';
|
|
10337
10726
|
}
|
|
10338
|
-
|
|
10339
|
-
|
|
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
|
+
}
|
|
10340
10735
|
}
|
|
10341
|
-
|
|
10342
|
-
|
|
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
|
+
}
|
|
10343
10825
|
}
|
|
10344
10826
|
handleScroll() {
|
|
10345
|
-
|
|
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) {
|
|
10346
10831
|
this.handlePopoverPositioning();
|
|
10347
10832
|
}
|
|
10348
10833
|
}
|
|
10349
10834
|
handlePopoverPositioning() {
|
|
10350
10835
|
const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger');
|
|
10351
10836
|
const popoverEl = this.el.shadowRoot.querySelector('div[popover]');
|
|
10352
|
-
if (
|
|
10837
|
+
if (triggerEl == null || popoverEl == null)
|
|
10353
10838
|
return;
|
|
10354
|
-
|
|
10355
|
-
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();
|
|
10356
10844
|
let top = 0;
|
|
10357
10845
|
let left = 0;
|
|
10358
10846
|
const offset = 8;
|
|
@@ -10406,11 +10894,11 @@ class PdsPopover {
|
|
|
10406
10894
|
left = triggerRect.left - popoverRect.width - offset;
|
|
10407
10895
|
break;
|
|
10408
10896
|
}
|
|
10409
|
-
|
|
10410
|
-
|
|
10897
|
+
popoverElement.style.top = `${top}px`;
|
|
10898
|
+
popoverElement.style.left = `${left}px`;
|
|
10411
10899
|
}
|
|
10412
10900
|
render() {
|
|
10413
|
-
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' }))));
|
|
10414
10902
|
}
|
|
10415
10903
|
get el() { return getElement(this); }
|
|
10416
10904
|
static get style() { return pdsPopoverCss; }
|
|
@@ -10424,9 +10912,12 @@ class PdsPopover {
|
|
|
10424
10912
|
"text": [1],
|
|
10425
10913
|
"maxWidth": [2, "max-width"],
|
|
10426
10914
|
"placement": [513],
|
|
10427
|
-
"active": [32]
|
|
10915
|
+
"active": [32],
|
|
10916
|
+
"show": [64],
|
|
10917
|
+
"hide": [64],
|
|
10918
|
+
"toggle": [64]
|
|
10428
10919
|
},
|
|
10429
|
-
"$listeners$": [[
|
|
10920
|
+
"$listeners$": [[11, "scroll", "handleScroll"]],
|
|
10430
10921
|
"$lazyBundleId$": "-",
|
|
10431
10922
|
"$attrsToReflect$": [["placement", "placement"]]
|
|
10432
10923
|
}; }
|
|
@@ -10512,6 +11003,7 @@ class PdsRadio {
|
|
|
10512
11003
|
constructor(hostRef) {
|
|
10513
11004
|
registerInstance(this, hostRef);
|
|
10514
11005
|
this.pdsRadioChange = createEvent(this, "pdsRadioChange");
|
|
11006
|
+
this._type = 'radio';
|
|
10515
11007
|
/**
|
|
10516
11008
|
* Determines whether or not the radio is checked.
|
|
10517
11009
|
* @defaultValue false
|
|
@@ -10551,11 +11043,16 @@ class PdsRadio {
|
|
|
10551
11043
|
}
|
|
10552
11044
|
return classNames.join(' ');
|
|
10553
11045
|
}
|
|
11046
|
+
connectedCallback() {
|
|
11047
|
+
// Expose type property on the element instance to match native form element behavior
|
|
11048
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
11049
|
+
}
|
|
10554
11050
|
render() {
|
|
10555
|
-
return (hAsync(Host, { key: '
|
|
10556
|
-
hAsync("div", { key: '
|
|
10557
|
-
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)));
|
|
10558
11054
|
}
|
|
11055
|
+
get el() { return getElement(this); }
|
|
10559
11056
|
static get style() { return labelCss$3 + pdsRadioCss; }
|
|
10560
11057
|
static get cmpMeta() { return {
|
|
10561
11058
|
"$flags$": 2,
|
|
@@ -10647,7 +11144,7 @@ const pdsSelectTokensCss = ":host{--pine-select-color-background-danger:var(--pi
|
|
|
10647
11144
|
|
|
10648
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)}";
|
|
10649
11146
|
|
|
10650
|
-
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}";
|
|
10651
11148
|
|
|
10652
11149
|
/**
|
|
10653
11150
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
@@ -10656,6 +11153,7 @@ class PdsSelect {
|
|
|
10656
11153
|
constructor(hostRef) {
|
|
10657
11154
|
registerInstance(this, hostRef);
|
|
10658
11155
|
this.pdsSelectChange = createEvent(this, "pdsSelectChange");
|
|
11156
|
+
this._type = 'select-one';
|
|
10659
11157
|
/**
|
|
10660
11158
|
* Indicates whether or not the select field is disabled.
|
|
10661
11159
|
* @defaultValue false
|
|
@@ -10718,13 +11216,26 @@ class PdsSelect {
|
|
|
10718
11216
|
this.updateSelectedOption();
|
|
10719
11217
|
this.updateFormValue();
|
|
10720
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
|
+
}
|
|
10721
11228
|
connectedCallback() {
|
|
10722
11229
|
// Initialize ElementInternals for form association
|
|
10723
11230
|
if (this.el.attachInternals) {
|
|
10724
11231
|
this.internals = this.el.attachInternals();
|
|
10725
11232
|
}
|
|
11233
|
+
// Expose type property on the element instance to match native form element behavior
|
|
11234
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
10726
11235
|
}
|
|
10727
11236
|
componentWillLoad() {
|
|
11237
|
+
// Set initial type based on multiple prop
|
|
11238
|
+
this.updateType();
|
|
10728
11239
|
this.updateSelectedOption();
|
|
10729
11240
|
}
|
|
10730
11241
|
componentDidLoad() {
|
|
@@ -10847,12 +11358,13 @@ class PdsSelect {
|
|
|
10847
11358
|
}
|
|
10848
11359
|
render() {
|
|
10849
11360
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
10850
|
-
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 }))));
|
|
10851
11362
|
}
|
|
10852
11363
|
static get formAssociated() { return true; }
|
|
10853
11364
|
get el() { return getElement(this); }
|
|
10854
11365
|
static get watchers() { return {
|
|
10855
|
-
"value": ["valueChanged"]
|
|
11366
|
+
"value": ["valueChanged"],
|
|
11367
|
+
"multiple": ["multipleChanged"]
|
|
10856
11368
|
}; }
|
|
10857
11369
|
static get style() { return pdsSelectTokensCss + (labelCss$2 + pdsSelectCss); }
|
|
10858
11370
|
static get cmpMeta() { return {
|
|
@@ -13663,6 +14175,7 @@ class PdsSwitch {
|
|
|
13663
14175
|
registerInstance(this, hostRef);
|
|
13664
14176
|
this.pdsSwitchChange = createEvent(this, "pdsSwitchChange");
|
|
13665
14177
|
this.inheritedAttributes = {};
|
|
14178
|
+
this._type = 'checkbox';
|
|
13666
14179
|
/**
|
|
13667
14180
|
* Determines the input 'checked' state.
|
|
13668
14181
|
*/
|
|
@@ -13702,6 +14215,8 @@ class PdsSwitch {
|
|
|
13702
14215
|
if (this.el.attachInternals) {
|
|
13703
14216
|
this.internals = this.el.attachInternals();
|
|
13704
14217
|
}
|
|
14218
|
+
// Expose type property on the element instance to match native form element behavior
|
|
14219
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
13705
14220
|
}
|
|
13706
14221
|
componentDidLoad() {
|
|
13707
14222
|
this.updateFormValue();
|
|
@@ -13738,9 +14253,9 @@ class PdsSwitch {
|
|
|
13738
14253
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
13739
14254
|
}
|
|
13740
14255
|
render() {
|
|
13741
|
-
return (hAsync(Host, { key: '
|
|
13742
|
-
hAsync("div", { key: '
|
|
13743
|
-
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)));
|
|
13744
14259
|
}
|
|
13745
14260
|
static get formAssociated() { return true; }
|
|
13746
14261
|
get el() { return getElement(this); }
|
|
@@ -13770,7 +14285,7 @@ class PdsSwitch {
|
|
|
13770
14285
|
}; }
|
|
13771
14286
|
}
|
|
13772
14287
|
|
|
13773
|
-
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:
|
|
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}";
|
|
13774
14289
|
|
|
13775
14290
|
class PdsTab {
|
|
13776
14291
|
constructor(hostRef) {
|
|
@@ -13808,7 +14323,7 @@ class PdsTab {
|
|
|
13808
14323
|
}; }
|
|
13809
14324
|
}
|
|
13810
14325
|
|
|
13811
|
-
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}";
|
|
13812
14327
|
|
|
13813
14328
|
class PdsTable {
|
|
13814
14329
|
constructor(hostRef) {
|
|
@@ -14041,7 +14556,7 @@ class PdsTableBody {
|
|
|
14041
14556
|
}; }
|
|
14042
14557
|
}
|
|
14043
14558
|
|
|
14044
|
-
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}";
|
|
14045
14560
|
|
|
14046
14561
|
class PdsTableCell {
|
|
14047
14562
|
constructor(hostRef) {
|
|
@@ -14169,7 +14684,7 @@ const closest = (selector, el) => {
|
|
|
14169
14684
|
closest(selector, el.getRootNode().host)));
|
|
14170
14685
|
};
|
|
14171
14686
|
|
|
14172
|
-
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)}";
|
|
14173
14688
|
|
|
14174
14689
|
class PdsTableHead {
|
|
14175
14690
|
constructor(hostRef) {
|
|
@@ -14222,7 +14737,7 @@ class PdsTableHead {
|
|
|
14222
14737
|
}; }
|
|
14223
14738
|
}
|
|
14224
14739
|
|
|
14225
|
-
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}";
|
|
14226
14741
|
|
|
14227
14742
|
class PdsTableHeadCell {
|
|
14228
14743
|
constructor(hostRef) {
|
|
@@ -14368,7 +14883,7 @@ class PdsTableHeadCell {
|
|
|
14368
14883
|
}; }
|
|
14369
14884
|
}
|
|
14370
14885
|
|
|
14371
|
-
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)}";
|
|
14372
14887
|
|
|
14373
14888
|
class PdsTableRow {
|
|
14374
14889
|
constructor(hostRef) {
|
|
@@ -14482,7 +14997,13 @@ class PdsTabs {
|
|
|
14482
14997
|
}
|
|
14483
14998
|
handleKeyDown(ev) {
|
|
14484
14999
|
const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
|
|
14485
|
-
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) {
|
|
14486
15007
|
ev.preventDefault();
|
|
14487
15008
|
this.moveActiveTab(ev.key);
|
|
14488
15009
|
}
|
|
@@ -14511,8 +15032,12 @@ class PdsTabs {
|
|
|
14511
15032
|
this.activeTabIndex = moveFocusTo;
|
|
14512
15033
|
}
|
|
14513
15034
|
findAllChildren() {
|
|
14514
|
-
|
|
14515
|
-
|
|
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);
|
|
14516
15041
|
}
|
|
14517
15042
|
propGeneration(child, index = 0) {
|
|
14518
15043
|
child.parentComponentId = this.componentId.toString();
|
|
@@ -14546,7 +15071,7 @@ class PdsTabs {
|
|
|
14546
15071
|
this.passPropsToChildren();
|
|
14547
15072
|
}
|
|
14548
15073
|
render() {
|
|
14549
|
-
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" })));
|
|
14550
15075
|
}
|
|
14551
15076
|
get el() { return getElement(this); }
|
|
14552
15077
|
static get style() { return pdsTabsCss; }
|
|
@@ -14617,7 +15142,7 @@ const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{c
|
|
|
14617
15142
|
|
|
14618
15143
|
const pdsInputTokensCss = ":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";
|
|
14619
15144
|
|
|
14620
|
-
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}";
|
|
14621
15146
|
|
|
14622
15147
|
/**
|
|
14623
15148
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
@@ -14630,6 +15155,7 @@ class PdsTextarea {
|
|
|
14630
15155
|
this.pdsInput = createEvent(this, "pdsInput");
|
|
14631
15156
|
this.pdsTextareaChange = createEvent(this, "pdsTextareaChange");
|
|
14632
15157
|
this.inheritedAttributes = {};
|
|
15158
|
+
this._type = 'textarea';
|
|
14633
15159
|
/**
|
|
14634
15160
|
* Determines whether or not the textarea is disabled.
|
|
14635
15161
|
* @defaultValue false
|
|
@@ -14793,6 +15319,8 @@ class PdsTextarea {
|
|
|
14793
15319
|
this.updateFormValue();
|
|
14794
15320
|
// Setup ResizeObserver for character counter positioning
|
|
14795
15321
|
this.setupResizeObserver();
|
|
15322
|
+
// Expose type property on the element instance to match native form element behavior
|
|
15323
|
+
exposeTypeProperty(this.el, () => this._type);
|
|
14796
15324
|
}
|
|
14797
15325
|
/**
|
|
14798
15326
|
* Sets up ResizeObserver to track textarea resize for character counter positioning
|
|
@@ -14907,10 +15435,10 @@ class PdsTextarea {
|
|
|
14907
15435
|
}
|
|
14908
15436
|
render() {
|
|
14909
15437
|
const value = this.getValue();
|
|
14910
|
-
return (hAsync(Host, { key: '
|
|
14911
|
-
hAsync("div", { key: '
|
|
14912
|
-
hAsync("p", { key: '
|
|
14913
|
-
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))));
|
|
14914
15442
|
}
|
|
14915
15443
|
static get formAssociated() { return true; }
|
|
14916
15444
|
get el() { return getElement(this); }
|
|
@@ -15063,7 +15591,7 @@ class PdsToast {
|
|
|
15063
15591
|
}; }
|
|
15064
15592
|
}
|
|
15065
15593
|
|
|
15066
|
-
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}";
|
|
15067
15595
|
|
|
15068
15596
|
/**
|
|
15069
15597
|
* @slot (default) - The tooltip's target element
|
|
@@ -15278,7 +15806,7 @@ class PdsTooltip {
|
|
|
15278
15806
|
this.portalEl = document.createElement('div');
|
|
15279
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'}`;
|
|
15280
15808
|
this.portalEl.style.position = 'fixed';
|
|
15281
|
-
this.portalEl.style.zIndex = '
|
|
15809
|
+
this.portalEl.style.zIndex = 'var(--pine-z-index-nuclear)';
|
|
15282
15810
|
if (this.portalEl.id === '') {
|
|
15283
15811
|
const suffix = PdsTooltip.instanceCounter++;
|
|
15284
15812
|
const baseId = this.componentId || this.el.id || 'pds-tooltip';
|
|
@@ -15378,9 +15906,9 @@ class PdsTooltip {
|
|
|
15378
15906
|
}
|
|
15379
15907
|
render() {
|
|
15380
15908
|
const hostId = this.componentId || undefined;
|
|
15381
|
-
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,
|
|
15382
15910
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
15383
|
-
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" }))));
|
|
15384
15912
|
}
|
|
15385
15913
|
get el() { return getElement(this); }
|
|
15386
15914
|
static get watchers() { return {
|