@pine-ds/core 3.17.0 → 3.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/index2.js +1 -1
- package/components/index2.js.map +1 -1
- package/components/pds-button2.js +21 -8
- package/components/pds-button2.js.map +1 -1
- package/components/pds-chip2.js +20 -7
- package/components/pds-chip2.js.map +1 -1
- package/components/pds-combobox.js +2 -2
- package/components/pds-combobox.js.map +1 -1
- package/components/pds-copytext.js +49 -1
- package/components/pds-copytext.js.map +1 -1
- package/components/pds-dropdown-menu-item.js +3 -2
- package/components/pds-dropdown-menu-item.js.map +1 -1
- package/components/pds-dropdown-menu.js +1 -1
- package/components/pds-dropdown-menu.js.map +1 -1
- package/components/pds-link2.js +3 -2
- package/components/pds-link2.js.map +1 -1
- package/components/pds-multiselect.js +61 -15
- package/components/pds-multiselect.js.map +1 -1
- package/components/pds-table-cell2.js +36 -3
- package/components/pds-table-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 +3 -3
- package/components/pds-table-row.js.map +1 -1
- package/components/pds-table.js +12 -4
- package/components/pds-table.js.map +1 -1
- package/components/pds-text2.js +41 -1
- package/components/pds-text2.js.map +1 -1
- package/components/truncation-tooltip.js +247 -0
- package/components/truncation-tooltip.js.map +1 -0
- package/dist/cjs/{index-DkQebouX.js → index-CjhTEk39.js} +3 -3
- package/dist/cjs/index-CjhTEk39.js.map +1 -0
- package/dist/cjs/loader.cjs.js +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 +17 -7
- package/dist/cjs/pds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +20 -8
- package/dist/cjs/pds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-combobox.cjs.entry.js +2 -2
- package/dist/cjs/pds-combobox.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +48 -2
- package/dist/cjs/pds-copytext.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +2 -2
- package/dist/cjs/pds-dropdown-menu-item.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-filter.cjs.entry.js +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +1 -1
- package/dist/cjs/pds-link.cjs.entry.js +3 -3
- package/dist/cjs/pds-link.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-multiselect.cjs.entry.js +58 -15
- package/dist/cjs/pds-multiselect.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/pds-radio.cjs.entry.js +1 -1
- package/dist/cjs/pds-select.cjs.entry.js +1 -1
- package/dist/cjs/pds-sortable-item.cjs.entry.js +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-cell.cjs.entry.js +35 -3
- package/dist/cjs/pds-table-cell.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-head.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-head.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-table-row.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-row.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-table.cjs.entry.js +11 -4
- package/dist/cjs/pds-table.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-text.cjs.entry.js +40 -1
- package/dist/cjs/pds-text.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +1 -1
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/cjs/truncation-tooltip-BGGnm8SZ.js +249 -0
- package/dist/cjs/truncation-tooltip-BGGnm8SZ.js.map +1 -0
- package/dist/collection/components/pds-button/pds-button.css +1 -1
- package/dist/collection/components/pds-button/pds-button.js +42 -7
- package/dist/collection/components/pds-button/pds-button.js.map +1 -1
- package/dist/collection/components/pds-chip/pds-chip.css +25 -4
- package/dist/collection/components/pds-chip/pds-chip.js +50 -7
- package/dist/collection/components/pds-chip/pds-chip.js.map +1 -1
- package/dist/collection/components/pds-chip/stories/pds-chip.stories.js +36 -13
- package/dist/collection/components/pds-combobox/pds-combobox.js +2 -2
- package/dist/collection/components/pds-combobox/pds-combobox.js.map +1 -1
- package/dist/collection/components/pds-copytext/pds-copytext.js +52 -2
- package/dist/collection/components/pds-copytext/pds-copytext.js.map +1 -1
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js +21 -2
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js.map +1 -1
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.css +1 -1
- package/dist/collection/components/pds-link/pds-link.js +21 -2
- package/dist/collection/components/pds-link/pds-link.js.map +1 -1
- package/dist/collection/components/pds-multiselect/pds-multiselect.css +2 -2
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +130 -13
- package/dist/collection/components/pds-multiselect/pds-multiselect.js.map +1 -1
- package/dist/collection/components/pds-multiselect/stories/pds-multiselect.stories.js +55 -0
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css +1 -1
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +37 -3
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js.map +1 -1
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js.map +1 -1
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +3 -3
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js.map +1 -1
- package/dist/collection/components/pds-table/pds-table.css +1 -0
- package/dist/collection/components/pds-table/pds-table.js +33 -17
- package/dist/collection/components/pds-table/pds-table.js.map +1 -1
- package/dist/collection/components/pds-table/stories/pds-table.stories.js +58 -0
- package/dist/collection/components/pds-text/pds-text.js +43 -2
- package/dist/collection/components/pds-text/pds-text.js.map +1 -1
- package/dist/collection/components/pds-text/stories/pds-text.stories.js +21 -2
- package/dist/collection/utils/truncation-tooltip.js +242 -0
- package/dist/collection/utils/truncation-tooltip.js.map +1 -0
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/docs.json +255 -20
- package/dist/esm/{index-D094LgxJ.js → index-BFkDH5XU.js} +3 -3
- package/dist/esm/index-BFkDH5XU.js.map +1 -0
- package/dist/esm/loader.js +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 +17 -7
- package/dist/esm/pds-button.entry.js.map +1 -1
- package/dist/esm/pds-checkbox.entry.js +1 -1
- package/dist/esm/pds-chip.entry.js +20 -8
- package/dist/esm/pds-chip.entry.js.map +1 -1
- package/dist/esm/pds-combobox.entry.js +2 -2
- package/dist/esm/pds-combobox.entry.js.map +1 -1
- package/dist/esm/pds-copytext.entry.js +49 -3
- package/dist/esm/pds-copytext.entry.js.map +1 -1
- package/dist/esm/pds-dropdown-menu-item.entry.js +2 -2
- package/dist/esm/pds-dropdown-menu-item.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 +1 -1
- package/dist/esm/pds-input.entry.js +1 -1
- package/dist/esm/pds-link.entry.js +3 -3
- package/dist/esm/pds-link.entry.js.map +1 -1
- package/dist/esm/pds-multiselect.entry.js +58 -15
- package/dist/esm/pds-multiselect.entry.js.map +1 -1
- package/dist/esm/pds-radio-group.entry.js +1 -1
- package/dist/esm/pds-radio.entry.js +1 -1
- package/dist/esm/pds-select.entry.js +1 -1
- package/dist/esm/pds-sortable-item.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js +1 -1
- package/dist/esm/pds-table-cell.entry.js +35 -3
- package/dist/esm/pds-table-cell.entry.js.map +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +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 +3 -3
- package/dist/esm/pds-table-row.entry.js.map +1 -1
- package/dist/esm/pds-table.entry.js +11 -4
- package/dist/esm/pds-table.entry.js.map +1 -1
- package/dist/esm/pds-text.entry.js +40 -1
- package/dist/esm/pds-text.entry.js.map +1 -1
- package/dist/esm/pds-textarea.entry.js +1 -1
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm/truncation-tooltip-CTHpMbU3.js +247 -0
- package/dist/esm/truncation-tooltip-CTHpMbU3.js.map +1 -0
- package/dist/esm-es5/{index-D094LgxJ.js → index-BFkDH5XU.js} +1 -1
- package/dist/esm-es5/index-BFkDH5XU.js.map +1 -0
- package/dist/esm-es5/loader.js +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-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-item.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-item.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-input.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js.map +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js.map +1 -1
- package/dist/esm-es5/pds-radio-group.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.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-text.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js.map +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/esm-es5/truncation-tooltip-CTHpMbU3.js +2 -0
- package/dist/esm-es5/truncation-tooltip-CTHpMbU3.js.map +1 -0
- package/dist/pine-core/{p-2aac4495.system.entry.js → p-15ac22bd.system.entry.js} +2 -2
- package/dist/pine-core/p-203f6e9e.entry.js +2 -0
- package/dist/pine-core/p-203f6e9e.entry.js.map +1 -0
- package/dist/pine-core/{p-0ac54273.entry.js → p-276f774a.entry.js} +2 -2
- package/dist/pine-core/p-27ccbd3f.entry.js +2 -0
- package/dist/pine-core/p-27ccbd3f.entry.js.map +1 -0
- package/dist/pine-core/p-2e22a1fc.system.entry.js +2 -0
- package/dist/pine-core/p-2e22a1fc.system.entry.js.map +1 -0
- package/dist/pine-core/{p-01aec1ad.system.entry.js → p-2f64a2fe.system.entry.js} +2 -2
- package/dist/pine-core/p-2f64a2fe.system.entry.js.map +1 -0
- package/dist/pine-core/p-3239c67a.entry.js +2 -0
- package/dist/pine-core/{p-f5fb71f6.entry.js.map → p-3239c67a.entry.js.map} +1 -1
- package/dist/pine-core/{p-ce069162.entry.js → p-32f65e48.entry.js} +2 -2
- package/dist/pine-core/p-4189f1be.system.entry.js +2 -0
- package/dist/pine-core/p-4189f1be.system.entry.js.map +1 -0
- package/dist/pine-core/{p-7d7dce2c.system.entry.js → p-4232520f.system.entry.js} +2 -2
- package/dist/pine-core/{p-8e40c9ef.entry.js → p-439e3343.entry.js} +2 -2
- package/dist/pine-core/p-439e3343.entry.js.map +1 -0
- package/dist/pine-core/{p-5abc5d82.system.entry.js → p-49c2e2ce.system.entry.js} +2 -2
- package/dist/pine-core/{p-b1a7a0b2.entry.js → p-4de64b1f.entry.js} +2 -2
- package/dist/pine-core/{p-0b52923b.system.entry.js → p-52c5ced3.system.entry.js} +2 -2
- package/dist/pine-core/{p-b46f66e8.system.entry.js → p-5757d038.system.entry.js} +2 -2
- package/dist/pine-core/p-5757d038.system.entry.js.map +1 -0
- package/dist/pine-core/{p-36e5e9f4.system.entry.js → p-57aa762e.system.entry.js} +2 -2
- package/dist/pine-core/p-57aa762e.system.entry.js.map +1 -0
- package/dist/pine-core/p-57d2c33a.entry.js +2 -0
- package/dist/pine-core/p-57d2c33a.entry.js.map +1 -0
- package/dist/pine-core/{p-3815f565.entry.js → p-593cee44.entry.js} +2 -2
- package/dist/pine-core/{p-73bce0bf.entry.js → p-5a7b25d0.entry.js} +2 -2
- package/dist/pine-core/{p-06046885.entry.js → p-5dbbb2be.entry.js} +3 -3
- package/dist/pine-core/{p-06046885.entry.js.map → p-5dbbb2be.entry.js.map} +1 -1
- package/dist/pine-core/p-5hPM5knE.js +2 -0
- package/dist/pine-core/p-5hPM5knE.js.map +1 -0
- package/dist/pine-core/{p-957647f9.entry.js → p-663abd80.entry.js} +2 -2
- package/dist/pine-core/{p-23111b1c.system.entry.js → p-6980edfe.system.entry.js} +2 -2
- package/dist/pine-core/{p-BxVkyfaO.system.js → p-6I02BpQf.system.js} +1 -1
- package/dist/pine-core/p-6I02BpQf.system.js.map +1 -0
- package/dist/pine-core/{p-c9965216.system.entry.js → p-6fbe6be4.system.entry.js} +2 -2
- package/dist/pine-core/p-7514a191.entry.js +2 -0
- package/dist/pine-core/p-7514a191.entry.js.map +1 -0
- package/dist/pine-core/{p-bd18b9bf.system.entry.js → p-77d4f274.system.entry.js} +2 -2
- package/dist/pine-core/{p-78246e05.entry.js → p-85ce731b.entry.js} +2 -2
- package/dist/pine-core/{p-b1820970.system.entry.js → p-87cee4a0.system.entry.js} +2 -2
- package/dist/pine-core/{p-fbd8ae50.entry.js → p-88686193.entry.js} +2 -2
- package/dist/pine-core/p-88eb4f6c.entry.js +2 -0
- package/dist/pine-core/p-88eb4f6c.entry.js.map +1 -0
- package/dist/pine-core/{p-b09bde5c.system.entry.js → p-8ab66dbc.system.entry.js} +2 -2
- package/dist/pine-core/p-8be316b4.system.entry.js +2 -0
- package/dist/pine-core/p-8be316b4.system.entry.js.map +1 -0
- package/dist/pine-core/{p-7a11a6c7.entry.js → p-8f935480.entry.js} +2 -2
- package/dist/pine-core/p-9263809e.entry.js +2 -0
- package/dist/pine-core/p-9263809e.entry.js.map +1 -0
- package/dist/pine-core/{p-425144ae.entry.js → p-9a9c1b17.entry.js} +2 -2
- package/dist/pine-core/p-9a9c1b17.entry.js.map +1 -0
- package/dist/pine-core/{p-3f05d72e.system.entry.js → p-9e3e441c.system.entry.js} +2 -2
- package/dist/pine-core/{p-3cd53462.entry.js → p-9e8296fc.entry.js} +2 -2
- package/dist/pine-core/{p-BJPmPVaF.system.js.map → p-B3dAc5EW.system.js.map} +1 -1
- package/dist/pine-core/{p-h_fnwqV_.system.js.map → p-B3xx1u93.system.js.map} +1 -1
- package/dist/pine-core/p-B48FyOD0.system.js.map +1 -0
- package/dist/pine-core/{p-DY97YDUU.system.js.map → p-B5CyjPYU.system.js.map} +1 -1
- package/dist/pine-core/{p-N-jt0_Yl.system.js.map → p-BBJXL9br.system.js.map} +1 -1
- package/dist/pine-core/{p-D094LgxJ.js → p-BFkDH5XU.js} +1 -1
- package/dist/pine-core/p-BFkDH5XU.js.map +1 -0
- package/dist/pine-core/p-BGVC08sX.system.js.map +1 -0
- package/dist/pine-core/p-BMx906Ad.system.js.map +1 -0
- package/dist/pine-core/{p-CjQwwLdV.system.js.map → p-Bd3ynCsJ.system.js.map} +1 -1
- package/dist/pine-core/{p-D4YdQDsG.system.js.map → p-BiLmvJTd.system.js.map} +1 -1
- package/dist/pine-core/{p-PZw10cnm.system.js.map → p-C8y7SAd7.system.js.map} +1 -1
- package/dist/pine-core/p-C9OQdhX3.system.js.map +1 -0
- package/dist/pine-core/{p-gcCcHox5.system.js.map → p-CCh7iS6N.system.js.map} +1 -1
- package/dist/pine-core/p-CEE11B7K.system.js.map +1 -0
- package/dist/pine-core/{p-D3Ug1A-l.system.js.map → p-CbRBe3Eq.system.js.map} +1 -1
- package/dist/pine-core/p-CsWO_n3t.system.js.map +1 -0
- package/dist/pine-core/{p-c2oMjk1r.system.js.map → p-Ctc231vq.system.js.map} +1 -1
- package/dist/pine-core/p-DXVwADJT.system.js +2 -0
- package/dist/pine-core/p-DXVwADJT.system.js.map +1 -0
- package/dist/pine-core/p-DYm9--lc.system.js.map +1 -0
- package/dist/pine-core/p-DenbFuEN.system.js.map +1 -0
- package/dist/pine-core/{p-BnJypAy2.system.js.map → p-DhLX7iDs.system.js.map} +1 -1
- package/dist/pine-core/p-Dkz0RoFB.system.js.map +1 -0
- package/dist/pine-core/p-JAVnELnm.system.js +1 -1
- package/dist/pine-core/{p-15e554ae.entry.js → p-a30edeb1.entry.js} +2 -2
- package/dist/pine-core/{p-5O8bhSdk.system.js.map → p-aKHwHZQR.system.js.map} +1 -1
- package/dist/pine-core/p-b232004f.system.entry.js +2 -0
- package/dist/pine-core/p-b232004f.system.entry.js.map +1 -0
- package/dist/pine-core/{p-fce519e3.system.entry.js → p-b416cb4b.system.entry.js} +2 -2
- package/dist/pine-core/p-b416cb4b.system.entry.js.map +1 -0
- package/dist/pine-core/{p-94c73d98.entry.js → p-b5316979.entry.js} +2 -2
- package/dist/pine-core/p-b5316979.entry.js.map +1 -0
- package/dist/pine-core/{p-d2b2caa2.system.entry.js → p-b6f57c0f.system.entry.js} +2 -2
- package/dist/pine-core/p-b7f2f9f3.system.entry.js +2 -0
- package/dist/pine-core/p-b7f2f9f3.system.entry.js.map +1 -0
- package/dist/pine-core/{p-19fef546.system.entry.js → p-c301925f.system.entry.js} +2 -2
- package/dist/pine-core/{p-19fef546.system.entry.js.map → p-c301925f.system.entry.js.map} +1 -1
- package/dist/pine-core/{p-f0df10c7.system.entry.js → p-ca20b134.system.entry.js} +2 -2
- package/dist/pine-core/p-ca20b134.system.entry.js.map +1 -0
- package/dist/pine-core/{p-6748d7b4.entry.js → p-d38da7a6.entry.js} +2 -2
- package/dist/pine-core/p-d38da7a6.entry.js.map +1 -0
- package/dist/pine-core/p-eac7cc81.entry.js +2 -0
- package/dist/pine-core/p-eac7cc81.entry.js.map +1 -0
- package/dist/pine-core/p-ed5ca877.system.entry.js +2 -0
- package/dist/pine-core/{p-29266dcd.system.entry.js.map → p-ed5ca877.system.entry.js.map} +1 -1
- package/dist/pine-core/{p-13105538.system.entry.js → p-f795d3fe.system.entry.js} +2 -2
- package/dist/pine-core/p-f7d9bZ8U.system.js.map +1 -0
- package/dist/pine-core/p-f81b0dbb.system.entry.js +2 -0
- package/dist/pine-core/p-f81b0dbb.system.entry.js.map +1 -0
- package/dist/pine-core/{p-2d21bc31.entry.js → p-f8a2aedd.entry.js} +2 -2
- package/dist/pine-core/{p-CQtQQn3_.system.js.map → p-hL5Id7g5.system.js.map} +1 -1
- package/dist/pine-core/{p-BK1BTkTt.system.js.map → p-hzdqYC6e.system.js.map} +1 -1
- package/dist/pine-core/p-n9xvc2MF.system.js.map +1 -0
- package/dist/pine-core/pds-button.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-item.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-dropdown-menu.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-link.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-multiselect.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.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-text.entry.esm.js.map +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-button/pds-button.d.ts +12 -1
- package/dist/types/components/pds-chip/pds-chip.d.ts +9 -2
- package/dist/types/components/pds-copytext/pds-copytext.d.ts +10 -0
- package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.d.ts +7 -0
- package/dist/types/components/pds-link/pds-link.d.ts +6 -0
- package/dist/types/components/pds-multiselect/pds-multiselect.d.ts +27 -0
- package/dist/types/components/pds-table/pds-table-cell/pds-table-cell.d.ts +7 -1
- package/dist/types/components/pds-table/pds-table-row/pds-table-row.d.ts +1 -1
- package/dist/types/components/pds-table/pds-table.d.ts +6 -7
- package/dist/types/components/pds-text/pds-text.d.ts +9 -0
- package/dist/types/components.d.ts +86 -16
- package/dist/types/utils/truncation-tooltip.d.ts +21 -0
- package/dist/types/utils/types.d.ts +1 -0
- package/dist/vscode.html-data.json +68 -8
- package/hydrate/index.js +486 -52
- package/hydrate/index.mjs +486 -52
- package/package.json +2 -2
- package/dist/cjs/index-DkQebouX.js.map +0 -1
- package/dist/esm/index-D094LgxJ.js.map +0 -1
- package/dist/esm-es5/index-D094LgxJ.js.map +0 -1
- package/dist/pine-core/p-003884fd.entry.js +0 -2
- package/dist/pine-core/p-003884fd.entry.js.map +0 -1
- package/dist/pine-core/p-01aec1ad.system.entry.js.map +0 -1
- package/dist/pine-core/p-1971d358.entry.js +0 -2
- package/dist/pine-core/p-1971d358.entry.js.map +0 -1
- package/dist/pine-core/p-23aba538.entry.js +0 -2
- package/dist/pine-core/p-23aba538.entry.js.map +0 -1
- package/dist/pine-core/p-29266dcd.system.entry.js +0 -2
- package/dist/pine-core/p-36e5e9f4.system.entry.js.map +0 -1
- package/dist/pine-core/p-3b0a4abe.entry.js +0 -2
- package/dist/pine-core/p-3b0a4abe.entry.js.map +0 -1
- package/dist/pine-core/p-3c026ec7.system.entry.js +0 -2
- package/dist/pine-core/p-3c026ec7.system.entry.js.map +0 -1
- package/dist/pine-core/p-425144ae.entry.js.map +0 -1
- package/dist/pine-core/p-48ed8147.entry.js +0 -2
- package/dist/pine-core/p-48ed8147.entry.js.map +0 -1
- package/dist/pine-core/p-6748d7b4.entry.js.map +0 -1
- package/dist/pine-core/p-6877a50d.system.entry.js +0 -2
- package/dist/pine-core/p-6877a50d.system.entry.js.map +0 -1
- package/dist/pine-core/p-6918b378.system.entry.js +0 -2
- package/dist/pine-core/p-6918b378.system.entry.js.map +0 -1
- package/dist/pine-core/p-8KFA3I5T.system.js.map +0 -1
- package/dist/pine-core/p-8e40c9ef.entry.js.map +0 -1
- package/dist/pine-core/p-93d0be59.entry.js +0 -2
- package/dist/pine-core/p-93d0be59.entry.js.map +0 -1
- package/dist/pine-core/p-94c73d98.entry.js.map +0 -1
- package/dist/pine-core/p-BpZTjdau.system.js.map +0 -1
- package/dist/pine-core/p-BxVkyfaO.system.js.map +0 -1
- package/dist/pine-core/p-CjnIO2Ro.system.js.map +0 -1
- package/dist/pine-core/p-Ct5QAsPN.system.js.map +0 -1
- package/dist/pine-core/p-D094LgxJ.js.map +0 -1
- package/dist/pine-core/p-DR2CskUb.system.js.map +0 -1
- package/dist/pine-core/p-DZEhYV6y.system.js.map +0 -1
- package/dist/pine-core/p-DdTbt4lH.system.js.map +0 -1
- package/dist/pine-core/p-Ri89mw0-.system.js.map +0 -1
- package/dist/pine-core/p-ZUqfslIz.system.js.map +0 -1
- package/dist/pine-core/p-aeb2f6ac.system.entry.js +0 -2
- package/dist/pine-core/p-aeb2f6ac.system.entry.js.map +0 -1
- package/dist/pine-core/p-b3c66c58.entry.js +0 -2
- package/dist/pine-core/p-b3c66c58.entry.js.map +0 -1
- package/dist/pine-core/p-b46f66e8.system.entry.js.map +0 -1
- package/dist/pine-core/p-cb8c24ad.system.entry.js +0 -2
- package/dist/pine-core/p-cb8c24ad.system.entry.js.map +0 -1
- package/dist/pine-core/p-d83d6fce.system.entry.js +0 -2
- package/dist/pine-core/p-d83d6fce.system.entry.js.map +0 -1
- package/dist/pine-core/p-eT6pKhWF.system.js.map +0 -1
- package/dist/pine-core/p-f0df10c7.system.entry.js.map +0 -1
- package/dist/pine-core/p-f5fb71f6.entry.js +0 -2
- package/dist/pine-core/p-fce519e3.system.entry.js.map +0 -1
- package/dist/pine-core/p-kYQszSpu.system.js.map +0 -1
- /package/dist/pine-core/{p-2aac4495.system.entry.js.map → p-15ac22bd.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0ac54273.entry.js.map → p-276f774a.entry.js.map} +0 -0
- /package/dist/pine-core/{p-ce069162.entry.js.map → p-32f65e48.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7d7dce2c.system.entry.js.map → p-4232520f.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5abc5d82.system.entry.js.map → p-49c2e2ce.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b1a7a0b2.entry.js.map → p-4de64b1f.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0b52923b.system.entry.js.map → p-52c5ced3.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-3815f565.entry.js.map → p-593cee44.entry.js.map} +0 -0
- /package/dist/pine-core/{p-73bce0bf.entry.js.map → p-5a7b25d0.entry.js.map} +0 -0
- /package/dist/pine-core/{p-957647f9.entry.js.map → p-663abd80.entry.js.map} +0 -0
- /package/dist/pine-core/{p-23111b1c.system.entry.js.map → p-6980edfe.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c9965216.system.entry.js.map → p-6fbe6be4.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-bd18b9bf.system.entry.js.map → p-77d4f274.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-78246e05.entry.js.map → p-85ce731b.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b1820970.system.entry.js.map → p-87cee4a0.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-fbd8ae50.entry.js.map → p-88686193.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b09bde5c.system.entry.js.map → p-8ab66dbc.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7a11a6c7.entry.js.map → p-8f935480.entry.js.map} +0 -0
- /package/dist/pine-core/{p-3f05d72e.system.entry.js.map → p-9e3e441c.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-3cd53462.entry.js.map → p-9e8296fc.entry.js.map} +0 -0
- /package/dist/pine-core/{p-15e554ae.entry.js.map → p-a30edeb1.entry.js.map} +0 -0
- /package/dist/pine-core/{p-d2b2caa2.system.entry.js.map → p-b6f57c0f.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-13105538.system.entry.js.map → p-f795d3fe.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-2d21bc31.entry.js.map → p-f8a2aedd.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"p-C9OQdhX3.system.js","sources":["src/components/pds-multiselect/pds-multiselect.scss?tag=pds-multiselect&encapsulation=shadow","src/components/pds-multiselect/pds-multiselect.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host([aria-disabled=\"true\"]) {\n .pds-multiselect__trigger {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n .pds-multiselect__icon {\n color: var(--pine-color-text-disabled);\n }\n}\n\n.pds-multiselect {\n position: relative;\n}\n\n.pds-multiselect__label {\n color: var(--pine-color-text-label);\n display: block;\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-multiselect__wrapper {\n position: relative;\n}\n\n.pds-multiselect__trigger {\n align-items: center;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-medium);\n gap: var(--pine-dimension-xs);\n justify-content: space-between;\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pine-dimension-450);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n position: relative;\n text-align: start;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n width: 100%;\n\n &:hover:not(.pds-multiselect__trigger--disabled) {\n border-color: var(--pine-color-border-hover);\n }\n\n &:focus:not(.pds-multiselect__trigger--disabled) {\n border-color: var(--pine-color-border-active);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &.pds-multiselect__trigger--open {\n border-color: var(--pine-color-border-active);\n }\n\n &.pds-multiselect__trigger--invalid {\n background-color: var(--pine-color-red-050);\n border-color: var(--pine-color-border-danger);\n\n &:focus {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n &.pds-multiselect__trigger--disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n}\n\n.pds-multiselect__trigger-text {\n color: var(--pine-color-text-strong);\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &.pds-multiselect__trigger-text--placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n .pds-multiselect__trigger--disabled & {\n color: var(--pine-color-text-disabled);\n }\n}\n\n.pds-multiselect__icon {\n color: var(--pine-color-icon);\n flex-shrink: var(--pine-dimension-none);\n}\n\n.pds-multiselect__panel {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-dimension-125);\n box-shadow: var(--pine-box-shadow);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n position: absolute;\n z-index: var(--pine-z-index-raised);\n}\n\n.pds-multiselect__search {\n align-items: center;\n border-block-end: var(--pine-border);\n border-block-end-color: var(--pine-color-border-subtle);\n display: flex;\n gap: var(--pine-dimension-xs);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n pds-icon {\n color: var(--pine-color-text-muted);\n flex-shrink: var(--pine-dimension-none);\n }\n}\n\n.pds-multiselect__search-input {\n background: transparent;\n border: var(--pine-dimension-none);\n color: var(--pine-color-text-strong);\n flex: 1;\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n min-width: var(--pine-dimension-none);\n outline: none;\n\n &::placeholder {\n color: var(--pine-color-text-placeholder);\n }\n}\n\n.pds-multiselect__selected-section {\n border-block-end: var(--pine-border);\n border-block-end-color: var(--pine-color-border-subtle);\n padding: var(--pine-dimension-xs);\n}\n\n.pds-multiselect__selected-list {\n list-style: none;\n margin: var(--pine-dimension-none);\n padding: var(--pine-dimension-none);\n}\n\n.pds-multiselect__selected-item {\n color: var(--pine-color-text-strong);\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n overflow: hidden;\n padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.pds-multiselect__listbox {\n background: transparent;\n border: var(--pine-dimension-none);\n box-sizing: border-box;\n list-style: none;\n margin: var(--pine-dimension-none);\n overflow-y: auto;\n padding: var(--pine-dimension-xs);\n}\n\n.pds-multiselect__option {\n align-items: center;\n background: transparent;\n border-radius: var(--pine-dimension-xs);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);\n transition: background 0.15s;\n\n // Prevent checkbox label from triggering double events\n pds-checkbox {\n pointer-events: none;\n width: 100%;\n }\n\n &:hover,\n &.pds-multiselect__option--highlighted {\n background: var(--pine-color-background-muted);\n }\n\n &:focus-visible {\n outline: var(--pine-dimension-none);\n }\n}\n\n.pds-multiselect__create-option {\n color: var(--pine-color-text-strong);\n width: 100%;\n\n pds-icon {\n color: var(--pine-color-text-muted);\n flex-shrink: var(--pine-dimension-none);\n }\n}\n\n.pds-multiselect__empty,\n.pds-multiselect__loading {\n align-items: center;\n color: var(--pine-color-text-muted);\n display: flex;\n font: var(--pine-typography-body);\n justify-content: center;\n padding: var(--pine-dimension-sm);\n}\n\n.pds-multiselect__load-more {\n align-items: center;\n display: flex;\n justify-content: center;\n padding: var(--pine-dimension-xs);\n}\n\n.pds-multiselect__helper {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm);\n margin-block-start: var(--pine-dimension-2xs);\n margin-inline-start: var(--pine-dimension-none);\n}\n\n.pds-multiselect__error {\n align-items: flex-start;\n color: var(--pine-color-text-message-danger);\n display: flex;\n font: var(--pine-typography-body-sm);\n gap: var(--pine-dimension-2xs);\n margin-block-start: var(--pine-dimension-2xs);\n margin-inline-start: var(--pine-dimension-none);\n\n pds-icon {\n flex-shrink: var(--pine-dimension-none);\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n.visually-hidden {\n border: var(--pine-dimension-none);\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: var(--pine-dimension-none);\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { computePosition, flip, offset, shift, size, autoUpdate } from '@floating-ui/dom';\nimport { debounceEvent } from '@utils/utils';\nimport { messageId, assignDescription } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\nimport type {\n MultiselectOption,\n MultiselectChangeEventDetail,\n MultiselectSearchEventDetail,\n MultiselectLoadOptionsEventDetail,\n MultiselectCreateEventDetail,\n AsyncResponse,\n CreateResponse,\n} from './multiselect-interface';\n\n/**\n * @slot (default) - Static option elements for the multiselect\n * @slot empty - Custom empty state message when no options match\n * @slot loading - Custom loading indicator\n */\n@Component({\n tag: 'pds-multiselect',\n styleUrl: 'pds-multiselect.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class PdsMultiselect {\n private triggerEl?: HTMLButtonElement;\n private searchInputEl?: HTMLInputElement;\n private containerEl?: HTMLElement;\n private listboxEl?: HTMLElement;\n private panelEl?: HTMLElement;\n private internals?: ElementInternals;\n private abortController?: AbortController;\n private fetchDebounceTimer?: number;\n private fetchTimeoutTimer?: number;\n private observer?: MutationObserver;\n private cleanupAutoUpdate?: () => void;\n\n @Element() el!: HTMLPdsMultiselectElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Text to be displayed as the multiselect label.\n */\n @Prop() label?: string;\n\n /**\n * Placeholder text for the input field.\n */\n @Prop() placeholder?: string = 'Select...';\n\n /**\n * Placeholder text for the search input inside the dropdown panel.\n * @default 'Find...'\n */\n @Prop() searchPlaceholder: string = 'Find...';\n\n /**\n * Whether to close the panel after an option is selected.\n * Defaults to `false` (panel stays open for multi-select).\n */\n @Prop() closePanelOnSelect: boolean = false;\n\n /**\n * Specifies the name. Submitted with the form as part of a name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * Array of selected option values.\n */\n @Prop({ mutable: true }) value: string[] = [];\n\n /**\n * Determines whether or not the multiselect is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * URL endpoint for async data fetching.\n */\n @Prop() asyncUrl?: string;\n\n /**\n * HTTP method for async requests.\n */\n @Prop() asyncMethod: 'GET' | 'POST' = 'GET';\n\n /**\n * Debounce delay in milliseconds for search/fetch.\n */\n @Prop() debounce: number = 300;\n\n /**\n * Timeout in milliseconds for async fetch requests.\n */\n @Prop() fetchTimeout: number = 30000;\n\n /**\n * Maximum number of selections allowed.\n */\n @Prop() maxSelections?: number;\n\n /**\n * Maximum height of the dropdown before scrolling.\n */\n @Prop() maxHeight: string = '300px';\n\n /**\n * Width of the trigger button (and reference for dropdown positioning).\n */\n @Prop() triggerWidth: string = '100%';\n\n /**\n * Minimum width of the dropdown panel.\n */\n @Prop() minWidth: string = '250px';\n\n /**\n * Width of the dropdown panel. Defaults to the trigger width.\n */\n @Prop() panelWidth?: string;\n\n /**\n * Visually hides the label but keeps it accessible.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * Hides the selected items summary section in the dropdown panel.\n */\n @Prop() hideSelectedItems: boolean = false;\n\n /**\n * Error message to display.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Helper message to display below the input.\n */\n @Prop() helperMessage?: string;\n\n /**\n * If true, the multiselect is in an invalid state.\n */\n @Prop() invalid?: boolean;\n\n /**\n * If true, the multiselect is required.\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether the component is currently loading async options.\n */\n @Prop({ mutable: true }) loading: boolean = false;\n\n /**\n * Options provided externally (for consumer-managed async).\n */\n @Prop() options?: MultiselectOption[];\n\n /**\n * Function to format async results. Receives raw API response item.\n */\n @Prop() formatResult?: (item: unknown) => MultiselectOption;\n\n /**\n * URL endpoint for creating new options. When set, shows \"Add\" option when no matches found.\n */\n @Prop() createUrl?: string;\n\n /**\n * CSRF token for authenticated requests. If not provided, attempts to read from meta tag.\n */\n @Prop() csrfToken?: string;\n\n /**\n * CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`.\n */\n @Prop() csrfHeaderName?: string = 'X-CSRF-Token';\n\n // Internal state\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() highlightedIndex: number = -1;\n @State() internalOptions: MultiselectOption[] = [];\n @State() selectedItems: MultiselectOption[] = [];\n @State() currentPage: number = 1;\n @State() hasMore: boolean = false;\n @State() creating: boolean = false;\n\n // Flag to prevent focusout from closing during open transition\n private isOpening: boolean = false;\n // Flag to suppress dismiss event when panel closes due to selection (not user dismissal)\n private isClosingViaSelection: boolean = false;\n // Flag to track if initial async fetch has been triggered (prevents double fetch)\n private initialAsyncFetchTriggered: boolean = false;\n // Flag to track if value changed during loading and needs resolution after fetch completes\n private pendingUnresolvedFetch: boolean = false;\n\n /**\n * Emitted when selection changes.\n */\n @Event() pdsMultiselectChange!: EventEmitter<MultiselectChangeEventDetail>;\n\n /**\n * Emitted on search input (for consumer-managed async).\n */\n @Event() pdsMultiselectSearch!: EventEmitter<MultiselectSearchEventDetail>;\n\n /**\n * Emitted to request more options (pagination).\n */\n @Event() pdsMultiselectLoadOptions!: EventEmitter<MultiselectLoadOptionsEventDetail>;\n\n /**\n * Emitted when a new option is created.\n */\n @Event() pdsMultiselectCreate!: EventEmitter<MultiselectCreateEventDetail>;\n\n /**\n * Emitted when the dropdown is dismissed via Escape key or click outside.\n *\n * This event fires only when the user explicitly dismisses the panel without making a selection:\n * - ✅ Fires: Pressing Escape key while dropdown is open\n * - ✅ Fires: Clicking outside the component while dropdown is open\n * - ❌ Does NOT fire: When panel closes due to selection (including when `closePanelOnSelect` is true)\n * - ❌ Does NOT fire: When panel closes programmatically via `closeDropdown()`\n *\n * Equivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction.\n */\n @Event() pdsMultiselectDismiss!: EventEmitter<void>;\n\n private originalSearchEmitter?: EventEmitter<MultiselectSearchEventDetail>;\n\n connectedCallback() {\n // Initialize ElementInternals for form association (only once per element instance)\n if (this.el.attachInternals && !this.internals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n componentWillLoad() {\n this.originalSearchEmitter = this.pdsMultiselectSearch;\n this.syncSelectedItems();\n }\n\n componentDidLoad() {\n this.setupDebounce();\n this.setupMutationObserver();\n this.setupSlotChangeListener();\n this.updateFormValue();\n\n // Ensure preselected values sync after DOM is fully ready\n // This handles cases where slot content loads after initial render (e.g., in docs/MDX)\n requestAnimationFrame(() => {\n this.updateOptionsFromSlot();\n this.syncSelectedItems();\n });\n\n // If we have preselected values and asyncUrl, fetch options to resolve them\n // This ensures the trigger shows \"X items\" instead of placeholder on initial render\n if (this.asyncUrl && this.ensureValueArray().length > 0) {\n this.initialAsyncFetchTriggered = true;\n this.fetchOptions('', 1);\n }\n }\n\n private setupSlotChangeListener() {\n const slot = this.el.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n if (slot) {\n slot.addEventListener('slotchange', () => {\n this.updateOptionsFromSlot();\n this.syncSelectedItems();\n });\n // Also call it immediately in case content is already slotted\n this.updateOptionsFromSlot();\n }\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.cleanupAutoUpdate?.();\n this.clearAsyncFetchState();\n }\n\n @Watch('debounce')\n protected setupDebounce() {\n const { pdsMultiselectSearch, debounce, originalSearchEmitter } = this;\n this.pdsMultiselectSearch = debounce === undefined\n ? originalSearchEmitter ?? pdsMultiselectSearch\n : debounceEvent(pdsMultiselectSearch, debounce);\n }\n\n @Watch('value')\n protected valueChanged(newValue: string[] | string) {\n // Handle JSON string values (from HTML attributes)\n if (typeof newValue === 'string') {\n try {\n const parsed = JSON.parse(newValue);\n if (Array.isArray(parsed)) {\n this.value = parsed;\n return; // The assignment will trigger this watcher again with the array\n }\n } catch {\n // Not valid JSON, treat as single value\n this.value = newValue ? [newValue] : [];\n return;\n }\n }\n this.syncSelectedItems();\n this.updateFormValue();\n\n // If using asyncUrl and some values couldn't be resolved, fetch options\n // This handles programmatic value changes where the options aren't loaded yet\n if (this.asyncUrl) {\n const valueArray = this.ensureValueArray();\n const hasUnresolvedValues = valueArray.length > 0 && this.selectedItems.length < valueArray.length;\n if (hasUnresolvedValues) {\n if (this.loading) {\n // Mark that we need to re-check after current fetch completes\n this.pendingUnresolvedFetch = true;\n } else {\n this.fetchOptions('', 1);\n }\n }\n }\n }\n\n @Watch('options')\n protected optionsChanged() {\n if (this.options) {\n this.internalOptions = [...this.options];\n }\n }\n\n @Watch('internalOptions')\n protected internalOptionsChanged() {\n // Re-sync selected items when options become available\n // This handles the case where value is set before options are loaded (e.g., from slot)\n this.syncSelectedItems();\n }\n\n /**\n * Sets focus on the trigger button.\n */\n @Method()\n async setFocus() {\n this.triggerEl?.focus();\n }\n\n /**\n * Clears all selected values and resets the component.\n */\n @Method()\n async clear() {\n const hadValues = this.value.length > 0 || this.searchQuery !== '';\n this.value = [];\n this.searchQuery = '';\n this.syncSelectedItems();\n this.updateFormValue();\n if (hadValues) {\n this.pdsMultiselectChange.emit({ values: [], items: [] });\n }\n }\n\n /**\n * Handle global keyboard events for accessibility.\n * Closes dropdown on Escape key press regardless of focus location.\n */\n @Listen('keydown', { target: 'window' })\n handleWindowKeyDown(event: KeyboardEvent) {\n if (!this.isOpen) return;\n\n if (event.key === 'Escape') {\n event.preventDefault();\n this.pdsMultiselectDismiss.emit();\n this.closeDropdown();\n this.triggerEl?.focus();\n }\n }\n\n private setupMutationObserver() {\n this.observer = new MutationObserver(() => {\n this.updateOptionsFromSlot();\n });\n\n this.observer.observe(this.el, {\n childList: true,\n subtree: true,\n });\n }\n\n private updateOptionsFromSlot() {\n const slot = this.el.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n if (!slot) return;\n\n const options = slot.assignedElements({ flatten: true })\n .filter((el): el is HTMLOptionElement => el.tagName === 'OPTION')\n .map(opt => ({\n id: opt.value,\n text: opt.textContent || opt.value,\n }));\n\n // Only update if we actually found options AND we're not using async/external options\n // Don't clear internalOptions if slot returns empty (might be mid-DOM-update)\n if (options.length > 0 && !this.asyncUrl && !this.options) {\n this.internalOptions = options;\n }\n }\n\n private clearAsyncFetchState() {\n if (this.fetchDebounceTimer !== undefined) {\n window.clearTimeout(this.fetchDebounceTimer);\n this.fetchDebounceTimer = undefined;\n }\n if (this.fetchTimeoutTimer !== undefined) {\n window.clearTimeout(this.fetchTimeoutTimer);\n this.fetchTimeoutTimer = undefined;\n }\n this.abortController?.abort();\n this.abortController = undefined;\n }\n\n private debouncedFetchAsyncOptions(query: string, page: number = 1) {\n if (!this.asyncUrl) return;\n\n if (this.fetchDebounceTimer !== undefined) {\n window.clearTimeout(this.fetchDebounceTimer);\n }\n\n const delay = Math.max(0, this.debounce ?? 0);\n this.fetchDebounceTimer = window.setTimeout(() => {\n this.fetchDebounceTimer = undefined;\n this.fetchOptions(query, page);\n }, delay);\n }\n\n private syncSelectedItems() {\n // Ensure value is an array (may be string from HTML attribute)\n const valueArray = this.ensureValueArray();\n const allOptions = this.getAllOptions();\n\n // Map values to options, preserving existing selectedItems for values not yet in options\n const newSelectedItems: MultiselectOption[] = [];\n const existingItemsMap = new Map(this.selectedItems.map(item => [String(item.id), item]));\n\n valueArray.forEach(val => {\n // First try to find in available options\n const option = allOptions.find(opt => String(opt.id) === String(val));\n\n if (option) {\n newSelectedItems.push(option);\n } else if (existingItemsMap.has(String(val))) {\n // If not in options but exists in current selectedItems, preserve it\n // This handles the case where async data hasn't loaded yet or newly created items\n newSelectedItems.push(existingItemsMap.get(String(val))!);\n }\n // Note: We don't create placeholders for values without matching options.\n // This ensures selectedItems remains empty until options are actually loaded,\n // which matches the expected behavior for preselected values.\n });\n\n this.selectedItems = newSelectedItems;\n }\n\n private ensureValueArray(): string[] {\n // Handle JSON string values passed via HTML attribute\n if (typeof this.value === 'string') {\n try {\n const parsed = JSON.parse(this.value as unknown as string);\n if (Array.isArray(parsed)) {\n this.value = parsed;\n return parsed;\n }\n } catch {\n // Not valid JSON, treat as single value\n const singleValue = this.value as unknown as string;\n this.value = singleValue ? [singleValue] : [];\n return this.value;\n }\n }\n return Array.isArray(this.value) ? this.value : [];\n }\n\n private getAllOptions(): MultiselectOption[] {\n return this.options || this.internalOptions;\n }\n\n\n private getFilteredOptions(): MultiselectOption[] {\n const allOptions = this.getAllOptions();\n const query = this.searchQuery.toLowerCase();\n\n const filtered = allOptions.filter(opt => {\n // Filter by search query only - don't filter out selected items\n if (query) {\n return opt.text.toLowerCase().includes(query);\n }\n return true;\n });\n\n // Add create option if enabled and no matches found\n if (this.createUrl && this.searchQuery.trim() && filtered.length === 0) {\n return [{\n id: '__create__',\n text: this.searchQuery.trim(),\n isCreateOption: true,\n }];\n }\n\n return filtered;\n }\n\n private updateFormValue() {\n if (this.internals?.setFormValue) {\n // Ensure value is an array before iterating\n const valueArray = this.ensureValueArray();\n\n // Submit as multiple values with same name (native select multiple behavior)\n const formData = new FormData();\n valueArray.forEach(val => {\n if (this.name) {\n formData.append(this.name, val);\n }\n });\n this.internals.setFormValue(formData);\n\n // Update validity state for required validation\n if (this.required && valueArray.length === 0) {\n this.internals.setValidity(\n { valueMissing: true },\n 'Please select at least one option.',\n this.triggerEl\n );\n } else {\n this.internals.setValidity({});\n }\n }\n }\n\n private getCsrfToken(): string | null {\n // Use provided token if available\n if (this.csrfToken) {\n return this.csrfToken;\n }\n\n // Try to read from meta tag\n const metaTag = document.querySelector('meta[name=\"csrf-token\"]') as HTMLMetaElement;\n return metaTag?.content || null;\n }\n\n private async fetchOptions(query: string, page: number = 1) {\n if (!this.asyncUrl) return;\n\n // Abort any pending request and clear existing timeout\n this.abortController?.abort();\n if (this.fetchTimeoutTimer !== undefined) {\n window.clearTimeout(this.fetchTimeoutTimer);\n this.fetchTimeoutTimer = undefined;\n }\n\n this.abortController = new AbortController();\n this.loading = true;\n\n // Set up timeout for fetch request\n this.fetchTimeoutTimer = window.setTimeout(() => {\n this.abortController?.abort();\n this.fetchTimeoutTimer = undefined;\n }, this.fetchTimeout);\n\n try {\n // Guard against malformed asyncUrl\n let url: URL;\n try {\n url = new URL(this.asyncUrl, window.location.origin);\n } catch (urlError) {\n throw new TypeError(`Invalid asyncUrl: ${this.asyncUrl}`);\n }\n\n if (this.asyncMethod === 'GET') {\n url.searchParams.set('search', query);\n url.searchParams.set('page', String(page));\n }\n\n const csrfToken = this.getCsrfToken();\n const headers: Record<string, string> = {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n };\n\n if (csrfToken) {\n const headerName = this.csrfHeaderName || 'X-CSRF-Token';\n headers[headerName] = csrfToken;\n }\n\n const response = await fetch(url.toString(), {\n method: this.asyncMethod,\n signal: this.abortController.signal,\n headers,\n ...(this.asyncMethod === 'POST' && {\n body: JSON.stringify({ search: query, page }),\n }),\n });\n\n // Clear timeout on successful response\n if (this.fetchTimeoutTimer !== undefined) {\n window.clearTimeout(this.fetchTimeoutTimer);\n this.fetchTimeoutTimer = undefined;\n }\n\n if (!response.ok) throw new Error('Failed to fetch options');\n\n const data: AsyncResponse = await response.json();\n\n const formattedResults = data.results.map(item => {\n // If formatResult is provided, use it\n if (this.formatResult) {\n return this.formatResult(item);\n }\n\n // Defensive check: ensure item is an object before spreading\n if (typeof item === 'object' && item !== null) {\n return {\n id: item.id,\n text: item.text,\n ...item,\n } as MultiselectOption;\n }\n\n // Handle primitives by converting to safe shape\n return {\n id: String(item),\n text: String(item),\n } as MultiselectOption;\n });\n\n if (page === 1) {\n this.internalOptions = formattedResults;\n } else {\n this.internalOptions = [...this.internalOptions, ...formattedResults];\n }\n\n this.hasMore = data.totalCount ? this.internalOptions.length < data.totalCount : false;\n this.currentPage = page;\n\n } catch (error) {\n // Clear timeout on error\n if (this.fetchTimeoutTimer !== undefined) {\n window.clearTimeout(this.fetchTimeoutTimer);\n this.fetchTimeoutTimer = undefined;\n }\n\n if ((error as Error).name !== 'AbortError') {\n console.error('PdsMultiselect: Failed to fetch options', error);\n }\n } finally {\n this.loading = false;\n\n // Check if value changed during loading and still has unresolved values\n if (this.pendingUnresolvedFetch) {\n this.pendingUnresolvedFetch = false;\n const valueArray = this.ensureValueArray();\n const hasUnresolvedValues = valueArray.length > 0 && this.selectedItems.length < valueArray.length;\n if (hasUnresolvedValues) {\n this.fetchOptions('', 1);\n }\n }\n }\n }\n\n private async createOption(query: string) {\n if (!this.createUrl || !query.trim()) return;\n\n // Reentrancy guard: prevent duplicate POSTs if creation is already in-flight\n if (this.creating) return;\n\n this.creating = true;\n\n try {\n const url = new URL(this.createUrl, window.location.origin);\n\n const csrfToken = this.getCsrfToken();\n const headers: Record<string, string> = {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n };\n\n if (csrfToken) {\n const headerName = this.csrfHeaderName || 'X-CSRF-Token';\n headers[headerName] = csrfToken;\n }\n\n const response = await fetch(url.toString(), {\n method: 'POST',\n headers,\n body: JSON.stringify({ text: query.trim() }),\n });\n\n if (!response.ok) throw new Error('Failed to create option');\n\n const data: CreateResponse = await response.json();\n\n const newOption: MultiselectOption = {\n id: data.id,\n text: data.text,\n ...data,\n };\n\n // Add to internal options first\n this.internalOptions = [...this.internalOptions, newOption];\n\n // Select the new option\n this.value = [...this.value, String(newOption.id)];\n\n // Sync selected items to update display with new option\n this.syncSelectedItems();\n\n // Emit create event\n this.pdsMultiselectCreate.emit({\n query: query.trim(),\n newOption,\n });\n\n // Emit change event with synced items\n this.pdsMultiselectChange.emit({\n values: this.value,\n items: this.selectedItems,\n });\n\n // Clear search and keep dropdown open\n this.searchQuery = '';\n this.highlightedIndex = -1;\n\n // Focus back on search input\n requestAnimationFrame(() => {\n this.searchInputEl?.focus();\n });\n\n } catch (error) {\n console.error('PdsMultiselect: Failed to create option', error);\n } finally {\n this.creating = false;\n }\n }\n\n private handleTriggerClick = () => {\n if (this.disabled) return;\n\n if (this.isOpen) {\n this.closeDropdown();\n } else {\n this.openDropdown();\n }\n };\n\n private handleTriggerKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (!this.isOpen) {\n this.openDropdown();\n }\n break;\n }\n };\n\n private handleSearchInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.searchQuery = target.value;\n this.highlightedIndex = -1;\n\n // Emit search event for consumer-managed async\n this.pdsMultiselectSearch.emit({ query: this.searchQuery });\n\n // Fetch from async URL if configured\n if (this.asyncUrl) {\n this.debouncedFetchAsyncOptions(this.searchQuery, 1);\n }\n };\n\n private handleSearchInputKeyDown = (e: KeyboardEvent) => {\n const filteredOptions = this.getFilteredOptions();\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n this.highlightedIndex = Math.min(this.highlightedIndex + 1, filteredOptions.length - 1);\n this.scrollOptionIntoView();\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);\n this.scrollOptionIntoView();\n break;\n\n case 'Enter':\n e.preventDefault();\n if (this.highlightedIndex >= 0) {\n const option = filteredOptions[this.highlightedIndex];\n if (option) {\n this.selectOption(option);\n }\n }\n break;\n\n // Escape is handled by the global @Listen('keydown') handler\n\n case 'Tab':\n this.closeDropdown();\n break;\n }\n };\n\n private handleContainerFocusOut = () => {\n // Use setTimeout to delay the check - this allows click events and focus transitions to complete\n // before we decide to close the dropdown\n setTimeout(() => {\n // Don't close if we're in the middle of opening, already closed,\n // or closing due to a selection (not a user dismissal)\n if (!this.isOpen || this.isOpening || this.isClosingViaSelection) return;\n\n const activeElement = document.activeElement;\n\n // Check if focus is within our component's shadow root\n const isInShadowRoot = this.el.shadowRoot?.contains(activeElement);\n\n // Also check if focus is on the host element itself\n const isOnHost = activeElement === this.el;\n\n if (!isInShadowRoot && !isOnHost) {\n this.pdsMultiselectDismiss.emit();\n this.closeDropdown();\n }\n }, 0);\n };\n\n private openDropdown() {\n if (this.disabled) return;\n\n this.isOpening = true;\n this.isOpen = true;\n this.highlightedIndex = -1;\n\n // Trigger initial fetch if async (skip if already fetching from componentDidLoad)\n if (this.asyncUrl && this.internalOptions.length === 0 && !this.initialAsyncFetchTriggered) {\n this.debouncedFetchAsyncOptions(this.searchQuery, 1);\n }\n // Reset the flag so subsequent opens can fetch if needed\n this.initialAsyncFetchTriggered = false;\n\n requestAnimationFrame(() => {\n this.positionDropdown();\n // Focus the search input after the panel is positioned\n this.searchInputEl?.focus();\n // Clear the opening flag after focus has moved\n setTimeout(() => {\n this.isOpening = false;\n }, 50);\n });\n }\n\n private closeDropdown() {\n this.isOpen = false;\n this.highlightedIndex = -1;\n this.searchQuery = '';\n\n // Reset the selection-close guard after the focusout handler's setTimeout has resolved\n if (this.isClosingViaSelection) {\n setTimeout(() => {\n this.isClosingViaSelection = false;\n }, 0);\n }\n\n // Clean up auto-update\n if (this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate();\n this.cleanupAutoUpdate = undefined;\n }\n }\n\n private positionDropdown() {\n if (!this.containerEl || !this.panelEl) return;\n const referenceEl = this.triggerEl || this.containerEl;\n\n const { minWidth, panelWidth } = this;\n\n const updatePosition = () => {\n computePosition(referenceEl!, this.panelEl!, {\n placement: 'bottom-start',\n strategy: 'absolute',\n middleware: [\n offset(12),\n flip(),\n shift({ padding: 8 }),\n size({\n apply: ({ rects, elements }) => {\n Object.assign(elements.floating.style, {\n width: panelWidth ?? `${rects.reference.width}px`,\n minWidth,\n });\n },\n }),\n ],\n }).then(({ x, y }) => {\n if (this.panelEl) {\n this.panelEl.style.left = `${x}px`;\n this.panelEl.style.top = `${y}px`;\n }\n });\n };\n\n // Initial position\n updatePosition();\n\n // Set up auto-update for window resize and scroll\n const cleanupAutoUpdate = autoUpdate(\n referenceEl!,\n this.panelEl,\n updatePosition\n );\n this.cleanupAutoUpdate = () => {\n cleanupAutoUpdate();\n this.clearAsyncFetchState();\n };\n }\n\n private scrollOptionIntoView() {\n requestAnimationFrame(() => {\n const highlighted = this.listboxEl?.querySelector(`[data-index=\"${this.highlightedIndex}\"]`) as HTMLElement;\n highlighted?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n });\n }\n\n private toggleOption(option: MultiselectOption) {\n // Handle create option\n if (option.isCreateOption) {\n // Prevent multiple create calls while one is in-flight\n if (!this.creating) {\n this.createOption(this.searchQuery);\n }\n return;\n }\n\n const optionId = String(option.id);\n const isSelected = this.value.includes(optionId);\n\n if (isSelected) {\n // Remove from selection\n this.value = this.value.filter(v => v !== optionId);\n } else {\n // Add to selection\n if (this.maxSelections && this.value.length >= this.maxSelections) {\n return;\n }\n\n this.value = [...this.value, optionId];\n }\n\n // Sync selected items to ensure no duplicates and accurate state\n this.syncSelectedItems();\n\n // Emit change event with synced items\n this.pdsMultiselectChange.emit({\n values: this.value,\n items: this.selectedItems,\n });\n\n if (this.closePanelOnSelect) {\n this.isClosingViaSelection = true;\n this.closeDropdown();\n this.triggerEl?.focus();\n } else {\n // Keep focus on search input, don't close dropdown\n this.searchInputEl?.focus();\n }\n }\n\n private selectOption(option: MultiselectOption) {\n // For keyboard navigation - toggle the option\n this.toggleOption(option);\n }\n\n private handleOptionMouseDown = (option: MultiselectOption) => (e: MouseEvent) => {\n e.preventDefault(); // Prevent focus change\n this.toggleOption(option);\n };\n\n private handleOptionMouseEnter = (index: number) => () => {\n this.highlightedIndex = index;\n };\n\n\n private handleScroll = (e: Event) => {\n if (!this.asyncUrl || !this.hasMore || this.loading) return;\n\n const target = e.target as HTMLElement;\n const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n // Load more when near bottom (within 50px)\n if (scrollBottom < 50) {\n this.pdsMultiselectLoadOptions.emit({\n query: this.searchQuery,\n page: this.currentPage + 1,\n });\n this.debouncedFetchAsyncOptions(this.searchQuery, this.currentPage + 1);\n }\n };\n\n\n private renderSelectedItemsList() {\n if (this.hideSelectedItems || this.selectedItems.length === 0) return null;\n\n return (\n <div class=\"pds-multiselect__selected-section\">\n <ul class=\"pds-multiselect__selected-list\" role=\"list\">\n {this.selectedItems.map(item => (\n <li key={String(item.id)} class=\"pds-multiselect__selected-item\">\n {item.text}\n </li>\n ))}\n </ul>\n </div>\n );\n }\n\n private renderDropdown() {\n if (!this.isOpen) return null;\n\n const filteredOptions = this.getFilteredOptions();\n const valueArray = this.ensureValueArray();\n const hasSlottedEmpty = !!this.el.querySelector('[slot=\"empty\"]');\n const hasSlottedLoading = !!this.el.querySelector('[slot=\"loading\"]');\n\n return (\n <div\n class=\"pds-multiselect__panel\"\n ref={el => (this.panelEl = el)}\n style={{ minWidth: this.minWidth }}\n >\n {/* Search input */}\n <div class=\"pds-multiselect__search\">\n <pds-icon name=\"search\" size=\"small\" />\n <input\n ref={el => (this.searchInputEl = el)}\n type=\"text\"\n class=\"pds-multiselect__search-input\"\n placeholder={this.searchPlaceholder}\n value={this.searchQuery}\n aria-label=\"Search options\"\n aria-controls={`${this.componentId}-listbox`}\n aria-activedescendant={this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded=\"true\"\n aria-autocomplete=\"list\"\n autocomplete=\"off\"\n onInput={this.handleSearchInputChange}\n onKeyDown={this.handleSearchInputKeyDown}\n />\n </div>\n\n {/* Selected items section */}\n {this.renderSelectedItemsList()}\n\n {/* Options list */}\n <ul\n class=\"pds-multiselect__listbox\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n aria-label={this.label || 'Options'}\n id={`${this.componentId}-listbox`}\n ref={el => (this.listboxEl = el)}\n style={{ maxHeight: this.maxHeight }}\n onScroll={this.handleScroll}\n >\n {this.loading && (\n <li class=\"pds-multiselect__loading\" role=\"presentation\">\n {hasSlottedLoading ? (\n <slot name=\"loading\" />\n ) : (\n <pds-loader size=\"small\" />\n )}\n </li>\n )}\n\n {!this.loading && filteredOptions.length === 0 && (\n <li class=\"pds-multiselect__empty\" role=\"presentation\">\n {hasSlottedEmpty ? (\n <slot name=\"empty\" />\n ) : (\n <span>No options found</span>\n )}\n </li>\n )}\n\n {filteredOptions.map((option, index) => {\n const isSelected = valueArray.includes(String(option.id));\n const isCreateOption = option.isCreateOption;\n const isHighlighted = index === this.highlightedIndex && !isCreateOption;\n const optionId = `${this.componentId}-option-${index}`;\n const isCreateDisabled = isCreateOption && this.creating;\n\n return (\n <li\n key={String(option.id)}\n id={optionId}\n class={{\n 'pds-multiselect__option': true,\n 'pds-multiselect__option--highlighted': isHighlighted,\n 'pds-multiselect__option--selected': isSelected,\n 'pds-multiselect__option--create': isCreateOption,\n 'pds-multiselect__option--disabled': isCreateDisabled,\n }}\n role=\"option\"\n aria-selected={isSelected ? 'true' : 'false'}\n aria-disabled={isCreateDisabled ? 'true' : undefined}\n aria-label={isCreateOption ? `Create new tag: ${option.text}` : undefined}\n data-index={index}\n onMouseDown={this.handleOptionMouseDown(option)}\n onMouseEnter={this.handleOptionMouseEnter(index)}\n >\n {isCreateOption ? (\n <pds-box class=\"pds-multiselect__create-option\" align-items=\"center\" gap=\"xs\">\n <pds-icon name=\"add\" size=\"small\" />\n <pds-text>Add \"{option.text}\"</pds-text>\n </pds-box>\n ) : (\n <pds-checkbox\n componentId={`${this.componentId}-checkbox-${index}`}\n checked={isSelected}\n label={option.text}\n style={{ pointerEvents: 'none' }}\n />\n )}\n </li>\n );\n })}\n\n {this.hasMore && !this.loading && (\n <li class=\"pds-multiselect__load-more\" role=\"presentation\">\n <pds-loader size=\"small\" />\n </li>\n )}\n </ul>\n </div>\n );\n }\n\n private getTriggerText(): string {\n const count = this.selectedItems.length;\n if (count === 0) {\n return this.placeholder || 'Select...';\n }\n return `${count} item${count === 1 ? '' : 's'}`;\n }\n\n render() {\n const hasSelections = this.selectedItems.length > 0;\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n <div class=\"pds-multiselect\">\n {this.label && (\n <label\n htmlFor={this.componentId}\n class={{\n 'pds-multiselect__label': true,\n 'visually-hidden': this.hideLabel,\n }}\n >\n {this.label}\n </label>\n )}\n\n <div\n class=\"pds-multiselect__wrapper\"\n ref={el => (this.containerEl = el)}\n onFocusout={this.handleContainerFocusOut}\n style={{ width: this.triggerWidth }}\n >\n <button\n ref={el => (this.triggerEl = el)}\n type=\"button\"\n class={{\n 'pds-multiselect__trigger': true,\n 'pds-multiselect__trigger--open': this.isOpen,\n 'pds-multiselect__trigger--disabled': this.disabled,\n 'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,\n 'pds-multiselect__trigger--has-value': hasSelections,\n }}\n id={this.componentId}\n disabled={this.disabled}\n aria-required={this.required ? 'true' : undefined}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-describedby={assignDescription(\n this.componentId,\n this.invalid || !!this.errorMessage,\n this.errorMessage || this.helperMessage\n )}\n aria-invalid={this.invalid || !!this.errorMessage ? 'true' : undefined}\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleTriggerKeyDown}\n >\n <span class={{\n 'pds-multiselect__trigger-text': true,\n 'pds-multiselect__trigger-text--placeholder': !hasSelections,\n }}>\n {this.getTriggerText()}\n </span>\n <pds-icon class=\"pds-multiselect__icon\" icon={enlarge} />\n </button>\n\n {this.renderDropdown()}\n </div>\n\n {this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (\n <p class=\"pds-multiselect__helper\" id={messageId(this.componentId, 'helper')}>\n {this.helperMessage}\n </p>\n )}\n\n {this.errorMessage && (\n <p class=\"pds-multiselect__error\" id={messageId(this.componentId, 'error')}>\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </p>\n )}\n\n {/* Hidden slot for static options */}\n <div style={{ display: 'none' }}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-gcCcHox5.system.js","sources":["src/components/pds-radio-group/pds-radio-group.scss?tag=pds-radio-group&encapsulation=scoped","src/components/pds-radio-group/pds-radio-group.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: var(--pine-dimension-sm);\n}\n\n:host(.is-invalid) {\n .pds-radio-group__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n.pds-radio-group__label {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-heading-6);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n}\n\n.pds-radio-group__radios {\n display: flex;\n gap: var(--pds-radio-group-gap, var(--pine-dimension-xs));\n}\n\n.pds-radio-group__radios--row {\n align-items: flex-start; // Align radios to the left\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.pds-radio-group__radios--column {\n flex-direction: column;\n}\n\n.pds-radio-group__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body);\n width: 100%;\n}\n\n.pds-radio-group__message--error {\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-050);\n }\n}\n\n","import { Component, Host, h, Prop, Element, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n/**\n * @slot (default) - Child pds-radio components\n */\n@Component({\n tag: 'pds-radio-group',\n styleUrls: ['pds-radio-group.scss'],\n scoped: true,\n})\nexport class PdsRadioGroup {\n @Element() el: HTMLPdsRadioGroupElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Stable group ID generated once during component initialization.\n * Used to maintain DOM stability and accessibility relationships across re-renders.\n */\n private _groupId: string;\n\n /**\n * Layout direction for the radio group.\n * @defaultValue column\n */\n @Prop() direction: 'row' | 'column' = 'column';\n\n /**\n * Displays error message text describing an invalid state for the entire group.\n */\n @Prop() errorMessage: string;\n\n /**\n * Displays helper message text below the radio group.\n */\n @Prop() helperMessage: string;\n\n /**\n * Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).\n * @defaultValue xs\n */\n @Prop() gap: string = 'xs';\n\n /**\n * Determines whether or not the radio group is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Determines whether or not the radio group is invalid.\n * @defaultValue false\n */\n @Prop() invalid = false;\n\n /**\n * String used for group label/heading.\n */\n @Prop() groupLabel: string;\n\n /**\n * String used for radio `name` attribute. Applied to all child radios.\n * Required for proper radio group behavior (mutual exclusivity and form submission).\n */\n @Prop() name: string;\n\n /**\n * Determines whether or not the radio group is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * Emits when a radio in the group is selected, providing the selected value and component ID.\n */\n @Event() pdsRadioGroupChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n @Watch('name')\n @Watch('disabled')\n @Watch('invalid')\n @Watch('required')\n handlePropsChange() {\n this.updateChildRadios();\n }\n\n @Listen('change')\n handleRadioChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n // Only handle events from radio inputs\n if (target.type !== 'radio') {\n return;\n }\n\n // Only emit if the radio is being checked (not unchecked)\n if (target.checked) {\n const radioElement = target.closest('pds-radio') as HTMLPdsRadioElement;\n if (radioElement) {\n this.pdsRadioGroupChange.emit({\n checked: true,\n value: radioElement.value,\n componentId: radioElement.componentId,\n });\n }\n }\n }\n\n private updateChildRadios() {\n const radios = this.el.querySelectorAll('pds-radio');\n radios.forEach((radio) => {\n if (this.name) {\n radio.setAttribute('name', this.name);\n } else {\n radio.removeAttribute('name');\n }\n if (this.disabled) {\n radio.setAttribute('disabled', 'true');\n } else {\n radio.removeAttribute('disabled');\n }\n if (this.invalid) {\n radio.setAttribute('invalid', 'true');\n } else {\n radio.removeAttribute('invalid');\n }\n if (this.required) {\n radio.setAttribute('required', 'true');\n } else {\n radio.removeAttribute('required');\n }\n });\n }\n\n componentWillLoad() {\n // Generate stable group ID once during initialization\n // This ensures DOM stability and accessibility relationships remain consistent across re-renders\n if (this.componentId) {\n this._groupId = this.componentId;\n } else {\n // Generate unique ID with fallback for test environments where crypto.randomUUID may not be available\n const uniqueId = typeof crypto !== 'undefined' && crypto.randomUUID\n ? crypto.randomUUID()\n : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n this._groupId = `radio-group-${uniqueId}`;\n }\n }\n\n componentDidLoad() {\n if (!this.name) {\n console.warn('pds-radio-group: name prop is required for proper radio group functionality');\n }\n this.updateChildRadios();\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n // The host always uses flex-direction: column, so the label stays above.\n // The direction prop now only affects the .pds-radio-group__radios container.\n // No class needed on host for direction.\n\n return classNames.join(' ');\n }\n\n private getGapValue(): string {\n // Map t-shirt sizes to dimension tokens\n const gapMap: Record<string, string> = {\n none: '0',\n xxs: 'var(--pine-dimension-xxs)',\n xs: 'var(--pine-dimension-xs)',\n sm: 'var(--pine-dimension-sm)',\n md: 'var(--pine-dimension-md)',\n lg: 'var(--pine-dimension-lg)',\n xl: 'var(--pine-dimension-xl)',\n xxl: 'var(--pine-dimension-xxl)',\n };\n\n // If it's a t-shirt size, use the mapped value\n if (gapMap[this.gap]) {\n return gapMap[this.gap];\n }\n\n // Otherwise, assume it's a dimension token like \"100\", \"200\", etc.\n return `var(--pine-dimension-${this.gap})`;\n }\n\n private getAriaDescribedBy(): string | undefined {\n const messageIds: string[] = [];\n\n if (this.errorMessage) {\n messageIds.push(messageId(this._groupId, 'error'));\n }\n\n if (this.helperMessage) {\n messageIds.push(messageId(this._groupId, 'helper'));\n }\n\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n render() {\n const gapValue = this.getGapValue();\n const ariaDescribedBy = this.getAriaDescribedBy();\n\n return (\n <Host\n class={this.classNames()}\n id={this._groupId}\n role=\"group\"\n aria-describedby={ariaDescribedBy}\n style={{\n '--pds-radio-group-gap': gapValue,\n }}\n >\n {this.groupLabel && (\n <div class=\"pds-radio-group__label\">\n {this.groupLabel}\n </div>\n )}\n <div class={{\n 'pds-radio-group__radios': true,\n 'pds-radio-group__radios--row': this.direction === 'row',\n 'pds-radio-group__radios--column': this.direction === 'column',\n }}>\n <slot onSlotchange={() => this.updateChildRadios()} />\n </div>\n {this.helperMessage && (\n <div\n class=\"pds-radio-group__message\"\n id={messageId(this._groupId, 'helper')}\n >\n {this.helperMessage}\n </div>\n )}\n {this.errorMessage && (\n <div\n class=\"pds-radio-group__message pds-radio-group__message--error\"\n id={messageId(this._groupId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n )}\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"p-CCh7iS6N.system.js","sources":["src/components/pds-radio-group/pds-radio-group.scss?tag=pds-radio-group&encapsulation=scoped","src/components/pds-radio-group/pds-radio-group.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: var(--pine-dimension-sm);\n}\n\n:host(.is-invalid) {\n .pds-radio-group__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n.pds-radio-group__label {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-heading-6);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n}\n\n.pds-radio-group__radios {\n display: flex;\n gap: var(--pds-radio-group-gap, var(--pine-dimension-xs));\n}\n\n.pds-radio-group__radios--row {\n align-items: flex-start; // Align radios to the left\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.pds-radio-group__radios--column {\n flex-direction: column;\n}\n\n.pds-radio-group__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body);\n width: 100%;\n}\n\n.pds-radio-group__message--error {\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-050);\n }\n}\n\n","import { Component, Host, h, Prop, Element, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n/**\n * @slot (default) - Child pds-radio components\n */\n@Component({\n tag: 'pds-radio-group',\n styleUrls: ['pds-radio-group.scss'],\n scoped: true,\n})\nexport class PdsRadioGroup {\n @Element() el: HTMLPdsRadioGroupElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Stable group ID generated once during component initialization.\n * Used to maintain DOM stability and accessibility relationships across re-renders.\n */\n private _groupId: string;\n\n /**\n * Layout direction for the radio group.\n * @defaultValue column\n */\n @Prop() direction: 'row' | 'column' = 'column';\n\n /**\n * Displays error message text describing an invalid state for the entire group.\n */\n @Prop() errorMessage: string;\n\n /**\n * Displays helper message text below the radio group.\n */\n @Prop() helperMessage: string;\n\n /**\n * Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).\n * @defaultValue xs\n */\n @Prop() gap: string = 'xs';\n\n /**\n * Determines whether or not the radio group is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Determines whether or not the radio group is invalid.\n * @defaultValue false\n */\n @Prop() invalid = false;\n\n /**\n * String used for group label/heading.\n */\n @Prop() groupLabel: string;\n\n /**\n * String used for radio `name` attribute. Applied to all child radios.\n * Required for proper radio group behavior (mutual exclusivity and form submission).\n */\n @Prop() name: string;\n\n /**\n * Determines whether or not the radio group is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * Emits when a radio in the group is selected, providing the selected value and component ID.\n */\n @Event() pdsRadioGroupChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n @Watch('name')\n @Watch('disabled')\n @Watch('invalid')\n @Watch('required')\n handlePropsChange() {\n this.updateChildRadios();\n }\n\n @Listen('change')\n handleRadioChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n // Only handle events from radio inputs\n if (target.type !== 'radio') {\n return;\n }\n\n // Only emit if the radio is being checked (not unchecked)\n if (target.checked) {\n const radioElement = target.closest('pds-radio') as HTMLPdsRadioElement;\n if (radioElement) {\n this.pdsRadioGroupChange.emit({\n checked: true,\n value: radioElement.value,\n componentId: radioElement.componentId,\n });\n }\n }\n }\n\n private updateChildRadios() {\n const radios = this.el.querySelectorAll('pds-radio');\n radios.forEach((radio) => {\n if (this.name) {\n radio.setAttribute('name', this.name);\n } else {\n radio.removeAttribute('name');\n }\n if (this.disabled) {\n radio.setAttribute('disabled', 'true');\n } else {\n radio.removeAttribute('disabled');\n }\n if (this.invalid) {\n radio.setAttribute('invalid', 'true');\n } else {\n radio.removeAttribute('invalid');\n }\n if (this.required) {\n radio.setAttribute('required', 'true');\n } else {\n radio.removeAttribute('required');\n }\n });\n }\n\n componentWillLoad() {\n // Generate stable group ID once during initialization\n // This ensures DOM stability and accessibility relationships remain consistent across re-renders\n if (this.componentId) {\n this._groupId = this.componentId;\n } else {\n // Generate unique ID with fallback for test environments where crypto.randomUUID may not be available\n const uniqueId = typeof crypto !== 'undefined' && crypto.randomUUID\n ? crypto.randomUUID()\n : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n this._groupId = `radio-group-${uniqueId}`;\n }\n }\n\n componentDidLoad() {\n if (!this.name) {\n console.warn('pds-radio-group: name prop is required for proper radio group functionality');\n }\n this.updateChildRadios();\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n // The host always uses flex-direction: column, so the label stays above.\n // The direction prop now only affects the .pds-radio-group__radios container.\n // No class needed on host for direction.\n\n return classNames.join(' ');\n }\n\n private getGapValue(): string {\n // Map t-shirt sizes to dimension tokens\n const gapMap: Record<string, string> = {\n none: '0',\n xxs: 'var(--pine-dimension-xxs)',\n xs: 'var(--pine-dimension-xs)',\n sm: 'var(--pine-dimension-sm)',\n md: 'var(--pine-dimension-md)',\n lg: 'var(--pine-dimension-lg)',\n xl: 'var(--pine-dimension-xl)',\n xxl: 'var(--pine-dimension-xxl)',\n };\n\n // If it's a t-shirt size, use the mapped value\n if (gapMap[this.gap]) {\n return gapMap[this.gap];\n }\n\n // Otherwise, assume it's a dimension token like \"100\", \"200\", etc.\n return `var(--pine-dimension-${this.gap})`;\n }\n\n private getAriaDescribedBy(): string | undefined {\n const messageIds: string[] = [];\n\n if (this.errorMessage) {\n messageIds.push(messageId(this._groupId, 'error'));\n }\n\n if (this.helperMessage) {\n messageIds.push(messageId(this._groupId, 'helper'));\n }\n\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n render() {\n const gapValue = this.getGapValue();\n const ariaDescribedBy = this.getAriaDescribedBy();\n\n return (\n <Host\n class={this.classNames()}\n id={this._groupId}\n role=\"group\"\n aria-describedby={ariaDescribedBy}\n style={{\n '--pds-radio-group-gap': gapValue,\n }}\n >\n {this.groupLabel && (\n <div class=\"pds-radio-group__label\">\n {this.groupLabel}\n </div>\n )}\n <div class={{\n 'pds-radio-group__radios': true,\n 'pds-radio-group__radios--row': this.direction === 'row',\n 'pds-radio-group__radios--column': this.direction === 'column',\n }}>\n <slot onSlotchange={() => this.updateChildRadios()} />\n </div>\n {this.helperMessage && (\n <div\n class=\"pds-radio-group__message\"\n id={messageId(this._groupId, 'helper')}\n >\n {this.helperMessage}\n </div>\n )}\n {this.errorMessage && (\n <div\n class=\"pds-radio-group__message pds-radio-group__message--error\"\n id={messageId(this._groupId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n )}\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"p-CEE11B7K.system.js","sources":["src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n color: var(--pine-color-text);\n display: table-cell;\n font-family: var(--pine-font-family-body);\n font-size: var(--pine-font-size);\n font-weight: var(--pine-font-weight-regular);\n inset-inline-start: var(--pine-dimension-none);\n letter-spacing: var(--pine-letter-spacing);\n line-height: var(--pine-line-height-body);\n padding: var(--pine-dimension-sm);\n vertical-align: middle;\n}\n\n:host(.is-compact) {\n padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n background: var(--pine-color-background-container);\n left: 0;\n position: sticky;\n z-index: var(--pine-z-index-raised);\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--pds-table-cell-truncate-max-width, 100px);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n\n// Text Alignment\n:host(.pds-table-cell--align-start) {\n text-align: start;\n}\n\n:host(.pds-table-cell--align-center) {\n text-align: center;\n}\n\n:host(.pds-table-cell--align-end) {\n text-align: end;\n}\n\n:host(.pds-table-cell--align-justify) {\n text-align: justify;\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { setupTruncationTooltip } from '../../../utils/truncation-tooltip';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\n private scrollContainer: HTMLElement | null = null;\n private setupTimer: number | undefined;\n private setupRetries: number = 0;\n private truncationCleanup: (() => void) | null = null;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n // For responsive tables with fixed columns, set up scroll detection\n // This enables the first column to show a shadow when the table is scrolled horizontally\n this.setupScrollListener();\n }\n\n if (this.truncate) {\n this.initTruncationTooltip();\n }\n }\n\n disconnectedCallback() {\n this.cleanupScrollListener();\n this.destroyTruncationTooltip();\n }\n\n private setupScrollListener() {\n if (!this.tableRef) return;\n\n // Query shadowRoot once and cache the container\n const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n if (container) {\n // Container available immediately\n this.scrollContainer = container;\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll(); // Initial check\n this.setupRetries = 0; // Reset counter on success\n } else {\n // Container not ready, set up timer for retry with bounds\n this.setupTimer = window.setTimeout(() => {\n if (this.scrollContainer) return; // Already found\n this.setupRetries = (this.setupRetries || 0) + 1;\n if (this.setupRetries <= 50) {\n this.setupScrollListener();\n } else {\n console.warn('Failed to find responsive container after 50 attempts');\n }\n }, 100);\n }\n }\n\n private cleanupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n this.scrollContainer = null;\n }\n\n if (this.setupTimer !== undefined) {\n window.clearTimeout(this.setupTimer);\n this.setupTimer = undefined;\n }\n\n this.setupRetries = 0; // Reset retry counter\n }\n\n /**\n * Sets the text alignment within the cell.\n */\n @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n /**\n * Truncates content to a max width and adds an ellipsis.\n * When text overflows, a tooltip showing the full text will appear on hover/focus.\n * Note: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility.\n */\n @Prop() truncate: boolean;\n\n @Watch('truncate')\n handleTruncateChange(newValue: boolean) {\n if (newValue) {\n this.initTruncationTooltip();\n } else {\n this.destroyTruncationTooltip();\n }\n }\n\n /**\n * Determines if the table is currently scrolling.\n * @defaultValue false\n */\n @State() private tableScrolling: boolean = false;\n\n private initTruncationTooltip() {\n this.destroyTruncationTooltip();\n\n this.truncationCleanup = setupTruncationTooltip({\n hostEl: this.hostElement,\n contentEl: this.hostElement,\n getTooltipText: () => this.hostElement.textContent || '',\n });\n }\n\n private destroyTruncationTooltip() {\n if (this.truncationCleanup) {\n this.truncationCleanup();\n this.truncationCleanup = null;\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.cellAlign) {\n classNames.push(`pds-table-cell--align-${this.cellAlign}`);\n }\n\n if (this.truncate) {\n classNames.push('is-truncated');\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n /**\n * Handles scroll events to update fixed column shadow state.\n * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n * @private\n */\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n try {\n this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n } catch (error) {\n console.warn('Scroll handler error:', error);\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\n part=\"cell\"\n tabIndex={this.truncate ? 0 : undefined}\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-D3Ug1A-l.system.js","sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-border-subtle);\n\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--pine-color-text);\n display: table-cell;\n font-family: var(--pine-font-family-body);\n font-size: var(--pine-font-size);\n font-weight: var(--pine-font-weight-regular);\n letter-spacing: var(--pine-letter-spacing);\n line-height: var(--pine-line-height-body);\n padding: var(--pine-dimension-sm);\n position: relative;\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n background: var(--pine-color-background-container);\n left: var(--pine-dimension-none);\n position: sticky;\n z-index: var(--pine-z-index-raised);\n}\n\n// When parent table-head has background, fixed cells should inherit it\n:host(.is-fixed.has-head-background) {\n background-color: var(--pine-color-background-subtle);\n}\n\n// When parent table-head has border prop, add top border (bottom already set in :host)\n:host(.has-head-border) {\n border-block-start: var(--border-head-cell-default);\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--pine-dimension-2xs);\n padding-block-start: 2px;\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--pine-color-text-strong);\n}\n\n// Text Alignment\n:host(.pds-table-head-cell--align-start) {\n text-align: start;\n}\n\n:host(.pds-table-head-cell--align-center) {\n text-align: center;\n}\n\n:host(.pds-table-head-cell--align-end) {\n text-align: end;\n}\n\n:host(.pds-table-head-cell--align-justify) {\n text-align: justify;\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State, Method } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-table-head-cell',\n styleUrls: ['pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private tableRef: HTMLPdsTableElement;\n private scrollContainer: HTMLElement | null = null;\n private setupTimer: number | undefined;\n private setupRetries: number = 0;\n private headObserver?: MutationObserver;\n\n /**\n * Sets the text alignment within the head cell.\n */\n @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n /**\n * Determines whether the table column is sortable when set to `true`.\n */\n @Prop() sortable: boolean;\n\n /**\n * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n */\n @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n /**\n * The direction of sorting.\n */\n @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n\n /**\n * Determines if the table is currently scrolling.\n * @defaultValue false\n */\n @State() private tableScrolling: boolean = false;\n\n /**\n * Determines if the table row is currently selected.\n * @defaultValue false\n */\n @State() isSelected: boolean = false;\n\n /**\n * Determines if the parent table-head has the border attribute.\n * @defaultValue false\n */\n @State() private hasHeadBorder: boolean = false;\n\n /**\n * Determines if the parent table-head has the background attribute.\n * @defaultValue false\n */\n @State() private hasHeadBackground: boolean = false;\n\n /**\n * Determines if this column is the currently active sorted column.\n * @defaultValue false\n */\n @State() private isActive: boolean = false;\n\n /**\n * Programmatically sets this column as the active sort column with the specified direction.\n * Used by pds-table to apply a default sort on initial load.\n * @param direction - The sort direction to apply ('asc' or 'desc')\n */\n @Method()\n async setActiveSort(direction: 'asc' | 'desc') {\n if (!this.sortable) return;\n\n this.sortingDirection = direction;\n this.isActive = true;\n this.hostElement.classList.add('is-active');\n }\n\n /**\n * Clears the active sort state from this column.\n * Used internally when another column becomes active.\n */\n @Method()\n async clearActiveSort() {\n this.isActive = false;\n this.hostElement.classList.remove('is-active');\n }\n\n componentWillLoad() {\n // Set initial references and state before first render\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n if (tableHead) {\n this.hasHeadBorder = tableHead.hasAttribute('border');\n this.hasHeadBackground = tableHead.hasAttribute('background');\n }\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n // For responsive tables with fixed columns, set up scroll detection\n // This enables the first column header to show a shadow when the table is scrolled horizontally\n this.setupScrollListener();\n }\n\n // Watch for changes to the parent table-head's border and background attributes\n const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n if (tableHead && typeof MutationObserver !== 'undefined') {\n // Defensive guard: disconnect existing observer before creating a new one\n if (this.headObserver) {\n this.headObserver.disconnect();\n }\n\n this.headObserver = new MutationObserver(() => {\n // Update state when border or background attributes change\n this.hasHeadBorder = tableHead.hasAttribute('border');\n this.hasHeadBackground = tableHead.hasAttribute('background');\n });\n\n this.headObserver.observe(tableHead, {\n attributes: true,\n attributeFilter: ['border', 'background']\n });\n }\n }\n\n disconnectedCallback() {\n this.cleanupScrollListener();\n\n if (this.headObserver) {\n this.headObserver.disconnect();\n }\n }\n\n\n private setupScrollListener() {\n if (!this.tableRef) return;\n\n // Query shadowRoot once and cache the container\n const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n if (container) {\n // Container available immediately\n this.scrollContainer = container;\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll(); // Initial check\n this.setupRetries = 0; // Reset counter on success\n } else {\n // Container not ready, set up timer for retry with bounds\n this.setupTimer = window.setTimeout(() => {\n if (this.scrollContainer) return; // Already found\n this.setupRetries = (this.setupRetries || 0) + 1;\n if (this.setupRetries <= 50) {\n this.setupScrollListener();\n } else {\n console.warn('Failed to find responsive container after 50 attempts');\n }\n }, 100);\n }\n }\n\n private cleanupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n this.scrollContainer = null;\n }\n\n if (this.setupTimer !== undefined) {\n window.clearTimeout(this.setupTimer);\n this.setupTimer = undefined;\n }\n\n this.setupRetries = 0; // Reset retry counter\n }\n\n /**\n * Handles scroll events to update fixed column shadow state.\n * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n * @private\n */\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n try {\n this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n } catch (error) {\n console.warn('Scroll handler error:', error);\n }\n };\n\n private toggleSort = () => {\n if (this.sortable) {\n // Guard: return early if tableRef is not available\n if (!this.tableRef) {\n return;\n }\n\n const column = this.hostElement.innerText.trim();\n \n // Always toggle the direction (preserves original behavior)\n this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n \n // Reset all OTHER head cells to inactive state (skip the current one)\n this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {\n // Skip clearing the current cell\n if (headCell !== this.hostElement) {\n const headCellComponent = headCell as HTMLPdsTableHeadCellElement;\n await headCellComponent.clearActiveSort();\n }\n });\n \n // Mark this column as active\n this.isActive = true;\n this.hostElement.classList.add('is-active');\n\n // Emit the sort event with the current direction\n this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.cellAlign) {\n classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n }\n\n if (this.sortable) {\n classNames.push('is-sortable');\n }\n\n if (this.sortable && this.sortingDirection !== null) {\n classNames.push('sort-' + this.sortingDirection);\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n if (this.hasHeadBackground) {\n classNames.push('has-head-background');\n }\n\n if (this.hasHeadBorder) {\n classNames.push('has-head-border');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"columnheader\"\n onClick={this.toggleSort}\n part=\"head-cell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n {this.sortable && this.isActive && (\n <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"p-CbRBe3Eq.system.js","sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-border-subtle);\n\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--pine-color-text);\n display: table-cell;\n font-family: var(--pine-font-family-body);\n font-size: var(--pine-font-size);\n font-weight: var(--pine-font-weight-regular);\n letter-spacing: var(--pine-letter-spacing);\n line-height: var(--pine-line-height-body);\n padding: var(--pine-dimension-sm);\n position: relative;\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n background: var(--pine-color-background-container);\n left: var(--pine-dimension-none);\n position: sticky;\n z-index: var(--pine-z-index-raised);\n}\n\n// When parent table-head has background, fixed cells should inherit it\n:host(.is-fixed.has-head-background) {\n background-color: var(--pine-color-background-subtle);\n}\n\n// When parent table-head has border prop, add top border (bottom already set in :host)\n:host(.has-head-border) {\n border-block-start: var(--border-head-cell-default);\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--pine-dimension-2xs);\n padding-block-start: 2px;\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--pine-color-text-strong);\n}\n\n// Text Alignment\n:host(.pds-table-head-cell--align-start) {\n text-align: start;\n}\n\n:host(.pds-table-head-cell--align-center) {\n text-align: center;\n}\n\n:host(.pds-table-head-cell--align-end) {\n text-align: end;\n}\n\n:host(.pds-table-head-cell--align-justify) {\n text-align: justify;\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State, Method } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-table-head-cell',\n styleUrls: ['pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private tableRef: HTMLPdsTableElement;\n private scrollContainer: HTMLElement | null = null;\n private setupTimer: number | undefined;\n private setupRetries: number = 0;\n private headObserver?: MutationObserver;\n\n /**\n * Sets the text alignment within the head cell.\n */\n @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n /**\n * Determines whether the table column is sortable when set to `true`.\n */\n @Prop() sortable: boolean;\n\n /**\n * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n */\n @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n /**\n * The direction of sorting.\n */\n @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n\n /**\n * Determines if the table is currently scrolling.\n * @defaultValue false\n */\n @State() private tableScrolling: boolean = false;\n\n /**\n * Determines if the table row is currently selected.\n * @defaultValue false\n */\n @State() isSelected: boolean = false;\n\n /**\n * Determines if the parent table-head has the border attribute.\n * @defaultValue false\n */\n @State() private hasHeadBorder: boolean = false;\n\n /**\n * Determines if the parent table-head has the background attribute.\n * @defaultValue false\n */\n @State() private hasHeadBackground: boolean = false;\n\n /**\n * Determines if this column is the currently active sorted column.\n * @defaultValue false\n */\n @State() private isActive: boolean = false;\n\n /**\n * Programmatically sets this column as the active sort column with the specified direction.\n * Used by pds-table to apply a default sort on initial load.\n * @param direction - The sort direction to apply ('asc' or 'desc')\n */\n @Method()\n async setActiveSort(direction: 'asc' | 'desc') {\n if (!this.sortable) return;\n\n this.sortingDirection = direction;\n this.isActive = true;\n this.hostElement.classList.add('is-active');\n }\n\n /**\n * Clears the active sort state from this column.\n * Used internally when another column becomes active.\n */\n @Method()\n async clearActiveSort() {\n this.isActive = false;\n this.hostElement.classList.remove('is-active');\n }\n\n componentWillLoad() {\n // Set initial references and state before first render\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n if (tableHead) {\n this.hasHeadBorder = tableHead.hasAttribute('border');\n this.hasHeadBackground = tableHead.hasAttribute('background');\n }\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n // For responsive tables with fixed columns, set up scroll detection\n // This enables the first column header to show a shadow when the table is scrolled horizontally\n this.setupScrollListener();\n }\n\n // Watch for changes to the parent table-head's border and background attributes\n const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n if (tableHead && typeof MutationObserver !== 'undefined') {\n // Defensive guard: disconnect existing observer before creating a new one\n if (this.headObserver) {\n this.headObserver.disconnect();\n }\n\n this.headObserver = new MutationObserver(() => {\n // Update state when border or background attributes change\n this.hasHeadBorder = tableHead.hasAttribute('border');\n this.hasHeadBackground = tableHead.hasAttribute('background');\n });\n\n this.headObserver.observe(tableHead, {\n attributes: true,\n attributeFilter: ['border', 'background']\n });\n }\n }\n\n disconnectedCallback() {\n this.cleanupScrollListener();\n\n if (this.headObserver) {\n this.headObserver.disconnect();\n }\n }\n\n\n private setupScrollListener() {\n if (!this.tableRef) return;\n\n // Query shadowRoot once and cache the container\n const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n if (container) {\n // Container available immediately\n this.scrollContainer = container;\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll(); // Initial check\n this.setupRetries = 0; // Reset counter on success\n } else {\n // Container not ready, set up timer for retry with bounds\n this.setupTimer = window.setTimeout(() => {\n if (this.scrollContainer) return; // Already found\n this.setupRetries = (this.setupRetries || 0) + 1;\n if (this.setupRetries <= 50) {\n this.setupScrollListener();\n } else {\n console.warn('Failed to find responsive container after 50 attempts');\n }\n }, 100);\n }\n }\n\n private cleanupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n this.scrollContainer = null;\n }\n\n if (this.setupTimer !== undefined) {\n window.clearTimeout(this.setupTimer);\n this.setupTimer = undefined;\n }\n\n this.setupRetries = 0; // Reset retry counter\n }\n\n /**\n * Handles scroll events to update fixed column shadow state.\n * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n * @private\n */\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n try {\n this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n } catch (error) {\n console.warn('Scroll handler error:', error);\n }\n };\n\n private toggleSort = () => {\n if (this.sortable) {\n // Guard: return early if tableRef is not available\n if (!this.tableRef) {\n return;\n }\n\n const column = this.hostElement.innerText.trim();\n \n // Always toggle the direction (preserves original behavior)\n this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n \n // Reset all OTHER head cells to inactive state (skip the current one)\n this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {\n // Skip clearing the current cell\n if (headCell !== this.hostElement) {\n const headCellComponent = headCell as HTMLPdsTableHeadCellElement;\n await headCellComponent.clearActiveSort();\n }\n });\n \n // Mark this column as active\n this.isActive = true;\n this.hostElement.classList.add('is-active');\n\n // Emit the sort event with the current direction\n this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.cellAlign) {\n classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n }\n\n if (this.sortable) {\n classNames.push('is-sortable');\n }\n\n if (this.sortable && this.sortingDirection !== null) {\n classNames.push('sort-' + this.sortingDirection);\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n if (this.hasHeadBackground) {\n classNames.push('has-head-background');\n }\n\n if (this.hasHeadBorder) {\n classNames.push('has-head-border');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"columnheader\"\n onClick={this.toggleSort}\n part=\"head-cell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n {this.sortable && this.isActive && (\n <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"p-CsWO_n3t.system.js","sources":["src/components/pds-dropdown-menu/pds-dropdown-menu.scss?tag=pds-dropdown-menu&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.is-hidden {\n display: none;\n}\n\n.pds-dropdown-menu--panel {\n background-color: var(--pine-color-background-container);\n border-radius: var(--pine-dimension-xs);\n left: var(--pine-dimension-none);\n min-width: 170px;\n padding: var(--pine-dimension-xs);\n position: fixed;\n z-index: var(--pine-z-index-overlay);\n\n :host-context([data-theme=\"dark\"]) & {\n border: var(--pine-border);\n }\n}\n\n// Styles for raw <a> and <button> elements slotted into the menu\n// These are allowed for edge cases requiring native browser/framework behavior\n// (e.g., Rails UJS, Turbo) that cannot work through Shadow DOM.\n//\n// Note: ::slotted() cannot be combined with pseudo-classes like :hover or :focus.\n// Raw elements will receive base styling here; hover/focus states must be handled\n// by the consuming application's CSS if needed.\n::slotted(a),\n::slotted(button) {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--pine-dimension-xs) !important;\n box-sizing: border-box;\n color: var(--pine-color-text) !important;\n cursor: pointer;\n display: flex;\n flex-grow: 1;\n font: var(--pine-typography-body-medium) !important;\n gap: var(--pine-dimension-xs);\n margin: calc(var(--pine-border-width) + 2px) !important;\n padding: var(--pine-dimension-xs) !important;\n text-align: start;\n text-decoration: none !important;\n width: calc(100% - calc(var(--pine-border-width) + 2px) * 2);\n}\n\n// Destructive variant for raw elements\n::slotted(.destructive) {\n color: var(--pine-color-danger) !important;\n}\n\n// Disabled state for raw elements (using attribute selectors, not pseudo-classes)\n// ::slotted([disabled]) is an attribute-presence selector — it matches even when\n// disabled=\"false\" is set as a string (e.g. by React on custom elements). The\n// :not([disabled=\"false\"]) guard ensures only a truly-disabled attribute applies.\n::slotted([aria-disabled=\"true\"]),\n::slotted([disabled]:not([disabled=\"false\"])) {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n","import { Component, Element, Host, h, Prop, Listen, State } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\nimport { PlacementType } from '@utils/types';\nimport { computePosition,\n flip,\n offset,\n shift,\n autoUpdate,\n} from '@floating-ui/dom';\n\n/**\n * Union type for focusable menu items (component or raw elements)\n */\ntype MenuItemElement = HTMLPdsDropdownMenuItemElement | HTMLAnchorElement | HTMLButtonElement;\n\n/**\n * @part menu-panel - Exposes the dropdown menu container for styling.\n */\n@Component({\n tag: 'pds-dropdown-menu',\n styleUrl: 'pds-dropdown-menu.scss',\n shadow: true,\n})\nexport class PdsDropdownMenu implements BasePdsProps {\n private slotEl: HTMLSlotElement;\n private triggerEl: HTMLElement;\n private panelEl: HTMLPdsBoxElement;\n private isOpen: boolean = false;\n private menuItems: MenuItemElement[] = [];\n private cleanupAutoUpdate: (() => void) | null = null;\n\n @Element() host: HTMLPdsDropdownMenuElement;\n\n @State() currentFocusIndex: number = -1;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * The placement of the dropdown panel relative to the trigger.\n */\n @Prop() placement: PlacementType = 'bottom-start';\n\n componentDidRender() {\n this.panelEl = this.host.shadowRoot?.querySelector('pds-box') as HTMLPdsBoxElement;\n }\n\n disconnectedCallback() {\n // Clean up auto-update when component is removed from DOM\n if (this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate();\n this.cleanupAutoUpdate = null;\n }\n }\n\n private handleTriggerSlotChange = (event: Event) => {\n this.slotEl = event.target as HTMLSlotElement;\n\n // Get all elements assigned to this slot\n const assignedElements = this.slotEl.assignedElements();\n\n this.triggerEl = assignedElements[0] as HTMLElement;\n this.triggerEl.onclick = this.handleClick;\n\n // Add accessibility attributes to trigger\n this.triggerEl.setAttribute('aria-haspopup', 'menu');\n this.triggerEl.setAttribute('aria-expanded', 'false');\n }\n\n private handleSlotChange = (event: Event) => {\n this.slotEl = event.target as HTMLSlotElement;\n\n // Get all elements assigned to this slot\n const assignedElements = this.slotEl.assignedElements();\n\n // Allowed elements: pds-dropdown-menu-item, pds-dropdown-menu-separator, <a>, <button>\n // Raw <a> and <button> elements are allowed for edge cases requiring native browser/framework\n // behavior (e.g., Rails UJS, Turbo) that cannot work through Shadow DOM.\n const allowedTags = ['pds-dropdown-menu-item', 'pds-dropdown-menu-separator', 'a', 'button'];\n const invalidElements = assignedElements.filter(\n el => !allowedTags.includes(el.tagName.toLowerCase())\n );\n\n if (invalidElements.length > 0) {\n const invalidTags = invalidElements.map(el => el.tagName.toLowerCase()).join(', ');\n console.warn(\n `pds-dropdown-menu: Unexpected element(s) found: ${invalidTags}. ` +\n `Expected: ${allowedTags.join(', ')}`\n );\n }\n\n // Store all focusable items for keyboard navigation\n // This includes pds-dropdown-menu-item components and raw <a>/<button> elements\n this.menuItems = assignedElements.filter(el => {\n const tag = el.tagName.toLowerCase();\n return tag === 'pds-dropdown-menu-item' || tag === 'a' || tag === 'button';\n }) as MenuItemElement[];\n }\n\n // Toggle dropdown open/closed\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n\n // Open the dropdown and position it\n private openDropdown = () => {\n const updatePosition = () => {\n computePosition(this.triggerEl, this.panelEl as HTMLElement, {\n placement: this.placement,\n strategy: 'fixed',\n middleware: [offset(6), flip(), shift({padding: 5})],\n }).then(({ x, y }) => {\n Object.assign(this.panelEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n });\n };\n\n // Initial position\n updatePosition();\n\n // Set up auto-update for window resize and scroll\n this.cleanupAutoUpdate = autoUpdate(\n this.triggerEl,\n this.panelEl as HTMLElement,\n updatePosition\n );\n\n this.host.shadowRoot?.querySelector('pds-box').classList.remove('is-hidden');\n this.isOpen = true;\n\n // Update ARIA attributes\n this.triggerEl.setAttribute('aria-expanded', 'true');\n }\n\n // Close the dropdown\n private closeDropdown = () => {\n this.host.shadowRoot?.querySelector('pds-box').classList.add('is-hidden');\n this.isOpen = false;\n\n // Clean up auto-update\n if (this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate();\n this.cleanupAutoUpdate = null;\n }\n\n // Update ARIA attributes\n this.triggerEl.setAttribute('aria-expanded', 'false');\n\n // Reset focus index\n this.currentFocusIndex = -1;\n\n // Return focus to trigger\n this.triggerEl.focus();\n }\n\n // Handle click on the trigger element\n private handleClick = () => {\n this.toggleDropdown();\n }\n\n // Check if a menu item is disabled (handles both component and raw elements)\n private isItemDisabled(item: MenuItemElement): boolean {\n const tagName = item.tagName.toLowerCase();\n\n if (tagName === 'pds-dropdown-menu-item') {\n return (item as HTMLPdsDropdownMenuItemElement).disabled;\n } else if (tagName === 'button') {\n return (item as HTMLButtonElement).disabled;\n } else if (tagName === 'a') {\n return item.getAttribute('aria-disabled') === 'true';\n }\n return false;\n }\n\n // Get the index of the currently focused menu item\n private getFocusedItemIndex(): number {\n const activeElement = document.activeElement as MenuItemElement | null;\n if (!activeElement) return -1;\n\n // For raw elements, check direct match\n // For pds-dropdown-menu-item, also check if the active element is inside the shadow root\n return this.menuItems.findIndex(item => {\n if (item === activeElement) return true;\n\n // Check if activeElement is inside the item's shadow root (for pds-dropdown-menu-item)\n if (item.tagName.toLowerCase() === 'pds-dropdown-menu-item') {\n const shadowRoot = (item as HTMLPdsDropdownMenuItemElement).shadowRoot;\n if (shadowRoot?.contains(activeElement)) return true;\n }\n\n return false;\n });\n }\n\n // Focus a specific menu item by index\n private focusItemByIndex(index: number): void {\n if (index >= 0 && index < this.menuItems.length) {\n this.currentFocusIndex = index;\n const item = this.menuItems[index];\n const tagName = item.tagName.toLowerCase();\n\n if (tagName === 'pds-dropdown-menu-item') {\n // For pds-dropdown-menu-item, focus the inner element\n const menuItem = item as HTMLPdsDropdownMenuItemElement;\n const innerButton = menuItem.shadowRoot?.querySelector('button');\n const innerLink = menuItem.shadowRoot?.querySelector('pds-link')?.shadowRoot?.querySelector('a')\n || menuItem.shadowRoot?.querySelector('a');\n\n if (innerButton) {\n innerButton.focus();\n } else if (innerLink) {\n innerLink.focus();\n } else {\n // Fallback to focusing the host\n menuItem.focus();\n }\n } else {\n // For raw <a> or <button> elements, focus directly\n (item as HTMLElement).focus();\n }\n }\n }\n\n // Focus the next menu item\n private focusNextItem(): void {\n let nextIndex = (this.currentFocusIndex + 1) % this.menuItems.length;\n\n // Skip disabled items\n let attempts = 0;\n const maxAttempts = this.menuItems.length;\n\n while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[nextIndex])) {\n nextIndex = (nextIndex + 1) % this.menuItems.length;\n attempts++;\n }\n\n // Only focus if we found a non-disabled item\n if (attempts < maxAttempts) {\n this.focusItemByIndex(nextIndex);\n }\n }\n\n // Focus the previous menu item\n private focusPreviousItem(): void {\n let prevIndex = this.currentFocusIndex <= 0\n ? this.menuItems.length - 1\n : this.currentFocusIndex - 1;\n\n // Skip disabled items\n let attempts = 0;\n const maxAttempts = this.menuItems.length;\n\n while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[prevIndex])) {\n prevIndex = prevIndex <= 0 ? this.menuItems.length - 1 : prevIndex - 1;\n attempts++;\n }\n\n // Only focus if we found a non-disabled item\n if (attempts < maxAttempts) {\n this.focusItemByIndex(prevIndex);\n }\n }\n\n // Handle keyboard events for the dropdown\n @Listen('keydown', { target: 'window' })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.isOpen) return;\n\n switch (event.key) {\n case 'Escape':\n event.preventDefault();\n this.closeDropdown();\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusNextItem();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.focusPreviousItem();\n break;\n\n case 'Home':\n event.preventDefault();\n if (this.menuItems.length > 0) {\n // Find first non-disabled item\n let firstIndex = 0;\n while (firstIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstIndex])) {\n firstIndex++;\n }\n if (firstIndex < this.menuItems.length) {\n this.focusItemByIndex(firstIndex);\n }\n }\n break;\n\n case 'End':\n event.preventDefault();\n if (this.menuItems.length > 0) {\n // Find last non-disabled item\n let lastIndex = this.menuItems.length - 1;\n while (lastIndex >= 0 && this.isItemDisabled(this.menuItems[lastIndex])) {\n lastIndex--;\n }\n if (lastIndex >= 0) {\n this.focusItemByIndex(lastIndex);\n }\n }\n break;\n\n case 'Tab':\n if (event.shiftKey) {\n // Let Shift+Tab navigate naturally from first item to trigger\n // For all other items, move to previous item\n const currentIndex = this.getFocusedItemIndex();\n\n if (currentIndex > 0) {\n // If not on first item, prevent default and go to previous item\n event.preventDefault();\n this.focusPreviousItem(); // Use our method that skips disabled items\n }\n // If on first item or no item, let natural tab order move back to trigger\n } else {\n // Forward Tab navigation\n const activeElement = document.activeElement;\n const isTriggerFocused = activeElement === this.triggerEl;\n const currentIndex = this.getFocusedItemIndex();\n\n if (isTriggerFocused && this.menuItems.length > 0) {\n // If trigger is focused, move to first non-disabled menu item\n event.preventDefault();\n\n // Find the first non-disabled item\n let firstFocusableIndex = 0;\n while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {\n firstFocusableIndex++;\n }\n\n if (firstFocusableIndex < this.menuItems.length) {\n this.focusItemByIndex(firstFocusableIndex);\n }\n } else if (currentIndex === -1 && this.menuItems.length > 0) {\n // If no menu item is focused, focus the first non-disabled one\n event.preventDefault();\n\n // Find the first non-disabled item\n let firstFocusableIndex = 0;\n while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {\n firstFocusableIndex++;\n }\n\n if (firstFocusableIndex < this.menuItems.length) {\n this.focusItemByIndex(firstFocusableIndex);\n }\n } else if (currentIndex !== -1) {\n // Use our method that skips disabled items\n event.preventDefault();\n this.focusNextItem();\n }\n }\n break;\n }\n }\n\n // Handle clicks outside the dropdown to close it\n @Listen('click', { target: 'window' })\n handleWindowClick(event: MouseEvent) {\n if (this.isOpen && !this.host.contains(event.target as Node) && event.target !== this.triggerEl) {\n this.closeDropdown();\n }\n }\n\n\n render() {\n return (\n <Host id={this.componentId}>\n <slot\n name=\"trigger\"\n onSlotchange={this.handleTriggerSlotChange}\n ></slot>\n <pds-box\n border-radius=\"sm\"\n display=\"flex\"\n direction=\"column\"\n class=\"pds-dropdown-menu--panel is-hidden\"\n shadow=\"100\"\n role=\"menu\"\n aria-orientation=\"vertical\"\n part=\"menu-panel\"\n >\n <slot onSlotchange={this.handleSlotChange}></slot>\n </pds-box>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-c2oMjk1r.system.js","sources":["src/global/styles/utils/label.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n// Need discussions\n --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));\n --pine-dimension-025: 2px;\n --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));\n --number-transition-timing: 0.15s ease-out;\n\n align-items: flex-start;\n color: var(--pine-color-text);\n display: inline-flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.pds-switch--error) {\n color: var(--pine-color-text-message-danger);\n\n input,\n input:checked,\n input:hover:not(:disabled):not(:checked) {\n background-color: var(--pine-color-danger);\n }\n\n input:focus-visible:not(:disabled):not(:checked) {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n\n label {\n color: var(--color-text-error);\n }\n}\n\n// switch container\ninput {\n appearance: none;\n background: var(--pine-color-neutral);\n border: 0;\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: inline-block;\n flex-shrink: 0;\n height: var(--pine-dimension-250);\n margin: 0;\n padding: 0;\n position: relative;\n transition: var(--number-transition-timing);\n transition-property: background, border, color;\n width: var(--pine-dimension-450);\n\n // switch toggle\n &::after {\n background: var(--pine-color-secondary);\n border-radius: var(--pine-border-radius-full);\n box-shadow: var(--pine-box-shadow);\n content: \"\";\n display: block;\n height: var(--sizing-input-toggle-size);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n position: absolute;\n transform: translate3d(-100%, -50%, 0);\n transition: transform var(--number-transition-timing);\n width: var(--sizing-input-toggle-size);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-150);\n\n .pds-switch--error & {\n color: inherit;\n }\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n// Help and error messages\n.pds-switch__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-xs);\n margin-inline-start: var(--spacing-message-inline);\n width: 100%;\n\n + .pds-switch__message {\n margin-block-start: var(--spacing-message-inline);\n }\n}\n\n.pds-switch__message--error {\n color: inherit;\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Disabled state\ninput:disabled {\n background-color: var(--pine-color-neutral-disabled);\n cursor: not-allowed;\n\n ~ label {\n cursor: initial;\n }\n\n &:hover::after {\n background-color: var(--pine-color-secondary);\n }\n\n .pds-switch__message {\n color: initial;\n }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n background-color: var(--pine-color-neutral-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n background-color: currentColor;\n color: var(--pine-color-accent);\n\n &:hover {\n border-color: currentColor;\n color: var(--pine-color-accent-hover);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-switch',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSwitch {\n private inheritedAttributes: Attributes = {};\n private internals?: ElementInternals;\n private readonly _type = 'checkbox' as const;\n\n @Element() el: HTMLPdsSwitchElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines the input 'checked' state.\n */\n @Prop({ mutable: true }) checked = false;\n\n /**\n * Determines the input 'disabled' state, preventing user interaction.\n */\n @Prop() disabled? = false;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * Displays help text for additional description of an input.\n */\n @Prop() helperMessage: string;\n\n /**\n * Determines the input 'invalid' state, signifying an error is present.\n */\n @Prop() invalid? = false;\n\n /**\n * Displays text to describe the input.\n */\n @Prop() label!: string;\n\n /**\n * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n */\n @Prop() name: string;\n\n /**\n * Determines the 'required' state of the input.\n */\n @Prop() required? = false;\n\n /**\n * Provides input with a string submitted in form data.\n */\n @Prop() value: string;\n\n\n /**\n * Emits an event on input change.\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n\n const input = e.target as HTMLInputElement;\n this.checked = input.checked;\n\n this.updateFormValue();\n\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n connectedCallback() {\n // Initialize ElementInternals for form association (only once per element instance)\n if (this.el.attachInternals && !this.internals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentDidLoad() {\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged() {\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (typeof jest !== 'undefined' || typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n return;\n }\n\n if (this.internals && this.internals.setFormValue) {\n // For switches, only send the value when checked, otherwise send null\n const formValue = this.checked ? (this.value || 'on') : null;\n this.internals.setFormValue(formValue);\n }\n\n if (this.internals && this.internals.setValidity) {\n this.internals.setValidity({});\n }\n }\n\n formStateRestoreCallback(state: string | FormData | null) {\n if (state instanceof FormData) {\n // For switches, restore if the value exists in FormData\n const value = this.value || 'on';\n this.checked = state.get(this.name || this.componentId) === value;\n } else if (typeof state === 'string') {\n // Restore from string state\n this.checked = state === (this.value || 'on');\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type=\"checkbox\"\n value={this.value}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,MAAM,QAAQ,GAAG,oTAAoT;;MCArU,MAAM,YAAY,GAAG,4uHAA4uH;;YCapvH,SAAS,yBAAA,MAAA;MANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;MAOU,QAAA,IAAmB,CAAA,mBAAA,GAAe,EAAE;MAE3B,QAAA,IAAK,CAAA,KAAA,GAAG,UAAmB;MAS5C;;MAEG;MACsB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;MAExC;;MAEG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAI,KAAK;MAiBzB;;MAEG;MACK,QAAA,IAAO,CAAA,OAAA,GAAI,KAAK;MAYxB;;MAEG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAI,KAAK;MAajB,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,CAAQ,KAAI;kBACpC,IAAI,IAAI,CAAC,QAAQ;sBAAE;MAEnB,YAAA,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B;MAC1C,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO;kBAE5B,IAAI,CAAC,eAAe,EAAE;MAEtB,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAe,CAAC;MAC5C,SAAC;MAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;kBAC9B,IAAI,aAAa,GAAG,CAAA,UAAA,CAAY;MAEhC,YAAA,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;sBACzB,aAAa,IAAI,oBAAoB;;MAEvC,YAAA,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;sBACpC,aAAa,IAAI,sBAAsB;;MAEzC,YAAA,OAAO,aAAa;MACtB,SAAC;MAiGF;UA/FC,iBAAiB,GAAA;;cAEf,IAAI,IAAI,CAAC,EAAE,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;kBAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE;;;MAI5C,QAAA,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;;UAG/C,gBAAgB,GAAA;cACd,IAAI,CAAC,eAAe,EAAE;;UAIxB,cAAc,GAAA;cACZ,IAAI,CAAC,eAAe,EAAE;;UAGhB,eAAe,GAAA;;MACrB,QAAA,IAAI,OAAO,IAAI,KAAK,WAAW,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,GAAG,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,MAAK,MAAM,EAAE;kBACrG;;cAGF,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;;MAEjD,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI;MAC5D,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC;;cAGxC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;MAChD,YAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;;;MAIlC,IAAA,wBAAwB,CAAC,KAA+B,EAAA;MACtD,QAAA,IAAI,KAAK,YAAY,QAAQ,EAAE;;MAE7B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI;MAChC,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,KAAK;;MAC5D,aAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;;MAEpC,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,MAAM,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC;;;UAIjD,iBAAiB,GAAA;MACf,QAAA,IAAI,CAAC,mBAAmB,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACnB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAClC;;UAGH,MAAM,GAAA;cACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAA,EAChF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9B,CACoB,CAAA,OAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EAAA,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,aAAa,CAAC,EAAA,cAAA,EAC9F,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAC9C,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACb,EAAA,IAAI,CAAC,mBAAmB,CAC5B,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAA,EACjD,IAAI,CAAC,KAAK,CACN,CACD,EACP,IAAI,CAAC,aAAa;MACjB,YAAA,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAqB,mBAAA,CAAA,EAC5B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;kBAChB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAgD,8CAAA,CAAA,EACvD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,EAAA,EAErB,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,EAAG,CAAA,EACtC,IAAI,CAAC,YAAY,CACd,CAEH;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"p-Ctc231vq.system.js","sources":["src/global/styles/utils/label.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n// Need discussions\n --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));\n --pine-dimension-025: 2px;\n --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));\n --number-transition-timing: 0.15s ease-out;\n\n align-items: flex-start;\n color: var(--pine-color-text);\n display: inline-flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.pds-switch--error) {\n color: var(--pine-color-text-message-danger);\n\n input,\n input:checked,\n input:hover:not(:disabled):not(:checked) {\n background-color: var(--pine-color-danger);\n }\n\n input:focus-visible:not(:disabled):not(:checked) {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n\n label {\n color: var(--color-text-error);\n }\n}\n\n// switch container\ninput {\n appearance: none;\n background: var(--pine-color-neutral);\n border: 0;\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: inline-block;\n flex-shrink: 0;\n height: var(--pine-dimension-250);\n margin: 0;\n padding: 0;\n position: relative;\n transition: var(--number-transition-timing);\n transition-property: background, border, color;\n width: var(--pine-dimension-450);\n\n // switch toggle\n &::after {\n background: var(--pine-color-secondary);\n border-radius: var(--pine-border-radius-full);\n box-shadow: var(--pine-box-shadow);\n content: \"\";\n display: block;\n height: var(--sizing-input-toggle-size);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n position: absolute;\n transform: translate3d(-100%, -50%, 0);\n transition: transform var(--number-transition-timing);\n width: var(--sizing-input-toggle-size);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-150);\n\n .pds-switch--error & {\n color: inherit;\n }\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n// Help and error messages\n.pds-switch__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-xs);\n margin-inline-start: var(--spacing-message-inline);\n width: 100%;\n\n + .pds-switch__message {\n margin-block-start: var(--spacing-message-inline);\n }\n}\n\n.pds-switch__message--error {\n color: inherit;\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Disabled state\ninput:disabled {\n background-color: var(--pine-color-neutral-disabled);\n cursor: not-allowed;\n\n ~ label {\n cursor: initial;\n }\n\n &:hover::after {\n background-color: var(--pine-color-secondary);\n }\n\n .pds-switch__message {\n color: initial;\n }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n background-color: var(--pine-color-neutral-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n background-color: currentColor;\n color: var(--pine-color-accent);\n\n &:hover {\n border-color: currentColor;\n color: var(--pine-color-accent-hover);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-switch',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSwitch {\n private inheritedAttributes: Attributes = {};\n private internals?: ElementInternals;\n private readonly _type = 'checkbox' as const;\n\n @Element() el: HTMLPdsSwitchElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines the input 'checked' state.\n */\n @Prop({ mutable: true }) checked = false;\n\n /**\n * Determines the input 'disabled' state, preventing user interaction.\n */\n @Prop() disabled? = false;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * Displays help text for additional description of an input.\n */\n @Prop() helperMessage: string;\n\n /**\n * Determines the input 'invalid' state, signifying an error is present.\n */\n @Prop() invalid? = false;\n\n /**\n * Displays text to describe the input.\n */\n @Prop() label!: string;\n\n /**\n * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n */\n @Prop() name: string;\n\n /**\n * Determines the 'required' state of the input.\n */\n @Prop() required? = false;\n\n /**\n * Provides input with a string submitted in form data.\n */\n @Prop() value: string;\n\n\n /**\n * Emits an event on input change.\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n\n const input = e.target as HTMLInputElement;\n this.checked = input.checked;\n\n this.updateFormValue();\n\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n connectedCallback() {\n // Initialize ElementInternals for form association (only once per element instance)\n if (this.el.attachInternals && !this.internals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentDidLoad() {\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged() {\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (typeof jest !== 'undefined' || typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n return;\n }\n\n if (this.internals && this.internals.setFormValue) {\n // For switches, only send the value when checked, otherwise send null\n const formValue = this.checked ? (this.value || 'on') : null;\n this.internals.setFormValue(formValue);\n }\n\n if (this.internals && this.internals.setValidity) {\n this.internals.setValidity({});\n }\n }\n\n formStateRestoreCallback(state: string | FormData | null) {\n if (state instanceof FormData) {\n // For switches, restore if the value exists in FormData\n const value = this.value || 'on';\n this.checked = state.get(this.name || this.componentId) === value;\n } else if (typeof state === 'string') {\n // Restore from string state\n this.checked = state === (this.value || 'on');\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type=\"checkbox\"\n value={this.value}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(n,e,t,i){function r(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,o){function u(n){try{c(i.next(n))}catch(n){o(n)}}function a(n){try{c(i["throw"](n))}catch(n){o(n)}}function c(n){n.done?t(n.value):r(n.value).then(u,a)}c((i=i.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,u=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return u.next=a(0),u["throw"]=a(1),u["return"]=a(2),typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(n){return function(e){return c([n,e])}}function c(a){if(i)throw new TypeError("Generator is already executing.");while(u&&(u=0,a[0]&&(t=0)),t)try{if(i=1,r&&(o=a[0]&2?r["return"]:a[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;if(r=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:t.label++;return{value:a[1],done:false};case 5:t.label++;r=a[1];a=[0];continue;case 7:a=t.ops.pop();t.trys.pop();continue;default:if(!(o=t.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){t=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){t.label=a[1];break}if(a[0]===6&&t.label<o[1]){t.label=o[1];o=a;break}if(o&&t.label<o[2]){t.label=o[2];t.ops.push(a);break}if(o[2])t.ops.pop();t.trys.pop();continue}a=e.call(n,t)}catch(n){a=[6,n];r=0}finally{i=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-D2eS6fhD.system.js"],(function(n){"use strict";var e,t,i,r;return{setters:[function(n){e=n.c;t=n.o;i=n.f;r=n.s}],execute:function(){n("s",c);var o="pds-truncation-tooltip";function u(){if(document.querySelector("[data-pds-truncation-tooltip]"))return;var n=document.createElement("style");n.setAttribute("data-pds-truncation-tooltip","");n.textContent="\n .".concat(o," {\n position: fixed;\n z-index: var(--pine-z-index-nuclear, 9999);\n }\n .").concat(o,"__content {\n background-color: var(--pine-color-primary, #1a1a2e);\n border-radius: calc(var(--pine-dimension-xs, 4px) * 1.25);\n box-shadow: var(--pine-box-shadow, 0 2px 8px rgba(0,0,0,0.15));\n color: var(--pine-color-text-primary, #fff);\n cursor: text;\n font-family: var(--pine-font-family-body, sans-serif);\n font-size: var(--pine-font-size-body-sm, 0.875rem);\n letter-spacing: var(--pine-letter-spacing, normal);\n line-height: var(--pine-line-height-body, 1.5);\n max-width: 320px;\n opacity: 0;\n padding: var(--pine-dimension-xs, 4px) calc(var(--pine-dimension-md, 12px) / 2);\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n user-select: text;\n visibility: hidden;\n width: max-content;\n word-break: break-word;\n }\n .").concat(o,"--visible .").concat(o,"__content {\n opacity: 1;\n visibility: visible;\n }\n ");document.head.appendChild(n)}function a(n){return n.scrollWidth>n.clientWidth}function c(n){var c=n.hostEl,f=n.contentEl,s=n.getTooltipText,l=n.placement,d=l===void 0?"top":l;u();var v=null;var p=false;var m=false;var h=false;var y=null;var b=null;var x=null;if(typeof ResizeObserver!=="undefined"){b=new ResizeObserver((function(){if(x){clearTimeout(x)}x=setTimeout((function(){x=null;if(v&&v.isConnected&&!a(f)){T()}}),100)}));b.observe(f)}function w(){if(v)return;var n=s();if(!n||n.trim()==="")return;v=document.createElement("div");v.className=o;v.setAttribute("role","tooltip");v.setAttribute("aria-hidden","false");var e=document.createElement("div");e.className="".concat(o,"__content");e.textContent=n.trim();v.appendChild(e);document.body.appendChild(v);v.addEventListener("mouseenter",M);v.addEventListener("mouseleave",D);_().then((function(){if(v){v.classList.add("".concat(o,"--visible"))}}))}function _(){return __awaiter(this,void 0,void 0,(function(){var n,o,u,a,f,s,l,p,m;return __generator(this,(function(h){switch(h.label){case 0:if(!v)return[2];h.label=1;case 1:h.trys.push([1,3,,4]);return[4,e(c,v,{placement:d,strategy:"fixed",middleware:[t(4),i(),r({padding:5})]})];case 2:n=h.sent(),o=n.x,u=n.y;Object.assign(v.style,{left:"".concat(o,"px"),top:"".concat(u,"px")});return[3,4];case 3:a=h.sent();if(v){f=c.getBoundingClientRect();s=v.getBoundingClientRect();l=5;p=Math.max(l,Math.min(f.left,window.innerWidth-s.width-l));m=Math.max(l,f.top-s.height-8);v.style.left="".concat(p,"px");v.style.top="".concat(m,"px")}return[3,4];case 4:return[2]}}))}))}function g(){if(v){v.removeEventListener("mouseenter",M);v.removeEventListener("mouseleave",D);v.classList.remove("".concat(o,"--visible"));if(v.parentNode&&v.isConnected){try{v.parentNode.removeChild(v)}catch(n){}}v=null}}function k(){if(y!==null){clearTimeout(y);y=null}}function z(){k();if(!a(f))return;w()}function T(){if(p||m||h)return;g()}function O(){k();y=setTimeout((function(){y=null;T()}),100)}function j(){p=true;z()}function S(){p=false;O()}function M(){m=true;k()}function D(){m=false;O()}function I(){h=true;z()}function R(){h=false;O()}c.addEventListener("mouseenter",j);c.addEventListener("mouseleave",S);c.addEventListener("focusin",I);c.addEventListener("focusout",R);return function(){k();if(x){clearTimeout(x);x=null}if(b){b.disconnect()}c.removeEventListener("mouseenter",j);c.removeEventListener("mouseleave",S);c.removeEventListener("focusin",I);c.removeEventListener("focusout",R);g()}}}}}));
|
|
2
|
+
//# sourceMappingURL=p-DXVwADJT.system.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"p-DXVwADJT.system.js","sources":["src/utils/truncation-tooltip.ts"],"sourcesContent":["import { PlacementType } from './types';\nimport {\n computePosition,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\n\nexport interface TruncationTooltipOptions {\n /** The host element (for hover/focus listeners and positioning anchor) */\n hostEl: HTMLElement;\n /** The inner element where overflow actually occurs (inside shadow root) */\n contentEl: HTMLElement;\n /** Function that returns the full text to display in the tooltip */\n getTooltipText: () => string;\n /** Tooltip placement preference (default: 'top') */\n placement?: PlacementType;\n}\n\n/** CSS class prefix used for truncation tooltip portal elements */\nconst TOOLTIP_CLASS = 'pds-truncation-tooltip';\n\n/**\n * Injects the truncation tooltip styles into the document head.\n * Uses the same design tokens as pds-tooltip for visual consistency.\n * Only injects once — checks the DOM to avoid duplicates.\n *\n * Z-Index Strategy:\n * Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.\n * This is necessary because tooltips are portaled to document.body and must overlay:\n * - Modal dialogs\n * - Dropdown menus\n * - Other floating UI elements\n * If you encounter z-index conflicts, ensure your overlays use Pine's z-index tokens\n * or adjust --pine-z-index-nuclear in your theme.\n */\nfunction injectStyles(): void {\n if (document.querySelector('[data-pds-truncation-tooltip]')) return;\n\n const style = document.createElement('style');\n style.setAttribute('data-pds-truncation-tooltip', '');\n style.textContent = `\n .${TOOLTIP_CLASS} {\n position: fixed;\n z-index: var(--pine-z-index-nuclear, 9999);\n }\n .${TOOLTIP_CLASS}__content {\n background-color: var(--pine-color-primary, #1a1a2e);\n border-radius: calc(var(--pine-dimension-xs, 4px) * 1.25);\n box-shadow: var(--pine-box-shadow, 0 2px 8px rgba(0,0,0,0.15));\n color: var(--pine-color-text-primary, #fff);\n cursor: text;\n font-family: var(--pine-font-family-body, sans-serif);\n font-size: var(--pine-font-size-body-sm, 0.875rem);\n letter-spacing: var(--pine-letter-spacing, normal);\n line-height: var(--pine-line-height-body, 1.5);\n max-width: 320px;\n opacity: 0;\n padding: var(--pine-dimension-xs, 4px) calc(var(--pine-dimension-md, 12px) / 2);\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n user-select: text;\n visibility: hidden;\n width: max-content;\n word-break: break-word;\n }\n .${TOOLTIP_CLASS}--visible .${TOOLTIP_CLASS}__content {\n opacity: 1;\n visibility: visible;\n }\n `;\n document.head.appendChild(style);\n}\n\n/**\n * Checks if an element's content is overflowing horizontally (i.e. text is truncated).\n */\nfunction isOverflowing(el: HTMLElement): boolean {\n return el.scrollWidth > el.clientWidth;\n}\n\n/**\n * Sets up automatic tooltip behavior for a truncated element.\n *\n * When the element's text overflows, hovering or focusing the host element\n * will display a tooltip showing the full text content. The tooltip is\n * rendered as a portal on document.body and positioned with Floating UI.\n *\n * @returns A cleanup function that removes all listeners, observers, and DOM elements.\n */\nexport function setupTruncationTooltip(options: TruncationTooltipOptions): () => void {\n const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;\n\n injectStyles();\n\n let portalEl: HTMLElement | null = null;\n let isHovering = false;\n let isHoveringPortal = false;\n let isFocused = false;\n let hideTimeout: ReturnType<typeof setTimeout> | null = null;\n let resizeObserver: ResizeObserver | null = null;\n let resizeDebounce: ReturnType<typeof setTimeout> | null = null;\n\n // Use ResizeObserver to re-evaluate overflow when the element resizes\n // Debounced to prevent performance issues during rapid window resizing\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(() => {\n if (resizeDebounce) {\n clearTimeout(resizeDebounce);\n }\n resizeDebounce = setTimeout(() => {\n resizeDebounce = null;\n // If tooltip is showing but text no longer overflows, hide it\n if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {\n hideTooltip();\n }\n }, 100);\n });\n resizeObserver.observe(contentEl);\n }\n\n function createPortal(): void {\n if (portalEl) return;\n\n const text = getTooltipText();\n if (!text || text.trim() === '') return;\n\n portalEl = document.createElement('div');\n portalEl.className = TOOLTIP_CLASS;\n portalEl.setAttribute('role', 'tooltip');\n portalEl.setAttribute('aria-hidden', 'false');\n\n const contentDiv = document.createElement('div');\n contentDiv.className = `${TOOLTIP_CLASS}__content`;\n contentDiv.textContent = text.trim();\n\n portalEl.appendChild(contentDiv);\n document.body.appendChild(portalEl);\n\n // Allow the user to hover into the tooltip to select/copy text\n portalEl.addEventListener('mouseenter', handlePortalMouseEnter);\n portalEl.addEventListener('mouseleave', handlePortalMouseLeave);\n\n positionTooltip().then(() => {\n if (portalEl) {\n portalEl.classList.add(`${TOOLTIP_CLASS}--visible`);\n }\n });\n }\n\n async function positionTooltip(): Promise<void> {\n if (!portalEl) return;\n\n try {\n const { x, y } = await computePosition(hostEl, portalEl, {\n placement,\n strategy: 'fixed',\n middleware: [offset(4), flip(), shift({ padding: 5 })],\n });\n\n Object.assign(portalEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n } catch {\n // Fallback: position above the element with bounds checking\n if (portalEl) {\n const rect = hostEl.getBoundingClientRect();\n const portalRect = portalEl.getBoundingClientRect();\n const padding = 5;\n\n // Ensure tooltip stays within viewport bounds\n const left = Math.max(padding, Math.min(rect.left, window.innerWidth - portalRect.width - padding));\n const top = Math.max(padding, rect.top - portalRect.height - 8);\n\n portalEl.style.left = `${left}px`;\n portalEl.style.top = `${top}px`;\n }\n }\n }\n\n function removePortal(): void {\n if (portalEl) {\n portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);\n portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);\n portalEl.classList.remove(`${TOOLTIP_CLASS}--visible`);\n // Check if portal is still in the DOM before removing\n if (portalEl.parentNode && portalEl.isConnected) {\n try {\n portalEl.parentNode.removeChild(portalEl);\n } catch (e) {\n // Portal was already removed, ignore error\n }\n }\n portalEl = null;\n }\n }\n\n function cancelHideTimeout(): void {\n if (hideTimeout !== null) {\n clearTimeout(hideTimeout);\n hideTimeout = null;\n }\n }\n\n function showTooltip(): void {\n cancelHideTimeout();\n if (!isOverflowing(contentEl)) return;\n createPortal();\n }\n\n function hideTooltip(): void {\n if (isHovering || isHoveringPortal || isFocused) return;\n removePortal();\n }\n\n /**\n * Schedules tooltip removal after a short delay.\n *\n * The 100ms delay serves two purposes:\n * 1. Gives users time to move their cursor from the truncated text to the tooltip portal\n * without it closing, enabling text selection/copying from the tooltip\n * 2. Prevents flickering when the user briefly moves the cursor during normal interaction\n */\n function scheduleHide(): void {\n cancelHideTimeout();\n hideTimeout = setTimeout(() => {\n hideTimeout = null;\n hideTooltip();\n }, 100);\n }\n\n function handleMouseEnter(): void {\n isHovering = true;\n showTooltip();\n }\n\n function handleMouseLeave(): void {\n isHovering = false;\n scheduleHide();\n }\n\n function handlePortalMouseEnter(): void {\n isHoveringPortal = true;\n cancelHideTimeout();\n }\n\n function handlePortalMouseLeave(): void {\n isHoveringPortal = false;\n scheduleHide();\n }\n\n function handleFocusIn(): void {\n isFocused = true;\n showTooltip();\n }\n\n function handleFocusOut(): void {\n isFocused = false;\n scheduleHide();\n }\n\n hostEl.addEventListener('mouseenter', handleMouseEnter);\n hostEl.addEventListener('mouseleave', handleMouseLeave);\n hostEl.addEventListener('focusin', handleFocusIn);\n hostEl.addEventListener('focusout', handleFocusOut);\n\n // Return cleanup function\n return () => {\n cancelHideTimeout();\n if (resizeDebounce) {\n clearTimeout(resizeDebounce);\n resizeDebounce = null;\n }\n if (resizeObserver) {\n resizeObserver.disconnect();\n }\n hostEl.removeEventListener('mouseenter', handleMouseEnter);\n hostEl.removeEventListener('mouseleave', handleMouseLeave);\n hostEl.removeEventListener('focusin', handleFocusIn);\n hostEl.removeEventListener('focusout', handleFocusOut);\n removePortal();\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"p-DYm9--lc.system.js","sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n display: inline;\n\n pds-icon {\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-link {\n align-items: center;\n // Priority: 1) explicit --color prop, 2) context variable, 3) default\n color: var(--color, var(--pds-context-link-color, var(--pine-color-text)));\n display: inline-flex;\n font-weight: var(--pine-font-weight-medium);\n\n &:focus-visible {\n border-radius: var(--pine-dimension-2xs);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width-thick);\n position: relative;\n }\n\n &:hover {\n color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));\n text-decoration: none;\n }\n\n :host([color=\"secondary\"]) & {\n color: var(--pine-color-text-primary);\n\n &:hover {\n color: var(--pine-color-text-inverse-secondary);\n }\n }\n\n :host([color=\"accent\"]) & {\n color: var(--pine-color-accent);\n\n &:hover {\n color: var(--pine-color-accent-hover);\n }\n }\n\n :host([color=\"danger\"]) & {\n color: var(--pine-color-danger);\n\n &:hover {\n color: var(--pine-color-danger-hover);\n }\n }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n font-size: var(--pine-font-size-body-xs);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--md {\n font-size: var(--pine-font-size-body-sm);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--lg {\n font-size: var(--pine-font-size-body-md);\n\n pds-icon {\n height: var(--pine-dimension-sm);\n width: var(--pine-dimension-sm);\n }\n}\n\n.pds-link--plain {\n text-decoration: none;\n\n &:hover {\n color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));\n text-decoration: underline;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n tag: 'pds-link',\n styleUrls: ['pds-link.scss'],\n shadow: true,\n})\nexport class PdsLink {\n /**\n * Sets the link color.\n */\n @Prop() color?: string;\n\n /**\n * Prompts the user to save the linked URL instead of navigating to it.\n * It can be used without a value to download with the default filename,\n * or with a string value to suggest a specific filename for the download.\n */\n @Prop() download?: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether the link should open in a new tab.\n * @defaultValue false\n * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.\n */\n @Prop() external = false;\n\n /**\n * Specifies where to open the linked document.\n * @defaultValue undefined\n * @example\n * <pds-link href=\"https://example.com\" target=\"_blank\">Opens in new tab</pds-link>\n */\n @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n /**\n * Sets the link variant styles.\n * @defaultValue inline\n */\n @Prop() variant: 'inline' | 'plain' = 'inline';\n\n /**\n * The font size of the link's text.\n * @defaultValue lg\n */\n @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n /**\n * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n */\n @Prop() href!: string;\n\n private classNames() {\n const classNames = ['pds-link'];\n\n if (this.fontSize) {\n classNames.push('pds-link--' + this.fontSize);\n }\n\n if (this.variant) {\n classNames.push('pds-link--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n private setLinkStyles() {\n if (!this.color) return;\n\n const linkColors = {\n secondary: 'var(--pine-color-text-primary)',\n accent: 'var(--pine-color-accent)',\n danger: 'var(--pine-color-danger)',\n }\n\n const linkStyles = setColor(this.color, linkColors);\n\n return linkStyles;\n }\n\n render() {\n const targetValue = this.target || (this.external ? '_blank' : undefined);\n const showExternalIcon = this.external;\n const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;\n\n return (\n <a\n class={this.classNames()}\n download={this.download}\n href={this.href}\n id={this.componentId}\n part=\"link\"\n target={targetValue}\n rel={relValue}\n style={this.setLinkStyles()}\n >\n <slot>{this.href}</slot>\n {showExternalIcon &&\n <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n }\n </a>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;MAAA,MAAM,UAAU,GAAG,4nDAA4nD;;YCcloD,OAAO,uBAAA,MAAA;MALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;MAuBE;;;;MAIG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;MAUxB;;;MAGG;MACK,QAAA,IAAO,CAAA,OAAA,GAAuB,QAAQ;MAE9C;;;MAGG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;MA0D5C;UAnDS,UAAU,GAAA;MAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;MAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;kBACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;;MAG/C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;kBAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;;MAG9C,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;UAGrB,aAAa,GAAA;cACnB,IAAI,CAAC,IAAI,CAAC,KAAK;kBAAE;MAEjB,QAAA,MAAM,UAAU,GAAG;MACjB,YAAA,SAAS,EAAE,gCAAgC;MAC3C,YAAA,MAAM,EAAE,0BAA0B;MAClC,YAAA,MAAM,EAAE,0BAA0B;eACnC;cAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;MAEnD,QAAA,OAAO,UAAU;;UAGnB,MAAM,GAAA;MACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;MACzE,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ;MACtC,QAAA,MAAM,QAAQ,GAAG,WAAW,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS;MAE7E,QAAA,QACE,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAE3B,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,EACvB,gBAAgB;kBACf,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAExD;;;;;;;;;;;"}
|