@pine-ds/core 2.16.3 → 2.16.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/index2.js +1 -1
- package/components/index2.js.map +1 -1
- package/components/pds-box.js +1 -1
- package/components/pds-box.js.map +1 -1
- package/components/pds-button2.js +1 -1
- package/components/pds-button2.js.map +1 -1
- package/components/pds-checkbox2.js +4 -5
- package/components/pds-checkbox2.js.map +1 -1
- package/components/pds-chip.js +2 -2
- package/components/pds-chip.js.map +1 -1
- package/components/pds-icon2.js +2 -2
- package/components/pds-icon2.js.map +1 -1
- package/components/pds-input.js +5 -4
- package/components/pds-input.js.map +1 -1
- package/components/pds-popover.js +1 -1
- package/components/pds-popover.js.map +1 -1
- package/components/pds-radio.js +4 -5
- package/components/pds-radio.js.map +1 -1
- package/components/pds-row.js +1 -1
- package/components/pds-row.js.map +1 -1
- package/components/pds-select.js +3 -3
- package/components/pds-select.js.map +1 -1
- package/components/pds-switch.js +7 -2
- package/components/pds-switch.js.map +1 -1
- package/components/pds-tab.js +1 -1
- package/components/pds-tab.js.map +1 -1
- package/components/pds-tabs.js +1 -1
- package/components/pds-tabs.js.map +1 -1
- package/dist/cjs/{index-59b0d7e2.js → index-603f98cb.js} +2 -2
- package/dist/cjs/index-603f98cb.js.map +1 -0
- package/dist/cjs/pds-accordion.cjs.entry.js +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +1 -1
- package/dist/cjs/pds-box.cjs.entry.js +1 -1
- package/dist/cjs/pds-box.cjs.entry.js.map +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-checkbox.cjs.entry.js +5 -6
- package/dist/cjs/pds-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +3 -3
- package/dist/cjs/pds-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +1 -1
- package/dist/cjs/pds-icon.cjs.entry.js +2 -2
- package/dist/cjs/pds-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +6 -5
- package/dist/cjs/pds-input.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-link.cjs.entry.js +1 -1
- package/dist/cjs/pds-popover.cjs.entry.js +1 -1
- package/dist/cjs/pds-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-radio.cjs.entry.js +5 -6
- package/dist/cjs/pds-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-row.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-select.cjs.entry.js +4 -4
- package/dist/cjs/pds-select.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-sortable-item.cjs.entry.js +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +8 -3
- package/dist/cjs/pds-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tab.cjs.entry.js +1 -1
- package/dist/cjs/pds-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabs.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +1 -1
- package/dist/collection/components/pds-box/pds-box.css +7 -6
- package/dist/collection/components/pds-button/pds-button.css +4 -0
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +7 -4
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +3 -4
- package/dist/collection/components/pds-checkbox/pds-checkbox.js.map +1 -1
- package/dist/collection/components/pds-chip/pds-chip.css +1 -1
- package/dist/collection/components/pds-chip/pds-chip.tokens.css +17 -17
- package/dist/collection/components/pds-input/pds-input.css +7 -2
- package/dist/collection/components/pds-input/pds-input.js +4 -3
- package/dist/collection/components/pds-input/pds-input.js.map +1 -1
- package/dist/collection/components/pds-popover/pds-popover.css +1 -1
- package/dist/collection/components/pds-radio/pds-radio.css +6 -2
- package/dist/collection/components/pds-radio/pds-radio.js +3 -4
- package/dist/collection/components/pds-radio/pds-radio.js.map +1 -1
- package/dist/collection/components/pds-row/pds-row.css +2 -2
- package/dist/collection/components/pds-select/pds-select.css +3 -2
- package/dist/collection/components/pds-select/pds-select.js +3 -3
- package/dist/collection/components/pds-select/pds-select.js.map +1 -1
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +7 -2
- package/dist/collection/components/pds-tabs/pds-tabs.css +1 -0
- package/dist/docs.json +2 -2
- package/dist/esm/{index-7f8e0fa6.js → index-858623fe.js} +2 -2
- package/dist/esm/index-858623fe.js.map +1 -0
- package/dist/esm/pds-accordion.entry.js +1 -1
- package/dist/esm/pds-avatar.entry.js +1 -1
- package/dist/esm/pds-box.entry.js +1 -1
- package/dist/esm/pds-box.entry.js.map +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 +5 -6
- package/dist/esm/pds-checkbox.entry.js.map +1 -1
- package/dist/esm/pds-chip.entry.js +3 -3
- package/dist/esm/pds-chip.entry.js.map +1 -1
- package/dist/esm/pds-copytext.entry.js +1 -1
- package/dist/esm/pds-icon.entry.js +2 -2
- package/dist/esm/pds-icon.entry.js.map +1 -1
- package/dist/esm/pds-input.entry.js +6 -5
- package/dist/esm/pds-input.entry.js.map +1 -1
- package/dist/esm/pds-link.entry.js +1 -1
- package/dist/esm/pds-popover.entry.js +1 -1
- package/dist/esm/pds-popover.entry.js.map +1 -1
- package/dist/esm/pds-radio.entry.js +5 -6
- package/dist/esm/pds-radio.entry.js.map +1 -1
- package/dist/esm/pds-row.entry.js +1 -1
- package/dist/esm/pds-row.entry.js.map +1 -1
- package/dist/esm/pds-select.entry.js +4 -4
- package/dist/esm/pds-select.entry.js.map +1 -1
- package/dist/esm/pds-sortable-item.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js +8 -3
- package/dist/esm/pds-switch.entry.js.map +1 -1
- package/dist/esm/pds-tab.entry.js +1 -1
- package/dist/esm/pds-tab.entry.js.map +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +1 -1
- package/dist/esm/pds-tabs.entry.js +1 -1
- package/dist/esm/pds-tabs.entry.js.map +1 -1
- package/dist/esm/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/{index-7f8e0fa6.js → index-858623fe.js} +1 -1
- package/dist/esm-es5/index-858623fe.js.map +1 -0
- 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-box.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js.map +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js.map +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js.map +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js.map +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-icon.entry.js.map +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js.map +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-popover.entry.js +1 -1
- package/dist/esm-es5/pds-popover.entry.js.map +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js.map +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js.map +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js.map +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js.map +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js.map +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js.map +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/pine-core/p-0399a821.entry.js +2 -0
- package/dist/pine-core/p-0399a821.entry.js.map +1 -0
- package/dist/pine-core/p-03e4027f.system.entry.js +2 -0
- package/dist/pine-core/p-03e4027f.system.entry.js.map +1 -0
- package/dist/pine-core/{p-fce8b94f.system.entry.js → p-04fb06cd.system.entry.js} +2 -2
- package/dist/pine-core/{p-841eae86.entry.js → p-0ad21851.entry.js} +2 -2
- package/dist/pine-core/{p-3b529bb7.system.entry.js → p-0c68a8ea.system.entry.js} +2 -2
- package/dist/pine-core/{p-c564c31b.system.entry.js → p-137aebf6.system.entry.js} +2 -2
- package/dist/pine-core/{p-028fcdbc.entry.js → p-13bc1706.entry.js} +2 -2
- package/dist/pine-core/{p-2aa49969.system.entry.js → p-21c441f2.system.entry.js} +2 -2
- package/dist/pine-core/p-21dc34b7.system.entry.js +2 -0
- package/dist/pine-core/p-21dc34b7.system.entry.js.map +1 -0
- package/dist/pine-core/p-2583c14d.entry.js +2 -0
- package/dist/pine-core/p-2583c14d.entry.js.map +1 -0
- package/dist/pine-core/{p-6e1737e0.js → p-2f60d558.js} +1 -1
- package/dist/pine-core/p-2f60d558.js.map +1 -0
- package/dist/pine-core/p-3c6a0b2a.system.entry.js.map +1 -1
- package/dist/pine-core/{p-3c0abfe5.system.entry.js → p-4158fa20.system.entry.js} +2 -2
- package/dist/pine-core/p-5ab15bbc.entry.js +2 -0
- package/dist/pine-core/p-5ab15bbc.entry.js.map +1 -0
- package/dist/pine-core/p-5c04aee0.system.js +1 -1
- package/dist/pine-core/p-600b7640.system.entry.js +2 -0
- package/dist/pine-core/p-600b7640.system.entry.js.map +1 -0
- package/dist/pine-core/p-61666500.system.entry.js +2 -0
- package/dist/pine-core/p-61666500.system.entry.js.map +1 -0
- package/dist/pine-core/{p-6c42ed23.entry.js → p-61cf32c6.entry.js} +2 -2
- package/dist/pine-core/p-61cf32c6.entry.js.map +1 -0
- package/dist/pine-core/p-6e8f3bb4.entry.js.map +1 -1
- package/dist/pine-core/p-72218979.system.entry.js +2 -0
- package/dist/pine-core/p-72218979.system.entry.js.map +1 -0
- package/dist/pine-core/p-89fd4ca2.entry.js +2 -0
- package/dist/pine-core/p-89fd4ca2.entry.js.map +1 -0
- package/dist/pine-core/{p-b0cf37c0.entry.js → p-8b3d405b.entry.js} +2 -2
- package/dist/pine-core/{p-14c58ba3.entry.js → p-8b9e5fe5.entry.js} +2 -2
- package/dist/pine-core/p-910c4422.entry.js +2 -0
- package/dist/pine-core/p-910c4422.entry.js.map +1 -0
- package/dist/pine-core/p-a924b8a6.system.entry.js +2 -0
- package/dist/pine-core/p-a924b8a6.system.entry.js.map +1 -0
- package/dist/pine-core/{p-55b10add.system.entry.js → p-acf6cf26.system.entry.js} +2 -2
- package/dist/pine-core/{p-71ba893c.entry.js → p-b20dd7d7.entry.js} +2 -2
- package/dist/pine-core/p-b2163263.entry.js +2 -0
- package/dist/pine-core/p-b2163263.entry.js.map +1 -0
- package/dist/pine-core/p-b245df0a.system.entry.js +2 -0
- package/dist/pine-core/p-b245df0a.system.entry.js.map +1 -0
- package/dist/pine-core/{p-3fa11581.entry.js → p-b566ad6b.entry.js} +2 -2
- package/dist/pine-core/p-b6dfd404.system.entry.js +2 -0
- package/dist/pine-core/p-b6dfd404.system.entry.js.map +1 -0
- package/dist/pine-core/p-b95c0169.system.entry.js +2 -0
- package/dist/pine-core/p-b95c0169.system.entry.js.map +1 -0
- package/dist/pine-core/p-bda9a6a0.entry.js +2 -0
- package/dist/pine-core/p-bda9a6a0.entry.js.map +1 -0
- package/dist/pine-core/{p-d61972a6.system.entry.js → p-c20bc538.system.entry.js} +2 -2
- package/dist/pine-core/p-c53f6513.entry.js +2 -0
- package/dist/pine-core/p-c53f6513.entry.js.map +1 -0
- package/dist/pine-core/p-c849426d.entry.js +2 -0
- package/dist/pine-core/p-c849426d.entry.js.map +1 -0
- package/dist/pine-core/{p-7a7cd1eb.entry.js → p-d8188c09.entry.js} +2 -2
- package/dist/pine-core/p-d92c8d63.system.entry.js +2 -0
- package/dist/pine-core/p-d92c8d63.system.entry.js.map +1 -0
- package/dist/pine-core/{p-840c252f.system.js → p-dba6ac9c.system.js} +1 -1
- package/dist/pine-core/p-dba6ac9c.system.js.map +1 -0
- package/dist/pine-core/p-e45ee7bb.entry.js +2 -0
- package/dist/pine-core/p-e45ee7bb.entry.js.map +1 -0
- package/dist/pine-core/p-ee78b4c6.entry.js +2 -0
- package/dist/pine-core/p-ee78b4c6.entry.js.map +1 -0
- package/dist/pine-core/p-f70ebb08.system.entry.js +2 -0
- package/dist/pine-core/p-f70ebb08.system.entry.js.map +1 -0
- package/dist/pine-core/{p-a5c127c1.system.entry.js → p-fe70473e.system.entry.js} +2 -2
- package/dist/pine-core/p-fe70473e.system.entry.js.map +1 -0
- package/dist/pine-core/pine-core.css +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/pine-core/svg/copy-07.svg +1 -0
- package/dist/pine-core/svg/keyboard-01.svg +1 -0
- package/dist/pine-core/svg/layout-bottom.svg +1 -0
- package/dist/pine-core/svg/list-numbers.svg +1 -1
- package/dist/pine-core/svg/message-text-square-02.svg +1 -0
- package/dist/pine-core/svg/music-note-01.svg +1 -0
- package/dist/pine-core/svg/plus-square.svg +1 -0
- package/dist/pine-core/svg/quote.svg +1 -1
- package/dist/pine-core/svg/square-dollar.svg +1 -0
- package/dist/pine-core/svg/subscript.svg +1 -1
- package/dist/pine-core/svg/trophy.svg +1 -1
- package/dist/types/components/pds-select/pds-select.d.ts +1 -1
- package/dist/types/components.d.ts +1 -1
- package/hydrate/index.js +33 -31
- package/hydrate/index.mjs +33 -31
- package/package.json +2 -2
- package/components/pds-label.js +0 -11
- package/components/pds-label.js.map +0 -1
- package/dist/cjs/index-59b0d7e2.js.map +0 -1
- package/dist/cjs/pds-label-e0d9a97d.js +0 -13
- package/dist/cjs/pds-label-e0d9a97d.js.map +0 -1
- package/dist/esm/index-7f8e0fa6.js.map +0 -1
- package/dist/esm/pds-label-949a17b6.js +0 -11
- package/dist/esm/pds-label-949a17b6.js.map +0 -1
- package/dist/esm-es5/index-7f8e0fa6.js.map +0 -1
- package/dist/esm-es5/pds-label-949a17b6.js +0 -2
- package/dist/esm-es5/pds-label-949a17b6.js.map +0 -1
- package/dist/pine-core/p-01fd3a62.system.entry.js +0 -2
- package/dist/pine-core/p-01fd3a62.system.entry.js.map +0 -1
- package/dist/pine-core/p-0c09ce7a.js +0 -2
- package/dist/pine-core/p-0c09ce7a.js.map +0 -1
- package/dist/pine-core/p-11b3830e.entry.js +0 -2
- package/dist/pine-core/p-11b3830e.entry.js.map +0 -1
- package/dist/pine-core/p-129ea618.entry.js +0 -2
- package/dist/pine-core/p-129ea618.entry.js.map +0 -1
- package/dist/pine-core/p-2d0b1310.system.entry.js +0 -2
- package/dist/pine-core/p-2d0b1310.system.entry.js.map +0 -1
- package/dist/pine-core/p-325e7255.system.entry.js +0 -2
- package/dist/pine-core/p-325e7255.system.entry.js.map +0 -1
- package/dist/pine-core/p-511f7b8e.entry.js +0 -2
- package/dist/pine-core/p-511f7b8e.entry.js.map +0 -1
- package/dist/pine-core/p-520cb092.entry.js +0 -2
- package/dist/pine-core/p-520cb092.entry.js.map +0 -1
- package/dist/pine-core/p-61ddfc76.system.entry.js +0 -2
- package/dist/pine-core/p-61ddfc76.system.entry.js.map +0 -1
- package/dist/pine-core/p-6500852d.system.entry.js +0 -2
- package/dist/pine-core/p-6500852d.system.entry.js.map +0 -1
- package/dist/pine-core/p-6c42ed23.entry.js.map +0 -1
- package/dist/pine-core/p-6e1737e0.js.map +0 -1
- package/dist/pine-core/p-8220fa98.system.entry.js +0 -2
- package/dist/pine-core/p-8220fa98.system.entry.js.map +0 -1
- package/dist/pine-core/p-840c252f.system.js.map +0 -1
- package/dist/pine-core/p-8d1efd85.system.js +0 -2
- package/dist/pine-core/p-8d1efd85.system.js.map +0 -1
- package/dist/pine-core/p-9e9f1428.entry.js +0 -2
- package/dist/pine-core/p-9e9f1428.entry.js.map +0 -1
- package/dist/pine-core/p-a542bd00.entry.js +0 -2
- package/dist/pine-core/p-a542bd00.entry.js.map +0 -1
- package/dist/pine-core/p-a5ab26b7.entry.js +0 -2
- package/dist/pine-core/p-a5ab26b7.entry.js.map +0 -1
- package/dist/pine-core/p-a5c127c1.system.entry.js.map +0 -1
- package/dist/pine-core/p-aab44395.system.entry.js +0 -2
- package/dist/pine-core/p-aab44395.system.entry.js.map +0 -1
- package/dist/pine-core/p-b164dfe7.entry.js +0 -2
- package/dist/pine-core/p-b164dfe7.entry.js.map +0 -1
- package/dist/pine-core/p-b1aa0e9d.system.entry.js +0 -2
- package/dist/pine-core/p-b1aa0e9d.system.entry.js.map +0 -1
- package/dist/pine-core/p-d410221a.system.entry.js +0 -2
- package/dist/pine-core/p-d410221a.system.entry.js.map +0 -1
- package/dist/pine-core/p-d6f5b0a5.system.entry.js +0 -2
- package/dist/pine-core/p-d6f5b0a5.system.entry.js.map +0 -1
- package/dist/pine-core/p-dbd37883.entry.js +0 -2
- package/dist/pine-core/p-dbd37883.entry.js.map +0 -1
- package/dist/pine-core/p-ec1f256a.entry.js +0 -2
- package/dist/pine-core/p-ec1f256a.entry.js.map +0 -1
- package/dist/pine-core/p-ee3cc6ce.entry.js +0 -2
- package/dist/pine-core/p-ee3cc6ce.entry.js.map +0 -1
- package/dist/pine-core/p-f8e61c4c.system.entry.js +0 -2
- package/dist/pine-core/p-f8e61c4c.system.entry.js.map +0 -1
- /package/dist/pine-core/{p-fce8b94f.system.entry.js.map → p-04fb06cd.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-841eae86.entry.js.map → p-0ad21851.entry.js.map} +0 -0
- /package/dist/pine-core/{p-3b529bb7.system.entry.js.map → p-0c68a8ea.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c564c31b.system.entry.js.map → p-137aebf6.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-028fcdbc.entry.js.map → p-13bc1706.entry.js.map} +0 -0
- /package/dist/pine-core/{p-2aa49969.system.entry.js.map → p-21c441f2.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-3c0abfe5.system.entry.js.map → p-4158fa20.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b0cf37c0.entry.js.map → p-8b3d405b.entry.js.map} +0 -0
- /package/dist/pine-core/{p-14c58ba3.entry.js.map → p-8b9e5fe5.entry.js.map} +0 -0
- /package/dist/pine-core/{p-55b10add.system.entry.js.map → p-acf6cf26.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-71ba893c.entry.js.map → p-b20dd7d7.entry.js.map} +0 -0
- /package/dist/pine-core/{p-3fa11581.entry.js.map → p-b566ad6b.entry.js.map} +0 -0
- /package/dist/pine-core/{p-d61972a6.system.entry.js.map → p-c20bc538.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7a7cd1eb.entry.js.map → p-d8188c09.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsRowCss","PdsRowStyle0","PdsRow","exports","this","colGapMap","none","xxs","xs","sm","md","lg","xl","xxl","class_1","prototype","render","rowClasses","concat","alignItems","undefined","trim","border","justifyContent","noWrap","rowInlineStyles","Object","assign","colGap","minHeight","h","Host","key","class","style"],"sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /**\n * Defines the vertical alignment of the row items.\n * @defaultValue start\n */\n @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * If `true`, the row will have a border.\n */\n @Prop() border? = false;\n\n /**\n * Defines the spacing between the row items.\n */\n @Prop() colGap?: BoxTShirtSizeType | null;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Defines the horizontal alignment of the row items.\n * @defaultValue start\n */\n @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n /**\n * The minimum height of the row. Used in conjunction with alignment props\n */\n @Prop() minHeight?: string;\n\n /**\n * If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in BoxTShirtSizeType]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"mappings":"kJAAA,IAAMA,EAAY,ynFAClB,IAAAC,EAAeD,E,ICOFE,EAAMC,EAAA,qB,wBAsCTC,KAAAC,UAAoD,CAC1DC,KAAM,IACNC,IAAK,SACLC,GAAI,QACJC,GAAI,OACJC,GAAI,SACJC,GAAI,UACJC,GAAI,OACJC,IAAK,Q,sCApCW,M,oHA0BA,K,CAalBC,EAAAC,UAAAC,OAAA,WACE,IAAMC,EAAa,SAAAC,OACjBd,KAAKe,aAAeC,WAAahB,KAAKe,WAAWE,SAAW,GAAK,mBAAAH,OAAmBd,KAAKe,YAAe,GAAE,UAAAD,OAC1Gd,KAAKkB,OAAS,kBAAoB,GAAE,UAAAJ,OACpCd,KAAKmB,iBAAmBH,WAAahB,KAAKmB,eAAeF,SAAW,GAAK,uBAAAH,OAAuBd,KAAKmB,gBAAmB,GAAE,UAAAL,OAC1Hd,KAAKoB,OAAS,mBAAqB,GAAE,QAGvC,IAAMC,EAAeC,OAAAC,OAAAD,OAAAC,OAAA,GACfvB,KAAKwB,QAAU,CACjB,cAAexB,KAAKwB,SAAWR,WAAahB,KAAKwB,OAAOP,SAAW,GAAKjB,KAAKC,UAAUD,KAAKwB,QAAU,GACtG,cAAexB,KAAKwB,SAAWR,WAAahB,KAAKwB,OAAOP,SAAW,GAAKjB,KAAKC,UAAUD,KAAKwB,QAAU,KAEpGxB,KAAKyB,WAAa,CACpB,aAAczB,KAAKyB,YAIvB,OAAOC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,WAAAf,OAAWD,GAAciB,MAAOT,G,WAnErC,I","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as o,h as e,H as n}from"./p-87fe352f.js";import{d as r,r as p}from"./p-2f60d558.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=c;const a=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--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,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}: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);display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.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{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}: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)}";const d=a;const h=class{constructor(e){i(this,e);this.pdsTagCloseClick=o(this,"pdsTagCloseClick",7);this.handleCloseClick=()=>{this.pdsTagCloseClick.emit()};this.componentId=undefined;this.dot=false;this.label=undefined;this.large=false;this.sentiment="neutral";this.variant="text"}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"}),this.label,e("pds-icon",{icon:r,size:"12px","aria-hidden":"true"})):e("span",{class:"pds-chip__label"},this.dot&&e("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return o}render(){return e(n,{key:"91f7d9a87538c4b30b16462061a61fb92812732f",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&e("button",{key:"bee8696d3644f33d8630a4ab93ff83c8b1d7ee78",class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},e("pds-icon",{key:"5a375bf7507f7ac674a6f3c27048e2c218064bb4",icon:p,size:"12px"})))}};h.style=s+d;export{h as pds_chip};
|
|
2
|
+
//# sourceMappingURL=p-89fd4ca2.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsChipTokensCss","PdsChipStyle0","pdsChipCss","PdsChipStyle1","PdsChip","this","handleCloseClick","pdsTagCloseClick","emit","classNames","large","push","variant","sentiment","join","setChipContent","isDropdown","chipContent","h","class","type","dot","label","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":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:host {\n --pine-chip-color-accent: var(--pine-color-purple-100);\n --pine-chip-color-accent-hover: var(--pine-color-purple-300);\n --pine-chip-color-accent-dot: var(--pine-color-purple-600);\n --pine-chip-color-danger: var(--pine-color-red-100);\n --pine-chip-color-danger-hover: var(--pine-color-red-300);\n --pine-chip-color-danger-dot: var(--pine-color-red-600);\n --pine-chip-color-info: var(--pine-color-blue-100);\n --pine-chip-color-info-hover: var(--pine-color-blue-300);\n --pine-chip-color-info-dot: var(--pine-color-blue-600);\n --pine-chip-color-neutral: var(--pine-color-grey-100);\n --pine-chip-color-neutral-hover: var(--pine-color-grey-300);\n --pine-chip-color-neutral-dot: var(--pine-color-grey-600);\n --pine-chip-color-success: var(--pine-color-green-100);\n --pine-chip-color-success-hover: var(--pine-color-green-300);\n --pine-chip-color-success-dot: var(--pine-color-green-600);\n --pine-chip-color-warning: var(--pine-color-yellow-100);\n --pine-chip-color-warning-hover: var(--pine-color-yellow-300);\n --pine-chip-color-warning-dot: var(--pine-color-yellow-600);\n}\n",":host {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\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, .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 .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 display: flex;\n padding: var(--pine-dimension-none);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\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 box-shadow: var(--box-shadow-focus);\n outline: none;\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","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\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 * Sets the text label content of the chip.\n */\n @Prop() label: string;\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 {this.label}\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 {this.label}\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":"oGAAA,MAAMA,EAAmB,4/BACzB,MAAAC,EAAeD,ECDf,MAAME,EAAa,kzMACnB,MAAAC,EAAeD,E,MCOFE,EAAO,M,4EAwCVC,KAAAC,iBAAmB,KACzBD,KAAKE,iBAAiBC,MAAM,E,oCA/BhB,M,gCAWE,M,eAMsE,U,aAMvC,M,CAWvC,UAAAC,GACN,MAAMA,EAAa,CAAC,YAEpB,GAAIJ,KAAKK,MAAO,CACdD,EAAWE,KAAK,kB,CAElB,GAAIN,KAAKO,QAAS,CAChBH,EAAWE,KAAK,aAAeN,KAAKO,Q,CAEtC,GAAIP,KAAKQ,UAAW,CAClBJ,EAAWE,KAAK,aAAeN,KAAKQ,U,CAGtC,OAAOJ,EAAWK,KAAK,I,CAGjB,cAAAC,GACN,MAAMC,EAAaX,KAAKO,UAAY,WACpC,MAAMK,EAAcD,EAClBE,EAAA,UAAQC,MAAM,mBAAmBC,KAAK,UACnCf,KAAKgB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDd,KAAKiB,MACNJ,EAAA,YAAUK,KAAMC,EAAWC,KAAK,OAAM,cAAa,UAGrDP,EAAA,QAAMC,MAAM,mBACTd,KAAKgB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDd,KAAKiB,OAIV,OAAOL,C,CAGT,MAAAS,GACE,OACER,EAACS,EAAI,CAAAC,IAAA,2CAACT,MAAOd,KAAKI,aAAcoB,GAAIxB,KAAKyB,aACtCzB,KAAKU,iBACLV,KAAKO,UAAY,OAChBM,EAAA,UAAAU,IAAA,2CAAQT,MAAM,kBAAkBC,KAAK,SAASW,QAAS1B,KAAKC,iBAAgB,aAAa,UACvFY,EAAA,YAAAU,IAAA,2CAAUL,KAAMS,EAAQP,KAAK,U","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as o,H as i}from"./p-87fe352f.js";import{a as s}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as o,H as i}from"./p-87fe352f.js";import{a as s}from"./p-2f60d558.js";const n=":host(.pds-copytext){--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--copytext-color-background-hover:var(--pine-color-grey-200)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);border-width:var(--pine-dimension-none);display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-body-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);max-width:100%;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs)}:host(.pds-copytext) pds-button::part(button){-webkit-padding-end:calc(var(--pine-dimension-xs) / 2);padding-inline-end:calc(var(--pine-dimension-xs) / 2)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);color:var(--pine-color-text-secondary-hover)}:host(.pds-copytext) pds-button span{font-weight:var(--pine-font-weight-medium);-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border-width:var(--pine-dimension-none);padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-sm)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--pine-border-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";const d=n;const p=class{constructor(o){t(this,o);this.pdsCopyTextClick=e(this,"pdsCopyTextClick",7);this.copyToClipboard=async t=>{try{if(typeof navigator.clipboard!=="undefined"){await navigator.clipboard.writeText(t);this.pdsCopyTextClick.emit("Copied to clipboard")}}catch(t){this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${t}`)}};this.handleClick=()=>{this.copyToClipboard(this.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}classNames(){const t=["pds-copytext"];if(this.border){t.push("pds-copytext--bordered")}if(this.fullWidth){t.push("pds-copytext--full-width")}if(this.truncate){t.push("pds-copytext--truncated")}return t.join(" ")}render(){return o(i,{key:"46c38faeba9b70d2e510a4b6af08866577936478",class:this.classNames(),id:this.componentId},o("pds-button",{key:"6e28c11a9a7a57f4c256b0283b64ec655a897f65",type:"button",variant:"unstyled",onClick:this.handleClick},o("span",{key:"6818451171f85fd6ad63f07c69871082d3fcba4e"},this.value),o("pds-icon",{key:"05e683d7b28575d924d6af482e6ce4c3cfee3f05",icon:s,size:"16px"})))}};p.style=d;export{p as pds_copytext};
|
|
2
|
+
//# sourceMappingURL=p-8b3d405b.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as s,H as r,g as a}from"./p-87fe352f.js";import{h as t}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as s,H as r,g as a}from"./p-87fe352f.js";import{h as t}from"./p-2f60d558.js";const i=".pds-sortable-item.sc-pds-sortable-item-h{--box-shadow:var(--pine-box-shadow-400);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}";const d=i;const o=class{constructor(s){e(this,s);this.enableActions=false;this.componentId=undefined;this.showHandle=false}componentWillRender(){this.sortableRef=this.el.closest("pds-sortable");if(this.sortableRef&&this.sortableRef.handleType==="handle"){this.showHandle=true}}render(){return s(r,{key:"a1cb930442bdca3f9aedbc256b70d6582068186a",class:"pds-sortable-item",id:this.componentId},this.showHandle&&s("div",{key:"ad13a6f870cbae41faf4958979a0cda900e0f2f8",class:"pds-sortable-item__handle"},s("pds-icon",{key:"1a45cc357b22c6fff2baaeb101544bc872703566",icon:t})),s("slot",{key:"2b2f5b99b7e97069555b81e8c4539fa6ca48de41"}),this.enableActions&&s("div",{key:"97c23c665a260a153c7db5cbc9772f616fafb3f7",class:"pds-sortable-item__actions"},s("slot",{key:"e4b9b759a16f33919eb774fa021588b55df675dc",name:"sortable-item-actions"})))}get el(){return a(this)}};o.style=d;export{o as pds_sortable_item};
|
|
2
|
+
//# sourceMappingURL=p-8b9e5fe5.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as i,h as s,H as o,g as t}from"./p-87fe352f.js";import{a as r,m as n}from"./p-47291f05.js";import{b as a}from"./p-2f60d558.js";import{d}from"./p-46fb585d.js";import{i as l}from"./p-7905b8b8.js";const p=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";const c=p;const h=":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 u=h;const b=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host([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);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.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{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.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 f=b;const v=class{constructor(s){e(this,s);this.pdsBlur=i(this,"pdsBlur",7);this.pdsChange=i(this,"pdsChange",7);this.pdsFocus=i(this,"pdsFocus",7);this.pdsInput=i(this,"pdsInput",7);this.inheritedAttributes={};this.isComposing=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};this.autocomplete=undefined;this.componentId=undefined;this.debounce=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=undefined;this.label=undefined;this.name=undefined;this.placeholder=undefined;this.readonly=undefined;this.required=undefined;this.type="text";this.value="";this.hasFocus=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:d(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({},l(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(o,{key:"a823b0086b4c4accc0788813a41b19f8b6ff32e1","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null},s("div",{key:"e9b04aaa8e50c987e6010017fbb82bc7b6774d34",class:"pds-input"},this.label&&s("label",{key:"5c6ddd8b32997344399915929d1ebd9b53c01ec2",class:"pds-input__label",htmlFor:this.componentId},this.label),s("input",Object.assign({key:"4bbc00b3ad007fa357ebddccaed0ee5912c464ea",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:"df6340f0d4ac1271e6a304a2accb312b45c87081",class:"pds-input__helper-message",id:n(this.componentId,"helper")},this.helperMessage),this.errorMessage&&s("p",{key:"50ecf4b62a9a7215a9b7043031a82b5f3b4f0291",class:"pds-input__error-message",id:n(this.componentId,"error"),"aria-live":"assertive"},s("pds-icon",{key:"87cfdda13d2756c221e0fc3e448c94fb46bc2eb8",icon:a,size:"small"}),this.errorMessage)))}get el(){return t(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}};v.style=c+(u+f);export{v as pds_input};
|
|
2
|
+
//# sourceMappingURL=p-910c4422.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsInputTokensCss","PdsInputStyle0","labelCss","PdsInputStyle1","pdsInputCss","PdsInputStyle2","PdsInput","this","inheritedAttributes","isComposing","onInputEvent","ev","input","target","value","emitInputChange","onChangeEvent","emitValueChange","onBlurEvent","hasFocus","focusedValue","pdsBlur","emit","onFocusEvent","pdsFocus","onCompositionStart","onCompositionEnd","setFocus","nativeInput","focus","debounceChanged","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","type","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":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:host {\n --pine-input-color-background-danger: var(--pine-color-red-050);\n}\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 --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\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 box-shadow: var(--box-shadow-focus);\n outline: none;\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 box-shadow: var(--box-shadow-focus-error);\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":"kNAAA,MAAMA,EAAoB,wEAC1B,MAAAC,EAAeD,ECDf,MAAME,EAAW,qTACjB,MAAAC,EAAeD,ECDf,MAAME,EAAc,6rFACpB,MAAAC,EAAeD,E,MCcFE,EAAQ,M,qKAEXC,KAAAC,oBAAkC,GAClCD,KAAAE,YAAc,MAmJdF,KAAAG,aAAgBC,IACtB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTL,KAAKO,MAAQF,EAAME,OAAS,E,CAE9BP,KAAKQ,gBAAgBJ,EAAG,EAGlBJ,KAAAS,cAAiBL,IACvBJ,KAAKU,gBAAgBN,EAAG,EAGlBJ,KAAAW,YAAeP,IACrBJ,KAAKY,SAAW,MAEhB,GAAIZ,KAAKa,eAAiBb,KAAKO,MAAO,CAKpCP,KAAKU,gBAAgBN,E,CAGvBJ,KAAKc,QAAQC,KAAKX,EAAG,EAGfJ,KAAAgB,aAAgBZ,IACtBJ,KAAKY,SAAW,KAChBZ,KAAKa,aAAeb,KAAKO,MAEzBP,KAAKiB,SAASF,KAAKX,EAAG,EAGhBJ,KAAAkB,mBAAqB,KAC3BlB,KAAKE,YAAc,IAAI,EAGjBF,KAAAmB,iBAAmB,KACzBnB,KAAKE,YAAc,KAAK,E,qTA5EX,O,WAKyC,G,cAKpC,K,CAjFpB,cAAMkB,GACJ,GAAKpB,KAAKqB,YAAc,CACtBrB,KAAKqB,YAAYC,O,EAmFX,eAAAC,GACR,MAAMC,SAAEA,EAAQC,SAAEA,EAAQC,iBAAEA,GAAqB1B,KAMjDA,KAAKwB,SAAWC,IAAaE,UAAYD,IAAgB,MAAhBA,SAAgB,EAAhBA,EAAoBF,EAAWI,EAAcJ,EAAUC,E,CAIxF,YAAAI,GACR,MAAMR,EAAcrB,KAAKqB,YACzB,MAAMd,EAAQP,KAAK8B,WAEnB,GAAIT,GAAeA,EAAYd,QAAUA,IAAUP,KAAKE,YAAa,CACnEmB,EAAYd,MAAQA,C,EAIhB,QAAAuB,GACN,cAAc9B,KAAKO,QAAU,SAAWP,KAAKO,MAAMwB,YAAc/B,KAAKO,OAAS,IAAIwB,U,CA+C7E,eAAArB,CAAgBsB,GACtB,MAAMzB,MAAEA,GAAUP,KAClB,MAAMiC,EAAW1B,GAAS,KAAOA,EAAQA,EAAMwB,WAE/C/B,KAAKa,aAAeoB,EACpBjC,KAAKkC,UAAUnB,KAAK,CAAER,MAAO0B,EAAUD,S,CAOjC,eAAAxB,CAAgBwB,GACtB,MAAMzB,MAAEA,GAAUP,KAGlB,MAAMiC,EAAW1B,GAAS,KAAOA,EAAQA,EAAMwB,WAE/C/B,KAAKwB,SAAST,KAAK,CAAER,MAAO0B,EAAUD,S,CAIxC,iBAAAG,GACEnC,KAAKC,oBAAmBmC,OAAAC,OAAA,GACnBC,EAAsBtC,KAAKuC,I,CAIlC,gBAAAC,GACExC,KAAKuB,iB,CAGC,eAAAkB,GACN,MAAMC,EAAa,CAAC,oBAEpB,GAAI1C,KAAK2C,SAAW3C,KAAK2C,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYjD,KAAKkD,SAAW,OAAS,KAAI,gBAC7BlD,KAAKmD,SAAW,OAAS,MAExCJ,EAAA,OAAAE,IAAA,2CAAKG,MAAM,aACRpD,KAAKqD,OACJN,EAAA,SAAAE,IAAA,2CAAOG,MAAM,mBAAmBE,QAAStD,KAAKuD,aAAcvD,KAAKqD,OAEnEN,EAAA,QAAAX,OAAAC,OAAA,CAAAY,IAAA,2CACEG,MAAOpD,KAAKyC,kBACZe,IAAMnD,GAAUL,KAAKqB,YAAchB,EAAK,mBACtBoD,EAAkBzD,KAAKuD,YAAavD,KAAK2C,QAAS3C,KAAK0D,eAAc,eACzE1D,KAAK2C,QAAU,OAAShB,UACtCgC,aAAc3D,KAAK2D,aACnBT,SAAUlD,KAAKkD,SACfU,GAAI5D,KAAKuD,YACTM,KAAM7D,KAAK6D,KACXC,YAAa9D,KAAK8D,YAClBC,SAAU/D,KAAKmD,SACfa,SAAUhE,KAAKgE,SACfC,KAAMjE,KAAKiE,KACX1D,MAAOP,KAAKO,MACZ2D,QAASlE,KAAKG,aACdgE,SAAUnE,KAAKS,cACf2D,OAAQpE,KAAKW,YACb0D,QAASrE,KAAKgB,aACdsD,mBAAoBtE,KAAKkB,mBACzBqD,iBAAkBvE,KAAKmB,kBACnBnB,KAAKC,sBAEVD,KAAK0D,eACJX,EAAA,KAAAE,IAAA,2CACEG,MAAM,4BACNQ,GAAIY,EAAUxE,KAAKuD,YAAa,WAE/BvD,KAAK0D,eAGT1D,KAAKyE,cACJ1B,EAAA,KAAAE,IAAA,2CACEG,MAAM,2BACNQ,GAAIY,EAAUxE,KAAKuD,YAAa,SAAQ,YAC9B,aAEVR,EAAA,YAAAE,IAAA,2CAAUyB,KAAMC,EAAQC,KAAK,UAC5B5E,KAAKyE,e","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register(["./p-45cf2585.system.js"],(function(e){"use strict";var i,r,o,t;return{setters:[function(e){i=e.r;r=e.h;o=e.H;t=e.g}],execute:function(){var n=":host{--sizing-max-width-default:352px;display:inline-block}:host [popover]{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);margin:var(--pine-dimension-none);max-width:var(--sizing-max-width-default);padding:var(--pine-dimension-md);position:fixed}:host button{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);font-family:var(--pine-font-family-heading);letter-spacing:var(--pine-letter-spacing);min-height:40px;padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}:host button:hover{background-color:var(--pine-color-secondary-hover)}";var a=n;var s=e("pds_popover",function(){function e(e){i(this,e);this.active=false;this.popoverTargetAction="show";this.popoverType="auto";this.componentId=undefined;this.text=undefined;this.maxWidth=352;this.placement="right"}e.prototype.componentWillRender=function(){this.handlePopoverPositioning()};e.prototype.handleClick=function(){this.active=!this.active};e.prototype.handleScroll=function(){if(this.active){this.handlePopoverPositioning()}};e.prototype.handlePopoverPositioning=function(){var e=this.el.shadowRoot.querySelector(".pds-popover__trigger");var i=this.el.shadowRoot.querySelector("div[popover]");if(!e||!i)return;var r=e.getBoundingClientRect();var o=i.getBoundingClientRect();var t=0;var n=0;var a=8;switch(this.placement){case"top":t=r.top-o.height-a;n=r.left;break;case"right":t=r.top;n=r.right+a;break;case"bottom":t=r.bottom+a;n=r.left;break;case"left":t=r.top;n=r.left-o.width-a;break}i.style.top="".concat(t,"px");i.style.left="".concat(n,"px")};e.prototype.render=function(){return r(o,{key:"83f5e8306d9a8f9e541e638af6fab4e83700c9ce"},r("button",{key:"11a49c046a9258b64508c3a48dff8b63468358e0",class:"pds-popover__trigger",popoverTarget:this.componentId,popoverTargetAction:this.popoverTargetAction,onClick:this.handleClick},this.text),r("div",{key:"c4034a97e7d3aa794d4cf20891cb1ccd31895fa9",class:"pds-popover ".concat(this.active?"pds-popover--active":""),id:this.componentId,popover:this.popoverType,style:{maxWidth:"".concat(this.maxWidth,"px")}},r("slot",{key:"2005210e15c7f73efed54de5980c117f682cc476"})))};Object.defineProperty(e.prototype,"el",{get:function(){return t(this)},enumerable:false,configurable:true});return e}());s.style=a}}}));
|
|
2
|
+
//# sourceMappingURL=p-a924b8a6.system.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsPopoverCss","PdsPopoverStyle0","PdsPopover","exports","class_1","prototype","componentWillRender","this","handlePopoverPositioning","handleClick","active","handleScroll","triggerEl","el","shadowRoot","querySelector","popoverEl","triggerRect","getBoundingClientRect","popoverRect","top","left","offset","placement","height","right","bottom","width","style","concat","render","h","Host","key","class","popoverTarget","componentId","popoverTargetAction","onClick","text","id","popover","popoverType","maxWidth"],"sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n --sizing-max-width-default: 352px;\n\n display: inline-block;\n\n [popover] {\n background-color: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n box-shadow: var(--pine-box-shadow-200);\n margin: var(--pine-dimension-none);\n max-width: var(--sizing-max-width-default);\n padding: var(--pine-dimension-md);\n position: fixed;\n }\n\n button {\n align-items: center;\n background-color: var(--pine-color-secondary);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n color: var(--pine-color-text-secondary);\n display: flex;\n font: var(--pine-typography-body-medium);\n font-family: var(--pine-font-family-heading);\n letter-spacing: var(--pine-letter-spacing);\n min-height: 40px;\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n }\n}\n","import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\n\n@Component({\n tag: 'pds-popover',\n styleUrl: 'pds-popover.scss',\n shadow: true,\n})\nexport class PdsPopover {\n /**\n * Reference to the Host element\n */\n @Element() el: HTMLPdsPopoverElement;\n\n /**\n * Determines when the popover is active\n * @defaultValue false\n */\n @State() active = false;\n\n /**\n * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n * @defaultValue \"show\"\n */\n @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n /**\n * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n * Manual popovers require the consumer to handle the visibility of the popover.\n */\n @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Text that appears on the trigger element\n */\n @Prop() text: string;\n\n /**\n * Sets the maximum width of the popover content\n * @defaultValue 352\n */\n @Prop() maxWidth?: number = 352;\n\n /**\n * Determines the preferred position of the popover\n * @defaultValue \"right\"\n */\n @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n componentWillRender() {\n this.handlePopoverPositioning();\n }\n\n @Listen('click', {\n capture: true\n })\n handleClick() {\n this.active = !this.active;\n }\n\n @Listen('scroll', {\n target: 'window',\n capture: true\n })\n handleScroll() {\n if (this.active) {\n this.handlePopoverPositioning();\n }\n }\n\n private handlePopoverPositioning() {\n const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger') as HTMLElement;\n const popoverEl = this.el.shadowRoot.querySelector('div[popover]') as HTMLElement;\n\n if (!triggerEl || !popoverEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popoverRect = popoverEl.getBoundingClientRect();\n\n let top = 0;\n let left = 0;\n const offset = 8\n\n switch (this.placement) {\n case 'top':\n top = triggerRect.top - popoverRect.height - offset;\n left = triggerRect.left;\n break;\n case 'right':\n top = triggerRect.top;\n left = triggerRect.right + offset;\n break;\n case 'bottom':\n top = triggerRect.bottom + offset;\n left = triggerRect.left;\n break;\n case 'left':\n top = triggerRect.top;\n left = triggerRect.left - popoverRect.width - offset;\n break;\n }\n\n popoverEl.style.top = `${top}px`;\n popoverEl.style.left = `${left}px`;\n }\n\n render() {\n return (\n <Host>\n <button\n class=\"pds-popover__trigger\"\n popoverTarget={this.componentId}\n popoverTargetAction={this.popoverTargetAction}\n onClick={this.handleClick}\n >\n {this.text}\n </button>\n <div\n class={`pds-popover ${this.active ? 'pds-popover--active' : ''}`}\n id={this.componentId}\n popover={this.popoverType}\n style={{ maxWidth: `${this.maxWidth}px` }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0JAAA,IAAMA,EAAgB,y5BACtB,IAAAC,EAAeD,E,ICOFE,EAAUC,EAAA,yB,oCAUH,M,yBAMwC,O,iBAMjB,O,6DAgBb,I,eAMwB,O,CAEpDC,EAAAC,UAAAC,oBAAA,WACEC,KAAKC,0B,EAMPJ,EAAAC,UAAAI,YAAA,WACEF,KAAKG,QAAUH,KAAKG,M,EAOtBN,EAAAC,UAAAM,aAAA,WACE,GAAIJ,KAAKG,OAAQ,CACfH,KAAKC,0B,GAIDJ,EAAAC,UAAAG,yBAAA,WACN,IAAMI,EAAYL,KAAKM,GAAGC,WAAWC,cAAc,yBACnD,IAAMC,EAAYT,KAAKM,GAAGC,WAAWC,cAAc,gBAEnD,IAAKH,IAAcI,EAAW,OAE9B,IAAMC,EAAcL,EAAUM,wBAC9B,IAAMC,EAAcH,EAAUE,wBAE9B,IAAIE,EAAM,EACV,IAAIC,EAAO,EACX,IAAMC,EAAS,EAEf,OAAQf,KAAKgB,WACX,IAAK,MACHH,EAAMH,EAAYG,IAAMD,EAAYK,OAASF,EAC7CD,EAAOJ,EAAYI,KACnB,MACF,IAAK,QACHD,EAAMH,EAAYG,IAClBC,EAAOJ,EAAYQ,MAAQH,EAC3B,MACF,IAAK,SACHF,EAAMH,EAAYS,OAASJ,EAC3BD,EAAOJ,EAAYI,KACnB,MACF,IAAK,OACHD,EAAMH,EAAYG,IAClBC,EAAOJ,EAAYI,KAAOF,EAAYQ,MAAQL,EAC9C,MAGJN,EAAUY,MAAMR,IAAM,GAAAS,OAAGT,EAAG,MAC5BJ,EAAUY,MAAMP,KAAO,GAAAQ,OAAGR,EAAI,K,EAGhCjB,EAAAC,UAAAyB,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,MAAM,uBACNC,cAAe5B,KAAK6B,YACpBC,oBAAqB9B,KAAK8B,oBAC1BC,QAAS/B,KAAKE,aAEbF,KAAKgC,MAERR,EAAA,OAAAE,IAAA,2CACEC,MAAO,eAAAL,OAAetB,KAAKG,OAAS,sBAAwB,IAC5D8B,GAAIjC,KAAK6B,YACTK,QAASlC,KAAKmC,YACdd,MAAO,CAAEe,SAAU,GAAAd,OAAGtB,KAAKoC,SAAQ,QAEnCZ,EAAA,QAAAE,IAAA,8C,uHAxHa,I","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["./p-45cf2585.system.js","./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
System.register(["./p-45cf2585.system.js","./p-dba6ac9c.system.js"],(function(r){"use strict";var n,a,e,i,o;return{setters:[function(r){n=r.r;a=r.h;e=r.H},function(r){i=r.c;o=r.u}],execute:function(){var t=":host{display:inline-block}div{--color-background-container:var(--pine-color-mercury-050);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);-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-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--pine-color-background-container);border:var(--pine-border);border-color:var(--pine-color-secondary);border-radius:var(--pine-border-radius-round);bottom:var(--pine-dimension-none);position:absolute;right:var(--pine-dimension-none)}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";var s=t;var d=r("pds_avatar",function(){function r(r){var e=this;n(this,r);this.renderAssetWrapper=function(){var r={height:e.avatarSize(),width:e.avatarSize()};return a("div",{style:r,part:"asset-wrapper"},e.renderIconOrImage(),e.renderBadge())};this.renderAvatar=function(){return e.dropdown?a("button",{class:"pds-avatar__button",type:"button","aria-label":"Avatar dropdown trigger"},e.renderAssetWrapper()):e.renderAssetWrapper()};this.renderBadge=function(){return e.badge&&a("pds-icon",{color:"var(--pine-color-purple-600)",class:"pds-avatar__badge",icon:i,size:"33.53%"})};this.renderIconOrImage=function(){return e.image?a("img",{alt:e.alt,src:e.image}):a("pds-icon",{color:"var(--pine-color-mercury-500)",icon:o,size:"33.53%"})};this.classNames=function(){var r;return r={"pds-avatar":true},r["pds-avatar--has-image"]=e.image!==""&&e.image!==null,r["pds-avatar--".concat(e.variant)]=e.variant==="admin",r};this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}r.prototype.avatarSize=function(){var r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}};r.prototype.render=function(){return a(e,{key:"6c013c87792c77cf63a321d4b194b241c8c8f7f5",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())};return r}());d.style=s}}}));
|
|
2
|
+
//# sourceMappingURL=p-acf6cf26.system.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as i,c as s,h as t,H as e,g as o}from"./p-87fe352f.js";import{g as a,d as r}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as i,c as s,h as t,H as e,g as o}from"./p-87fe352f.js";import{g as a,d as r}from"./p-2f60d558.js";const n=":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);line-height:var(--pine-line-height-body);padding:12px;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-active)}";const h=n;const l=class{constructor(t){i(this,t);this.pdsTableSort=s(this,"pdsTableSort",7);this.handleScroll=()=>{if(this.tableRef.scrollLeft>0){this.tableScrolling=true}else{this.tableScrolling=false}};this.toggleSort=()=>{if(this.sortable){const i=this.hostElement.innerText.trim();this.sortingDirection=this.sortingDirection==="asc"?"desc":"asc";this.tableRef.querySelectorAll("pds-table-head-cell").forEach((i=>{i.classList.remove("is-active")}));this.hostElement.classList.toggle("is-active");this.pdsTableSort.emit({column:i,direction:this.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false;this.isSelected=false}componentWillRender(){this.tableRef=this.hostElement.closest("pds-table")}componentDidLoad(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}}classNames(){const i=[];if(this.tableRef&&this.tableRef.compact){i.push("is-compact")}if(this.sortable){i.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){i.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){i.push("has-scrolled")}return i.join(" ")}render(){return t(e,{key:"cc69c3960907c848101775317b0ff4e700e055e8",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},t("slot",{key:"02d63e30c6e05104b14fba26cf9f95709feb9d6c"}),this.sortable&&t("pds-icon",{key:"e19c0af58d1ab0a909c72f6ddac89eacb6013a20",icon:this.sortingDirection==="asc"?a:r}))}get hostElement(){return o(this)}};l.style=h;export{l as pds_table_head_cell};
|
|
2
|
+
//# sourceMappingURL=p-b20dd7d7.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as i,h as o,H as r}from"./p-87fe352f.js";import{m as a,a as n}from"./p-47291f05.js";import{b as t}from"./p-2f60d558.js";const s=":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 d=s;const c=':host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-invalid:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-invalid);box-shadow:var(--box-shadow-focus-invalid);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-secondary);border-bottom:0;border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(90deg) translate3d(-103%, 32%, 0);transform:rotate(90deg) translate3d(-103%, 32%, 0);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-secondary);border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-grey-300)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-size:var(--pine-font-size-085);gap:var(--pine-spacing-050)}';const l=c;const p=class{constructor(o){e(this,o);this.pdsCheckboxChange=i(this,"pdsCheckboxChange",7);this.pdsCheckboxInput=i(this,"pdsCheckboxInput",7);this.handleCheckboxChange=e=>{if(this.disabled){return}const i=e.target;this.checked=i.checked;this.pdsCheckboxChange.emit({checked:i.checked,value:this.value})};this.handleInput=()=>{this.pdsCheckboxInput.emit({checked:this.checked,value:this.value})};this.checked=false;this.componentId=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.indeterminate=undefined;this.invalid=undefined;this.label=undefined;this.labelHidden=undefined;this.name=undefined;this.required=undefined;this.value=undefined}updateIndeterminate(){this.indeterminate=undefined}classNames(){const e=[];if(this.invalid){e.push("is-invalid")}if(this.indeterminate){e.push("is-indeterminate")}if(this.disabled){e.push("is-disabled")}return e.join(" ")}render(){return o(r,{key:"d552ef5967613280f3399015c17d90d2264bee26",class:this.classNames()},o("label",{key:"7ed49fd6c942d3765ce5c70048fe53252b532f75",htmlFor:this.componentId},o("input",{key:"b1d59fc429e9bd92bd7ff0e4edb79b326416d9fb",type:"checkbox","aria-describedby":n(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,id:this.componentId,indeterminate:this.indeterminate,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange,onInput:this.handleInput}),this.label),this.helperMessage&&o("div",{key:"2bf16b8f87910f727e19b2b3a0df5190f80b9c9b",class:"pds-checkbox__message",id:a(this.componentId,"helper")},this.helperMessage),this.errorMessage&&o("div",{key:"dde8ede862aaaf585fe6d1e907b0a78309a59e58",class:`pds-checkbox__message pds-checkbox__message--error`,id:a(this.componentId,"error"),"aria-live":"assertive"},o("pds-icon",{key:"b666e9ccbeb8653271da75cdf81419fbad6028e2",icon:t,size:"small"}),this.errorMessage))}static get watchers(){return{checked:["updateIndeterminate"]}}};p.style=d+l;export{p as pds_checkbox};
|
|
2
|
+
//# sourceMappingURL=p-b2163263.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["labelCss","PdsCheckboxStyle0","pdsCheckboxCss","PdsCheckboxStyle1","PdsCheckbox","this","handleCheckboxChange","e","disabled","target","checked","pdsCheckboxChange","emit","value","handleInput","pdsCheckboxInput","updateIndeterminate","indeterminate","undefined","classNames","invalid","push","join","render","h","Host","key","class","htmlFor","componentId","type","assignDescription","helperMessage","id","name","required","onChange","onInput","label","messageId","errorMessage","icon","danger","size"],"sources":["src/global/styles/utils/label.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var( --pine-color-danger);\n\n &:hover {\n background: var(--pine-color-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus-invalid); // Remove when outline radius is supported in Safari\n outline: none;\n }\n }\n\n label,\n .pds-checkbox__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.is-indeterminate) {\n input {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-secondary);\n border-bottom: 0;\n border-left: 0;\n border-top: 0;\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(90deg) translate3d(-103%, 32%, 0);\n width: 4px;\n }\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-dimension-2xs);\n flex: none;\n height: var(--pine-dimension-sm);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--pine-dimension-sm);\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-secondary);\n border-left: 0;\n border-top: 0;\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(43deg) translate3d(-110%, -30%, 0);\n width: 4px;\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-grey-300);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--pine-color-text-disabled);\n }\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.pds-checkbox__message {\n color: var(--pine-color-text-message);\n margin-block-start: 6px;\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-checkbox__message--error {\n align-items: center;\n display: flex;\n font-size: var(--pine-font-size-085);\n gap: var(--pine-spacing-050);\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n shadow: true,\n})\nexport class PdsCheckbox {\n /**\n * It determines whether or not the checkbox is checked.\n */\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * It determines whether or not the checkbox is disabled.\n */\n @Prop() disabled: boolean;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * String used for helper message below checkbox.\n */\n @Prop() helperMessage: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n */\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /**\n * It determines whether or not the checkbox is invalid.\n */\n @Prop() invalid: boolean;\n\n /**\n * String used for label text next to checkbox.\n */\n @Prop() label: string;\n\n /**\n * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() labelHidden: boolean;\n\n /**\n * String used for checkbox `name` attribute.\n */\n @Prop() name: string;\n\n /**\n * It determines whether or not the checkbox is required.\n */\n @Prop() required: boolean;\n\n /**\n * The value of the checkbox that is submitted with a form.\n */\n @Prop() value: string;\n\n /**\n * Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n />\n {this.label}\n </label>\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"mappings":"wIAAA,MAAMA,EAAW,qTACjB,MAAAC,EAAeD,ECDf,MAAME,EAAiB,8+GACvB,MAAAC,EAAeD,E,MCSFE,EAAW,M,iIA0EdC,KAAAC,qBAAwBC,IAC9B,GAAIF,KAAKG,SAAU,CACjB,M,CAGF,MAAMC,EAASF,EAAEE,OACjBJ,KAAKK,QAAUD,EAAOC,QAEtBL,KAAKM,kBAAkBC,KAAK,CAC1BF,QAASD,EAAOC,QAChBG,MAAOR,KAAKQ,OACZ,EAGIR,KAAAS,YAAc,KACpBT,KAAKU,iBAAiBH,KAAK,CACzBF,QAASL,KAAKK,QACdG,MAAOR,KAAKQ,OACZ,E,aAxFyC,M,iRAkE7C,mBAAAG,GACEX,KAAKY,cAAgBC,S,CAwBf,UAAAC,GACN,MAAMA,EAAa,GAEnB,GAAId,KAAKe,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIhB,KAAKY,cAAe,CAAEE,EAAWE,KAAK,mB,CAC1C,GAAIhB,KAAKG,SAAU,CAAEW,EAAWE,KAAK,c,CAErC,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOtB,KAAKc,cAChBK,EAAA,SAAAE,IAAA,2CAAOE,QAASvB,KAAKwB,aACnBL,EAAA,SAAAE,IAAA,2CACEI,KAAK,WAAU,mBACGC,EAAkB1B,KAAKwB,YAAaxB,KAAKe,QAASf,KAAK2B,eAAc,eACzE3B,KAAKe,QAAU,OAASF,UACtCe,GAAI5B,KAAKwB,YACTZ,cAAeZ,KAAKY,cACpBiB,KAAM7B,KAAK6B,KACXrB,MAAOR,KAAKQ,MACZH,QAASL,KAAKK,QACdyB,SAAU9B,KAAK8B,SACf3B,SAAUH,KAAKG,SACf4B,SAAU/B,KAAKC,qBACf+B,QAAShC,KAAKS,cAEfT,KAAKiC,OAEPjC,KAAK2B,eACJR,EAAA,OAAAE,IAAA,2CACEC,MAAO,wBACPM,GAAIM,EAAUlC,KAAKwB,YAAa,WAE/BxB,KAAK2B,eAGT3B,KAAKmC,cACJhB,EAAA,OAAAE,IAAA,2CACEC,MAAO,qDACPM,GAAIM,EAAUlC,KAAKwB,YAAa,SAAQ,YAC9B,aAEVL,EAAA,YAAAE,IAAA,2CAAUe,KAAMC,EAAQC,KAAK,UAC5BtC,KAAKmC,c","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register(["./p-45cf2585.system.js"],(function(a){"use strict";var e,t,i,o,s;return{setters:[function(a){e=a.r;t=a.c;i=a.h;o=a.H;s=a.g}],execute:function(){var n='pds-tab{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--outline:4px solid var(--pine-color-focus-ring);-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-dimension-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover{color:var(--pine-color-text)}.pds-tab:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);bottom:0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-secondary)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:1}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--pine-color-secondary-hover)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab__content{padding-bottom:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter{--color-background-tab:var(--pine-color-background-container)}.pds-tabs--filter .pds-tab{background-color:var(--color-background-tab);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--pine-color-background-container-hover)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-readonly);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;padding-block-end:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-white);border-color:var(--pine-color-border);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);color:var(--pine-color-text-active);z-index:1;}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after,.pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:0}';var r=n;var d=a("pds_tab",function(){function a(a){e(this,a);this.pdsTabClick=t(this,"pdsTabClick",7);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.index=undefined;this.selected=false}a.prototype.onTabClick=function(a,e){this.pdsTabClick.emit([a,e])};a.prototype.render=function(){var a=i("span",{key:"86bc0085668c8abc70d43b3d51ecb0328c74a250",class:"pds-tab-edge",role:"presentation"});var e=i("span",{key:"1156c49c0448e6ea11bfe7b292d96c3a396c59e4",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return i(o,{key:"fc6a96add1a97e05ad8d85856ce44a3bc99c7581",variant:this.variant,slot:"tabs",index:this.index},i("button",{key:"41b1b8bf4e74974aa1e375a87d69c149a1fb04e6",role:"tab",id:this.parentComponentId+"__"+this.name,"aria-controls":this.parentComponentId+"__"+this.name+"-panel",tabindex:this.selected?"0":"-1","aria-selected":this.selected?"true":"false",class:this.selected?"pds-tab is-active":"pds-tab",onClick:this.onTabClick.bind(this,this.index,this.parentComponentId)},this.variant==="availability"&&a,this.variant==="availability"&&e,i("div",{key:"81d264e8ac4e9d94e59ea8c377ac7225f48353db",class:"pds-tab__content"},i("slot",{key:"9549347c6fc773e9f9b234e72f39fa265e77aac2"}))))};Object.defineProperty(a.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});return a}());d.style=r}}}));
|
|
2
|
+
//# sourceMappingURL=p-b245df0a.system.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsTabCss","PdsTabStyle0","PdsTab","exports","class_1","prototype","onTabClick","index","parentComponentId","this","pdsTabClick","emit","render","availabilityTabEdgeInlineStart","h","key","class","role","availabilityTabEdgeInlineEnd","Host","variant","slot","id","name","tabindex","selected","onClick","bind"],"sources":["src/components/pds-tabs/pds-tab/pds-tab.scss?tag=pds-tab","src/components/pds-tabs/pds-tab/pds-tab.tsx"],"sourcesContent":["pds-tab {\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n\n --outline: 4px solid var(--pine-color-focus-ring);\n\n align-items: center;\n display: inline-flex;\n position: relative;\n\n .pds-tabs--pill & {\n flex: 1;\n }\n}\n\n///\n/// Resets base button styles\n///\n@mixin pds-button-style-reset {\n appearance: none;\n background-color: transparent;\n border: var(--pine-dimension-none);\n box-shadow: none;\n color: inherit;\n cursor: pointer;\n font-family: inherit;\n padding: var(--pine-dimension-none);\n}\n\n.pds-tab {\n @include pds-button-style-reset();\n\n align-items: center;\n color: var(--pine-color-text-secondary);\n display: inline-flex;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n\n &.is-active,\n &[aria-selected='true'] {\n color: var(--pine-color-text);\n\n .pds-tab__content::after {\n opacity: 1;\n }\n }\n\n &:hover {\n color: var(--pine-color-text);\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n .pds-tab__content {\n font-family: var(--pine-font-family-body);\n font-size: var(--pine-font-size);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing);\n line-height: var(--pine-line-height-body);\n padding-block-end: 11px;\n position: relative;\n\n &::after {\n background-color: var(--pine-color-brand);\n bottom: 0;\n content: '';\n height: 3px;\n left: 0;\n opacity: 0;\n position: absolute;\n right: 0;\n }\n }\n\n .pds-tab-edge {\n display: none;\n }\n}\n\n.pds-tabs--availability {\n --color-background-tab: transparent;\n\n .pds-tab {\n background-color: var(--color-background-tab);\n border-radius: calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);\n padding: 8px 16px 13px;\n\n &.is-active,\n &[aria-selected='true'] {\n --color-background-tab: var(--pine-color-secondary);\n\n .pds-tab__content::after {\n opacity: 1;\n }\n\n .pds-tab-edge {\n z-index: 1;\n }\n }\n\n &:hover:not(.is-active, [aria-selected='true']) {\n --color-background-tab: var(--pine-color-secondary-hover);\n }\n\n &:focus-visible {\n color: var(--pine-color-text-secondary);\n }\n }\n\n .pds-tab__content {\n padding-bottom: 7px;\n }\n\n .pds-tab-edge {\n bottom: 0;\n display: block;\n height: 8px;\n inset-inline-end: 100%;\n overflow: hidden;\n position: absolute;\n width: 8px;\n\n &::before {\n border-radius: 50%;\n bottom: 0;\n box-shadow: 4px 4px 0 0 var(--color-background-tab);\n content: '';\n display: block;\n height: 200%;\n inset-inline-end: 0;\n position: absolute;\n width: 200%;\n }\n }\n\n .pds-tab-edge--end {\n inset-inline-end: unset;\n inset-inline-start: 100%;\n\n &::before {\n box-shadow: -4px 4px 0 0 var(--color-background-tab);\n inset-inline-end: unset;\n inset-inline-start: 0;\n }\n }\n}\n\n.pds-tabs--filter {\n --color-background-tab: var(--pine-color-background-container);\n\n .pds-tab {\n background-color: var(--color-background-tab);\n border-radius: 50px;\n color: var(--pine-color-text);\n padding: 6px 15px;\n\n &.is-active,\n &[aria-selected='true'] {\n --color-background-tab: var(--pine-color-primary);\n color: var(--pine-color-text-primary);\n }\n\n &:hover:not(.is-active, [aria-selected='true']) {\n --color-background-tab: var(--pine-color-background-container-hover);\n }\n }\n\n .pds-tab__content {\n padding-block-end: var(--pine-dimension-none);\n\n &::after {\n content: unset;\n }\n }\n}\n\n.pds-tabs--pill {\n --color-background-tab: transparent;\n\n .pds-tab {\n background-color: var(--color-background-tab);\n border: var(--pine-border-width-thin) solid transparent;\n border-radius: var(--pine-dimension-xs);\n color: var(--pine-color-text-readonly);\n flex: 1;\n height: 34px;\n justify-content: center;\n\n .pds-tab__content {\n align-items: center;\n display: flex;\n justify-content: center;\n padding-block-end: 0;\n }\n\n &.is-active,\n &[aria-selected='true'] {\n --color-background-tab: var(--pine-color-white);\n border-color: var(--pine-color-border);\n box-shadow: var(--pine-box-shadow-100);\n color: var(--pine-color-text-active);\n z-index: 1;\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n border-color: var(--color-border-focus);\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n /* stylelint-disable max-nesting-depth */\n .pds-tab__content {\n &::after {\n opacity: 0;\n }\n }\n /* stylelint-enable max-nesting-depth */\n }\n }\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'pds-tab',\n styleUrl: 'pds-tab.scss',\n shadow: false,\n})\nexport class PdsTab {\n @Element() el: HTMLPdsTabElement;\n\n /**\n * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property\n */\n @Prop() name!: string;\n\n /**\n * Keeps track of the parentComponentId unique id, this property is passed by parent component\n */\n /** @internal */\n @Prop() parentComponentId: string;\n\n /**\n * Keeps track of if the expected tab variant, this property is passed by parent component\n */\n /** @internal */\n @Prop() variant: string;\n\n /**\n * Keeps track of if the tab index number, this property is passed by parent component\n */\n /** @internal */\n @Prop() index: number;\n\n /**\n * Keeps track of the tabpanel selected state, this property is passed by parent component\n */\n /** @internal */\n @Prop() selected = false;\n\n /**\n * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n */\n /** @internal */\n @Event() pdsTabClick: EventEmitter<object>;\n private onTabClick(index, parentComponentId) {\n this.pdsTabClick.emit([index, parentComponentId]);\n }\n\n render() {\n const availabilityTabEdgeInlineStart = (\n <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n )\n\n const availabilityTabEdgeInlineEnd = (\n <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n )\n\n return (\n <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n <button\n role=\"tab\"\n id={this.parentComponentId + \"__\" + this.name}\n aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n tabindex={this.selected ? \"0\" : \"-1\"}\n aria-selected={this.selected ? \"true\" : \"false\"}\n class={this.selected ? \"pds-tab is-active\" : \"pds-tab\"}\n onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n >\n {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n <div class=\"pds-tab__content\"><slot/></div>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"kKAAA,IAAMA,EAAY,mpKAClB,IAAAC,EAAeD,E,ICMFE,EAAMC,EAAA,qB,gLA8BE,K,CAOXC,EAAAC,UAAAC,WAAA,SAAWC,EAAOC,GACxBC,KAAKC,YAAYC,KAAK,CAACJ,EAAOC,G,EAGhCJ,EAAAC,UAAAO,OAAA,WACE,IAAMC,EACJC,EAAA,QAAAC,IAAA,2CAAMC,MAAM,eAAeC,KAAK,iBAGlC,IAAMC,EACJJ,EAAA,QAAAC,IAAA,2CAAMC,MAAM,iCAAiCC,KAAK,iBAGpD,OACEH,EAACK,EAAI,CAAAJ,IAAA,2CAACK,QAASX,KAAKW,QAASC,KAAK,OAAOd,MAAOE,KAAKF,OACnDO,EAAA,UAAAC,IAAA,2CACEE,KAAK,MACLK,GAAIb,KAAKD,kBAAoB,KAAOC,KAAKc,KAAI,gBAC9Bd,KAAKD,kBAAoB,KAAOC,KAAKc,KAAO,SAC3DC,SAAUf,KAAKgB,SAAW,IAAM,KAAI,gBACrBhB,KAAKgB,SAAW,OAAS,QACxCT,MAAOP,KAAKgB,SAAW,oBAAsB,UAC7CC,QAASjB,KAAKH,WAAWqB,KAAKlB,KAAMA,KAAKF,MAAOE,KAAKD,oBAEpDC,KAAKW,UAAY,gBAAkBP,EACnCJ,KAAKW,UAAY,gBAAkBF,EACpCJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAmBF,EAAA,QAAAC,IAAA,+C,uHA/DrB,I","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as i,H as a}from"./p-87fe352f.js";import{d as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as i,H as a}from"./p-87fe352f.js";import{d as n}from"./p-2f60d558.js";const o=":host{display:block}details{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--color-text-hover:var(--pine-color-text-secondary);--number-animation-transform-timing:200ms;border-radius:var(--pine-dimension-xs)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1)}details[open]{background-color:var(--pine-color-background-container)}details[open] summary{color:var(--pine-color-text-active);font-weight:var(--pine-font-weight-semi-bold)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1)}summary{background-color:var(--pine-color-background-container);border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-readonly);font-family:var(--pine-font-family-body);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding-block:calc(var(--pine-dimension-2xs) * 1.5);-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs);-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--pine-color-background-container-hover);color:var(--pine-color-text);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none;position:relative}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-padding-after:calc(var(--pine-dimension-sm) + 2);padding-block-end:calc(var(--pine-dimension-sm) + 2);padding-inline:calc(var(--pine-dimension-2xs) * 1.5)}";const r=o;const s=class{constructor(i){e(this,i);this.handleToggle=()=>{this.isOpen=this.detailsEl.open};this.getOpenAttribute=()=>{if(this.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}handleOpenState(e){this.isOpen=e}componentDidLoad(){this.detailsEl.addEventListener("toggle",this.handleToggle)}render(){return i(a,{key:"92a6e19b0376d9cc14a86c9dda2fbfeef11297e3",class:"pds-accordion",id:this.componentId},i("details",Object.assign({key:"0bb94526cebdcefcec62976c1623ef208aaa3119"},this.getOpenAttribute(),{ref:e=>this.detailsEl=e}),i("summary",{key:"b599fe5da538efde146be5ff8db8a04faf5c6c1b",part:"accordion-button"},i("slot",{key:"8bdfa4448b41da6fd46232fe854f7c475fc633bf",name:"label"},"Details"),i("pds-icon",{key:"ca51ab8291047c08cef21ef55c85a8a47f8cb3e0",icon:n})),i("div",{key:"628dc7ce9263bbd983fc2353181e31b6fca0176a",part:"accordion-body",class:"pds-accordion__body"},i("slot",{key:"314d59312a3fbb2cc8a1c4d8a7f55634d16b079d"}))))}static get watchers(){return{isOpen:["handleOpenState"]}}};s.style=r;export{s as pds_accordion};
|
|
2
|
+
//# sourceMappingURL=p-b566ad6b.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register(["./p-45cf2585.system.js","./p-dba6ac9c.system.js"],(function(i){"use strict";var o,e,n,r,p,c;return{setters:[function(i){o=i.r;e=i.c;n=i.h;r=i.H},function(i){p=i.d;c=i.r}],execute:function(){var s=":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)}";var a=s;var d=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--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,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}: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);display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.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{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}: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)}";var h=d;var t=i("pds_chip",function(){function i(i){var n=this;o(this,i);this.pdsTagCloseClick=e(this,"pdsTagCloseClick",7);this.handleCloseClick=function(){n.pdsTagCloseClick.emit()};this.componentId=undefined;this.dot=false;this.label=undefined;this.large=false;this.sentiment="neutral";this.variant="text"}i.prototype.classNames=function(){var 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(" ")};i.prototype.setChipContent=function(){var i=this.variant==="dropdown";var o=i?n("button",{class:"pds-chip__button",type:"button"},this.dot&&n("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label,n("pds-icon",{icon:p,size:"12px","aria-hidden":"true"})):n("span",{class:"pds-chip__label"},this.dot&&n("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return o};i.prototype.render=function(){return n(r,{key:"91f7d9a87538c4b30b16462061a61fb92812732f",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&n("button",{key:"bee8696d3644f33d8630a4ab93ff83c8b1d7ee78",class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},n("pds-icon",{key:"5a375bf7507f7ac674a6f3c27048e2c218064bb4",icon:c,size:"12px"})))};return i}());t.style=a+h}}}));
|
|
2
|
+
//# sourceMappingURL=p-b6dfd404.system.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsChipTokensCss","PdsChipStyle0","pdsChipCss","PdsChipStyle1","PdsChip","exports","this","handleCloseClick","_this","pdsTagCloseClick","emit","class_1","prototype","classNames","large","push","variant","sentiment","join","setChipContent","isDropdown","chipContent","h","class","type","dot","label","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":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:host {\n --pine-chip-color-accent: var(--pine-color-purple-100);\n --pine-chip-color-accent-hover: var(--pine-color-purple-300);\n --pine-chip-color-accent-dot: var(--pine-color-purple-600);\n --pine-chip-color-danger: var(--pine-color-red-100);\n --pine-chip-color-danger-hover: var(--pine-color-red-300);\n --pine-chip-color-danger-dot: var(--pine-color-red-600);\n --pine-chip-color-info: var(--pine-color-blue-100);\n --pine-chip-color-info-hover: var(--pine-color-blue-300);\n --pine-chip-color-info-dot: var(--pine-color-blue-600);\n --pine-chip-color-neutral: var(--pine-color-grey-100);\n --pine-chip-color-neutral-hover: var(--pine-color-grey-300);\n --pine-chip-color-neutral-dot: var(--pine-color-grey-600);\n --pine-chip-color-success: var(--pine-color-green-100);\n --pine-chip-color-success-hover: var(--pine-color-green-300);\n --pine-chip-color-success-dot: var(--pine-color-green-600);\n --pine-chip-color-warning: var(--pine-color-yellow-100);\n --pine-chip-color-warning-hover: var(--pine-color-yellow-300);\n --pine-chip-color-warning-dot: var(--pine-color-yellow-600);\n}\n",":host {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\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, .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 .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 display: flex;\n padding: var(--pine-dimension-none);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\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 box-shadow: var(--box-shadow-focus);\n outline: none;\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","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\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 * Sets the text label content of the chip.\n */\n @Prop() label: string;\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 {this.label}\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 {this.label}\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":"gNAAA,IAAMA,EAAmB,4/BACzB,IAAAC,EAAeD,ECDf,IAAME,EAAa,kzMACnB,IAAAC,EAAeD,E,ICOFE,EAAOC,EAAA,sB,sFAwCVC,KAAAC,iBAAmB,WACzBC,EAAKC,iBAAiBC,M,sCA/BV,M,gCAWE,M,eAMsE,U,aAMvC,M,CAWvCC,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,YAEpB,GAAIP,KAAKQ,MAAO,CACdD,EAAWE,KAAK,kB,CAElB,GAAIT,KAAKU,QAAS,CAChBH,EAAWE,KAAK,aAAeT,KAAKU,Q,CAEtC,GAAIV,KAAKW,UAAW,CAClBJ,EAAWE,KAAK,aAAeT,KAAKW,U,CAGtC,OAAOJ,EAAWK,KAAK,I,EAGjBP,EAAAC,UAAAO,eAAA,WACN,IAAMC,EAAad,KAAKU,UAAY,WACpC,IAAMK,EAAcD,EAClBE,EAAA,UAAQC,MAAM,mBAAmBC,KAAK,UACnClB,KAAKmB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDjB,KAAKoB,MACNJ,EAAA,YAAUK,KAAMC,EAAWC,KAAK,OAAM,cAAa,UAGrDP,EAAA,QAAMC,MAAM,mBACTjB,KAAKmB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDjB,KAAKoB,OAIV,OAAOL,C,EAGTV,EAAAC,UAAAkB,OAAA,WACE,OACER,EAACS,EAAI,CAAAC,IAAA,2CAACT,MAAOjB,KAAKO,aAAcoB,GAAI3B,KAAK4B,aACtC5B,KAAKa,iBACLb,KAAKU,UAAY,OAChBM,EAAA,UAAAU,IAAA,2CAAQT,MAAM,kBAAkBC,KAAK,SAASW,QAAS7B,KAAKC,iBAAgB,aAAa,UACvFe,EAAA,YAAAU,IAAA,2CAAUL,KAAMS,EAAQP,KAAK,U,WApFrB,I","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register(["./p-45cf2585.system.js"],(function(i){"use strict";var s,t,a,e;return{setters:[function(i){s=i.r;t=i.h;a=i.H;e=i.g}],execute:function(){var n=":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;--outline:2px solid var(--pine-color-focus-ring);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-grey-100);border:var(--pine-border-width-thin) solid var(--pine-color-grey-200);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}";var r=n;var o=i("pds_tabs",function(){function i(i){s(this,i);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}i.prototype.tabClickHandler=function(i){if(this.componentId===i.detail[1]){this.activeTabIndex=i.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}};i.prototype.handleKeyDown=function(i){var s=["ArrowLeft","ArrowRight","Home","End"];if(s.includes(i.key)){i.preventDefault();this.moveActiveTab(i.key)}};i.prototype.moveActiveTab=function(i){var s=0;var t=this.tabs.length-1;var a=null;switch(i){case"ArrowLeft":a=this.activeTabIndex===s?t:this.activeTabIndex+-1;break;case"ArrowRight":a=this.activeTabIndex===t?s:this.activeTabIndex+1;break;case"Home":a=s;break;case"End":a=t;break}this.tabs[a].children[0].focus();this.activeTabName=this.tabs[a].name;this.activeTabIndex=a};i.prototype.findAllChildren=function(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")};i.prototype.propGeneration=function(i,s){if(s===void 0){s=0}i.parentComponentId=this.componentId.toString();i.variant=this.variant.toString();i.selected=this.activeTabName===i.name?true:false;i["index"]=s};i.prototype.passPropsToChildren=function(){var i=this;this.tabs.forEach((function(s,t){if(i.activeTabName===s.name)i.activeTabIndex=t;i.propGeneration(s,t)}));this.tabPanels.forEach((function(s){i.propGeneration(s)}))};i.prototype.classNames=function(){var i="pds-tabs";if(this.variant&&this.variant!="primary"){var s="pds-tabs--".concat(this.variant);i+=" "+s}return i};i.prototype.componentWillLoad=function(){this.findAllChildren()};i.prototype.componentWillRender=function(){this.passPropsToChildren()};i.prototype.render=function(){return t(a,{key:"93431c0270fb4f658262c43ab65fc144c527d7bf","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},t("div",{key:"a9b216ad2a3612b4bc5219b370efa90b9ef89e1c",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},t("slot",{key:"a4a9a6cf3a3d43ad6b390a041cc1ef18472325f0",name:"tabs"})),t("slot",{key:"729ae2b2a129760d0d347acaee0118ba667b5292",name:"tabpanels"}))};Object.defineProperty(i.prototype,"el",{get:function(){return e(this)},enumerable:false,configurable:true});return i}());o.style=r}}}));
|
|
2
|
+
//# sourceMappingURL=p-b95c0169.system.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsTabsCss","PdsTabsStyle0","PdsTabs","exports","class_1","prototype","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","_this","forEach","classNames","className","variantClassName","concat","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n /**\n * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n */\n --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n /**\n * @prop --tabs-dimension-panel-padding: Optional padding for panels\n */\n --tabs-dimension-panel-padding: 0;\n\n --outline: 2px solid var(--pine-color-focus-ring);\n\n display: block;\n}\n\n.pds-tabs__tablist {\n display: flex;\n flex-wrap: wrap;\n gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n background-color: var(--pine-color-grey-100);\n border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n border-radius: var(--pine-dimension-100);\n display: inline-flex;\n display: flex;\n gap: 0;\n height: var(--pine-dimension-450);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n tag: 'pds-tabs',\n styleUrls: ['pds-tabs.scss'],\n shadow: true,\n})\nexport class PdsTabs {\n private tabs;\n private tabPanels;\n\n @Element() el: HTMLPdsTabsElement;\n\n /**\n * Sets the aria-label attached to the tablist element\n */\n @Prop() tablistLabel!: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets tabs variant styles as outlined in Figma documentation\n */\n @Prop() variant!: 'primary' | 'availability' | 'filter' | 'pill';\n\n /**\n * Sets the starting active tab name and maintains the name as the component re-renders\n */\n @Prop({mutable: true}) activeTabName!: string;\n\n /**\n * Sets the starting active tab index number and maintains the index number as the component re-renders\n */\n /** @internal */\n @Prop({mutable: true}) activeTabIndex: number;\n\n @Listen('pdsTabClick', {\n target: 'body',\n })\n tabClickHandler(event: CustomEvent<any>) {\n if (this.componentId === event.detail[1]) {\n this.activeTabIndex = event.detail[0];\n this.activeTabName = this.tabs[this.activeTabIndex].name;\n }\n }\n\n @Listen('keydown', {})\n handleKeyDown(ev: KeyboardEvent) {\n const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n if (keySet.includes(ev.key)) {\n ev.preventDefault();\n this.moveActiveTab(ev.key);\n }\n }\n\n private moveActiveTab(key: string) {\n const firstTabNumber = 0;\n const lastTabNumber = this.tabs.length - 1;\n\n let moveFocusTo = null;\n\n switch (key) {\n case 'ArrowLeft':\n moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n break;\n case 'ArrowRight':\n moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n break;\n case 'Home':\n moveFocusTo = firstTabNumber;\n break;\n case 'End':\n moveFocusTo = lastTabNumber;\n break;\n }\n\n // Move focus to the button element within `pds-tab`\n this.tabs[moveFocusTo].children[0].focus();\n this.activeTabName = this.tabs[moveFocusTo].name;\n this.activeTabIndex = moveFocusTo;\n }\n\n private findAllChildren() {\n this.tabs = this.el.querySelectorAll('pds-tab');\n this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n }\n\n private propGeneration(child, index = 0) {\n child.parentComponentId = this.componentId.toString();\n child.variant = this.variant.toString();\n child.selected = (this.activeTabName === child.name) ? true : false;\n child['index'] = index;\n }\n\n private passPropsToChildren() {\n this.tabs.forEach((child, index) => {\n if (this.activeTabName === child.name) this.activeTabIndex = index;\n this.propGeneration(child, index);\n });\n\n this.tabPanels.forEach((child) => {\n this.propGeneration(child);\n });\n }\n\n private classNames() {\n let className = `pds-tabs`;\n if (this.variant && this.variant != 'primary') {\n const variantClassName = `pds-tabs--${this.variant}`;\n className += ' ' + variantClassName;\n }\n\n return className;\n };\n\n componentWillLoad() {\n this.findAllChildren();\n }\n\n componentWillRender() {\n this.passPropsToChildren();\n }\n\n render() {\n return (\n <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n <slot name=\"tabs\" />\n </div>\n <slot name=\"tabpanels\" />\n </Host>\n );\n }\n}\n"],"mappings":"0JAAA,IAAMA,EAAa,4uBACnB,IAAAC,EAAeD,E,ICUFE,EAAOC,EAAA,sB,iKAmClBC,EAAAC,UAAAC,gBAAA,SAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,GAKxDV,EAAAC,UAAAU,cAAA,SAAcC,GACZ,IAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,GAIlBf,EAAAC,UAAAgB,cAAA,SAAcF,GACpB,IAAMG,EAAiB,EACvB,IAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,EAGhBrB,EAAAC,UAAAuB,gBAAA,WACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,EAGpC1B,EAAAC,UAAA2B,eAAA,SAAeC,EAAOC,GAAA,GAAAA,SAAA,GAAAA,EAAA,CAAS,CACrCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,EAGX9B,EAAAC,UAAAkC,oBAAA,eAAAC,EAAAhC,KACNA,KAAKK,KAAK4B,SAAQ,SAACR,EAAOC,GACxB,GAAIM,EAAK5B,gBAAkBqB,EAAMnB,KAAM0B,EAAK7B,eAAiBuB,EAC7DM,EAAKR,eAAeC,EAAOC,E,IAG7B1B,KAAKuB,UAAUU,SAAQ,SAACR,GACtBO,EAAKR,eAAeC,E,KAIhB7B,EAAAC,UAAAqC,WAAA,WACN,IAAIC,EAAY,WAChB,GAAInC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,IAAMO,EAAmB,aAAAC,OAAarC,KAAK6B,SAC3CM,GAAa,IAAMC,C,CAGrB,OAAOD,C,EAGTvC,EAAAC,UAAAyC,kBAAA,WACEtC,KAAKoB,iB,EAGPxB,EAAAC,UAAA0C,oBAAA,WACEvC,KAAK+B,qB,EAGPnC,EAAAC,UAAA2C,OAAA,WACE,OACEC,EAACC,EAAI,CAAA/B,IAAA,6DAAkBX,KAAKI,cAAeuC,MAAO3C,KAAKkC,aAAcU,GAAI5C,KAAKC,aAC5EwC,EAAA,OAAA9B,IAAA,2CAAKgC,MAAM,oBAAoBE,KAAK,UAAS,aAAa7C,KAAK8C,cAC7DL,EAAA,QAAA9B,IAAA,2CAAML,KAAK,UAEbmC,EAAA,QAAA9B,IAAA,2CAAML,KAAK,c,uHA9HC,I","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,h as s,H as e}from"./p-87fe352f.js";const n="pds-box{--border-width-default:var(--pine-border-width-thin);--color-background-box:inherit;--color-border-box:inherit;display:block}[class*=pds-box]{background-color:var(--color-background-box);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--sizing-min-height-box);min-width:var(--sizing-min-width-box)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-xxl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-xxl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-xxl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-xxl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-xxl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-box--auto{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--color-border-box, var(--pine-color-grey-300));border-style:solid;border-width:var(--border-width-default)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-dimension-2xs)}.pds-border-radius-sm{border-radius:var(--pine-dimension-xs)}.pds-border-radius-md{border-radius:var(--pine-dimension-100)}.pds-border-radius-lg{border-radius:var(--pine-dimension-sm)}.pds-border-radius-circle{border-radius:var(--pine-border-radius-full)}.pds-shadow-050{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-100{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-150{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-200{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-shadow-300{-webkit-box-shadow:var(--pine-box-shadow-300);box-shadow:var(--pine-box-shadow-300)}.pds-shadow-400{-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400)}.pds-shadow-500{-webkit-box-shadow:var(--pine-box-shadow-500);box-shadow:var(--pine-box-shadow-500)}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-md{gap:var(--pine-dimension-md)}.pds-box-gap-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xxl{gap:var(--pine-dimension-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-xs{padding:var(--pine-dimension-xs)}.pds-padding-sm{padding:var(--pine-dimension-sm)}.pds-padding-md{padding:var(--pine-dimension-md)}.pds-padding-lg{padding:var(--pine-dimension-lg)}.pds-padding-xl{padding:var(--pine-dimension-xl)}.pds-padding-xxl{padding:var(--pine-dimension-2xl)}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";const t=n;const x=class{constructor(s){i(this,s);this.alignItems=undefined;this.auto=undefined;this.backgroundColor=undefined;this.border=false;this.borderColor=undefined;this.borderRadius=undefined;this.direction=undefined;this.display=undefined;this.fit=undefined;this.gap=undefined;this.flex=undefined;this.justifyContent=undefined;this.minHeight=undefined;this.minWidth=undefined;this.offset=undefined;this.offsetXs=undefined;this.offsetSm=undefined;this.offsetMd=undefined;this.offsetLg=undefined;this.offsetXl=undefined;this.padding=undefined;this.shadow=undefined;this.size=undefined;this.sizeXs=undefined;this.sizeSm=undefined;this.sizeMd=undefined;this.sizeLg=undefined;this.sizeXl=undefined}render(){const i=`\n ${this.alignItems!==undefined&&this.alignItems.trim()!==""?`pds-align-items-${this.alignItems}`:""}\n ${this.auto?"pds-box--auto":""}\n ${this.border?"pds-box--border":""}\n ${this.borderRadius!==undefined&&this.borderRadius.trim()!==""?`pds-border-radius-${this.borderRadius}`:""}\n ${this.direction!==undefined&&this.direction.trim()!==""?`pds-box-direction-${this.direction}`:""}\n ${this.display!==undefined&&this.display.trim()!==""?`pds-box--display-${this.display}`:""}\n ${this.fit?"pds-box--fit":""}\n ${this.gap!==undefined&&this.gap.trim()!==""?`pds-box-gap-${this.gap}`:""}\n ${this.flex!==undefined&&this.flex.trim()!==""?`pds-box--flex-${this.flex}`:""}\n ${this.justifyContent!==undefined&&this.justifyContent.trim()!==""?`pds-justify-content-${this.justifyContent}`:""}\n ${this.offset!==undefined&&this.offset.trim()!==""?`pds-box-offset-${this.offset}`:""}\n ${this.offsetXs!==undefined&&this.offsetXs.trim()!==""?`pds-box-offset-xs-${this.offsetXs}`:""}\n ${this.offsetSm!==undefined&&this.offsetSm.trim()!==""?`pds-box-offset-sm-${this.offsetSm}`:""}\n ${this.offsetMd!==undefined&&this.offsetMd.trim()!==""?`pds-box-offset-md-${this.offsetMd}`:""}\n ${this.offsetLg!==undefined&&this.offsetLg.trim()!==""?`pds-box-offset-lg-${this.offsetLg}`:""}\n ${this.offsetXl!==undefined&&this.offsetXl.trim()!==""?`pds-box-offset-xl-${this.offsetXl}`:""}\n ${this.padding!==undefined&&this.padding.trim()!==""?`pds-padding-${this.padding}`:""}\n ${this.shadow!==undefined&&this.shadow.trim()!==""?`pds-shadow-${this.shadow}`:""}\n ${this.size!==undefined&&this.size.trim()!==""?`pds-box pds-box-${this.size}`:""}\n ${this.sizeXs!==undefined&&this.sizeXs.trim()!==""?`pds-box-xs-${this.sizeXs}`:""}\n ${this.sizeSm!==undefined&&this.sizeSm.trim()!==""?`pds-box-sm-${this.sizeSm}`:""}\n ${this.sizeMd!==undefined&&this.sizeMd.trim()!==""?`pds-box-md-${this.sizeMd}`:""}\n ${this.sizeLg!==undefined&&this.sizeLg.trim()!==""?`pds-box-lg-${this.sizeLg}`:""}\n ${this.sizeXl!==undefined&&this.sizeXl.trim()!==""?`pds-box-xl-${this.sizeXl}`:""}\n ${this.size==undefined&&this.sizeSm==undefined&&this.sizeMd==undefined&&this.sizeLg==undefined&&this.sizeXl==undefined?"pds-box":""}\n `;const n=Object.assign(Object.assign(Object.assign(Object.assign({},this.backgroundColor&&{"--color-background-box":this.backgroundColor}),this.borderColor&&{"--color-border-box":this.borderColor}),this.minHeight&&{"--sizing-min-height-box":this.minHeight}),this.minWidth&&{"--sizing-min-height-box":this.minWidth});return s(e,{key:"56a682a80e67403fdaae36ca8356eb388dfce370",class:i,style:n})}};x.style=t;export{x as pds_box};
|
|
2
|
+
//# sourceMappingURL=p-bda9a6a0.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsBoxCss","PdsBoxStyle0","PdsBox","render","boxClasses","this","alignItems","undefined","trim","auto","border","borderRadius","direction","display","fit","gap","flex","justifyContent","offset","offsetXs","offsetSm","offsetMd","offsetLg","offsetXl","padding","shadow","size","sizeXs","sizeSm","sizeMd","sizeLg","sizeXl","boxInlineStyles","Object","assign","backgroundColor","borderColor","minHeight","minWidth","h","Host","key","class","style"],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@import './pds-box.mixins';\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\n\n display: block;\n}\n\n[class*='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--sizing-min-height-box);\n min-width: var(--sizing-min-width-box);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: solid;\n border-width: var(--border-width-default);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-100);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Spacing helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Display helpers\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /**\n * Defines the vertical alignment of the box items.\n * @defaultValue start\n */\n @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * If `true`, the box will be sized to fit its contents.\n */\n @Prop() auto?: boolean;\n\n /**\n * Defines the background-color of the box.\n */\n @Prop() backgroundColor?: string;\n\n /**\n * If `true`, the box will have a border.\n */\n @Prop() border? = false;\n\n /**\n * Defines the border color of the box.\n */\n @Prop() borderColor?: string;\n\n /**\n * Defines how rounded the box corners are.\n * @defaultValue none\n */\n @Prop() borderRadius?: `none` | `xs`| `sm` | `md` | `lg` | `circle`;\n\n /**\n * Defines the orientation of the box items.\n * @defaultValue row\n */\n @Prop() direction?: `row` | `column`;\n\n /**\n * Defines the display style of the box.\n * @defaultValue flex\n */\n @Prop() display?: `flex` | `inline-flex` | `block` | `inline-block`;\n\n /**\n * If `true`, sets the box `max-width` to `100%`.\n */\n @Prop() fit?: boolean;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() gap?: BoxTShirtSizeType;\n\n /**\n * Defines how a box will grow or shrink to fit the space available in its container.\n * @defaultValue none\n */\n @Prop() flex?: `none` | `grow` | `shrink`;\n\n /**\n * Defines the horizontal alignment of the box items.\n * @defaultValue start\n */\n @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n /**\n * The minimum height of the row. Used in conjunction with alignment props\n */\n @Prop() minHeight?: string;\n\n /**\n * The minimum width of the row. Used in conjunction with alignment props\n */\n @Prop() minWidth?: string;\n\n /**\n * Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offset?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetXs?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetSm?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetMd?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetLg?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetXl?: BoxColumnType;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() padding?: BoxTShirtSizeType;\n\n /**\n * Defines the box shadow.\n * @defaultValue none\n */\n @Prop() shadow?: BoxShadowSizeType;\n\n /**\n * Size of the column for all screen sizes that are not explicitly set.\n */\n @Prop() size?: BoxColumnType;\n\n /**\n * At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXs?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeSm?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeMd?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeLg?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n const boxInlineStyles = {\n ...(this.backgroundColor && { '--color-background-box': this.backgroundColor }),\n ...(this.borderColor && { '--color-border-box': this.borderColor }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-height-box': this.minWidth }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,ynrBAClB,MAAAC,EAAeD,E,MCOFE,EAAM,M,kHAoBC,M,6iBAkIlB,MAAAC,GACE,MAAMC,EAAa,SACjBC,KAAKC,aAAeC,WAAaF,KAAKC,WAAWE,SAAW,GAAK,mBAAmBH,KAAKC,aAAe,WACxGD,KAAKI,KAAO,gBAAkB,WAC9BJ,KAAKK,OAAS,kBAAoB,WAClCL,KAAKM,eAAiBJ,WAAaF,KAAKM,aAAaH,SAAW,GAAK,qBAAqBH,KAAKM,eAAiB,WAChHN,KAAKO,YAAcL,WAAaF,KAAKO,UAAUJ,SAAW,GAAK,qBAAqBH,KAAKO,YAAc,WACvGP,KAAKQ,UAAYN,WAAaF,KAAKQ,QAAQL,SAAW,GAAK,oBAAoBH,KAAKQ,UAAY,WAChGR,KAAKS,IAAM,eAAiB,WAC5BT,KAAKU,MAAQR,WAAaF,KAAKU,IAAIP,SAAW,GAAK,eAAeH,KAAKU,MAAQ,WAC/EV,KAAKW,OAAST,WAAaF,KAAKW,KAAKR,SAAW,GAAK,iBAAiBH,KAAKW,OAAS,WACpFX,KAAKY,iBAAmBV,WAAaF,KAAKY,eAAeT,SAAW,GAAK,uBAAuBH,KAAKY,iBAAmB,WACxHZ,KAAKa,SAAWX,WAAaF,KAAKa,OAAOV,SAAW,GAAK,kBAAkBH,KAAKa,SAAW,WAC3Fb,KAAKc,WAAaZ,WAAaF,KAAKc,SAASX,SAAW,GAAK,qBAAqBH,KAAKc,WAAa,WACpGd,KAAKe,WAAab,WAAaF,KAAKe,SAASZ,SAAW,GAAK,qBAAqBH,KAAKe,WAAa,WACpGf,KAAKgB,WAAad,WAAaF,KAAKgB,SAASb,SAAW,GAAK,qBAAqBH,KAAKgB,WAAa,WACpGhB,KAAKiB,WAAaf,WAAaF,KAAKiB,SAASd,SAAW,GAAK,qBAAqBH,KAAKiB,WAAa,WACpGjB,KAAKkB,WAAahB,WAAaF,KAAKkB,SAASf,SAAW,GAAK,qBAAqBH,KAAKkB,WAAa,WACpGlB,KAAKmB,UAAYjB,WAAaF,KAAKmB,QAAQhB,SAAW,GAAK,eAAeH,KAAKmB,UAAY,WAC3FnB,KAAKoB,SAAWlB,WAAaF,KAAKoB,OAAOjB,SAAW,GAAK,cAAcH,KAAKoB,SAAW,WACvFpB,KAAKqB,OAASnB,WAAaF,KAAKqB,KAAKlB,SAAW,GAAK,mBAAmBH,KAAKqB,OAAS,WACtFrB,KAAKsB,SAAWpB,WAAaF,KAAKsB,OAAOnB,SAAW,GAAK,cAAcH,KAAKsB,SAAW,WACvFtB,KAAKuB,SAAWrB,WAAaF,KAAKuB,OAAOpB,SAAW,GAAK,cAAcH,KAAKuB,SAAW,WACvFvB,KAAKwB,SAAWtB,WAAaF,KAAKwB,OAAOrB,SAAW,GAAK,cAAcH,KAAKwB,SAAW,WACvFxB,KAAKyB,SAAWvB,WAAaF,KAAKyB,OAAOtB,SAAW,GAAK,cAAcH,KAAKyB,SAAW,WACvFzB,KAAK0B,SAAWxB,WAAaF,KAAK0B,OAAOvB,SAAW,GAAK,cAAcH,KAAK0B,SAAW,WACvF1B,KAAKqB,MAAQnB,WACbF,KAAKuB,QAAUrB,WACfF,KAAKwB,QAAUtB,WACfF,KAAKyB,QAAUvB,WACfF,KAAK0B,QAAUxB,UAAY,UAAY,WAGzC,MAAMyB,EAAeC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACf7B,KAAK8B,iBAAmB,CAAE,yBAA0B9B,KAAK8B,kBACzD9B,KAAK+B,aAAe,CAAE,qBAAsB/B,KAAK+B,cACjD/B,KAAKgC,WAAa,CAAE,0BAA2BhC,KAAKgC,YACpDhC,KAAKiC,UAAY,CAAE,0BAA2BjC,KAAKiC,WAGzD,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOtC,EAAYuC,MAAOX,G","ignoreList":[]}
|