@pine-ds/core 3.2.0 → 3.3.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/mock-pds-modal.js +1 -1
- package/components/pds-button2.js +1 -1
- package/components/pds-button2.js.map +1 -1
- package/components/pds-chip.js +21 -6
- package/components/pds-chip.js.map +1 -1
- package/components/pds-input.js +98 -21
- package/components/pds-input.js.map +1 -1
- package/components/pds-link2.js +2 -2
- package/components/pds-loader2.js +1 -1
- package/components/pds-modal-content.js +2 -2
- package/components/pds-modal-footer.js +1 -1
- package/components/pds-modal-header.js +1 -1
- package/components/pds-modal.js +2 -2
- package/components/pds-popover.js +1 -1
- package/components/pds-progress.js +1 -1
- package/components/pds-radio.js +3 -3
- package/components/pds-row.js +1 -1
- package/components/pds-select.js +3 -3
- package/components/pds-select.js.map +1 -1
- package/components/pds-sortable-item.js +1 -1
- package/components/pds-sortable.js +1 -1
- package/components/pds-switch.js +3 -3
- package/components/pds-tab.js +3 -3
- package/components/pds-table-body.js +1 -1
- package/components/pds-table-cell2.js +2 -2
- package/components/pds-table-head-cell2.js +2 -2
- package/components/pds-table-head.js +1 -1
- package/components/pds-table-row.js +1 -1
- package/components/pds-table.js +1 -1
- package/components/pds-tabpanel.js +1 -1
- package/components/pds-tabs.js +1 -1
- package/components/pds-text2.js +1 -1
- package/components/pds-textarea.js +4 -4
- package/components/pds-toast.js +3 -3
- package/components/pds-tooltip.js +17 -1
- package/components/pds-tooltip.js.map +1 -1
- package/dist/cjs/{index-CG2Rr2io.js → index-B0qLG6KJ.js} +3 -3
- package/dist/cjs/index-B0qLG6KJ.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mock-pds-modal.cjs.entry.js +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +2 -2
- package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +21 -7
- package/dist/cjs/pds-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +88 -21
- package/dist/cjs/pds-input.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-input.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-link.cjs.entry.js +3 -3
- package/dist/cjs/pds-loader.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-content.cjs.entry.js +2 -2
- package/dist/cjs/pds-modal-footer.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-header.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal.cjs.entry.js +2 -2
- package/dist/cjs/pds-popover.cjs.entry.js +1 -1
- package/dist/cjs/pds-progress.cjs.entry.js +1 -1
- package/dist/cjs/pds-radio.cjs.entry.js +4 -4
- package/dist/cjs/pds-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-select.cjs.entry.js +3 -4
- package/dist/cjs/pds-select.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-select.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-sortable-item.cjs.entry.js +2 -2
- package/dist/cjs/pds-sortable.cjs.entry.js +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +4 -4
- package/dist/cjs/pds-tab.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-body.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-head.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-table.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabpanel.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabs.cjs.entry.js +1 -1
- package/dist/cjs/pds-text.cjs.entry.js +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +5 -5
- package/dist/cjs/pds-toast.cjs.entry.js +3 -3
- package/dist/cjs/pds-tooltip.cjs.entry.js +17 -1
- package/dist/cjs/pds-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tooltip.entry.cjs.js.map +1 -1
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/collection/components/pds-button/pds-button.css +17 -5
- package/dist/collection/components/pds-chip/pds-chip.css +48 -11
- package/dist/collection/components/pds-chip/pds-chip.js +42 -9
- package/dist/collection/components/pds-chip/pds-chip.js.map +1 -1
- package/dist/collection/components/pds-chip/stories/pds-chip.stories.js +17 -0
- package/dist/collection/components/pds-input/pds-input.css +167 -43
- package/dist/collection/components/pds-input/pds-input.js +212 -21
- package/dist/collection/components/pds-input/pds-input.js.map +1 -1
- package/dist/collection/components/pds-input/stories/pds-input.stories.js +84 -0
- package/dist/collection/components/pds-link/pds-link.js +2 -2
- package/dist/collection/components/pds-loader/pds-loader.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +2 -2
- package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal.js +2 -2
- package/dist/collection/components/pds-modal/test/mock-pds-modal.js +1 -1
- package/dist/collection/components/pds-popover/pds-popover.js +1 -1
- package/dist/collection/components/pds-progress/pds-progress.js +1 -1
- package/dist/collection/components/pds-radio/pds-radio.js +3 -3
- package/dist/collection/components/pds-row/pds-row.js +1 -1
- package/dist/collection/components/pds-select/pds-select.css +34 -4
- package/dist/collection/components/pds-select/pds-select.js +20 -2
- package/dist/collection/components/pds-select/pds-select.js.map +1 -1
- package/dist/collection/components/pds-select/stories/pds-select.stories.js +2 -0
- package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +1 -1
- package/dist/collection/components/pds-sortable/pds-sortable.js +1 -1
- package/dist/collection/components/pds-switch/pds-switch.js +3 -3
- package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
- package/dist/collection/components/pds-table/pds-table.js +1 -1
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +3 -3
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +1 -1
- package/dist/collection/components/pds-tabs/pds-tabs.js +1 -1
- package/dist/collection/components/pds-text/pds-text.js +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.js +4 -4
- package/dist/collection/components/pds-toast/pds-toast.js +3 -3
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +17 -1
- package/dist/collection/components/pds-tooltip/pds-tooltip.js.map +1 -1
- package/dist/docs.json +255 -11
- package/dist/esm/{index-_4gljHh-.js → index-DpOSrebJ.js} +3 -3
- package/dist/esm/index-DpOSrebJ.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mock-pds-modal.entry.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 +2 -2
- 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 +21 -7
- package/dist/esm/pds-chip.entry.js.map +1 -1
- package/dist/esm/pds-copytext.entry.js +1 -1
- package/dist/esm/pds-input.entry.js +88 -21
- package/dist/esm/pds-input.entry.js.map +1 -1
- package/dist/esm/pds-link.entry.js +3 -3
- package/dist/esm/pds-loader.entry.js +1 -1
- package/dist/esm/pds-modal-content.entry.js +2 -2
- package/dist/esm/pds-modal-footer.entry.js +1 -1
- package/dist/esm/pds-modal-header.entry.js +1 -1
- package/dist/esm/pds-modal.entry.js +2 -2
- package/dist/esm/pds-popover.entry.js +1 -1
- package/dist/esm/pds-progress.entry.js +1 -1
- package/dist/esm/pds-radio.entry.js +4 -4
- package/dist/esm/pds-row.entry.js +1 -1
- package/dist/esm/pds-select.entry.js +3 -4
- package/dist/esm/pds-select.entry.js.map +1 -1
- package/dist/esm/pds-sortable-item.entry.js +2 -2
- package/dist/esm/pds-sortable.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js +4 -4
- package/dist/esm/pds-tab.entry.js +3 -3
- package/dist/esm/pds-table-body.entry.js +1 -1
- package/dist/esm/pds-table-cell.entry.js +2 -2
- package/dist/esm/pds-table-head-cell.entry.js +3 -3
- package/dist/esm/pds-table-head.entry.js +1 -1
- package/dist/esm/pds-table-row.entry.js +1 -1
- package/dist/esm/pds-table.entry.js +1 -1
- package/dist/esm/pds-tabpanel.entry.js +1 -1
- package/dist/esm/pds-tabs.entry.js +1 -1
- package/dist/esm/pds-text.entry.js +1 -1
- package/dist/esm/pds-textarea.entry.js +5 -5
- package/dist/esm/pds-toast.entry.js +3 -3
- package/dist/esm/pds-tooltip.entry.js +17 -1
- package/dist/esm/pds-tooltip.entry.js.map +1 -1
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm-es5/{index-_4gljHh-.js → index-DpOSrebJ.js} +1 -1
- package/dist/esm-es5/index-DpOSrebJ.js.map +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mock-pds-modal.entry.js +1 -1
- package/dist/esm-es5/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-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js.map +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-loader.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal-footer.entry.js +1 -1
- package/dist/esm-es5/pds-modal-header.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-popover.entry.js +1 -1
- package/dist/esm-es5/pds-progress.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js.map +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-sortable.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-table-body.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.entry.js +1 -1
- package/dist/esm-es5/pds-table-row.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-toast.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js.map +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/pine-core/{p-CV405yTU.system.js.map → p--YvWqEjm.system.js.map} +1 -1
- package/dist/pine-core/p-00599bd8.entry.js +2 -0
- package/dist/pine-core/p-00599bd8.entry.js.map +1 -0
- package/dist/pine-core/{p-833f08f3.entry.js → p-04195bdb.entry.js} +2 -2
- package/dist/pine-core/p-065208a1.system.entry.js +2 -0
- package/dist/pine-core/p-065208a1.system.entry.js.map +1 -0
- package/dist/pine-core/{p-4288c861.entry.js → p-07f45626.entry.js} +2 -2
- package/dist/pine-core/{p-0572825b.entry.js → p-0a11384e.entry.js} +2 -2
- package/dist/pine-core/{p-28e28f42.system.entry.js → p-0a87e2fc.system.entry.js} +2 -2
- package/dist/pine-core/p-0c30661b.system.entry.js +2 -0
- package/dist/pine-core/{p-146fcd44.entry.js → p-10e2feff.entry.js} +2 -2
- package/dist/pine-core/{p-bd04212c.system.entry.js → p-13481ef5.system.entry.js} +2 -2
- package/dist/pine-core/{p-c4294be2.entry.js → p-19c01019.entry.js} +2 -2
- package/dist/pine-core/{p-f2c807ac.entry.js → p-1d395d27.entry.js} +2 -2
- package/dist/pine-core/{p-4ff0838c.entry.js → p-2007a0b5.entry.js} +2 -2
- package/dist/pine-core/{p-78cb1c40.system.entry.js → p-27c0ffda.system.entry.js} +2 -2
- package/dist/pine-core/p-35917a1a.entry.js +2 -0
- package/dist/pine-core/p-39a31730.system.entry.js +2 -0
- package/dist/pine-core/p-39a31730.system.entry.js.map +1 -0
- package/dist/pine-core/{p-1b109c01.entry.js → p-3ea415b0.entry.js} +2 -2
- package/dist/pine-core/p-44f10d3c.entry.js +2 -0
- package/dist/pine-core/p-44f10d3c.entry.js.map +1 -0
- package/dist/pine-core/{p-48e76945.system.entry.js → p-4b2aab79.system.entry.js} +2 -2
- package/dist/pine-core/{p-77c3a10d.entry.js → p-51cc93b3.entry.js} +2 -2
- package/dist/pine-core/{p-83252078.system.entry.js → p-5367f477.system.entry.js} +2 -2
- package/dist/pine-core/{p-a2572675.system.entry.js → p-593df966.system.entry.js} +2 -2
- package/dist/pine-core/{p-d6ac2862.system.entry.js → p-5a437fcd.system.entry.js} +2 -2
- package/dist/pine-core/{p-c0f74199.entry.js → p-60fbeb1c.entry.js} +2 -2
- package/dist/pine-core/p-65a875f6.entry.js +2 -0
- package/dist/pine-core/{p-30142a25.system.entry.js → p-6a7936e7.system.entry.js} +2 -2
- package/dist/pine-core/p-76e35041.entry.js +2 -0
- package/dist/pine-core/{p-d1b222f5.entry.js.map → p-76e35041.entry.js.map} +1 -1
- package/dist/pine-core/{p-86d388a2.entry.js → p-76f7cf21.entry.js} +2 -2
- package/dist/pine-core/{p-121e03ad.system.entry.js → p-78327c08.system.entry.js} +2 -2
- package/dist/pine-core/{p-e2dc81c0.entry.js → p-78f29270.entry.js} +2 -2
- package/dist/pine-core/{p-83c632f6.system.entry.js → p-79cb7835.system.entry.js} +2 -2
- package/dist/pine-core/{p-e9d972db.system.entry.js → p-7bb3a5d4.system.entry.js} +2 -2
- package/dist/pine-core/{p-17d3fa8b.entry.js → p-80f36506.entry.js} +2 -2
- package/dist/pine-core/{p-f47133fd.entry.js → p-8180b641.entry.js} +2 -2
- package/dist/pine-core/{p-a394645a.system.entry.js → p-833b2170.system.entry.js} +2 -2
- package/dist/pine-core/{p-83ffc1cc.entry.js → p-86329612.entry.js} +2 -2
- package/dist/pine-core/p-8b6b0db7.entry.js +2 -0
- package/dist/pine-core/p-8b6b0db7.entry.js.map +1 -0
- package/dist/pine-core/{p-cd2cd116.entry.js → p-8f06b020.entry.js} +2 -2
- package/dist/pine-core/{p-78fb945e.system.entry.js → p-959c8247.system.entry.js} +2 -2
- package/dist/pine-core/{p-f9e01886.system.entry.js → p-96e9774e.system.entry.js} +2 -2
- package/dist/pine-core/p-9c01e81b.system.entry.js +2 -0
- package/dist/pine-core/p-9db1f179.entry.js +2 -0
- package/dist/pine-core/p-9db1f179.entry.js.map +1 -0
- package/dist/pine-core/{p-CWtKi9tV.system.js.map → p-A4_UN20E.system.js.map} +1 -1
- package/dist/pine-core/{p-C-oNYS10.system.js.map → p-BE1qV1Jc.system.js.map} +1 -1
- package/dist/pine-core/{p-BVUeEWjl.system.js.map → p-BEYGfY83.system.js.map} +1 -1
- package/dist/pine-core/p-BHp2IZGP.system.js.map +1 -0
- package/dist/pine-core/{p-DV_GadHU.system.js.map → p-BISuGf0f.system.js.map} +1 -1
- package/dist/pine-core/{p-HBgo7i_E.system.js.map → p-BPQAcMLl.system.js.map} +1 -1
- package/dist/pine-core/{p-CzKqvFNN.system.js.map → p-BaAcO8Mz.system.js.map} +1 -1
- package/dist/pine-core/{p-yku4NLl6.system.js.map → p-BcuE4ZrB.system.js.map} +1 -1
- package/dist/pine-core/p-BsL2GDnH.system.js +1 -1
- package/dist/pine-core/{p-DEsea81X.system.js.map → p-BwHnCFqU.system.js.map} +1 -1
- package/dist/pine-core/{p-D9LPgNmN.system.js.map → p-BxBtA60x.system.js.map} +1 -1
- package/dist/pine-core/{p-Bs9Nyvj2.system.js.map → p-C0oRS1F9.system.js.map} +1 -1
- package/dist/pine-core/{p-Derxa-nn.system.js.map → p-C2d75seA.system.js.map} +1 -1
- package/dist/pine-core/{p-DbVkYdnF.system.js.map → p-CGABEyvz.system.js.map} +1 -1
- package/dist/pine-core/{p-CiDIFl28.system.js.map → p-CIc_XeAg.system.js.map} +1 -1
- package/dist/pine-core/{p-Bo6FQRlR.system.js.map → p-CNYB6FL-.system.js.map} +1 -1
- package/dist/pine-core/{p-DgOMN0Ur.system.js.map → p-CNkajx9x.system.js.map} +1 -1
- package/dist/pine-core/{p-Cj2r1nL6.system.js.map → p-CS2nVL5p.system.js.map} +1 -1
- package/dist/pine-core/{p-B-pTdYoP.system.js.map → p-CTPMEWZT.system.js.map} +1 -1
- package/dist/pine-core/{p-CDIHBBTC.system.js.map → p-CTWkFhWu.system.js.map} +1 -1
- package/dist/pine-core/{p-M2Hhmwex.system.js.map → p-CdzfTGbZ.system.js.map} +1 -1
- package/dist/pine-core/{p-DiJV28pi.system.js.map → p-CkoeYrxa.system.js.map} +1 -1
- package/dist/pine-core/{p-DKSZziVY.system.js.map → p-ClVQjta4.system.js.map} +1 -1
- package/dist/pine-core/{p-DS7q5AvX.system.js.map → p-D2UtaGL2.system.js.map} +1 -1
- package/dist/pine-core/{p-DN9puCWI.system.js.map → p-DGyATOIf.system.js.map} +1 -1
- package/dist/pine-core/p-DMeT5CsE.system.js.map +1 -0
- package/dist/pine-core/{p-CsM74dxm.system.js.map → p-DVhX1_nD.system.js.map} +1 -1
- package/dist/pine-core/p-DeW-6a7f.system.js.map +1 -0
- package/dist/pine-core/{p-BOJnNd1p.system.js.map → p-DgTp_KeO.system.js.map} +1 -1
- package/dist/pine-core/p-DjXmy34u.system.js.map +1 -0
- package/dist/pine-core/{p-_4gljHh-.js → p-DpOSrebJ.js} +1 -1
- package/dist/pine-core/p-DpOSrebJ.js.map +1 -0
- package/dist/pine-core/{p-B4W0_y2p.system.js → p-DyDReOdO.system.js} +1 -1
- package/dist/pine-core/p-DyDReOdO.system.js.map +1 -0
- package/dist/pine-core/{p-CLNi-hRD.system.js.map → p-EqAbQY8l.system.js.map} +1 -1
- package/dist/pine-core/p-Ke8SGZqs.system.js.map +1 -0
- package/dist/pine-core/{p-D-4Xbxlj.system.js.map → p-Mqxw-gWj.system.js.map} +1 -1
- package/dist/pine-core/{p-D5vuiRx2.system.js.map → p-PPIMiuZX.system.js.map} +1 -1
- package/dist/pine-core/{p-CnPERKGo.system.js.map → p-UhZHDNH2.system.js.map} +1 -1
- package/dist/pine-core/{p-d2ccda59.system.entry.js → p-a556a328.system.entry.js} +2 -2
- package/dist/pine-core/{p-6a2296e6.system.entry.js → p-a98cda38.system.entry.js} +2 -2
- package/dist/pine-core/{p-3f82ac77.system.entry.js → p-ab7e4700.system.entry.js} +2 -2
- package/dist/pine-core/{p-3798a631.system.entry.js → p-aeaae417.system.entry.js} +2 -2
- package/dist/pine-core/{p-b7ba6316.entry.js → p-b2820acd.entry.js} +2 -2
- package/dist/pine-core/{p-2296c34f.entry.js → p-bf699bad.entry.js} +2 -2
- package/dist/pine-core/{p-7b38e384.system.entry.js → p-c1909a5d.system.entry.js} +2 -2
- package/dist/pine-core/{p-984578f8.system.entry.js → p-c551191a.system.entry.js} +2 -2
- package/dist/pine-core/{p-1bd715ee.system.entry.js → p-c5e1ed09.system.entry.js} +2 -2
- package/dist/pine-core/p-c5e1ed09.system.entry.js.map +1 -0
- package/dist/pine-core/{p-596e0292.system.entry.js → p-cc21ddcc.system.entry.js} +2 -2
- package/dist/pine-core/{p-b2796d3c.system.entry.js → p-d0adaca0.system.entry.js} +2 -2
- package/dist/pine-core/{p-722012ac.entry.js → p-d28768d1.entry.js} +2 -2
- package/dist/pine-core/{p-24607f93.entry.js → p-d35b3494.entry.js} +2 -2
- package/dist/pine-core/{p-730221a8.system.entry.js → p-d553e05c.system.entry.js} +2 -2
- package/dist/pine-core/{p-04df41d7.system.entry.js → p-d6d453d8.system.entry.js} +2 -2
- package/dist/pine-core/p-dcda4ff5.system.entry.js +2 -0
- package/dist/pine-core/{p-1224c874.entry.js → p-ddcc4932.entry.js} +2 -2
- package/dist/pine-core/{p-c1b0f921.system.entry.js → p-de550d9e.system.entry.js} +2 -2
- package/dist/pine-core/p-dfd5a5b6.system.entry.js +2 -0
- package/dist/pine-core/p-dfd5a5b6.system.entry.js.map +1 -0
- package/dist/pine-core/p-e562ad73.system.entry.js +2 -0
- package/dist/pine-core/p-e562ad73.system.entry.js.map +1 -0
- package/dist/pine-core/p-e9f004c5.entry.js +2 -0
- package/dist/pine-core/p-e9f004c5.entry.js.map +1 -0
- package/dist/pine-core/{p-71265b2a.system.entry.js → p-f46c4618.system.entry.js} +2 -2
- package/dist/pine-core/{p-761946a0.entry.js → p-f6b226df.entry.js} +2 -2
- package/dist/pine-core/{p-bcc4edaa.entry.js → p-f99c59a8.entry.js} +2 -2
- package/dist/pine-core/{p-b3d05184.entry.js → p-fb1eb0c4.entry.js} +2 -2
- package/dist/pine-core/{p-367e188f.entry.js → p-fb2fb435.entry.js} +2 -2
- package/dist/pine-core/p-fd1ef1e1.entry.js +2 -0
- package/dist/pine-core/{p-85ff1482.entry.js → p-fdf3a5ff.entry.js} +2 -2
- package/dist/pine-core/p-fed5f55e.system.entry.js +2 -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-input.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-select.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-tooltip.entry.esm.js.map +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-chip/pds-chip.d.ts +9 -1
- package/dist/types/components/pds-input/pds-input.d.ts +57 -9
- package/dist/types/components/pds-select/pds-select.d.ts +4 -0
- package/dist/types/components/pds-tooltip/pds-tooltip.d.ts +3 -0
- package/dist/types/components.d.ts +70 -6
- package/hydrate/index.js +187 -73
- package/hydrate/index.mjs +187 -73
- package/package.json +2 -2
- package/dist/cjs/index-CG2Rr2io.js.map +0 -1
- package/dist/esm/index-_4gljHh-.js.map +0 -1
- package/dist/esm-es5/index-_4gljHh-.js.map +0 -1
- package/dist/pine-core/p-0069abf8.system.entry.js +0 -2
- package/dist/pine-core/p-0069abf8.system.entry.js.map +0 -1
- package/dist/pine-core/p-1bd715ee.system.entry.js.map +0 -1
- package/dist/pine-core/p-1eec6bea.system.entry.js +0 -2
- package/dist/pine-core/p-1eec6bea.system.entry.js.map +0 -1
- package/dist/pine-core/p-21c3aaeb.entry.js +0 -2
- package/dist/pine-core/p-29ad0b86.entry.js +0 -2
- package/dist/pine-core/p-29ad0b86.entry.js.map +0 -1
- package/dist/pine-core/p-32bd3e33.entry.js +0 -2
- package/dist/pine-core/p-32bd3e33.entry.js.map +0 -1
- package/dist/pine-core/p-49265849.system.entry.js +0 -2
- package/dist/pine-core/p-71f01676.system.entry.js +0 -2
- package/dist/pine-core/p-742d4490.entry.js +0 -2
- package/dist/pine-core/p-742d4490.entry.js.map +0 -1
- package/dist/pine-core/p-7e92ec48.system.entry.js +0 -2
- package/dist/pine-core/p-7e92ec48.system.entry.js.map +0 -1
- package/dist/pine-core/p-7ff213bb.system.entry.js +0 -2
- package/dist/pine-core/p-8023086c.entry.js +0 -2
- package/dist/pine-core/p-8023086c.entry.js.map +0 -1
- package/dist/pine-core/p-929bb7ab.system.entry.js +0 -2
- package/dist/pine-core/p-B4W0_y2p.system.js.map +0 -1
- package/dist/pine-core/p-BO1OsmVU.system.js.map +0 -1
- package/dist/pine-core/p-CtAVdPaE.system.js.map +0 -1
- package/dist/pine-core/p-D8DRYw9w.system.js.map +0 -1
- package/dist/pine-core/p-DyQ_s5MV.system.js.map +0 -1
- package/dist/pine-core/p-_4gljHh-.js.map +0 -1
- package/dist/pine-core/p-abec6606.entry.js +0 -2
- package/dist/pine-core/p-abec6606.entry.js.map +0 -1
- package/dist/pine-core/p-b9c13f99.entry.js +0 -2
- package/dist/pine-core/p-d1b222f5.entry.js +0 -2
- package/dist/pine-core/p-e09a3682.system.entry.js +0 -2
- package/dist/pine-core/p-e09a3682.system.entry.js.map +0 -1
- package/dist/pine-core/p-e6d6e103.entry.js +0 -2
- package/dist/pine-core/p-xgOOHGQo.system.js.map +0 -1
- /package/dist/pine-core/{p-833f08f3.entry.js.map → p-04195bdb.entry.js.map} +0 -0
- /package/dist/pine-core/{p-4288c861.entry.js.map → p-07f45626.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0572825b.entry.js.map → p-0a11384e.entry.js.map} +0 -0
- /package/dist/pine-core/{p-28e28f42.system.entry.js.map → p-0a87e2fc.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-71f01676.system.entry.js.map → p-0c30661b.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-146fcd44.entry.js.map → p-10e2feff.entry.js.map} +0 -0
- /package/dist/pine-core/{p-bd04212c.system.entry.js.map → p-13481ef5.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c4294be2.entry.js.map → p-19c01019.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f2c807ac.entry.js.map → p-1d395d27.entry.js.map} +0 -0
- /package/dist/pine-core/{p-4ff0838c.entry.js.map → p-2007a0b5.entry.js.map} +0 -0
- /package/dist/pine-core/{p-78cb1c40.system.entry.js.map → p-27c0ffda.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-21c3aaeb.entry.js.map → p-35917a1a.entry.js.map} +0 -0
- /package/dist/pine-core/{p-1b109c01.entry.js.map → p-3ea415b0.entry.js.map} +0 -0
- /package/dist/pine-core/{p-48e76945.system.entry.js.map → p-4b2aab79.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-77c3a10d.entry.js.map → p-51cc93b3.entry.js.map} +0 -0
- /package/dist/pine-core/{p-83252078.system.entry.js.map → p-5367f477.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a2572675.system.entry.js.map → p-593df966.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-d6ac2862.system.entry.js.map → p-5a437fcd.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c0f74199.entry.js.map → p-60fbeb1c.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e6d6e103.entry.js.map → p-65a875f6.entry.js.map} +0 -0
- /package/dist/pine-core/{p-30142a25.system.entry.js.map → p-6a7936e7.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-86d388a2.entry.js.map → p-76f7cf21.entry.js.map} +0 -0
- /package/dist/pine-core/{p-121e03ad.system.entry.js.map → p-78327c08.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e2dc81c0.entry.js.map → p-78f29270.entry.js.map} +0 -0
- /package/dist/pine-core/{p-83c632f6.system.entry.js.map → p-79cb7835.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e9d972db.system.entry.js.map → p-7bb3a5d4.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-17d3fa8b.entry.js.map → p-80f36506.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f47133fd.entry.js.map → p-8180b641.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a394645a.system.entry.js.map → p-833b2170.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-83ffc1cc.entry.js.map → p-86329612.entry.js.map} +0 -0
- /package/dist/pine-core/{p-cd2cd116.entry.js.map → p-8f06b020.entry.js.map} +0 -0
- /package/dist/pine-core/{p-78fb945e.system.entry.js.map → p-959c8247.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-f9e01886.system.entry.js.map → p-96e9774e.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-929bb7ab.system.entry.js.map → p-9c01e81b.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-d2ccda59.system.entry.js.map → p-a556a328.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-6a2296e6.system.entry.js.map → p-a98cda38.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-3f82ac77.system.entry.js.map → p-ab7e4700.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-3798a631.system.entry.js.map → p-aeaae417.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b7ba6316.entry.js.map → p-b2820acd.entry.js.map} +0 -0
- /package/dist/pine-core/{p-2296c34f.entry.js.map → p-bf699bad.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7b38e384.system.entry.js.map → p-c1909a5d.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-984578f8.system.entry.js.map → p-c551191a.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-596e0292.system.entry.js.map → p-cc21ddcc.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b2796d3c.system.entry.js.map → p-d0adaca0.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-722012ac.entry.js.map → p-d28768d1.entry.js.map} +0 -0
- /package/dist/pine-core/{p-24607f93.entry.js.map → p-d35b3494.entry.js.map} +0 -0
- /package/dist/pine-core/{p-730221a8.system.entry.js.map → p-d553e05c.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-04df41d7.system.entry.js.map → p-d6d453d8.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-49265849.system.entry.js.map → p-dcda4ff5.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-1224c874.entry.js.map → p-ddcc4932.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c1b0f921.system.entry.js.map → p-de550d9e.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-71265b2a.system.entry.js.map → p-f46c4618.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-761946a0.entry.js.map → p-f6b226df.entry.js.map} +0 -0
- /package/dist/pine-core/{p-bcc4edaa.entry.js.map → p-f99c59a8.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b3d05184.entry.js.map → p-fb1eb0c4.entry.js.map} +0 -0
- /package/dist/pine-core/{p-367e188f.entry.js.map → p-fb2fb435.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b9c13f99.entry.js.map → p-fd1ef1e1.entry.js.map} +0 -0
- /package/dist/pine-core/{p-85ff1482.entry.js.map → p-fdf3a5ff.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7ff213bb.system.entry.js.map → p-fed5f55e.system.entry.js.map} +0 -0
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(e,i,t,r){function n(e){return e instanceof t?e:new t((function(i){i(e)}))}return new(t||(t=Promise))((function(t,o){function a(e){try{l(r.next(e))}catch(e){o(e)}}function s(e){try{l(r["throw"](e))}catch(e){o(e)}}function l(e){e.done?t(e.value):n(e.value).then(a,s)}l((r=r.apply(e,i||[])).next())}))};var __generator=this&&this.__generator||function(e,i){var t={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,n,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(i){return l([e,i])}}function l(s){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(t=0)),t)try{if(r=1,n&&(o=s[0]&2?n["return"]:s[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;if(n=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:t.label++;return{value:s[1],done:false};case 5:t.label++;n=s[1];s=[0];continue;case 7:s=t.ops.pop();t.trys.pop();continue;default:if(!(o=t.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){t=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){t.label=s[1];break}if(s[0]===6&&t.label<o[1]){t.label=o[1];o=s;break}if(o&&t.label<o[2]){t.label=o[2];t.ops.push(s);break}if(o[2])t.ops.pop();t.trys.pop();continue}s=i.call(e,t)}catch(e){s=[6,e];n=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-C_8VmA8d.system.js","./p-BG7_qxVr.system.js","./p-B4W0_y2p.system.js","./p-BhPuKJbQ.system.js","./p-BhQhw0S3.system.js"],(function(e){"use strict";var i,t,r,n,o,a,s,l,d,c;return{setters:[function(e){i=e.r;t=e.c;r=e.h;n=e.H;o=e.g},function(e){a=e.a;s=e.m},function(e){l=e.f},function(e){d=e.d},function(e){c=e.i}],execute:function(){var u=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";var p=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var h=":host{display:inline}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__field{background:var(--pine-color-background-container);border:1px solid var(--pine-color-border);border-radius:var(--pine-dimension-125);color:var(--pine-color-text-active);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);}.pds-input__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-input__field:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed;}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:hover{border-color:var(--pine-color-border-hover)}.pds-input__field:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-input__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-input__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-input__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-input__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-input__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-input__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-input__error-message,.pds-input__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}";var f=e("pds_input",function(){function e(e){var r=this;i(this,e);this.pdsBlur=t(this,"pdsBlur");this.pdsChange=t(this,"pdsChange");this.pdsFocus=t(this,"pdsFocus");this.pdsInput=t(this,"pdsInput");this.inheritedAttributes={};this.isComposing=false;this.type="text";this.value="";this.hasFocus=false;this.onInputEvent=function(e){var i=e.target;if(i){r.value=i.value||""}r.emitInputChange(e)};this.onChangeEvent=function(e){r.emitValueChange(e)};this.onBlurEvent=function(e){r.hasFocus=false;if(r.focusedValue!==r.value){r.emitValueChange(e)}r.pdsBlur.emit(e)};this.onFocusEvent=function(e){r.hasFocus=true;r.focusedValue=r.value;r.pdsFocus.emit(e)};this.onCompositionStart=function(){r.isComposing=true};this.onCompositionEnd=function(){r.isComposing=false}}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};e.prototype.debounceChanged=function(){var e=this,i=e.pdsInput,t=e.debounce,r=e.originalPdsInput;this.pdsInput=t===undefined?r!==null&&r!==void 0?r:i:d(i,t)};e.prototype.valueChanged=function(){var e=this.nativeInput;var i=this.getValue();if(e&&e.value!==i&&!this.isComposing){e.value=i}};e.prototype.getValue=function(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()};e.prototype.emitValueChange=function(e){var i=this.value;var t=i==null?i:i.toString();this.focusedValue=t;this.pdsChange.emit({value:t,event:e})};e.prototype.emitInputChange=function(e){var i=this.value;var t=i==null?i:i.toString();this.pdsInput.emit({value:t,event:e})};e.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign({},c(this.el))};e.prototype.componentDidLoad=function(){this.debounceChanged()};e.prototype.inputClassNames=function(){var e=["pds-input__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join(" ")};e.prototype.render=function(){var e=this;return r(n,{key:"a2a05a1e0d3e7722c1dc3dea957facaf5ef24c3c","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null},r("div",{key:"d95ad9600e7d80050bf41503a2eb9ccb91f77893",class:"pds-input"},this.label&&r("label",{key:"b5772c8283fe3c8899235c432bbabd36012c2aef",class:"pds-input__label",htmlFor:this.componentId},this.label),r("input",Object.assign({key:"65a2ff8c31ebf545caf755609fa2f3e95cdd1098",class:this.inputClassNames(),ref:function(i){return e.nativeInput=i},"aria-describedby":a(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,autocomplete:this.autocomplete,disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,type:this.type,value:this.value,onInput:this.onInputEvent,onChange:this.onChangeEvent,onBlur:this.onBlurEvent,onFocus:this.onFocusEvent,onCompositionstart:this.onCompositionStart,onCompositionend:this.onCompositionEnd},this.inheritedAttributes)),this.helperMessage&&r("p",{key:"a7a30bc28a0e9aa16ebd842b8b3851569f556591",class:"pds-input__helper-message",id:s(this.componentId,"helper")},this.helperMessage),this.errorMessage&&r("p",{key:"3ffc19523e9378534e665ba52247935e924d4168",class:"pds-input__error-message",id:s(this.componentId,"error"),"aria-live":"assertive"},r("pds-icon",{key:"6961e5735ffe279414ea5333224baa72561697d5",icon:l,size:"small"}),this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{debounce:["debounceChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return e}());f.style=u+(p+h)}}}));
|
|
2
|
-
//# sourceMappingURL=p-0069abf8.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsInputTokensCss","labelCss","pdsInputCss","PdsInput","exports","class_1","hostRef","_this","this","inheritedAttributes","isComposing","type","value","hasFocus","onInputEvent","ev","input","target","emitInputChange","onChangeEvent","emitValueChange","onBlurEvent","focusedValue","pdsBlur","emit","onFocusEvent","pdsFocus","onCompositionStart","onCompositionEnd","prototype","setFocus","nativeInput","focus","debounceChanged","_a","pdsInput","debounce","originalPdsInput","undefined","debounceEvent","valueChanged","getValue","toString","event","newValue","pdsChange","componentWillLoad","Object","assign","inheritAriaAttributes","el","componentDidLoad","inputClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","readonly","class","label","htmlFor","componentId","ref","assignDescription","helperMessage","autocomplete","id","name","placeholder","readOnly","required","onInput","onChange","onBlur","onFocus","onCompositionstart","onCompositionend","messageId","errorMessage","icon","danger","size"],"sources":["src/components/pds-input/pds-input.tokens.scss?tag=pds-input&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":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 display: inline;\n}\n\n:host([aria-readonly=\"true\"]) {\n input {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n}\n\n.pds-input {\n display: flex;\n flex-direction: column;\n}\n\n.pds-input__label {\n margin-block-end: var(--pine-dimension-2xs)\n}\n\n.pds-input__field {\n background: var(--pine-color-background-container);\n border: 1px solid var(--pine-color-border);\n border-radius: var(--pine-dimension-125);\n color: var(--pine-color-text-active);\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n &:hover:not(:disabled, .is-invalid) {\n border: var(--pine-border-hover);\n }\n\n &:disabled {\n background-color: 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 /* stylelint-disable */\n &::-webkit-input-placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n\n &::-moz-placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n\n &::-moz-placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n\n &:-ms-input-placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n /* stylelint-enable */\n }\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--pine-color-border-active);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n /* stylelint-disable */\n &::-webkit-input-placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &::-moz-placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &::-moz-placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &:-ms-input-placeholder {\n color: var(--pine-color-text-placeholder);\n }\n /* stylelint-enable */\n\n &.is-invalid {\n background-color: var(--pine-input-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n font: var(--pine-typography-body-sm-medium);\n margin-block-end: 0;\n margin-block-start: var(--pine-dimension-2xs)\n}\n\n.pds-input__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { debounceEvent } from '@utils/utils';\nimport { inheritAriaAttributes } from '@utils/attributes';\n\nimport type { Attributes } from '@utils/attributes';\nimport type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\n\n@Component({\n tag: 'pds-input',\n styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n shadow: true,\n})\nexport class PdsInput {\n private nativeInput?: HTMLInputElement;\n private inheritedAttributes: Attributes = {};\n private isComposing = false;\n /**\n * The value of the input when the input is focused.\n */\n private focusedValue?: string | number | null;\n\n private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n\n @Element() el!: HTMLPdsInputElement;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /**\n *\n * Emitted when the value has changed.\n *\n * This event will not emit when programmatically setting the `value` property.\n */\n @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when a keyboard input occurs.\n */\n @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n /**\n * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n * `input.focus()`.\n */\n @Method()\n async setFocus() {\n if ( this.nativeInput ) {\n this.nativeInput.focus();\n }\n }\n\n /**\n * Specifies if and how the browser provides `autocomplete` assistance for the field.\n */\n @Prop() autocomplete: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets the number of milliseconds to wait before updating the value.\n */\n @Prop() debounce?: number;\n\n /**\n * Determines whether or not the input field is disabled.\n */\n @Prop() disabled?: boolean;\n\n /**\n * Specifies the error message and provides an error-themed treatment to the field.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a message or hint below the input field.\n */\n @Prop() helperMessage?: string;\n\n /**\n * Determines whether or not the input field is invalid or throws an error.\n */\n @Prop() invalid?: boolean;\n\n /**\n * Text to be displayed as the input label.\n */\n @Prop() label?: string;\n\n /**\n * Specifies the name. Submitted with the form name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * Specifies a short hint that describes the expected value of the input field.\n */\n @Prop() placeholder?: string;\n\n /**\n * Determines whether or not the input field is readonly.\n */\n @Prop() readonly?: boolean;\n\n /**\n * Determines whether or not the input field is required.\n */\n @Prop() required?: boolean;\n\n /**\n * Determines the type of control that will be displayed\n * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`\n * @defaultValue \"text\"\n */\n @Prop() type = 'text';\n\n /**\n * The value of the input.\n */\n @Prop({mutable: true}) value?: string | number | null = '';\n\n /**\n * Determines if the input has focus.\n */\n @State() hasFocus = false;\n\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n /**\n * If debounce is undefined, we have to manually revert the pdsInput emitter in case\n * debounce used to be set to a number. Otherwise, the event would stay debounced.\n */\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n\n if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n nativeInput.value = value;\n }\n }\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n private onInputEvent = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.emitInputChange(ev);\n };\n\n private onChangeEvent = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onBlurEvent = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n /**\n * Emits the `pdsChange` event when the input value\n * is different than the value when the input was focused.\n */\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocusEvent = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onCompositionStart = () => {\n this.isComposing = true;\n }\n\n private onCompositionEnd = () => {\n this.isComposing = false;\n }\n\n /**\n * Emits a pdsChange event\n */\n private emitValueChange(event?: Event) {\n const { value } = this;\n const newValue = value == null ? value : value.toString();\n\n this.focusedValue = newValue;\n this.pdsChange.emit({ value: newValue, event });\n }\n\n /**\n *\n * Emits a `pdsInput` event\n */\n private emitInputChange(event?: Event) {\n const { value } = this;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n\n this.pdsInput.emit({ value: newValue, event });\n }\n\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n componentDidLoad() {\n this.debounceChanged();\n }\n\n private inputClassNames() {\n const classNames = ['pds-input__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n >\n <div class=\"pds-input\">\n {this.label &&\n <label class=\"pds-input__label\" htmlFor={this.componentId}>{this.label}</label>\n }\n <input\n class={this.inputClassNames()}\n ref={(input) => this.nativeInput = input}\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n autocomplete={this.autocomplete}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInputEvent}\n onChange={this.onChangeEvent}\n onBlur={this.onBlurEvent}\n onFocus={this.onFocusEvent}\n onCompositionstart={this.onCompositionStart}\n onCompositionend={this.onCompositionEnd}\n {...this.inheritedAttributes}\n />\n {this.helperMessage &&\n <p\n class=\"pds-input__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.errorMessage &&\n <p\n class=\"pds-input__error-message\"\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["positionTooltip","_b","elem","elemPlacement","overlay","_c","offset","trim","rect","getBoundingClientRect","contentRect","style","top","left","right","bottom","transform","position","isTextTrigger","childNodes","length","nodeType","Node","TEXT_NODE","ELEMENT_NODE","child","tagName","includes","concat","height","width","pdsTooltipCss","PdsTooltip","exports","class_1","hostRef","_this","this","_isInteractiveOpen","portalEl","triggerEl","contentDiv","slotMutationObserver","overlayResizeObserver","isOpen","hasArrow","htmlContent","placement","maxWidth","opened","handleHide","hideTooltip","handleShow","showTooltip","handlePageShow","handleScroll","repositionPortal","handleSpaNavigation","prototype","handleOpenToggle","newValue","oldValue","componentWillLoad","componentDidLoad","window","addEventListener","el","querySelector","contentSlotWrapper","MutationObserver","removePortal","createPortal","observe","childList","subtree","removeEventListener","disconnect","componentDidRender","determinePositioningAnchor","positioningAnchor","children","i","childNode","anchor","placementParts","split","primaryPlacement","isCardinalCenterPlacement","anchorRect","overlayRect","currentOverlayTop","parseFloat","anchorCenterY","overlayCenterY","adjustmentY","Math","abs","currentOverlayLeft","anchorCenterX","overlayCenterX","adjustmentX","document","createElement","className","zIndex","id","componentId","instanceCounter","getAttribute","setAttribute","slottedContentContainer","hasSlottedContent","childrenToClone","Array","from","hasMeaningfulNode","some","node","_a","textContent","forEach","appendChild","cloneNode","content","body","ResizeObserver","unobserve","removeChild","removeAttribute","render","hostId","undefined","h","Host","key","class","onMouseEnter","onMouseLeave","onFocus","onBlur","ref","display","name"],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n elem: HTMLElement | null;\n elemPlacement: string;\n overlay: HTMLElement | null;\n offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs): boolean => {\n if (elem === null || overlay === null) return false;\n if (typeof elemPlacement !== 'string' || elemPlacement.trim() === '') {\n return false;\n }\n\n const rect = elem.getBoundingClientRect();\n const contentRect = overlay.getBoundingClientRect();\n\n // Reset styles\n overlay.style.top = '';\n overlay.style.left = '';\n overlay.style.right = '';\n overlay.style.bottom = '';\n overlay.style.transform = '';\n\n // Use fixed positioning for portal overlays\n overlay.style.position = 'fixed';\n\n // Detect if the trigger is a span with only text or a text node\n let isTextTrigger = false;\n if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.TEXT_NODE) {\n isTextTrigger = true;\n } else if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.ELEMENT_NODE) {\n const child = elem.childNodes[0] as HTMLElement;\n if (child.tagName === 'SPAN' && child.childNodes.length === 1 && child.childNodes[0].nodeType === Node.TEXT_NODE) {\n isTextTrigger = true;\n }\n }\n\n switch (true) {\n case elemPlacement.includes('right'):\n if (isTextTrigger) {\n // Align to the bottom of the trigger for text triggers\n overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;\n } else {\n overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;\n }\n overlay.style.left = `${rect.right + offset}px`;\n if (elemPlacement.includes('start')) {\n overlay.style.top = `${rect.top}px`;\n }\n if (elemPlacement.includes('end')) {\n overlay.style.top = `${rect.bottom - contentRect.height}px`;\n }\n break;\n case elemPlacement.includes('left'):\n if (isTextTrigger) {\n overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;\n } else {\n overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;\n }\n overlay.style.left = `${rect.left - contentRect.width - offset}px`;\n if (elemPlacement.includes('start')) {\n overlay.style.top = `${rect.top}px`;\n }\n if (elemPlacement.includes('end')) {\n overlay.style.top = `${rect.bottom - contentRect.height}px`;\n }\n break;\n case elemPlacement.includes('bottom'):\n overlay.style.top = `${rect.bottom + offset}px`;\n overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;\n if (elemPlacement.includes('start')) {\n overlay.style.left = `${rect.left}px`;\n }\n if (elemPlacement.includes('end')) {\n overlay.style.left = `${rect.right - contentRect.width}px`;\n overlay.style.right = 'initial';\n }\n break;\n case elemPlacement.includes('top'):\n overlay.style.top = `${rect.top - contentRect.height - offset}px`;\n overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;\n if (elemPlacement.includes('start')) {\n overlay.style.left = `${rect.left}px`;\n }\n if (elemPlacement.includes('end')) {\n overlay.style.left = `${rect.right - contentRect.width}px`;\n overlay.style.right = 'initial';\n }\n break;\n }\n return true;\n}\n",".pds-tooltip {\n --tooltip-border-width-arrow-down: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;\n --tooltip-border-width-arrow-left: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;\n --tooltip-border-width-arrow-right: var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);\n --tooltip-border-width-arrow-up: 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);\n --tooltip-sizing-arrow: 6px;\n --tooltip-sizing-arrow-offset: 14px;\n --tooltip-dimension-max-width: 320px;\n}\n\n.pds-tooltip__content {\n background-color: var(--pine-color-primary);\n border-radius: calc(var(--pine-dimension-xs) * 1.25);\n box-shadow: var(--pine-box-shadow);\n color: var(--pine-color-text-primary);\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n max-width: var(--tooltip-dimension-max-width);\n opacity: 0;\n padding: var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);\n position: absolute;\n visibility: hidden;\n width: max-content;\n\n .pds-tooltip--is-open & {\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n opacity: 1;\n visibility: visible;\n z-index: 1;\n }\n\n .pds-tooltip.pds-tooltip--has-html-content & {\n width: auto;\n }\n\n &::after {\n border-color: transparent;\n border-right-color: transparent;\n border-style: solid;\n border-width: var(--tooltip-border-width-arrow-left);\n content: '';\n height: 0;\n position: absolute;\n width: 0;\n\n .pds-tooltip--right & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--right-end & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n bottom: var(--tooltip-sizing-arrow-offset);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: initial;\n }\n\n .pds-tooltip--right-start & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: var(--tooltip-sizing-arrow-offset);\n }\n\n .pds-tooltip--top & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: 50%;\n top: initial;\n transform: translateX(-50%);\n }\n\n .pds-tooltip--top-start & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: var(--tooltip-sizing-arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--top-end & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: initial;\n right: var(--tooltip-sizing-arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--left & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--left-end & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n bottom: var(--tooltip-sizing-arrow-offset);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: initial;\n }\n\n .pds-tooltip--left-start & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: var(--tooltip-sizing-arrow-offset);\n }\n\n .pds-tooltip--bottom & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: 50%;\n top: calc(var(--tooltip-sizing-arrow) * -1);\n transform: translateX(-50%);\n }\n\n .pds-tooltip--bottom-end & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: initial;\n right: var(--tooltip-sizing-arrow-offset);\n top: calc(var(--tooltip-sizing-arrow) * -1);\n }\n\n .pds-tooltip--bottom-start & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: var(--tooltip-sizing-arrow-offset);\n top: calc(var(--tooltip-sizing-arrow) * -1);\n }\n\n .pds-tooltip--no-arrow & {\n border-width: 0;\n }\n }\n}\n","import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core';\nimport { positionTooltip } from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n tag: 'pds-tooltip',\n styleUrls: ['pds-tooltip.scss'],\n shadow: false,\n})\n\nexport class PdsTooltip {\n private static instanceCounter = 0;\n\n /**\n * Internal state: true if the tooltip was opened by user interaction (hover/focus),\n * false if opened via the `opened` prop or currently closed.\n */\n @State() private _isInteractiveOpen = false;\n\n private portalEl: HTMLElement | null = null;\n private triggerEl: HTMLElement | null = null;\n private contentDiv: HTMLElement | null = null;\n private slotMutationObserver: MutationObserver | null = null;\n private overlayResizeObserver: ResizeObserver | null = null;\n\n /**\n * Reference to the Host element\n */\n @Element() el: HTMLPdsTooltipElement;\n\n /**\n * Determines when the tooltip is open\n * @defaultValue false\n */\n @State() isOpen = false;\n\n /**\n * Content for the tooltip. If HTML is required, use the content slot\n */\n @Prop() content: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether or not the tooltip has an arrow\n * @defaultValue true\n */\n @Prop() hasArrow? = true;\n\n /**\n * Enable this option when using the content slot\n * @defaultValue false\n */\n @Prop() htmlContent = false;\n\n /**\n * Determines the preferred position of the tooltip\n * @defaultValue \"right\"\n */\n @Prop({ reflect: true }) placement:\n 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'right';\n\n /**\n * Sets the maximum width of the tooltip content\n * @defaultValue \"352px\"\n */\n @Prop() maxWidth: string = '352px';\n\n /**\n * Determines whether or not the tooltip is visible\n * @defaultValue false\n */\n @Prop({mutable: true, reflect: true}) opened = false;\n\n @Watch('opened')\n\n handleOpenToggle(newValue: boolean, oldValue: boolean) {\n if (newValue === false && oldValue === true) {\n this._isInteractiveOpen = false;\n }\n }\n\n componentWillLoad() {\n this._isInteractiveOpen = false;\n }\n\n componentDidLoad() {\n window.addEventListener('pageshow', this.handlePageShow);\n this.triggerEl = this.el.querySelector('.pds-tooltip__trigger') as HTMLElement;\n const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');\n\n if (contentSlotWrapper !== null) {\n this.slotMutationObserver = new MutationObserver(() => {\n if (this.opened && this.portalEl !== null) {\n this.removePortal();\n this.createPortal();\n }\n });\n this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });\n }\n\n return () => {\n window.removeEventListener('pageshow', this.handlePageShow);\n\n if (this.slotMutationObserver !== null) {\n this.slotMutationObserver.disconnect();\n }\n };\n }\n\n componentDidRender() {\n if (this.opened && this.portalEl === null) {\n this.createPortal();\n } else if (!this.opened && this.portalEl !== null) {\n this.removePortal();\n }\n }\n\n /**\n * Shows the tooltip by enabling the opened property\n */\n @Method()\n async showTooltip() {\n this.opened = true;\n }\n\n /**\n * Hides the tooltip by disabling the opened property\n */\n @Method()\n async hideTooltip() {\n this.opened = false;\n }\n\n private handleHide = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.hideTooltip();\n this._isInteractiveOpen = false;\n };\n\n private handleShow = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this._isInteractiveOpen = true;\n this.showTooltip();\n };\n\n private handlePageShow = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.opened = false;\n this._isInteractiveOpen = false;\n };\n\n private handleScroll = () => {\n if (this.opened) {\n if (!this._isInteractiveOpen) {\n this.repositionPortal();\n } else {\n this.hideTooltip();\n this._isInteractiveOpen = false;\n }\n }\n };\n\n private handleSpaNavigation = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.hideTooltip();\n this._isInteractiveOpen = false;\n };\n\n /**\n * Determines the most accurate HTML element to use as the anchor for positioning the tooltip.\n * If `htmlContent` is false, it attempts to find the actual element slotted as the trigger.\n * Otherwise, or if no specific element is found, it defaults to the span wrapper around the trigger slot.\n * This helps with precise alignment.\n */\n private determinePositioningAnchor(): HTMLElement | null {\n let positioningAnchor: HTMLElement | null = this.triggerEl;\n\n if (this.triggerEl !== null) {\n const children = this.triggerEl.childNodes;\n\n for (let i = 0; i < children.length; i++) {\n const childNode = children[i];\n\n if (childNode.nodeType === Node.ELEMENT_NODE) {\n positioningAnchor = childNode as HTMLElement;\n break; // Found the first element, use it as the anchor\n }\n }\n }\n\n // If no ELEMENT_NODE is found within this.triggerEl (e.g., if trigger is just text),\n // positioningAnchor will correctly remain this.triggerEl (the span).\n return positioningAnchor;\n }\n\n /**\n * Centralized method to calculate and apply the tooltip's position.\n * Uses the determined anchor element and the current content dimensions.\n */\n private repositionPortal() {\n const anchor = this.determinePositioningAnchor();\n\n if (anchor !== null && this.contentDiv !== null) {\n positionTooltip({ elem: anchor, elemPlacement: this.placement, overlay: this.contentDiv });\n const placementParts = this.placement.split('-');\n const primaryPlacement = placementParts[0];\n const isCardinalCenterPlacement = placementParts.length === 1;\n\n if (isCardinalCenterPlacement) {\n const anchorRect = anchor.getBoundingClientRect();\n const overlayRect = this.contentDiv.getBoundingClientRect();\n\n if (primaryPlacement === 'left' || primaryPlacement === 'right') {\n const currentOverlayTop = parseFloat(this.contentDiv.style.top || '0');\n const anchorCenterY = anchorRect.top + (anchorRect.height / 2);\n const overlayCenterY = overlayRect.top + (overlayRect.height / 2);\n const adjustmentY = anchorCenterY - overlayCenterY;\n\n if (Math.abs(adjustmentY) > 0.5) {\n this.contentDiv.style.top = `${currentOverlayTop + adjustmentY}px`;\n }\n\n } else if (primaryPlacement === 'top' || primaryPlacement === 'bottom') {\n const currentOverlayLeft = parseFloat(this.contentDiv.style.left || '0');\n const anchorCenterX = anchorRect.left + (anchorRect.width / 2);\n const overlayCenterX = overlayRect.left + (overlayRect.width / 2);\n const adjustmentX = anchorCenterX - overlayCenterX;\n\n if (Math.abs(adjustmentX) > 0.5) {\n this.contentDiv.style.left = `${currentOverlayLeft + adjustmentX}px`;\n }\n }\n }\n }\n }\n\n private createPortal() {\n if (this.portalEl !== null) return;\n\n this.portalEl = document.createElement('div');\n this.portalEl.className = `pds-tooltip pds-tooltip--${this.placement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;\n this.portalEl.style.position = 'fixed';\n this.portalEl.style.zIndex = '9999';\n\n if (this.portalEl.id === '') {\n this.portalEl.id = this.componentId || this.el.id || `pds-tooltip-portal-${PdsTooltip.instanceCounter++}`;\n }\n\n if (this.portalEl.getAttribute('id') !== this.portalEl.id) {\n this.portalEl.setAttribute('id', this.portalEl.id);\n }\n\n this.portalEl.setAttribute('role', 'tooltip');\n this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n this.portalEl.style.maxWidth = this.maxWidth;\n\n this.contentDiv = document.createElement('div');\n this.contentDiv.className = 'pds-tooltip__content';\n this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n this.contentDiv.setAttribute('role', 'tooltip');\n this.contentDiv.style.maxWidth = this.maxWidth;\n\n const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');\n const slottedContentContainer = contentSlotWrapper?.querySelector('[slot=\"content\"]') as HTMLElement | null;\n let hasSlottedContent = false;\n\n if (slottedContentContainer !== null) {\n const childrenToClone = Array.from(slottedContentContainer.childNodes);\n\n if (childrenToClone.length > 0) {\n const hasMeaningfulNode = childrenToClone.some(node =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n );\n\n if (hasMeaningfulNode) {\n hasSlottedContent = true;\n childrenToClone.forEach((node /*, index*/) => {\n if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')) {\n this.contentDiv.appendChild(node.cloneNode(true));\n }\n });\n }\n }\n }\n\n if (!hasSlottedContent) {\n if (this.content !== '') {\n this.contentDiv.textContent = this.content;\n }\n }\n\n this.portalEl.appendChild(this.contentDiv);\n document.body.appendChild(this.portalEl);\n\n this.repositionPortal();\n\n if (this.contentDiv !== null) {\n this.overlayResizeObserver = new ResizeObserver(() => {\n this.repositionPortal();\n });\n this.overlayResizeObserver.observe(this.contentDiv);\n }\n\n // Add global listeners when portal is created\n window.addEventListener('scroll', this.handleScroll, true);\n window.addEventListener('popstate', this.handleSpaNavigation, true);\n window.addEventListener('hashchange', this.handleSpaNavigation, true);\n\n // Add ARIA attribute to trigger, now that portalEl and its ID are confirmed\n if (this.triggerEl !== null && this.portalEl.id !== '') {\n this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);\n }\n }\n\n private removePortal() {\n if (this.overlayResizeObserver !== null && this.contentDiv !== null) {\n this.overlayResizeObserver.unobserve(this.contentDiv);\n this.overlayResizeObserver = null;\n }\n\n if (this.portalEl !== null) {\n window.removeEventListener('scroll', this.handleScroll, true);\n window.removeEventListener('popstate', this.handleSpaNavigation, true);\n window.removeEventListener('hashchange', this.handleSpaNavigation, true);\n document.body.removeChild(this.portalEl);\n this.portalEl = null;\n }\n\n // Remove ARIA attribute from trigger\n if (this.triggerEl !== null) {\n this.triggerEl.removeAttribute('aria-describedby');\n }\n this.contentDiv = null;\n }\n\n render() {\n const hostId = this.componentId || undefined;\n\n return (\n <Host id={hostId} class={{ 'pds-tooltip--is-open': this.opened }}>\n <span\n class=\"pds-tooltip__trigger\"\n onMouseEnter={this.handleShow}\n onMouseLeave={this.handleHide}\n onFocus={this.handleShow}\n onBlur={this.handleHide}\n ref={el => this.triggerEl = el}\n >\n <slot />\n </span>\n <div class=\"pds-tooltip__content-slot-wrapper\" style={{ display: 'none' }}>\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-C_8VmA8d.system.js","./p-BG7_qxVr.system.js","./p-B4W0_y2p.system.js"],(function(e){"use strict";var i,r,n,s,t,o,a;return{setters:[function(e){i=e.r;r=e.c;n=e.h;s=e.H},function(e){t=e.m},function(e){o=e.f;a=e.g}],execute:function(){var l=":host{--pine-select-color-background-danger:var(--pine-color-red-050)}";var c=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var d=':host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}label{grid-area:label;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-select__error-message,.pds-select__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:2.5rem;pointer-events:none;position:relative;z-index:1}';var p=e("pds_select",function(){function e(e){var n=this;i(this,e);this.pdsSelectChange=r(this,"pdsSelectChange");this.disabled=false;this.multiple=false;this.required=false;this.onSelectUpdate=function(e){var i=e.target;var r=Array.from(i.options).filter((function(e){return e.selected})).map((function(e){return e.value}));if(r.length===1&&!n.multiple){n.value=r[0]}else{n.value=r}n.pdsSelectChange.emit(e)};this.handleSlotChange=function(){var e=n.slotContainer.querySelector("slot");n.selectEl.innerHTML="";var i=e.assignedElements({flatten:true});i.forEach((function(e){if(["OPTION","OPTGROUP"].includes(e.tagName)){var i=e.cloneNode(true);if(i.tagName==="OPTION"&&i.value===n.value){i.selected=true}n.selectEl.appendChild(i)}}));n.updateSelectedOption()}}e.prototype.valueChanged=function(){this.updateSelectedOption()};e.prototype.componentWillLoad=function(){this.updateSelectedOption()};e.prototype.updateSelectedOption=function(){var e=this;if(this.selectEl){var i=this.selectEl.options;Array.from(i).map((function(i){if(Array.isArray(e.value)){i.selected=e.value.includes(i.value)}else{i.selected=e.value===i.value}}))}};e.prototype.getHelperMessage=function(){return this.helperMessage&&n("p",{class:"pds-select__helper-message",id:t(this.componentId,"helper")},this.helperMessage)};e.prototype.getErrorMessage=function(){return this.errorMessage&&n("p",{class:"pds-select__error-message",id:t(this.componentId,"error"),"aria-live":"assertive"},n("pds-icon",{icon:o,size:"small"}),this.errorMessage)};e.prototype.renderMessages=function(){if(!this.helperMessage&&!this.errorMessage)return null;return n("div",{class:"pds-select__message"},this.getHelperMessage(),this.getErrorMessage())};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.disabled){e.push("is-disabled")}return e.join(" ")};e.prototype.render=function(){var e=this;return n(s,{key:"2d39b1eac389e27eea511728ef668d4d548d0c09","aria-disabled":this.disabled?"true":null,class:this.classNames()},n("div",{key:"c0c4e64a19b7b11e0d64d94cbc529be7e455b12a",class:"pds-select"},this.label&&n("label",{key:"9eadfcc4e6fd6d42f718eb0ad1542f7c03b67052",htmlFor:this.componentId},this.label),n("select",{key:"eb1d368ed4f765dead79f6101265e922bd06ca94",autocomplete:this.autocomplete||undefined,class:"pds-select__field",disabled:this.disabled,id:this.componentId,multiple:this.multiple,name:this.name,onChange:this.onSelectUpdate,required:this.required,ref:function(i){return e.selectEl=i}}),n("div",{key:"1dcbfe5d51e55af333e80bb99995cef1693f36c1","aria-hidden":"true",class:"hidden",ref:function(i){return e.slotContainer=i}},n("slot",{key:"4d0c76c632e9588dc178c859be5ef1fd474fa191",onSlotchange:this.handleSlotChange})),this.renderMessages(),!this.multiple&&n("pds-icon",{key:"954d31034ed522ba128c9048998e92553592d12f",class:"pds-select__select-icon",icon:a})))};Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return e}());p.style=l+(c+d)}}}));
|
|
2
|
-
//# sourceMappingURL=p-1eec6bea.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsSelectTokensCss","labelCss","pdsSelectCss","PdsSelect","exports","class_1","hostRef","_this","this","disabled","multiple","required","onSelectUpdate","e","target","values","Array","from","options","filter","option","map","length","value","pdsSelectChange","emit","handleSlotChange","slot","slotContainer","querySelector","selectEl","innerHTML","assignedElements","flatten","forEach","item","includes","tagName","clonedItem","cloneNode","selected","appendChild","updateSelectedOption","prototype","valueChanged","componentWillLoad","isArray","getHelperMessage","helperMessage","h","class","id","messageId","componentId","getErrorMessage","errorMessage","icon","danger","size","renderMessages","classNames","invalid","push","join","render","Host","key","label","htmlFor","autocomplete","undefined","name","onChange","ref","el","onSlotchange","enlarge"],"sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.tokens'\n",":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 .hidden,\n :host([hidden]) {\n display: none;\n }\n}\n\n.pds-select {\n display: grid;\n flex-direction: column;\n grid-template-areas:\n 'label label'\n 'field field'\n 'message message';\n grid-template-columns: 1fr minmax(2rem, min-content);\n grid-template-rows: min-content min-content min-content;\n position: relative;\n width: 100%;\n}\n\nlabel {\n grid-area: label;\n margin-block-end: var(--pine-dimension-2xs);\n}\n\nselect {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n font: var(--pine-typography-body);\n grid-area: field;\n letter-spacing: var(--pine-letter-spacing);\n padding: var(--pine-dimension-xs) var(--pine-dimension-150);\n padding-inline-end: var(--pine-dimension-450);\n position: relative;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n border-color: var(--pine-color-border-active);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &:disabled {\n background-color: 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 &:has(~ .pds-select__message .pds-select__error-message) {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n:host(.is-invalid) {\n select {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n font: var(--pine-typography-body-sm-medium);\n margin-block-end: 0;\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-select__message {\n grid-area: message;\n}\n\n.pds-select__select-icon {\n align-items: center;\n display: flex;\n grid-column: -1 / -2;\n grid-row: 2 / 3;\n height: 2.5rem;\n pointer-events: none;\n position: relative;\n z-index: 1;\n}\n","import { Component, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-select',\n styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n shadow: true,\n})\nexport class PdsSelect {\n\n private selectEl!: HTMLSelectElement;\n private slotContainer!: HTMLDivElement;\n\n /**\n * Specifies if and how the browser provides `autocomplete` assistance for the field.\n */\n @Prop() autocomplete: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Indicates whether or not the select field is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false\n\n /**\n * Displays error message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * Displays helper message text below select.\n */\n @Prop() helperMessage: string;\n\n /**\n * Determines whether or not the select is invalid.\n */\n @Prop() invalid?: boolean;\n\n /**\n * Text to be displayed as the select label.\n */\n @Prop() label?: string;\n\n /**\n * Indicates whether multiple options can be selected.\n * @defaultValue false\n */\n @Prop() multiple = false;\n\n /**\n * Specifies the name. Submitted with the form name/value pair.\n */\n @Prop() name!: string;\n\n /**\n * Indicates whether or not the select field is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * The value(s) of the selected option(s).\n *\n */\n @Prop({ mutable: true }) value?: string | string[];\n\n /**\n * Emitted when a keyboard input occurs.\n */\n @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n @Watch('value')\n /**\n * Handles the change in the value of the select component.\n * This method is called whenever the value of the select component changes.\n * It updates the selected option accordingly.\n */\n valueChanged() {\n this.updateSelectedOption();\n }\n\n componentWillLoad() {\n this.updateSelectedOption();\n }\n\n /**\n * Updates the selected option in the select element based on the current value.\n *\n * This method iterates through all the options of the select element and sets the\n * 'selected' attribute on the option that matches the current value. If an option\n * does not match the current value, the 'selected' attribute is removed.\n *\n * @private\n * @returns {void}\n */\n private updateSelectedOption() {\n if (this.selectEl) {\n const options = this.selectEl.options;\n\n // Update the selected attribute for all options.\n Array.from(options).map((option: HTMLOptionElement) => {\n if (Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = this.value === option.value;\n }\n });\n };\n }\n\n /**\n * Emits an event on input change.\n */\n private onSelectUpdate = (e: Event) => {\n const target = e.target as HTMLSelectElement\n\n const values = Array.from(target.options)\n .filter((option) => ( option.selected))\n .map((option) => ( option.value));\n\n if (values.length === 1 && !this.multiple) {\n this.value = values[0];\n } else {\n this.value = values;\n }\n\n this.pdsSelectChange.emit(e as InputEvent);\n };\n\n /**\n * Handles the change event for the slot element.\n * This method is triggered when the slot content changes.\n * It updates the inner HTML of the select element by cloning and appending\n * the assigned <option> elements from the slot.\n */\n private handleSlotChange = () => {\n const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n this.selectEl.innerHTML = '';\n const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n assignedElements.forEach((item) => {\n if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n (clonedItem as HTMLOptionElement).selected = true;\n }\n this.selectEl.appendChild(clonedItem);\n }\n });\n\n this.updateSelectedOption();\n };\n\n private getHelperMessage() {\n return this.helperMessage && (\n <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n {this.helperMessage}\n </p>\n );\n }\n\n private getErrorMessage() {\n return this.errorMessage && (\n <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n <pds-icon icon={danger} size=\"small\"></pds-icon>\n {this.errorMessage}\n </p>\n );\n }\n\n private renderMessages() {\n if (!this.helperMessage && !this.errorMessage) return null;\n\n return (\n <div class=\"pds-select__message\">\n {this.getHelperMessage()}\n {this.getErrorMessage()}\n </div>\n );\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()}>\n <div class=\"pds-select\">\n {this.label &&\n <label htmlFor={this.componentId}>{this.label}</label>\n }\n <select\n autocomplete={this.autocomplete || undefined}\n class=\"pds-select__field\"\n disabled={this.disabled}\n id={this.componentId}\n multiple={this.multiple}\n name={this.name}\n onChange={this.onSelectUpdate}\n required={this.required}\n ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n ></select>\n <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.renderMessages()}\n {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r,h as a,H as o}from"./p-Uh5ntVcq.js";const e=":host{border-color:inherit;display:table-row-group;vertical-align:middle}";const d=class{constructor(a){r(this,a)}render(){return a(o,{key:"ec68d794fd59876a83f40077d29e97af4366f19a",role:"rowgroup"},a("slot",{key:"9d052cdf3c0ea8afa86a6900d492c9de5c9adaf1"}))}};d.style=e;export{d as pds_table_body};
|
|
2
|
-
//# sourceMappingURL=p-21c3aaeb.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as o,c as r,h as t,H as e,g as n}from"./p-Uh5ntVcq.js";import{h as i}from"./p-DkabwBZT.js";import{b as a}from"./p-_4gljHh-.js";const l=":host{--button-dimension:40px;--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--pine-border);border-color:var(--color-border-default);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--button-dimension);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;--button-loader-color:inherit;border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";const s=class{constructor(t){o(this,t);this.pdsClick=r(this,"pdsClick");this.disabled=false;this.fullWidth=false;this.icon=null;this.iconOnly=false;this.loading=false;this.type="button";this.variant="primary";this.handleClick=o=>{if(this.loading){o.preventDefault();return}if(!this.href&&this.type!="button"){if(i(this.el)){const r=this.el.closest("form");if(r){o.preventDefault();const t=document.createElement("button");t.type=this.type;t.style.display="none";r.appendChild(t);t.click();t.remove()}}}this.pdsClick.emit(o)}}classNames(){const o=["pds-button"];if(this.variant){o.push("pds-button--"+this.variant)}if(this.iconOnly){o.push("pds-button--icon-only")}if(this.loading){o.push("pds-button--loading")}return o.join(" ")}hasSlotContent(o){const r=this.el.querySelectorAll(`[slot="${o}"]`);return r.length>0}renderStartContent(){const o=this.icon&&this.variant!=="disclosure";const r=this.hasSlotContent("start");if(Boolean(o)){return t("pds-icon",{class:this.loading?"pds-button__icon--hidden":"",name:this.icon,part:"icon","aria-hidden":"true"})}else if(Boolean(r)){return t("span",{class:`pds-button__icon ${this.loading?"pds-button__icon--hidden":""}`},t("slot",{name:"start"}))}return null}renderEndContent(){if(this.iconOnly){return null}if(this.variant==="disclosure"){return t("pds-icon",{class:this.loading?"pds-button__icon--hidden":"",icon:a,part:"caret","aria-hidden":"true"})}else if(this.hasSlotContent("end")){return t("span",{class:`pds-button__icon ${this.loading?"pds-button__icon--hidden":""}`},t("slot",{name:"end"}))}return null}render(){const o={class:this.classNames(),part:"button"};const r=()=>{if(this.href){return Object.assign(Object.assign({},o),{href:this.disabled?null:this.href,target:this.target})}return Object.assign(Object.assign({},o),{"aria-busy":this.loading?"true":null,"aria-live":this.loading?"polite":null,disabled:this.disabled,name:this.name,type:this.type,value:this.value})};const n=this.href?"a":"button";const i=this.loading||this.iconOnly;const a=t("div",{class:"pds-button__content",part:"button-content"},this.renderStartContent(),t("span",{class:`pds-button__text ${i?"pds-button__text--hidden":""}`,part:"button-text"},t("slot",null)),this.loading&&t("span",{class:"pds-button__loader"},t("pds-loader",{"is-loading":true,size:"var(--pine-font-size-body-2xl)",variant:"spinner"},"Loading...")),this.renderEndContent());return t(e,{"aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},t(n,Object.assign({},r()),a))}get el(){return n(this)}};s.style=l;export{s as pds_button};
|
|
2
|
-
//# sourceMappingURL=p-29ad0b86.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsButtonCss","PdsButton","constructor","hostRef","this","disabled","fullWidth","icon","iconOnly","loading","type","variant","handleClick","ev","preventDefault","href","hasShadowDom","el","form","closest","fakeButton","document","createElement","style","display","appendChild","click","remove","pdsClick","emit","classNames","push","join","hasSlotContent","slotName","elements","querySelectorAll","length","renderStartContent","hasIcon","hasStartSlot","Boolean","h","class","name","part","renderEndContent","caretDown","render","commonProps","attributes","Object","assign","target","value","ContentElement","hideText","content","size","Host","id","componentId","onClick"],"sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --button-dimension: 40px;\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n button {\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__content {\n justify-content: center;\n text-align: center;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n:host([disabled=\"true\"]) {\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--pine-border);\n border-color: var(--color-border-default);\n border-radius: var(--pine-border-radius-full);\n box-sizing: border-box;\n color: var(--color-text-default); // Set in the variant classes below\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--button-dimension);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n text-decoration: none;\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--color-border-focus);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: inherit;\n --button-loader-color: inherit;\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n gap: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n.pds-button__icon {\n display: inline-flex;\n}\n\n.pds-button__text {\n align-items: center;\n display: inline-flex;\n}\n\n.pds-button__icon--hidden,\n.pds-button__text--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\n}\n\n.pds-button--icon-only {\n align-items: center;\n border-radius: var(--pine-border-radius-full);\n height: var(--button-dimension);\n justify-content: center;\n min-height: var(--button-dimension);\n min-width: var(--button-dimension);\n padding: var(--pine-dimension-xs);\n width: var(--button-dimension);\n\n .pds-button__content {\n height: 100%;\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__text--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","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n * @slot (default) - Button text.\n * @slot start - Content to display before the button text.\n * @slot end - Content to display after the button text.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines the button's disabled state.\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Determines if the button should take up the full width of its container.\n * @defaultValue false\n */\n @Prop() fullWidth? = false;\n\n /**\n * If provided, renders the component as an anchor (`<a>`) element instead of a button.\n * When using href, button-specific props (type, name, value, loading) will be ignored.\n */\n @Prop() href?: string;\n\n /**\n * Displays a leading icon in the button. DEPRECATED.\n * @defaultValue null\n * @deprecated Use `start` slot instead.\n */\n @Prop() icon?: string = null;\n\n /**\n * When true, displays only the icon and visually hides the text (keeping it accessible).\n */\n @Prop() iconOnly? = false;\n\n /**\n * Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n */\n @Prop() loading? = false;\n\n /**\n * Provides the button with a submittable name.\n */\n @Prop() name?: string;\n\n /**\n * Specifies where to open the linked document when href is provided.\n * Only applies when href is set.\n */\n @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n /**\n * Provides button with a type.\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Sets the style variant of the button.\n * @defaultValue primary\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n @Event() pdsClick: EventEmitter;\n\n private handleClick = (ev: Event) => {\n if (this.loading) {\n ev.preventDefault();\n return;\n }\n\n if (!this.href && this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n this.pdsClick.emit(ev);\n };\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n if (this.iconOnly) {\n classNames.push('pds-button--icon-only');\n }\n\n if (this.loading) {\n classNames.push('pds-button--loading');\n }\n\n return classNames.join(' ');\n }\n\n private hasSlotContent(slotName: string): boolean {\n const elements = this.el.querySelectorAll(`[slot=\"${slotName}\"]`);\n return elements.length > 0;\n }\n\n private renderStartContent() {\n const hasIcon = this.icon && this.variant !== 'disclosure';\n const hasStartSlot = this.hasSlotContent('start');\n\n if (Boolean(hasIcon)) {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasStartSlot)) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"start\" /></span>;\n }\n\n return null;\n }\n\n private renderEndContent() {\n if (this.iconOnly) {\n return null;\n }\n\n if (this.variant === 'disclosure') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (this.hasSlotContent('end')) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"end\" /></span>;\n }\n\n return null;\n }\n\n render() {\n // Common props for both button and anchor elements\n const commonProps = {\n class: this.classNames(),\n part: 'button',\n };\n\n const attributes = () => {\n if (this.href) {\n return {\n // Anchor element props\n ...commonProps,\n href: this.disabled ? null : this.href,\n target: this.target,\n };\n }\n\n return {\n // Button element props\n ...commonProps,\n 'aria-busy': this.loading ? 'true' : null,\n 'aria-live': this.loading ? 'polite' : null,\n 'disabled': this.disabled,\n 'name': this.name,\n 'type': this.type,\n 'value': this.value,\n };\n };\n\n const ContentElement = this.href ? 'a' : 'button';\n\n // Hide text when loading or iconOnly is true\n const hideText = this.loading || this.iconOnly;\n\n const content = (\n <div class=\"pds-button__content\" part=\"button-content\">\n {this.renderStartContent()}\n\n <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n <slot />\n </span>\n\n {this.loading && (\n <span class=\"pds-button__loader\">\n <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\">\n Loading...\n </pds-loader>\n </span>\n )}\n\n {this.renderEndContent()}\n </div>\n );\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <ContentElement {...attributes()}>\n {content}\n </ContentElement>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,h as i,H as o,g as r}from"./p-Uh5ntVcq.js";const s=({elem:t,elemPlacement:i,overlay:o,offset:r=8})=>{if(t===null||o===null)return false;if(typeof i!=="string"||i.trim()===""){return false}const s=t.getBoundingClientRect();const e=o.getBoundingClientRect();o.style.top="";o.style.left="";o.style.right="";o.style.bottom="";o.style.transform="";o.style.position="fixed";let l=false;if(t.childNodes.length===1&&t.childNodes[0].nodeType===Node.TEXT_NODE){l=true}else if(t.childNodes.length===1&&t.childNodes[0].nodeType===Node.ELEMENT_NODE){const i=t.childNodes[0];if(i.tagName==="SPAN"&&i.childNodes.length===1&&i.childNodes[0].nodeType===Node.TEXT_NODE){l=true}}switch(true){case i.includes("right"):if(l){o.style.top=`${s.bottom-e.height/2}px`}else{o.style.top=`${s.top+s.height/2-e.height/2}px`}o.style.left=`${s.right+r}px`;if(i.includes("start")){o.style.top=`${s.top}px`}if(i.includes("end")){o.style.top=`${s.bottom-e.height}px`}break;case i.includes("left"):if(l){o.style.top=`${s.bottom-e.height/2}px`}else{o.style.top=`${s.top+s.height/2-e.height/2}px`}o.style.left=`${s.left-e.width-r}px`;if(i.includes("start")){o.style.top=`${s.top}px`}if(i.includes("end")){o.style.top=`${s.bottom-e.height}px`}break;case i.includes("bottom"):o.style.top=`${s.bottom+r}px`;o.style.left=`${s.left+s.width/2-e.width/2}px`;if(i.includes("start")){o.style.left=`${s.left}px`}if(i.includes("end")){o.style.left=`${s.right-e.width}px`;o.style.right="initial"}break;case i.includes("top"):o.style.top=`${s.top-e.height-r}px`;o.style.left=`${s.left+s.width/2-e.width/2}px`;if(i.includes("start")){o.style.left=`${s.left}px`}if(i.includes("end")){o.style.left=`${s.right-e.width}px`;o.style.right="initial"}break}return true};const e='.pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';const l=class{constructor(i){t(this,i);this._isInteractiveOpen=false;this.portalEl=null;this.triggerEl=null;this.contentDiv=null;this.slotMutationObserver=null;this.overlayResizeObserver=null;this.isOpen=false;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.maxWidth="352px";this.opened=false;this.handleHide=()=>{if(this.opened&&!this._isInteractiveOpen){return}this.hideTooltip();this._isInteractiveOpen=false};this.handleShow=()=>{if(this.opened&&!this._isInteractiveOpen){return}this._isInteractiveOpen=true;this.showTooltip()};this.handlePageShow=()=>{if(this.opened&&!this._isInteractiveOpen){return}this.opened=false;this._isInteractiveOpen=false};this.handleScroll=()=>{if(this.opened){if(!this._isInteractiveOpen){this.repositionPortal()}else{this.hideTooltip();this._isInteractiveOpen=false}}};this.handleSpaNavigation=()=>{if(this.opened&&!this._isInteractiveOpen){return}this.hideTooltip();this._isInteractiveOpen=false}}handleOpenToggle(t,i){if(t===false&&i===true){this._isInteractiveOpen=false}}componentWillLoad(){this._isInteractiveOpen=false}componentDidLoad(){window.addEventListener("pageshow",this.handlePageShow);this.triggerEl=this.el.querySelector(".pds-tooltip__trigger");const t=this.el.querySelector(".pds-tooltip__content-slot-wrapper");if(t!==null){this.slotMutationObserver=new MutationObserver((()=>{if(this.opened&&this.portalEl!==null){this.removePortal();this.createPortal()}}));this.slotMutationObserver.observe(t,{childList:true,subtree:false})}return()=>{window.removeEventListener("pageshow",this.handlePageShow);if(this.slotMutationObserver!==null){this.slotMutationObserver.disconnect()}}}componentDidRender(){if(this.opened&&this.portalEl===null){this.createPortal()}else if(!this.opened&&this.portalEl!==null){this.removePortal()}}async showTooltip(){this.opened=true}async hideTooltip(){this.opened=false}determinePositioningAnchor(){let t=this.triggerEl;if(this.triggerEl!==null){const i=this.triggerEl.childNodes;for(let o=0;o<i.length;o++){const r=i[o];if(r.nodeType===Node.ELEMENT_NODE){t=r;break}}}return t}repositionPortal(){const t=this.determinePositioningAnchor();if(t!==null&&this.contentDiv!==null){s({elem:t,elemPlacement:this.placement,overlay:this.contentDiv});const i=this.placement.split("-");const o=i[0];const r=i.length===1;if(r){const i=t.getBoundingClientRect();const r=this.contentDiv.getBoundingClientRect();if(o==="left"||o==="right"){const t=parseFloat(this.contentDiv.style.top||"0");const o=i.top+i.height/2;const s=r.top+r.height/2;const e=o-s;if(Math.abs(e)>.5){this.contentDiv.style.top=`${t+e}px`}}else if(o==="top"||o==="bottom"){const t=parseFloat(this.contentDiv.style.left||"0");const o=i.left+i.width/2;const s=r.left+r.width/2;const e=o-s;if(Math.abs(e)>.5){this.contentDiv.style.left=`${t+e}px`}}}}}createPortal(){if(this.portalEl!==null)return;this.portalEl=document.createElement("div");this.portalEl.className=`pds-tooltip pds-tooltip--${this.placement} ${this.htmlContent?"pds-tooltip--has-html-content":""} ${this.opened?"pds-tooltip--is-open":""} ${this.hasArrow?"":"pds-tooltip--no-arrow"}`;this.portalEl.style.position="fixed";this.portalEl.style.zIndex="9999";if(this.portalEl.id===""){this.portalEl.id=this.componentId||this.el.id||`pds-tooltip-portal-${l.instanceCounter++}`}if(this.portalEl.getAttribute("id")!==this.portalEl.id){this.portalEl.setAttribute("id",this.portalEl.id)}this.portalEl.setAttribute("role","tooltip");this.portalEl.setAttribute("aria-hidden",this.opened?"false":"true");this.portalEl.setAttribute("aria-live",this.opened?"polite":"off");this.portalEl.style.maxWidth=this.maxWidth;this.contentDiv=document.createElement("div");this.contentDiv.className="pds-tooltip__content";this.contentDiv.setAttribute("aria-hidden",this.opened?"false":"true");this.contentDiv.setAttribute("aria-live",this.opened?"polite":"off");this.contentDiv.setAttribute("role","tooltip");this.contentDiv.style.maxWidth=this.maxWidth;const t=this.el.querySelector(".pds-tooltip__content-slot-wrapper");const i=t===null||t===void 0?void 0:t.querySelector('[slot="content"]');let o=false;if(i!==null){const t=Array.from(i.childNodes);if(t.length>0){const i=t.some((t=>{var i;return t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&((i=t.textContent)===null||i===void 0?void 0:i.trim())!==""}));if(i){o=true;t.forEach((t=>{var i;if(t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&((i=t.textContent)===null||i===void 0?void 0:i.trim())!==""){this.contentDiv.appendChild(t.cloneNode(true))}}))}}}if(!o){if(this.content!==""){this.contentDiv.textContent=this.content}}this.portalEl.appendChild(this.contentDiv);document.body.appendChild(this.portalEl);this.repositionPortal();if(this.contentDiv!==null){this.overlayResizeObserver=new ResizeObserver((()=>{this.repositionPortal()}));this.overlayResizeObserver.observe(this.contentDiv)}window.addEventListener("scroll",this.handleScroll,true);window.addEventListener("popstate",this.handleSpaNavigation,true);window.addEventListener("hashchange",this.handleSpaNavigation,true);if(this.triggerEl!==null&&this.portalEl.id!==""){this.triggerEl.setAttribute("aria-describedby",this.portalEl.id)}}removePortal(){if(this.overlayResizeObserver!==null&&this.contentDiv!==null){this.overlayResizeObserver.unobserve(this.contentDiv);this.overlayResizeObserver=null}if(this.portalEl!==null){window.removeEventListener("scroll",this.handleScroll,true);window.removeEventListener("popstate",this.handleSpaNavigation,true);window.removeEventListener("hashchange",this.handleSpaNavigation,true);document.body.removeChild(this.portalEl);this.portalEl=null}if(this.triggerEl!==null){this.triggerEl.removeAttribute("aria-describedby")}this.contentDiv=null}render(){const t=this.componentId||undefined;return i(o,{key:"0fe2bea1ea0e8eaeb5879644694a2e129f1f4898",id:t,class:{"pds-tooltip--is-open":this.opened}},i("span",{key:"f26feb3c37957573d3b6b0a55091b2e7012ae31b",class:"pds-tooltip__trigger",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocus:this.handleShow,onBlur:this.handleHide,ref:t=>this.triggerEl=t},i("slot",{key:"c7940e3aa7f17fc5d5fcdedc0a624204ceed291c"})),i("div",{key:"0c8dc83e3b7f8c1337aae8641d80f63c0866c348",class:"pds-tooltip__content-slot-wrapper",style:{display:"none"}},i("slot",{key:"2f6701768c0debdd69673da3ad7dc34b8b237f6a",name:"content"})))}get el(){return r(this)}static get watchers(){return{opened:["handleOpenToggle"]}}};l.instanceCounter=0;l.style=e;export{l as pds_tooltip};
|
|
2
|
-
//# sourceMappingURL=p-32bd3e33.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["positionTooltip","elem","elemPlacement","overlay","offset","trim","rect","getBoundingClientRect","contentRect","style","top","left","right","bottom","transform","position","isTextTrigger","childNodes","length","nodeType","Node","TEXT_NODE","ELEMENT_NODE","child","tagName","includes","height","width","pdsTooltipCss","PdsTooltip","constructor","hostRef","this","_isInteractiveOpen","portalEl","triggerEl","contentDiv","slotMutationObserver","overlayResizeObserver","isOpen","hasArrow","htmlContent","placement","maxWidth","opened","handleHide","hideTooltip","handleShow","showTooltip","handlePageShow","handleScroll","repositionPortal","handleSpaNavigation","handleOpenToggle","newValue","oldValue","componentWillLoad","componentDidLoad","window","addEventListener","el","querySelector","contentSlotWrapper","MutationObserver","removePortal","createPortal","observe","childList","subtree","removeEventListener","disconnect","componentDidRender","determinePositioningAnchor","positioningAnchor","children","i","childNode","anchor","placementParts","split","primaryPlacement","isCardinalCenterPlacement","anchorRect","overlayRect","currentOverlayTop","parseFloat","anchorCenterY","overlayCenterY","adjustmentY","Math","abs","currentOverlayLeft","anchorCenterX","overlayCenterX","adjustmentX","document","createElement","className","zIndex","id","componentId","instanceCounter","getAttribute","setAttribute","slottedContentContainer","hasSlottedContent","childrenToClone","Array","from","hasMeaningfulNode","some","node","_a","textContent","forEach","appendChild","cloneNode","content","body","ResizeObserver","unobserve","removeChild","removeAttribute","render","hostId","undefined","h","Host","key","class","onMouseEnter","onMouseLeave","onFocus","onBlur","ref","display","name"],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n elem: HTMLElement | null;\n elemPlacement: string;\n overlay: HTMLElement | null;\n offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs): boolean => {\n if (elem === null || overlay === null) return false;\n if (typeof elemPlacement !== 'string' || elemPlacement.trim() === '') {\n return false;\n }\n\n const rect = elem.getBoundingClientRect();\n const contentRect = overlay.getBoundingClientRect();\n\n // Reset styles\n overlay.style.top = '';\n overlay.style.left = '';\n overlay.style.right = '';\n overlay.style.bottom = '';\n overlay.style.transform = '';\n\n // Use fixed positioning for portal overlays\n overlay.style.position = 'fixed';\n\n // Detect if the trigger is a span with only text or a text node\n let isTextTrigger = false;\n if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.TEXT_NODE) {\n isTextTrigger = true;\n } else if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.ELEMENT_NODE) {\n const child = elem.childNodes[0] as HTMLElement;\n if (child.tagName === 'SPAN' && child.childNodes.length === 1 && child.childNodes[0].nodeType === Node.TEXT_NODE) {\n isTextTrigger = true;\n }\n }\n\n switch (true) {\n case elemPlacement.includes('right'):\n if (isTextTrigger) {\n // Align to the bottom of the trigger for text triggers\n overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;\n } else {\n overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;\n }\n overlay.style.left = `${rect.right + offset}px`;\n if (elemPlacement.includes('start')) {\n overlay.style.top = `${rect.top}px`;\n }\n if (elemPlacement.includes('end')) {\n overlay.style.top = `${rect.bottom - contentRect.height}px`;\n }\n break;\n case elemPlacement.includes('left'):\n if (isTextTrigger) {\n overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;\n } else {\n overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;\n }\n overlay.style.left = `${rect.left - contentRect.width - offset}px`;\n if (elemPlacement.includes('start')) {\n overlay.style.top = `${rect.top}px`;\n }\n if (elemPlacement.includes('end')) {\n overlay.style.top = `${rect.bottom - contentRect.height}px`;\n }\n break;\n case elemPlacement.includes('bottom'):\n overlay.style.top = `${rect.bottom + offset}px`;\n overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;\n if (elemPlacement.includes('start')) {\n overlay.style.left = `${rect.left}px`;\n }\n if (elemPlacement.includes('end')) {\n overlay.style.left = `${rect.right - contentRect.width}px`;\n overlay.style.right = 'initial';\n }\n break;\n case elemPlacement.includes('top'):\n overlay.style.top = `${rect.top - contentRect.height - offset}px`;\n overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;\n if (elemPlacement.includes('start')) {\n overlay.style.left = `${rect.left}px`;\n }\n if (elemPlacement.includes('end')) {\n overlay.style.left = `${rect.right - contentRect.width}px`;\n overlay.style.right = 'initial';\n }\n break;\n }\n return true;\n}\n",".pds-tooltip {\n --tooltip-border-width-arrow-down: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;\n --tooltip-border-width-arrow-left: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;\n --tooltip-border-width-arrow-right: var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);\n --tooltip-border-width-arrow-up: 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);\n --tooltip-sizing-arrow: 6px;\n --tooltip-sizing-arrow-offset: 14px;\n --tooltip-dimension-max-width: 320px;\n}\n\n.pds-tooltip__content {\n background-color: var(--pine-color-primary);\n border-radius: calc(var(--pine-dimension-xs) * 1.25);\n box-shadow: var(--pine-box-shadow);\n color: var(--pine-color-text-primary);\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n max-width: var(--tooltip-dimension-max-width);\n opacity: 0;\n padding: var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);\n position: absolute;\n visibility: hidden;\n width: max-content;\n\n .pds-tooltip--is-open & {\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n opacity: 1;\n visibility: visible;\n z-index: 1;\n }\n\n .pds-tooltip.pds-tooltip--has-html-content & {\n width: auto;\n }\n\n &::after {\n border-color: transparent;\n border-right-color: transparent;\n border-style: solid;\n border-width: var(--tooltip-border-width-arrow-left);\n content: '';\n height: 0;\n position: absolute;\n width: 0;\n\n .pds-tooltip--right & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--right-end & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n bottom: var(--tooltip-sizing-arrow-offset);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: initial;\n }\n\n .pds-tooltip--right-start & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: var(--tooltip-sizing-arrow-offset);\n }\n\n .pds-tooltip--top & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: 50%;\n top: initial;\n transform: translateX(-50%);\n }\n\n .pds-tooltip--top-start & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: var(--tooltip-sizing-arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--top-end & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: initial;\n right: var(--tooltip-sizing-arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--left & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--left-end & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n bottom: var(--tooltip-sizing-arrow-offset);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: initial;\n }\n\n .pds-tooltip--left-start & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: var(--tooltip-sizing-arrow-offset);\n }\n\n .pds-tooltip--bottom & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: 50%;\n top: calc(var(--tooltip-sizing-arrow) * -1);\n transform: translateX(-50%);\n }\n\n .pds-tooltip--bottom-end & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: initial;\n right: var(--tooltip-sizing-arrow-offset);\n top: calc(var(--tooltip-sizing-arrow) * -1);\n }\n\n .pds-tooltip--bottom-start & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: var(--tooltip-sizing-arrow-offset);\n top: calc(var(--tooltip-sizing-arrow) * -1);\n }\n\n .pds-tooltip--no-arrow & {\n border-width: 0;\n }\n }\n}\n","import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core';\nimport { positionTooltip } from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n tag: 'pds-tooltip',\n styleUrls: ['pds-tooltip.scss'],\n shadow: false,\n})\n\nexport class PdsTooltip {\n private static instanceCounter = 0;\n\n /**\n * Internal state: true if the tooltip was opened by user interaction (hover/focus),\n * false if opened via the `opened` prop or currently closed.\n */\n @State() private _isInteractiveOpen = false;\n\n private portalEl: HTMLElement | null = null;\n private triggerEl: HTMLElement | null = null;\n private contentDiv: HTMLElement | null = null;\n private slotMutationObserver: MutationObserver | null = null;\n private overlayResizeObserver: ResizeObserver | null = null;\n\n /**\n * Reference to the Host element\n */\n @Element() el: HTMLPdsTooltipElement;\n\n /**\n * Determines when the tooltip is open\n * @defaultValue false\n */\n @State() isOpen = false;\n\n /**\n * Content for the tooltip. If HTML is required, use the content slot\n */\n @Prop() content: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether or not the tooltip has an arrow\n * @defaultValue true\n */\n @Prop() hasArrow? = true;\n\n /**\n * Enable this option when using the content slot\n * @defaultValue false\n */\n @Prop() htmlContent = false;\n\n /**\n * Determines the preferred position of the tooltip\n * @defaultValue \"right\"\n */\n @Prop({ reflect: true }) placement:\n 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'right';\n\n /**\n * Sets the maximum width of the tooltip content\n * @defaultValue \"352px\"\n */\n @Prop() maxWidth: string = '352px';\n\n /**\n * Determines whether or not the tooltip is visible\n * @defaultValue false\n */\n @Prop({mutable: true, reflect: true}) opened = false;\n\n @Watch('opened')\n\n handleOpenToggle(newValue: boolean, oldValue: boolean) {\n if (newValue === false && oldValue === true) {\n this._isInteractiveOpen = false;\n }\n }\n\n componentWillLoad() {\n this._isInteractiveOpen = false;\n }\n\n componentDidLoad() {\n window.addEventListener('pageshow', this.handlePageShow);\n this.triggerEl = this.el.querySelector('.pds-tooltip__trigger') as HTMLElement;\n const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');\n\n if (contentSlotWrapper !== null) {\n this.slotMutationObserver = new MutationObserver(() => {\n if (this.opened && this.portalEl !== null) {\n this.removePortal();\n this.createPortal();\n }\n });\n this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });\n }\n\n return () => {\n window.removeEventListener('pageshow', this.handlePageShow);\n\n if (this.slotMutationObserver !== null) {\n this.slotMutationObserver.disconnect();\n }\n };\n }\n\n componentDidRender() {\n if (this.opened && this.portalEl === null) {\n this.createPortal();\n } else if (!this.opened && this.portalEl !== null) {\n this.removePortal();\n }\n }\n\n /**\n * Shows the tooltip by enabling the opened property\n */\n @Method()\n async showTooltip() {\n this.opened = true;\n }\n\n /**\n * Hides the tooltip by disabling the opened property\n */\n @Method()\n async hideTooltip() {\n this.opened = false;\n }\n\n private handleHide = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.hideTooltip();\n this._isInteractiveOpen = false;\n };\n\n private handleShow = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this._isInteractiveOpen = true;\n this.showTooltip();\n };\n\n private handlePageShow = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.opened = false;\n this._isInteractiveOpen = false;\n };\n\n private handleScroll = () => {\n if (this.opened) {\n if (!this._isInteractiveOpen) {\n this.repositionPortal();\n } else {\n this.hideTooltip();\n this._isInteractiveOpen = false;\n }\n }\n };\n\n private handleSpaNavigation = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.hideTooltip();\n this._isInteractiveOpen = false;\n };\n\n /**\n * Determines the most accurate HTML element to use as the anchor for positioning the tooltip.\n * If `htmlContent` is false, it attempts to find the actual element slotted as the trigger.\n * Otherwise, or if no specific element is found, it defaults to the span wrapper around the trigger slot.\n * This helps with precise alignment.\n */\n private determinePositioningAnchor(): HTMLElement | null {\n let positioningAnchor: HTMLElement | null = this.triggerEl;\n\n if (this.triggerEl !== null) {\n const children = this.triggerEl.childNodes;\n\n for (let i = 0; i < children.length; i++) {\n const childNode = children[i];\n\n if (childNode.nodeType === Node.ELEMENT_NODE) {\n positioningAnchor = childNode as HTMLElement;\n break; // Found the first element, use it as the anchor\n }\n }\n }\n\n // If no ELEMENT_NODE is found within this.triggerEl (e.g., if trigger is just text),\n // positioningAnchor will correctly remain this.triggerEl (the span).\n return positioningAnchor;\n }\n\n /**\n * Centralized method to calculate and apply the tooltip's position.\n * Uses the determined anchor element and the current content dimensions.\n */\n private repositionPortal() {\n const anchor = this.determinePositioningAnchor();\n\n if (anchor !== null && this.contentDiv !== null) {\n positionTooltip({ elem: anchor, elemPlacement: this.placement, overlay: this.contentDiv });\n const placementParts = this.placement.split('-');\n const primaryPlacement = placementParts[0];\n const isCardinalCenterPlacement = placementParts.length === 1;\n\n if (isCardinalCenterPlacement) {\n const anchorRect = anchor.getBoundingClientRect();\n const overlayRect = this.contentDiv.getBoundingClientRect();\n\n if (primaryPlacement === 'left' || primaryPlacement === 'right') {\n const currentOverlayTop = parseFloat(this.contentDiv.style.top || '0');\n const anchorCenterY = anchorRect.top + (anchorRect.height / 2);\n const overlayCenterY = overlayRect.top + (overlayRect.height / 2);\n const adjustmentY = anchorCenterY - overlayCenterY;\n\n if (Math.abs(adjustmentY) > 0.5) {\n this.contentDiv.style.top = `${currentOverlayTop + adjustmentY}px`;\n }\n\n } else if (primaryPlacement === 'top' || primaryPlacement === 'bottom') {\n const currentOverlayLeft = parseFloat(this.contentDiv.style.left || '0');\n const anchorCenterX = anchorRect.left + (anchorRect.width / 2);\n const overlayCenterX = overlayRect.left + (overlayRect.width / 2);\n const adjustmentX = anchorCenterX - overlayCenterX;\n\n if (Math.abs(adjustmentX) > 0.5) {\n this.contentDiv.style.left = `${currentOverlayLeft + adjustmentX}px`;\n }\n }\n }\n }\n }\n\n private createPortal() {\n if (this.portalEl !== null) return;\n\n this.portalEl = document.createElement('div');\n this.portalEl.className = `pds-tooltip pds-tooltip--${this.placement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;\n this.portalEl.style.position = 'fixed';\n this.portalEl.style.zIndex = '9999';\n\n if (this.portalEl.id === '') {\n this.portalEl.id = this.componentId || this.el.id || `pds-tooltip-portal-${PdsTooltip.instanceCounter++}`;\n }\n\n if (this.portalEl.getAttribute('id') !== this.portalEl.id) {\n this.portalEl.setAttribute('id', this.portalEl.id);\n }\n\n this.portalEl.setAttribute('role', 'tooltip');\n this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n this.portalEl.style.maxWidth = this.maxWidth;\n\n this.contentDiv = document.createElement('div');\n this.contentDiv.className = 'pds-tooltip__content';\n this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n this.contentDiv.setAttribute('role', 'tooltip');\n this.contentDiv.style.maxWidth = this.maxWidth;\n\n const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');\n const slottedContentContainer = contentSlotWrapper?.querySelector('[slot=\"content\"]') as HTMLElement | null;\n let hasSlottedContent = false;\n\n if (slottedContentContainer !== null) {\n const childrenToClone = Array.from(slottedContentContainer.childNodes);\n\n if (childrenToClone.length > 0) {\n const hasMeaningfulNode = childrenToClone.some(node =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n );\n\n if (hasMeaningfulNode) {\n hasSlottedContent = true;\n childrenToClone.forEach((node /*, index*/) => {\n if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')) {\n this.contentDiv.appendChild(node.cloneNode(true));\n }\n });\n }\n }\n }\n\n if (!hasSlottedContent) {\n if (this.content !== '') {\n this.contentDiv.textContent = this.content;\n }\n }\n\n this.portalEl.appendChild(this.contentDiv);\n document.body.appendChild(this.portalEl);\n\n this.repositionPortal();\n\n if (this.contentDiv !== null) {\n this.overlayResizeObserver = new ResizeObserver(() => {\n this.repositionPortal();\n });\n this.overlayResizeObserver.observe(this.contentDiv);\n }\n\n // Add global listeners when portal is created\n window.addEventListener('scroll', this.handleScroll, true);\n window.addEventListener('popstate', this.handleSpaNavigation, true);\n window.addEventListener('hashchange', this.handleSpaNavigation, true);\n\n // Add ARIA attribute to trigger, now that portalEl and its ID are confirmed\n if (this.triggerEl !== null && this.portalEl.id !== '') {\n this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);\n }\n }\n\n private removePortal() {\n if (this.overlayResizeObserver !== null && this.contentDiv !== null) {\n this.overlayResizeObserver.unobserve(this.contentDiv);\n this.overlayResizeObserver = null;\n }\n\n if (this.portalEl !== null) {\n window.removeEventListener('scroll', this.handleScroll, true);\n window.removeEventListener('popstate', this.handleSpaNavigation, true);\n window.removeEventListener('hashchange', this.handleSpaNavigation, true);\n document.body.removeChild(this.portalEl);\n this.portalEl = null;\n }\n\n // Remove ARIA attribute from trigger\n if (this.triggerEl !== null) {\n this.triggerEl.removeAttribute('aria-describedby');\n }\n this.contentDiv = null;\n }\n\n render() {\n const hostId = this.componentId || undefined;\n\n return (\n <Host id={hostId} class={{ 'pds-tooltip--is-open': this.opened }}>\n <span\n class=\"pds-tooltip__trigger\"\n onMouseEnter={this.handleShow}\n onMouseLeave={this.handleHide}\n onFocus={this.handleShow}\n onBlur={this.handleHide}\n ref={el => this.triggerEl = el}\n >\n <slot />\n </span>\n <div class=\"pds-tooltip__content-slot-wrapper\" style={{ display: 'none' }}>\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-C_8VmA8d.system.js"],(function(t){"use strict";var e,o;return{setters:[function(t){e=t.r;o=t.h}],execute:function(){var c="pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}";var f=t("pds_modal_footer",function(){function t(t){e(this,t)}t.prototype.render=function(){return o("footer",{key:"ea47425a063c04c1cdff3481fc09f32bd65b7679",class:"pds-modal__footer"},o("slot",{key:"55c560cb8cca95687eb04ba727ae45542ef2209f"}))};return t}());f.style=c}}}));
|
|
2
|
-
//# sourceMappingURL=p-49265849.system.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-C_8VmA8d.system.js"],(function(d){"use strict";var e,t;return{setters:[function(d){e=d.r;t=d.h}],execute:function(){var s="pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}";var c=d("pds_modal_header",function(){function d(d){e(this,d)}d.prototype.render=function(){return t("header",{key:"63d1121b84d10ea99354d07b029b7625d52d9095",class:"pds-modal__header"},t("slot",{key:"dd08fc600f122e422ccd3161bc558f3b9cc075f9"}))};return d}());c.style=s}}}));
|
|
2
|
-
//# sourceMappingURL=p-71f01676.system.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,c as o,h as e,H as n}from"./p-Uh5ntVcq.js";import{d as p,r}from"./p-_4gljHh-.js";const c=":host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600)}";const s=":host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-2xs);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pine-chip-color-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-color-text-accent);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pine-chip-color-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-color-text-danger);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pine-chip-color-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-color-text-info);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pine-chip-color-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pine-chip-color-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-color-text-success);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pine-chip-color-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-color-text-warning);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-after:var(--pine-dimension-025);margin-block-end:var(--pine-dimension-025);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:calc(var(--pine-dimension-025) / 4);margin-block-end:calc(var(--pine-dimension-025) / 4);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-150)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--large){padding-block:var(--pine-dimension-2xs);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--large) .pds-chip__label,:host(.pds-chip--large) .pds-chip__button{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--large):has(.pds-chip__button){padding:var(--pine-dimension-none)}";const a=class{constructor(e){i(this,e);this.pdsTagCloseClick=o(this,"pdsTagCloseClick");this.dot=false;this.large=false;this.sentiment="neutral";this.variant="text";this.handleCloseClick=()=>{this.pdsTagCloseClick.emit()}}classNames(){const i=["pds-chip"];if(this.large){i.push("pds-chip--large")}if(this.variant){i.push("pds-chip--"+this.variant)}if(this.sentiment){i.push("pds-chip--"+this.sentiment)}return i.join(" ")}setChipContent(){const i=this.variant==="dropdown";const o=i?e("button",{class:"pds-chip__button",type:"button"},this.dot&&e("i",{class:"pds-chip__dot","aria-hidden":"true"}),e("slot",null),e("pds-icon",{icon:p,size:"12px","aria-hidden":"true"})):e("span",{class:"pds-chip__label"},this.dot&&e("i",{class:"pds-chip__dot","aria-hidden":"true"}),e("slot",null));return o}render(){return e(n,{key:"b1987e434a5b9dcc4a5536660822bcb9c1f79e4f",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&e("button",{key:"8f658cd564e86297a9b988d6080135e6d612be36",class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},e("pds-icon",{key:"32266c84697e0ffa3ff5d2e554cdf6b7e598d0e6",icon:r,size:"12px"})))}};a.style=c+s;export{a as pds_chip};
|
|
2
|
-
//# sourceMappingURL=p-742d4490.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsChipTokensCss","pdsChipCss","PdsChip","constructor","hostRef","this","dot","large","sentiment","variant","handleCloseClick","pdsTagCloseClick","emit","classNames","push","join","setChipContent","isDropdown","chipContent","h","class","type","icon","downSmall","size","render","Host","key","id","componentId","onClick","remove"],"sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-chip/pds-chip.tokens'\n",":host {\n --sizing-close: var(--pine-dimension-125);\n\n align-items: center;\n border-radius: var(--pine-dimension-sm);\n display: inline-flex;\n padding-block: var(--pine-dimension-2xs);\n padding-inline: var(--pine-dimension-150);\n}\n\n$pds-chip-sentiment: (\n accent: var(--pine-chip-color-accent),\n danger: var(--pine-chip-color-danger),\n info: var(--pine-chip-color-info),\n neutral: var(--pine-chip-color-neutral),\n success: var(--pine-chip-color-success),\n warning: var(--pine-chip-color-warning),\n);\n\n$pds-chip-sentiment-text: (\n accent: var(--pine-color-text-accent),\n danger: var(--pine-color-text-danger),\n info: var(--pine-color-text-info),\n neutral: var(--pine-color-text-neutral),\n success: var(--pine-color-text-success),\n warning: var(--pine-color-text-warning),\n);\n\n$pds-chip-sentiment-dots: (\n accent: var(--pine-chip-color-accent-dot),\n danger: var(--pine-chip-color-danger-dot),\n info: var(--pine-chip-color-info-dot),\n neutral: var(--pine-chip-color-neutral-dot),\n success: var(--pine-chip-color-success-dot),\n warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n accent: var(--pine-chip-color-accent-hover),\n danger: var(--pine-chip-color-danger-hover),\n info: var(--pine-chip-color-info-hover),\n neutral: var(--pine-chip-color-neutral-hover),\n success: var(--pine-chip-color-success-hover),\n warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n :host(.pds-chip--#{$sentiment}) {\n background: $value;\n border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\n\n // dot colors\n .pds-chip__dot {\n /* stylelint-disable-next-line */\n background: map-get($pds-chip-sentiment-dots, $sentiment);\n }\n\n .pds-chip__label, .pds-chip__button, .pds-chip__close {\n /* stylelint-disable-next-line */\n color: map-get($pds-chip-sentiment-text, $sentiment);\n font-weight: var(--pine-font-weight-medium);\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n /* stylelint-disable-next-line */\n background: map-get($pds-chip-sentiment-hover, $sentiment);\n }\n }\n // dropdown hover colors\n :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n /* stylelint-disable-next-line */\n background: map-get($pds-chip-sentiment-hover, $sentiment);\n }\n}\n\n.pds-chip__dot {\n border: var(--pine-border-width) solid transparent;\n border-radius: var(--pine-border-radius-full);\n display: inline-block;\n height: var(--pine-dimension-2xs);\n margin-block-end: var(--pine-dimension-025);\n margin-inline-end: var(--pine-dimension-2xs);\n width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label {\n align-items: center;\n display: flex;\n}\n\n.pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__dot {\n margin-block-end: calc(var(--pine-dimension-025) / 4);\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n.pds-chip__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-2xs) var(--pine-dimension-150);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n pds-icon {\n margin-inline-end: calc(var(--pine-dimension-025) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--pine-border-radius-full);\n height: var(--sizing-close);\n margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n padding: var(--sizing-close);\n position: relative;\n width: var(--sizing-close);\n\n pds-icon {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n// large\n\n:host(.pds-chip--large) {\n padding-block: var(--pine-dimension-2xs);\n padding-inline: var(--pine-dimension-150);\n\n .pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-heading-6);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n }\n}\n\n:host(.pds-chip--large):has(.pds-chip__button) {\n padding: var(--pine-dimension-none);\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n tag: 'pds-chip',\n styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n shadow: true,\n})\nexport class PdsChip {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether a dot should be displayed on the chip.\n * @defaultValue false\n */\n @Prop() dot = false;\n\n\n /**\n * Determines whether the chip should be displayed in a larger size.\n * @defaultValue false\n */\n @Prop() large = false;\n\n /**\n * Defines the color scheme of the chip.\n * @defaultValue 'neutral'\n */\n @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n /**\n * Sets the style variant of the chip.\n * @defaultValue 'text'\n */\n @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n /**\n * Event emitted when the close button is clicked on a tag variant chip.\n */\n @Event() pdsTagCloseClick: EventEmitter;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n };\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n if (this.large) {\n classNames.push('pds-chip--large');\n }\n if (this.variant) {\n classNames.push('pds-chip--' + this.variant);\n }\n if (this.sentiment) {\n classNames.push('pds-chip--' + this.sentiment);\n }\n\n return classNames.join(' ');\n }\n\n private setChipContent() {\n const isDropdown = this.variant === 'dropdown';\n const chipContent = isDropdown ? (\n <button class=\"pds-chip__button\" type=\"button\">\n {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n </button>\n ) : (\n <span class=\"pds-chip__label\">\n {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n </span>\n );\n\n return chipContent;\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.variant === 'tag' && (\n <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n <pds-icon icon={remove} size=\"12px\"></pds-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"+FAAA,MAAMA,EAAmB,4/BCAzB,MAAMC,EAAa,86M,MCYNC,EAAO,MALpB,WAAAC,CAAAC,G,2DAeUC,KAAGC,IAAG,MAOND,KAAKE,MAAG,MAMRF,KAASG,UAAqE,UAM9EH,KAAOI,QAAgC,OAOvCJ,KAAgBK,iBAAG,KACzBL,KAAKM,iBAAiBC,MAAM,CAiD/B,CA9CS,UAAAC,GACN,MAAMA,EAAa,CAAC,YAEpB,GAAIR,KAAKE,MAAO,CACdM,EAAWC,KAAK,kB,CAElB,GAAIT,KAAKI,QAAS,CAChBI,EAAWC,KAAK,aAAeT,KAAKI,Q,CAEtC,GAAIJ,KAAKG,UAAW,CAClBK,EAAWC,KAAK,aAAeT,KAAKG,U,CAGtC,OAAOK,EAAWE,KAAK,I,CAGjB,cAAAC,GACN,MAAMC,EAAaZ,KAAKI,UAAY,WACpC,MAAMS,EAAcD,EAClBE,EAAQ,UAAAC,MAAM,mBAAmBC,KAAK,UACnChB,KAAKC,KAAOa,EAAA,KAAGC,MAAM,gBAA4B,uBAClDD,EAAa,aACbA,EAAA,YAAUG,KAAMC,EAAWC,KAAK,OAAmB,wBAGrDL,EAAM,QAAAC,MAAM,mBACTf,KAAKC,KAAOa,EAAA,KAAGC,MAAM,gBAA4B,uBAClDD,EAAa,cAIjB,OAAOD,C,CAGT,MAAAO,GACE,OACEN,EAACO,EAAI,CAAAC,IAAA,2CAACP,MAAOf,KAAKQ,aAAce,GAAIvB,KAAKwB,aACtCxB,KAAKW,iBACLX,KAAKI,UAAY,OAChBU,EAAA,UAAAQ,IAAA,2CAAQP,MAAM,kBAAkBC,KAAK,SAASS,QAASzB,KAAKK,iBAAgB,aAAa,UACvFS,EAAA,YAAAQ,IAAA,2CAAUL,KAAMS,EAAQP,KAAK,U","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-C_8VmA8d.system.js","./p-BhPuKJbQ.system.js","./p-B4W0_y2p.system.js"],(function(o){"use strict";var r,e,t,n,i,a,l;return{setters:[function(o){r=o.r;e=o.c;t=o.h;n=o.H;i=o.g},function(o){a=o.h},function(o){l=o.b}],execute:function(){var d=":host{--button-dimension:40px;--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--pine-border);border-color:var(--color-border-default);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--button-dimension);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;--button-loader-color:inherit;border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";var s=o("pds_button",function(){function o(o){var t=this;r(this,o);this.pdsClick=e(this,"pdsClick");this.disabled=false;this.fullWidth=false;this.icon=null;this.iconOnly=false;this.loading=false;this.type="button";this.variant="primary";this.handleClick=function(o){if(t.loading){o.preventDefault();return}if(!t.href&&t.type!="button"){if(a(t.el)){var r=t.el.closest("form");if(r){o.preventDefault();var e=document.createElement("button");e.type=t.type;e.style.display="none";r.appendChild(e);e.click();e.remove()}}}t.pdsClick.emit(o)}}o.prototype.classNames=function(){var o=["pds-button"];if(this.variant){o.push("pds-button--"+this.variant)}if(this.iconOnly){o.push("pds-button--icon-only")}if(this.loading){o.push("pds-button--loading")}return o.join(" ")};o.prototype.hasSlotContent=function(o){var r=this.el.querySelectorAll('[slot="'.concat(o,'"]'));return r.length>0};o.prototype.renderStartContent=function(){var o=this.icon&&this.variant!=="disclosure";var r=this.hasSlotContent("start");if(Boolean(o)){return t("pds-icon",{class:this.loading?"pds-button__icon--hidden":"",name:this.icon,part:"icon","aria-hidden":"true"})}else if(Boolean(r)){return t("span",{class:"pds-button__icon ".concat(this.loading?"pds-button__icon--hidden":"")},t("slot",{name:"start"}))}return null};o.prototype.renderEndContent=function(){if(this.iconOnly){return null}if(this.variant==="disclosure"){return t("pds-icon",{class:this.loading?"pds-button__icon--hidden":"",icon:l,part:"caret","aria-hidden":"true"})}else if(this.hasSlotContent("end")){return t("span",{class:"pds-button__icon ".concat(this.loading?"pds-button__icon--hidden":"")},t("slot",{name:"end"}))}return null};o.prototype.render=function(){var o=this;var r={class:this.classNames(),part:"button"};var e=function(){if(o.href){return Object.assign(Object.assign({},r),{href:o.disabled?null:o.href,target:o.target})}return Object.assign(Object.assign({},r),{"aria-busy":o.loading?"true":null,"aria-live":o.loading?"polite":null,disabled:o.disabled,name:o.name,type:o.type,value:o.value})};var i=this.href?"a":"button";var a=this.loading||this.iconOnly;var l=t("div",{class:"pds-button__content",part:"button-content"},this.renderStartContent(),t("span",{class:"pds-button__text ".concat(a?"pds-button__text--hidden":""),part:"button-text"},t("slot",null)),this.loading&&t("span",{class:"pds-button__loader"},t("pds-loader",{"is-loading":true,size:"var(--pine-font-size-body-2xl)",variant:"spinner"},"Loading...")),this.renderEndContent());return t(n,{"aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},t(i,Object.assign({},e()),l))};Object.defineProperty(o.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});return o}());s.style=d}}}));
|
|
2
|
-
//# sourceMappingURL=p-7e92ec48.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsButtonCss","PdsButton","exports","class_1","hostRef","_this","this","disabled","fullWidth","icon","iconOnly","loading","type","variant","handleClick","ev","preventDefault","href","hasShadowDom","el","form","closest","fakeButton","document","createElement","style","display","appendChild","click","remove","pdsClick","emit","prototype","classNames","push","join","hasSlotContent","slotName","elements","querySelectorAll","concat","length","renderStartContent","hasIcon","hasStartSlot","Boolean","h","class","name","part","renderEndContent","caretDown","render","commonProps","attributes","Object","assign","target","value","ContentElement","hideText","content","size","Host","id","componentId","onClick"],"sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --button-dimension: 40px;\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n button {\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__content {\n justify-content: center;\n text-align: center;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n:host([disabled=\"true\"]) {\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--pine-border);\n border-color: var(--color-border-default);\n border-radius: var(--pine-border-radius-full);\n box-sizing: border-box;\n color: var(--color-text-default); // Set in the variant classes below\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--button-dimension);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n text-decoration: none;\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--color-border-focus);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: inherit;\n --button-loader-color: inherit;\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n gap: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n.pds-button__icon {\n display: inline-flex;\n}\n\n.pds-button__text {\n align-items: center;\n display: inline-flex;\n}\n\n.pds-button__icon--hidden,\n.pds-button__text--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\n}\n\n.pds-button--icon-only {\n align-items: center;\n border-radius: var(--pine-border-radius-full);\n height: var(--button-dimension);\n justify-content: center;\n min-height: var(--button-dimension);\n min-width: var(--button-dimension);\n padding: var(--pine-dimension-xs);\n width: var(--button-dimension);\n\n .pds-button__content {\n height: 100%;\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__text--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","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n * @slot (default) - Button text.\n * @slot start - Content to display before the button text.\n * @slot end - Content to display after the button text.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines the button's disabled state.\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Determines if the button should take up the full width of its container.\n * @defaultValue false\n */\n @Prop() fullWidth? = false;\n\n /**\n * If provided, renders the component as an anchor (`<a>`) element instead of a button.\n * When using href, button-specific props (type, name, value, loading) will be ignored.\n */\n @Prop() href?: string;\n\n /**\n * Displays a leading icon in the button. DEPRECATED.\n * @defaultValue null\n * @deprecated Use `start` slot instead.\n */\n @Prop() icon?: string = null;\n\n /**\n * When true, displays only the icon and visually hides the text (keeping it accessible).\n */\n @Prop() iconOnly? = false;\n\n /**\n * Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n */\n @Prop() loading? = false;\n\n /**\n * Provides the button with a submittable name.\n */\n @Prop() name?: string;\n\n /**\n * Specifies where to open the linked document when href is provided.\n * Only applies when href is set.\n */\n @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n /**\n * Provides button with a type.\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Sets the style variant of the button.\n * @defaultValue primary\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n @Event() pdsClick: EventEmitter;\n\n private handleClick = (ev: Event) => {\n if (this.loading) {\n ev.preventDefault();\n return;\n }\n\n if (!this.href && this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n this.pdsClick.emit(ev);\n };\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n if (this.iconOnly) {\n classNames.push('pds-button--icon-only');\n }\n\n if (this.loading) {\n classNames.push('pds-button--loading');\n }\n\n return classNames.join(' ');\n }\n\n private hasSlotContent(slotName: string): boolean {\n const elements = this.el.querySelectorAll(`[slot=\"${slotName}\"]`);\n return elements.length > 0;\n }\n\n private renderStartContent() {\n const hasIcon = this.icon && this.variant !== 'disclosure';\n const hasStartSlot = this.hasSlotContent('start');\n\n if (Boolean(hasIcon)) {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasStartSlot)) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"start\" /></span>;\n }\n\n return null;\n }\n\n private renderEndContent() {\n if (this.iconOnly) {\n return null;\n }\n\n if (this.variant === 'disclosure') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (this.hasSlotContent('end')) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"end\" /></span>;\n }\n\n return null;\n }\n\n render() {\n // Common props for both button and anchor elements\n const commonProps = {\n class: this.classNames(),\n part: 'button',\n };\n\n const attributes = () => {\n if (this.href) {\n return {\n // Anchor element props\n ...commonProps,\n href: this.disabled ? null : this.href,\n target: this.target,\n };\n }\n\n return {\n // Button element props\n ...commonProps,\n 'aria-busy': this.loading ? 'true' : null,\n 'aria-live': this.loading ? 'polite' : null,\n 'disabled': this.disabled,\n 'name': this.name,\n 'type': this.type,\n 'value': this.value,\n };\n };\n\n const ContentElement = this.href ? 'a' : 'button';\n\n // Hide text when loading or iconOnly is true\n const hideText = this.loading || this.iconOnly;\n\n const content = (\n <div class=\"pds-button__content\" part=\"button-content\">\n {this.renderStartContent()}\n\n <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n <slot />\n </span>\n\n {this.loading && (\n <span class=\"pds-button__loader\">\n <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\">\n Loading...\n </pds-loader>\n </span>\n )}\n\n {this.renderEndContent()}\n </div>\n );\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <ContentElement {...attributes()}>\n {content}\n </ContentElement>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-C_8VmA8d.system.js"],(function(e){"use strict";var t,a,n,i;return{setters:[function(e){t=e.r;a=e.h;n=e.H;i=e.g}],execute:function(){var s=":host{display:block}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}";var l=e("pds_tabpanel",function(){function e(e){t(this,e);this.selected=false}e.prototype.render=function(){return a(n,{key:"fe7548d8da3149d13d23b41d6860beb1f351b3c6",slot:"tabpanels"},a("div",{key:"bf50bfc20be721ba467ff22ba24f0410153223f5",role:"tabpanel",id:this.parentComponentId+"__"+this.name+"-panel",tabindex:"0","aria-labelledby":this.parentComponentId+"__"+this.name,class:this.selected?"pds-tabpanel is-active":"pds-tabpanel"},a("slot",{key:"3de1657e963e7e9fca81fac07f78edc064cd86e7"})))};Object.defineProperty(e.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});return e}());l.style=s}}}));
|
|
2
|
-
//# sourceMappingURL=p-7ff213bb.system.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as i,h as s,H as t,g as o}from"./p-Uh5ntVcq.js";import{a as r,m as a}from"./p-DTL_39D_.js";import{f as l}from"./p-_4gljHh-.js";import{d as n}from"./p-DkabwBZT.js";import{i as d}from"./p-C0M1gTKv.js";const p=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";const c=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";const h=":host{display:inline}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__field{background:var(--pine-color-background-container);border:1px solid var(--pine-color-border);border-radius:var(--pine-dimension-125);color:var(--pine-color-text-active);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);}.pds-input__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-input__field:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed;}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:hover{border-color:var(--pine-color-border-hover)}.pds-input__field:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-input__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-input__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-input__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-input__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-input__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-input__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-input__error-message,.pds-input__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}";const u=class{constructor(s){e(this,s);this.pdsBlur=i(this,"pdsBlur");this.pdsChange=i(this,"pdsChange");this.pdsFocus=i(this,"pdsFocus");this.pdsInput=i(this,"pdsInput");this.inheritedAttributes={};this.isComposing=false;this.type="text";this.value="";this.hasFocus=false;this.onInputEvent=e=>{const i=e.target;if(i){this.value=i.value||""}this.emitInputChange(e)};this.onChangeEvent=e=>{this.emitValueChange(e)};this.onBlurEvent=e=>{this.hasFocus=false;if(this.focusedValue!==this.value){this.emitValueChange(e)}this.pdsBlur.emit(e)};this.onFocusEvent=e=>{this.hasFocus=true;this.focusedValue=this.value;this.pdsFocus.emit(e)};this.onCompositionStart=()=>{this.isComposing=true};this.onCompositionEnd=()=>{this.isComposing=false}}async setFocus(){if(this.nativeInput){this.nativeInput.focus()}}debounceChanged(){const{pdsInput:e,debounce:i,originalPdsInput:s}=this;this.pdsInput=i===undefined?s!==null&&s!==void 0?s:e:n(e,i)}valueChanged(){const e=this.nativeInput;const i=this.getValue();if(e&&e.value!==i&&!this.isComposing){e.value=i}}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}emitValueChange(e){const{value:i}=this;const s=i==null?i:i.toString();this.focusedValue=s;this.pdsChange.emit({value:s,event:e})}emitInputChange(e){const{value:i}=this;const s=i==null?i:i.toString();this.pdsInput.emit({value:s,event:e})}componentWillLoad(){this.inheritedAttributes=Object.assign({},d(this.el))}componentDidLoad(){this.debounceChanged()}inputClassNames(){const e=["pds-input__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join(" ")}render(){return s(t,{key:"a2a05a1e0d3e7722c1dc3dea957facaf5ef24c3c","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null},s("div",{key:"d95ad9600e7d80050bf41503a2eb9ccb91f77893",class:"pds-input"},this.label&&s("label",{key:"b5772c8283fe3c8899235c432bbabd36012c2aef",class:"pds-input__label",htmlFor:this.componentId},this.label),s("input",Object.assign({key:"65a2ff8c31ebf545caf755609fa2f3e95cdd1098",class:this.inputClassNames(),ref:e=>this.nativeInput=e,"aria-describedby":r(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,autocomplete:this.autocomplete,disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,type:this.type,value:this.value,onInput:this.onInputEvent,onChange:this.onChangeEvent,onBlur:this.onBlurEvent,onFocus:this.onFocusEvent,onCompositionstart:this.onCompositionStart,onCompositionend:this.onCompositionEnd},this.inheritedAttributes)),this.helperMessage&&s("p",{key:"a7a30bc28a0e9aa16ebd842b8b3851569f556591",class:"pds-input__helper-message",id:a(this.componentId,"helper")},this.helperMessage),this.errorMessage&&s("p",{key:"3ffc19523e9378534e665ba52247935e924d4168",class:"pds-input__error-message",id:a(this.componentId,"error"),"aria-live":"assertive"},s("pds-icon",{key:"6961e5735ffe279414ea5333224baa72561697d5",icon:l,size:"small"}),this.errorMessage)))}get el(){return o(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}};u.style=p+(c+h);export{u as pds_input};
|
|
2
|
-
//# sourceMappingURL=p-8023086c.entry.js.map
|