@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.mjs
CHANGED
|
@@ -3154,6 +3154,9 @@ var setContentReference = (elm) => {
|
|
|
3154
3154
|
contentRefElm["s-cn"] = true;
|
|
3155
3155
|
insertBefore(elm, contentRefElm, elm.firstChild);
|
|
3156
3156
|
};
|
|
3157
|
+
|
|
3158
|
+
// src/runtime/fragment.ts
|
|
3159
|
+
var Fragment = (_, children) => children;
|
|
3157
3160
|
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
3158
3161
|
if (listeners && win.document) {
|
|
3159
3162
|
listeners.map(([flags, name, method]) => {
|
|
@@ -5547,7 +5550,7 @@ class MockPdsModal {
|
|
|
5547
5550
|
}; }
|
|
5548
5551
|
}
|
|
5549
5552
|
|
|
5550
|
-
/* pds-icons
|
|
5553
|
+
/* pds-icons v10.2.0, ES Modules */
|
|
5551
5554
|
|
|
5552
5555
|
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>";
|
|
5553
5556
|
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>";
|
|
@@ -5650,6 +5653,12 @@ class PdsAlert {
|
|
|
5650
5653
|
* @defaultValue 'default'
|
|
5651
5654
|
*/
|
|
5652
5655
|
this.variant = 'default';
|
|
5656
|
+
/**
|
|
5657
|
+
* Accessible label for the dismiss button. Pass a translated string to
|
|
5658
|
+
* localize it; defaults to English.
|
|
5659
|
+
* @defaultValue 'Dismiss alert'
|
|
5660
|
+
*/
|
|
5661
|
+
this.dismissLabel = 'Dismiss alert';
|
|
5653
5662
|
this.hasActionsContent = false;
|
|
5654
5663
|
this.handleCloseClick = () => {
|
|
5655
5664
|
this.pdsAlertDismissClick.emit();
|
|
@@ -5680,7 +5689,7 @@ class PdsAlert {
|
|
|
5680
5689
|
};
|
|
5681
5690
|
// Get the icon name based on the current variant
|
|
5682
5691
|
const iconName = iconMap[this.variant] || iconMap.default;
|
|
5683
|
-
return (hAsync(Host, { key: '
|
|
5692
|
+
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)" })))))));
|
|
5684
5693
|
}
|
|
5685
5694
|
get el() { return getElement(this); }
|
|
5686
5695
|
static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
|
|
@@ -5694,6 +5703,7 @@ class PdsAlert {
|
|
|
5694
5703
|
"dismissible": [4],
|
|
5695
5704
|
"hideIcon": [4, "hide-icon"],
|
|
5696
5705
|
"variant": [1],
|
|
5706
|
+
"dismissLabel": [1, "dismiss-label"],
|
|
5697
5707
|
"hasActionsContent": [32]
|
|
5698
5708
|
},
|
|
5699
5709
|
"$listeners$": undefined,
|
|
@@ -5702,7 +5712,7 @@ class PdsAlert {
|
|
|
5702
5712
|
}; }
|
|
5703
5713
|
}
|
|
5704
5714
|
|
|
5705
|
-
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}`;
|
|
5715
|
+
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}`;
|
|
5706
5716
|
|
|
5707
5717
|
/**
|
|
5708
5718
|
* @part asset-wrapper
|
|
@@ -5742,30 +5752,66 @@ class PdsAvatar {
|
|
|
5742
5752
|
* @defaultValue lg
|
|
5743
5753
|
*/
|
|
5744
5754
|
this.size = 'lg';
|
|
5755
|
+
/**
|
|
5756
|
+
* Displays a presence status indicator (a dot) on the avatar: `online`
|
|
5757
|
+
* (success), `away` (warning), or `offline` (neutral). For a simple
|
|
5758
|
+
* active/inactive presence, map active to `online` and inactive to `offline`.
|
|
5759
|
+
* Takes precedence over `badge` — they share the same corner, so the badge is
|
|
5760
|
+
* hidden while `status` is set.
|
|
5761
|
+
* @defaultValue null
|
|
5762
|
+
*/
|
|
5763
|
+
this.status = null;
|
|
5764
|
+
/**
|
|
5765
|
+
* Determines whether a ring is shown around the avatar in the `status` color.
|
|
5766
|
+
* Has no effect unless `status` is set.
|
|
5767
|
+
* @defaultValue false
|
|
5768
|
+
*/
|
|
5769
|
+
this.statusRing = false;
|
|
5745
5770
|
/**
|
|
5746
5771
|
* Determines the variant of avatar. Changes appearance accordingly.
|
|
5747
5772
|
* @defaultValue customer
|
|
5748
5773
|
*/
|
|
5749
5774
|
this.variant = 'customer';
|
|
5775
|
+
/**
|
|
5776
|
+
* Accessible label for the dropdown trigger button. Pass a translated string
|
|
5777
|
+
* to localize it; defaults to English.
|
|
5778
|
+
* @defaultValue 'Avatar dropdown trigger'
|
|
5779
|
+
*/
|
|
5780
|
+
this.triggerLabel = 'Avatar dropdown trigger';
|
|
5750
5781
|
this.renderAssetWrapper = () => {
|
|
5751
5782
|
const style = {
|
|
5752
5783
|
height: this.avatarSize(),
|
|
5753
5784
|
width: this.avatarSize()
|
|
5754
5785
|
};
|
|
5755
|
-
return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
|
|
5786
|
+
return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge(), this.renderStatus()));
|
|
5756
5787
|
};
|
|
5757
5788
|
this.renderAvatar = () => {
|
|
5758
5789
|
return (this.dropdown
|
|
5759
5790
|
?
|
|
5760
|
-
hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label":
|
|
5791
|
+
hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": this.triggerLabel }, this.renderAssetWrapper())
|
|
5761
5792
|
:
|
|
5762
5793
|
this.renderAssetWrapper());
|
|
5763
5794
|
};
|
|
5764
|
-
this.renderBadge = () => (
|
|
5795
|
+
this.renderBadge = () => (
|
|
5796
|
+
// `badge` and `status` share the bottom-end corner; `status` wins so the
|
|
5797
|
+
// presence dot is never painted over the badge.
|
|
5798
|
+
this.badge && !this.status
|
|
5765
5799
|
// Percentage is average size of icon in relation to total avatar size
|
|
5766
5800
|
// of all preset sizes found in Figma.
|
|
5767
5801
|
// Used to allow icons to scale to container size
|
|
5768
5802
|
&& hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
|
|
5803
|
+
this.renderStatus = () => {
|
|
5804
|
+
var _a;
|
|
5805
|
+
if (!this.status)
|
|
5806
|
+
return null;
|
|
5807
|
+
// Inside the dropdown trigger, the button's aria-label owns the accessible
|
|
5808
|
+
// name, so the dot's own label is never announced. Mark it decorative there
|
|
5809
|
+
// and let consumers convey presence via `triggerLabel`.
|
|
5810
|
+
if (this.dropdown) {
|
|
5811
|
+
return hAsync("span", { class: "pds-avatar__status", part: "status", "aria-hidden": "true" });
|
|
5812
|
+
}
|
|
5813
|
+
return (hAsync("span", { class: "pds-avatar__status", part: "status", role: "img", "aria-label": (_a = this.statusLabel) !== null && _a !== void 0 ? _a : `${this.status} status` }));
|
|
5814
|
+
};
|
|
5769
5815
|
this.renderIconOrImage = () => {
|
|
5770
5816
|
if (this.image) {
|
|
5771
5817
|
return hAsync("img", { alt: this.alt, src: this.image });
|
|
@@ -5782,7 +5828,8 @@ class PdsAvatar {
|
|
|
5782
5828
|
'pds-avatar': true,
|
|
5783
5829
|
[`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
|
|
5784
5830
|
[`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,
|
|
5785
|
-
[`pds-avatar--${this.variant}`]: this.variant === 'admin'
|
|
5831
|
+
[`pds-avatar--${this.variant}`]: this.variant === 'admin',
|
|
5832
|
+
[`pds-avatar--status-ring`]: !!this.status && this.statusRing,
|
|
5786
5833
|
});
|
|
5787
5834
|
}
|
|
5788
5835
|
avatarSize() {
|
|
@@ -5801,7 +5848,7 @@ class PdsAvatar {
|
|
|
5801
5848
|
}
|
|
5802
5849
|
}
|
|
5803
5850
|
render() {
|
|
5804
|
-
return (hAsync(Host, { key: '
|
|
5851
|
+
return (hAsync(Host, { key: '594604d25190002ec166626b4a4a1a9a6be875d8', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
5805
5852
|
}
|
|
5806
5853
|
static get style() { return pdsAvatarCss(); }
|
|
5807
5854
|
static get cmpMeta() { return {
|
|
@@ -5815,11 +5862,15 @@ class PdsAvatar {
|
|
|
5815
5862
|
"image": [1],
|
|
5816
5863
|
"initials": [1],
|
|
5817
5864
|
"size": [513],
|
|
5818
|
-
"
|
|
5865
|
+
"status": [513],
|
|
5866
|
+
"statusLabel": [1, "status-label"],
|
|
5867
|
+
"statusRing": [4, "status-ring"],
|
|
5868
|
+
"variant": [513],
|
|
5869
|
+
"triggerLabel": [1, "trigger-label"]
|
|
5819
5870
|
},
|
|
5820
5871
|
"$listeners$": undefined,
|
|
5821
5872
|
"$lazyBundleId$": "-",
|
|
5822
|
-
"$attrsToReflect$": [["size", "size"], ["variant", "variant"]]
|
|
5873
|
+
"$attrsToReflect$": [["size", "size"], ["status", "status"], ["variant", "variant"]]
|
|
5823
5874
|
}; }
|
|
5824
5875
|
}
|
|
5825
5876
|
|
|
@@ -6164,7 +6215,7 @@ class PdsBox {
|
|
|
6164
6215
|
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)}`;
|
|
6165
6216
|
|
|
6166
6217
|
/**
|
|
6167
|
-
* @part button - Exposes the button element for styling.
|
|
6218
|
+
* @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).
|
|
6168
6219
|
* @part button-content - Exposes the button content for styling.
|
|
6169
6220
|
* @part button-text - Exposes the button text for styling.
|
|
6170
6221
|
* @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
|
|
@@ -6695,6 +6746,11 @@ class PdsChip {
|
|
|
6695
6746
|
* @defaultValue 'text'
|
|
6696
6747
|
*/
|
|
6697
6748
|
this.variant = 'text';
|
|
6749
|
+
/**
|
|
6750
|
+
* Accessible label for the remove button. Pass a translated string to localize it; defaults to English.
|
|
6751
|
+
* @defaultValue 'Remove'
|
|
6752
|
+
*/
|
|
6753
|
+
this.dismissLabel = 'Remove';
|
|
6698
6754
|
this.handleCloseClick = () => {
|
|
6699
6755
|
this.pdsTagCloseClick.emit();
|
|
6700
6756
|
};
|
|
@@ -6748,7 +6804,7 @@ class PdsChip {
|
|
|
6748
6804
|
const linkAttrs = {
|
|
6749
6805
|
class: 'pds-chip__close',
|
|
6750
6806
|
href: this.removeUrl,
|
|
6751
|
-
'aria-label':
|
|
6807
|
+
'aria-label': this.dismissLabel,
|
|
6752
6808
|
};
|
|
6753
6809
|
// Add target if specified
|
|
6754
6810
|
if (this.removeTarget) {
|
|
@@ -6779,13 +6835,13 @@ class PdsChip {
|
|
|
6779
6835
|
return {
|
|
6780
6836
|
class: 'pds-chip__close',
|
|
6781
6837
|
type: 'button',
|
|
6782
|
-
'aria-label':
|
|
6838
|
+
'aria-label': this.dismissLabel,
|
|
6783
6839
|
};
|
|
6784
6840
|
};
|
|
6785
6841
|
return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
|
|
6786
6842
|
}
|
|
6787
6843
|
render() {
|
|
6788
|
-
return (hAsync(Host, { key: '
|
|
6844
|
+
return (hAsync(Host, { key: 'ff02e96839049b313681389308faba50c5989842', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
6789
6845
|
}
|
|
6790
6846
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
6791
6847
|
static get cmpMeta() { return {
|
|
@@ -6801,7 +6857,8 @@ class PdsChip {
|
|
|
6801
6857
|
"variant": [1],
|
|
6802
6858
|
"removeUrl": [1, "remove-url"],
|
|
6803
6859
|
"removeHttpMethod": [1, "remove-http-method"],
|
|
6804
|
-
"removeTarget": [1, "remove-target"]
|
|
6860
|
+
"removeTarget": [1, "remove-target"],
|
|
6861
|
+
"dismissLabel": [1, "dismiss-label"]
|
|
6805
6862
|
},
|
|
6806
6863
|
"$listeners$": undefined,
|
|
6807
6864
|
"$lazyBundleId$": "-",
|
|
@@ -13704,7 +13761,7 @@ class PdsInput {
|
|
|
13704
13761
|
}; }
|
|
13705
13762
|
}
|
|
13706
13763
|
|
|
13707
|
-
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}`;
|
|
13764
|
+
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}`;
|
|
13708
13765
|
|
|
13709
13766
|
/**
|
|
13710
13767
|
* @part link - Link element styles.
|
|
@@ -13713,6 +13770,13 @@ const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-sta
|
|
|
13713
13770
|
class PdsLink {
|
|
13714
13771
|
constructor(hostRef) {
|
|
13715
13772
|
registerInstance(this, hostRef);
|
|
13773
|
+
/**
|
|
13774
|
+
* Marks the link as the current/active navigation item — for tab strips and
|
|
13775
|
+
* nav rails built from links. Applies the active treatment (persistent
|
|
13776
|
+
* underline + strong text) and sets `aria-current="page"`.
|
|
13777
|
+
* @defaultValue false
|
|
13778
|
+
*/
|
|
13779
|
+
this.active = false;
|
|
13716
13780
|
/**
|
|
13717
13781
|
* Determines whether the link should open in a new tab.
|
|
13718
13782
|
* @defaultValue false
|
|
@@ -13755,14 +13819,15 @@ class PdsLink {
|
|
|
13755
13819
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
13756
13820
|
const showExternalIcon = this.external;
|
|
13757
13821
|
const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
|
|
13758
|
-
return (hAsync("a", { key: '
|
|
13759
|
-
hAsync("pds-icon", { key: '
|
|
13822
|
+
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 &&
|
|
13823
|
+
hAsync("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
|
|
13760
13824
|
}
|
|
13761
13825
|
static get style() { return pdsLinkCss(); }
|
|
13762
13826
|
static get cmpMeta() { return {
|
|
13763
13827
|
"$flags$": 265,
|
|
13764
13828
|
"$tagName$": "pds-link",
|
|
13765
13829
|
"$members$": {
|
|
13830
|
+
"active": [516],
|
|
13766
13831
|
"color": [1],
|
|
13767
13832
|
"download": [1],
|
|
13768
13833
|
"componentId": [1, "component-id"],
|
|
@@ -13782,7 +13847,7 @@ class PdsLink {
|
|
|
13782
13847
|
},
|
|
13783
13848
|
"$listeners$": undefined,
|
|
13784
13849
|
"$lazyBundleId$": "-",
|
|
13785
|
-
"$attrsToReflect$": []
|
|
13850
|
+
"$attrsToReflect$": [["active", "active"]]
|
|
13786
13851
|
}; }
|
|
13787
13852
|
}
|
|
13788
13853
|
|
|
@@ -14365,6 +14430,66 @@ class PdsModalHeader {
|
|
|
14365
14430
|
}; }
|
|
14366
14431
|
}
|
|
14367
14432
|
|
|
14433
|
+
/**
|
|
14434
|
+
* i18n formatting helpers for Pine components.
|
|
14435
|
+
*
|
|
14436
|
+
* Pine stays string-agnostic: user-facing text is supplied by the consumer as
|
|
14437
|
+
* props (English-defaulted). These helpers only handle the two things a prop
|
|
14438
|
+
* value can't express on its own — interpolating live component state into a
|
|
14439
|
+
* translated template, and picking the right plural form. No stored strings, no
|
|
14440
|
+
* locale registry; the locale is read from the DOM (`lang`), the web-standard
|
|
14441
|
+
* signal a consumer already sets.
|
|
14442
|
+
*
|
|
14443
|
+
* Two limitations of DOM-`lang` locale resolution, both inherent to inferring
|
|
14444
|
+
* locale from the DOM rather than being told it:
|
|
14445
|
+
*
|
|
14446
|
+
* 1. Not reactive. `resolveLocale` is read during render; Stencil has no
|
|
14447
|
+
* reactive dependency on a DOM attribute, so changing `lang` at runtime
|
|
14448
|
+
* (`document.documentElement.lang = 'pl'`) does NOT re-render mounted
|
|
14449
|
+
* components — the plural form stays stale until unrelated state forces a
|
|
14450
|
+
* render. Fine when locale changes via full-page navigation; a consumer that
|
|
14451
|
+
* switches locale client-side should pass the already-formatted/pluralized
|
|
14452
|
+
* string as the prop instead.
|
|
14453
|
+
* 2. Does not cross shadow boundaries. `el.closest('[lang]')` stops at the host's
|
|
14454
|
+
* shadow root. A Pine component nested inside another custom element whose
|
|
14455
|
+
* `lang` sits on that outer host will not see it and falls back to
|
|
14456
|
+
* `document.documentElement.lang`. Set `lang` on (or above) the Pine element
|
|
14457
|
+
* in the same tree, or pass a pre-formatted string, when that matters.
|
|
14458
|
+
*/
|
|
14459
|
+
/** Replace `{token}` placeholders with `vars`; unknown tokens stay literal. */
|
|
14460
|
+
function formatMessage(template, vars) {
|
|
14461
|
+
if (!vars)
|
|
14462
|
+
return template;
|
|
14463
|
+
return template.replace(/\{(\w+)\}/g, (_match, key) => key in vars ? String(vars[key]) : `{${key}}`);
|
|
14464
|
+
}
|
|
14465
|
+
/** Nearest `[lang]` ancestor, then `<html lang>`, then `'en'`. */
|
|
14466
|
+
function resolveLocale(el) {
|
|
14467
|
+
var _a;
|
|
14468
|
+
const fromEl = el && typeof el.closest === 'function' ? (_a = el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang') : null;
|
|
14469
|
+
const fromDoc = typeof document !== 'undefined' ? document.documentElement.lang : '';
|
|
14470
|
+
return fromEl || fromDoc || 'en';
|
|
14471
|
+
}
|
|
14472
|
+
/**
|
|
14473
|
+
* Pick the CLDR plural form for `count` in the element's locale (via the
|
|
14474
|
+
* platform `Intl.PluralRules`) and interpolate `{count}`. `forms` come from the
|
|
14475
|
+
* caller — component props, English-defaulted — and fall back to `other`.
|
|
14476
|
+
*/
|
|
14477
|
+
function pluralize(el, count, forms, vars) {
|
|
14478
|
+
let category = 'other';
|
|
14479
|
+
try {
|
|
14480
|
+
category = new Intl.PluralRules(resolveLocale(el)).select(count);
|
|
14481
|
+
}
|
|
14482
|
+
catch (_a) {
|
|
14483
|
+
/* invalid locale tag → fall back to 'other' */
|
|
14484
|
+
}
|
|
14485
|
+
// Prefer the selected category, then the required `other`, then `one`; never
|
|
14486
|
+
// return empty. `||` (not `??`) so an empty-string form is skipped too, not
|
|
14487
|
+
// treated as present — a bare `{count}` still shows the number rather than
|
|
14488
|
+
// leaving the trigger with no accessible name.
|
|
14489
|
+
const template = forms[category] || forms.other || forms.one || '{count}';
|
|
14490
|
+
return formatMessage(template, Object.assign({ count }, vars));
|
|
14491
|
+
}
|
|
14492
|
+
|
|
14368
14493
|
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}`;
|
|
14369
14494
|
|
|
14370
14495
|
/**
|
|
@@ -14383,14 +14508,65 @@ class PdsMultiselect {
|
|
|
14383
14508
|
this.pdsMultiselectCreate = createEvent(this, "pdsMultiselectCreate");
|
|
14384
14509
|
this.pdsMultiselectDismiss = createEvent(this, "pdsMultiselectDismiss");
|
|
14385
14510
|
/**
|
|
14386
|
-
* Placeholder text for the input field.
|
|
14511
|
+
* Placeholder text for the input field. Pass a translated string to localize it; defaults to English.
|
|
14512
|
+
* @defaultValue 'Select...'
|
|
14387
14513
|
*/
|
|
14388
14514
|
this.placeholder = 'Select...';
|
|
14389
14515
|
/**
|
|
14390
|
-
* Placeholder text for the search input inside the dropdown panel.
|
|
14391
|
-
* @
|
|
14516
|
+
* Placeholder text for the search input inside the dropdown panel. Pass a translated string to localize it; defaults to English.
|
|
14517
|
+
* @defaultValue 'Find...'
|
|
14392
14518
|
*/
|
|
14393
14519
|
this.searchPlaceholder = 'Find...';
|
|
14520
|
+
/**
|
|
14521
|
+
* Accessible label for the search input. Pass a translated string to localize it; defaults to English.
|
|
14522
|
+
* @defaultValue 'Search options'
|
|
14523
|
+
*/
|
|
14524
|
+
this.searchOptionsLabel = 'Search options';
|
|
14525
|
+
/**
|
|
14526
|
+
* Accessible label for the selected-items region. Pass a translated string to localize it; defaults to English.
|
|
14527
|
+
* @defaultValue 'Selected items'
|
|
14528
|
+
*/
|
|
14529
|
+
this.selectedItemsLabel = 'Selected items';
|
|
14530
|
+
/**
|
|
14531
|
+
* Accessible label for the options listbox (falls back to this when `label` is unset). Pass a translated string to localize it; defaults to English.
|
|
14532
|
+
* @defaultValue 'Options'
|
|
14533
|
+
*/
|
|
14534
|
+
this.optionsLabel = 'Options';
|
|
14535
|
+
/**
|
|
14536
|
+
* Text shown when no options match the search. Pass a translated string to localize it; defaults to English.
|
|
14537
|
+
* @defaultValue 'No options found'
|
|
14538
|
+
*/
|
|
14539
|
+
this.noOptionsFoundLabel = 'No options found';
|
|
14540
|
+
/**
|
|
14541
|
+
* Visible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
|
|
14542
|
+
* @defaultValue 'Add "{text}"'
|
|
14543
|
+
*/
|
|
14544
|
+
this.createOptionLabel = 'Add "{text}"';
|
|
14545
|
+
/**
|
|
14546
|
+
* Accessible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
|
|
14547
|
+
* @defaultValue 'Create new tag: {text}'
|
|
14548
|
+
*/
|
|
14549
|
+
this.createOptionAriaLabel = 'Create new tag: {text}';
|
|
14550
|
+
/**
|
|
14551
|
+
* Screen-reader announcement when an item is removed. Pass a translated string to localize it; `{item}` is interpolated.
|
|
14552
|
+
* @defaultValue '{item} removed'
|
|
14553
|
+
*/
|
|
14554
|
+
this.itemRemovedLabel = '{item} removed';
|
|
14555
|
+
/**
|
|
14556
|
+
* Accessible label for the remove button on each selected-item pill. Pass a translated string to localize it; defaults to English.
|
|
14557
|
+
* @defaultValue 'Remove'
|
|
14558
|
+
*/
|
|
14559
|
+
this.pillRemoveLabel = 'Remove';
|
|
14560
|
+
/**
|
|
14561
|
+
* Singular form of the selected-count trigger text. Pass a translated string to localize it; `{count}` is interpolated.
|
|
14562
|
+
* @defaultValue '{count} item'
|
|
14563
|
+
*/
|
|
14564
|
+
this.selectedCountLabelOne = '{count} item';
|
|
14565
|
+
/**
|
|
14566
|
+
* 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.
|
|
14567
|
+
* @defaultValue '{count} items'
|
|
14568
|
+
*/
|
|
14569
|
+
this.selectedCountLabelOther = '{count} items';
|
|
14394
14570
|
/**
|
|
14395
14571
|
* Whether to close the panel after an option is selected.
|
|
14396
14572
|
* Defaults to `false` (panel stays open for multi-select).
|
|
@@ -14629,7 +14805,7 @@ class PdsMultiselect {
|
|
|
14629
14805
|
this.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems });
|
|
14630
14806
|
// Clear first so screen readers re-announce even when the same item is removed twice
|
|
14631
14807
|
this.removalAnnouncement = '';
|
|
14632
|
-
queueMicrotask(() => { this.removalAnnouncement =
|
|
14808
|
+
queueMicrotask(() => { this.removalAnnouncement = formatMessage(this.itemRemovedLabel, { item: item.text }); });
|
|
14633
14809
|
this.isClosingViaSelection = true;
|
|
14634
14810
|
if (this.isOpen) {
|
|
14635
14811
|
(_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -15266,7 +15442,7 @@ class PdsMultiselect {
|
|
|
15266
15442
|
'pds-multiselect__option--selected': isSelected,
|
|
15267
15443
|
'pds-multiselect__option--create': isCreateOption,
|
|
15268
15444
|
'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
|
|
15269
|
-
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ?
|
|
15445
|
+
}, 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' } }))));
|
|
15270
15446
|
}
|
|
15271
15447
|
renderSelectedItemsList() {
|
|
15272
15448
|
if (this.hideSelectedItems || this.selectedItems.length === 0)
|
|
@@ -15280,7 +15456,7 @@ class PdsMultiselect {
|
|
|
15280
15456
|
const valueArray = this.ensureValueArray();
|
|
15281
15457
|
const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
|
|
15282
15458
|
const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
|
|
15283
|
-
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":
|
|
15459
|
+
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) => {
|
|
15284
15460
|
if (item.type === 'group') {
|
|
15285
15461
|
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)))));
|
|
15286
15462
|
}
|
|
@@ -15295,27 +15471,54 @@ class PdsMultiselect {
|
|
|
15295
15471
|
const variant = this.disabled ? 'text' : 'tag';
|
|
15296
15472
|
const visibleItems = this.selectedItems.slice(0, Math.max(1, this.maxInlinePills));
|
|
15297
15473
|
const overflowCount = this.selectedItems.length - visibleItems.length;
|
|
15298
|
-
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label":
|
|
15474
|
+
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))));
|
|
15299
15475
|
}
|
|
15300
15476
|
renderBelowPills() {
|
|
15301
15477
|
if (this.selectedItems.length === 0)
|
|
15302
15478
|
return null;
|
|
15303
15479
|
const variant = this.disabled ? 'text' : 'tag';
|
|
15304
|
-
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label":
|
|
15480
|
+
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)))));
|
|
15305
15481
|
}
|
|
15306
15482
|
getTriggerText() {
|
|
15307
15483
|
const count = this.selectedItems.length;
|
|
15308
15484
|
if (count === 0 || (this.selectedDisplay === 'pill' && this.pillPosition === 'below')) {
|
|
15485
|
+
// Fall back to a non-empty string: the trigger's accessible name comes from
|
|
15486
|
+
// this text, so an empty/undefined placeholder must never leave it nameless
|
|
15487
|
+
// (WCAG 4.1.2). The prop is localizable; this last-resort default is not.
|
|
15309
15488
|
return this.placeholder || 'Select...';
|
|
15310
15489
|
}
|
|
15311
|
-
return
|
|
15490
|
+
return pluralize(this.el, count, this.resolveCountForms());
|
|
15491
|
+
}
|
|
15492
|
+
/**
|
|
15493
|
+
* The `one`/`other` props are the ergonomic English defaults; `selectedCountLabels`
|
|
15494
|
+
* (object or JSON-string attribute) layers full CLDR forms on top for locales
|
|
15495
|
+
* that need `few`/`many`/`two`/`zero`. Malformed JSON degrades to the defaults.
|
|
15496
|
+
*/
|
|
15497
|
+
resolveCountForms() {
|
|
15498
|
+
const base = {
|
|
15499
|
+
one: this.selectedCountLabelOne,
|
|
15500
|
+
other: this.selectedCountLabelOther,
|
|
15501
|
+
};
|
|
15502
|
+
const extra = this.selectedCountLabels;
|
|
15503
|
+
if (!extra)
|
|
15504
|
+
return base;
|
|
15505
|
+
if (typeof extra === 'string') {
|
|
15506
|
+
try {
|
|
15507
|
+
const parsed = JSON.parse(extra);
|
|
15508
|
+
return parsed && typeof parsed === 'object' ? Object.assign(Object.assign({}, base), parsed) : base;
|
|
15509
|
+
}
|
|
15510
|
+
catch (_a) {
|
|
15511
|
+
return base; // not valid JSON → fall back to the English-shape defaults
|
|
15512
|
+
}
|
|
15513
|
+
}
|
|
15514
|
+
return Object.assign(Object.assign({}, base), extra);
|
|
15312
15515
|
}
|
|
15313
15516
|
render() {
|
|
15314
15517
|
const hasSelections = this.selectedItems.length > 0;
|
|
15315
|
-
return (hAsync(Host, { key: '
|
|
15518
|
+
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: {
|
|
15316
15519
|
'pds-multiselect__label': true,
|
|
15317
15520
|
'visually-hidden': this.hideLabel,
|
|
15318
|
-
} }, this.label)), hAsync("div", { key: '
|
|
15521
|
+
} }, 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: {
|
|
15319
15522
|
'pds-multiselect__trigger': true,
|
|
15320
15523
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
15321
15524
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -15331,7 +15534,7 @@ class PdsMultiselect {
|
|
|
15331
15534
|
}, 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: {
|
|
15332
15535
|
'pds-multiselect__trigger-text': true,
|
|
15333
15536
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
15334
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
15537
|
+
} }, 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' })))));
|
|
15335
15538
|
}
|
|
15336
15539
|
static get formAssociated() { return true; }
|
|
15337
15540
|
get el() { return getElement(this); }
|
|
@@ -15358,6 +15561,17 @@ class PdsMultiselect {
|
|
|
15358
15561
|
"label": [1],
|
|
15359
15562
|
"placeholder": [1],
|
|
15360
15563
|
"searchPlaceholder": [1, "search-placeholder"],
|
|
15564
|
+
"searchOptionsLabel": [1, "search-options-label"],
|
|
15565
|
+
"selectedItemsLabel": [1, "selected-items-label"],
|
|
15566
|
+
"optionsLabel": [1, "options-label"],
|
|
15567
|
+
"noOptionsFoundLabel": [1, "no-options-found-label"],
|
|
15568
|
+
"createOptionLabel": [1, "create-option-label"],
|
|
15569
|
+
"createOptionAriaLabel": [1, "create-option-aria-label"],
|
|
15570
|
+
"itemRemovedLabel": [1, "item-removed-label"],
|
|
15571
|
+
"pillRemoveLabel": [1, "pill-remove-label"],
|
|
15572
|
+
"selectedCountLabelOne": [1, "selected-count-label-one"],
|
|
15573
|
+
"selectedCountLabelOther": [1, "selected-count-label-other"],
|
|
15574
|
+
"selectedCountLabels": [1, "selected-count-labels"],
|
|
15361
15575
|
"closePanelOnSelect": [4, "close-panel-on-select"],
|
|
15362
15576
|
"name": [1],
|
|
15363
15577
|
"value": [1040],
|
|
@@ -19625,7 +19839,7 @@ class PdsSwitch {
|
|
|
19625
19839
|
}; }
|
|
19626
19840
|
}
|
|
19627
19841
|
|
|
19628
|
-
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)}`;
|
|
19842
|
+
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)}`;
|
|
19629
19843
|
|
|
19630
19844
|
class PdsTab {
|
|
19631
19845
|
constructor(hostRef) {
|
|
@@ -19636,6 +19850,13 @@ class PdsTab {
|
|
|
19636
19850
|
* @defaultValue false
|
|
19637
19851
|
*/
|
|
19638
19852
|
this.disabled = false;
|
|
19853
|
+
/**
|
|
19854
|
+
* Marks this tab as the current one in navigation mode (`href` set). Applies
|
|
19855
|
+
* the active treatment and `aria-current="page"`. Ignored in panel mode, where
|
|
19856
|
+
* the active tab is derived from the parent's `activeTabName`.
|
|
19857
|
+
* @defaultValue false
|
|
19858
|
+
*/
|
|
19859
|
+
this.active = false;
|
|
19639
19860
|
/**
|
|
19640
19861
|
* Keeps track of the tabpanel selected state, this property is passed by parent component
|
|
19641
19862
|
*/
|
|
@@ -19647,18 +19868,46 @@ class PdsTab {
|
|
|
19647
19868
|
return;
|
|
19648
19869
|
this.pdsTabClick.emit([index, parentComponentId]);
|
|
19649
19870
|
}
|
|
19871
|
+
// An empty string is treated as "no destination" everywhere (isNav fallback,
|
|
19872
|
+
// href attribute, role) so a nav tab never renders `href=""` (which would
|
|
19873
|
+
// navigate to the current page).
|
|
19874
|
+
get hasHref() {
|
|
19875
|
+
return this.href != null && this.href !== '';
|
|
19876
|
+
}
|
|
19877
|
+
get isNav() {
|
|
19878
|
+
var _a;
|
|
19879
|
+
// The parent `pds-tabs` is authoritative when present (via `navMode`), so its
|
|
19880
|
+
// tabs share one mode. Standalone, fall back to a usable `href`.
|
|
19881
|
+
return (_a = this.navMode) !== null && _a !== void 0 ? _a : this.hasHref;
|
|
19882
|
+
}
|
|
19883
|
+
get isActive() {
|
|
19884
|
+
// Navigation mode is server-driven via `active`; panel mode is parent-driven
|
|
19885
|
+
// via `selected` (from `activeTabName`).
|
|
19886
|
+
return this.isNav ? this.active : this.selected;
|
|
19887
|
+
}
|
|
19650
19888
|
classNames() {
|
|
19651
19889
|
const classes = [
|
|
19652
19890
|
'pds-tab',
|
|
19653
|
-
this.
|
|
19891
|
+
this.isActive && 'is-active',
|
|
19654
19892
|
this.disabled && 'is-disabled',
|
|
19655
19893
|
];
|
|
19656
19894
|
return classes.filter(Boolean).join(' ');
|
|
19657
19895
|
}
|
|
19658
19896
|
render() {
|
|
19659
|
-
const availabilityTabEdgeInlineStart = (hAsync("span", {
|
|
19660
|
-
const availabilityTabEdgeInlineEnd = (hAsync("span", {
|
|
19661
|
-
|
|
19897
|
+
const availabilityTabEdgeInlineStart = (hAsync("span", { class: "pds-tab-edge", role: "presentation" }));
|
|
19898
|
+
const availabilityTabEdgeInlineEnd = (hAsync("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
|
|
19899
|
+
const content = (hAsync(Fragment, null, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { class: "pds-tab__content" }, hAsync("slot", null))));
|
|
19900
|
+
// Navigation mode: a real anchor, so keyboard activation and navigation are
|
|
19901
|
+
// native (and Turbo-driven when framed) with no controller — and the current
|
|
19902
|
+
// item carries `aria-current="page"` rather than `role="tab"`/`aria-selected`.
|
|
19903
|
+
if (this.isNav) {
|
|
19904
|
+
return (hAsync(Host, { variant: this.variant, slot: "tabs", index: this.index }, hAsync("a", { href: this.disabled || !this.hasHref ? undefined : this.href,
|
|
19905
|
+
// An anchor without an href (disabled, or forced into nav mode with no
|
|
19906
|
+
// usable href) loses its implicit link role; restore it explicitly so
|
|
19907
|
+
// assistive tech still announces the item rather than as plain text.
|
|
19908
|
+
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)));
|
|
19909
|
+
}
|
|
19910
|
+
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)));
|
|
19662
19911
|
}
|
|
19663
19912
|
get el() { return getElement(this); }
|
|
19664
19913
|
static get style() { return pdsTabCss(); }
|
|
@@ -19667,11 +19916,17 @@ class PdsTab {
|
|
|
19667
19916
|
"$tagName$": "pds-tab",
|
|
19668
19917
|
"$members$": {
|
|
19669
19918
|
"disabled": [4],
|
|
19919
|
+
"href": [1],
|
|
19920
|
+
"active": [4],
|
|
19921
|
+
"target": [1],
|
|
19922
|
+
"turboFrame": [1, "turbo-frame"],
|
|
19923
|
+
"turboAction": [1, "turbo-action"],
|
|
19670
19924
|
"name": [1],
|
|
19671
19925
|
"parentComponentId": [1, "parent-component-id"],
|
|
19672
19926
|
"variant": [1],
|
|
19673
19927
|
"index": [2],
|
|
19674
|
-
"selected": [4]
|
|
19928
|
+
"selected": [4],
|
|
19929
|
+
"navMode": [4, "nav-mode"]
|
|
19675
19930
|
},
|
|
19676
19931
|
"$listeners$": undefined,
|
|
19677
19932
|
"$lazyBundleId$": "-",
|
|
@@ -20587,7 +20842,7 @@ class PdsTableRow {
|
|
|
20587
20842
|
}; }
|
|
20588
20843
|
}
|
|
20589
20844
|
|
|
20590
|
-
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}`;
|
|
20845
|
+
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}`;
|
|
20591
20846
|
|
|
20592
20847
|
class PdsTabpanel {
|
|
20593
20848
|
constructor(hostRef) {
|
|
@@ -20597,9 +20852,14 @@ class PdsTabpanel {
|
|
|
20597
20852
|
*/
|
|
20598
20853
|
/** @internal */
|
|
20599
20854
|
this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
|
|
20855
|
+
/**
|
|
20856
|
+
* Keeps track of the parent `stretch` state so the active panel can fill height, this property is passed by parent component
|
|
20857
|
+
*/
|
|
20858
|
+
/** @internal */
|
|
20859
|
+
this.stretch = false;
|
|
20600
20860
|
}
|
|
20601
20861
|
render() {
|
|
20602
|
-
return (hAsync(Host, { key: '
|
|
20862
|
+
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' }))));
|
|
20603
20863
|
}
|
|
20604
20864
|
get el() { return getElement(this); }
|
|
20605
20865
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -20610,7 +20870,8 @@ class PdsTabpanel {
|
|
|
20610
20870
|
"name": [1],
|
|
20611
20871
|
"parentComponentId": [1, "parent-component-id"],
|
|
20612
20872
|
"variant": [1],
|
|
20613
|
-
"selected": [1028]
|
|
20873
|
+
"selected": [1028],
|
|
20874
|
+
"stretch": [4]
|
|
20614
20875
|
},
|
|
20615
20876
|
"$listeners$": undefined,
|
|
20616
20877
|
"$lazyBundleId$": "-",
|
|
@@ -20618,7 +20879,7 @@ class PdsTabpanel {
|
|
|
20618
20879
|
}; }
|
|
20619
20880
|
}
|
|
20620
20881
|
|
|
20621
|
-
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)}`;
|
|
20882
|
+
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)}`;
|
|
20622
20883
|
|
|
20623
20884
|
/**
|
|
20624
20885
|
* @slot tabs - Content is placed within the `div[role="tablist"]` element as children
|
|
@@ -20628,6 +20889,25 @@ const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dim
|
|
|
20628
20889
|
class PdsTabs {
|
|
20629
20890
|
constructor(hostRef) {
|
|
20630
20891
|
registerInstance(this, hostRef);
|
|
20892
|
+
/**
|
|
20893
|
+
* Adds a divider rule beneath the tab list.
|
|
20894
|
+
* @defaultValue false
|
|
20895
|
+
*/
|
|
20896
|
+
this.divider = false;
|
|
20897
|
+
/**
|
|
20898
|
+
* Stretches the component so the active tab panel fills the remaining height.
|
|
20899
|
+
* Requires the component to have a constrained height (e.g. a flex parent).
|
|
20900
|
+
* @defaultValue false
|
|
20901
|
+
*/
|
|
20902
|
+
this.stretch = false;
|
|
20903
|
+
/**
|
|
20904
|
+
* Renders the tab strip as navigation instead of an in-page panel switcher: each
|
|
20905
|
+
* `pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`
|
|
20906
|
+
* on the `active` tab) rather than a `role="tab"` button over a `pds-tabpanel`.
|
|
20907
|
+
* Give every `pds-tab` an `href` and omit `pds-tabpanel`s.
|
|
20908
|
+
* @defaultValue false
|
|
20909
|
+
*/
|
|
20910
|
+
this.nav = false;
|
|
20631
20911
|
}
|
|
20632
20912
|
tabClickHandler(event) {
|
|
20633
20913
|
if (this.componentId === event.detail[1]) {
|
|
@@ -20636,6 +20916,10 @@ class PdsTabs {
|
|
|
20636
20916
|
}
|
|
20637
20917
|
}
|
|
20638
20918
|
handleKeyDown(ev) {
|
|
20919
|
+
// Navigation mode uses real links: Tab moves focus, Enter follows the href.
|
|
20920
|
+
// The roving/arrow model is a panel-mode (role=tab) concern only.
|
|
20921
|
+
if (this.isNav)
|
|
20922
|
+
return;
|
|
20639
20923
|
const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
|
|
20640
20924
|
// Only handle keyboard navigation if the event originated from a tab button
|
|
20641
20925
|
// that belongs to THIS tabs component
|
|
@@ -20648,6 +20932,32 @@ class PdsTabs {
|
|
|
20648
20932
|
this.moveActiveTab(ev.key);
|
|
20649
20933
|
}
|
|
20650
20934
|
}
|
|
20935
|
+
// Navigation mode is an explicit, single source of truth: `nav` drives both the
|
|
20936
|
+
// container (<nav> of links vs role=tablist of buttons) and every child tab (via
|
|
20937
|
+
// `navMode`), so the tabs present when the strip initializes can't mix the two.
|
|
20938
|
+
// (Child discovery is load-time only, like `variant`/`id`; tabs added after load
|
|
20939
|
+
// aren't managed.)
|
|
20940
|
+
get isNav() {
|
|
20941
|
+
return !!this.nav;
|
|
20942
|
+
}
|
|
20943
|
+
// `nav` and per-tab `href` should agree. Warn on the two authoring mistakes
|
|
20944
|
+
// rather than silently rendering a link with no destination, or ignoring an href.
|
|
20945
|
+
warnOnNavConfig() {
|
|
20946
|
+
var _a;
|
|
20947
|
+
if (!((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length))
|
|
20948
|
+
return;
|
|
20949
|
+
// An empty `href=""` is not a usable destination, so it counts as missing.
|
|
20950
|
+
const withHref = this.tabs.filter((tab) => {
|
|
20951
|
+
const href = tab.getAttribute('href');
|
|
20952
|
+
return href != null && href !== '';
|
|
20953
|
+
}).length;
|
|
20954
|
+
if (this.nav && withHref < this.tabs.length) {
|
|
20955
|
+
console.warn('pds-tabs: `nav` is set, so every pds-tab needs an `href`.');
|
|
20956
|
+
}
|
|
20957
|
+
else if (!this.nav && withHref > 0) {
|
|
20958
|
+
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.');
|
|
20959
|
+
}
|
|
20960
|
+
}
|
|
20651
20961
|
moveActiveTab(key) {
|
|
20652
20962
|
const firstTabNumber = 0;
|
|
20653
20963
|
const lastTabNumber = this.tabs.length - 1;
|
|
@@ -20686,13 +20996,25 @@ class PdsTabs {
|
|
|
20686
20996
|
child['index'] = index;
|
|
20687
20997
|
}
|
|
20688
20998
|
passPropsToChildren() {
|
|
20999
|
+
var _a;
|
|
21000
|
+
// Panel mode needs a selected tab so the tablist stays keyboard-reachable
|
|
21001
|
+
// (an all-unselected tablist has every button at tabindex="-1"). Default to
|
|
21002
|
+
// the first ENABLED tab when the consumer omits `activeTabName` — a disabled
|
|
21003
|
+
// tab is itself tabindex="-1", so selecting it would recreate the trap. Nav
|
|
21004
|
+
// mode has no roving/selection, so it's left unset there.
|
|
21005
|
+
if (!this.nav && this.activeTabName == null && this.tabs.length) {
|
|
21006
|
+
const firstEnabled = (_a = this.tabs.find((tab) => !tab.disabled)) !== null && _a !== void 0 ? _a : this.tabs[0];
|
|
21007
|
+
this.activeTabName = firstEnabled.name;
|
|
21008
|
+
}
|
|
20689
21009
|
this.tabs.forEach((child, index) => {
|
|
20690
21010
|
if (this.activeTabName === child.name)
|
|
20691
21011
|
this.activeTabIndex = index;
|
|
20692
21012
|
this.propGeneration(child, index);
|
|
21013
|
+
child.navMode = this.nav;
|
|
20693
21014
|
});
|
|
20694
21015
|
this.tabPanels.forEach((child) => {
|
|
20695
21016
|
this.propGeneration(child);
|
|
21017
|
+
child.stretch = this.stretch;
|
|
20696
21018
|
});
|
|
20697
21019
|
}
|
|
20698
21020
|
classNames() {
|
|
@@ -20701,17 +21023,27 @@ class PdsTabs {
|
|
|
20701
21023
|
const variantClassName = `pds-tabs--${this.variant}`;
|
|
20702
21024
|
className += ' ' + variantClassName;
|
|
20703
21025
|
}
|
|
21026
|
+
if (this.divider) {
|
|
21027
|
+
className += ' pds-tabs--divider';
|
|
21028
|
+
}
|
|
21029
|
+
if (this.stretch) {
|
|
21030
|
+
className += ' pds-tabs--stretch';
|
|
21031
|
+
}
|
|
20704
21032
|
return className;
|
|
20705
21033
|
}
|
|
20706
21034
|
;
|
|
20707
21035
|
componentWillLoad() {
|
|
20708
21036
|
this.findAllChildren();
|
|
21037
|
+
this.warnOnNavConfig();
|
|
20709
21038
|
}
|
|
20710
21039
|
componentWillRender() {
|
|
20711
21040
|
this.passPropsToChildren();
|
|
20712
21041
|
}
|
|
20713
21042
|
render() {
|
|
20714
|
-
|
|
21043
|
+
// Navigation mode: a <nav> landmark of links (aria-current marks the current
|
|
21044
|
+
// page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
|
|
21045
|
+
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" })));
|
|
21046
|
+
return (hAsync(Host, { key: '97bb6d788bd7bdf393b46eaecea612d9b0c9dee4', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: '252855bfa496bc3e04fbe6dc0bcb7597c7360407', name: "tabpanels" })));
|
|
20715
21047
|
}
|
|
20716
21048
|
get el() { return getElement(this); }
|
|
20717
21049
|
static get style() { return pdsTabsCss(); }
|
|
@@ -20722,6 +21054,9 @@ class PdsTabs {
|
|
|
20722
21054
|
"tablistLabel": [1, "tablist-label"],
|
|
20723
21055
|
"componentId": [1, "component-id"],
|
|
20724
21056
|
"variant": [1],
|
|
21057
|
+
"divider": [4],
|
|
21058
|
+
"stretch": [4],
|
|
21059
|
+
"nav": [4],
|
|
20725
21060
|
"activeTabName": [1025, "active-tab-name"],
|
|
20726
21061
|
"activeTabIndex": [1026, "active-tab-index"]
|
|
20727
21062
|
},
|
|
@@ -20834,7 +21169,7 @@ class PdsText {
|
|
|
20834
21169
|
? `pds-text--decoration-${this.decoration}`
|
|
20835
21170
|
: ''}
|
|
20836
21171
|
`;
|
|
20837
|
-
return (hAsync(Tag, { key: '
|
|
21172
|
+
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' })));
|
|
20838
21173
|
}
|
|
20839
21174
|
get el() { return getElement(this); }
|
|
20840
21175
|
static get watchers() { return {
|
|
@@ -20918,6 +21253,12 @@ class PdsTextarea {
|
|
|
20918
21253
|
* If true, the textarea has action content in the label area
|
|
20919
21254
|
*/
|
|
20920
21255
|
this.hasAction = false;
|
|
21256
|
+
/**
|
|
21257
|
+
* Template for the character-counter's accessible label. Pass a translated
|
|
21258
|
+
* string to localize it; `{current}` and `{max}` are interpolated.
|
|
21259
|
+
* @defaultValue '{current} of {max} characters'
|
|
21260
|
+
*/
|
|
21261
|
+
this.characterCountLabel = '{current} of {max} characters';
|
|
20921
21262
|
this.onBlur = (ev) => {
|
|
20922
21263
|
this.hasFocus = false;
|
|
20923
21264
|
if (this.focusedValue !== this.value) {
|
|
@@ -21115,7 +21456,7 @@ class PdsTextarea {
|
|
|
21115
21456
|
return null;
|
|
21116
21457
|
}
|
|
21117
21458
|
const currentLength = this.getValue().length;
|
|
21118
|
-
return (hAsync("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label":
|
|
21459
|
+
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));
|
|
21119
21460
|
}
|
|
21120
21461
|
renderAction() {
|
|
21121
21462
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
@@ -21169,10 +21510,10 @@ class PdsTextarea {
|
|
|
21169
21510
|
}
|
|
21170
21511
|
render() {
|
|
21171
21512
|
const value = this.getValue();
|
|
21172
|
-
return (hAsync(Host, { key: '
|
|
21173
|
-
hAsync("div", { key: '
|
|
21174
|
-
hAsync("p", { key: '
|
|
21175
|
-
hAsync("p", { key: '
|
|
21513
|
+
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 &&
|
|
21514
|
+
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 &&
|
|
21515
|
+
hAsync("p", { key: 'b5229a6ef0b2c4ee5dcb820ce2b9bbf6334adef8', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
21516
|
+
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))));
|
|
21176
21517
|
}
|
|
21177
21518
|
static get formAssociated() { return true; }
|
|
21178
21519
|
get el() { return getElement(this); }
|
|
@@ -21209,6 +21550,7 @@ class PdsTextarea {
|
|
|
21209
21550
|
"maxLength": [514, "max-length"],
|
|
21210
21551
|
"highlight": [516],
|
|
21211
21552
|
"value": [1025],
|
|
21553
|
+
"characterCountLabel": [1, "character-count-label"],
|
|
21212
21554
|
"hasFocus": [32],
|
|
21213
21555
|
"hasAction": [32],
|
|
21214
21556
|
"setFocus": [64]
|
|
@@ -21250,6 +21592,12 @@ class PdsToast {
|
|
|
21250
21592
|
* @default 'default'
|
|
21251
21593
|
*/
|
|
21252
21594
|
this.type = 'default';
|
|
21595
|
+
/**
|
|
21596
|
+
* Accessible label for the dismiss button. Pass a translated string to
|
|
21597
|
+
* localize it; defaults to English.
|
|
21598
|
+
* @defaultValue 'Dismiss message'
|
|
21599
|
+
*/
|
|
21600
|
+
this.dismissLabel = 'Dismiss message';
|
|
21253
21601
|
/**
|
|
21254
21602
|
* Whether the toast is currently visible.
|
|
21255
21603
|
*/
|
|
@@ -21339,13 +21687,13 @@ class PdsToast {
|
|
|
21339
21687
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
21340
21688
|
}
|
|
21341
21689
|
render() {
|
|
21342
|
-
return (hAsync(Host, { key: '
|
|
21690
|
+
return (hAsync(Host, { key: '87c9b15656a2765eb9e722c85dba5c5edbe07c42', hidden: !this.isVisible }, hAsync("div", { key: 'bd8b26ef0c33b96603313bce74505953d8fe7410', class: {
|
|
21343
21691
|
'pds-toast': true,
|
|
21344
21692
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
21345
21693
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
21346
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
21694
|
+
}, 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: () => {
|
|
21347
21695
|
this.dismiss();
|
|
21348
|
-
}, "aria-label":
|
|
21696
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'dac8f2099b2ab8a68d208aac288d48019df6d7e7', name: "remove" }))))));
|
|
21349
21697
|
}
|
|
21350
21698
|
get el() { return getElement(this); }
|
|
21351
21699
|
static get watchers() { return {
|
|
@@ -21363,6 +21711,7 @@ class PdsToast {
|
|
|
21363
21711
|
"duration": [2],
|
|
21364
21712
|
"icon": [1],
|
|
21365
21713
|
"type": [1],
|
|
21714
|
+
"dismissLabel": [1, "dismiss-label"],
|
|
21366
21715
|
"isVisible": [32],
|
|
21367
21716
|
"isAnimatingOut": [32],
|
|
21368
21717
|
"dismiss": [64]
|
|
@@ -21688,9 +22037,9 @@ class PdsTooltip {
|
|
|
21688
22037
|
}
|
|
21689
22038
|
render() {
|
|
21690
22039
|
const hostId = this.componentId || undefined;
|
|
21691
|
-
return (hAsync(Host, { key: '
|
|
22040
|
+
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,
|
|
21692
22041
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
21693
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
22042
|
+
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" }))));
|
|
21694
22043
|
}
|
|
21695
22044
|
get el() { return getElement(this); }
|
|
21696
22045
|
static get watchers() { return {
|