@pine-ds/core 3.27.0 → 3.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/i18n-format.js +1 -0
- package/components/pds-alert.js +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-link2.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-tab.js +1 -1
- package/components/pds-tabpanel.js +1 -1
- package/components/pds-tabs.js +1 -1
- package/components/pds-text2.js +1 -1
- package/components/pds-textarea.js +1 -1
- package/components/pds-toast.js +1 -1
- package/components/pds-tooltip.js +1 -1
- package/dist/cjs/i18n-format-CrpIhahc.js +64 -0
- package/dist/cjs/{index-DBhfI2Jq.js → index-BdFrBXCD.js} +5 -1
- package/dist/cjs/{index-DGBoDsAL.js → index-CKNNY-lQ.js} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mock-pds-modal.cjs.entry.js +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js +2 -2
- package/dist/cjs/pds-alert.cjs.entry.js +8 -2
- package/dist/cjs/pds-avatar.cjs.entry.js +45 -8
- package/dist/cjs/pds-box.cjs.entry.js +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +2 -2
- package/dist/cjs/pds-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/pds-chip.cjs.entry.js +10 -5
- package/dist/cjs/pds-combobox.cjs.entry.js +1 -1
- package/dist/cjs/pds-container.cjs.entry.js +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +2 -2
- package/dist/cjs/pds-divider.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu-separator.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +1 -1
- package/dist/cjs/pds-filter.cjs.entry.js +2 -2
- package/dist/cjs/pds-filters.cjs.entry.js +1 -1
- package/dist/cjs/pds-icon.cjs.entry.js +1 -1
- package/dist/cjs/pds-image.cjs.entry.js +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +2 -2
- package/dist/cjs/pds-link.cjs.entry.js +12 -5
- package/dist/cjs/pds-loader.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-content.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-footer.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-header.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal.cjs.entry.js +1 -1
- package/dist/cjs/pds-multiselect.cjs.entry.js +93 -14
- package/dist/cjs/pds-popover.cjs.entry.js +1 -1
- package/dist/cjs/pds-progress.cjs.entry.js +1 -1
- package/dist/cjs/pds-property.cjs.entry.js +1 -1
- package/dist/cjs/pds-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/pds-radio.cjs.entry.js +2 -2
- package/dist/cjs/pds-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-select.cjs.entry.js +2 -2
- package/dist/cjs/pds-sortable-item.cjs.entry.js +2 -2
- package/dist/cjs/pds-sortable.cjs.entry.js +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +2 -2
- package/dist/cjs/pds-tab.cjs.entry.js +41 -6
- package/dist/cjs/pds-table-body.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-head.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-table.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabpanel.cjs.entry.js +8 -3
- package/dist/cjs/pds-tabs.cjs.entry.js +74 -3
- package/dist/cjs/pds-text.cjs.entry.js +2 -2
- package/dist/cjs/pds-textarea.cjs.entry.js +14 -7
- package/dist/cjs/pds-toast.cjs.entry.js +10 -4
- package/dist/cjs/pds-tooltip.cjs.entry.js +3 -3
- package/dist/cjs/pine-core.cjs.js +2 -2
- package/dist/collection/components/pds-alert/pds-alert.js +30 -1
- package/dist/collection/components/pds-avatar/pds-avatar.css +29 -0
- package/dist/collection/components/pds-avatar/pds-avatar.js +133 -5
- package/dist/collection/components/pds-avatar/stories/pds-avatar.stories.js +23 -0
- package/dist/collection/components/pds-button/pds-button.js +1 -1
- package/dist/collection/components/pds-button/stories/pds-button.stories.js +25 -0
- package/dist/collection/components/pds-chip/pds-chip.js +31 -3
- package/dist/collection/components/pds-link/pds-link.css +10 -0
- package/dist/collection/components/pds-link/pds-link.js +32 -2
- package/dist/collection/components/pds-link/stories/pds-link.stories.js +14 -0
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +358 -17
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +4 -4
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +161 -5
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.css +9 -0
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +29 -1
- package/dist/collection/components/pds-tabs/pds-tabs.css +14 -0
- package/dist/collection/components/pds-tabs/pds-tabs.js +146 -4
- package/dist/collection/components/pds-tabs/stories/pds-tabs.stories.js +43 -0
- package/dist/collection/components/pds-text/pds-text.js +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.js +35 -5
- package/dist/collection/components/pds-toast/pds-toast.js +32 -3
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
- package/dist/collection/i18n/i18n-format.js +59 -0
- package/dist/collection/i18n/index.js +1 -0
- package/dist/docs.json +866 -13
- package/dist/esm/i18n-format-BKsJZTyn.js +61 -0
- package/dist/esm/{index-D4ys0pep.js → index-BjlFq0VD.js} +1 -1
- package/dist/esm/{index-CaRgVPt7.js → index-NNDTPCWx.js} +5 -2
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mock-pds-modal.entry.js +1 -1
- package/dist/esm/pds-accordion.entry.js +2 -2
- package/dist/esm/pds-alert.entry.js +8 -2
- package/dist/esm/pds-avatar.entry.js +45 -8
- package/dist/esm/pds-box.entry.js +1 -1
- package/dist/esm/pds-button.entry.js +2 -2
- package/dist/esm/pds-checkbox.entry.js +2 -2
- package/dist/esm/pds-chip.entry.js +10 -5
- package/dist/esm/pds-combobox.entry.js +1 -1
- package/dist/esm/pds-container.entry.js +1 -1
- package/dist/esm/pds-copytext.entry.js +2 -2
- package/dist/esm/pds-divider.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu-separator.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm/pds-filter.entry.js +2 -2
- package/dist/esm/pds-filters.entry.js +1 -1
- package/dist/esm/pds-icon.entry.js +1 -1
- package/dist/esm/pds-image.entry.js +1 -1
- package/dist/esm/pds-input.entry.js +2 -2
- package/dist/esm/pds-link.entry.js +12 -5
- package/dist/esm/pds-loader.entry.js +1 -1
- package/dist/esm/pds-modal-content.entry.js +1 -1
- package/dist/esm/pds-modal-footer.entry.js +1 -1
- package/dist/esm/pds-modal-header.entry.js +1 -1
- package/dist/esm/pds-modal.entry.js +1 -1
- package/dist/esm/pds-multiselect.entry.js +93 -14
- package/dist/esm/pds-popover.entry.js +1 -1
- package/dist/esm/pds-progress.entry.js +1 -1
- package/dist/esm/pds-property.entry.js +1 -1
- package/dist/esm/pds-radio-group.entry.js +2 -2
- package/dist/esm/pds-radio.entry.js +2 -2
- package/dist/esm/pds-row.entry.js +1 -1
- package/dist/esm/pds-select.entry.js +2 -2
- package/dist/esm/pds-sortable-item.entry.js +2 -2
- package/dist/esm/pds-sortable.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js +2 -2
- package/dist/esm/pds-tab.entry.js +41 -6
- package/dist/esm/pds-table-body.entry.js +1 -1
- package/dist/esm/pds-table-cell.entry.js +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +2 -2
- package/dist/esm/pds-table-head.entry.js +1 -1
- package/dist/esm/pds-table-row.entry.js +1 -1
- package/dist/esm/pds-table.entry.js +1 -1
- package/dist/esm/pds-tabpanel.entry.js +8 -3
- package/dist/esm/pds-tabs.entry.js +74 -3
- package/dist/esm/pds-text.entry.js +2 -2
- package/dist/esm/pds-textarea.entry.js +14 -7
- package/dist/esm/pds-toast.entry.js +10 -4
- package/dist/esm/pds-tooltip.entry.js +3 -3
- package/dist/esm/pine-core.js +3 -3
- package/dist/esm-es5/i18n-format-BKsJZTyn.js +1 -0
- package/dist/esm-es5/{index-CaRgVPt7.js → index-NNDTPCWx.js} +2 -2
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mock-pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-alert.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +2 -2
- package/dist/esm-es5/pds-container.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-divider.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-separator.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm-es5/pds-filter.entry.js +1 -1
- package/dist/esm-es5/pds-filters.entry.js +1 -1
- package/dist/esm-es5/pds-icon.entry.js +1 -1
- package/dist/esm-es5/pds-image.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-loader.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal-footer.entry.js +1 -1
- package/dist/esm-es5/pds-modal-header.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-popover.entry.js +1 -1
- package/dist/esm-es5/pds-progress.entry.js +1 -1
- package/dist/esm-es5/pds-property.entry.js +1 -1
- package/dist/esm-es5/pds-radio-group.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-sortable.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-table-body.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.entry.js +1 -1
- package/dist/esm-es5/pds-table-row.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-toast.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/pine-core/p-02805a93.system.entry.js +1 -0
- package/dist/pine-core/{p-e70c9002.entry.js → p-02977c6f.entry.js} +1 -1
- package/dist/pine-core/{p-4e49712d.entry.js → p-054f7011.entry.js} +1 -1
- package/dist/pine-core/{p-571d6bef.system.entry.js → p-076aaa00.system.entry.js} +1 -1
- package/dist/pine-core/{p-3fa80c5a.system.entry.js → p-092a72d2.system.entry.js} +1 -1
- package/dist/pine-core/p-0a09ccbe.entry.js +1 -0
- package/dist/pine-core/p-0a4f2d5f.system.entry.js +1 -0
- package/dist/pine-core/{p-f2cf8e76.entry.js → p-0d6daa35.entry.js} +1 -1
- package/dist/pine-core/p-12154189.system.entry.js +1 -0
- package/dist/pine-core/{p-44f58d33.system.entry.js → p-1deded6e.system.entry.js} +1 -1
- package/dist/pine-core/{p-fa81009f.system.entry.js → p-1f20608e.system.entry.js} +1 -1
- package/dist/pine-core/{p-27ac77c3.entry.js → p-1fb985bb.entry.js} +1 -1
- package/dist/pine-core/{p-855dfc31.system.entry.js → p-20e0d06c.system.entry.js} +1 -1
- package/dist/pine-core/p-24fcf841.system.entry.js +1 -0
- package/dist/pine-core/{p-c273210a.entry.js → p-292cf8f9.entry.js} +1 -1
- package/dist/pine-core/{p-db1572a3.entry.js → p-2a74b396.entry.js} +1 -1
- package/dist/pine-core/p-2d1cc047.entry.js +1 -0
- package/dist/pine-core/{p-002c420f.system.entry.js → p-2ec460e1.system.entry.js} +1 -1
- package/dist/pine-core/{p-e0cfb931.system.entry.js → p-2fc127b4.system.entry.js} +1 -1
- package/dist/pine-core/{p-d09ae46d.system.entry.js → p-3170d53b.system.entry.js} +1 -1
- package/dist/pine-core/{p-0451fdf7.entry.js → p-39ad92fc.entry.js} +1 -1
- package/dist/pine-core/{p-974bf0c5.entry.js → p-39c6e6c9.entry.js} +1 -1
- package/dist/pine-core/{p-d5c1f85e.system.entry.js → p-3c6300a8.system.entry.js} +1 -1
- package/dist/pine-core/{p-b0b6acdb.system.entry.js → p-3e3b3bf6.system.entry.js} +1 -1
- package/dist/pine-core/{p-52f7115b.entry.js → p-43a1d9d7.entry.js} +1 -1
- package/dist/pine-core/{p-13ec2343.entry.js → p-43ef94bc.entry.js} +1 -1
- package/dist/pine-core/{p-618ba6d5.system.entry.js → p-464ec4eb.system.entry.js} +1 -1
- package/dist/pine-core/{p-ee6f914c.entry.js → p-47708864.entry.js} +1 -1
- package/dist/pine-core/{p-ccb889d8.system.entry.js → p-507e831f.system.entry.js} +1 -1
- package/dist/pine-core/p-5c229a7f.entry.js +1 -0
- package/dist/pine-core/{p-5c6c2f79.system.entry.js → p-5c7a72aa.system.entry.js} +1 -1
- package/dist/pine-core/{p-71ca8845.system.entry.js → p-5e6e8d4e.system.entry.js} +1 -1
- package/dist/pine-core/{p-3ad9bcef.system.entry.js → p-5f4d2c5c.system.entry.js} +1 -1
- package/dist/pine-core/{p-6a2373d0.system.entry.js → p-606418b7.system.entry.js} +1 -1
- package/dist/pine-core/{p-22bfa998.entry.js → p-6254d112.entry.js} +1 -1
- package/dist/pine-core/{p-5a2df1e2.entry.js → p-62f75f84.entry.js} +1 -1
- package/dist/pine-core/{p-835d9f18.system.entry.js → p-69e47ffc.system.entry.js} +1 -1
- package/dist/pine-core/p-6f82e8dc.system.entry.js +1 -0
- package/dist/pine-core/{p-b1b317a5.entry.js → p-6fb68ad1.entry.js} +1 -1
- package/dist/pine-core/{p-1e3beca4.system.entry.js → p-7153efaf.system.entry.js} +1 -1
- package/dist/pine-core/{p-a982ac91.system.entry.js → p-72a1b563.system.entry.js} +1 -1
- package/dist/pine-core/{p-7aca41d9.system.entry.js → p-7803c5b6.system.entry.js} +1 -1
- package/dist/pine-core/{p-74e06c8d.system.entry.js → p-78cd9f97.system.entry.js} +1 -1
- package/dist/pine-core/{p-edf4e4eb.system.entry.js → p-79598750.system.entry.js} +1 -1
- package/dist/pine-core/p-7a7954b2.system.entry.js +1 -0
- package/dist/pine-core/{p-3ba36512.system.entry.js → p-7b85115b.system.entry.js} +1 -1
- package/dist/pine-core/{p-83eb33d4.entry.js → p-7bac161d.entry.js} +1 -1
- package/dist/pine-core/{p-bdf18687.entry.js → p-7d15b65e.entry.js} +1 -1
- package/dist/pine-core/p-7e065b59.entry.js +1 -0
- package/dist/pine-core/p-82af7d58.system.entry.js +1 -0
- package/dist/pine-core/{p-73b81009.entry.js → p-83e8f145.entry.js} +1 -1
- package/dist/pine-core/{p-cce6dcf0.system.entry.js → p-85f7428b.system.entry.js} +1 -1
- package/dist/pine-core/{p-ae840ec4.entry.js → p-87ba6d2b.entry.js} +1 -1
- package/dist/pine-core/p-8c0040c4.entry.js +1 -0
- package/dist/pine-core/{p-a659cce1.entry.js → p-8c85f53a.entry.js} +1 -1
- package/dist/pine-core/{p-20f39b93.system.entry.js → p-8d6fd5a7.system.entry.js} +1 -1
- package/dist/pine-core/{p-7247fb4f.entry.js → p-902b5790.entry.js} +1 -1
- package/dist/pine-core/{p-3f19666c.entry.js → p-92f648ba.entry.js} +1 -1
- package/dist/pine-core/{p-e620e492.system.entry.js → p-9374cf48.system.entry.js} +1 -1
- package/dist/pine-core/p-978b848b.system.entry.js +1 -0
- package/dist/pine-core/{p-babd0607.system.entry.js → p-9aaee1e9.system.entry.js} +1 -1
- package/dist/pine-core/p-9ba86e34.entry.js +1 -0
- package/dist/pine-core/{p-4abec102.system.entry.js → p-9f041a63.system.entry.js} +2 -2
- package/dist/pine-core/p-B1rytYxP.system.js +1 -0
- package/dist/pine-core/p-BKsJZTyn.js +1 -0
- package/dist/pine-core/p-Cr7-rJtJ.system.js +1 -0
- package/dist/pine-core/{p-CdwliqhD.system.js → p-DVZjHa4_.system.js} +2 -2
- package/dist/pine-core/p-NNDTPCWx.js +2 -0
- package/dist/pine-core/{p-ba88ff60.system.entry.js → p-a03c12a4.system.entry.js} +1 -1
- package/dist/pine-core/p-a9ef5295.entry.js +1 -0
- package/dist/pine-core/{p-334b7c30.entry.js → p-ac2775b5.entry.js} +1 -1
- package/dist/pine-core/{p-a1750a54.entry.js → p-b0058cb0.entry.js} +1 -1
- package/dist/pine-core/p-b0674b8d.entry.js +1 -0
- package/dist/pine-core/{p-1e1804ed.system.entry.js → p-b5c760c8.system.entry.js} +1 -1
- package/dist/pine-core/{p-3a1b7302.system.entry.js → p-b6812452.system.entry.js} +1 -1
- package/dist/pine-core/{p-2b0cb8c4.system.entry.js → p-b89583e7.system.entry.js} +1 -1
- package/dist/pine-core/{p-5584a56b.entry.js → p-b9380ce8.entry.js} +1 -1
- package/dist/pine-core/{p-568bb210.system.entry.js → p-ba54470a.system.entry.js} +1 -1
- package/dist/pine-core/{p-7a4da839.entry.js → p-bf759fc0.entry.js} +1 -1
- package/dist/pine-core/{p-791d357a.entry.js → p-c1932447.entry.js} +1 -1
- package/dist/pine-core/{p-cce83ef0.entry.js → p-c2688710.entry.js} +1 -1
- package/dist/pine-core/{p-46de2438.entry.js → p-c35fe2e2.entry.js} +1 -1
- package/dist/pine-core/{p-ef71710b.system.entry.js → p-c3748812.system.entry.js} +2 -2
- package/dist/pine-core/{p-59a5dd77.system.entry.js → p-c52ad43b.system.entry.js} +1 -1
- package/dist/pine-core/{p-3876b9be.entry.js → p-ce715993.entry.js} +1 -1
- package/dist/pine-core/{p-587a15ee.system.entry.js → p-cf389430.system.entry.js} +1 -1
- package/dist/pine-core/{p-7874fe2b.entry.js → p-d037308b.entry.js} +1 -1
- package/dist/pine-core/{p-52e9ec4f.entry.js → p-d281464e.entry.js} +1 -1
- package/dist/pine-core/{p-04f8b32a.entry.js → p-d70201bb.entry.js} +1 -1
- package/dist/pine-core/{p-9865431f.system.entry.js → p-d9cb26fe.system.entry.js} +1 -1
- package/dist/pine-core/{p-44388b8f.system.entry.js → p-dc460e2d.system.entry.js} +1 -1
- package/dist/pine-core/p-dc48f603.entry.js +1 -0
- package/dist/pine-core/{p-01dba061.entry.js → p-dcc4ee5e.entry.js} +1 -1
- package/dist/pine-core/{p-f366f064.entry.js → p-def5d3d3.entry.js} +1 -1
- package/dist/pine-core/p-e0fb06ea.system.entry.js +1 -0
- package/dist/pine-core/p-e4b69d10.entry.js +1 -0
- package/dist/pine-core/{p-ae2b466a.system.entry.js → p-e81b4d04.system.entry.js} +1 -1
- package/dist/pine-core/{p-c3a99f39.entry.js → p-eb42ca18.entry.js} +1 -1
- package/dist/pine-core/{p-59c60e5b.entry.js → p-ebe218f8.entry.js} +1 -1
- package/dist/pine-core/{p-889fce8a.entry.js → p-ec2c0e57.entry.js} +2 -2
- package/dist/pine-core/{p-fb68e503.system.entry.js → p-eed4b552.system.entry.js} +1 -1
- package/dist/pine-core/p-f6d1469d.entry.js +1 -0
- package/dist/pine-core/{p-65fb166c.system.entry.js → p-fb10caff.system.entry.js} +1 -1
- package/dist/pine-core/{p-0bf56f61.entry.js → p-ff1e9a32.entry.js} +1 -1
- package/dist/pine-core/p-ff3399ed.entry.js +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/pine-core.js +1 -1
- package/dist/types/components/pds-alert/pds-alert.d.ts +6 -0
- package/dist/types/components/pds-avatar/pds-avatar.d.ts +30 -0
- package/dist/types/components/pds-button/pds-button.d.ts +1 -1
- package/dist/types/components/pds-chip/pds-chip.d.ts +5 -0
- package/dist/types/components/pds-link/pds-link.d.ts +7 -0
- package/dist/types/components/pds-multiselect/pds-multiselect.d.ts +67 -4
- package/dist/types/components/pds-tabs/pds-tab/pds-tab.d.ts +42 -0
- package/dist/types/components/pds-tabs/pds-tabpanel/pds-tabpanel.d.ts +5 -0
- package/dist/types/components/pds-tabs/pds-tabs.d.ts +25 -2
- package/dist/types/components/pds-textarea/pds-textarea.d.ts +6 -0
- package/dist/types/components/pds-toast/pds-toast.d.ts +6 -0
- package/dist/types/components.d.ts +321 -14
- package/dist/types/i18n/i18n-format.d.ts +38 -0
- package/dist/types/i18n/index.d.ts +2 -0
- package/hydrate/index.js +402 -53
- package/hydrate/index.mjs +402 -53
- package/package.json +3 -2
- package/dist/pine-core/p-003f91b1.system.entry.js +0 -1
- package/dist/pine-core/p-006398c3.system.entry.js +0 -1
- package/dist/pine-core/p-190ba1df.entry.js +0 -1
- package/dist/pine-core/p-638e9cb3.entry.js +0 -1
- package/dist/pine-core/p-63e0d4a5.system.entry.js +0 -1
- package/dist/pine-core/p-68121613.system.entry.js +0 -1
- package/dist/pine-core/p-6c5aacad.entry.js +0 -1
- package/dist/pine-core/p-73dd2a2b.entry.js +0 -1
- package/dist/pine-core/p-7520a715.system.entry.js +0 -1
- package/dist/pine-core/p-7766e970.entry.js +0 -1
- package/dist/pine-core/p-7b71f1bf.system.entry.js +0 -1
- package/dist/pine-core/p-7b954dbf.entry.js +0 -1
- package/dist/pine-core/p-8065c732.entry.js +0 -1
- package/dist/pine-core/p-829c52dc.entry.js +0 -1
- package/dist/pine-core/p-C61CFP22.system.js +0 -1
- package/dist/pine-core/p-CaRgVPt7.js +0 -2
- package/dist/pine-core/p-a739bdfa.entry.js +0 -1
- package/dist/pine-core/p-ab957ace.system.entry.js +0 -1
- package/dist/pine-core/p-b88be8be.entry.js +0 -1
- package/dist/pine-core/p-e291db30.entry.js +0 -1
- package/dist/pine-core/p-e77c5c08.system.entry.js +0 -1
- package/dist/pine-core/p-f2315f2a.entry.js +0 -1
- package/dist/pine-core/p-f928817f.system.entry.js +0 -1
- /package/dist/esm-es5/{index-D4ys0pep.js → index-BjlFq0VD.js} +0 -0
- /package/dist/pine-core/{p-D4ys0pep.js → p-BjlFq0VD.js} +0 -0
- /package/dist/pine-core/{p-C62JIZmE.system.js → p-WYNNo1N0.system.js} +0 -0
package/hydrate/index.js
CHANGED
|
@@ -3156,6 +3156,9 @@ var setContentReference = (elm) => {
|
|
|
3156
3156
|
contentRefElm["s-cn"] = true;
|
|
3157
3157
|
insertBefore(elm, contentRefElm, elm.firstChild);
|
|
3158
3158
|
};
|
|
3159
|
+
|
|
3160
|
+
// src/runtime/fragment.ts
|
|
3161
|
+
var Fragment = (_, children) => children;
|
|
3159
3162
|
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
3160
3163
|
if (listeners && win.document) {
|
|
3161
3164
|
listeners.map(([flags, name, method]) => {
|
|
@@ -5549,7 +5552,7 @@ class MockPdsModal {
|
|
|
5549
5552
|
}; }
|
|
5550
5553
|
}
|
|
5551
5554
|
|
|
5552
|
-
/* pds-icons
|
|
5555
|
+
/* pds-icons v10.2.0, ES Modules */
|
|
5553
5556
|
|
|
5554
5557
|
const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
|
|
5555
5558
|
const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
|
|
@@ -5652,6 +5655,12 @@ class PdsAlert {
|
|
|
5652
5655
|
* @defaultValue 'default'
|
|
5653
5656
|
*/
|
|
5654
5657
|
this.variant = 'default';
|
|
5658
|
+
/**
|
|
5659
|
+
* Accessible label for the dismiss button. Pass a translated string to
|
|
5660
|
+
* localize it; defaults to English.
|
|
5661
|
+
* @defaultValue 'Dismiss alert'
|
|
5662
|
+
*/
|
|
5663
|
+
this.dismissLabel = 'Dismiss alert';
|
|
5655
5664
|
this.hasActionsContent = false;
|
|
5656
5665
|
this.handleCloseClick = () => {
|
|
5657
5666
|
this.pdsAlertDismissClick.emit();
|
|
@@ -5682,7 +5691,7 @@ class PdsAlert {
|
|
|
5682
5691
|
};
|
|
5683
5692
|
// Get the icon name based on the current variant
|
|
5684
5693
|
const iconName = iconMap[this.variant] || iconMap.default;
|
|
5685
|
-
return (hAsync(Host, { key: '
|
|
5694
|
+
return (hAsync(Host, { key: 'b143df0c24c077e412894f5f77f1bd7c0ced1c92', class: "pds-alert", id: this.componentId, variant: this.variant }, hAsync("pds-box", { key: '928e3852507a1776069ee80906443ef650607ce7', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, hAsync("pds-box", { key: '778046ab1c651a57e910e45fe00944a74a3c32f7', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, !this.hideIcon && (hAsync("pds-icon", { key: '0199ef3e12a8dc9da20006fc8c4e133f83f4caf4', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" })), hAsync("pds-box", { key: 'b7b973c0c6154d72f90a585a116ea76ac48cc6e4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (hAsync("pds-text", { key: 'c969f9a7eabdc31bc2faca247033e89cc15caea0', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (hAsync("button", { key: '168c21de5a0112a65b73a854add4393fea9ede6f', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, hAsync("pds-icon", { key: 'f8e9311a4934c1b8458879cd6244a99e3a730be2', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
|
|
5686
5695
|
}
|
|
5687
5696
|
get el() { return getElement(this); }
|
|
5688
5697
|
static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
|
|
@@ -5696,6 +5705,7 @@ class PdsAlert {
|
|
|
5696
5705
|
"dismissible": [4],
|
|
5697
5706
|
"hideIcon": [4, "hide-icon"],
|
|
5698
5707
|
"variant": [1],
|
|
5708
|
+
"dismissLabel": [1, "dismiss-label"],
|
|
5699
5709
|
"hasActionsContent": [32]
|
|
5700
5710
|
},
|
|
5701
5711
|
"$listeners$": undefined,
|
|
@@ -5704,7 +5714,7 @@ class PdsAlert {
|
|
|
5704
5714
|
}; }
|
|
5705
5715
|
}
|
|
5706
5716
|
|
|
5707
|
-
const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-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{-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{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
|
|
5717
|
+
const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-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{-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{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}:host([status=online]){--pds-avatar-status-color:var(--pine-color-green-500)}:host([status=away]){--pds-avatar-status-color:var(--pine-color-yellow-500)}:host([status=offline]){--pds-avatar-status-color:var(--pine-color-background-inset-emphasized)}.pds-avatar__status{background-color:var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));block-size:28%;border-radius:var(--pine-border-radius-full);-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);inline-size:28%;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);min-block-size:var(--pine-dimension-100);min-inline-size:var(--pine-dimension-100);position:absolute}:host(.pds-avatar--status-ring) div{-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized))}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
|
|
5708
5718
|
|
|
5709
5719
|
/**
|
|
5710
5720
|
* @part asset-wrapper
|
|
@@ -5744,30 +5754,66 @@ class PdsAvatar {
|
|
|
5744
5754
|
* @defaultValue lg
|
|
5745
5755
|
*/
|
|
5746
5756
|
this.size = 'lg';
|
|
5757
|
+
/**
|
|
5758
|
+
* Displays a presence status indicator (a dot) on the avatar: `online`
|
|
5759
|
+
* (success), `away` (warning), or `offline` (neutral). For a simple
|
|
5760
|
+
* active/inactive presence, map active to `online` and inactive to `offline`.
|
|
5761
|
+
* Takes precedence over `badge` — they share the same corner, so the badge is
|
|
5762
|
+
* hidden while `status` is set.
|
|
5763
|
+
* @defaultValue null
|
|
5764
|
+
*/
|
|
5765
|
+
this.status = null;
|
|
5766
|
+
/**
|
|
5767
|
+
* Determines whether a ring is shown around the avatar in the `status` color.
|
|
5768
|
+
* Has no effect unless `status` is set.
|
|
5769
|
+
* @defaultValue false
|
|
5770
|
+
*/
|
|
5771
|
+
this.statusRing = false;
|
|
5747
5772
|
/**
|
|
5748
5773
|
* Determines the variant of avatar. Changes appearance accordingly.
|
|
5749
5774
|
* @defaultValue customer
|
|
5750
5775
|
*/
|
|
5751
5776
|
this.variant = 'customer';
|
|
5777
|
+
/**
|
|
5778
|
+
* Accessible label for the dropdown trigger button. Pass a translated string
|
|
5779
|
+
* to localize it; defaults to English.
|
|
5780
|
+
* @defaultValue 'Avatar dropdown trigger'
|
|
5781
|
+
*/
|
|
5782
|
+
this.triggerLabel = 'Avatar dropdown trigger';
|
|
5752
5783
|
this.renderAssetWrapper = () => {
|
|
5753
5784
|
const style = {
|
|
5754
5785
|
height: this.avatarSize(),
|
|
5755
5786
|
width: this.avatarSize()
|
|
5756
5787
|
};
|
|
5757
|
-
return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
|
|
5788
|
+
return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge(), this.renderStatus()));
|
|
5758
5789
|
};
|
|
5759
5790
|
this.renderAvatar = () => {
|
|
5760
5791
|
return (this.dropdown
|
|
5761
5792
|
?
|
|
5762
|
-
hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label":
|
|
5793
|
+
hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": this.triggerLabel }, this.renderAssetWrapper())
|
|
5763
5794
|
:
|
|
5764
5795
|
this.renderAssetWrapper());
|
|
5765
5796
|
};
|
|
5766
|
-
this.renderBadge = () => (
|
|
5797
|
+
this.renderBadge = () => (
|
|
5798
|
+
// `badge` and `status` share the bottom-end corner; `status` wins so the
|
|
5799
|
+
// presence dot is never painted over the badge.
|
|
5800
|
+
this.badge && !this.status
|
|
5767
5801
|
// Percentage is average size of icon in relation to total avatar size
|
|
5768
5802
|
// of all preset sizes found in Figma.
|
|
5769
5803
|
// Used to allow icons to scale to container size
|
|
5770
5804
|
&& hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
|
|
5805
|
+
this.renderStatus = () => {
|
|
5806
|
+
var _a;
|
|
5807
|
+
if (!this.status)
|
|
5808
|
+
return null;
|
|
5809
|
+
// Inside the dropdown trigger, the button's aria-label owns the accessible
|
|
5810
|
+
// name, so the dot's own label is never announced. Mark it decorative there
|
|
5811
|
+
// and let consumers convey presence via `triggerLabel`.
|
|
5812
|
+
if (this.dropdown) {
|
|
5813
|
+
return hAsync("span", { class: "pds-avatar__status", part: "status", "aria-hidden": "true" });
|
|
5814
|
+
}
|
|
5815
|
+
return (hAsync("span", { class: "pds-avatar__status", part: "status", role: "img", "aria-label": (_a = this.statusLabel) !== null && _a !== void 0 ? _a : `${this.status} status` }));
|
|
5816
|
+
};
|
|
5771
5817
|
this.renderIconOrImage = () => {
|
|
5772
5818
|
if (this.image) {
|
|
5773
5819
|
return hAsync("img", { alt: this.alt, src: this.image });
|
|
@@ -5784,7 +5830,8 @@ class PdsAvatar {
|
|
|
5784
5830
|
'pds-avatar': true,
|
|
5785
5831
|
[`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
|
|
5786
5832
|
[`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,
|
|
5787
|
-
[`pds-avatar--${this.variant}`]: this.variant === 'admin'
|
|
5833
|
+
[`pds-avatar--${this.variant}`]: this.variant === 'admin',
|
|
5834
|
+
[`pds-avatar--status-ring`]: !!this.status && this.statusRing,
|
|
5788
5835
|
});
|
|
5789
5836
|
}
|
|
5790
5837
|
avatarSize() {
|
|
@@ -5803,7 +5850,7 @@ class PdsAvatar {
|
|
|
5803
5850
|
}
|
|
5804
5851
|
}
|
|
5805
5852
|
render() {
|
|
5806
|
-
return (hAsync(Host, { key: '
|
|
5853
|
+
return (hAsync(Host, { key: '594604d25190002ec166626b4a4a1a9a6be875d8', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
5807
5854
|
}
|
|
5808
5855
|
static get style() { return pdsAvatarCss(); }
|
|
5809
5856
|
static get cmpMeta() { return {
|
|
@@ -5817,11 +5864,15 @@ class PdsAvatar {
|
|
|
5817
5864
|
"image": [1],
|
|
5818
5865
|
"initials": [1],
|
|
5819
5866
|
"size": [513],
|
|
5820
|
-
"
|
|
5867
|
+
"status": [513],
|
|
5868
|
+
"statusLabel": [1, "status-label"],
|
|
5869
|
+
"statusRing": [4, "status-ring"],
|
|
5870
|
+
"variant": [513],
|
|
5871
|
+
"triggerLabel": [1, "trigger-label"]
|
|
5821
5872
|
},
|
|
5822
5873
|
"$listeners$": undefined,
|
|
5823
5874
|
"$lazyBundleId$": "-",
|
|
5824
|
-
"$attrsToReflect$": [["size", "size"], ["variant", "variant"]]
|
|
5875
|
+
"$attrsToReflect$": [["size", "size"], ["status", "status"], ["variant", "variant"]]
|
|
5825
5876
|
}; }
|
|
5826
5877
|
}
|
|
5827
5878
|
|
|
@@ -6166,7 +6217,7 @@ class PdsBox {
|
|
|
6166
6217
|
const pdsButtonCss = () => `:host{--pds-button-background:var(--pds-button-color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--pds-button-color-border-default:transparent;--pds-button-color-border-disabled:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-border-hover:transparent;--button-loader-color:var(--pds-button-color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([aria-disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--pds-button-color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--pds-button-color-background-default));border:var(--pds-button-border);border-color:var(--pds-button-color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-button-color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--pds-button-color-background-hover);border-color:var(--pds-button-color-border-hover)}.pds-button:focus-visible{border-color:var(--pds-button-color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--pds-button-color-background-disabled);border-color:var(--pds-button-color-border-disabled);color:var(--pds-button-color-text-disabled);pointer-events:none}.pds-button--primary{--pds-button-color-background-default:var(--pine-color-primary);--pds-button-color-background-hover:var(--pine-color-primary-hover);--pds-button-color-background-disabled:var(--pine-color-primary-disabled);--pds-button-color-border-default:var(--pine-color-primary);--pds-button-color-border-hover:var(--pine-color-primary-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-primary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--pds-button-color-background-default:var(--pine-color-accent);--pds-button-color-background-hover:var(--pine-color-accent-hover);--pds-button-color-background-disabled:var(--pine-color-accent-disabled);--pds-button-color-border-default:var(--pine-color-accent);--pds-button-color-border-hover:var(--pine-color-accent-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-accent-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--pds-button-color-background-default:var(--pine-color-danger);--pds-button-color-background-hover:var(--pine-color-danger-hover);--pds-button-color-background-disabled:var(--pine-color-danger-disabled);--pds-button-color-border-default:var(--pine-color-danger);--pds-button-color-border-hover:var(--pine-color-danger-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-danger-disabled);--pds-button-color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--pds-button-color-background-default:var(--pine-color-secondary);--pds-button-color-background-hover:var(--pine-color-secondary-hover);--pds-button-color-background-disabled:var(--pine-color-secondary-disabled);--pds-button-color-border-disabled:var(--pine-color-border-disabled);--pds-button-color-border-focus:var(--pine-color-border);--pds-button-color-border-hover:var(--pine-color-border-hover);--pds-button-color-border-default:var(--pine-color-border);--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:var(--pine-color-background-muted);--pds-button-color-background-disabled:transparent;--pds-button-color-border-default:transparent;--pds-button-color-border-hover:var(--pine-color-background-muted);--pds-button-color-border-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--pds-button-color-background-default:var(--pine-color-background-container);--pds-button-color-background-hover:var(--pine-color-background-subtle);--pds-button-color-background-disabled:var(--pine-color-white);--pds-button-color-border-default:transparent;--pds-button-color-border-hover:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-hover:var(--pine-color-text-hover);--pds-button-color-text-disabled:var(--pine-color-text-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--pds-button-color-text-hover)}.pds-button--unstyled{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:transparent;--pds-button-color-background-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--empty{display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}`;
|
|
6167
6218
|
|
|
6168
6219
|
/**
|
|
6169
|
-
* @part button - Exposes the button element for styling.
|
|
6220
|
+
* @part button - Exposes the underlying button (or anchor) element for styling, including custom size, shape, or surface on icon-only placements (e.g. a compact square or inverse icon button).
|
|
6170
6221
|
* @part button-content - Exposes the button content for styling.
|
|
6171
6222
|
* @part button-text - Exposes the button text for styling.
|
|
6172
6223
|
* @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
|
|
@@ -6697,6 +6748,11 @@ class PdsChip {
|
|
|
6697
6748
|
* @defaultValue 'text'
|
|
6698
6749
|
*/
|
|
6699
6750
|
this.variant = 'text';
|
|
6751
|
+
/**
|
|
6752
|
+
* Accessible label for the remove button. Pass a translated string to localize it; defaults to English.
|
|
6753
|
+
* @defaultValue 'Remove'
|
|
6754
|
+
*/
|
|
6755
|
+
this.dismissLabel = 'Remove';
|
|
6700
6756
|
this.handleCloseClick = () => {
|
|
6701
6757
|
this.pdsTagCloseClick.emit();
|
|
6702
6758
|
};
|
|
@@ -6750,7 +6806,7 @@ class PdsChip {
|
|
|
6750
6806
|
const linkAttrs = {
|
|
6751
6807
|
class: 'pds-chip__close',
|
|
6752
6808
|
href: this.removeUrl,
|
|
6753
|
-
'aria-label':
|
|
6809
|
+
'aria-label': this.dismissLabel,
|
|
6754
6810
|
};
|
|
6755
6811
|
// Add target if specified
|
|
6756
6812
|
if (this.removeTarget) {
|
|
@@ -6781,13 +6837,13 @@ class PdsChip {
|
|
|
6781
6837
|
return {
|
|
6782
6838
|
class: 'pds-chip__close',
|
|
6783
6839
|
type: 'button',
|
|
6784
|
-
'aria-label':
|
|
6840
|
+
'aria-label': this.dismissLabel,
|
|
6785
6841
|
};
|
|
6786
6842
|
};
|
|
6787
6843
|
return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
|
|
6788
6844
|
}
|
|
6789
6845
|
render() {
|
|
6790
|
-
return (hAsync(Host, { key: '
|
|
6846
|
+
return (hAsync(Host, { key: 'ff02e96839049b313681389308faba50c5989842', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
6791
6847
|
}
|
|
6792
6848
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
6793
6849
|
static get cmpMeta() { return {
|
|
@@ -6803,7 +6859,8 @@ class PdsChip {
|
|
|
6803
6859
|
"variant": [1],
|
|
6804
6860
|
"removeUrl": [1, "remove-url"],
|
|
6805
6861
|
"removeHttpMethod": [1, "remove-http-method"],
|
|
6806
|
-
"removeTarget": [1, "remove-target"]
|
|
6862
|
+
"removeTarget": [1, "remove-target"],
|
|
6863
|
+
"dismissLabel": [1, "dismiss-label"]
|
|
6807
6864
|
},
|
|
6808
6865
|
"$listeners$": undefined,
|
|
6809
6866
|
"$lazyBundleId$": "-",
|
|
@@ -13706,7 +13763,7 @@ class PdsInput {
|
|
|
13706
13763
|
}; }
|
|
13707
13764
|
}
|
|
13708
13765
|
|
|
13709
|
-
const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}`;
|
|
13766
|
+
const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
|
|
13710
13767
|
|
|
13711
13768
|
/**
|
|
13712
13769
|
* @part link - Link element styles.
|
|
@@ -13715,6 +13772,13 @@ const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-sta
|
|
|
13715
13772
|
class PdsLink {
|
|
13716
13773
|
constructor(hostRef) {
|
|
13717
13774
|
registerInstance(this, hostRef);
|
|
13775
|
+
/**
|
|
13776
|
+
* Marks the link as the current/active navigation item — for tab strips and
|
|
13777
|
+
* nav rails built from links. Applies the active treatment (persistent
|
|
13778
|
+
* underline + strong text) and sets `aria-current="page"`.
|
|
13779
|
+
* @defaultValue false
|
|
13780
|
+
*/
|
|
13781
|
+
this.active = false;
|
|
13718
13782
|
/**
|
|
13719
13783
|
* Determines whether the link should open in a new tab.
|
|
13720
13784
|
* @defaultValue false
|
|
@@ -13757,14 +13821,15 @@ class PdsLink {
|
|
|
13757
13821
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
13758
13822
|
const showExternalIcon = this.external;
|
|
13759
13823
|
const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
|
|
13760
|
-
return (hAsync("a", { key: '
|
|
13761
|
-
hAsync("pds-icon", { key: '
|
|
13824
|
+
return (hAsync("a", { key: '5d0c5a0a5b8b80a8cdff802a3d78dad85a9ccdc4', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: '06b7be14d867eae1b7acba8570f1e94bdf840fbb' }, this.href), showExternalIcon &&
|
|
13825
|
+
hAsync("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
|
|
13762
13826
|
}
|
|
13763
13827
|
static get style() { return pdsLinkCss(); }
|
|
13764
13828
|
static get cmpMeta() { return {
|
|
13765
13829
|
"$flags$": 265,
|
|
13766
13830
|
"$tagName$": "pds-link",
|
|
13767
13831
|
"$members$": {
|
|
13832
|
+
"active": [516],
|
|
13768
13833
|
"color": [1],
|
|
13769
13834
|
"download": [1],
|
|
13770
13835
|
"componentId": [1, "component-id"],
|
|
@@ -13784,7 +13849,7 @@ class PdsLink {
|
|
|
13784
13849
|
},
|
|
13785
13850
|
"$listeners$": undefined,
|
|
13786
13851
|
"$lazyBundleId$": "-",
|
|
13787
|
-
"$attrsToReflect$": []
|
|
13852
|
+
"$attrsToReflect$": [["active", "active"]]
|
|
13788
13853
|
}; }
|
|
13789
13854
|
}
|
|
13790
13855
|
|
|
@@ -14367,6 +14432,66 @@ class PdsModalHeader {
|
|
|
14367
14432
|
}; }
|
|
14368
14433
|
}
|
|
14369
14434
|
|
|
14435
|
+
/**
|
|
14436
|
+
* i18n formatting helpers for Pine components.
|
|
14437
|
+
*
|
|
14438
|
+
* Pine stays string-agnostic: user-facing text is supplied by the consumer as
|
|
14439
|
+
* props (English-defaulted). These helpers only handle the two things a prop
|
|
14440
|
+
* value can't express on its own — interpolating live component state into a
|
|
14441
|
+
* translated template, and picking the right plural form. No stored strings, no
|
|
14442
|
+
* locale registry; the locale is read from the DOM (`lang`), the web-standard
|
|
14443
|
+
* signal a consumer already sets.
|
|
14444
|
+
*
|
|
14445
|
+
* Two limitations of DOM-`lang` locale resolution, both inherent to inferring
|
|
14446
|
+
* locale from the DOM rather than being told it:
|
|
14447
|
+
*
|
|
14448
|
+
* 1. Not reactive. `resolveLocale` is read during render; Stencil has no
|
|
14449
|
+
* reactive dependency on a DOM attribute, so changing `lang` at runtime
|
|
14450
|
+
* (`document.documentElement.lang = 'pl'`) does NOT re-render mounted
|
|
14451
|
+
* components — the plural form stays stale until unrelated state forces a
|
|
14452
|
+
* render. Fine when locale changes via full-page navigation; a consumer that
|
|
14453
|
+
* switches locale client-side should pass the already-formatted/pluralized
|
|
14454
|
+
* string as the prop instead.
|
|
14455
|
+
* 2. Does not cross shadow boundaries. `el.closest('[lang]')` stops at the host's
|
|
14456
|
+
* shadow root. A Pine component nested inside another custom element whose
|
|
14457
|
+
* `lang` sits on that outer host will not see it and falls back to
|
|
14458
|
+
* `document.documentElement.lang`. Set `lang` on (or above) the Pine element
|
|
14459
|
+
* in the same tree, or pass a pre-formatted string, when that matters.
|
|
14460
|
+
*/
|
|
14461
|
+
/** Replace `{token}` placeholders with `vars`; unknown tokens stay literal. */
|
|
14462
|
+
function formatMessage(template, vars) {
|
|
14463
|
+
if (!vars)
|
|
14464
|
+
return template;
|
|
14465
|
+
return template.replace(/\{(\w+)\}/g, (_match, key) => key in vars ? String(vars[key]) : `{${key}}`);
|
|
14466
|
+
}
|
|
14467
|
+
/** Nearest `[lang]` ancestor, then `<html lang>`, then `'en'`. */
|
|
14468
|
+
function resolveLocale(el) {
|
|
14469
|
+
var _a;
|
|
14470
|
+
const fromEl = el && typeof el.closest === 'function' ? (_a = el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang') : null;
|
|
14471
|
+
const fromDoc = typeof document !== 'undefined' ? document.documentElement.lang : '';
|
|
14472
|
+
return fromEl || fromDoc || 'en';
|
|
14473
|
+
}
|
|
14474
|
+
/**
|
|
14475
|
+
* Pick the CLDR plural form for `count` in the element's locale (via the
|
|
14476
|
+
* platform `Intl.PluralRules`) and interpolate `{count}`. `forms` come from the
|
|
14477
|
+
* caller — component props, English-defaulted — and fall back to `other`.
|
|
14478
|
+
*/
|
|
14479
|
+
function pluralize(el, count, forms, vars) {
|
|
14480
|
+
let category = 'other';
|
|
14481
|
+
try {
|
|
14482
|
+
category = new Intl.PluralRules(resolveLocale(el)).select(count);
|
|
14483
|
+
}
|
|
14484
|
+
catch (_a) {
|
|
14485
|
+
/* invalid locale tag → fall back to 'other' */
|
|
14486
|
+
}
|
|
14487
|
+
// Prefer the selected category, then the required `other`, then `one`; never
|
|
14488
|
+
// return empty. `||` (not `??`) so an empty-string form is skipped too, not
|
|
14489
|
+
// treated as present — a bare `{count}` still shows the number rather than
|
|
14490
|
+
// leaving the trigger with no accessible name.
|
|
14491
|
+
const template = forms[category] || forms.other || forms.one || '{count}';
|
|
14492
|
+
return formatMessage(template, Object.assign({ count }, vars));
|
|
14493
|
+
}
|
|
14494
|
+
|
|
14370
14495
|
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);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:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
14371
14496
|
|
|
14372
14497
|
/**
|
|
@@ -14385,14 +14510,65 @@ class PdsMultiselect {
|
|
|
14385
14510
|
this.pdsMultiselectCreate = createEvent(this, "pdsMultiselectCreate");
|
|
14386
14511
|
this.pdsMultiselectDismiss = createEvent(this, "pdsMultiselectDismiss");
|
|
14387
14512
|
/**
|
|
14388
|
-
* Placeholder text for the input field.
|
|
14513
|
+
* Placeholder text for the input field. Pass a translated string to localize it; defaults to English.
|
|
14514
|
+
* @defaultValue 'Select...'
|
|
14389
14515
|
*/
|
|
14390
14516
|
this.placeholder = 'Select...';
|
|
14391
14517
|
/**
|
|
14392
|
-
* Placeholder text for the search input inside the dropdown panel.
|
|
14393
|
-
* @
|
|
14518
|
+
* Placeholder text for the search input inside the dropdown panel. Pass a translated string to localize it; defaults to English.
|
|
14519
|
+
* @defaultValue 'Find...'
|
|
14394
14520
|
*/
|
|
14395
14521
|
this.searchPlaceholder = 'Find...';
|
|
14522
|
+
/**
|
|
14523
|
+
* Accessible label for the search input. Pass a translated string to localize it; defaults to English.
|
|
14524
|
+
* @defaultValue 'Search options'
|
|
14525
|
+
*/
|
|
14526
|
+
this.searchOptionsLabel = 'Search options';
|
|
14527
|
+
/**
|
|
14528
|
+
* Accessible label for the selected-items region. Pass a translated string to localize it; defaults to English.
|
|
14529
|
+
* @defaultValue 'Selected items'
|
|
14530
|
+
*/
|
|
14531
|
+
this.selectedItemsLabel = 'Selected items';
|
|
14532
|
+
/**
|
|
14533
|
+
* Accessible label for the options listbox (falls back to this when `label` is unset). Pass a translated string to localize it; defaults to English.
|
|
14534
|
+
* @defaultValue 'Options'
|
|
14535
|
+
*/
|
|
14536
|
+
this.optionsLabel = 'Options';
|
|
14537
|
+
/**
|
|
14538
|
+
* Text shown when no options match the search. Pass a translated string to localize it; defaults to English.
|
|
14539
|
+
* @defaultValue 'No options found'
|
|
14540
|
+
*/
|
|
14541
|
+
this.noOptionsFoundLabel = 'No options found';
|
|
14542
|
+
/**
|
|
14543
|
+
* Visible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
|
|
14544
|
+
* @defaultValue 'Add "{text}"'
|
|
14545
|
+
*/
|
|
14546
|
+
this.createOptionLabel = 'Add "{text}"';
|
|
14547
|
+
/**
|
|
14548
|
+
* Accessible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
|
|
14549
|
+
* @defaultValue 'Create new tag: {text}'
|
|
14550
|
+
*/
|
|
14551
|
+
this.createOptionAriaLabel = 'Create new tag: {text}';
|
|
14552
|
+
/**
|
|
14553
|
+
* Screen-reader announcement when an item is removed. Pass a translated string to localize it; `{item}` is interpolated.
|
|
14554
|
+
* @defaultValue '{item} removed'
|
|
14555
|
+
*/
|
|
14556
|
+
this.itemRemovedLabel = '{item} removed';
|
|
14557
|
+
/**
|
|
14558
|
+
* Accessible label for the remove button on each selected-item pill. Pass a translated string to localize it; defaults to English.
|
|
14559
|
+
* @defaultValue 'Remove'
|
|
14560
|
+
*/
|
|
14561
|
+
this.pillRemoveLabel = 'Remove';
|
|
14562
|
+
/**
|
|
14563
|
+
* Singular form of the selected-count trigger text. Pass a translated string to localize it; `{count}` is interpolated.
|
|
14564
|
+
* @defaultValue '{count} item'
|
|
14565
|
+
*/
|
|
14566
|
+
this.selectedCountLabelOne = '{count} item';
|
|
14567
|
+
/**
|
|
14568
|
+
* Plural (and fallback) form of the selected-count trigger text — used for English and any locale whose selected plural category isn't supplied via `selectedCountLabels`. Pass a translated string to localize it; `{count}` is interpolated.
|
|
14569
|
+
* @defaultValue '{count} items'
|
|
14570
|
+
*/
|
|
14571
|
+
this.selectedCountLabelOther = '{count} items';
|
|
14396
14572
|
/**
|
|
14397
14573
|
* Whether to close the panel after an option is selected.
|
|
14398
14574
|
* Defaults to `false` (panel stays open for multi-select).
|
|
@@ -14631,7 +14807,7 @@ class PdsMultiselect {
|
|
|
14631
14807
|
this.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems });
|
|
14632
14808
|
// Clear first so screen readers re-announce even when the same item is removed twice
|
|
14633
14809
|
this.removalAnnouncement = '';
|
|
14634
|
-
queueMicrotask(() => { this.removalAnnouncement =
|
|
14810
|
+
queueMicrotask(() => { this.removalAnnouncement = formatMessage(this.itemRemovedLabel, { item: item.text }); });
|
|
14635
14811
|
this.isClosingViaSelection = true;
|
|
14636
14812
|
if (this.isOpen) {
|
|
14637
14813
|
(_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -15268,7 +15444,7 @@ class PdsMultiselect {
|
|
|
15268
15444
|
'pds-multiselect__option--selected': isSelected,
|
|
15269
15445
|
'pds-multiselect__option--create': isCreateOption,
|
|
15270
15446
|
'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
|
|
15271
|
-
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ?
|
|
15447
|
+
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }))));
|
|
15272
15448
|
}
|
|
15273
15449
|
renderSelectedItemsList() {
|
|
15274
15450
|
if (this.hideSelectedItems || this.selectedItems.length === 0)
|
|
@@ -15282,7 +15458,7 @@ class PdsMultiselect {
|
|
|
15282
15458
|
const valueArray = this.ensureValueArray();
|
|
15283
15459
|
const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
|
|
15284
15460
|
const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
|
|
15285
|
-
return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label":
|
|
15461
|
+
return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
|
|
15286
15462
|
if (item.type === 'group') {
|
|
15287
15463
|
return (hAsync("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, hAsync("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), hAsync("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
|
|
15288
15464
|
}
|
|
@@ -15297,27 +15473,54 @@ class PdsMultiselect {
|
|
|
15297
15473
|
const variant = this.disabled ? 'text' : 'tag';
|
|
15298
15474
|
const visibleItems = this.selectedItems.slice(0, Math.max(1, this.maxInlinePills));
|
|
15299
15475
|
const overflowCount = this.selectedItems.length - visibleItems.length;
|
|
15300
|
-
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label":
|
|
15476
|
+
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label": this.selectedItemsLabel }, visibleItems.map(item => (hAsync("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "sm", sentiment: "neutral", "dismiss-label": this.pillRemoveLabel, onPdsTagCloseClick: this.handlePillRemove(item) }, item.text))), overflowCount > 0 && (hAsync("span", { class: "pds-multiselect__pill-overflow" }, "+", overflowCount))));
|
|
15301
15477
|
}
|
|
15302
15478
|
renderBelowPills() {
|
|
15303
15479
|
if (this.selectedItems.length === 0)
|
|
15304
15480
|
return null;
|
|
15305
15481
|
const variant = this.disabled ? 'text' : 'tag';
|
|
15306
|
-
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label":
|
|
15482
|
+
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label": this.selectedItemsLabel }, this.selectedItems.map(item => (hAsync("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "md", sentiment: "neutral", "dismiss-label": this.pillRemoveLabel, onPdsTagCloseClick: this.handlePillRemove(item) }, item.text)))));
|
|
15307
15483
|
}
|
|
15308
15484
|
getTriggerText() {
|
|
15309
15485
|
const count = this.selectedItems.length;
|
|
15310
15486
|
if (count === 0 || (this.selectedDisplay === 'pill' && this.pillPosition === 'below')) {
|
|
15487
|
+
// Fall back to a non-empty string: the trigger's accessible name comes from
|
|
15488
|
+
// this text, so an empty/undefined placeholder must never leave it nameless
|
|
15489
|
+
// (WCAG 4.1.2). The prop is localizable; this last-resort default is not.
|
|
15311
15490
|
return this.placeholder || 'Select...';
|
|
15312
15491
|
}
|
|
15313
|
-
return
|
|
15492
|
+
return pluralize(this.el, count, this.resolveCountForms());
|
|
15493
|
+
}
|
|
15494
|
+
/**
|
|
15495
|
+
* The `one`/`other` props are the ergonomic English defaults; `selectedCountLabels`
|
|
15496
|
+
* (object or JSON-string attribute) layers full CLDR forms on top for locales
|
|
15497
|
+
* that need `few`/`many`/`two`/`zero`. Malformed JSON degrades to the defaults.
|
|
15498
|
+
*/
|
|
15499
|
+
resolveCountForms() {
|
|
15500
|
+
const base = {
|
|
15501
|
+
one: this.selectedCountLabelOne,
|
|
15502
|
+
other: this.selectedCountLabelOther,
|
|
15503
|
+
};
|
|
15504
|
+
const extra = this.selectedCountLabels;
|
|
15505
|
+
if (!extra)
|
|
15506
|
+
return base;
|
|
15507
|
+
if (typeof extra === 'string') {
|
|
15508
|
+
try {
|
|
15509
|
+
const parsed = JSON.parse(extra);
|
|
15510
|
+
return parsed && typeof parsed === 'object' ? Object.assign(Object.assign({}, base), parsed) : base;
|
|
15511
|
+
}
|
|
15512
|
+
catch (_a) {
|
|
15513
|
+
return base; // not valid JSON → fall back to the English-shape defaults
|
|
15514
|
+
}
|
|
15515
|
+
}
|
|
15516
|
+
return Object.assign(Object.assign({}, base), extra);
|
|
15314
15517
|
}
|
|
15315
15518
|
render() {
|
|
15316
15519
|
const hasSelections = this.selectedItems.length > 0;
|
|
15317
|
-
return (hAsync(Host, { key: '
|
|
15520
|
+
return (hAsync(Host, { key: '4a54a778522d0a1d2f45c32928e7a663f19c0189', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '3593eb4fa1a0ae575b1c0ed03f0763dcea04c9e6', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'f91a680ae3c3021bac6bd99368d3ef6ad6438898', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
15318
15521
|
'pds-multiselect__label': true,
|
|
15319
15522
|
'visually-hidden': this.hideLabel,
|
|
15320
|
-
} }, this.label)), hAsync("div", { key: '
|
|
15523
|
+
} }, this.label)), hAsync("div", { key: 'de2899f19057b8cd19cf3467251d03c1b43b73f5', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
15321
15524
|
'pds-multiselect__trigger': true,
|
|
15322
15525
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
15323
15526
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -15333,7 +15536,7 @@ class PdsMultiselect {
|
|
|
15333
15536
|
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
|
|
15334
15537
|
'pds-multiselect__trigger-text': true,
|
|
15335
15538
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
15336
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
15539
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '973443f9eb29dcf7fb1bde3f9101ac02967a8fd9', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '568aab2b278abb7f4426d84ee926b4883375fb11', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'daddf192efd47df8c15267b9896913b926e02544', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'd0c72ab75a8e02e61c09e980ae817790804a776a', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '0453db2fca10b3573b1dd244875f90c856c8887b', style: { display: 'none' } }, hAsync("slot", { key: 'a612741afc9545e5e50c47d27c3c27c1d7cade3c' })))));
|
|
15337
15540
|
}
|
|
15338
15541
|
static get formAssociated() { return true; }
|
|
15339
15542
|
get el() { return getElement(this); }
|
|
@@ -15360,6 +15563,17 @@ class PdsMultiselect {
|
|
|
15360
15563
|
"label": [1],
|
|
15361
15564
|
"placeholder": [1],
|
|
15362
15565
|
"searchPlaceholder": [1, "search-placeholder"],
|
|
15566
|
+
"searchOptionsLabel": [1, "search-options-label"],
|
|
15567
|
+
"selectedItemsLabel": [1, "selected-items-label"],
|
|
15568
|
+
"optionsLabel": [1, "options-label"],
|
|
15569
|
+
"noOptionsFoundLabel": [1, "no-options-found-label"],
|
|
15570
|
+
"createOptionLabel": [1, "create-option-label"],
|
|
15571
|
+
"createOptionAriaLabel": [1, "create-option-aria-label"],
|
|
15572
|
+
"itemRemovedLabel": [1, "item-removed-label"],
|
|
15573
|
+
"pillRemoveLabel": [1, "pill-remove-label"],
|
|
15574
|
+
"selectedCountLabelOne": [1, "selected-count-label-one"],
|
|
15575
|
+
"selectedCountLabelOther": [1, "selected-count-label-other"],
|
|
15576
|
+
"selectedCountLabels": [1, "selected-count-labels"],
|
|
15363
15577
|
"closePanelOnSelect": [4, "close-panel-on-select"],
|
|
15364
15578
|
"name": [1],
|
|
15365
15579
|
"value": [1040],
|
|
@@ -19627,7 +19841,7 @@ class PdsSwitch {
|
|
|
19627
19841
|
}; }
|
|
19628
19842
|
}
|
|
19629
19843
|
|
|
19630
|
-
const pdsTabCss = () => `pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover:not(:disabled){color:var(--pine-color-text)}.pds-tab:focus{outline:none}.pds-tab:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tab:disabled,.pds-tab.is-disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:"";height:3px;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);inset-inline-start:var(--pine-dimension-none);opacity:0;position:absolute}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);color:var(--pine-color-text-secondary);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);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:var(--pine-z-index-raised)}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled){--color-background-tab:var(--pine-color-secondary-hover);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab:disabled,.pds-tabs--availability .pds-tab.is-disabled{--color-background-tab:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--availability .pds-tab__content{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-muted);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{background-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled),.pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled){background-color:var(--pine-color-primary-hover)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled){background-color:var(--pine-color-border-disabled)}.pds-tabs--filter .pds-tab:disabled,.pds-tabs--filter .pds-tab.is-disabled{background-color:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--filter .pds-tab:disabled.is-active,.pds-tabs--filter .pds-tab:disabled[aria-selected=true],.pds-tabs--filter .pds-tab.is-disabled.is-active,.pds-tabs--filter .pds-tab.is-disabled[aria-selected=true]{background-color:var(--pine-color-primary-disabled)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-muted);-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-background-container);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)}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.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}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab:disabled,.pds-tabs--pill .pds-tab.is-disabled{color:var(--pine-color-text-disabled)}`;
|
|
19844
|
+
const pdsTabCss = () => `pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover:not(:disabled,.is-disabled){color:var(--pine-color-text)}.pds-tab:focus{outline:none}.pds-tab:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tab:disabled,.pds-tab.is-disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:"";height:3px;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);inset-inline-start:var(--pine-dimension-none);opacity:0;position:absolute}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);color:var(--pine-color-text-secondary);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);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:var(--pine-z-index-raised)}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled,.is-disabled){--color-background-tab:var(--pine-color-secondary-hover);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab:disabled,.pds-tabs--availability .pds-tab.is-disabled{--color-background-tab:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--availability .pds-tab__content{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-muted);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{background-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled,.is-disabled),.pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled,.is-disabled){background-color:var(--pine-color-primary-hover)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled,.is-disabled){background-color:var(--pine-color-border-disabled)}.pds-tabs--filter .pds-tab:disabled,.pds-tabs--filter .pds-tab.is-disabled{background-color:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--filter .pds-tab:disabled.is-active,.pds-tabs--filter .pds-tab:disabled[aria-selected=true],.pds-tabs--filter .pds-tab.is-disabled.is-active,.pds-tabs--filter .pds-tab.is-disabled[aria-selected=true]{background-color:var(--pine-color-primary-disabled)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-muted);-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-background-container);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)}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.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}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab:disabled,.pds-tabs--pill .pds-tab.is-disabled{color:var(--pine-color-text-disabled)}`;
|
|
19631
19845
|
|
|
19632
19846
|
class PdsTab {
|
|
19633
19847
|
constructor(hostRef) {
|
|
@@ -19638,6 +19852,13 @@ class PdsTab {
|
|
|
19638
19852
|
* @defaultValue false
|
|
19639
19853
|
*/
|
|
19640
19854
|
this.disabled = false;
|
|
19855
|
+
/**
|
|
19856
|
+
* Marks this tab as the current one in navigation mode (`href` set). Applies
|
|
19857
|
+
* the active treatment and `aria-current="page"`. Ignored in panel mode, where
|
|
19858
|
+
* the active tab is derived from the parent's `activeTabName`.
|
|
19859
|
+
* @defaultValue false
|
|
19860
|
+
*/
|
|
19861
|
+
this.active = false;
|
|
19641
19862
|
/**
|
|
19642
19863
|
* Keeps track of the tabpanel selected state, this property is passed by parent component
|
|
19643
19864
|
*/
|
|
@@ -19649,18 +19870,46 @@ class PdsTab {
|
|
|
19649
19870
|
return;
|
|
19650
19871
|
this.pdsTabClick.emit([index, parentComponentId]);
|
|
19651
19872
|
}
|
|
19873
|
+
// An empty string is treated as "no destination" everywhere (isNav fallback,
|
|
19874
|
+
// href attribute, role) so a nav tab never renders `href=""` (which would
|
|
19875
|
+
// navigate to the current page).
|
|
19876
|
+
get hasHref() {
|
|
19877
|
+
return this.href != null && this.href !== '';
|
|
19878
|
+
}
|
|
19879
|
+
get isNav() {
|
|
19880
|
+
var _a;
|
|
19881
|
+
// The parent `pds-tabs` is authoritative when present (via `navMode`), so its
|
|
19882
|
+
// tabs share one mode. Standalone, fall back to a usable `href`.
|
|
19883
|
+
return (_a = this.navMode) !== null && _a !== void 0 ? _a : this.hasHref;
|
|
19884
|
+
}
|
|
19885
|
+
get isActive() {
|
|
19886
|
+
// Navigation mode is server-driven via `active`; panel mode is parent-driven
|
|
19887
|
+
// via `selected` (from `activeTabName`).
|
|
19888
|
+
return this.isNav ? this.active : this.selected;
|
|
19889
|
+
}
|
|
19652
19890
|
classNames() {
|
|
19653
19891
|
const classes = [
|
|
19654
19892
|
'pds-tab',
|
|
19655
|
-
this.
|
|
19893
|
+
this.isActive && 'is-active',
|
|
19656
19894
|
this.disabled && 'is-disabled',
|
|
19657
19895
|
];
|
|
19658
19896
|
return classes.filter(Boolean).join(' ');
|
|
19659
19897
|
}
|
|
19660
19898
|
render() {
|
|
19661
|
-
const availabilityTabEdgeInlineStart = (hAsync("span", {
|
|
19662
|
-
const availabilityTabEdgeInlineEnd = (hAsync("span", {
|
|
19663
|
-
|
|
19899
|
+
const availabilityTabEdgeInlineStart = (hAsync("span", { class: "pds-tab-edge", role: "presentation" }));
|
|
19900
|
+
const availabilityTabEdgeInlineEnd = (hAsync("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
|
|
19901
|
+
const content = (hAsync(Fragment, null, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { class: "pds-tab__content" }, hAsync("slot", null))));
|
|
19902
|
+
// Navigation mode: a real anchor, so keyboard activation and navigation are
|
|
19903
|
+
// native (and Turbo-driven when framed) with no controller — and the current
|
|
19904
|
+
// item carries `aria-current="page"` rather than `role="tab"`/`aria-selected`.
|
|
19905
|
+
if (this.isNav) {
|
|
19906
|
+
return (hAsync(Host, { variant: this.variant, slot: "tabs", index: this.index }, hAsync("a", { href: this.disabled || !this.hasHref ? undefined : this.href,
|
|
19907
|
+
// An anchor without an href (disabled, or forced into nav mode with no
|
|
19908
|
+
// usable href) loses its implicit link role; restore it explicitly so
|
|
19909
|
+
// assistive tech still announces the item rather than as plain text.
|
|
19910
|
+
role: this.disabled || !this.hasHref ? "link" : undefined, id: this.parentComponentId + "__" + this.name, class: this.classNames(), target: this.target, rel: this.target === "_blank" ? "noopener noreferrer" : undefined, "aria-current": this.isActive ? "page" : undefined, "aria-disabled": this.disabled ? "true" : null, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined }, content)));
|
|
19911
|
+
}
|
|
19912
|
+
return (hAsync(Host, { variant: this.variant, slot: "tabs", index: this.index }, hAsync("button", { role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.disabled ? "-1" : (this.selected ? "0" : "-1"), "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled, class: this.classNames(), onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, content)));
|
|
19664
19913
|
}
|
|
19665
19914
|
get el() { return getElement(this); }
|
|
19666
19915
|
static get style() { return pdsTabCss(); }
|
|
@@ -19669,11 +19918,17 @@ class PdsTab {
|
|
|
19669
19918
|
"$tagName$": "pds-tab",
|
|
19670
19919
|
"$members$": {
|
|
19671
19920
|
"disabled": [4],
|
|
19921
|
+
"href": [1],
|
|
19922
|
+
"active": [4],
|
|
19923
|
+
"target": [1],
|
|
19924
|
+
"turboFrame": [1, "turbo-frame"],
|
|
19925
|
+
"turboAction": [1, "turbo-action"],
|
|
19672
19926
|
"name": [1],
|
|
19673
19927
|
"parentComponentId": [1, "parent-component-id"],
|
|
19674
19928
|
"variant": [1],
|
|
19675
19929
|
"index": [2],
|
|
19676
|
-
"selected": [4]
|
|
19930
|
+
"selected": [4],
|
|
19931
|
+
"navMode": [4, "nav-mode"]
|
|
19677
19932
|
},
|
|
19678
19933
|
"$listeners$": undefined,
|
|
19679
19934
|
"$lazyBundleId$": "-",
|
|
@@ -20589,7 +20844,7 @@ class PdsTableRow {
|
|
|
20589
20844
|
}; }
|
|
20590
20845
|
}
|
|
20591
20846
|
|
|
20592
|
-
const pdsTabpanelCss = () => `:host{display:block}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}`;
|
|
20847
|
+
const pdsTabpanelCss = () => `:host{display:block}:host(.pds-tabpanel--stretch-active){-ms-flex:1 1 auto;flex:1 1 auto;min-block-size:0}:host(.pds-tabpanel--stretch-active) .pds-tabpanel.is-active{block-size:100%}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}`;
|
|
20593
20848
|
|
|
20594
20849
|
class PdsTabpanel {
|
|
20595
20850
|
constructor(hostRef) {
|
|
@@ -20599,9 +20854,14 @@ class PdsTabpanel {
|
|
|
20599
20854
|
*/
|
|
20600
20855
|
/** @internal */
|
|
20601
20856
|
this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
|
|
20857
|
+
/**
|
|
20858
|
+
* Keeps track of the parent `stretch` state so the active panel can fill height, this property is passed by parent component
|
|
20859
|
+
*/
|
|
20860
|
+
/** @internal */
|
|
20861
|
+
this.stretch = false;
|
|
20602
20862
|
}
|
|
20603
20863
|
render() {
|
|
20604
|
-
return (hAsync(Host, { key: '
|
|
20864
|
+
return (hAsync(Host, { key: '88dfc12ce8b2413824e6d3425aa38674fa14c764', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, hAsync("div", { key: 'bcfe8be6480dc253b10d63d6e37caacec4a8fe7f', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '96ee87a0917e5f538a5c053045a5d6821684cf3a' }))));
|
|
20605
20865
|
}
|
|
20606
20866
|
get el() { return getElement(this); }
|
|
20607
20867
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -20612,7 +20872,8 @@ class PdsTabpanel {
|
|
|
20612
20872
|
"name": [1],
|
|
20613
20873
|
"parentComponentId": [1, "parent-component-id"],
|
|
20614
20874
|
"variant": [1],
|
|
20615
|
-
"selected": [1028]
|
|
20875
|
+
"selected": [1028],
|
|
20876
|
+
"stretch": [4]
|
|
20616
20877
|
},
|
|
20617
20878
|
"$listeners$": undefined,
|
|
20618
20879
|
"$lazyBundleId$": "-",
|
|
@@ -20620,7 +20881,7 @@ class PdsTabpanel {
|
|
|
20620
20881
|
}; }
|
|
20621
20882
|
}
|
|
20622
20883
|
|
|
20623
|
-
const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;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-background-app);border:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);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)}`;
|
|
20884
|
+
const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;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--divider) .pds-tabs__tablist{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.pds-tabs--stretch){block-size:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.pds-tabs--stretch) .pds-tabs__tablist{-ms-flex:0 0 auto;flex:0 0 auto}: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-background-app);border:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);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)}`;
|
|
20624
20885
|
|
|
20625
20886
|
/**
|
|
20626
20887
|
* @slot tabs - Content is placed within the `div[role="tablist"]` element as children
|
|
@@ -20630,6 +20891,25 @@ const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dim
|
|
|
20630
20891
|
class PdsTabs {
|
|
20631
20892
|
constructor(hostRef) {
|
|
20632
20893
|
registerInstance(this, hostRef);
|
|
20894
|
+
/**
|
|
20895
|
+
* Adds a divider rule beneath the tab list.
|
|
20896
|
+
* @defaultValue false
|
|
20897
|
+
*/
|
|
20898
|
+
this.divider = false;
|
|
20899
|
+
/**
|
|
20900
|
+
* Stretches the component so the active tab panel fills the remaining height.
|
|
20901
|
+
* Requires the component to have a constrained height (e.g. a flex parent).
|
|
20902
|
+
* @defaultValue false
|
|
20903
|
+
*/
|
|
20904
|
+
this.stretch = false;
|
|
20905
|
+
/**
|
|
20906
|
+
* Renders the tab strip as navigation instead of an in-page panel switcher: each
|
|
20907
|
+
* `pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`
|
|
20908
|
+
* on the `active` tab) rather than a `role="tab"` button over a `pds-tabpanel`.
|
|
20909
|
+
* Give every `pds-tab` an `href` and omit `pds-tabpanel`s.
|
|
20910
|
+
* @defaultValue false
|
|
20911
|
+
*/
|
|
20912
|
+
this.nav = false;
|
|
20633
20913
|
}
|
|
20634
20914
|
tabClickHandler(event) {
|
|
20635
20915
|
if (this.componentId === event.detail[1]) {
|
|
@@ -20638,6 +20918,10 @@ class PdsTabs {
|
|
|
20638
20918
|
}
|
|
20639
20919
|
}
|
|
20640
20920
|
handleKeyDown(ev) {
|
|
20921
|
+
// Navigation mode uses real links: Tab moves focus, Enter follows the href.
|
|
20922
|
+
// The roving/arrow model is a panel-mode (role=tab) concern only.
|
|
20923
|
+
if (this.isNav)
|
|
20924
|
+
return;
|
|
20641
20925
|
const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
|
|
20642
20926
|
// Only handle keyboard navigation if the event originated from a tab button
|
|
20643
20927
|
// that belongs to THIS tabs component
|
|
@@ -20650,6 +20934,32 @@ class PdsTabs {
|
|
|
20650
20934
|
this.moveActiveTab(ev.key);
|
|
20651
20935
|
}
|
|
20652
20936
|
}
|
|
20937
|
+
// Navigation mode is an explicit, single source of truth: `nav` drives both the
|
|
20938
|
+
// container (<nav> of links vs role=tablist of buttons) and every child tab (via
|
|
20939
|
+
// `navMode`), so the tabs present when the strip initializes can't mix the two.
|
|
20940
|
+
// (Child discovery is load-time only, like `variant`/`id`; tabs added after load
|
|
20941
|
+
// aren't managed.)
|
|
20942
|
+
get isNav() {
|
|
20943
|
+
return !!this.nav;
|
|
20944
|
+
}
|
|
20945
|
+
// `nav` and per-tab `href` should agree. Warn on the two authoring mistakes
|
|
20946
|
+
// rather than silently rendering a link with no destination, or ignoring an href.
|
|
20947
|
+
warnOnNavConfig() {
|
|
20948
|
+
var _a;
|
|
20949
|
+
if (!((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length))
|
|
20950
|
+
return;
|
|
20951
|
+
// An empty `href=""` is not a usable destination, so it counts as missing.
|
|
20952
|
+
const withHref = this.tabs.filter((tab) => {
|
|
20953
|
+
const href = tab.getAttribute('href');
|
|
20954
|
+
return href != null && href !== '';
|
|
20955
|
+
}).length;
|
|
20956
|
+
if (this.nav && withHref < this.tabs.length) {
|
|
20957
|
+
console.warn('pds-tabs: `nav` is set, so every pds-tab needs an `href`.');
|
|
20958
|
+
}
|
|
20959
|
+
else if (!this.nav && withHref > 0) {
|
|
20960
|
+
console.warn('pds-tabs: a pds-tab has an `href` but `nav` is not set — add `nav` to pds-tabs for navigation mode; the href is ignored in panel mode.');
|
|
20961
|
+
}
|
|
20962
|
+
}
|
|
20653
20963
|
moveActiveTab(key) {
|
|
20654
20964
|
const firstTabNumber = 0;
|
|
20655
20965
|
const lastTabNumber = this.tabs.length - 1;
|
|
@@ -20688,13 +20998,25 @@ class PdsTabs {
|
|
|
20688
20998
|
child['index'] = index;
|
|
20689
20999
|
}
|
|
20690
21000
|
passPropsToChildren() {
|
|
21001
|
+
var _a;
|
|
21002
|
+
// Panel mode needs a selected tab so the tablist stays keyboard-reachable
|
|
21003
|
+
// (an all-unselected tablist has every button at tabindex="-1"). Default to
|
|
21004
|
+
// the first ENABLED tab when the consumer omits `activeTabName` — a disabled
|
|
21005
|
+
// tab is itself tabindex="-1", so selecting it would recreate the trap. Nav
|
|
21006
|
+
// mode has no roving/selection, so it's left unset there.
|
|
21007
|
+
if (!this.nav && this.activeTabName == null && this.tabs.length) {
|
|
21008
|
+
const firstEnabled = (_a = this.tabs.find((tab) => !tab.disabled)) !== null && _a !== void 0 ? _a : this.tabs[0];
|
|
21009
|
+
this.activeTabName = firstEnabled.name;
|
|
21010
|
+
}
|
|
20691
21011
|
this.tabs.forEach((child, index) => {
|
|
20692
21012
|
if (this.activeTabName === child.name)
|
|
20693
21013
|
this.activeTabIndex = index;
|
|
20694
21014
|
this.propGeneration(child, index);
|
|
21015
|
+
child.navMode = this.nav;
|
|
20695
21016
|
});
|
|
20696
21017
|
this.tabPanels.forEach((child) => {
|
|
20697
21018
|
this.propGeneration(child);
|
|
21019
|
+
child.stretch = this.stretch;
|
|
20698
21020
|
});
|
|
20699
21021
|
}
|
|
20700
21022
|
classNames() {
|
|
@@ -20703,17 +21025,27 @@ class PdsTabs {
|
|
|
20703
21025
|
const variantClassName = `pds-tabs--${this.variant}`;
|
|
20704
21026
|
className += ' ' + variantClassName;
|
|
20705
21027
|
}
|
|
21028
|
+
if (this.divider) {
|
|
21029
|
+
className += ' pds-tabs--divider';
|
|
21030
|
+
}
|
|
21031
|
+
if (this.stretch) {
|
|
21032
|
+
className += ' pds-tabs--stretch';
|
|
21033
|
+
}
|
|
20706
21034
|
return className;
|
|
20707
21035
|
}
|
|
20708
21036
|
;
|
|
20709
21037
|
componentWillLoad() {
|
|
20710
21038
|
this.findAllChildren();
|
|
21039
|
+
this.warnOnNavConfig();
|
|
20711
21040
|
}
|
|
20712
21041
|
componentWillRender() {
|
|
20713
21042
|
this.passPropsToChildren();
|
|
20714
21043
|
}
|
|
20715
21044
|
render() {
|
|
20716
|
-
|
|
21045
|
+
// Navigation mode: a <nav> landmark of links (aria-current marks the current
|
|
21046
|
+
// page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
|
|
21047
|
+
const tabList = this.isNav ? (hAsync("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, hAsync("slot", { name: "tabs" }))) : (hAsync("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, hAsync("slot", { name: "tabs" })));
|
|
21048
|
+
return (hAsync(Host, { key: '97bb6d788bd7bdf393b46eaecea612d9b0c9dee4', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: '252855bfa496bc3e04fbe6dc0bcb7597c7360407', name: "tabpanels" })));
|
|
20717
21049
|
}
|
|
20718
21050
|
get el() { return getElement(this); }
|
|
20719
21051
|
static get style() { return pdsTabsCss(); }
|
|
@@ -20724,6 +21056,9 @@ class PdsTabs {
|
|
|
20724
21056
|
"tablistLabel": [1, "tablist-label"],
|
|
20725
21057
|
"componentId": [1, "component-id"],
|
|
20726
21058
|
"variant": [1],
|
|
21059
|
+
"divider": [4],
|
|
21060
|
+
"stretch": [4],
|
|
21061
|
+
"nav": [4],
|
|
20727
21062
|
"activeTabName": [1025, "active-tab-name"],
|
|
20728
21063
|
"activeTabIndex": [1026, "active-tab-index"]
|
|
20729
21064
|
},
|
|
@@ -20836,7 +21171,7 @@ class PdsText {
|
|
|
20836
21171
|
? `pds-text--decoration-${this.decoration}`
|
|
20837
21172
|
: ''}
|
|
20838
21173
|
`;
|
|
20839
|
-
return (hAsync(Tag, { key: '
|
|
21174
|
+
return (hAsync(Tag, { key: '9ae3d5a57202ca1308c69b76645168fc8e18953b', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, hAsync("slot", { key: 'e6c95b8240690a9c83927e206096bbd7615dd4d2' })));
|
|
20840
21175
|
}
|
|
20841
21176
|
get el() { return getElement(this); }
|
|
20842
21177
|
static get watchers() { return {
|
|
@@ -20920,6 +21255,12 @@ class PdsTextarea {
|
|
|
20920
21255
|
* If true, the textarea has action content in the label area
|
|
20921
21256
|
*/
|
|
20922
21257
|
this.hasAction = false;
|
|
21258
|
+
/**
|
|
21259
|
+
* Template for the character-counter's accessible label. Pass a translated
|
|
21260
|
+
* string to localize it; `{current}` and `{max}` are interpolated.
|
|
21261
|
+
* @defaultValue '{current} of {max} characters'
|
|
21262
|
+
*/
|
|
21263
|
+
this.characterCountLabel = '{current} of {max} characters';
|
|
20923
21264
|
this.onBlur = (ev) => {
|
|
20924
21265
|
this.hasFocus = false;
|
|
20925
21266
|
if (this.focusedValue !== this.value) {
|
|
@@ -21117,7 +21458,7 @@ class PdsTextarea {
|
|
|
21117
21458
|
return null;
|
|
21118
21459
|
}
|
|
21119
21460
|
const currentLength = this.getValue().length;
|
|
21120
|
-
return (hAsync("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label":
|
|
21461
|
+
return (hAsync("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": formatMessage(this.characterCountLabel, { current: currentLength, max: this.maxLength }) }, currentLength, " / ", this.maxLength));
|
|
21121
21462
|
}
|
|
21122
21463
|
renderAction() {
|
|
21123
21464
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
@@ -21171,10 +21512,10 @@ class PdsTextarea {
|
|
|
21171
21512
|
}
|
|
21172
21513
|
render() {
|
|
21173
21514
|
const value = this.getValue();
|
|
21174
|
-
return (hAsync(Host, { key: '
|
|
21175
|
-
hAsync("div", { key: '
|
|
21176
|
-
hAsync("p", { key: '
|
|
21177
|
-
hAsync("p", { key: '
|
|
21515
|
+
return (hAsync(Host, { key: 'd13869d989752c76c80a46ebb0291df2c0546cc2', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '19454f642896485dc22bc5dac8b6ed3b4ae5627a', class: "pds-textarea" }, this.label &&
|
|
21516
|
+
hAsync("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, hAsync("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'a3ecb78c5b8f42f8350abe623bacb55be6c4a0c0', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
|
|
21517
|
+
hAsync("p", { key: 'b5229a6ef0b2c4ee5dcb820ce2b9bbf6334adef8', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
21518
|
+
hAsync("p", { key: '8e6dfa97496d553b8e1e2a50c1221fad3ddb539a', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'f3ed2677239e6d135480cf55d1d908936d746322', icon: danger, size: "small" }), this.errorMessage))));
|
|
21178
21519
|
}
|
|
21179
21520
|
static get formAssociated() { return true; }
|
|
21180
21521
|
get el() { return getElement(this); }
|
|
@@ -21211,6 +21552,7 @@ class PdsTextarea {
|
|
|
21211
21552
|
"maxLength": [514, "max-length"],
|
|
21212
21553
|
"highlight": [516],
|
|
21213
21554
|
"value": [1025],
|
|
21555
|
+
"characterCountLabel": [1, "character-count-label"],
|
|
21214
21556
|
"hasFocus": [32],
|
|
21215
21557
|
"hasAction": [32],
|
|
21216
21558
|
"setFocus": [64]
|
|
@@ -21252,6 +21594,12 @@ class PdsToast {
|
|
|
21252
21594
|
* @default 'default'
|
|
21253
21595
|
*/
|
|
21254
21596
|
this.type = 'default';
|
|
21597
|
+
/**
|
|
21598
|
+
* Accessible label for the dismiss button. Pass a translated string to
|
|
21599
|
+
* localize it; defaults to English.
|
|
21600
|
+
* @defaultValue 'Dismiss message'
|
|
21601
|
+
*/
|
|
21602
|
+
this.dismissLabel = 'Dismiss message';
|
|
21255
21603
|
/**
|
|
21256
21604
|
* Whether the toast is currently visible.
|
|
21257
21605
|
*/
|
|
@@ -21341,13 +21689,13 @@ class PdsToast {
|
|
|
21341
21689
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
21342
21690
|
}
|
|
21343
21691
|
render() {
|
|
21344
|
-
return (hAsync(Host, { key: '
|
|
21692
|
+
return (hAsync(Host, { key: '87c9b15656a2765eb9e722c85dba5c5edbe07c42', hidden: !this.isVisible }, hAsync("div", { key: 'bd8b26ef0c33b96603313bce74505953d8fe7410', class: {
|
|
21345
21693
|
'pds-toast': true,
|
|
21346
21694
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
21347
21695
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
21348
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
21696
|
+
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '5f7fd6b70fe130d8b0915da07640bec01b3b2bcb', class: "pds-toast__message" }, hAsync("slot", { key: '4aa0cf737b420ae51297126b423b44d2a8610226' })), this.dismissible && (hAsync("button", { key: 'a8b8e5e9ba956b2d9cca284d114afa37b80570cf', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
|
|
21349
21697
|
this.dismiss();
|
|
21350
|
-
}, "aria-label":
|
|
21698
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'dac8f2099b2ab8a68d208aac288d48019df6d7e7', name: "remove" }))))));
|
|
21351
21699
|
}
|
|
21352
21700
|
get el() { return getElement(this); }
|
|
21353
21701
|
static get watchers() { return {
|
|
@@ -21365,6 +21713,7 @@ class PdsToast {
|
|
|
21365
21713
|
"duration": [2],
|
|
21366
21714
|
"icon": [1],
|
|
21367
21715
|
"type": [1],
|
|
21716
|
+
"dismissLabel": [1, "dismiss-label"],
|
|
21368
21717
|
"isVisible": [32],
|
|
21369
21718
|
"isAnimatingOut": [32],
|
|
21370
21719
|
"dismiss": [64]
|
|
@@ -21690,9 +22039,9 @@ class PdsTooltip {
|
|
|
21690
22039
|
}
|
|
21691
22040
|
render() {
|
|
21692
22041
|
const hostId = this.componentId || undefined;
|
|
21693
|
-
return (hAsync(Host, { key: '
|
|
22042
|
+
return (hAsync(Host, { key: '6af9c969e0dae4f3969cba2153797a1bccfc6d21', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '97c48a8b8d626ee913412bd55aefb17f36fad401', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
21694
22043
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
21695
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
22044
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '37715fc0bf525695a62af1944ff853228080302a' })), hAsync("div", { key: 'a9a925b1de9ea45d2f6b9f39ec5e386537313217', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '1486b30af21dc69758d7dc9890cbaf227bafffc7', name: "content" }))));
|
|
21696
22045
|
}
|
|
21697
22046
|
get el() { return getElement(this); }
|
|
21698
22047
|
static get watchers() { return {
|