@xplortech/apollo-core 3.1.0 → 3.2.1
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/.typings/apollo-components.html-data.json +120 -14
- package/build/components/avatar.css +1 -1
- package/build/components/data-card.css +1 -1
- package/build/components/dropdown.css +1 -1
- package/build/components/input-time.css +1 -1
- package/build/components/large-card.css +1 -1
- package/build/components/list-item.css +1 -1
- package/build/components/modal.css +1 -1
- package/build/components/popover.css +1 -1
- package/build/components/side-nav.css +1 -1
- package/build/components/spotlight.css +1 -1
- package/build/components/table-cell-base.css +1 -0
- package/build/components/table-cell.css +1 -0
- package/build/components/table-footer-cell.css +1 -1
- package/build/components/table-header-cell.css +1 -1
- package/build/components/table.css +1 -1
- package/build/components/tag.css +1 -1
- package/build/components/toast.css +1 -1
- package/build/components/toggle.css +1 -1
- package/build/components/toolbar.css +1 -1
- package/build/components/tooltip.css +1 -1
- package/build/components/top-nav.css +1 -1
- package/build/components-manifest.json +19 -3
- package/build/core.css +1 -1
- package/build/style.css +1 -1
- package/build/variables/apollo.css +4 -0
- package/build/variables/field-edge.css +4 -0
- package/build/vendor/flatpickr.css +1 -1
- package/dist/apollo-core/apollo-core.css +1 -1
- package/dist/apollo-core/apollo-core.esm.js +1 -1
- package/dist/apollo-core/p-045a4538.entry.js +1 -0
- package/dist/apollo-core/{p-d443291f.entry.js → p-050a8bf2.entry.js} +1 -1
- package/dist/apollo-core/p-08767607.entry.js +1 -0
- package/dist/apollo-core/{p-149ddd12.entry.js → p-11914cd4.entry.js} +1 -1
- package/dist/apollo-core/{p-581b702c.entry.js → p-14e86de8.entry.js} +1 -1
- package/dist/apollo-core/p-194c0ccd.entry.js +1 -0
- package/dist/apollo-core/p-1c031055.entry.js +1 -0
- package/dist/apollo-core/p-24f7280a.entry.js +1 -0
- package/dist/apollo-core/{p-47bda204.entry.js → p-24fa8a03.entry.js} +1 -1
- package/dist/apollo-core/{p-91895c40.entry.js → p-2971e2ec.entry.js} +1 -1
- package/dist/apollo-core/{p-0958c719.entry.js → p-3417c1ce.entry.js} +1 -1
- package/dist/apollo-core/p-3713cd77.entry.js +1 -0
- package/dist/apollo-core/p-386851a2.entry.js +1 -0
- package/dist/apollo-core/p-3cd1238b.entry.js +1 -0
- package/dist/apollo-core/p-45c872d2.entry.js +1 -0
- package/dist/apollo-core/{p-b45179fb.entry.js → p-49531864.entry.js} +1 -1
- package/dist/apollo-core/p-4e3c6616.entry.js +1 -0
- package/dist/apollo-core/p-5b9fd96e.entry.js +1 -0
- package/dist/apollo-core/p-5c3be343.entry.js +1 -0
- package/dist/apollo-core/p-5cbf5d42.entry.js +1 -0
- package/dist/apollo-core/p-5ec2b180.entry.js +1 -0
- package/dist/apollo-core/{p-790709c0.entry.js → p-64f5c129.entry.js} +1 -1
- package/dist/apollo-core/{p-28bce81a.entry.js → p-65f6b66c.entry.js} +1 -1
- package/dist/apollo-core/{p-d9070ae5.entry.js → p-715baae0.entry.js} +1 -1
- package/dist/apollo-core/p-72e0455f.entry.js +1 -0
- package/dist/apollo-core/p-7ac7fbc0.entry.js +1 -0
- package/dist/apollo-core/p-7d70e089.entry.js +1 -0
- package/dist/apollo-core/{p-d41b8f46.entry.js → p-7eb02cf3.entry.js} +1 -1
- package/dist/apollo-core/p-7f4463ff.entry.js +1 -0
- package/dist/apollo-core/p-808f3d9c.entry.js +1 -0
- package/dist/apollo-core/p-87582346.entry.js +1 -0
- package/dist/apollo-core/{p-2c995d80.entry.js → p-8f8f4759.entry.js} +1 -1
- package/dist/apollo-core/{p-5d9a593e.entry.js → p-907bc21e.entry.js} +1 -1
- package/dist/apollo-core/p-9905c77c.entry.js +1 -0
- package/dist/apollo-core/{p-54903322.entry.js → p-9d731673.entry.js} +1 -1
- package/dist/apollo-core/{p-2938ab4f.entry.js → p-9feaa8be.entry.js} +1 -1
- package/dist/apollo-core/p-O7gQjVdS.js +1 -0
- package/dist/apollo-core/p-a6ecca68.entry.js +1 -0
- package/dist/apollo-core/p-a789c272.entry.js +1 -0
- package/dist/apollo-core/{p-06a9a27b.entry.js → p-aeb2bcb8.entry.js} +1 -1
- package/dist/apollo-core/p-b3b4678b.entry.js +1 -0
- package/dist/apollo-core/{p-82812126.entry.js → p-b64ed46d.entry.js} +1 -1
- package/dist/apollo-core/{p-0368a1df.entry.js → p-bc821e69.entry.js} +1 -1
- package/dist/apollo-core/p-bd493c4a.entry.js +1 -0
- package/dist/apollo-core/p-bdcece21.entry.js +1 -0
- package/dist/apollo-core/{p-cdb5b5c4.entry.js → p-bfb7a83a.entry.js} +1 -1
- package/dist/apollo-core/{p-cdacfcd4.entry.js → p-c22f70f4.entry.js} +1 -1
- package/dist/apollo-core/{p-5730d96c.entry.js → p-c5bc3b2c.entry.js} +1 -1
- package/dist/apollo-core/{p-4ad79534.entry.js → p-ca83003e.entry.js} +1 -1
- package/dist/apollo-core/p-d3230277.entry.js +1 -0
- package/dist/apollo-core/p-d3ada7d0.entry.js +1 -0
- package/dist/apollo-core/{p-d0bc7c45.entry.js → p-d469bf5d.entry.js} +1 -1
- package/dist/apollo-core/p-d7f8ee34.entry.js +1 -0
- package/dist/apollo-core/p-d879c349.entry.js +1 -0
- package/dist/apollo-core/{p-2139f9f6.entry.js → p-df257cbf.entry.js} +1 -1
- package/dist/apollo-core/p-e09d8beb.entry.js +1 -0
- package/dist/apollo-core/p-e4d50301.entry.js +1 -0
- package/dist/apollo-core/{p-f3a2c79b.entry.js → p-ea9cdd65.entry.js} +1 -1
- package/dist/apollo-core/{p-ca4652b3.entry.js → p-eba654a3.entry.js} +1 -1
- package/dist/apollo-core/{p-4a2323b3.entry.js → p-ee68bed6.entry.js} +1 -1
- package/dist/apollo-core/{p-abdf199b.entry.js → p-f384a990.entry.js} +1 -1
- package/dist/apollo-core/{p-4d4acd1f.entry.js → p-f579e4b0.entry.js} +1 -1
- package/dist/apollo-core/{p-d724c419.entry.js → p-fcb17ff9.entry.js} +1 -1
- package/dist/apollo-core/{p-e2890eb1.entry.js → p-ff16f574.entry.js} +1 -1
- package/dist/cjs/apollo-core.cjs.js +1 -1
- package/dist/cjs/index-3cBvw409.js +8 -12
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/table-internal-DssCrBs_.js +67 -0
- package/dist/cjs/xpl-accordion.cjs.entry.js +2 -2
- package/dist/cjs/xpl-application-shell.cjs.entry.js +1 -1
- package/dist/cjs/xpl-avatar_3.cjs.entry.js +4 -4
- package/dist/cjs/xpl-backdrop.cjs.entry.js +1 -1
- package/dist/cjs/xpl-badge.cjs.entry.js +1 -1
- package/dist/cjs/xpl-banner.cjs.entry.js +2 -2
- package/dist/cjs/xpl-breadcrumb-item.cjs.entry.js +1 -1
- package/dist/cjs/xpl-breadcrumbs.cjs.entry.js +1 -1
- package/dist/cjs/xpl-button-row.cjs.entry.js +1 -1
- package/dist/cjs/xpl-button.cjs.entry.js +1 -1
- package/dist/cjs/xpl-calendar.cjs.entry.js +1 -1
- package/dist/cjs/xpl-checkbox.cjs.entry.js +3 -3
- package/dist/cjs/xpl-choicelist.cjs.entry.js +1 -1
- package/dist/cjs/xpl-content-area.cjs.entry.js +1 -1
- package/dist/cjs/xpl-dashboard.cjs.entry.js +1 -1
- package/dist/cjs/xpl-data-card.cjs.entry.js +2 -2
- package/dist/cjs/xpl-dropdown_4.cjs.entry.js +8 -8
- package/dist/cjs/xpl-dynamic-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/xpl-dynamic-table-row.cjs.entry.js +2 -2
- package/dist/cjs/xpl-dynamic-table.cjs.entry.js +2 -2
- package/dist/cjs/xpl-grid-item.cjs.entry.js +1 -1
- package/dist/cjs/xpl-grid.cjs.entry.js +1 -1
- package/dist/cjs/xpl-header-accordion.cjs.entry.js +1 -1
- package/dist/cjs/xpl-icon.cjs.entry.js +2 -2
- package/dist/cjs/xpl-input-color.cjs.entry.js +8 -8
- package/dist/cjs/xpl-input-phone.cjs.entry.js +5 -5
- package/dist/cjs/xpl-input-time.cjs.entry.js +2 -2
- package/dist/cjs/xpl-input_4.cjs.entry.js +10 -10
- package/dist/cjs/xpl-large-card.cjs.entry.js +1 -1
- package/dist/cjs/xpl-list.cjs.entry.js +2 -2
- package/dist/cjs/xpl-main-nav.cjs.entry.js +1 -1
- package/dist/cjs/xpl-modal.cjs.entry.js +1 -1
- package/dist/cjs/xpl-nav-header-menu.cjs.entry.js +2 -2
- package/dist/cjs/xpl-nav-item.cjs.entry.js +2 -2
- package/dist/cjs/xpl-pagination.cjs.entry.js +4 -4
- package/dist/cjs/xpl-panel.cjs.entry.js +2 -2
- package/dist/cjs/xpl-popover.cjs.entry.js +4 -4
- package/dist/cjs/xpl-progress-bar.cjs.entry.js +2 -2
- package/dist/cjs/xpl-progress-indicator.cjs.entry.js +1 -1
- package/dist/cjs/xpl-secondary-nav.cjs.entry.js +1 -1
- package/dist/cjs/xpl-select_2.cjs.entry.js +9 -9
- package/dist/cjs/xpl-side-nav-header-item.cjs.entry.js +2 -2
- package/dist/cjs/xpl-side-nav-item.cjs.entry.js +2 -2
- package/dist/cjs/xpl-side-nav-section.cjs.entry.js +5 -5
- package/dist/cjs/xpl-side-nav.cjs.entry.js +2 -2
- package/dist/cjs/xpl-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/xpl-slideout.cjs.entry.js +1 -1
- package/dist/cjs/xpl-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/xpl-table-body.cjs.entry.js +1 -1
- package/dist/cjs/xpl-table-cell_3.cjs.entry.js +228 -0
- package/dist/cjs/xpl-table-footer.cjs.entry.js +1 -1
- package/dist/cjs/xpl-table-header.cjs.entry.js +1 -1
- package/dist/cjs/xpl-table-row.cjs.entry.js +43 -2
- package/dist/cjs/xpl-table.cjs.entry.js +1204 -80
- package/dist/cjs/xpl-tabs.cjs.entry.js +5 -5
- package/dist/cjs/xpl-toast.cjs.entry.js +2 -2
- package/dist/cjs/xpl-toggle.cjs.entry.js +3 -3
- package/dist/cjs/xpl-toolbar.cjs.entry.js +2 -2
- package/dist/cjs/xpl-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/xpl-top-nav-item.cjs.entry.js +2 -2
- package/dist/cjs/xpl-top-nav-menu.cjs.entry.js +2 -2
- package/dist/cjs/xpl-top-nav.cjs.entry.js +5 -5
- package/dist/cjs/xpl-utility-bar.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/xpl-accordion/xpl-accordion.js +2 -2
- package/dist/collection/components/xpl-application-shell/xpl-application-shell.js +1 -1
- package/dist/collection/components/xpl-backdrop/xpl-backdrop.js +1 -1
- package/dist/collection/components/xpl-badge/xpl-badge.js +1 -1
- package/dist/collection/components/xpl-banner/xpl-banner.js +2 -2
- package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js +1 -1
- package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js +1 -1
- package/dist/collection/components/xpl-button/xpl-button.js +1 -1
- package/dist/collection/components/xpl-button-row/xpl-button-row.js +1 -1
- package/dist/collection/components/xpl-calendar/xpl-calendar.js +1 -1
- package/dist/collection/components/xpl-checkbox/xpl-checkbox.js +3 -3
- package/dist/collection/components/xpl-choicelist/xpl-choicelist.js +1 -1
- package/dist/collection/components/xpl-content-area/xpl-content-area.js +1 -1
- package/dist/collection/components/xpl-dashboard/xpl-dashboard.js +1 -1
- package/dist/collection/components/xpl-data-card/xpl-data-card.js +2 -2
- package/dist/collection/components/xpl-divider/xpl-divider.js +1 -1
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js +1 -1
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js +1 -1
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js +2 -2
- package/dist/collection/components/xpl-dropdown/xpl-dropdown.js +4 -4
- package/dist/collection/components/xpl-dynamic-table/xpl-dynamic-table.js +2 -2
- package/dist/collection/components/xpl-dynamic-table-cell/xpl-dynamic-table-cell.js +2 -2
- package/dist/collection/components/xpl-dynamic-table-row/xpl-dynamic-table-row.js +2 -2
- package/dist/collection/components/xpl-grid/xpl-grid.js +1 -1
- package/dist/collection/components/xpl-grid-item/xpl-grid-item.js +1 -1
- package/dist/collection/components/xpl-header-accordion/xpl-header-accordion.js +1 -1
- package/dist/collection/components/xpl-icon/xpl-icon.js +2 -2
- package/dist/collection/components/xpl-input/xpl-input-color/xpl-input-color.js +8 -8
- package/dist/collection/components/xpl-input/xpl-input-date/xpl-input-date.js +3 -3
- package/dist/collection/components/xpl-input/xpl-input-file/xpl-input-file.js +4 -4
- package/dist/collection/components/xpl-input/xpl-input-phone/xpl-input-phone.js +5 -5
- package/dist/collection/components/xpl-input/xpl-input-search/xpl-input-search.js +1 -1
- package/dist/collection/components/xpl-input/xpl-input-time/xpl-input-time.js +2 -2
- package/dist/collection/components/xpl-input/xpl-input.js +2 -2
- package/dist/collection/components/xpl-large-card/xpl-large-card.js +1 -1
- package/dist/collection/components/xpl-list/xpl-list.js +2 -2
- package/dist/collection/components/xpl-main-nav/xpl-main-nav.js +1 -1
- package/dist/collection/components/xpl-modal/xpl-modal.js +1 -1
- package/dist/collection/components/xpl-nav-item/xpl-nav-item.js +2 -2
- package/dist/collection/components/xpl-pagination/xpl-pagination.js +4 -4
- package/dist/collection/components/xpl-panel/xpl-panel.js +2 -2
- package/dist/collection/components/xpl-popover/xpl-popover.js +4 -4
- package/dist/collection/components/xpl-progress-bar/xpl-progress-bar.js +2 -2
- package/dist/collection/components/xpl-progress-indicator/xpl-progress-indicator.js +1 -1
- package/dist/collection/components/xpl-radio/xpl-radio.js +3 -3
- package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js +1 -1
- package/dist/collection/components/xpl-select/xpl-select.js +7 -7
- package/dist/collection/components/xpl-side-nav/xpl-side-nav-header-item/xpl-side-nav-header-item.js +2 -2
- package/dist/collection/components/xpl-side-nav/xpl-side-nav-item/xpl-side-nav-item.js +2 -2
- package/dist/collection/components/xpl-side-nav/xpl-side-nav-section/xpl-side-nav-section.js +5 -5
- package/dist/collection/components/xpl-side-nav/xpl-side-nav.js +2 -2
- package/dist/collection/components/xpl-skeleton/xpl-skeleton.js +1 -1
- package/dist/collection/components/xpl-slideout/xpl-slideout.js +1 -1
- package/dist/collection/components/xpl-tab-panel/xpl-tab-panel.js +2 -2
- package/dist/collection/components/xpl-table/utils/move-row-dom.js +50 -0
- package/dist/collection/components/xpl-table/utils/table-internal.js +57 -0
- package/dist/collection/components/xpl-table/xpl-table-body/xpl-table-body.js +1 -1
- package/dist/collection/components/xpl-table/xpl-table-cell/xpl-table-cell.js +167 -0
- package/dist/collection/components/xpl-table/xpl-table-footer/xpl-table-footer.js +1 -1
- package/dist/collection/components/xpl-table/xpl-table-footer-cell/xpl-table-footer-cell.js +2 -2
- package/dist/collection/components/xpl-table/xpl-table-header-cell/xpl-table-header-cell.js +402 -0
- package/dist/collection/components/xpl-table/xpl-table-row/xpl-table-row.js +44 -2
- package/dist/collection/components/xpl-table/xpl-table.js +1427 -116
- package/dist/collection/components/xpl-table-header/xpl-table-header.js +1 -1
- package/dist/collection/components/xpl-tabs/xpl-tabs.js +5 -5
- package/dist/collection/components/xpl-tag/xpl-tag.js +2 -2
- package/dist/collection/components/xpl-toast/xpl-toast.js +2 -2
- package/dist/collection/components/xpl-toggle/xpl-toggle.js +3 -3
- package/dist/collection/components/xpl-toolbar/xpl-toolbar.js +2 -2
- package/dist/collection/components/xpl-tooltip/xpl-tooltip.js +1 -1
- package/dist/collection/components/xpl-top-nav/xpl-nav-header-menu/xpl-nav-header-menu.js +2 -2
- package/dist/collection/components/xpl-top-nav/xpl-top-nav-item/xpl-top-nav-item.js +2 -2
- package/dist/collection/components/xpl-top-nav/xpl-top-nav-menu/xpl-top-nav-menu.js +2 -2
- package/dist/collection/components/xpl-top-nav/xpl-top-nav.js +5 -5
- package/dist/collection/components/xpl-utility-bar/xpl-utility-bar.js +1 -1
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-oIn1krdu.js → p-1D7CWIJ-.js} +1 -1
- package/dist/components/{p-xtOHikY0.js → p-2cJsJK3-.js} +1 -1
- package/dist/components/{p-DYmvElhR.js → p-8zrW9vEC.js} +1 -1
- package/dist/components/p-B56GeUtW.js +1 -0
- package/dist/components/p-B6YLKDUX.js +1 -0
- package/dist/components/{p-D--kzomA.js → p-B7aaJikj.js} +1 -1
- package/dist/components/{p-U0JYwf4c.js → p-BOm_p_mz.js} +1 -1
- package/dist/components/p-BZIZSovL.js +1 -0
- package/dist/components/{p-xFsB212F.js → p-Btb2UkLz.js} +1 -1
- package/dist/components/{p-DAb-txW3.js → p-C0AbGd4t.js} +1 -1
- package/dist/components/p-CFXvQqUO.js +1 -0
- package/dist/components/{p-l3EZ-agL.js → p-CQjJIHK6.js} +1 -1
- package/dist/components/{p-Chpgh5SL.js → p-CV5nn1zR.js} +1 -1
- package/dist/components/p-CdRmVtIN.js +1 -0
- package/dist/components/p-CgemLtmL.js +1 -0
- package/dist/components/p-CmbpWpb0.js +1 -0
- package/dist/components/p-CuVYRPvz.js +1 -0
- package/dist/components/{p-JyNpXfDe.js → p-D09sGbzs.js} +1 -1
- package/dist/components/{p-BdpZR4KO.js → p-DTh_zemx.js} +1 -1
- package/dist/components/{p-CiHTfk3E.js → p-DoVubWyd.js} +1 -1
- package/dist/components/p-Dp62sBqX.js +1 -0
- package/dist/components/p-DqgnC_vS.js +1 -0
- package/dist/components/p-DtV4i45B.js +1 -0
- package/dist/components/{p-wIU7KUhA.js → p-ohy3NrgH.js} +1 -1
- package/dist/components/p-rLxtqgsy.js +1 -0
- package/dist/components/xpl-accordion.js +1 -1
- package/dist/components/xpl-application-shell.js +1 -1
- package/dist/components/xpl-avatar.js +1 -1
- package/dist/components/xpl-backdrop.js +1 -1
- package/dist/components/xpl-badge.js +1 -1
- package/dist/components/xpl-banner.js +1 -1
- package/dist/components/xpl-breadcrumb-item.js +1 -1
- package/dist/components/xpl-breadcrumbs.js +1 -1
- package/dist/components/xpl-button-row.js +1 -1
- package/dist/components/xpl-button.js +1 -1
- package/dist/components/xpl-calendar.js +1 -1
- package/dist/components/xpl-checkbox.js +1 -1
- package/dist/components/xpl-choicelist.js +1 -1
- package/dist/components/xpl-content-area.js +1 -1
- package/dist/components/xpl-dashboard.js +1 -1
- package/dist/components/xpl-data-card.js +1 -1
- package/dist/components/xpl-divider.js +1 -1
- package/dist/components/xpl-dropdown-group.js +1 -1
- package/dist/components/xpl-dropdown-heading.js +1 -1
- package/dist/components/xpl-dropdown-option.js +1 -1
- package/dist/components/xpl-dropdown.js +1 -1
- package/dist/components/xpl-dynamic-table-cell.js +1 -1
- package/dist/components/xpl-dynamic-table-row.js +1 -1
- package/dist/components/xpl-dynamic-table.js +1 -1
- package/dist/components/xpl-grid-item.js +1 -1
- package/dist/components/xpl-grid.js +1 -1
- package/dist/components/xpl-header-accordion.js +1 -1
- package/dist/components/xpl-icon.js +1 -1
- package/dist/components/xpl-input-color.js +1 -1
- package/dist/components/xpl-input-date.js +1 -1
- package/dist/components/xpl-input-file.js +1 -1
- package/dist/components/xpl-input-phone.js +1 -1
- package/dist/components/xpl-input-search.js +1 -1
- package/dist/components/xpl-input-time.js +1 -1
- package/dist/components/xpl-input.js +1 -1
- package/dist/components/xpl-large-card.js +1 -1
- package/dist/components/xpl-list-item.js +1 -1
- package/dist/components/xpl-list.js +1 -1
- package/dist/components/xpl-main-nav.js +1 -1
- package/dist/components/xpl-modal.js +1 -1
- package/dist/components/xpl-nav-header-menu.js +1 -1
- package/dist/components/xpl-nav-item.js +1 -1
- package/dist/components/xpl-pagination.js +1 -1
- package/dist/components/xpl-panel.js +1 -1
- package/dist/components/xpl-popover.js +1 -1
- package/dist/components/xpl-progress-bar.js +1 -1
- package/dist/components/xpl-progress-indicator.js +1 -1
- package/dist/components/xpl-radio.js +1 -1
- package/dist/components/xpl-secondary-nav.js +1 -1
- package/dist/components/xpl-select.js +1 -1
- package/dist/components/xpl-side-nav-header-item.js +1 -1
- package/dist/components/xpl-side-nav-item.js +1 -1
- package/dist/components/xpl-side-nav-section.js +1 -1
- package/dist/components/xpl-side-nav.js +1 -1
- package/dist/components/xpl-skeleton.js +1 -1
- package/dist/components/xpl-slideout.js +1 -1
- package/dist/components/xpl-spotlight.js +1 -1
- package/dist/components/xpl-tab-panel.js +1 -1
- package/dist/components/xpl-tab.js +1 -1
- package/dist/components/xpl-table-body.js +1 -1
- package/dist/components/xpl-table-cell.d.ts +11 -0
- package/dist/components/xpl-table-cell.js +1 -0
- package/dist/components/xpl-table-footer-cell.js +1 -1
- package/dist/components/xpl-table-footer.js +1 -1
- package/dist/components/xpl-table-header-cell.js +1 -1
- package/dist/components/xpl-table-header.js +1 -1
- package/dist/components/xpl-table-row.js +1 -1
- package/dist/components/xpl-table.js +1 -1
- package/dist/components/xpl-tabs.js +1 -1
- package/dist/components/xpl-tag.js +1 -1
- package/dist/components/xpl-toast.js +1 -1
- package/dist/components/xpl-toggle.js +1 -1
- package/dist/components/xpl-toolbar.js +1 -1
- package/dist/components/xpl-tooltip.js +1 -1
- package/dist/components/xpl-top-nav-item.js +1 -1
- package/dist/components/xpl-top-nav-menu.js +1 -1
- package/dist/components/xpl-top-nav.js +1 -1
- package/dist/components/xpl-utility-bar.js +1 -1
- package/dist/docs/xpl-avatar/readme.md +1 -1
- package/dist/docs/xpl-checkbox/readme.md +1 -3
- package/dist/docs/xpl-data-card/readme.md +1 -1
- package/dist/docs/xpl-dynamic-table/readme.md +4 -1
- package/dist/docs/xpl-dynamic-table-cell/readme.md +2 -0
- package/dist/docs/xpl-dynamic-table-row/readme.md +2 -0
- package/dist/docs/xpl-icon/readme.md +1 -1
- package/dist/docs/xpl-input/xpl-input-time/readme.md +1 -1
- package/dist/docs/xpl-large-card/readme.md +1 -1
- package/dist/docs/xpl-modal/readme.md +2 -2
- package/dist/docs/xpl-popover/readme.md +1 -2
- package/dist/docs/xpl-slideout/readme.md +1 -1
- package/dist/docs/xpl-spotlight/readme.md +1 -0
- package/dist/docs/xpl-table/readme.md +178 -20
- package/dist/docs/xpl-table/xpl-table-body/readme.md +4 -4
- package/dist/docs/xpl-table/xpl-table-cell/readme.md +53 -0
- package/dist/docs/xpl-table/xpl-table-footer/readme.md +4 -4
- package/dist/docs/xpl-table/xpl-table-footer-cell/readme.md +24 -15
- package/dist/docs/xpl-table/xpl-table-header-cell/readme.md +84 -0
- package/dist/docs/xpl-table/xpl-table-row/readme.md +18 -14
- package/dist/docs/xpl-toast/readme.md +2 -2
- package/dist/docs/xpl-toggle/readme.md +1 -1
- package/dist/docs/xpl-toolbar/readme.md +5 -3
- package/dist/docs/xpl-tooltip/readme.md +1 -2
- package/dist/docs.json +776 -113
- package/dist/esm/apollo-core.js +1 -1
- package/dist/esm/index-ukZKsqqq.js +8 -12
- package/dist/esm/loader.js +1 -1
- package/dist/esm/table-internal-O7gQjVdS.js +59 -0
- package/dist/esm/xpl-accordion.entry.js +2 -2
- package/dist/esm/xpl-application-shell.entry.js +1 -1
- package/dist/esm/xpl-avatar_3.entry.js +4 -4
- package/dist/esm/xpl-backdrop.entry.js +1 -1
- package/dist/esm/xpl-badge.entry.js +1 -1
- package/dist/esm/xpl-banner.entry.js +2 -2
- package/dist/esm/xpl-breadcrumb-item.entry.js +1 -1
- package/dist/esm/xpl-breadcrumbs.entry.js +1 -1
- package/dist/esm/xpl-button-row.entry.js +1 -1
- package/dist/esm/xpl-button.entry.js +1 -1
- package/dist/esm/xpl-calendar.entry.js +1 -1
- package/dist/esm/xpl-checkbox.entry.js +3 -3
- package/dist/esm/xpl-choicelist.entry.js +1 -1
- package/dist/esm/xpl-content-area.entry.js +1 -1
- package/dist/esm/xpl-dashboard.entry.js +1 -1
- package/dist/esm/xpl-data-card.entry.js +2 -2
- package/dist/esm/xpl-dropdown_4.entry.js +8 -8
- package/dist/esm/xpl-dynamic-table-cell.entry.js +2 -2
- package/dist/esm/xpl-dynamic-table-row.entry.js +2 -2
- package/dist/esm/xpl-dynamic-table.entry.js +2 -2
- package/dist/esm/xpl-grid-item.entry.js +1 -1
- package/dist/esm/xpl-grid.entry.js +1 -1
- package/dist/esm/xpl-header-accordion.entry.js +1 -1
- package/dist/esm/xpl-icon.entry.js +2 -2
- package/dist/esm/xpl-input-color.entry.js +8 -8
- package/dist/esm/xpl-input-phone.entry.js +5 -5
- package/dist/esm/xpl-input-time.entry.js +2 -2
- package/dist/esm/xpl-input_4.entry.js +10 -10
- package/dist/esm/xpl-large-card.entry.js +1 -1
- package/dist/esm/xpl-list.entry.js +2 -2
- package/dist/esm/xpl-main-nav.entry.js +1 -1
- package/dist/esm/xpl-modal.entry.js +1 -1
- package/dist/esm/xpl-nav-header-menu.entry.js +2 -2
- package/dist/esm/xpl-nav-item.entry.js +2 -2
- package/dist/esm/xpl-pagination.entry.js +4 -4
- package/dist/esm/xpl-panel.entry.js +2 -2
- package/dist/esm/xpl-popover.entry.js +4 -4
- package/dist/esm/xpl-progress-bar.entry.js +2 -2
- package/dist/esm/xpl-progress-indicator.entry.js +1 -1
- package/dist/esm/xpl-secondary-nav.entry.js +1 -1
- package/dist/esm/xpl-select_2.entry.js +9 -9
- package/dist/esm/xpl-side-nav-header-item.entry.js +2 -2
- package/dist/esm/xpl-side-nav-item.entry.js +2 -2
- package/dist/esm/xpl-side-nav-section.entry.js +5 -5
- package/dist/esm/xpl-side-nav.entry.js +2 -2
- package/dist/esm/xpl-skeleton.entry.js +1 -1
- package/dist/esm/xpl-slideout.entry.js +1 -1
- package/dist/esm/xpl-tab-panel.entry.js +2 -2
- package/dist/esm/xpl-table-body.entry.js +1 -1
- package/dist/esm/xpl-table-cell_3.entry.js +224 -0
- package/dist/esm/xpl-table-footer.entry.js +1 -1
- package/dist/esm/xpl-table-header.entry.js +1 -1
- package/dist/esm/xpl-table-row.entry.js +44 -3
- package/dist/esm/xpl-table.entry.js +1204 -80
- package/dist/esm/xpl-tabs.entry.js +5 -5
- package/dist/esm/xpl-toast.entry.js +2 -2
- package/dist/esm/xpl-toggle.entry.js +3 -3
- package/dist/esm/xpl-toolbar.entry.js +2 -2
- package/dist/esm/xpl-tooltip.entry.js +1 -1
- package/dist/esm/xpl-top-nav-item.entry.js +2 -2
- package/dist/esm/xpl-top-nav-menu.entry.js +2 -2
- package/dist/esm/xpl-top-nav.entry.js +5 -5
- package/dist/esm/xpl-utility-bar.entry.js +1 -1
- package/dist/types/components/xpl-table/utils/move-row-dom.d.ts +3 -0
- package/dist/types/components/xpl-table/utils/table-internal.d.ts +8 -0
- package/dist/types/components/xpl-table/xpl-table-cell/xpl-table-cell.d.ts +11 -0
- package/dist/types/components/xpl-table/xpl-table-header-cell/xpl-table-header-cell.d.ts +33 -0
- package/dist/types/components/xpl-table/xpl-table-row/xpl-table-row.d.ts +7 -0
- package/dist/types/components/xpl-table/xpl-table.d.ts +126 -22
- package/dist/types/components.d.ts +238 -60
- package/hydrate/index.js +1670 -266
- package/hydrate/index.mjs +1670 -266
- package/package.json +7 -7
- package/dist/apollo-core/p-056a99e4.entry.js +0 -1
- package/dist/apollo-core/p-068e3532.entry.js +0 -1
- package/dist/apollo-core/p-0a0a6e43.entry.js +0 -1
- package/dist/apollo-core/p-1a94c2d9.entry.js +0 -1
- package/dist/apollo-core/p-2faa7b9c.entry.js +0 -1
- package/dist/apollo-core/p-30b1b700.entry.js +0 -1
- package/dist/apollo-core/p-32084caf.entry.js +0 -1
- package/dist/apollo-core/p-38586952.entry.js +0 -1
- package/dist/apollo-core/p-50fae269.entry.js +0 -1
- package/dist/apollo-core/p-60cb3cfb.entry.js +0 -1
- package/dist/apollo-core/p-722b145a.entry.js +0 -1
- package/dist/apollo-core/p-75e5bfe0.entry.js +0 -1
- package/dist/apollo-core/p-77fe3cc1.entry.js +0 -1
- package/dist/apollo-core/p-83bb7607.entry.js +0 -1
- package/dist/apollo-core/p-8664d88b.entry.js +0 -1
- package/dist/apollo-core/p-8a925e9d.entry.js +0 -1
- package/dist/apollo-core/p-9064badb.entry.js +0 -1
- package/dist/apollo-core/p-969d5cca.entry.js +0 -1
- package/dist/apollo-core/p-99a79cf4.entry.js +0 -1
- package/dist/apollo-core/p-ae8a5f66.entry.js +0 -1
- package/dist/apollo-core/p-af8ebf49.entry.js +0 -1
- package/dist/apollo-core/p-b29025b2.entry.js +0 -1
- package/dist/apollo-core/p-b5a61076.entry.js +0 -1
- package/dist/apollo-core/p-bf7d8e18.entry.js +0 -1
- package/dist/apollo-core/p-c48e4884.entry.js +0 -1
- package/dist/apollo-core/p-cb5b15c2.entry.js +0 -1
- package/dist/apollo-core/p-cc57f20d.entry.js +0 -1
- package/dist/apollo-core/p-dca48977.entry.js +0 -1
- package/dist/apollo-core/p-e1833287.entry.js +0 -1
- package/dist/apollo-core/p-e2b73b60.entry.js +0 -1
- package/dist/apollo-core/p-e7e445b0.entry.js +0 -1
- package/dist/apollo-core/p-f1c103ff.entry.js +0 -1
- package/dist/apollo-core/p-ffc2f0cf.entry.js +0 -1
- package/dist/cjs/xpl-table-footer-cell.cjs.entry.js +0 -18
- package/dist/cjs/xpl-table-header-cell.cjs.entry.js +0 -59
- package/dist/collection/components/xpl-table-header-cell/xpl-table-header-cell.js +0 -190
- package/dist/components/p-9VnxPQLs.js +0 -1
- package/dist/components/p-B2oLZUDD.js +0 -1
- package/dist/components/p-BYYFsuD3.js +0 -1
- package/dist/components/p-BZtxVB1R.js +0 -1
- package/dist/components/p-CnVGKN63.js +0 -1
- package/dist/components/p-Cz7zDaI4.js +0 -1
- package/dist/components/p-D4rv6CNJ.js +0 -1
- package/dist/components/p-EfW0v54z.js +0 -1
- package/dist/components/p-YG9Jza0y.js +0 -1
- package/dist/docs/xpl-table-header-cell/readme.md +0 -47
- package/dist/esm/xpl-table-footer-cell.entry.js +0 -16
- package/dist/esm/xpl-table-header-cell.entry.js +0 -57
- package/dist/types/components/xpl-table-header-cell/xpl-table-header-cell.d.ts +0 -13
package/hydrate/index.js
CHANGED
|
@@ -4974,14 +4974,14 @@ class Accordion {
|
|
|
4974
4974
|
bordered: `xpl-accordion--border-bordered${this.expanded ? '--expanded' : ''}`,
|
|
4975
4975
|
bottom: `xpl-accordion--border-bottom${this.expanded ? '--expanded' : ''}`,
|
|
4976
4976
|
}[this.borderType];
|
|
4977
|
-
return (hAsync(Host, { key: '
|
|
4977
|
+
return (hAsync(Host, { key: '5b950c90f1d0c1c4ec18a63543e8a3f967e4c345', class: `xpl-accordion ${accordionBorder}` }, hAsync("button", { key: 'd080af79bf979178beadd345259e3555c82d6d11', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, hAsync("header", { key: '31cd09cebdcd16f8581340b720f4f3bf5eb11315', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, hAsync("slot", { key: '42f3de1cbccc2304d60db637879539a607338d9d', name: "heading" }, this.header), hAsync("xpl-icon", { key: 'f7a047102a0e10b60d3ac3d18aa47c2de4409b6e', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), hAsync("div", { key: '284d9e73027bc38acafc4d07355a0c21c7d38ce1', class: "xpl-accordion-description" }, hAsync("slot", { key: 'a7928e0e46a3f5d2274477a576f65330c5600046', name: "description" }, this.description))), hAsync("section", { key: '5d89a5282aa9f63d349196f2b90c2404bc636e47', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
|
|
4978
4978
|
? {
|
|
4979
4979
|
'': '',
|
|
4980
4980
|
none: '',
|
|
4981
4981
|
bordered: 'xpl-accordion-content--shown-bordered',
|
|
4982
4982
|
bottom: 'xpl-accordion-content--shown-border-bottom',
|
|
4983
4983
|
}[this.borderType]
|
|
4984
|
-
: ''}` }, hAsync("slot", { key: '
|
|
4984
|
+
: ''}` }, hAsync("slot", { key: '658018fba352e3d8a3d005890557fa4f5acb3985', name: "content" }))));
|
|
4985
4985
|
}
|
|
4986
4986
|
get el() { return getElement(this); }
|
|
4987
4987
|
static get watchers() { return {
|
|
@@ -5045,7 +5045,7 @@ class ApplicationShell {
|
|
|
5045
5045
|
navClasses += this.navOpen
|
|
5046
5046
|
? ` xpl-application-shell__nav--${this.navWidth}--open`
|
|
5047
5047
|
: ` xpl-application-shell__nav--${this.navWidth}`;
|
|
5048
|
-
return (hAsync(Host, { key: '
|
|
5048
|
+
return (hAsync(Host, { key: '2a5c0529540dc44d79f4744cd77465d097a3cfe9', class: applicationShellClasses }, hAsync("div", { key: '9e7b1e9c302d3188c20792ce5d45c4fd3d981eae', class: navClasses }, hAsync("slot", { key: 'ac3a2e232a4bb296dc97edb46da3a45a9a0143ee', name: "nav" })), hAsync("div", { key: '8a43762388448850e6b70f526ca288e12cfb3a86', class: "xpl-application-shell__subnav" }, hAsync("slot", { key: 'c3753c23cebdc77664c885770f2a7a3afafd2f70', name: "subnav" })), hAsync("div", { key: '17e41ed6c571dc8a11c20034cff373442ed72a47', class: "xpl-application-shell__utility" }, hAsync("slot", { key: '20b62c7529383caf5d52e9f0a7afdfd362136404', name: "utility" })), hAsync("div", { key: '1632f1a97ae50432228040c3788248ff598160f1', class: "xpl-application-shell__content" }, hAsync("slot", { key: '0e3fa6b14b216db3848ec302f755db2f4d9babea', name: "content" })), hAsync("xpl-backdrop", { key: 'd465d3084d1728fd072537ccd1947a154389fb59', onClick: () => this.navToggleHandler(), class: {
|
|
5049
5049
|
'xpl-application-shell__backdrop--open': this.navOpen,
|
|
5050
5050
|
}, relative: true })));
|
|
5051
5051
|
}
|
|
@@ -5249,7 +5249,7 @@ class Backdrop {
|
|
|
5249
5249
|
this.relative = false;
|
|
5250
5250
|
}
|
|
5251
5251
|
render() {
|
|
5252
|
-
return (hAsync(Host, { key: '
|
|
5252
|
+
return (hAsync(Host, { key: '953f17db70815d5bc0b0debb29c4eda2f6f67b0a', class: {
|
|
5253
5253
|
'xpl-backdrop': true,
|
|
5254
5254
|
'xpl-backdrop--fixed': !this.relative,
|
|
5255
5255
|
'xpl-backdrop--relative': this.relative,
|
|
@@ -5295,7 +5295,7 @@ class Badge {
|
|
|
5295
5295
|
[`xpl-badge--size-${this.size}`]: !!this.size,
|
|
5296
5296
|
[`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
|
|
5297
5297
|
};
|
|
5298
|
-
return (hAsync(Host, { key: '
|
|
5298
|
+
return (hAsync(Host, { key: '88ec460410a79a749357fb0fcfce4393f1fbd119' }, hAsync("div", { key: '93dd43a12a7d18a95d6c6d242ac527017736cd38', class: className }, hAsync("span", { key: 'f399c751da8fc51c5a47672c39e1b618d29f1314', class: "xpl-badge__label" }, hAsync("slot", { key: 'f3920fd097e95f0e550eafa40010b0ca3d4202d4' })))));
|
|
5299
5299
|
}
|
|
5300
5300
|
static get cmpMeta() { return {
|
|
5301
5301
|
"$flags$": 260,
|
|
@@ -5373,13 +5373,13 @@ class Banner {
|
|
|
5373
5373
|
const actionState = this.getActionButtonState();
|
|
5374
5374
|
const isHeadingPresent = !!this.heading?.trim();
|
|
5375
5375
|
const isDescPresent = !!this.description?.trim();
|
|
5376
|
-
return (hAsync(Host, { key: '
|
|
5376
|
+
return (hAsync(Host, { key: 'a78a06e2863b01b36e265fdd55bb9d1d77751c88', class: {
|
|
5377
5377
|
'xpl-banner': true,
|
|
5378
5378
|
'xpl-banner--section': this.isSection,
|
|
5379
5379
|
[`xpl-banner--${this.appearance}`]: true,
|
|
5380
5380
|
'xpl-banner--truncate-desc': this.truncateDesc,
|
|
5381
5381
|
'xpl-banner--no-icon': this.isSection && !this.hasIcon,
|
|
5382
|
-
}, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (hAsync("div", { key: '
|
|
5382
|
+
}, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (hAsync("div", { key: '70b99cf6bf217673c1dc80d022a461285636a4bd', class: "xpl-banner__icon", "aria-hidden": "true" }, hAsync("xpl-icon", { key: 'f91c24c80d30d8c784c4fa96e8a3829243705436', icon: this.getIcon(), size: 24 }))), hAsync("div", { key: 'edbcd267f1ad434adc4b2a05ce598fab3c2e6df6', class: "xpl-banner__body" }, isHeadingPresent && hAsync("p", { key: 'd3416ba50362753dd22e2c7e4097159bedf9f8c4', class: "xpl-banner__heading" }, this.heading), isDescPresent && (hAsync("p", { key: 'b899e18bce636d21cec109cd3a7933907877d32a', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (hAsync("div", { key: '702098d0a58e9327adba65a1b5d9ab9381eabfee', class: "xpl-banner__actions" }, hasAction && (hAsync("xpl-button", { key: '73e9a4609e1d8f9a21d096369def97a864dc7ed7', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (hAsync("xpl-button", { key: 'e8449c8728aa9336c51fe0fd4f012452730eb816', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (hAsync("button", { key: '9b46dcb8aac285b0fc4a8d60132dd99d756d61c3', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, hAsync("xpl-icon", { key: 'd0299f4467685505ab2712a985c09ed2d12e90a4', icon: "xmark", size: 24, "aria-hidden": "true" })))));
|
|
5383
5383
|
}
|
|
5384
5384
|
static get cmpMeta() { return {
|
|
5385
5385
|
"$flags$": 0,
|
|
@@ -5410,7 +5410,7 @@ class BreadcrumbItem {
|
|
|
5410
5410
|
`;
|
|
5411
5411
|
}
|
|
5412
5412
|
render() {
|
|
5413
|
-
return (hAsync(Host, { key: '
|
|
5413
|
+
return (hAsync(Host, { key: '7183a61283e558218b0ab031b4751c8a0adceccf', class: "xpl-breadcrumb-item", role: "listitem" }, hAsync("li", { key: 'dbd92cb1dbda6fae79786dc0445bed7d7c77334f', role: "none" }, hAsync("slot", { key: 'aed0551ce683fce1886d2e4263ad817201471e61' })), hAsync("span", { key: 'eb62adcc50b5da568c953263ebe6e3dc185c60c1', innerHTML: this.chevron })));
|
|
5414
5414
|
}
|
|
5415
5415
|
static get cmpMeta() { return {
|
|
5416
5416
|
"$flags$": 260,
|
|
@@ -5427,7 +5427,7 @@ class Breadcrumbs {
|
|
|
5427
5427
|
registerInstance(this, hostRef);
|
|
5428
5428
|
}
|
|
5429
5429
|
render() {
|
|
5430
|
-
return (hAsync(Host, { key: '
|
|
5430
|
+
return (hAsync(Host, { key: 'da8bca6508913f46c473f8d97bfd7dc6dd45bce5' }, hAsync("nav", { key: 'c9967a3ea464361b820e1c8354ee646cc13677e8', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, hAsync("ol", { key: '57791a5a8d72a9f25d0e9d43eac87044d8115f4a', role: "list" }, hAsync("slot", { key: 'b6c7658b88b190130352d096a9b8b1b7e83f7839' })))));
|
|
5431
5431
|
}
|
|
5432
5432
|
static get cmpMeta() { return {
|
|
5433
5433
|
"$flags$": 260,
|
|
@@ -5495,7 +5495,7 @@ class Button {
|
|
|
5495
5495
|
}
|
|
5496
5496
|
}
|
|
5497
5497
|
render() {
|
|
5498
|
-
return (hAsync(Host, { key: '
|
|
5498
|
+
return (hAsync(Host, { key: '0e9841bd097a28e6745efddaf0d528d1f23f799d', class: {
|
|
5499
5499
|
'xpl-button': true,
|
|
5500
5500
|
[`xpl-button--${this.size}`]: true,
|
|
5501
5501
|
[`xpl-button--${this.variant}`]: true,
|
|
@@ -5551,7 +5551,7 @@ class ButtonRow {
|
|
|
5551
5551
|
this.onTertiary = () => this.clickTertiary.emit();
|
|
5552
5552
|
}
|
|
5553
5553
|
render() {
|
|
5554
|
-
return (hAsync(Host, { key: '
|
|
5554
|
+
return (hAsync(Host, { key: '775133c0e49878db9861212167b4af14241f39b7', class: "xpl-button-row" }, hAsync("div", { key: 'cb0bf58d6624380730d56fbcb67746bef02f1623', class: "xpl-button-row-inner" }, hAsync("div", { key: 'c857f0383c85129273ee2bdd3572a05ead4682ae', class: "xpl-button-row__left" }, this.secondary && (hAsync("xpl-button", { key: '863e665b97686490b5a8df1b94303ab369eb9bf0', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), hAsync("div", { key: 'c5f244acf020f0cb3be4994fafe92161428a7289', class: "xpl-button-row__right" }, this.tertiary && (hAsync("xpl-button", { key: '9766e4e5ff3cd7e3f2202764edf9b3c3221b7ea8', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (hAsync("xpl-button", { key: '981384abd21328e229f28a345eef129cb96cbdc8', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (hAsync("xpl-button", { key: 'f141d9bff96edd8c74bd19745e7a259005ebc12e', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
|
|
5555
5555
|
}
|
|
5556
5556
|
static get cmpMeta() { return {
|
|
5557
5557
|
"$flags$": 0,
|
|
@@ -8290,7 +8290,7 @@ class Calendar {
|
|
|
8290
8290
|
}
|
|
8291
8291
|
}
|
|
8292
8292
|
render() {
|
|
8293
|
-
return (hAsync(Host, { key: '
|
|
8293
|
+
return (hAsync(Host, { key: 'b82a13403c12cdcfa676caeddcd397cd264eb9ec', class: "xpl-calendar" }, hAsync("input", { key: '0fba8e4e4b052bfed0e883c3455f63e8549c4263', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
|
|
8294
8294
|
if (el)
|
|
8295
8295
|
this.inputElement = el;
|
|
8296
8296
|
} })));
|
|
@@ -8325,14 +8325,14 @@ class Checkbox {
|
|
|
8325
8325
|
};
|
|
8326
8326
|
}
|
|
8327
8327
|
render() {
|
|
8328
|
-
return (hAsync(Host, { key: '
|
|
8328
|
+
return (hAsync(Host, { key: '300304af622ef0f26d53df76c20e27990a7b71d4', class: {
|
|
8329
8329
|
'xpl-checkbox-radio-container': true,
|
|
8330
8330
|
styled: !!this.styled,
|
|
8331
8331
|
disabled: !!this.disabled,
|
|
8332
|
-
} }, hAsync("input", { key: '
|
|
8332
|
+
} }, hAsync("input", { key: '43b393bae1a48af0cd14f577cf3164d034e3aa3f', class: "xpl-checkbox", type: "checkbox", "aria-label": (this.ariaLabel ?? '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), hAsync("label", { key: 'fcd3c7867ff3a8073bcd48aed8fb22c587f38ab0', class: {
|
|
8333
8333
|
'xpl-label': true,
|
|
8334
8334
|
'xpl-label--disabled': !!this.disabled,
|
|
8335
|
-
}, htmlFor: this.id }, hAsync("slot", { key: '
|
|
8335
|
+
}, htmlFor: this.id }, hAsync("slot", { key: 'd2ddc28e2b6c310f800efd13aaf8b6b718146e51' }), this.description && (hAsync("small", { key: '573a2af2584d91da251b974c56999529c06ad9d0', class: {
|
|
8336
8336
|
'xpl-description': true,
|
|
8337
8337
|
'xpl-description--disabled': !!this.disabled,
|
|
8338
8338
|
} }, this.description)))));
|
|
@@ -8398,7 +8398,7 @@ class Choicelist {
|
|
|
8398
8398
|
this.onChoicesPropChange(this.choices);
|
|
8399
8399
|
}
|
|
8400
8400
|
render() {
|
|
8401
|
-
return (hAsync(Host, { key: '
|
|
8401
|
+
return (hAsync(Host, { key: '618280baaf3f3e5d6b2787e74a257858a2a94a26', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (hAsync("div", { class: "xpl-choicelist-heading" }, this.heading && hAsync("h3", null, this.heading), this.description && hAsync("p", null, this.description))) : null, this.choices && (hAsync("ul", { key: '3d728d5612ea9efe80325cb09b98f5cf3146a813', class: {
|
|
8402
8402
|
'xpl-choicelist': true,
|
|
8403
8403
|
'xpl-choicelist--styled': !!this.styled,
|
|
8404
8404
|
} }, this.choices.map((choice, i) => {
|
|
@@ -8443,7 +8443,7 @@ class ContentArea {
|
|
|
8443
8443
|
this.size = 'wide';
|
|
8444
8444
|
}
|
|
8445
8445
|
render() {
|
|
8446
|
-
return (hAsync(Host, { key: '
|
|
8446
|
+
return (hAsync(Host, { key: '30c120a2eb2998222057ec07e5904cc1d8522f88' }, hAsync("main", { key: 'c4d94b67ece358f50577b5b26793a31fa58b5ad2', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, hAsync("div", { key: '162e32db10f359d86cbe80fa881f9866b8a9e14e', class: "xpl-content-area" }, hAsync("slot", { key: '065c2851622f7817ab6ceb5fe5b23cd19a1408ed' })))));
|
|
8447
8447
|
}
|
|
8448
8448
|
static get cmpMeta() { return {
|
|
8449
8449
|
"$flags$": 260,
|
|
@@ -8462,7 +8462,7 @@ class Dashboard {
|
|
|
8462
8462
|
registerInstance(this, hostRef);
|
|
8463
8463
|
}
|
|
8464
8464
|
render() {
|
|
8465
|
-
return (hAsync(Host, { key: '
|
|
8465
|
+
return (hAsync(Host, { key: '6551b0e202b00dc8c584c4368bfabdb388433016' }, hAsync("dl", { key: '126b026852d0de7040ce26736eb850fa31bfc1f3', class: "xpl-dashboard" }, hAsync("slot", { key: '262977ead7f8f9d15e61a20368bb1a3584b4fd8b' }))));
|
|
8466
8466
|
}
|
|
8467
8467
|
static get cmpMeta() { return {
|
|
8468
8468
|
"$flags$": 260,
|
|
@@ -8572,8 +8572,8 @@ class DataCard {
|
|
|
8572
8572
|
: this.smallStatVariant === 'negative'
|
|
8573
8573
|
? 'arrow-down-right'
|
|
8574
8574
|
: 'dash';
|
|
8575
|
-
return (hAsync(Host, { key: '
|
|
8576
|
-
(this.tooltipTextSmallStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextSmallStat }, hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, hAsync("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, hAsync("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && hAsync("span", { key: '
|
|
8575
|
+
return (hAsync(Host, { key: '7c4e576cefe0b23b431aa2a73ca246fec0bb8db6', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, hAsync("dt", { key: 'e5907b183be449b87b2b5c46f17b2c7c97a07f66', class: headerClasses }, hAsync("header", { key: '234988a87297a90565614c16e7a30a18a7b5aeb2' }, !!this.leadingIcon && this.icon && (hAsync("span", { key: '462d1f7a090eefb04be255c37a19d05c8365bf35', class: `xpl-data-card__icon--${this.variant}` }, hAsync("xpl-icon", { key: '334a676cbbf353de77fd173fbeb786820694d6d0', icon: this.icon, "background-color": bgColorHue, size: 20 }))), hAsync("slot", { key: '9f933f8307c0ee4289ab03971261d947ac3a71c3', name: "title" }, this.name)), this.link && (hAsync("span", { key: 'eb5e62387de08b5d588b702cdb06522a18f6d0ff', class: "xpl-data-card__header-arrow" }, hAsync("xpl-icon", { key: 'f0c210320683fa98dc15e89cef7ba0351ae8b54f', icon: "chevron-right", size: 16 })))), hAsync("dd", { key: 'a18c3f4800e6719a659e8ad1ebb9b61d4c59235a', class: "xpl-data-card__body" }, hAsync("div", { key: '0ea86cf8297a15c2ac3694df4ecedbce2a967239', class: "xpl-data-card__left" }, hAsync("span", { key: 'd3daf019480ee66cfd9c1fff5e57cad87dab9b6e', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextStat }, hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, hAsync("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextSmallStat }, hAsync("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, hAsync("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (hAsync("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, hAsync("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
|
|
8576
|
+
(this.tooltipTextSmallStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextSmallStat }, hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, hAsync("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, hAsync("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && hAsync("span", { key: '61bb7ebb508ead51c8c7dbbe1513822c65675fc5', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (hAsync("div", { key: '6325676d2bbc0210e5d46ec72a5f8cb7d916d255', class: "xpl-data-card__right" }, hAsync("slot", { key: '96775ee066bcea7b8e418132b8125857cf197cbc', name: GRAPH_CONTENT_SLOT$1 }))))));
|
|
8577
8577
|
}
|
|
8578
8578
|
get el() { return getElement(this); }
|
|
8579
8579
|
static get watchers() { return {
|
|
@@ -8616,7 +8616,7 @@ class Divider {
|
|
|
8616
8616
|
render() {
|
|
8617
8617
|
let className = 'xpl-divider';
|
|
8618
8618
|
className += ` xpl-divider--${this.tier}`;
|
|
8619
|
-
return (hAsync(Host, { key: '
|
|
8619
|
+
return (hAsync(Host, { key: '4c1cdecc3ed6e9440668e413df897e23d9f7d679', class: className }, hAsync("span", { key: 'bb85cd26e6565c1f1ec150fca99fe965957878cb' }, hAsync("slot", { key: '37d5a8f75d26f6ba545aa1c12c4e7634b8dd1b6c' }))));
|
|
8620
8620
|
}
|
|
8621
8621
|
static get cmpMeta() { return {
|
|
8622
8622
|
"$flags$": 260,
|
|
@@ -10766,7 +10766,7 @@ class Dropdown {
|
|
|
10766
10766
|
const shouldVirtualize = this.isVirtualized;
|
|
10767
10767
|
let listContent;
|
|
10768
10768
|
if (!hasOptions) {
|
|
10769
|
-
listContent = hAsync("slot", { key: '
|
|
10769
|
+
listContent = hAsync("slot", { key: 'da24352c25525fb0f20a86804889ceef4eed67f0', name: "options" });
|
|
10770
10770
|
}
|
|
10771
10771
|
else if (shouldVirtualize) {
|
|
10772
10772
|
const { rowHeight, overscan } = VIRTUAL_LIST;
|
|
@@ -10774,18 +10774,18 @@ class Dropdown {
|
|
|
10774
10774
|
const start = Math.min(this.virtualStart, total);
|
|
10775
10775
|
const fallbackEnd = Math.min(total, Math.ceil(300 / rowHeight) + overscan * 2);
|
|
10776
10776
|
const end = this.virtualEnd > start ? this.virtualEnd : fallbackEnd;
|
|
10777
|
-
listContent = (hAsync("li", { key: '
|
|
10777
|
+
listContent = (hAsync("li", { key: '356b1871de0539aee6ac085e59d4861cdb7db135', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
|
|
10778
10778
|
}
|
|
10779
10779
|
else {
|
|
10780
10780
|
listContent = options.map((option) => renderOption(option));
|
|
10781
10781
|
}
|
|
10782
|
-
return (hAsync(Host, { key: '
|
|
10782
|
+
return (hAsync(Host, { key: 'f34a4f503feb2050100db75a40f21959aca8e74e', "aria-expanded": isOpen ? 'true' : 'false', class: {
|
|
10783
10783
|
'xpl-dropdown': true,
|
|
10784
10784
|
'xpl-dropdown--multi': mode === 'multi',
|
|
10785
10785
|
'xpl-dropdown--open': isOpen,
|
|
10786
10786
|
'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
|
|
10787
10787
|
'xpl-dropdown--virtualized': shouldVirtualize,
|
|
10788
|
-
}, role: "listbox" }, hAsync("slot", { key: '
|
|
10788
|
+
}, role: "listbox" }, hAsync("slot", { key: 'dee58bc149835d2c4e1328fd92c780f75bea0499', name: "header" }), hAsync("ul", { key: '32bec73cc8b67bd38df5231b3049c897a9d36c4e', class: "xpl-dropdown-list", ref: (el) => {
|
|
10789
10789
|
this.setListEl(el);
|
|
10790
10790
|
}, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
|
|
10791
10791
|
}
|
|
@@ -10847,7 +10847,7 @@ class DropdownGroup {
|
|
|
10847
10847
|
const hasOptions = options && options.length;
|
|
10848
10848
|
const mappedOptions = hasOptions &&
|
|
10849
10849
|
options.map(({ groupName: optsGroupName, ...properties }) => optsGroupName ? (hAsync("xpl-dropdown-group", { label: optsGroupName, ...properties })) : (hAsync("xpl-dropdown-option", { ...properties })));
|
|
10850
|
-
return (hAsync(Host, { key: '
|
|
10850
|
+
return (hAsync(Host, { key: '765c69b589275544bc312a60036a22345509b105', role: "group", "aria-label": groupName }, hAsync("li", { key: '6dfa766bd675e0579e8608aa0b202f63e2be2635', class: "xpl-dropdown-list-item" }, hAsync("xpl-dropdown-heading", { key: '42cb1a573126edee7f1a01397988d6e9d952ead3', label: groupName }), hAsync("ul", { key: 'f443eba9c19554eea7997a47252816a39660d9a7', class: "xpl-dropdown-list" }, mappedOptions || hAsync("slot", { key: '60d3bff8026d96197a3482cd7e58807cfc02df2b', name: "options" })))));
|
|
10851
10851
|
}
|
|
10852
10852
|
static get cmpMeta() { return {
|
|
10853
10853
|
"$flags$": 260,
|
|
@@ -10867,7 +10867,7 @@ class DropdownHeading {
|
|
|
10867
10867
|
registerInstance(this, hostRef);
|
|
10868
10868
|
}
|
|
10869
10869
|
render() {
|
|
10870
|
-
return (hAsync(Host, { key: '
|
|
10870
|
+
return (hAsync(Host, { key: 'fbd0029d191d8d81c3d316ac1cb2c51173da29b8', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, hAsync("span", { key: 'd585dc509d918142589c1874e173b369c1c2a822' }, this.label || hAsync("slot", { key: '67b72339653dce321acedfd14befcfe5335edf43', name: "heading" }))));
|
|
10871
10871
|
}
|
|
10872
10872
|
static get cmpMeta() { return {
|
|
10873
10873
|
"$flags$": 260,
|
|
@@ -10936,11 +10936,11 @@ class DropdownOptionCpnt {
|
|
|
10936
10936
|
}
|
|
10937
10937
|
render() {
|
|
10938
10938
|
const { label, isSelected, isDisabled, value, subtitle, icon } = this;
|
|
10939
|
-
return (hAsync(Host, { key: '
|
|
10939
|
+
return (hAsync(Host, { key: '3e8fe525f44d24414926664c8475344b3e57eb53', class: {
|
|
10940
10940
|
'xpl-dropdown-option': true,
|
|
10941
10941
|
'xpl-dropdown-option--disabled': !!isDisabled,
|
|
10942
10942
|
'xpl-dropdown-option--selected': !!isSelected,
|
|
10943
|
-
}, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, hAsync("li", { key: '
|
|
10943
|
+
}, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, hAsync("li", { key: '4262100b3ea2e62575f8eaad8908d9379a8ea05c', class: "xpl-dropdown-list-item" }, icon && (hAsync("xpl-icon", { key: '7505fcdc35b15b6e97a4753525cee7232244fa6e', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || hAsync("slot", { key: '35b00d7aa187a38b1f9d78425189764d9b8575d8', name: "option" }), subtitle && hAsync("span", { key: 'e1dac23f7e07df9e89c90625f48eeddbd8daf77a', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
|
|
10944
10944
|
}
|
|
10945
10945
|
get hostElement() { return getElement(this); }
|
|
10946
10946
|
static get cmpMeta() { return {
|
|
@@ -11004,10 +11004,10 @@ class DynamicTable {
|
|
|
11004
11004
|
this.updateColumnCount();
|
|
11005
11005
|
}
|
|
11006
11006
|
render() {
|
|
11007
|
-
return (hAsync("div", { key: '
|
|
11007
|
+
return (hAsync("div", { key: '223e082cd5124d2f495e65058c4742ab6a28f5cf', role: "grid", class: {
|
|
11008
11008
|
'xpl-dynamic-table': true,
|
|
11009
11009
|
'xpl-dynamic-table--accordion': this.hasAccordion,
|
|
11010
|
-
}, "aria-colcount": this.colCount }, hAsync("slot", { key: '
|
|
11010
|
+
}, "aria-colcount": this.colCount }, hAsync("slot", { key: 'a808231d98db51ddb01ada49d69ae468cd721603', name: "header" }), hAsync("slot", { key: '4eb9d10764e8d81e5c6d9f80fc9d470c2d34e969', name: "body" })));
|
|
11011
11011
|
}
|
|
11012
11012
|
get el() { return getElement(this); }
|
|
11013
11013
|
static get cmpMeta() { return {
|
|
@@ -11047,9 +11047,9 @@ class DynamicTableCell {
|
|
|
11047
11047
|
const colIndex = this.el.parentElement
|
|
11048
11048
|
? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
|
|
11049
11049
|
: 0;
|
|
11050
|
-
return (hAsync(Host, { key: '
|
|
11050
|
+
return (hAsync(Host, { key: 'bdc80cc13051a57294f5a8eef938ffc92f7108b4', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
|
|
11051
11051
|
this.hostElement = el ?? undefined;
|
|
11052
|
-
} }, hAsync("slot", { key: '
|
|
11052
|
+
} }, hAsync("slot", { key: '743946a9ee87d85eb9e0e414f9688e249b7694a3' })));
|
|
11053
11053
|
}
|
|
11054
11054
|
get el() { return getElement(this); }
|
|
11055
11055
|
static get cmpMeta() { return {
|
|
@@ -11090,9 +11090,9 @@ class DynamicTableRow {
|
|
|
11090
11090
|
const classList = `xpl-dynamic-table-row
|
|
11091
11091
|
${this.isDisabled ? 'disabled' : ''}
|
|
11092
11092
|
${this.selected ? 'selected' : ''}`;
|
|
11093
|
-
return (hAsync(Host, { key: '
|
|
11093
|
+
return (hAsync(Host, { key: '5d91af6b6055646118e882b9e4ac1c0fe9003e06', role: "row", class: classList, ref: (el) => {
|
|
11094
11094
|
this.hostElement = el ?? undefined;
|
|
11095
|
-
} }, hAsync("slot", { key: '
|
|
11095
|
+
} }, hAsync("slot", { key: 'e3ed1a18b1d7187bf03f9c6633c276e1fb90d029' })));
|
|
11096
11096
|
}
|
|
11097
11097
|
static get cmpMeta() { return {
|
|
11098
11098
|
"$flags$": 260,
|
|
@@ -11134,7 +11134,7 @@ class Grid {
|
|
|
11134
11134
|
});
|
|
11135
11135
|
}
|
|
11136
11136
|
render() {
|
|
11137
|
-
return hAsync(Host, { key: '
|
|
11137
|
+
return hAsync(Host, { key: '4074778ac031d36c8f530379f7cc55b7db8a6887', class: "xpl-grid" });
|
|
11138
11138
|
}
|
|
11139
11139
|
get container() { return getElement(this); }
|
|
11140
11140
|
static get cmpMeta() { return {
|
|
@@ -11161,7 +11161,7 @@ class GridItem {
|
|
|
11161
11161
|
className += ` xpl-grid-item-sm-${this.sm}`;
|
|
11162
11162
|
className += ` xpl-grid-item-md-${this.md}`;
|
|
11163
11163
|
className += ` xpl-grid-item-lg-${this.lg}`;
|
|
11164
|
-
return (hAsync(Host, { key: '
|
|
11164
|
+
return (hAsync(Host, { key: '7c2e5c06f0751cf0a6bc6d80c12939e0f4c194ee', class: className }, hAsync("slot", { key: '2fc5ed1542e50c826bec55e1f106c49ef19c1a38' })));
|
|
11165
11165
|
}
|
|
11166
11166
|
static get cmpMeta() { return {
|
|
11167
11167
|
"$flags$": 260,
|
|
@@ -11232,7 +11232,7 @@ class HeaderAccordion {
|
|
|
11232
11232
|
this.updateParentCheckbox(initialCheckoxesValue);
|
|
11233
11233
|
}
|
|
11234
11234
|
render() {
|
|
11235
|
-
return (hAsync(Host, { key: '
|
|
11235
|
+
return (hAsync(Host, { key: '6181aa606ed8062474d9e369558a0d4367ec06be', class: "xpl-header-accordion" }, hAsync("div", { key: '17516c087ec1818ef9be08b79abd0e69ee6e499b', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (hAsync("xpl-checkbox", { key: '709c1055c22c7328de3a36fd265d57e616e13f39', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), hAsync("button", { key: '9392aaf81db32af32c2fa3bff445a53fd0e8a324', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, hAsync("slot", { key: '6019b35676f13debe6cff89bcc9f90542a640628', name: "title" }), hAsync("xpl-icon", { key: '4c381cf9324e1348d1f26c7150b31945e264f4ca', size: 16, icon: "chevron-down", class: this.expanded ? 'rotate' : undefined }))), hAsync("div", { key: '0c96d5d10f7d82844c473e595fce1624234585b3', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, hAsync("slot", { key: 'fc6ae8bc852d115475acbe269e3e82d89b7ae755', name: "content" }))));
|
|
11236
11236
|
}
|
|
11237
11237
|
get el() { return getElement(this); }
|
|
11238
11238
|
static get watchers() { return {
|
|
@@ -25253,10 +25253,10 @@ class Icon {
|
|
|
25253
25253
|
let wrapperClasses = 'xpl-icon__wrapper ';
|
|
25254
25254
|
if (this.backgroundColor)
|
|
25255
25255
|
wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
|
|
25256
|
-
return (hAsync(Host, { key: '
|
|
25256
|
+
return (hAsync(Host, { key: '4227f699fde8eac6949eb604b1c7b4fa20f57d2b' }, hAsync("figure", { key: '33e1c0597e8883530ea685450afa47f2e0ac4555', class: wrapperClasses }, hAsync("span", { key: '9920c6ae88f80c03fc885f7b41524eeaa147d77f', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
|
|
25257
25257
|
width: `${options.width}px`,
|
|
25258
25258
|
height: `${options.height}px`,
|
|
25259
|
-
}, innerHTML: apolloIcons.getIcon(this.icon)?.toSVG(options) }), hAsync("figcaption", { key: '
|
|
25259
|
+
}, innerHTML: apolloIcons.getIcon(this.icon)?.toSVG(options) }), hAsync("figcaption", { key: '654cc247dbe9383198d6ac90b91412d0957259dc' }, this.icon, " icon"))));
|
|
25260
25260
|
}
|
|
25261
25261
|
static get style() { return xplIconCss(); }
|
|
25262
25262
|
static get cmpMeta() { return {
|
|
@@ -25459,13 +25459,13 @@ class Input {
|
|
|
25459
25459
|
this.characterCount > this.maxCharacterCount) {
|
|
25460
25460
|
hasError = true;
|
|
25461
25461
|
}
|
|
25462
|
-
return (hAsync(Host, { key: '
|
|
25462
|
+
return (hAsync(Host, { key: 'a276769b767bc7df63e2701697600c0ecbfa593e', class: {
|
|
25463
25463
|
'xpl-input': true,
|
|
25464
25464
|
'xpl-input--disabled': !!this.disabled,
|
|
25465
25465
|
'xpl-input--error': hasError,
|
|
25466
25466
|
'xpl-input--readonly': !!this.readonly,
|
|
25467
25467
|
[`xpl-input--${this.type}`]: true,
|
|
25468
|
-
} }, this.label && (hAsync("label", { key: '
|
|
25468
|
+
} }, this.label && (hAsync("label", { key: '1686d1f5c9fc573929190bc1a04bf9efd2ad6957', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && hAsync("small", { key: '1f74f68e8eeae5186e50ace2e96a9896b022fa30' }, this.description))), this.renderInput(), (this.error?.length ?? 0) > 0 && (hAsync("label", { key: '2ee7de8b1dcb4cc27d7dcf8b34be66727ace1bfe', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, hAsync("xpl-icon", { key: 'd3965b339f2d24dec0fdde367e76aacfefd25061', icon: "circle-warning", size: 16 }), hAsync("span", { key: 'b6269e3f122a53980438c21cfbda2e18b3c77a7e' }, this.error)))));
|
|
25469
25469
|
}
|
|
25470
25470
|
get el() { return getElement(this); }
|
|
25471
25471
|
static get cmpMeta() { return {
|
|
@@ -25892,16 +25892,16 @@ class InputColor {
|
|
|
25892
25892
|
top: `${y}px`,
|
|
25893
25893
|
background: `rgb(${r}, ${g}, ${b})`,
|
|
25894
25894
|
};
|
|
25895
|
-
return (hAsync(Host, { key: '
|
|
25895
|
+
return (hAsync(Host, { key: 'baf8bd36a33134bff8b2e1ce1a5d81a567f232b2', class: "xpl-input-color" }, hAsync("xpl-popover", { key: 'e5bfd446e4b900371ee8ca7c7c321692079c66fb', disabled: this.disabled, display: "menu" }, hAsync("div", { key: '9d40ccbf649ba0be2884bbc7dec84d7c1e9ddbb7', slot: "trigger" }, hAsync("div", { key: '6b4474af2dab4be116728135214403af7189d99f', class: {
|
|
25896
25896
|
'xpl-input-color__display': true,
|
|
25897
25897
|
'xpl-input-color__display--disabled': !!this.disabled,
|
|
25898
25898
|
'xpl-input-color__display--error': !!this.hasErrorState,
|
|
25899
|
-
} }, hAsync("span", { key: '
|
|
25899
|
+
} }, hAsync("span", { key: '9372da25358b453c5b89f324886c986153b9386b', class: "xpl-input-color__color", style: {
|
|
25900
25900
|
background: objectToStringColor(this.colorValues),
|
|
25901
|
-
} }), this.colorValues.hex ? (hAsync("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (hAsync("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (hAsync("xpl-icon", { key: '
|
|
25901
|
+
} }), this.colorValues.hex ? (hAsync("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (hAsync("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (hAsync("xpl-icon", { key: 'a37bf00e4a70cda5e59cecfc7f108601bbb15e8e', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
|
|
25902
25902
|
e.stopPropagation();
|
|
25903
25903
|
this.openEyeDropper();
|
|
25904
|
-
} })))), hAsync("div", { key: '
|
|
25904
|
+
} })))), hAsync("div", { key: 'e95b3755b47802b446de5d7e9c25d2238dea23ef', class: "xpl-input-color__menu" }, hAsync("div", { key: '9ecc94c286d9cd0a5e25c92eaea3a2dd9ee4394b', class: "xpl-input-color__sl-grid", ref: (el) => {
|
|
25905
25905
|
this.colorInputElements.slGrid = el ?? undefined;
|
|
25906
25906
|
}, style: {
|
|
25907
25907
|
background: [
|
|
@@ -25909,9 +25909,9 @@ class InputColor {
|
|
|
25909
25909
|
`linear-gradient(to right, #fff, #fff0)`,
|
|
25910
25910
|
`rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
|
|
25911
25911
|
].join(', '),
|
|
25912
|
-
}, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, hAsync("div", { key: '
|
|
25912
|
+
}, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, hAsync("div", { key: '85b2e591be85db2a2d3d1bbe65ee276a857b92fa', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), hAsync("div", { key: 'b9d7f2fdc49d73db488d62f21433558b5b0a09a7', class: "xpl-input-color__grid" }, hAsync("input", { key: '3c260f54bde2c26a7b5980082cabf54e2d42340e', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
|
|
25913
25913
|
this.colorInputElements.hue = el ?? undefined;
|
|
25914
|
-
} }), hAsync("input", { key: '
|
|
25914
|
+
} }), hAsync("input", { key: 'ef8ef568a1487b618aeeb986904a5eeefabba300', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
|
|
25915
25915
|
this.colorInputElements.alpha = el ?? undefined;
|
|
25916
25916
|
}, style: {
|
|
25917
25917
|
backgroundImage: [
|
|
@@ -25921,9 +25921,9 @@ class InputColor {
|
|
|
25921
25921
|
`linear-gradient(45deg, transparent 75%, #ccc 75%)`,
|
|
25922
25922
|
`linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
|
|
25923
25923
|
].join(', '),
|
|
25924
|
-
} }), hAsync("div", { key: '
|
|
25924
|
+
} }), hAsync("div", { key: 'b4953565664df14ad483f30c45b6ae5e717e6a63', class: "xpl-input-color__preview", style: {
|
|
25925
25925
|
background: `rgba(${r}, ${g}, ${b}, ${a})`,
|
|
25926
|
-
} })), hAsync("div", { key: '
|
|
25926
|
+
} })), hAsync("div", { key: '731a00aa7075efc1a19849a58e5a81c8837ab199', class: "xpl-input-color__inputs" }, [
|
|
25927
25927
|
'hex',
|
|
25928
25928
|
'r',
|
|
25929
25929
|
'g',
|
|
@@ -26090,16 +26090,16 @@ class InputDate {
|
|
|
26090
26090
|
parent.removeChild(wrapper);
|
|
26091
26091
|
}
|
|
26092
26092
|
render() {
|
|
26093
|
-
return (hAsync(Host, { key: '
|
|
26093
|
+
return (hAsync(Host, { key: 'f1b3189eb8ba737e5e96826042d8c3aadce9b0d1', class: {
|
|
26094
26094
|
'xpl-input-date': true,
|
|
26095
26095
|
[`xpl-input-date--mode-${this.mode}`]: true,
|
|
26096
26096
|
'xpl-input-date--error': !!this.hasErrorState,
|
|
26097
26097
|
'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
|
|
26098
|
-
} }, hAsync("div", { key: '
|
|
26098
|
+
} }, hAsync("div", { key: '1c292279aad8ae7f48358d5e42189d60ecd1d97d', class: "xpl-input-wrapper" }, this.pre && (hAsync("label", { key: 'f8ed452f69f664fd4e3b83e428070f3f4b14d5c6', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), hAsync("input", { key: 'e1659c6ad3cb2cb0a5d88a7635672917d2f58ebb', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
|
|
26099
26099
|
this.input = el ?? undefined;
|
|
26100
26100
|
}, onChange: (event) => {
|
|
26101
26101
|
this.valueChanged(event);
|
|
26102
|
-
} }), hAsync("xpl-icon", { key: '
|
|
26102
|
+
} }), hAsync("xpl-icon", { key: '577c881edf4ef8dfd3c910c8bbdd268af7448e6c', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (hAsync("label", { key: '5acfeb3ea72d9c5a193116e305fd54d323276910', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
|
|
26103
26103
|
}
|
|
26104
26104
|
get el() { return getElement(this); }
|
|
26105
26105
|
static get watchers() { return {
|
|
@@ -26170,18 +26170,18 @@ class InputFile {
|
|
|
26170
26170
|
this.onRemoveFileByIndex(fileIndex);
|
|
26171
26171
|
}
|
|
26172
26172
|
render() {
|
|
26173
|
-
return (hAsync(Host, { key: '
|
|
26173
|
+
return (hAsync(Host, { key: '87eead553435ce984945ccb72ca262bfd6123562', class: {
|
|
26174
26174
|
'xpl-input-file': true,
|
|
26175
26175
|
'xpl-input-file--hide-trigger-on-select': !!this.hideTriggerOnSelect,
|
|
26176
26176
|
'xpl-input-file--disabled': !!this.disabled,
|
|
26177
|
-
} }, hAsync("span", { key: '
|
|
26177
|
+
} }, hAsync("span", { key: 'f345204405d1bb784fc662fa3c29e9edaeca9c67', class: {
|
|
26178
26178
|
'xpl-input-file__trigger-wrapper': true,
|
|
26179
26179
|
'xpl-input-file__trigger-wrapper--hidden': !!this.hideTriggerOnSelect && (this.files?.length ?? 0) > 0,
|
|
26180
|
-
}, role: "button", tabIndex: 0, onClick: this.openFileDialog }, hAsync("slot", { key: '
|
|
26180
|
+
}, role: "button", tabIndex: 0, onClick: this.openFileDialog }, hAsync("slot", { key: '46c4e817cb8f8b050b4de5c571757c7ed84698a7', name: "trigger" })), (this.files?.length ?? 0) > 0 && !this.hideFileNames && (hAsync("ul", { key: '455af4a3cad84232464927efb880ce0a26cebf71', class: "xpl-input-file__file-list" }, (this.files ?? []).map((file, fileIndex) => (hAsync("li", { class: "xpl-input-file__file-item" }, hAsync("span", { class: "xpl-input-file__file-name" }, file.name), hAsync("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
|
|
26181
26181
|
e.preventDefault();
|
|
26182
26182
|
e.stopPropagation();
|
|
26183
26183
|
this.onRemoveFileByIndex(fileIndex);
|
|
26184
|
-
}, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (hAsync("span", { key: '
|
|
26184
|
+
}, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (hAsync("span", { key: '77abc822d8d44b33f251d4ba9ef21cfc7dd6c287', class: "xpl-input-file__accept" }, "Accepted file types: ", this.accept)), hAsync("input", { key: 'd75ec23921943259d789b0f32828dca57864520e', onChange: this.handleFileChange, type: "file", ref: (el) => {
|
|
26185
26185
|
this.fileInput = el ?? undefined;
|
|
26186
26186
|
}, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
|
|
26187
26187
|
}
|
|
@@ -26686,20 +26686,20 @@ class InputPhone {
|
|
|
26686
26686
|
this.hasErrorState = null;
|
|
26687
26687
|
}
|
|
26688
26688
|
render() {
|
|
26689
|
-
return (hAsync(Host, { key: '
|
|
26689
|
+
return (hAsync(Host, { key: 'c78f7ab5d5c6f6982356d7610fe32855d7f214c5', class: {
|
|
26690
26690
|
'xpl-input-phone': true,
|
|
26691
26691
|
'xpl-input-phone--error': !!this.hasErrorState || !!this.error,
|
|
26692
26692
|
'xpl-input-phone--open': this.dropdownOpen,
|
|
26693
26693
|
'xpl-input-phone--domestic': !this.isInternational,
|
|
26694
|
-
} }, hAsync("div", { key: '
|
|
26694
|
+
} }, hAsync("div", { key: '3b30f8755836376728336f769afeb714b9a3dfa9', class: "xpl-input-wrapper" }, this.isInternational && (hAsync("button", { key: 'c83ff2255a465d7d5d233ce02a816845858594be', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, this.selectedCountry?.name && (hAsync("xpl-icon", { key: 'f0a62a5052b940f4a2212ed77929696e62b4825f', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), hAsync("xpl-icon", { key: '68782b949fd1cf41a8b0883ad6caba18d9aa1ac5', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), hAsync("div", { key: '6aa5f75f34b413bd8939d46c55b7cc42128db247', class: "xpl-input-phone__input-wrap" }, this.isInternational && (hAsync("span", { key: '81dc5727f8dca528f34994736c1a8a2223e8fe63', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), hAsync("input", { key: 'd0faecadd4216bf6a7b79fc9623052e194900c15', ref: (el) => {
|
|
26695
26695
|
this.inputEl = el ?? undefined;
|
|
26696
|
-
}, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (hAsync("button", { key: '
|
|
26696
|
+
}, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (hAsync("button", { key: '12a2e4ce8adb80ca4d6fca1c706c54db01d22101', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, hAsync("xpl-icon", { key: 'f1ae5e69258654e8ba5bf511755020e0d7d91088', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (hAsync("xpl-dropdown", { key: 'd8a75cf0b95d9affae6e03292c011a73dcff98b4', ref: (el) => {
|
|
26697
26697
|
this.dropdownRef = el ?? undefined;
|
|
26698
26698
|
}, isOpen: this.dropdownOpen, triggerId: this.triggerId, anchorToTrigger: true, closeOnSelect: true, mode: "single", options: this.dropdownOptions, update: this.handleDropdownUpdate, onIsOpenChange: (e) => {
|
|
26699
26699
|
this.dropdownOpen = e.detail;
|
|
26700
|
-
}, "aria-label": "Country" }, hAsync("div", { key: '
|
|
26700
|
+
}, "aria-label": "Country" }, hAsync("div", { key: 'b46a4a9985604720099c3212714804aee5a1f58b', slot: "header", class: "xpl-input-phone__search-wrap" }, hAsync("xpl-input", { key: '55bdc0f6ff4b1a1a2d17b5ba10849bcab472d7d8', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
|
|
26701
26701
|
this.searchQuery = e.detail ?? '';
|
|
26702
|
-
} }, hAsync("xpl-icon", { key: '
|
|
26702
|
+
} }, hAsync("xpl-icon", { key: 'af0fd388d39e6d9bcac5a032c7c0cf5f192cc4d3', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
|
|
26703
26703
|
}
|
|
26704
26704
|
get el() { return getElement(this); }
|
|
26705
26705
|
static get watchers() { return {
|
|
@@ -26841,7 +26841,7 @@ class InputSearch {
|
|
|
26841
26841
|
return shell;
|
|
26842
26842
|
}
|
|
26843
26843
|
render() {
|
|
26844
|
-
return (hAsync(Host, { key: '
|
|
26844
|
+
return (hAsync(Host, { key: '90b29d51b36655d1dc5f7fa9b67edf6382cb90af', class: {
|
|
26845
26845
|
'xpl-input-search': true,
|
|
26846
26846
|
'xpl-input-search--disabled': this.disabled,
|
|
26847
26847
|
'xpl-input-search--error': this.hasError,
|
|
@@ -27050,11 +27050,11 @@ class InputTime {
|
|
|
27050
27050
|
}));
|
|
27051
27051
|
}
|
|
27052
27052
|
render() {
|
|
27053
|
-
return (hAsync(Host, { key: '
|
|
27053
|
+
return (hAsync(Host, { key: '098ef69d355f6bdf03b4bfbab59956f84d5967b4', class: {
|
|
27054
27054
|
'xpl-input-time': true,
|
|
27055
27055
|
[`xpl-input-time--mode-${this.mode}`]: true,
|
|
27056
27056
|
'xpl-input-time--error': !!this.hasErrorState,
|
|
27057
|
-
} }, hAsync("xpl-input", { key: '
|
|
27057
|
+
} }, hAsync("xpl-input", { key: 'e73a120a00a6f110e99e1a7d54bc75c024a2e1dc', pre: hAsync("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : undefined, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (hAsync("xpl-dropdown", { key: '454de00fca4a891eaffc71738538425fa9f4e34f', options: this.options, isOpen: this.showOptions, ref: (el) => {
|
|
27058
27058
|
this.dropdown = el ?? undefined;
|
|
27059
27059
|
}, class: "xpl-input-time__dropdown" }))));
|
|
27060
27060
|
}
|
|
@@ -27170,7 +27170,7 @@ class LargeCard {
|
|
|
27170
27170
|
}
|
|
27171
27171
|
}
|
|
27172
27172
|
render() {
|
|
27173
|
-
return (hAsync(Host, { key: '
|
|
27173
|
+
return (hAsync(Host, { key: '879f57b756e3c25bb9bebbc06f144a137bf0b78b', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, hAsync("dt", { key: '1336da473527a06e485c559925156954c0162696', class: "xpl-large-card__header" }, hAsync("header", { key: '69073fa20879ae4b9709ec54cc01cad85fba6366' }, hAsync("slot", { key: 'c9381d78ba477f7ba9f1ce6a2e82c149bbe50ad0', name: "title" }, this.name), this.link && (hAsync("span", { key: '8075678983d86cc192b9a2fc7a43fb4c022dbace', class: "xpl-large-card__header-arrow" }, hAsync("xpl-icon", { key: '960d96210c4d5f37b51782947b9acdb3cb4d125d', icon: "chevron-right", size: 16 })))), this.description && (hAsync("div", { key: '0162c71c16faa14385da912cbcf6a24f182b1012', class: "xpl-large-card__description" }, this.description))), hAsync("dd", { key: 'd48d1348b8d0b5b3db776d64be10b23d884cd35c', class: "xpl-large-card__body" }, this.graphContentPresent && hAsync("slot", { key: '7aa25f469d81ebc5046cc382920fcac9a3d59a9c', name: GRAPH_CONTENT_SLOT }))));
|
|
27174
27174
|
}
|
|
27175
27175
|
get el() { return getElement(this); }
|
|
27176
27176
|
static get cmpMeta() { return {
|
|
@@ -27556,10 +27556,10 @@ class List {
|
|
|
27556
27556
|
render() {
|
|
27557
27557
|
const ariaLabelledBy = this.labelledBy?.trim() ? this.labelledBy.trim() : undefined;
|
|
27558
27558
|
const ariaLabel = !ariaLabelledBy && this.label?.trim() ? this.label.trim() : undefined;
|
|
27559
|
-
return (hAsync(Host, { key: '
|
|
27559
|
+
return (hAsync(Host, { key: '5516f433d051a8cac2d01255e7e4b43956f088c5', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, this.items?.map((item, index) => {
|
|
27560
27560
|
const legacyRowId = item.id ?? `item-${index}`;
|
|
27561
27561
|
return (hAsync("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
|
|
27562
|
-
}), hAsync("slot", { key: '
|
|
27562
|
+
}), hAsync("slot", { key: '68216fa87a1034e09363b8b20fc436d0d3725cc3' }), this.reorderable ? (hAsync("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
|
|
27563
27563
|
}
|
|
27564
27564
|
get el() { return getElement(this); }
|
|
27565
27565
|
static get watchers() { return {
|
|
@@ -27611,7 +27611,7 @@ class MainNav {
|
|
|
27611
27611
|
this.navWidthHandler();
|
|
27612
27612
|
}
|
|
27613
27613
|
render() {
|
|
27614
|
-
return (hAsync(Host, { key: '
|
|
27614
|
+
return (hAsync(Host, { key: '965f7a4faa40d7ec386c947e16fb5bc4621496a0', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, hAsync("nav", { key: '1237191a5c5e6d3eacfba46d7b9cb6c5e1fcc191' }, hAsync("header", { key: '903b017b0610dfd4fee28aa0d00d9c2f030506bc', "aria-label": "Sidebar Header" }, hAsync("slot", { key: 'ec0c4c0a92ae8578372895c3a0ee225da2bc2bb8', name: "logo" }), hAsync("slot", { key: 'd2b9d45cfde83df6f7f76889fc5c05520f5346d6', name: "brand-name" })), hAsync("div", { key: '93d7a1d1ca940db7fedf4c634c092d2554c9e9e6', class: "xpl-main-nav__main_section" }, hAsync("slot", { key: '0a0c0ee4ae85a4db09cf87c7fe9693bd1f64721a', name: "navigation" })), hAsync("footer", { key: '21d2eaa5f1446145656954966e550150c867357c', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, hAsync("slot", { key: 'd2b84a7ea550a1da9460df7e9ace73354929707f', name: "footer" })))));
|
|
27615
27615
|
}
|
|
27616
27616
|
static get cmpMeta() { return {
|
|
27617
27617
|
"$flags$": 260,
|
|
@@ -27717,7 +27717,7 @@ class Modal {
|
|
|
27717
27717
|
}, 250);
|
|
27718
27718
|
}
|
|
27719
27719
|
render() {
|
|
27720
|
-
return (hAsync(Host, { key: '
|
|
27720
|
+
return (hAsync(Host, { key: '03f5eb41f33dd1ef6520c5e606f86af3676b1e72', class: "xpl-modal" }, this.isOpen && hAsync("xpl-backdrop", { key: '50419511db07db7e51664f2c64167e8fa1130478' }), hAsync("dialog", { key: 'debe223a70a3e14a5a3937cdba9b18d8e1529497', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}`, "aria-labelledby": this.titleId }, hAsync("div", { key: '7b4a1fda4219622c1e482bfeda808fb25a818df7', class: "xpl-modal__header" }, hAsync("div", { key: '4f2f095fd473c97954e7c3b06691133f796df77e', class: "xpl-modal__title" }, hAsync("xpl-button", { key: '9a017bf7cbc52bd6828fe647e06b03a4601f988e', type: "button", class: "xpl-modal__close-button", "icon-only": true, variant: "tertiary", "aria-label": "Close modal", onClick: this.handleDialogClose }, hAsync("xpl-icon", { key: '070c9cb695ee0a85f7bd25e19ceb7cb85ba2d178', icon: "xmark" })), this.variant === 'warning' && (hAsync("xpl-icon", { key: '7478625b27763ff01034195312af4e59411174d6', size: 20, icon: "triangle-warning", class: "xpl-modal__alert-icon" })), hAsync("span", { key: '092491fb296dd9d4658e3bf4fd2425d0cad791ee', class: "xpl-modal__title-text", id: this.titleId }, hAsync("slot", { key: 'd91c682a6f51a08e73281f27944bf83b73a026ee', name: "title" }))), hAsync("div", { key: '9a0b0ff9427d66ac44fd65649460ce62cf7b1cc4', class: "xpl-modal__subtitle" }, hAsync("slot", { key: '41c6093d7cb31838e49b20d237a0c273df79dabf', name: "subtitle" }))), hAsync("div", { key: 'afab32dbee43906310935cb02437e00d2743f555', class: "xpl-modal__body" }, hAsync("slot", { key: 'dbb0a6eb15e6c519f2eb40a0cfc8de2a68a37811', name: "body" })), hAsync("div", { key: '2e3501f03e002a40737dd02a4a6cfd47c0f08205', class: "xpl-modal__footer" }, hAsync("slot", { key: '4b21250f2cc15be589c2622f8cdeda679f881733', name: "primary" }), hAsync("slot", { key: '490d23bfd88b209545e326e1e236beea9f4289da', name: "secondary" }), hAsync("slot", { key: 'b8d1457361776e33ebcc3404db8ab6c901be1500', name: "tertiary" })))));
|
|
27721
27721
|
}
|
|
27722
27722
|
get element() { return getElement(this); }
|
|
27723
27723
|
static get watchers() { return {
|
|
@@ -27826,11 +27826,11 @@ class NavHeaderMenu {
|
|
|
27826
27826
|
}
|
|
27827
27827
|
render() {
|
|
27828
27828
|
const hasProfile = !!this.username || !!this.email;
|
|
27829
|
-
return (hAsync(Host, { key: '
|
|
27829
|
+
return (hAsync(Host, { key: 'b79342bf524458e0119a92ba754a700c70c8652f', class: {
|
|
27830
27830
|
'xpl-nav-header-menu': true,
|
|
27831
27831
|
'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
|
|
27832
27832
|
dark: true,
|
|
27833
|
-
} }, hasProfile && (hAsync("div", { key: '
|
|
27833
|
+
} }, hasProfile && (hAsync("div", { key: 'db3789fefeb61c27d081e2f18be1f4f42d4d1696', class: "xpl-nav-header-menu__profile" }, hAsync("div", { key: '00415b3ea671d119ae7b196eb10b0f3fd423d302', class: "xpl-nav-header-menu__info" }, this.username && (hAsync("div", { key: 'e3eb1b9425f3902bffc493fd1f26065cea2e9eb0', class: "xpl-nav-header-menu__username", title: this.username }, this.username)), this.email && (hAsync("div", { key: 'efeaeddcf8598169c014ff84a0dc2bd8c445ec44', class: "xpl-nav-header-menu__email", title: this.email }, this.email))))), hAsync("div", { key: '2fc3f202f45c4fb9e330f16f71ad68d6c03d6dc8', class: "xpl-nav-header-menu__right-aside-mobile" }, hAsync("slot", { key: 'd375a64cc228d4514ab5c6a59d6781799eba174f', name: "right-aside-mobile" })), hAsync("div", { key: '113008a606e34af2e8e23eb7d261858d2d631d28', class: "xpl-nav-header-menu__slot", role: "list" }, hAsync("slot", { key: '214afe30add1001da07ff4870f29bcd932d8c199' }))));
|
|
27834
27834
|
}
|
|
27835
27835
|
get el() { return getElement(this); }
|
|
27836
27836
|
static get cmpMeta() { return {
|
|
@@ -27859,11 +27859,11 @@ class NavItem {
|
|
|
27859
27859
|
}
|
|
27860
27860
|
}
|
|
27861
27861
|
render() {
|
|
27862
|
-
return (hAsync(Host, { key: '
|
|
27862
|
+
return (hAsync(Host, { key: '12b0be7801fdf60e06dca270ec5d211e2c81af21', class: "xpl-nav-item", role: "listitem", onClick: () => {
|
|
27863
27863
|
if (this.navControl) {
|
|
27864
27864
|
this.onNavToggle();
|
|
27865
27865
|
}
|
|
27866
|
-
} }, hAsync("slot", { key: '
|
|
27866
|
+
} }, hAsync("slot", { key: '1716229d1110bed1911c0921d87dd6238e7f59aa', name: "link" }, hAsync("slot", { key: '653fd2830c8e67d3c9fe65a0994bd167173e110b', name: "icon" }), hAsync("slot", { key: 'a33f79ab45a2a65debca49fbedabf2daef2428c8' }))));
|
|
27867
27867
|
}
|
|
27868
27868
|
static get cmpMeta() { return {
|
|
27869
27869
|
"$flags$": 260,
|
|
@@ -27957,19 +27957,19 @@ class Pagination {
|
|
|
27957
27957
|
render() {
|
|
27958
27958
|
const disablePrev = this.currentPage <= 1;
|
|
27959
27959
|
const disableNext = this.currentPage >= this.totalPages;
|
|
27960
|
-
return (hAsync(Host, { key: '
|
|
27960
|
+
return (hAsync(Host, { key: 'c1236f3a51a835bc7609f1871718535ad26c608c', class: {
|
|
27961
27961
|
'xpl-pagination': true,
|
|
27962
27962
|
'xpl-pagination__with-page-control': this.withPageControl,
|
|
27963
27963
|
'xpl-pagination__no-page-control': !this.withPageControl,
|
|
27964
|
-
} }, this.withPageControl && (hAsync("div", { key: '
|
|
27964
|
+
} }, this.withPageControl && (hAsync("div", { key: 'b9a960512110e71ec4403a7440d9a56d2d25eb5a', class: "xpl-pagination__rows-per-page" }, hAsync("label", { key: '77d5c99067a80412b99fd7319a647fea67be9ae2', class: "xpl-pagination__rows-label" }, "Rows per page:"), hAsync("xpl-select", { key: '530bac1621b9901c52f895649f838ddd7919522f', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
|
|
27965
27965
|
label: option.toString(),
|
|
27966
27966
|
value: option.toString(),
|
|
27967
27967
|
isSelected: option === this.selectedRowsPerPage,
|
|
27968
27968
|
})), ref: (el) => {
|
|
27969
27969
|
this.rowsPerPageSelectRef = el ?? null;
|
|
27970
|
-
} }))), hAsync("div", { key: '
|
|
27970
|
+
} }))), hAsync("div", { key: 'f610c71b562c73d1ef6ce81550ee9c5f5318b46a', class: "xpl-pagination__pager" }, hAsync("button", { key: 'f507f26b1b3239c170c60568da2a068ffdc65def', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, hAsync("xpl-icon", { key: 'c1079f632bb84a97bcb43ab7f39af19d2532e73c', icon: "arrow-left", size: 20 })), hAsync("xpl-select", { key: 'b50192f67d3e5b5c6723131d554d1dad41f8e2a3', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
|
|
27971
27971
|
this.pageSelectRef = el ?? null;
|
|
27972
|
-
} }, hAsync("div", { key: '
|
|
27972
|
+
} }, hAsync("div", { key: '35cb95f79705633857df8ef3a48b479c85d6acdd', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), hAsync("button", { key: '79a8b1f267fe675eb626d655a68ad5c72cd6c89f', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, hAsync("xpl-icon", { key: '01ae55d805794de8fb9f332a37314e152fb1f5bb', icon: "arrow-right", size: 20 })))));
|
|
27973
27973
|
}
|
|
27974
27974
|
static get watchers() { return {
|
|
27975
27975
|
"currentPage": [{
|
|
@@ -28685,16 +28685,16 @@ class Popover {
|
|
|
28685
28685
|
});
|
|
28686
28686
|
}
|
|
28687
28687
|
render() {
|
|
28688
|
-
return (hAsync(Host, { key: '
|
|
28688
|
+
return (hAsync(Host, { key: 'a14924382ef3c963fa0d8c6dc4575c1fcb3a8c3a' }, hAsync("div", { key: 'a9bb868211d6866a8f3d097841c41236c37b0ae5', class: {
|
|
28689
28689
|
'xpl-popover': true,
|
|
28690
28690
|
[`xpl-popover--${this.actualPosition}`]: true,
|
|
28691
28691
|
'xpl-popover--is-open': this.isOpenState,
|
|
28692
|
-
} }, hAsync("span", { key: '
|
|
28692
|
+
} }, hAsync("span", { key: '1502c64a98fbf22af9516e5e9aa905e79ea13ab3', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
|
|
28693
28693
|
this.triggerRef = el;
|
|
28694
|
-
} }, hAsync("slot", { key: '
|
|
28694
|
+
} }, hAsync("slot", { key: '56a3bdc8d33b010095645b5bfd4b82890351777b', name: "trigger" })), this.display === 'arrow' && (hAsync("div", { key: 'f69e9e12ab93f55267b8c23707eb48321f79a9c6', class: "xpl-popover__arrow" }, hAsync("svg", { key: '1064f5962035b2cbf6dc2d721b537cddb815323e', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '7490e8887c93cd357bc21e93c96ab8de3873892b', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), hAsync("path", { key: '6ab893d176866029ac33622a11e097541d5fdb74', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), hAsync("div", { key: '798414192900fab40f67986489753c8a63ec1d92', class: {
|
|
28695
28695
|
'xpl-popover__content': true,
|
|
28696
28696
|
[`xpl-popover__content--display-${this.display}`]: true,
|
|
28697
|
-
}, ref: (el) => (this.contentRef = el) }, hAsync("slot", { key: '
|
|
28697
|
+
}, ref: (el) => (this.contentRef = el) }, hAsync("slot", { key: '5c1f963e4009f5a8d30aaad7f0169164abf5bd43' })))));
|
|
28698
28698
|
}
|
|
28699
28699
|
get el() { return getElement(this); }
|
|
28700
28700
|
static get watchers() { return {
|
|
@@ -28750,12 +28750,12 @@ class ProgressBar {
|
|
|
28750
28750
|
return this.variant === 'indeterminate';
|
|
28751
28751
|
}
|
|
28752
28752
|
render() {
|
|
28753
|
-
return (hAsync(Host, { key: '
|
|
28753
|
+
return (hAsync(Host, { key: 'a33381f58e76e71c5a52d4e80fa1f37181f28c8d', class: {
|
|
28754
28754
|
'xpl-progress-bar': true,
|
|
28755
28755
|
[`xpl-progress-bar--${this.size}`]: true,
|
|
28756
28756
|
[`xpl-progress-bar--${this.variant}`]: true,
|
|
28757
28757
|
'xpl-progress-bar--complete': this.isComplete,
|
|
28758
|
-
} }, hAsync("div", { key: '
|
|
28758
|
+
} }, hAsync("div", { key: '6a86fcdc4933aa2ce4df38c2f1797516c3665c3a', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (hAsync("div", { key: '12f708882cd9eb13f6011c6e40a3b0fc6b4314aa', class: "xpl-progress-bar__header" }, this.label && hAsync("div", { key: '7a76032a1b457068607018e646b40fe294457fa8', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (hAsync("div", { key: 'dac51b18dda11bf46049a9d0d175821121eb230d', class: "xpl-progress-bar__icon" }, this.isError ? (hAsync("xpl-icon", { icon: "circle-xmark-1" })) : (hAsync("xpl-icon", { icon: "circle-check-1" })))))), hAsync("div", { key: '1923268a3dc1f8aa748f48eca2e991c1424582e3', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (hAsync("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, hAsync("div", { class: "xpl-progress-bar__indeterminate" }))) : (hAsync("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (hAsync("div", { key: 'b01a3ae4f73107a4e4938a53e7fa038867da0c53', class: "xpl-progress-bar__helper" }, this.helperText)))));
|
|
28759
28759
|
}
|
|
28760
28760
|
static get cmpMeta() { return {
|
|
28761
28761
|
"$flags$": 0,
|
|
@@ -28831,7 +28831,7 @@ class ProgressIndicator {
|
|
|
28831
28831
|
? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
|
|
28832
28832
|
: `Progress: step ${currentStepNumber} of ${totalSteps}`
|
|
28833
28833
|
: 'Progress';
|
|
28834
|
-
return (hAsync(Host, { key: '
|
|
28834
|
+
return (hAsync(Host, { key: 'fd361d06ed53a837d2f585f4c7d1d212cf6cad9b', class: hostClasses, role: "group", "aria-label": ariaLabel }, hAsync("div", { key: '88f819d70853796e7330bce7aab6a457c2ef959f', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
|
|
28835
28835
|
}
|
|
28836
28836
|
static get watchers() { return {
|
|
28837
28837
|
"steps": [{
|
|
@@ -28879,14 +28879,14 @@ class Radio {
|
|
|
28879
28879
|
return Boolean(this.checked);
|
|
28880
28880
|
}
|
|
28881
28881
|
render() {
|
|
28882
|
-
return (hAsync(Host, { key: '
|
|
28882
|
+
return (hAsync(Host, { key: '45436282d29873a5c640519eb4ad9aa3afb25b73', class: {
|
|
28883
28883
|
'xpl-checkbox-radio-container': true,
|
|
28884
28884
|
styled: !!this.styled,
|
|
28885
28885
|
disabled: !!this.disabled,
|
|
28886
|
-
} }, hAsync("input", { key: '
|
|
28886
|
+
} }, hAsync("input", { key: 'b0f7604cb5751f7fb2dc62960d5e7130d4fc0871', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), hAsync("label", { key: '05d3589852ebcf9ce5c3301cbc685547a45b61d4', class: {
|
|
28887
28887
|
'xpl-label': true,
|
|
28888
28888
|
'xpl-label--disabled': !!this.disabled,
|
|
28889
|
-
}, htmlFor: this.id }, hAsync("slot", { key: '
|
|
28889
|
+
}, htmlFor: this.id }, hAsync("slot", { key: '8790f97ad02c180680de269f2f4a0986736c5d4e' }), this.description && (hAsync("small", { key: '94a8e1eea919b8cfe7b4074702dce50e7399c6ab', class: {
|
|
28890
28890
|
'xpl-description': true,
|
|
28891
28891
|
'xpl-description--disabled': !!this.disabled,
|
|
28892
28892
|
} }, this.description)))));
|
|
@@ -28916,7 +28916,7 @@ class SecondaryNav {
|
|
|
28916
28916
|
registerInstance(this, hostRef);
|
|
28917
28917
|
}
|
|
28918
28918
|
render() {
|
|
28919
|
-
return (hAsync(Host, { key: '
|
|
28919
|
+
return (hAsync(Host, { key: 'dc00b09e91c4baa484084256b7b583363a518905', class: "xpl-secondary-nav" }, hAsync("nav", { key: 'daf32568baecfa600a6d51747446e82c0df44d1a', "aria-label": "Secondary Nav" }, hAsync("slot", { key: '6d6a2fa94e8779b7a4b9414fe29829eb1ee20125' }))));
|
|
28920
28920
|
}
|
|
28921
28921
|
static get cmpMeta() { return {
|
|
28922
28922
|
"$flags$": 260,
|
|
@@ -29121,7 +29121,7 @@ class Select {
|
|
|
29121
29121
|
if (visibleChoices >= this.visibleChoices)
|
|
29122
29122
|
return null;
|
|
29123
29123
|
visibleChoices += 1;
|
|
29124
|
-
return (hAsync("xpl-tag", { onClose: () => this.handleTagRemove(selectedChoices[i]) }, getDisplayValue(selectedChoices[i])));
|
|
29124
|
+
return (hAsync("xpl-tag", { disabled: this.disabled, onClose: () => this.handleTagRemove(selectedChoices[i]) }, getDisplayValue(selectedChoices[i])));
|
|
29125
29125
|
});
|
|
29126
29126
|
return tags;
|
|
29127
29127
|
}
|
|
@@ -29201,21 +29201,21 @@ class Select {
|
|
|
29201
29201
|
this.truncate &&
|
|
29202
29202
|
!this.customDisplayValue;
|
|
29203
29203
|
const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
|
|
29204
|
-
return (hAsync(Host, { key: '
|
|
29204
|
+
return (hAsync(Host, { key: '273b1e5d40c7873055bb735adf66c325d18ba676', class: {
|
|
29205
29205
|
'xpl-select': true,
|
|
29206
29206
|
'xpl-select--disabled': !!this.disabled,
|
|
29207
29207
|
'xpl-select--no-truncate': !this.truncate,
|
|
29208
29208
|
[this.classNames ?? '']: !!this.classNames,
|
|
29209
29209
|
}, onKeyDown: this.handleTabKeyDown, ref: (el) => {
|
|
29210
29210
|
this.container = el;
|
|
29211
|
-
} }, this.renderLabel(), hAsync("div", { key: '
|
|
29211
|
+
} }, this.renderLabel(), hAsync("div", { key: '87a42faab0ee127dfaa2ee75e9218900e9e0a4b3', class: {
|
|
29212
29212
|
'xpl-input': true,
|
|
29213
29213
|
'xpl-input--disabled': !!this.disabled,
|
|
29214
29214
|
'xpl-input--error': this.error !== undefined,
|
|
29215
|
-
} }, hAsync("div", { key: '
|
|
29215
|
+
} }, hAsync("div", { key: '22c839efb33132901419bab4dacbe9ffaf464d77', class: "xpl-input-wrapper" }, hAsync("button", { key: '68b88431715f567adfbe00c5f1bcdf9ab41f7360', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
|
|
29216
29216
|
e.preventDefault();
|
|
29217
29217
|
this.handleDropdownTrigger();
|
|
29218
|
-
}, type: "button" }, hAsync("div", { key: '
|
|
29218
|
+
}, type: "button" }, hAsync("div", { key: 'd1cf1ba8dbe86413a7de9911440204509fc4093b', class: {
|
|
29219
29219
|
'xpl-select-value': true,
|
|
29220
29220
|
'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
|
|
29221
29221
|
'has-value': this.value.length > 0,
|
|
@@ -29235,7 +29235,7 @@ class Select {
|
|
|
29235
29235
|
return this.renderSelectedTags();
|
|
29236
29236
|
}
|
|
29237
29237
|
return this.placeholder;
|
|
29238
|
-
})(), isTextTruncated && truncatedText), hAsync("xpl-icon", { key: '
|
|
29238
|
+
})(), isTextTruncated && truncatedText), hAsync("xpl-icon", { key: 'f44a543e315a5715d5d077ce7601956d8485f5f1', class: "xpl-select__chevron-down", icon: this.selectIcon ?? 'chevron-down' }))), !this.disabled && (hAsync("xpl-dropdown", { key: 'dd2355886ce290d697431e00c8f4b7bc41c87429', ref: (el) => {
|
|
29239
29239
|
this.dropdown = el ?? null;
|
|
29240
29240
|
}, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
|
|
29241
29241
|
const { options } = component;
|
|
@@ -29244,7 +29244,7 @@ class Select {
|
|
|
29244
29244
|
}
|
|
29245
29245
|
}, onIsOpenChange: (e) => {
|
|
29246
29246
|
this.dropdownOpenState = e.detail;
|
|
29247
|
-
}, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), hAsync("input", { key: '
|
|
29247
|
+
}, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), hAsync("input", { key: '18472290f7adfe3c02ee90759180404ec33aa1e2', type: "hidden", name: this.name, value: this.value })));
|
|
29248
29248
|
}
|
|
29249
29249
|
static get watchers() { return {
|
|
29250
29250
|
"choices": [{
|
|
@@ -29554,10 +29554,10 @@ class SideNav {
|
|
|
29554
29554
|
;
|
|
29555
29555
|
}
|
|
29556
29556
|
render() {
|
|
29557
|
-
return (hAsync(Host, { key: '
|
|
29557
|
+
return (hAsync(Host, { key: '8cffb32c21217edd67117acb264f3df5587fa32d', class: {
|
|
29558
29558
|
'xpl-side-nav': true,
|
|
29559
29559
|
'xpl-side-nav--open': this.open,
|
|
29560
|
-
} }, hAsync("xpl-button", { key: '
|
|
29560
|
+
} }, hAsync("xpl-button", { key: '5a82bbc6a65690f550fe192aa6cd593efbf86bc8', class: "xpl-side-nav__toggle", variant: "tertiary", iconOnly: true, icon: this.open ? 'sidebar-left-hide' : 'sidebar-left-show', "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onToggleClick }), hAsync("div", { key: '1315f34c7a6e1c793cc347292117f2e5992f074d', class: "xpl-side-nav__wrapper" }, hAsync("nav", { key: '4b7446999c74b1554dae84d04c439a75b712b429', class: "xpl-side-nav__content", "aria-label": this.label }, hAsync("div", { key: 'bce43018bf61c73dde0adb053fa87d0789edd329', class: "xpl-side-nav__scroll-area" }, this.hasHeaderSlot && (hAsync("div", { key: 'd70ecd07a6c71dd76ce162b9167d3b5a11ba4ea8', class: "xpl-side-nav__header" }, hAsync("slot", { key: 'c9d10e57d77a69cf00e86c2a17a94eba5e54d23e', name: "nav-header" }))), hAsync("div", { key: '6873372f5eb854ee7ef88e6d3085d81be62fc508', class: "xpl-side-nav__section" }, hAsync("slot", { key: 'b07fdb332e8ccaaa69db61ade9bb88e43d6f8753', name: "section" }))), hAsync("div", { key: 'f34e444c538cbf246aee52ebfe35657a8fa1d706', class: "xpl-side-nav__footer" }, hAsync("slot", { key: 'da70c80d9378ad1e0dbf23d33d521021c346ee23', name: "nav-footer" })))), hAsync("xpl-backdrop", { key: '769576cb0961b8a00308c748d0efbaa0ef2b3ca5', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
|
|
29561
29561
|
}
|
|
29562
29562
|
get el() { return getElement(this); }
|
|
29563
29563
|
static get watchers() { return {
|
|
@@ -29666,8 +29666,8 @@ class SideNavHeaderItem {
|
|
|
29666
29666
|
const showTrailing = this.hasTrailingSlot || showAutoChevron;
|
|
29667
29667
|
const leading = showLeading ? (hAsync("span", { class: "xpl-side-nav-header-item__leading" }, hAsync("slot", { name: "leading" }, this.icon ? hAsync("xpl-icon", { icon: this.icon, size: 16 }) : null))) : null;
|
|
29668
29668
|
const trailing = showTrailing ? (hAsync("span", { class: "xpl-side-nav-header-item__trailing", "aria-hidden": showAutoChevron ? 'true' : undefined }, hAsync("slot", { name: "trailing" }, showAutoChevron ? (hAsync("xpl-icon", { icon: "chevron-expand-y", size: 16 })) : null))) : null;
|
|
29669
|
-
const content = (hAsync("span", { key: '
|
|
29670
|
-
return (hAsync(Host, { key: '
|
|
29669
|
+
const content = (hAsync("span", { key: '3ea94d1fda38199a65303a9bf911de4a7d48aacc', class: "xpl-side-nav-header-item__content" }, leading, hAsync("span", { key: 'a3f369eb6e7bb4e9a283e8f525a356b152d9c017', class: "xpl-side-nav-header-item__label" }, this.label ?? ''), trailing));
|
|
29670
|
+
return (hAsync(Host, { key: 'd979308c18fd071483cbbe8301ed90ffb842a9ac', class: {
|
|
29671
29671
|
'xpl-side-nav-header-item': true,
|
|
29672
29672
|
'xpl-side-nav-header-item--product-label': !isSubAccount,
|
|
29673
29673
|
'xpl-side-nav-header-item--sub-account': isSubAccount,
|
|
@@ -29832,14 +29832,14 @@ class SideNavItem {
|
|
|
29832
29832
|
expanded: this.expanded,
|
|
29833
29833
|
selected: this.selected,
|
|
29834
29834
|
};
|
|
29835
|
-
return (hAsync(Host, { key: '
|
|
29835
|
+
return (hAsync(Host, { key: '059210d35fdf3561fa2bc4f541f80fbb1e570506', class: {
|
|
29836
29836
|
'xpl-side-nav-item': true,
|
|
29837
29837
|
'xpl-side-nav-item--link-disabled': this.link && this.disabled,
|
|
29838
29838
|
} }, this.link ? (hAsync("slot", null)) : (hAsync("button", { type: "button", class: buttonClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, hAsync("span", { class: "xpl-side-nav-item__leading" }, hAsync("slot", { name: "leading" }, this.icon ? (hAsync("xpl-icon", { icon: this.icon, size: 16 })) : null)), hAsync("span", { class: "xpl-side-nav-item__label" }, this.label ?? ''), (this.hasTrailingSlot || this.hasChildren) && (hAsync("span", { class: {
|
|
29839
29839
|
'xpl-side-nav-item__trailing': true,
|
|
29840
29840
|
'xpl-side-nav-item__trailing--chevron': showAutoChevron,
|
|
29841
29841
|
expanded: showAutoChevron && this.expanded,
|
|
29842
|
-
}, "aria-hidden": showAutoChevron ? 'true' : undefined }, hAsync("slot", { name: "trailing" }, showAutoChevron ? (hAsync("xpl-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: 16 })) : null))))), this.hasChildren && !this.link && (hAsync("div", { key: '
|
|
29842
|
+
}, "aria-hidden": showAutoChevron ? 'true' : undefined }, hAsync("slot", { name: "trailing" }, showAutoChevron ? (hAsync("xpl-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: 16 })) : null))))), this.hasChildren && !this.link && (hAsync("div", { key: '47b1eba18028549e03394678bca58beee9b2f157', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, hAsync("div", { key: '7b6137a009106e3adfb99928bff429bea92b63e2', class: "xpl-side-nav-item__children-inner" }, hAsync("slot", { key: '3cf83a5e3e8367ef4d5bfbedb8c22bc6bf1efaa7' }))))));
|
|
29843
29843
|
}
|
|
29844
29844
|
get el() { return getElement(this); }
|
|
29845
29845
|
static get watchers() { return {
|
|
@@ -29954,17 +29954,17 @@ class SideNavSection {
|
|
|
29954
29954
|
const hasHeading = !!this.heading?.trim();
|
|
29955
29955
|
const childrenId = this.childrenId ?? ensureSideNavSectionChildrenId(this.el, this.childrenId);
|
|
29956
29956
|
const titleRow = [
|
|
29957
|
-
hAsync("span", { key: '
|
|
29958
|
-
hAsync("span", { key: '
|
|
29957
|
+
hAsync("span", { key: '41b4dd48eaf9fabca8f4c1e4e506200055d46f77', class: "xpl-side-nav-section__title" }, this.heading ?? ''),
|
|
29958
|
+
hAsync("span", { key: 'af345692b55b47dada80dfad85312e45d7cf5f43', class: "xpl-side-nav-section__badge", hidden: !this.hasBadgeSlot }, hAsync("slot", { key: '381c23d89de7de9b1663cd746ce9561688a27463', name: "badge" })),
|
|
29959
29959
|
this.collapsible ? (hAsync("span", { class: "xpl-side-nav-section__chevron", "aria-hidden": "true" }, hAsync("xpl-icon", { icon: this.expanded ? 'chevron-down' : 'chevron-right', size: 16 }))) : null,
|
|
29960
29960
|
];
|
|
29961
|
-
return (hAsync(Host, { key: '
|
|
29961
|
+
return (hAsync(Host, { key: 'b3d7e988d1b64afce020137c0d8f8ef89481ef43', class: {
|
|
29962
29962
|
'xpl-side-nav-section': true,
|
|
29963
29963
|
'xpl-side-nav-section--static': !this.collapsible,
|
|
29964
|
-
} }, this.collapsible ? (hAsync("button", { type: "button", class: "xpl-side-nav-section__header", "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": childrenId, "aria-label": hasHeading || this.hasNamedBadgeSlot ? undefined : 'Toggle section', onClick: this.handleHeaderClick }, titleRow)) : (hAsync("div", { class: "xpl-side-nav-section__header" }, titleRow)), hAsync("div", { key: '
|
|
29964
|
+
} }, this.collapsible ? (hAsync("button", { type: "button", class: "xpl-side-nav-section__header", "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": childrenId, "aria-label": hasHeading || this.hasNamedBadgeSlot ? undefined : 'Toggle section', onClick: this.handleHeaderClick }, titleRow)) : (hAsync("div", { class: "xpl-side-nav-section__header" }, titleRow)), hAsync("div", { key: '0e442a9a70a8eacb4b9454f941a3ee0c466c3496', id: childrenId, class: {
|
|
29965
29965
|
'xpl-side-nav-section__children': true,
|
|
29966
29966
|
expanded: showChildren,
|
|
29967
|
-
}, inert: !showChildren ? true : undefined }, hAsync("div", { key: '
|
|
29967
|
+
}, inert: !showChildren ? true : undefined }, hAsync("div", { key: 'f1bc884e69c5a8902f7e12829901e289f73a530e', class: "xpl-side-nav-section__children-inner" }, hAsync("slot", { key: 'bd9f9db68b6f6e1d3a28527d87f4bf797ae49022' })))));
|
|
29968
29968
|
}
|
|
29969
29969
|
get el() { return getElement(this); }
|
|
29970
29970
|
static get cmpMeta() { return {
|
|
@@ -29990,7 +29990,7 @@ class Skeleton {
|
|
|
29990
29990
|
this.size = 'custom';
|
|
29991
29991
|
}
|
|
29992
29992
|
render() {
|
|
29993
|
-
return (hAsync(Host, { key: '
|
|
29993
|
+
return (hAsync(Host, { key: 'faa4173a2910d1dc3943fca5e7efbf5d1805aa9b', class: {
|
|
29994
29994
|
'xpl-skeleton': true,
|
|
29995
29995
|
[`xpl-skeleton--shape-${this.shape}`]: true,
|
|
29996
29996
|
[`xpl-skeleton--size-${this.size}`]: true,
|
|
@@ -30052,7 +30052,7 @@ class Slideout {
|
|
|
30052
30052
|
this.handleScroll();
|
|
30053
30053
|
}
|
|
30054
30054
|
render() {
|
|
30055
|
-
return (hAsync(Host, { key: '
|
|
30055
|
+
return (hAsync(Host, { key: '6a677f3ef03392e8c17e96eb1a35244cc65249cc', class: "xpl-slideout" }, this.backdrop && this.isOpen && (hAsync("xpl-backdrop", { key: '8e93a0fe45fdbf00f9b9d72a3b703f4ed91724b7', onClick: this.handleClose })), hAsync("aside", { key: '451a572b79f74f614756c77b7aae9ece7e53a615', class: `slideout slideout--${!this.isOpen && 'closed'}` }, hAsync("header", { key: '4e6f0d5c525ffe16f20a2d85d21e6c85d6213f1e', class: "header" }, hAsync("div", { key: 'bf69e4a7e0be7b1ea763b5d17da90b31f122e7fe', class: "title" }, hAsync("slot", { key: 'b5b3298d2f05a5e99dc2ba934c306c7167eeb861', name: "title" }), hAsync("xpl-button", { key: 'da76c0538824d6d7cdce7385daf77c74fd3e6432', class: "close-button", "icon-only": true, variant: "tertiary", onClick: this.handleClose }, hAsync("xpl-icon", { key: '02d4e1b6d191683f95c5fe9d93db6a8eb6260e32', icon: "xmark" }))), hAsync("div", { key: 'daf09af3d4ec41943ca063fb0b0afddc6075e549', class: "subtitle" }, hAsync("slot", { key: '755b4e4f6bfdcc7f94f0b2ed67526d7f97c77842', name: "subtitle" })), hAsync("div", { key: '294b6650cdc4b15a8f5b9005a24304cccda91ddb', class: "search" }, hAsync("slot", { key: '4b85802d14eb9ab528749727846637a0702ff2d1', name: "search" }))), hAsync("xpl-divider", { key: '335792083b7072b6973e4b684062d6498d1cfc57', tier: 0, class: "divider top" }), hAsync("article", { key: '3a0920577f4599b0ea9a3762ea066b0e8b9d932a', class: "content", tabIndex: 0 }, hAsync("slot", { key: 'b085ef369c4d685ae0e6e518c28e95cd883d1e03', name: "content" })), this.showFooter && (hAsync("footer", { key: '663e2392d8484bb4875dcb4b9411b8ae6b805087' }, hAsync("xpl-divider", { key: '6d0d50a6cc038a19ed5465a9fe79854b2519e70b', tier: 0, class: "divider bottom" }), hAsync("div", { key: '29e9eaea051247ff8e9be18af54f0d3959590759', class: "footer" }, hAsync("slot", { key: '4e9d8e3a054a72fba8392afdefcdca63e8ce8068', name: "tertiary" }), hAsync("slot", { key: '44b764a99064de792309995cdc53b4ca8a82f8da', name: "secondary" }), hAsync("slot", { key: 'c96cedf9662bab571a8cab244c8fce6172691628', name: "primary" })))))));
|
|
30056
30056
|
}
|
|
30057
30057
|
get el() { return getElement(this); }
|
|
30058
30058
|
static get watchers() { return {
|
|
@@ -30955,10 +30955,10 @@ class TabPanel {
|
|
|
30955
30955
|
const t = this.target ?? '';
|
|
30956
30956
|
const panelId = tabPanelDomId(groupId, t);
|
|
30957
30957
|
const labelledBy = tabTriggerId(groupId, t);
|
|
30958
|
-
return (hAsync(Host, { key: '
|
|
30958
|
+
return (hAsync(Host, { key: 'ab151f12048635eb5e47f4cbafcd6f04637f7dfd', "aria-labelledby": labelledBy, class: {
|
|
30959
30959
|
'xpl-tab-panel': true,
|
|
30960
30960
|
'xpl-tab-panel--selected': this.selected,
|
|
30961
|
-
}, id: panelId, role: "tabpanel" }, hAsync("slot", { key: '
|
|
30961
|
+
}, id: panelId, role: "tabpanel" }, hAsync("slot", { key: '81d82c0f3d8b019ec0abf6cbec34529b216b6533' })));
|
|
30962
30962
|
}
|
|
30963
30963
|
get el() { return getElement(this); }
|
|
30964
30964
|
static get cmpMeta() { return {
|
|
@@ -30974,6 +30974,53 @@ class TabPanel {
|
|
|
30974
30974
|
}; }
|
|
30975
30975
|
}
|
|
30976
30976
|
|
|
30977
|
+
const XPL_TABLE_COLUMN_WIDTHS_CHANGE_EVENT = 'xplTableColumnWidthsChange';
|
|
30978
|
+
const TABLE_HEADER_CELL_MIN_WIDTH_PX = 48;
|
|
30979
|
+
const getGridColumnWidthFromHeaderCell = (cell) => {
|
|
30980
|
+
if (cell.tagName.toLowerCase() !== 'xpl-table-header-cell') {
|
|
30981
|
+
return 'auto';
|
|
30982
|
+
}
|
|
30983
|
+
const host = cell;
|
|
30984
|
+
const fromProp = typeof host.columnWidth === 'string' ? host.columnWidth.trim() : '';
|
|
30985
|
+
const fromAttr = cell.getAttribute('column-width')?.trim() ?? '';
|
|
30986
|
+
const columnTrack = fromProp || fromAttr;
|
|
30987
|
+
if (columnTrack.length > 0) {
|
|
30988
|
+
return columnTrack;
|
|
30989
|
+
}
|
|
30990
|
+
const w = host.width;
|
|
30991
|
+
if (typeof w === 'number' && Number.isFinite(w) && w > 0) {
|
|
30992
|
+
return `${Math.max(TABLE_HEADER_CELL_MIN_WIDTH_PX, w)}px`;
|
|
30993
|
+
}
|
|
30994
|
+
const raw = cell.getAttribute('width');
|
|
30995
|
+
if (raw === null || raw === '') {
|
|
30996
|
+
return 'auto';
|
|
30997
|
+
}
|
|
30998
|
+
if (/^\s*\d+(\.\d+)?\s*$/.test(raw)) {
|
|
30999
|
+
const n = Number.parseFloat(raw);
|
|
31000
|
+
if (Number.isFinite(n) && n > 0) {
|
|
31001
|
+
return `${Math.max(TABLE_HEADER_CELL_MIN_WIDTH_PX, n)}px`;
|
|
31002
|
+
}
|
|
31003
|
+
return 'auto';
|
|
31004
|
+
}
|
|
31005
|
+
return raw.trim();
|
|
31006
|
+
};
|
|
31007
|
+
const SELECTION_MARK = 'data-xpl-selection-managed';
|
|
31008
|
+
const ROW_REORDER_MARK = 'data-xpl-row-reorder-managed';
|
|
31009
|
+
const getSortAffordanceIconName = (sortDirection) => {
|
|
31010
|
+
if (sortDirection === 'asc')
|
|
31011
|
+
return 'arrow-up';
|
|
31012
|
+
return 'arrow-down';
|
|
31013
|
+
};
|
|
31014
|
+
const cycleSortDirection = (current) => {
|
|
31015
|
+
switch (current) {
|
|
31016
|
+
case 'asc':
|
|
31017
|
+
return 'desc';
|
|
31018
|
+
case 'desc':
|
|
31019
|
+
return null;
|
|
31020
|
+
default:
|
|
31021
|
+
return 'asc';
|
|
31022
|
+
}
|
|
31023
|
+
};
|
|
30977
31024
|
const getIconType = (sortType) => {
|
|
30978
31025
|
switch (sortType) {
|
|
30979
31026
|
case 'asc':
|
|
@@ -30984,58 +31031,148 @@ const getIconType = (sortType) => {
|
|
|
30984
31031
|
return 'dash';
|
|
30985
31032
|
}
|
|
30986
31033
|
};
|
|
31034
|
+
|
|
31035
|
+
function getNearestTableBodyRowFromNode(node) {
|
|
31036
|
+
const el = node instanceof HTMLElement ? node : null;
|
|
31037
|
+
if (!el) {
|
|
31038
|
+
return null;
|
|
31039
|
+
}
|
|
31040
|
+
const row = el.closest('xpl-table-row');
|
|
31041
|
+
return row != null ? row : null;
|
|
31042
|
+
}
|
|
31043
|
+
function getNextVisibleTableBodyRowAfter(element) {
|
|
31044
|
+
const parent = element.parentElement;
|
|
31045
|
+
if (!parent)
|
|
31046
|
+
return null;
|
|
31047
|
+
const siblings = Array.from(parent.children);
|
|
31048
|
+
const idx = siblings.indexOf(element);
|
|
31049
|
+
if (idx === -1)
|
|
31050
|
+
return null;
|
|
31051
|
+
for (let i = idx + 1; i < siblings.length; i += 1) {
|
|
31052
|
+
const n = siblings[i];
|
|
31053
|
+
if (n.tagName.toLowerCase() === 'xpl-table-row' && !n.hasAttribute('hidden')) {
|
|
31054
|
+
return n;
|
|
31055
|
+
}
|
|
31056
|
+
}
|
|
31057
|
+
return null;
|
|
31058
|
+
}
|
|
31059
|
+
function moveRowInTableBody(body, draggedRow, dropTargetRow) {
|
|
31060
|
+
if (draggedRow === dropTargetRow || draggedRow.parentElement !== body) {
|
|
31061
|
+
return;
|
|
31062
|
+
}
|
|
31063
|
+
if (dropTargetRow.parentElement !== body) {
|
|
31064
|
+
return;
|
|
31065
|
+
}
|
|
31066
|
+
const visible = Array.from(body.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-row' && !c.hasAttribute('hidden'));
|
|
31067
|
+
const fromIndex = visible.indexOf(draggedRow);
|
|
31068
|
+
const toIndex = visible.indexOf(dropTargetRow);
|
|
31069
|
+
if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
|
|
31070
|
+
return;
|
|
31071
|
+
}
|
|
31072
|
+
if (fromIndex < toIndex) {
|
|
31073
|
+
const nextVisible = getNextVisibleTableBodyRowAfter(dropTargetRow);
|
|
31074
|
+
if (nextVisible) {
|
|
31075
|
+
body.insertBefore(draggedRow, nextVisible);
|
|
31076
|
+
}
|
|
31077
|
+
else {
|
|
31078
|
+
body.insertBefore(draggedRow, null);
|
|
31079
|
+
}
|
|
31080
|
+
}
|
|
31081
|
+
else {
|
|
31082
|
+
body.insertBefore(draggedRow, dropTargetRow);
|
|
31083
|
+
}
|
|
31084
|
+
}
|
|
31085
|
+
|
|
31086
|
+
function bodyRowFromDragTarget(target) {
|
|
31087
|
+
return getNearestTableBodyRowFromNode(target);
|
|
31088
|
+
}
|
|
31089
|
+
function tableBodyRowFromEvent(ev) {
|
|
31090
|
+
const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
|
|
31091
|
+
const row = path.find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-table-row');
|
|
31092
|
+
return row ?? bodyRowFromDragTarget(ev.target);
|
|
31093
|
+
}
|
|
31094
|
+
function reorderDragHandleFromEvent(ev) {
|
|
31095
|
+
const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
|
|
31096
|
+
const handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
|
|
31097
|
+
return handle ?? null;
|
|
31098
|
+
}
|
|
30987
31099
|
class Table {
|
|
30988
31100
|
constructor(hostRef) {
|
|
30989
31101
|
registerInstance(this, hostRef);
|
|
30990
|
-
this.
|
|
31102
|
+
this.rowOrderChange = createEvent(this, "rowOrderChange", 3);
|
|
31103
|
+
this.rowSelectionChange = createEvent(this, "rowSelectionChange", 3);
|
|
30991
31104
|
this.sortChanged = createEvent(this, "sortChanged", 3);
|
|
30992
|
-
this.
|
|
30993
|
-
this.
|
|
30994
|
-
this.
|
|
31105
|
+
this.tableSelect = createEvent(this, "tableSelect", 7);
|
|
31106
|
+
this.columnWidthsToken = '';
|
|
31107
|
+
this.lastEmittedRowSelectionKey = '';
|
|
31108
|
+
this.draggedRow = null;
|
|
31109
|
+
this.pendingDragRow = null;
|
|
31110
|
+
this.pointerUpClearPending = null;
|
|
31111
|
+
this.reorderKeyboardTimers = new TimerManager();
|
|
31112
|
+
this.onReorderHandleKeydown = (ev) => {
|
|
31113
|
+
this.handleReorderHandleKeyDown(ev);
|
|
31114
|
+
};
|
|
30995
31115
|
this.areAllSelected = false;
|
|
31116
|
+
this.colCount = 0;
|
|
30996
31117
|
this.hasScrolled = false;
|
|
31118
|
+
this.keyboardReorderRowId = null;
|
|
31119
|
+
this.reorderLiveMessage = '';
|
|
31120
|
+
this.rowData = [];
|
|
31121
|
+
this.rowFooterData = [];
|
|
31122
|
+
this.selected = [];
|
|
31123
|
+
this.selectedRowIds = [];
|
|
30997
31124
|
this.sortTypeArray = [];
|
|
31125
|
+
this.isSortable = false;
|
|
31126
|
+
this.rowReorderable = false;
|
|
31127
|
+
this.selectedValues = [];
|
|
31128
|
+
this.sortableColumns = [];
|
|
31129
|
+
this.onGridScroll = (e) => {
|
|
31130
|
+
this.hasScrolled = e.target.scrollLeft > 0;
|
|
31131
|
+
};
|
|
30998
31132
|
this.selectAll = (e) => {
|
|
30999
|
-
const
|
|
31133
|
+
const { target } = e;
|
|
31134
|
+
if (!(target instanceof HTMLInputElement))
|
|
31135
|
+
return;
|
|
31136
|
+
const { checked } = target;
|
|
31000
31137
|
this.areAllSelected = checked;
|
|
31001
31138
|
this.selected =
|
|
31002
|
-
this.selectedValues.length > 0
|
|
31003
|
-
? Array.from(this.el.querySelectorAll('tbody td:first-child
|
|
31139
|
+
this.selectedValues && this.selectedValues.length > 0
|
|
31140
|
+
? Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => (checked ? input?.value : checked))
|
|
31004
31141
|
: this.selected.map(() => checked);
|
|
31005
|
-
this.
|
|
31142
|
+
this.onSelectionChange();
|
|
31006
31143
|
};
|
|
31007
31144
|
this.selectOne = (e, checkboxIdx) => {
|
|
31008
|
-
const
|
|
31009
|
-
|
|
31145
|
+
const { target } = e;
|
|
31146
|
+
if (!(target instanceof HTMLInputElement))
|
|
31147
|
+
return;
|
|
31148
|
+
const { checked, value } = target;
|
|
31149
|
+
this.areAllSelected = false;
|
|
31010
31150
|
this.selected = this.selected.map((v, selectedIdx) => {
|
|
31011
31151
|
if (selectedIdx !== checkboxIdx)
|
|
31012
31152
|
return v;
|
|
31013
|
-
return this.selectedValues.length > 0
|
|
31153
|
+
return this.selectedValues && this.selectedValues.length > 0
|
|
31014
31154
|
? checked
|
|
31015
|
-
?
|
|
31155
|
+
? value
|
|
31016
31156
|
: checked
|
|
31017
31157
|
: checked;
|
|
31018
31158
|
});
|
|
31019
|
-
this.
|
|
31020
|
-
this.onChange();
|
|
31159
|
+
this.onSelectionChange();
|
|
31021
31160
|
};
|
|
31022
|
-
this.
|
|
31161
|
+
this.onSelectionChange = () => {
|
|
31023
31162
|
this.tableSelect.emit({
|
|
31024
31163
|
selected: this.selected,
|
|
31025
31164
|
areAllSelected: this.areAllSelected,
|
|
31026
31165
|
});
|
|
31027
31166
|
};
|
|
31028
|
-
this.
|
|
31167
|
+
this.onLegacyScroll = () => {
|
|
31029
31168
|
this.hasScrolled = this.container.scrollLeft > 0;
|
|
31030
31169
|
};
|
|
31031
31170
|
this.sortBy = (col, sortTypeArray) => {
|
|
31032
31171
|
const handleSort = (a, b) => {
|
|
31033
|
-
if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase())
|
|
31172
|
+
if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase())
|
|
31034
31173
|
return -1;
|
|
31035
|
-
|
|
31036
|
-
if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase()) {
|
|
31174
|
+
if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase())
|
|
31037
31175
|
return 1;
|
|
31038
|
-
}
|
|
31039
31176
|
return 0;
|
|
31040
31177
|
};
|
|
31041
31178
|
switch (sortTypeArray[col]) {
|
|
@@ -31046,17 +31183,1062 @@ class Table {
|
|
|
31046
31183
|
this.rowData.sort((a, b) => handleSort(b, a));
|
|
31047
31184
|
break;
|
|
31048
31185
|
default:
|
|
31049
|
-
this.rowData = this.data ? Array.from(this.data) : [];
|
|
31186
|
+
this.rowData = this.data !== undefined ? Array.from(this.data) : [];
|
|
31050
31187
|
this.sortTypeArray[col] = null;
|
|
31051
31188
|
break;
|
|
31052
31189
|
}
|
|
31053
|
-
this.rowData = Array.from(this.rowData);
|
|
31190
|
+
this.rowData = Array.from(this.rowData);
|
|
31191
|
+
};
|
|
31192
|
+
this.setData = () => {
|
|
31193
|
+
this.rowData = this.data !== undefined ? Array.from(this.data) : [];
|
|
31194
|
+
};
|
|
31195
|
+
this.setFooterData = () => {
|
|
31196
|
+
this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
|
|
31197
|
+
};
|
|
31198
|
+
}
|
|
31199
|
+
watchColumns() {
|
|
31200
|
+
this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
|
|
31201
|
+
}
|
|
31202
|
+
watchData() {
|
|
31203
|
+
this.setData();
|
|
31204
|
+
}
|
|
31205
|
+
watchFooterData() {
|
|
31206
|
+
this.setFooterData();
|
|
31207
|
+
}
|
|
31208
|
+
watchReorderHandleIcon() {
|
|
31209
|
+
if (this.isLegacyMode || !this.rowReorderable)
|
|
31210
|
+
return;
|
|
31211
|
+
this.syncInjectedReorderHandleIcons();
|
|
31212
|
+
}
|
|
31213
|
+
watchReorderHandleIconKeyboard() {
|
|
31214
|
+
if (this.isLegacyMode || !this.rowReorderable)
|
|
31215
|
+
return;
|
|
31216
|
+
this.syncInjectedReorderHandleIcons();
|
|
31217
|
+
}
|
|
31218
|
+
watchRowReorderable(next) {
|
|
31219
|
+
if (this.isLegacyMode)
|
|
31220
|
+
return;
|
|
31221
|
+
if (!next) {
|
|
31222
|
+
this.keyboardReorderRowId = null;
|
|
31223
|
+
this.syncReorderHandleKeyboardA11y(null);
|
|
31224
|
+
this.removeManagedReorderCells();
|
|
31225
|
+
this.draggedRow = null;
|
|
31226
|
+
this.pendingDragRow = null;
|
|
31227
|
+
this.clearPendingDragListeners();
|
|
31228
|
+
this.reorderLiveMessage = '';
|
|
31229
|
+
this.queryBodyRows().forEach((r) => {
|
|
31230
|
+
r.removeAttribute('draggable');
|
|
31231
|
+
r.querySelector('.xpl-table__row-drag-handle')?.removeAttribute('draggable');
|
|
31232
|
+
r.classList.remove('xpl-table-row--dragging', 'xpl-table-row--drag-over');
|
|
31233
|
+
});
|
|
31234
|
+
this.colCount = 0;
|
|
31235
|
+
this.columnWidthsToken = '';
|
|
31236
|
+
}
|
|
31237
|
+
}
|
|
31238
|
+
watchSelectable(next) {
|
|
31239
|
+
if (this.isLegacyMode)
|
|
31240
|
+
return;
|
|
31241
|
+
if (!next) {
|
|
31242
|
+
this.selectedRowIds = [];
|
|
31243
|
+
this.lastEmittedRowSelectionKey = '';
|
|
31244
|
+
this.colCount = 0;
|
|
31245
|
+
this.columnWidthsToken = '';
|
|
31246
|
+
this.syncRowSelectedProps();
|
|
31247
|
+
}
|
|
31248
|
+
}
|
|
31249
|
+
componentWillLoad() {
|
|
31250
|
+
if (this.isLegacyMode) {
|
|
31251
|
+
this.ensureSelectAllValue();
|
|
31252
|
+
this.areAllSelected = false;
|
|
31253
|
+
this.setData();
|
|
31254
|
+
this.setFooterData();
|
|
31255
|
+
this.selected = new Array(this.rowData.length).fill(false);
|
|
31256
|
+
this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
|
|
31257
|
+
}
|
|
31258
|
+
}
|
|
31259
|
+
ensureSelectAllValue() {
|
|
31260
|
+
if (this.selectAllValue !== undefined) {
|
|
31261
|
+
return;
|
|
31262
|
+
}
|
|
31263
|
+
const hostId = this.el.id?.trim();
|
|
31264
|
+
if (hostId) {
|
|
31265
|
+
this.selectAllValue = `${hostId}-select-all`;
|
|
31266
|
+
return;
|
|
31267
|
+
}
|
|
31268
|
+
const persisted = this.el.getAttribute('data-select-all-value');
|
|
31269
|
+
if (persisted) {
|
|
31270
|
+
this.selectAllValue = persisted;
|
|
31271
|
+
return;
|
|
31272
|
+
}
|
|
31273
|
+
Table.selectAllSeq += 1;
|
|
31274
|
+
this.selectAllValue = `select-all-${Table.selectAllSeq}`;
|
|
31275
|
+
this.el.setAttribute('data-select-all-value', this.selectAllValue);
|
|
31276
|
+
}
|
|
31277
|
+
componentDidLoad() {
|
|
31278
|
+
if (!this.isLegacyMode) {
|
|
31279
|
+
this.syncCompositionalLayout();
|
|
31280
|
+
}
|
|
31281
|
+
}
|
|
31282
|
+
componentDidUpdate() {
|
|
31283
|
+
if (!this.isLegacyMode) {
|
|
31284
|
+
this.syncCompositionalLayout();
|
|
31285
|
+
}
|
|
31286
|
+
}
|
|
31287
|
+
disconnectedCallback() {
|
|
31288
|
+
this.clearPendingDragListeners();
|
|
31289
|
+
this.detachReorderHandleKeydownListeners();
|
|
31290
|
+
this.reorderKeyboardTimers.dispose();
|
|
31291
|
+
if (this.reorderAnnounceRaf !== undefined) {
|
|
31292
|
+
cancelAnimationFrame(this.reorderAnnounceRaf);
|
|
31293
|
+
this.reorderAnnounceRaf = undefined;
|
|
31294
|
+
}
|
|
31295
|
+
}
|
|
31296
|
+
handleHeaderCellColumnWidthsChange(ev) {
|
|
31297
|
+
if (this.isLegacyMode)
|
|
31298
|
+
return;
|
|
31299
|
+
const t = ev.target;
|
|
31300
|
+
if (!(t instanceof Node) || !this.el.contains(t))
|
|
31301
|
+
return;
|
|
31302
|
+
this.updateColumnWidths();
|
|
31303
|
+
}
|
|
31304
|
+
handleCompositionalCheckboxChange(ev) {
|
|
31305
|
+
if (this.isLegacyMode || !this.selectable)
|
|
31306
|
+
return;
|
|
31307
|
+
if (!this.isEventFromThisTable(ev.target))
|
|
31308
|
+
return;
|
|
31309
|
+
const path = ev.composedPath?.() ?? [];
|
|
31310
|
+
let checkboxHost = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-checkbox');
|
|
31311
|
+
if (!checkboxHost &&
|
|
31312
|
+
ev.target &&
|
|
31313
|
+
typeof ev.target.closest === 'function') {
|
|
31314
|
+
checkboxHost = ev.target.closest('xpl-checkbox') ?? undefined;
|
|
31315
|
+
}
|
|
31316
|
+
if (!checkboxHost || !this.el.contains(checkboxHost))
|
|
31317
|
+
return;
|
|
31318
|
+
const row = checkboxHost.closest('xpl-table-row');
|
|
31319
|
+
if (!row || !this.isDirectChildBodyRow(row))
|
|
31320
|
+
return;
|
|
31321
|
+
const cell = checkboxHost.closest('xpl-table-cell');
|
|
31322
|
+
if (!cell)
|
|
31323
|
+
return;
|
|
31324
|
+
const selectionIdx = this.getSelectionColumnIndex();
|
|
31325
|
+
if (selectionIdx === null)
|
|
31326
|
+
return;
|
|
31327
|
+
const bodyCells = Table.getBodyRowCells(row);
|
|
31328
|
+
const colIdx = bodyCells.indexOf(cell);
|
|
31329
|
+
if (colIdx !== selectionIdx)
|
|
31330
|
+
return;
|
|
31331
|
+
ev.stopPropagation();
|
|
31332
|
+
const rowId = Table.getRowIdForRow(row);
|
|
31333
|
+
if (!rowId || row.disabled)
|
|
31334
|
+
return;
|
|
31335
|
+
const input = checkboxHost.querySelector('input[type="checkbox"]');
|
|
31336
|
+
if (!input)
|
|
31337
|
+
return;
|
|
31338
|
+
const { checked } = input;
|
|
31339
|
+
if (checked) {
|
|
31340
|
+
if (!this.selectedRowIds.includes(rowId)) {
|
|
31341
|
+
this.selectedRowIds = [...this.selectedRowIds, rowId];
|
|
31342
|
+
}
|
|
31343
|
+
}
|
|
31344
|
+
else {
|
|
31345
|
+
this.selectedRowIds = this.selectedRowIds.filter((id) => id !== rowId);
|
|
31346
|
+
}
|
|
31347
|
+
this.applyHeaderCheckboxState();
|
|
31348
|
+
this.syncRowSelectedProps();
|
|
31349
|
+
this.emitCompositionalSelection();
|
|
31350
|
+
}
|
|
31351
|
+
handleCompositionalHeaderCheckboxChange(ev) {
|
|
31352
|
+
if (this.isLegacyMode || !this.selectable)
|
|
31353
|
+
return;
|
|
31354
|
+
if (!this.isEventFromThisTable(ev.target))
|
|
31355
|
+
return;
|
|
31356
|
+
const path = ev.composedPath?.() ?? [];
|
|
31357
|
+
let headerCell = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement &&
|
|
31358
|
+
n.tagName.toLowerCase() === 'xpl-table-header-cell' &&
|
|
31359
|
+
n.getAttribute('type') === 'checkbox');
|
|
31360
|
+
if (!headerCell && ev.target && typeof ev.target.closest === 'function') {
|
|
31361
|
+
const maybeCell = ev.target.closest('xpl-table-header-cell[type="checkbox"]');
|
|
31362
|
+
if (maybeCell instanceof HTMLElement) {
|
|
31363
|
+
headerCell = maybeCell;
|
|
31364
|
+
}
|
|
31365
|
+
}
|
|
31366
|
+
if (!headerCell || !this.el.contains(headerCell))
|
|
31367
|
+
return;
|
|
31368
|
+
if (!this.isCellInOurCompositionalHeader(headerCell))
|
|
31369
|
+
return;
|
|
31370
|
+
const headerCells = this.getCompositionalHeaderCells();
|
|
31371
|
+
if (!headerCells.includes(headerCell))
|
|
31372
|
+
return;
|
|
31373
|
+
const checked = !!ev.detail;
|
|
31374
|
+
const selectableRows = this.querySelectableBodyRows();
|
|
31375
|
+
const ids = selectableRows
|
|
31376
|
+
.map((r) => Table.getRowIdForRow(r))
|
|
31377
|
+
.filter((id) => !!id);
|
|
31378
|
+
if (checked) {
|
|
31379
|
+
this.selectedRowIds = [...ids];
|
|
31380
|
+
}
|
|
31381
|
+
else {
|
|
31382
|
+
this.selectedRowIds = [];
|
|
31383
|
+
}
|
|
31384
|
+
this.applyBodyCheckboxStates();
|
|
31385
|
+
this.syncRowSelectedProps();
|
|
31386
|
+
this.emitCompositionalSelection();
|
|
31387
|
+
}
|
|
31388
|
+
handlePointerDownExitKeyboardReorder(ev) {
|
|
31389
|
+
if (this.isLegacyMode || !this.rowReorderable || this.keyboardReorderRowId === null) {
|
|
31390
|
+
return;
|
|
31391
|
+
}
|
|
31392
|
+
const t = ev.target;
|
|
31393
|
+
if (!(t instanceof Node) || !this.el.contains(t)) {
|
|
31394
|
+
return;
|
|
31395
|
+
}
|
|
31396
|
+
const row = t instanceof Element ? t.closest('xpl-table-row') : null;
|
|
31397
|
+
if (!row || !this.isDirectChildBodyRow(row)) {
|
|
31398
|
+
return;
|
|
31399
|
+
}
|
|
31400
|
+
this.keyboardReorderRowId = null;
|
|
31401
|
+
this.syncReorderHandleKeyboardA11y(null);
|
|
31402
|
+
}
|
|
31403
|
+
handleReorderHandleKeyDown(ev) {
|
|
31404
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31405
|
+
return;
|
|
31406
|
+
}
|
|
31407
|
+
const rawPath = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
|
|
31408
|
+
const path = rawPath.length > 0 ? rawPath : ev.target ? [ev.target] : [];
|
|
31409
|
+
let handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
|
|
31410
|
+
if (!handle &&
|
|
31411
|
+
ev.target instanceof HTMLElement &&
|
|
31412
|
+
ev.target.classList.contains('xpl-table__row-drag-handle')) {
|
|
31413
|
+
handle = ev.target;
|
|
31414
|
+
}
|
|
31415
|
+
if (!handle || !this.el.contains(handle)) {
|
|
31416
|
+
return;
|
|
31417
|
+
}
|
|
31418
|
+
const row = handle.closest('xpl-table-row');
|
|
31419
|
+
if (!row || !this.isDirectChildBodyRow(row)) {
|
|
31420
|
+
return;
|
|
31421
|
+
}
|
|
31422
|
+
const rowId = Table.getRowIdForRow(row) ?? '';
|
|
31423
|
+
if (!rowId) {
|
|
31424
|
+
return;
|
|
31425
|
+
}
|
|
31426
|
+
const isKbd = this.keyboardReorderRowId === rowId;
|
|
31427
|
+
const isEscapeKey = ev.key === 'Escape' ||
|
|
31428
|
+
ev.key === 'Esc' ||
|
|
31429
|
+
ev.code === 'Escape' ||
|
|
31430
|
+
ev.keyCode === 27;
|
|
31431
|
+
if (row.disabled) {
|
|
31432
|
+
if (isEscapeKey && isKbd) {
|
|
31433
|
+
ev.preventDefault();
|
|
31434
|
+
this.keyboardReorderRowId = null;
|
|
31435
|
+
this.syncReorderHandleKeyboardA11y(null);
|
|
31436
|
+
}
|
|
31437
|
+
return;
|
|
31438
|
+
}
|
|
31439
|
+
if (isEscapeKey) {
|
|
31440
|
+
if (isKbd) {
|
|
31441
|
+
ev.preventDefault();
|
|
31442
|
+
this.keyboardReorderRowId = null;
|
|
31443
|
+
this.syncReorderHandleKeyboardA11y(null);
|
|
31444
|
+
}
|
|
31445
|
+
return;
|
|
31446
|
+
}
|
|
31447
|
+
if (!isKbd) {
|
|
31448
|
+
if (ev.key === 'Enter' || ev.key === ' ') {
|
|
31449
|
+
ev.preventDefault();
|
|
31450
|
+
this.keyboardReorderRowId = rowId;
|
|
31451
|
+
this.syncReorderHandleKeyboardA11y(rowId);
|
|
31452
|
+
}
|
|
31453
|
+
return;
|
|
31454
|
+
}
|
|
31455
|
+
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
|
|
31456
|
+
ev.preventDefault();
|
|
31457
|
+
const dir = ev.key === 'ArrowUp' ? 'up' : 'down';
|
|
31458
|
+
this.performKeyboardRowReorder(rowId, dir);
|
|
31459
|
+
}
|
|
31460
|
+
}
|
|
31461
|
+
handleRowReorderPointerDown(ev) {
|
|
31462
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31463
|
+
return;
|
|
31464
|
+
}
|
|
31465
|
+
const handle = reorderDragHandleFromEvent(ev);
|
|
31466
|
+
if (!handle) {
|
|
31467
|
+
return;
|
|
31468
|
+
}
|
|
31469
|
+
const table = handle.closest('xpl-table');
|
|
31470
|
+
if (table !== this.el) {
|
|
31471
|
+
return;
|
|
31472
|
+
}
|
|
31473
|
+
const row = bodyRowFromDragTarget(handle);
|
|
31474
|
+
if (!row || row.disabled) {
|
|
31475
|
+
return;
|
|
31476
|
+
}
|
|
31477
|
+
const body = this.getDirectChildTableSection('xpl-table-body');
|
|
31478
|
+
if (!body || row.parentElement !== body) {
|
|
31479
|
+
return;
|
|
31480
|
+
}
|
|
31481
|
+
this.clearPendingDragListeners();
|
|
31482
|
+
this.pendingDragRow = row;
|
|
31483
|
+
const onPointerEnd = () => {
|
|
31484
|
+
this.clearPendingDragListeners();
|
|
31485
|
+
this.pendingDragRow = null;
|
|
31486
|
+
};
|
|
31487
|
+
document.addEventListener('pointerup', onPointerEnd, true);
|
|
31488
|
+
document.addEventListener('pointercancel', onPointerEnd, true);
|
|
31489
|
+
this.pointerUpClearPending = () => {
|
|
31490
|
+
document.removeEventListener('pointerup', onPointerEnd, true);
|
|
31491
|
+
document.removeEventListener('pointercancel', onPointerEnd, true);
|
|
31492
|
+
};
|
|
31493
|
+
}
|
|
31494
|
+
handleRowReorderDragStart(ev) {
|
|
31495
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31496
|
+
return;
|
|
31497
|
+
}
|
|
31498
|
+
const row = tableBodyRowFromEvent(ev);
|
|
31499
|
+
if (!row) {
|
|
31500
|
+
return;
|
|
31501
|
+
}
|
|
31502
|
+
if (row.closest('xpl-table') !== this.el) {
|
|
31503
|
+
return;
|
|
31504
|
+
}
|
|
31505
|
+
const body = this.getDirectChildTableSection('xpl-table-body');
|
|
31506
|
+
if (!body || row.parentElement !== body) {
|
|
31507
|
+
return;
|
|
31508
|
+
}
|
|
31509
|
+
if (row.disabled || this.pendingDragRow !== row) {
|
|
31510
|
+
ev.preventDefault();
|
|
31511
|
+
return;
|
|
31512
|
+
}
|
|
31513
|
+
this.keyboardReorderRowId = null;
|
|
31514
|
+
this.syncReorderHandleKeyboardA11y(null);
|
|
31515
|
+
this.clearPendingDragListeners();
|
|
31516
|
+
this.pendingDragRow = null;
|
|
31517
|
+
this.draggedRow = row;
|
|
31518
|
+
if (ev.dataTransfer) {
|
|
31519
|
+
ev.dataTransfer.effectAllowed = 'move';
|
|
31520
|
+
ev.dataTransfer.setData('text/plain', Table.getRowIdForRow(row) ?? '');
|
|
31521
|
+
}
|
|
31522
|
+
row.classList.add('xpl-table-row--dragging');
|
|
31523
|
+
}
|
|
31524
|
+
handleRowReorderDragEnd(ev) {
|
|
31525
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31526
|
+
return;
|
|
31527
|
+
}
|
|
31528
|
+
const row = tableBodyRowFromEvent(ev);
|
|
31529
|
+
if (!row || row.closest('xpl-table') !== this.el) {
|
|
31530
|
+
return;
|
|
31531
|
+
}
|
|
31532
|
+
row.classList.remove('xpl-table-row--dragging');
|
|
31533
|
+
this.clearReorderDragOverClasses();
|
|
31534
|
+
this.draggedRow = null;
|
|
31535
|
+
}
|
|
31536
|
+
handleRowReorderDragOver(ev) {
|
|
31537
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31538
|
+
return;
|
|
31539
|
+
}
|
|
31540
|
+
const row = tableBodyRowFromEvent(ev);
|
|
31541
|
+
if (!row || row.closest('xpl-table') !== this.el) {
|
|
31542
|
+
return;
|
|
31543
|
+
}
|
|
31544
|
+
const body = this.getDirectChildTableSection('xpl-table-body');
|
|
31545
|
+
if (!body || row.parentElement !== body || row.disabled) {
|
|
31546
|
+
return;
|
|
31547
|
+
}
|
|
31548
|
+
ev.preventDefault();
|
|
31549
|
+
if (ev.dataTransfer) {
|
|
31550
|
+
ev.dataTransfer.dropEffect = 'move';
|
|
31551
|
+
}
|
|
31552
|
+
}
|
|
31553
|
+
handleRowReorderDragEnter(ev) {
|
|
31554
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31555
|
+
return;
|
|
31556
|
+
}
|
|
31557
|
+
const row = tableBodyRowFromEvent(ev);
|
|
31558
|
+
if (!row || row.closest('xpl-table') !== this.el) {
|
|
31559
|
+
return;
|
|
31560
|
+
}
|
|
31561
|
+
const body = this.getDirectChildTableSection('xpl-table-body');
|
|
31562
|
+
if (!body || row.parentElement !== body || row.disabled) {
|
|
31563
|
+
return;
|
|
31564
|
+
}
|
|
31565
|
+
ev.preventDefault();
|
|
31566
|
+
row.classList.add('xpl-table-row--drag-over');
|
|
31567
|
+
}
|
|
31568
|
+
handleRowReorderDragLeave(ev) {
|
|
31569
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31570
|
+
return;
|
|
31571
|
+
}
|
|
31572
|
+
const row = tableBodyRowFromEvent(ev);
|
|
31573
|
+
if (!row || row.closest('xpl-table') !== this.el) {
|
|
31574
|
+
return;
|
|
31575
|
+
}
|
|
31576
|
+
const related = ev.relatedTarget;
|
|
31577
|
+
if (related && row.contains(related)) {
|
|
31578
|
+
return;
|
|
31579
|
+
}
|
|
31580
|
+
row.classList.remove('xpl-table-row--drag-over');
|
|
31581
|
+
}
|
|
31582
|
+
handleRowReorderDrop(ev) {
|
|
31583
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31584
|
+
return;
|
|
31585
|
+
}
|
|
31586
|
+
ev.preventDefault();
|
|
31587
|
+
const dropRow = tableBodyRowFromEvent(ev);
|
|
31588
|
+
if (!dropRow || dropRow.closest('xpl-table') !== this.el) {
|
|
31589
|
+
return;
|
|
31590
|
+
}
|
|
31591
|
+
const body = this.getDirectChildTableSection('xpl-table-body');
|
|
31592
|
+
if (!body || dropRow.parentElement !== body || dropRow.disabled) {
|
|
31593
|
+
return;
|
|
31594
|
+
}
|
|
31595
|
+
const source = this.draggedRow;
|
|
31596
|
+
if (!source || source.disabled) {
|
|
31597
|
+
this.draggedRow = null;
|
|
31598
|
+
this.clearReorderDragOverClasses();
|
|
31599
|
+
return;
|
|
31600
|
+
}
|
|
31601
|
+
if (source === dropRow) {
|
|
31602
|
+
this.clearReorderDragOverClasses();
|
|
31603
|
+
return;
|
|
31604
|
+
}
|
|
31605
|
+
const visible = this.getVisibleBodyRowsForReorder();
|
|
31606
|
+
const fromIndex = visible.indexOf(source);
|
|
31607
|
+
const toIndex = visible.indexOf(dropRow);
|
|
31608
|
+
if (fromIndex === -1 || toIndex === -1) {
|
|
31609
|
+
this.clearReorderDragOverClasses();
|
|
31610
|
+
return;
|
|
31611
|
+
}
|
|
31612
|
+
const direction = fromIndex > toIndex ? 'up' : 'down';
|
|
31613
|
+
const rowId = Table.getRowIdForRow(source) ?? '';
|
|
31614
|
+
const runMove = () => {
|
|
31615
|
+
moveRowInTableBody(body, source, dropRow);
|
|
31616
|
+
};
|
|
31617
|
+
runMove();
|
|
31618
|
+
const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => Table.getRowIdForRow(r) ?? '');
|
|
31619
|
+
this.rowOrderChange.emit({
|
|
31620
|
+
rowId,
|
|
31621
|
+
direction,
|
|
31622
|
+
orderedRowIds,
|
|
31623
|
+
fromIndex,
|
|
31624
|
+
toIndex,
|
|
31625
|
+
});
|
|
31626
|
+
this.announceRowReorder(rowId, orderedRowIds);
|
|
31627
|
+
this.clearReorderDragOverClasses();
|
|
31628
|
+
if (this.selectable) {
|
|
31629
|
+
this.applyBodyCheckboxStates();
|
|
31630
|
+
this.applyHeaderCheckboxState();
|
|
31631
|
+
this.syncRowSelectedProps();
|
|
31632
|
+
}
|
|
31633
|
+
this.updateColumnWidths();
|
|
31634
|
+
}
|
|
31635
|
+
get isLegacyMode() {
|
|
31636
|
+
return this.columns !== undefined || this.data !== undefined || this.footer !== undefined;
|
|
31637
|
+
}
|
|
31638
|
+
ensureTableInstanceId() {
|
|
31639
|
+
if (this.tableInstanceId)
|
|
31640
|
+
return;
|
|
31641
|
+
if (typeof crypto !== 'undefined' && crypto.randomUUID) {
|
|
31642
|
+
this.tableInstanceId = crypto.randomUUID();
|
|
31643
|
+
}
|
|
31644
|
+
else {
|
|
31645
|
+
this.tableInstanceId = Math.random().toString(36).slice(2);
|
|
31646
|
+
}
|
|
31647
|
+
}
|
|
31648
|
+
generateRowId() {
|
|
31649
|
+
this.ensureTableInstanceId();
|
|
31650
|
+
if (typeof crypto !== 'undefined' && crypto.randomUUID) {
|
|
31651
|
+
return `${this.tableInstanceId}-${crypto.randomUUID()}`;
|
|
31652
|
+
}
|
|
31653
|
+
return `${this.tableInstanceId}-${Math.random().toString(36).slice(2)}`;
|
|
31654
|
+
}
|
|
31655
|
+
syncCompositionalLayout() {
|
|
31656
|
+
if (this.isLegacyMode)
|
|
31657
|
+
return;
|
|
31658
|
+
if (this.rowReorderable) {
|
|
31659
|
+
this.syncReorderColumn();
|
|
31660
|
+
}
|
|
31661
|
+
else {
|
|
31662
|
+
this.removeManagedReorderCells();
|
|
31663
|
+
}
|
|
31664
|
+
if (this.selectable) {
|
|
31665
|
+
this.ensureTableInstanceId();
|
|
31666
|
+
this.pruneStaleSelectedRowIds();
|
|
31667
|
+
this.ensureBodyRowIds();
|
|
31668
|
+
this.applyBodyCheckboxStates();
|
|
31669
|
+
this.applyHeaderCheckboxState();
|
|
31670
|
+
this.syncRowSelectedProps();
|
|
31671
|
+
}
|
|
31672
|
+
if (this.rowReorderable && this.selectable) {
|
|
31673
|
+
this.normalizeManagedColumnsOrder();
|
|
31674
|
+
}
|
|
31675
|
+
this.updateColumnWidths();
|
|
31676
|
+
}
|
|
31677
|
+
getDirectChildTableSection(tag) {
|
|
31678
|
+
const el = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === tag);
|
|
31679
|
+
return el ?? null;
|
|
31680
|
+
}
|
|
31681
|
+
isDirectChildBodyRow(row) {
|
|
31682
|
+
const body = this.getDirectChildTableSection('xpl-table-body');
|
|
31683
|
+
return body !== null && row.parentElement === body;
|
|
31684
|
+
}
|
|
31685
|
+
isCellInOurCompositionalHeader(cell) {
|
|
31686
|
+
const header = cell.closest('xpl-table-header');
|
|
31687
|
+
return header !== null && header.parentElement === this.el;
|
|
31688
|
+
}
|
|
31689
|
+
getSelectionColumnIndex() {
|
|
31690
|
+
const headerCells = this.getCompositionalHeaderCells();
|
|
31691
|
+
const idx = headerCells.findIndex((c) => c.getAttribute('type') === 'checkbox');
|
|
31692
|
+
return idx >= 0 ? idx : null;
|
|
31693
|
+
}
|
|
31694
|
+
static getBodyRowCells(row) {
|
|
31695
|
+
return Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell');
|
|
31696
|
+
}
|
|
31697
|
+
queryBodyRows() {
|
|
31698
|
+
const body = this.getDirectChildTableSection('xpl-table-body');
|
|
31699
|
+
if (!body)
|
|
31700
|
+
return [];
|
|
31701
|
+
return Array.from(body.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-row');
|
|
31702
|
+
}
|
|
31703
|
+
querySelectableBodyRows() {
|
|
31704
|
+
return this.queryBodyRows().filter((row) => !row.disabled);
|
|
31705
|
+
}
|
|
31706
|
+
static getRowIdForRow(row) {
|
|
31707
|
+
const id = row.getAttribute('row-id')?.trim();
|
|
31708
|
+
return id || null;
|
|
31709
|
+
}
|
|
31710
|
+
ensureBodyRowIds() {
|
|
31711
|
+
this.queryBodyRows().forEach((row) => {
|
|
31712
|
+
if (Table.getRowIdForRow(row))
|
|
31713
|
+
return;
|
|
31714
|
+
row.setAttribute('row-id', this.generateRowId());
|
|
31715
|
+
});
|
|
31716
|
+
}
|
|
31717
|
+
removeManagedReorderCells() {
|
|
31718
|
+
this.el.querySelectorAll(`[${ROW_REORDER_MARK}]`).forEach((node) => {
|
|
31719
|
+
if (!(node instanceof Element))
|
|
31720
|
+
return;
|
|
31721
|
+
if (node.closest('xpl-table') !== this.el)
|
|
31722
|
+
return;
|
|
31723
|
+
node.parentElement?.removeChild(node);
|
|
31724
|
+
});
|
|
31725
|
+
}
|
|
31726
|
+
getSelectionSlotCellForReorderOrder(row) {
|
|
31727
|
+
const idx = this.getSelectionColumnIndex();
|
|
31728
|
+
if (idx === null) {
|
|
31729
|
+
return null;
|
|
31730
|
+
}
|
|
31731
|
+
const cells = Array.from(row.children);
|
|
31732
|
+
const cell = cells[idx];
|
|
31733
|
+
if (!cell) {
|
|
31734
|
+
return null;
|
|
31735
|
+
}
|
|
31736
|
+
const tag = cell.tagName.toLowerCase();
|
|
31737
|
+
if (tag === 'xpl-table-header-cell') {
|
|
31738
|
+
return cell.getAttribute('type') === 'checkbox' ? cell : null;
|
|
31739
|
+
}
|
|
31740
|
+
if (tag === 'xpl-table-cell') {
|
|
31741
|
+
if (cell.hasAttribute(SELECTION_MARK)) {
|
|
31742
|
+
return cell;
|
|
31743
|
+
}
|
|
31744
|
+
return cell.querySelector('xpl-checkbox') ? cell : null;
|
|
31745
|
+
}
|
|
31746
|
+
if (tag === 'xpl-table-footer-cell') {
|
|
31747
|
+
return cell;
|
|
31748
|
+
}
|
|
31749
|
+
return null;
|
|
31750
|
+
}
|
|
31751
|
+
normalizeManagedColumnsOrder() {
|
|
31752
|
+
const fix = (row) => {
|
|
31753
|
+
const re = row.querySelector(`:scope > [${ROW_REORDER_MARK}]`);
|
|
31754
|
+
const se = this.getSelectionSlotCellForReorderOrder(row);
|
|
31755
|
+
if (!re || !se) {
|
|
31756
|
+
return;
|
|
31757
|
+
}
|
|
31758
|
+
const siblings = Array.from(row.children);
|
|
31759
|
+
const iRe = siblings.indexOf(re);
|
|
31760
|
+
const iSe = siblings.indexOf(se);
|
|
31761
|
+
if (iRe > iSe) {
|
|
31762
|
+
row.insertBefore(re, se);
|
|
31763
|
+
}
|
|
31764
|
+
};
|
|
31765
|
+
const header = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header') ?? null;
|
|
31766
|
+
if (header) {
|
|
31767
|
+
const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
|
|
31768
|
+
const container = firstRow ?? header;
|
|
31769
|
+
fix(container);
|
|
31770
|
+
}
|
|
31771
|
+
this.queryBodyRows().forEach((row) => fix(row));
|
|
31772
|
+
const footer = this.getDirectChildTableSection('xpl-table-footer');
|
|
31773
|
+
if (footer) {
|
|
31774
|
+
Array.from(footer.children)
|
|
31775
|
+
.filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
|
|
31776
|
+
.forEach((row) => fix(row));
|
|
31777
|
+
}
|
|
31778
|
+
}
|
|
31779
|
+
syncReorderColumn() {
|
|
31780
|
+
if (!this.rowReorderable || this.isLegacyMode)
|
|
31781
|
+
return;
|
|
31782
|
+
this.ensureBodyRowIds();
|
|
31783
|
+
this.ensureHeaderReorderCell();
|
|
31784
|
+
this.ensureBodyReorderCells();
|
|
31785
|
+
this.ensureFooterReorderCells();
|
|
31786
|
+
this.applyReorderRowDraggableState();
|
|
31787
|
+
}
|
|
31788
|
+
ensureHeaderReorderCell() {
|
|
31789
|
+
const header = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header') ?? null;
|
|
31790
|
+
if (!header)
|
|
31791
|
+
return;
|
|
31792
|
+
const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
|
|
31793
|
+
const container = firstRow ?? header;
|
|
31794
|
+
if (Array.from(container.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell' &&
|
|
31795
|
+
c.hasAttribute(ROW_REORDER_MARK))) {
|
|
31796
|
+
return;
|
|
31797
|
+
}
|
|
31798
|
+
const cell = document.createElement('xpl-table-header-cell');
|
|
31799
|
+
cell.setAttribute(ROW_REORDER_MARK, '');
|
|
31800
|
+
cell.setAttribute('type', 'empty');
|
|
31801
|
+
cell.setAttribute('width', '48');
|
|
31802
|
+
cell.setAttribute('align', 'center');
|
|
31803
|
+
container.insertBefore(cell, container.firstChild);
|
|
31804
|
+
}
|
|
31805
|
+
ensureBodyReorderCells() {
|
|
31806
|
+
this.queryBodyRows().forEach((row) => {
|
|
31807
|
+
const managed = Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell' &&
|
|
31808
|
+
c.hasAttribute(ROW_REORDER_MARK));
|
|
31809
|
+
if (managed.length > 1) {
|
|
31810
|
+
for (let i = 1; i < managed.length; i += 1) {
|
|
31811
|
+
managed[i].remove();
|
|
31812
|
+
}
|
|
31813
|
+
}
|
|
31814
|
+
let cell = managed[0];
|
|
31815
|
+
if (!cell) {
|
|
31816
|
+
const newCell = document.createElement('xpl-table-cell');
|
|
31817
|
+
newCell.setAttribute(ROW_REORDER_MARK, '');
|
|
31818
|
+
newCell.setAttribute('width', '48');
|
|
31819
|
+
newCell.setAttribute('align', 'center');
|
|
31820
|
+
const btn = document.createElement('button');
|
|
31821
|
+
btn.type = 'button';
|
|
31822
|
+
btn.className = 'xpl-table__row-drag-handle';
|
|
31823
|
+
btn.setAttribute('aria-label', 'Reorder row');
|
|
31824
|
+
btn.setAttribute('aria-pressed', 'false');
|
|
31825
|
+
const iconName = this.getResolvedIconForRow(Table.getRowIdForRow(row) ?? '');
|
|
31826
|
+
if (iconName) {
|
|
31827
|
+
const icon = document.createElement('xpl-icon');
|
|
31828
|
+
icon.setAttribute('icon', iconName);
|
|
31829
|
+
icon.setAttribute('size', '16');
|
|
31830
|
+
btn.appendChild(icon);
|
|
31831
|
+
}
|
|
31832
|
+
newCell.appendChild(btn);
|
|
31833
|
+
row.insertBefore(newCell, row.firstChild);
|
|
31834
|
+
cell = newCell;
|
|
31835
|
+
}
|
|
31836
|
+
else {
|
|
31837
|
+
cell.setAttribute('align', 'center');
|
|
31838
|
+
}
|
|
31839
|
+
const btn = cell.querySelector('.xpl-table__row-drag-handle');
|
|
31840
|
+
if (btn) {
|
|
31841
|
+
btn.disabled = row.disabled;
|
|
31842
|
+
}
|
|
31843
|
+
});
|
|
31844
|
+
this.syncInjectedReorderHandleIcons();
|
|
31845
|
+
this.attachReorderHandleKeydownListeners();
|
|
31846
|
+
}
|
|
31847
|
+
getResolvedIconForRow(rowId) {
|
|
31848
|
+
const inKeyboardMode = this.keyboardReorderRowId !== null &&
|
|
31849
|
+
rowId !== '' &&
|
|
31850
|
+
rowId === this.keyboardReorderRowId;
|
|
31851
|
+
if (inKeyboardMode) {
|
|
31852
|
+
if (this.reorderHandleIconKeyboard === '') {
|
|
31853
|
+
return null;
|
|
31854
|
+
}
|
|
31855
|
+
return this.reorderHandleIconKeyboard ?? 'caret-expand-y';
|
|
31856
|
+
}
|
|
31857
|
+
if (this.reorderHandleIcon === '') {
|
|
31858
|
+
return null;
|
|
31859
|
+
}
|
|
31860
|
+
return this.reorderHandleIcon ?? 'grip-dots-vertical';
|
|
31861
|
+
}
|
|
31862
|
+
syncInjectedReorderHandleIcons() {
|
|
31863
|
+
this.queryBodyRows().forEach((row) => {
|
|
31864
|
+
const btn = row.querySelector('.xpl-table__row-drag-handle');
|
|
31865
|
+
if (!btn) {
|
|
31866
|
+
return;
|
|
31867
|
+
}
|
|
31868
|
+
const rowId = Table.getRowIdForRow(row) ?? '';
|
|
31869
|
+
const iconName = this.getResolvedIconForRow(rowId);
|
|
31870
|
+
btn.querySelectorAll('xpl-icon').forEach((n) => n.remove());
|
|
31871
|
+
if (iconName) {
|
|
31872
|
+
const icon = document.createElement('xpl-icon');
|
|
31873
|
+
icon.setAttribute('icon', iconName);
|
|
31874
|
+
icon.setAttribute('size', '16');
|
|
31875
|
+
btn.appendChild(icon);
|
|
31876
|
+
}
|
|
31877
|
+
});
|
|
31878
|
+
}
|
|
31879
|
+
syncReorderHandleKeyboardA11y(activeId) {
|
|
31880
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31881
|
+
return;
|
|
31882
|
+
}
|
|
31883
|
+
this.queryBodyRows().forEach((row) => {
|
|
31884
|
+
const btn = row.querySelector('.xpl-table__row-drag-handle');
|
|
31885
|
+
if (!btn) {
|
|
31886
|
+
return;
|
|
31887
|
+
}
|
|
31888
|
+
const rid = Table.getRowIdForRow(row) ?? '';
|
|
31889
|
+
const isActive = activeId !== null && rid === activeId;
|
|
31890
|
+
btn.classList.toggle('xpl-table__row-drag-handle--keyboard-mode', isActive);
|
|
31891
|
+
btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
|
|
31892
|
+
btn.setAttribute('aria-label', isActive
|
|
31893
|
+
? 'Press arrow up or down to reorder, Escape to exit'
|
|
31894
|
+
: 'Press Enter or Space to activate keyboard reorder mode, or drag to reorder');
|
|
31895
|
+
});
|
|
31896
|
+
this.syncInjectedReorderHandleIcons();
|
|
31897
|
+
}
|
|
31898
|
+
attachReorderHandleKeydownListeners() {
|
|
31899
|
+
if (this.isLegacyMode || !this.rowReorderable) {
|
|
31900
|
+
return;
|
|
31901
|
+
}
|
|
31902
|
+
this.queryBodyRows().forEach((row) => {
|
|
31903
|
+
const btn = row.querySelector('.xpl-table__row-drag-handle');
|
|
31904
|
+
if (!btn || btn.dataset.xplReorderKbdBound === 'true') {
|
|
31905
|
+
return;
|
|
31906
|
+
}
|
|
31907
|
+
btn.dataset.xplReorderKbdBound = 'true';
|
|
31908
|
+
btn.addEventListener('keydown', this.onReorderHandleKeydown);
|
|
31909
|
+
});
|
|
31910
|
+
}
|
|
31911
|
+
detachReorderHandleKeydownListeners() {
|
|
31912
|
+
if (!this.el) {
|
|
31913
|
+
return;
|
|
31914
|
+
}
|
|
31915
|
+
this.el
|
|
31916
|
+
.querySelectorAll('.xpl-table__row-drag-handle[data-xpl-reorder-kbd-bound="true"]')
|
|
31917
|
+
.forEach((btn) => {
|
|
31918
|
+
btn.removeEventListener('keydown', this.onReorderHandleKeydown);
|
|
31919
|
+
delete btn.dataset.xplReorderKbdBound;
|
|
31920
|
+
});
|
|
31921
|
+
}
|
|
31922
|
+
performKeyboardRowReorder(rowId, direction) {
|
|
31923
|
+
const body = this.getDirectChildTableSection('xpl-table-body');
|
|
31924
|
+
if (!body) {
|
|
31925
|
+
return false;
|
|
31926
|
+
}
|
|
31927
|
+
const visible = this.getVisibleBodyRowsForReorder();
|
|
31928
|
+
const itemIndex = visible.findIndex((r) => Table.getRowIdForRow(r) === rowId);
|
|
31929
|
+
if (itemIndex === -1) {
|
|
31930
|
+
return false;
|
|
31931
|
+
}
|
|
31932
|
+
const targetIndex = direction === 'up' ? itemIndex - 1 : itemIndex + 1;
|
|
31933
|
+
if (targetIndex < 0 || targetIndex >= visible.length) {
|
|
31934
|
+
return false;
|
|
31935
|
+
}
|
|
31936
|
+
const fromIndex = itemIndex;
|
|
31937
|
+
const item = visible[itemIndex];
|
|
31938
|
+
const targetItem = visible[targetIndex];
|
|
31939
|
+
if (direction === 'up') {
|
|
31940
|
+
body.insertBefore(item, targetItem);
|
|
31941
|
+
}
|
|
31942
|
+
else {
|
|
31943
|
+
const nextVisible = getNextVisibleTableBodyRowAfter(targetItem);
|
|
31944
|
+
if (nextVisible) {
|
|
31945
|
+
body.insertBefore(item, nextVisible);
|
|
31946
|
+
}
|
|
31947
|
+
else {
|
|
31948
|
+
body.appendChild(item);
|
|
31949
|
+
}
|
|
31950
|
+
}
|
|
31951
|
+
const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => Table.getRowIdForRow(r) ?? '');
|
|
31952
|
+
const toIndex = orderedRowIds.indexOf(rowId);
|
|
31953
|
+
this.rowOrderChange.emit({
|
|
31954
|
+
rowId,
|
|
31955
|
+
direction,
|
|
31956
|
+
orderedRowIds,
|
|
31957
|
+
fromIndex,
|
|
31958
|
+
toIndex,
|
|
31959
|
+
});
|
|
31960
|
+
this.announceRowReorder(rowId, orderedRowIds);
|
|
31961
|
+
this.clearReorderDragOverClasses();
|
|
31962
|
+
if (this.selectable) {
|
|
31963
|
+
this.applyBodyCheckboxStates();
|
|
31964
|
+
this.applyHeaderCheckboxState();
|
|
31965
|
+
this.syncRowSelectedProps();
|
|
31966
|
+
}
|
|
31967
|
+
this.updateColumnWidths();
|
|
31968
|
+
this.reorderKeyboardTimers.requestAnimationFrame(() => {
|
|
31969
|
+
if (!this.el.isConnected) {
|
|
31970
|
+
return;
|
|
31971
|
+
}
|
|
31972
|
+
const moved = this.getVisibleBodyRowsForReorder().find((r) => Table.getRowIdForRow(r) === rowId);
|
|
31973
|
+
const btn = moved?.querySelector('.xpl-table__row-drag-handle');
|
|
31974
|
+
btn?.focus();
|
|
31975
|
+
});
|
|
31976
|
+
return true;
|
|
31977
|
+
}
|
|
31978
|
+
ensureFooterReorderCells() {
|
|
31979
|
+
const footer = this.getDirectChildTableSection('xpl-table-footer');
|
|
31980
|
+
if (!footer)
|
|
31981
|
+
return;
|
|
31982
|
+
Array.from(footer.children)
|
|
31983
|
+
.filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
|
|
31984
|
+
.forEach((row) => {
|
|
31985
|
+
if (Array.from(row.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-footer-cell' &&
|
|
31986
|
+
c.hasAttribute(ROW_REORDER_MARK))) {
|
|
31987
|
+
return;
|
|
31988
|
+
}
|
|
31989
|
+
const cell = document.createElement('xpl-table-footer-cell');
|
|
31990
|
+
cell.setAttribute(ROW_REORDER_MARK, '');
|
|
31991
|
+
cell.setAttribute('width', '48');
|
|
31992
|
+
cell.setAttribute('align', 'center');
|
|
31993
|
+
row.insertBefore(cell, row.firstChild);
|
|
31994
|
+
});
|
|
31995
|
+
}
|
|
31996
|
+
static supportsSubgridBodyRow() {
|
|
31997
|
+
return (typeof CSS !== 'undefined' &&
|
|
31998
|
+
typeof CSS.supports === 'function' &&
|
|
31999
|
+
CSS.supports('grid-template-columns', 'subgrid'));
|
|
32000
|
+
}
|
|
32001
|
+
applyReorderRowDraggableState() {
|
|
32002
|
+
const useRowDrag = Table.supportsSubgridBodyRow();
|
|
32003
|
+
this.queryBodyRows().forEach((row) => {
|
|
32004
|
+
const btn = row.querySelector('.xpl-table__row-drag-handle');
|
|
32005
|
+
btn?.removeAttribute('draggable');
|
|
32006
|
+
row.removeAttribute('draggable');
|
|
32007
|
+
if (!this.rowReorderable || row.disabled) {
|
|
32008
|
+
return;
|
|
32009
|
+
}
|
|
32010
|
+
if (!btn) {
|
|
32011
|
+
return;
|
|
32012
|
+
}
|
|
32013
|
+
if (useRowDrag) {
|
|
32014
|
+
row.setAttribute('draggable', 'true');
|
|
32015
|
+
}
|
|
32016
|
+
else {
|
|
32017
|
+
btn.setAttribute('draggable', 'true');
|
|
32018
|
+
}
|
|
32019
|
+
});
|
|
32020
|
+
}
|
|
32021
|
+
getVisibleBodyRowsForReorder() {
|
|
32022
|
+
return this.queryBodyRows().filter((r) => !r.hasAttribute('hidden'));
|
|
32023
|
+
}
|
|
32024
|
+
clearReorderDragOverClasses() {
|
|
32025
|
+
this.queryBodyRows().forEach((r) => r.classList.remove('xpl-table-row--drag-over'));
|
|
32026
|
+
}
|
|
32027
|
+
clearPendingDragListeners() {
|
|
32028
|
+
if (this.pointerUpClearPending) {
|
|
32029
|
+
this.pointerUpClearPending();
|
|
32030
|
+
this.pointerUpClearPending = null;
|
|
32031
|
+
}
|
|
32032
|
+
}
|
|
32033
|
+
announceRowReorder(movedRowId, orderedRowIds) {
|
|
32034
|
+
if (!this.rowReorderable || !movedRowId) {
|
|
32035
|
+
return;
|
|
32036
|
+
}
|
|
32037
|
+
const index = orderedRowIds.indexOf(movedRowId);
|
|
32038
|
+
if (index < 0) {
|
|
32039
|
+
return;
|
|
32040
|
+
}
|
|
32041
|
+
this.reorderLiveMessage = '';
|
|
32042
|
+
if (this.reorderAnnounceRaf !== undefined) {
|
|
32043
|
+
cancelAnimationFrame(this.reorderAnnounceRaf);
|
|
32044
|
+
}
|
|
32045
|
+
this.reorderAnnounceRaf = requestAnimationFrame(() => {
|
|
32046
|
+
this.reorderAnnounceRaf = undefined;
|
|
32047
|
+
if (!this.el.isConnected) {
|
|
32048
|
+
return;
|
|
32049
|
+
}
|
|
32050
|
+
this.reorderLiveMessage = `Row ${movedRowId}, now position ${index + 1} of ${orderedRowIds.length}`;
|
|
32051
|
+
});
|
|
32052
|
+
}
|
|
32053
|
+
pruneStaleSelectedRowIds() {
|
|
32054
|
+
const validIds = new Set(this.queryBodyRows()
|
|
32055
|
+
.map((r) => Table.getRowIdForRow(r))
|
|
32056
|
+
.filter((id) => !!id));
|
|
32057
|
+
const next = this.selectedRowIds.filter((id) => validIds.has(id));
|
|
32058
|
+
if (next.length === this.selectedRowIds.length)
|
|
32059
|
+
return;
|
|
32060
|
+
this.selectedRowIds = next;
|
|
32061
|
+
this.applyBodyCheckboxStates();
|
|
32062
|
+
this.applyHeaderCheckboxState();
|
|
32063
|
+
this.syncRowSelectedProps();
|
|
32064
|
+
this.emitCompositionalSelection();
|
|
32065
|
+
}
|
|
32066
|
+
static getBodyRowCheckboxAriaLabel(row, selectionColIndex) {
|
|
32067
|
+
const cells = Table.getBodyRowCells(row);
|
|
32068
|
+
const labelCell = cells.find((c, i) => (selectionColIndex === null || i !== selectionColIndex) &&
|
|
32069
|
+
!c.hasAttribute(ROW_REORDER_MARK));
|
|
32070
|
+
const first = labelCell ?? cells[0];
|
|
32071
|
+
if (!first)
|
|
32072
|
+
return 'Select row';
|
|
32073
|
+
const raw = first.textContent?.replace(/\s+/g, ' ').trim() ?? '';
|
|
32074
|
+
if (!raw)
|
|
32075
|
+
return 'Select row';
|
|
32076
|
+
const truncated = raw.length > 100 ? `${raw.slice(0, 100)}…` : raw;
|
|
32077
|
+
return `Select row, ${truncated}`;
|
|
32078
|
+
}
|
|
32079
|
+
applyBodyCheckboxStates() {
|
|
32080
|
+
const selectionIdx = this.getSelectionColumnIndex();
|
|
32081
|
+
if (selectionIdx === null)
|
|
32082
|
+
return;
|
|
32083
|
+
this.queryBodyRows().forEach((row) => {
|
|
32084
|
+
const rowId = Table.getRowIdForRow(row);
|
|
32085
|
+
const cells = Table.getBodyRowCells(row);
|
|
32086
|
+
const cell = cells[selectionIdx];
|
|
32087
|
+
const cb = cell?.querySelector('xpl-checkbox');
|
|
32088
|
+
if (!cb || !rowId)
|
|
32089
|
+
return;
|
|
32090
|
+
cb.checked = this.selectedRowIds.includes(rowId);
|
|
32091
|
+
cb.disabled = row.disabled;
|
|
32092
|
+
cb.value = rowId;
|
|
32093
|
+
cb.setAttribute('aria-label', Table.getBodyRowCheckboxAriaLabel(row, selectionIdx));
|
|
32094
|
+
});
|
|
32095
|
+
}
|
|
32096
|
+
getHeaderCheckboxCell() {
|
|
32097
|
+
const idx = this.getSelectionColumnIndex();
|
|
32098
|
+
if (idx === null)
|
|
32099
|
+
return null;
|
|
32100
|
+
const cells = this.getCompositionalHeaderCells();
|
|
32101
|
+
const cell = cells[idx];
|
|
32102
|
+
if (!cell || cell.getAttribute('type') !== 'checkbox')
|
|
32103
|
+
return null;
|
|
32104
|
+
return cell;
|
|
32105
|
+
}
|
|
32106
|
+
applyHeaderCheckboxState() {
|
|
32107
|
+
const cell = this.getHeaderCheckboxCell();
|
|
32108
|
+
if (!cell)
|
|
32109
|
+
return;
|
|
32110
|
+
const selectableRows = this.querySelectableBodyRows();
|
|
32111
|
+
const ids = selectableRows
|
|
32112
|
+
.map((r) => Table.getRowIdForRow(r))
|
|
32113
|
+
.filter((id) => !!id);
|
|
32114
|
+
const selectedCount = ids.filter((id) => this.selectedRowIds.includes(id)).length;
|
|
32115
|
+
const allSelected = ids.length > 0 && selectedCount === ids.length;
|
|
32116
|
+
const indeterminate = selectedCount > 0 && !allSelected;
|
|
32117
|
+
cell.checked = allSelected;
|
|
32118
|
+
cell.indeterminate = indeterminate;
|
|
32119
|
+
}
|
|
32120
|
+
syncRowSelectedProps() {
|
|
32121
|
+
this.queryBodyRows().forEach((row) => {
|
|
32122
|
+
const id = Table.getRowIdForRow(row);
|
|
32123
|
+
const selected = id ? this.selectedRowIds.includes(id) : false;
|
|
32124
|
+
row.selected = selected;
|
|
32125
|
+
});
|
|
32126
|
+
}
|
|
32127
|
+
emitCompositionalSelection() {
|
|
32128
|
+
const ids = this.selectedRowIds;
|
|
32129
|
+
const key = ids.join('\u0001');
|
|
32130
|
+
if (key === this.lastEmittedRowSelectionKey) {
|
|
32131
|
+
return;
|
|
32132
|
+
}
|
|
32133
|
+
this.lastEmittedRowSelectionKey = key;
|
|
32134
|
+
this.rowSelectionChange.emit({ selectedRowIds: [...ids] });
|
|
32135
|
+
}
|
|
32136
|
+
isEventFromThisTable(target) {
|
|
32137
|
+
if (target == null || typeof target !== 'object')
|
|
32138
|
+
return false;
|
|
32139
|
+
const t = target;
|
|
32140
|
+
const start = 'closest' in t && typeof t.closest === 'function'
|
|
32141
|
+
? t
|
|
32142
|
+
: 'parentElement' in t
|
|
32143
|
+
? t.parentElement
|
|
32144
|
+
: null;
|
|
32145
|
+
if (!start)
|
|
32146
|
+
return false;
|
|
32147
|
+
const nearest = start.closest('xpl-table');
|
|
32148
|
+
return nearest === this.el;
|
|
32149
|
+
}
|
|
32150
|
+
static sortKeyFromHeaderCell(cell, columnIndex) {
|
|
32151
|
+
const c = cell;
|
|
32152
|
+
const raw = (c.sortKey ?? c.label ?? '').trim();
|
|
32153
|
+
if (raw.length > 0) {
|
|
32154
|
+
return raw.replace(/ /g, '-').toLowerCase();
|
|
32155
|
+
}
|
|
32156
|
+
return `column-${columnIndex}`;
|
|
32157
|
+
}
|
|
32158
|
+
handleCompositionalHeaderSort(ev) {
|
|
32159
|
+
if (this.isLegacyMode)
|
|
32160
|
+
return;
|
|
32161
|
+
if (!this.isEventFromThisTable(ev.target))
|
|
32162
|
+
return;
|
|
32163
|
+
ev.stopPropagation();
|
|
32164
|
+
const source = ev.target;
|
|
32165
|
+
const headerRow = source.closest('xpl-table-header xpl-table-row') ?? source.closest('xpl-table-row');
|
|
32166
|
+
if (!headerRow || !this.el.contains(headerRow))
|
|
32167
|
+
return;
|
|
32168
|
+
const cells = Array.from(headerRow.querySelectorAll('xpl-table-header-cell'));
|
|
32169
|
+
const { columnIndex } = ev.detail;
|
|
32170
|
+
const target = cells[columnIndex];
|
|
32171
|
+
if (!target?.sortable)
|
|
32172
|
+
return;
|
|
32173
|
+
const next = cycleSortDirection(target.sortDirection);
|
|
32174
|
+
cells.forEach((cell, i) => {
|
|
32175
|
+
const hc = cell;
|
|
32176
|
+
if (!hc.sortable)
|
|
32177
|
+
return;
|
|
32178
|
+
hc.sortDirection = i === columnIndex ? next : null;
|
|
32179
|
+
});
|
|
32180
|
+
const sortState = {};
|
|
32181
|
+
cells.forEach((cell, i) => {
|
|
32182
|
+
const hc = cell;
|
|
32183
|
+
if (!hc.sortable)
|
|
32184
|
+
return;
|
|
32185
|
+
sortState[Table.sortKeyFromHeaderCell(hc, i)] = hc.sortDirection ?? null;
|
|
32186
|
+
});
|
|
32187
|
+
const sortTypeArr = cells.map((cell) => {
|
|
32188
|
+
const hc = cell;
|
|
32189
|
+
return hc.sortable ? (hc.sortDirection ?? null) : null;
|
|
32190
|
+
});
|
|
32191
|
+
const colName = Table.sortKeyFromHeaderCell(cells[columnIndex], columnIndex);
|
|
32192
|
+
const detail = {
|
|
32193
|
+
...sortState,
|
|
32194
|
+
colNum: columnIndex,
|
|
32195
|
+
colName,
|
|
32196
|
+
sortTypeArr,
|
|
31054
32197
|
};
|
|
31055
|
-
this.
|
|
31056
|
-
|
|
32198
|
+
this.sortChanged.emit(detail);
|
|
32199
|
+
}
|
|
32200
|
+
legacySortStatePayload() {
|
|
32201
|
+
const out = {};
|
|
32202
|
+
if (!this.columns?.length)
|
|
32203
|
+
return out;
|
|
32204
|
+
this.columns.forEach((col, i) => {
|
|
32205
|
+
const key = col.replace(/ /g, '-').toLowerCase();
|
|
32206
|
+
out[key] = this.sortTypeArray[i] ?? null;
|
|
32207
|
+
});
|
|
32208
|
+
return out;
|
|
32209
|
+
}
|
|
32210
|
+
legacySortChangedDetail(colNum) {
|
|
32211
|
+
const base = this.legacySortStatePayload();
|
|
32212
|
+
const title = this.columns?.[colNum] ?? '';
|
|
32213
|
+
const colName = title.replace(/ /g, '-').toLowerCase();
|
|
32214
|
+
return {
|
|
32215
|
+
...base,
|
|
32216
|
+
colNum,
|
|
32217
|
+
colName,
|
|
32218
|
+
sortTypeArr: [...this.sortTypeArray],
|
|
31057
32219
|
};
|
|
31058
32220
|
}
|
|
31059
|
-
|
|
32221
|
+
getCompositionalHeaderCells() {
|
|
32222
|
+
const header = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header') ?? null;
|
|
32223
|
+
if (!header)
|
|
32224
|
+
return [];
|
|
32225
|
+
const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
|
|
32226
|
+
const container = firstRow ?? header;
|
|
32227
|
+
return Array.from(container.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell');
|
|
32228
|
+
}
|
|
32229
|
+
updateColumnWidths() {
|
|
32230
|
+
const headerCells = this.getCompositionalHeaderCells();
|
|
32231
|
+
const columnWidths = headerCells.map((cell) => getGridColumnWidthFromHeaderCell(cell));
|
|
32232
|
+
const next = columnWidths.join(' ');
|
|
32233
|
+
const n = headerCells.length;
|
|
32234
|
+
if (n === this.colCount && this.colCount > 0 && this.columnWidthsToken === next) {
|
|
32235
|
+
return;
|
|
32236
|
+
}
|
|
32237
|
+
this.el.style.setProperty('--column-widths', next);
|
|
32238
|
+
this.colCount = n;
|
|
32239
|
+
this.columnWidthsToken = next;
|
|
32240
|
+
}
|
|
32241
|
+
handleSort(clickEvt, isColumnSortable, colNum) {
|
|
31060
32242
|
clickEvt.preventDefault();
|
|
31061
32243
|
clickEvt.stopPropagation();
|
|
31062
32244
|
if (!isColumnSortable)
|
|
@@ -31073,104 +32255,112 @@ class Table {
|
|
|
31073
32255
|
return 'asc';
|
|
31074
32256
|
}
|
|
31075
32257
|
});
|
|
31076
|
-
const evt = this.sortChanged.emit(
|
|
31077
|
-
colNum,
|
|
31078
|
-
colName,
|
|
31079
|
-
sortTypeArr: this.sortTypeArray,
|
|
31080
|
-
});
|
|
32258
|
+
const evt = this.sortChanged.emit(this.legacySortChangedDetail(colNum));
|
|
31081
32259
|
if (!evt.defaultPrevented)
|
|
31082
32260
|
this.sortBy(colNum, this.sortTypeArray);
|
|
31083
32261
|
}
|
|
31084
|
-
|
|
31085
|
-
this.setData();
|
|
31086
|
-
}
|
|
31087
|
-
watchColumns() {
|
|
31088
|
-
this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
|
|
31089
|
-
}
|
|
31090
|
-
componentWillLoad() {
|
|
31091
|
-
this.ensureSelectAllValue();
|
|
31092
|
-
this.areAllSelected = false;
|
|
31093
|
-
this.setData();
|
|
31094
|
-
this.selected = new Array(this.rowData.length).fill(false);
|
|
31095
|
-
this.ensureSortTypeArray();
|
|
31096
|
-
}
|
|
31097
|
-
ensureSelectAllValue() {
|
|
31098
|
-
if (this.selectAllValue !== undefined) {
|
|
31099
|
-
return;
|
|
31100
|
-
}
|
|
31101
|
-
const hostId = this.el.id?.trim();
|
|
31102
|
-
if (hostId) {
|
|
31103
|
-
this.selectAllValue = `${hostId}-select-all`;
|
|
31104
|
-
return;
|
|
31105
|
-
}
|
|
31106
|
-
const persisted = this.el.getAttribute('data-select-all-value');
|
|
31107
|
-
if (persisted) {
|
|
31108
|
-
this.selectAllValue = persisted;
|
|
31109
|
-
return;
|
|
31110
|
-
}
|
|
31111
|
-
Table.selectAllSeq += 1;
|
|
31112
|
-
this.selectAllValue = `select-all-${Table.selectAllSeq}`;
|
|
31113
|
-
this.el.setAttribute('data-select-all-value', this.selectAllValue);
|
|
31114
|
-
}
|
|
31115
|
-
ensureSortTypeArray() {
|
|
32262
|
+
renderLegacy() {
|
|
31116
32263
|
if (this.columns &&
|
|
31117
32264
|
(!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
|
|
31118
32265
|
this.sortTypeArray = this.columns.map(() => null);
|
|
31119
32266
|
}
|
|
31120
|
-
|
|
31121
|
-
this.sortTypeArray = [];
|
|
31122
|
-
}
|
|
31123
|
-
}
|
|
31124
|
-
render() {
|
|
31125
|
-
const rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
|
|
31126
|
-
return (hAsync(Host, { key: '1e6bf436320a44e1e22e8590a881bc90c4a091d5' }, hAsync("div", { key: '3d2e5361fbe615a6ae8ebe916ce07e00f82c444c', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
|
|
32267
|
+
return (hAsync(Host, null, hAsync("div", { class: "xpl-table-container", onScroll: this.onLegacyScroll, ref: (el) => {
|
|
31127
32268
|
if (el)
|
|
31128
32269
|
this.container = el;
|
|
31129
|
-
} }, hAsync("table", {
|
|
32270
|
+
} }, hAsync("table", { class: {
|
|
31130
32271
|
'xpl-table': true,
|
|
32272
|
+
'xpl-table--legacy': true,
|
|
31131
32273
|
'xpl-table--striped': !!this.striped,
|
|
31132
32274
|
'xpl-table--freeze': !!this.freeze,
|
|
31133
32275
|
'xpl-table--has-scrolled': this.hasScrolled,
|
|
31134
|
-
} }, this.columns && (hAsync("thead",
|
|
31135
|
-
const iconType = getIconType(this.sortTypeArray?.[i]);
|
|
31136
|
-
const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
|
|
31137
|
-
return (hAsync("th", null, hAsync("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i
|
|
31138
|
-
this.selected.some((a) => a), onClick: (e) =>
|
|
31139
|
-
|
|
32276
|
+
} }, this.columns && (hAsync("thead", null, this.columns.map((column, i) => {
|
|
32277
|
+
const iconType = getIconType(this.sortTypeArray?.[i] ?? null);
|
|
32278
|
+
const isColumnSortable = !!(this.isSortable && this.sortableColumns?.[i]);
|
|
32279
|
+
return (hAsync("th", null, hAsync("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (hAsync("input", { checked: this.areAllSelected, id: "__xpl-table-th", indeterminate: !this.areAllSelected &&
|
|
32280
|
+
this.selected.some((a) => a), onClick: (e) => {
|
|
32281
|
+
e.stopPropagation();
|
|
32282
|
+
this.selectAll(e);
|
|
32283
|
+
}, type: "checkbox", value: this.selectAllValue })), column, isColumnSortable && !!this.sortTypeArray[i] && (hAsync("xpl-icon", { icon: iconType, size: 16 })))));
|
|
32284
|
+
}))), hAsync("tbody", null, this.rowData.map((row, rowNum) => (hAsync("tr", { class: this.selected && this.selected[rowNum]
|
|
31140
32285
|
? 'xpl-table-row-selected'
|
|
31141
|
-
: '' }, row.map((cell, i) => (hAsync("td", null, this.multiselect && i === 0 ? (hAsync("label",
|
|
32286
|
+
: '' }, row.map((cell, i) => (hAsync("td", null, this.multiselect && i === 0 ? (hAsync("label", { htmlFor: `__xpl-table-row-${rowNum}` }, hAsync("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues &&
|
|
32287
|
+
this.selectedValues.length > 0
|
|
31142
32288
|
? this.selectedValues[rowNum]
|
|
31143
|
-
: `xpl-table-checkbox-${rowNum}
|
|
32289
|
+
: `xpl-table-checkbox-${rowNum}` }), hAsync("div", { innerHTML: cell }))) : (hAsync("div", { innerHTML: cell }))))))))), this.rowFooterData?.length > 0 && (hAsync("tfoot", null, this.rowFooterData.map((row) => (hAsync("tr", null, row.map((cell) => (hAsync("td", null, hAsync("div", { innerHTML: cell })))))))))))));
|
|
32290
|
+
}
|
|
32291
|
+
renderCompositional() {
|
|
32292
|
+
const selectionToolbarCount = this.selectedRowIds.length;
|
|
32293
|
+
return (hAsync(Host, { role: "grid", "aria-label": this.label, "aria-colcount": this.colCount > 0 ? this.colCount : undefined, class: {
|
|
32294
|
+
'xpl-table': true,
|
|
32295
|
+
'xpl-table--striped': !!this.striped,
|
|
32296
|
+
'xpl-table--freeze': !!this.freeze,
|
|
32297
|
+
'xpl-table--has-scrolled': this.hasScrolled,
|
|
32298
|
+
'xpl-table--selectable': !!this.selectable,
|
|
32299
|
+
'xpl-table--selection-active': !!this.selectable && this.selectedRowIds.length > 0,
|
|
32300
|
+
'xpl-table--row-reorderable': !!this.rowReorderable,
|
|
32301
|
+
}, onScroll: this.onGridScroll }, this.rowReorderable && (hAsync("div", { class: "xpl-table__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)), this.selectable && (hAsync("div", { class: {
|
|
32302
|
+
'xpl-toolbar': true,
|
|
32303
|
+
hidden: selectionToolbarCount === 0,
|
|
32304
|
+
'xpl-table__toolbar': true,
|
|
32305
|
+
} }, hAsync("div", { class: "toolbar" }, hAsync("p", { class: "selected-item-count" }, selectionToolbarCount, " Selected"), hAsync("div", { class: "actions" }, hAsync("slot", { name: "toolbar-actions-left" }), hAsync("slot", { name: "toolbar-actions-right" }))))), hAsync("slot", null)));
|
|
32306
|
+
}
|
|
32307
|
+
render() {
|
|
32308
|
+
return this.isLegacyMode ? this.renderLegacy() : this.renderCompositional();
|
|
31144
32309
|
}
|
|
31145
32310
|
get el() { return getElement(this); }
|
|
31146
32311
|
static get watchers() { return {
|
|
32312
|
+
"columns": [{
|
|
32313
|
+
"watchColumns": 0
|
|
32314
|
+
}],
|
|
31147
32315
|
"data": [{
|
|
31148
32316
|
"watchData": 0
|
|
31149
32317
|
}],
|
|
31150
|
-
"
|
|
31151
|
-
"
|
|
32318
|
+
"footer": [{
|
|
32319
|
+
"watchFooterData": 0
|
|
32320
|
+
}],
|
|
32321
|
+
"reorderHandleIcon": [{
|
|
32322
|
+
"watchReorderHandleIcon": 0
|
|
32323
|
+
}],
|
|
32324
|
+
"reorderHandleIconKeyboard": [{
|
|
32325
|
+
"watchReorderHandleIconKeyboard": 0
|
|
32326
|
+
}],
|
|
32327
|
+
"rowReorderable": [{
|
|
32328
|
+
"watchRowReorderable": 0
|
|
32329
|
+
}],
|
|
32330
|
+
"selectable": [{
|
|
32331
|
+
"watchSelectable": 0
|
|
31152
32332
|
}]
|
|
31153
32333
|
}; }
|
|
31154
32334
|
static get cmpMeta() { return {
|
|
31155
|
-
"$flags$":
|
|
32335
|
+
"$flags$": 260,
|
|
31156
32336
|
"$tagName$": "xpl-table",
|
|
31157
32337
|
"$members$": {
|
|
31158
32338
|
"columns": [16],
|
|
31159
32339
|
"data": [16],
|
|
31160
32340
|
"footer": [16],
|
|
31161
32341
|
"freeze": [4],
|
|
32342
|
+
"isSortable": [4, "is-sortable"],
|
|
32343
|
+
"label": [1],
|
|
31162
32344
|
"multiselect": [4],
|
|
31163
|
-
"
|
|
32345
|
+
"reorderHandleIcon": [1, "reorder-handle-icon"],
|
|
32346
|
+
"reorderHandleIconKeyboard": [1, "reorder-handle-icon-keyboard"],
|
|
32347
|
+
"rowReorderable": [4, "row-reorderable"],
|
|
32348
|
+
"selectable": [4],
|
|
31164
32349
|
"selectedValues": [16],
|
|
31165
|
-
"isSortable": [4, "is-sortable"],
|
|
31166
32350
|
"sortableColumns": [16],
|
|
32351
|
+
"striped": [4],
|
|
31167
32352
|
"areAllSelected": [32],
|
|
31168
|
-
"
|
|
32353
|
+
"colCount": [32],
|
|
31169
32354
|
"hasScrolled": [32],
|
|
32355
|
+
"keyboardReorderRowId": [32],
|
|
32356
|
+
"reorderLiveMessage": [32],
|
|
32357
|
+
"rowData": [32],
|
|
32358
|
+
"rowFooterData": [32],
|
|
31170
32359
|
"selected": [32],
|
|
32360
|
+
"selectedRowIds": [32],
|
|
31171
32361
|
"sortTypeArray": [32]
|
|
31172
32362
|
},
|
|
31173
|
-
"$listeners$":
|
|
32363
|
+
"$listeners$": [[0, "xplTableColumnWidthsChange", "handleHeaderCellColumnWidthsChange"], [0, "checkboxChange", "handleCompositionalCheckboxChange"], [0, "headerCheckboxChange", "handleCompositionalHeaderCheckboxChange"], [3, "pointerdown", "handlePointerDownExitKeyboardReorder"], [3, "pointerdown", "handleRowReorderPointerDown"], [3, "dragstart", "handleRowReorderDragStart"], [3, "dragend", "handleRowReorderDragEnd"], [2, "dragover", "handleRowReorderDragOver"], [2, "dragenter", "handleRowReorderDragEnter"], [3, "dragleave", "handleRowReorderDragLeave"], [2, "drop", "handleRowReorderDrop"], [0, "headerSortChange", "handleCompositionalHeaderSort"]],
|
|
31174
32364
|
"$lazyBundleId$": "-",
|
|
31175
32365
|
"$attrsToReflect$": []
|
|
31176
32366
|
}; }
|
|
@@ -31182,7 +32372,7 @@ class TableHeader {
|
|
|
31182
32372
|
registerInstance(this, hostRef);
|
|
31183
32373
|
}
|
|
31184
32374
|
render() {
|
|
31185
|
-
return (hAsync(Host, { key: '
|
|
32375
|
+
return (hAsync(Host, { key: 'fb6c6d0ab301f41a22428583ffa0fea60a30719b', role: "row", class: "xpl-table-header" }, hAsync("slot", { key: '54b058d43266fa281e30d26a644ad93d6559408b' })));
|
|
31186
32376
|
}
|
|
31187
32377
|
static get cmpMeta() { return {
|
|
31188
32378
|
"$flags$": 260,
|
|
@@ -31197,69 +32387,146 @@ class TableHeader {
|
|
|
31197
32387
|
class TableHeaderCell {
|
|
31198
32388
|
constructor(hostRef) {
|
|
31199
32389
|
registerInstance(this, hostRef);
|
|
31200
|
-
this.
|
|
31201
|
-
this.
|
|
32390
|
+
this.headerCheckboxChange = createEvent(this, "headerCheckboxChange", 7);
|
|
32391
|
+
this.headerSortChange = createEvent(this, "headerSortChange", 7);
|
|
32392
|
+
this.align = 'left';
|
|
32393
|
+
this.checked = false;
|
|
32394
|
+
this.indeterminate = false;
|
|
31202
32395
|
this.label = '';
|
|
32396
|
+
this.sortable = false;
|
|
31203
32397
|
this.type = 'label';
|
|
31204
|
-
this.
|
|
32398
|
+
this.onHeaderInnerCheckboxChange = (ev) => {
|
|
32399
|
+
const { detail } = ev;
|
|
32400
|
+
const checked = typeof detail === 'boolean' ? detail : Boolean(detail);
|
|
32401
|
+
this.headerCheckboxChange.emit(checked);
|
|
32402
|
+
};
|
|
32403
|
+
this.onSortActivate = (event) => {
|
|
32404
|
+
event.preventDefault();
|
|
32405
|
+
event.stopPropagation();
|
|
32406
|
+
if (!this.sortable || this.type !== 'label')
|
|
32407
|
+
return;
|
|
32408
|
+
const columnIndex = this.getColumnIndex0();
|
|
32409
|
+
const sortKey = this.getSortKeySlug();
|
|
32410
|
+
if (!this.el.closest('xpl-table')) {
|
|
32411
|
+
this.sortDirection = cycleSortDirection(this.sortDirection);
|
|
32412
|
+
}
|
|
32413
|
+
this.headerSortChange.emit({
|
|
32414
|
+
columnIndex,
|
|
32415
|
+
sortKey,
|
|
32416
|
+
});
|
|
32417
|
+
};
|
|
31205
32418
|
}
|
|
31206
|
-
|
|
31207
|
-
|
|
31208
|
-
|
|
31209
|
-
|
|
31210
|
-
|
|
31211
|
-
|
|
32419
|
+
watchColumnWidth() {
|
|
32420
|
+
this.notifyColumnWidthsChange();
|
|
32421
|
+
}
|
|
32422
|
+
watchWidth() {
|
|
32423
|
+
this.notifyColumnWidthsChange();
|
|
32424
|
+
}
|
|
32425
|
+
componentDidLoad() {
|
|
32426
|
+
this.notifyColumnWidthsChange();
|
|
32427
|
+
}
|
|
32428
|
+
notifyColumnWidthsChange() {
|
|
32429
|
+
this.el.dispatchEvent(new CustomEvent(XPL_TABLE_COLUMN_WIDTHS_CHANGE_EVENT, {
|
|
32430
|
+
bubbles: true,
|
|
32431
|
+
composed: true,
|
|
32432
|
+
}));
|
|
32433
|
+
}
|
|
32434
|
+
getColumnIndex0() {
|
|
32435
|
+
return Array.from(this.el.parentElement?.children ?? []).indexOf(this.el);
|
|
32436
|
+
}
|
|
32437
|
+
getSortKeySlug() {
|
|
32438
|
+
const raw = (this.sortKey ?? this.label ?? '').trim();
|
|
32439
|
+
if (raw.length > 0) {
|
|
32440
|
+
return raw.replace(/ /g, '-').toLowerCase();
|
|
31212
32441
|
}
|
|
31213
|
-
|
|
31214
|
-
|
|
32442
|
+
return `column-${this.getColumnIndex0()}`;
|
|
32443
|
+
}
|
|
32444
|
+
renderLabelText() {
|
|
32445
|
+
return (hAsync("span", { class: "xpl-table-header-cell__text" }, this.label, hAsync("slot", null)));
|
|
32446
|
+
}
|
|
32447
|
+
renderLabelContent() {
|
|
32448
|
+
if (this.sortable) {
|
|
32449
|
+
const iconName = getSortAffordanceIconName(this.sortDirection);
|
|
32450
|
+
const sortActive = this.sortDirection === 'asc' || this.sortDirection === 'desc';
|
|
32451
|
+
return (hAsync("button", { type: "button", class: "xpl-table-header-cell__sort", onClick: this.onSortActivate }, this.renderLabelText(), hAsync("xpl-icon", { class: {
|
|
32452
|
+
'xpl-table-header-cell__sort-icon': true,
|
|
32453
|
+
'xpl-table-header-cell__sort-icon--active': sortActive,
|
|
32454
|
+
'xpl-table-header-cell__sort-icon--default': !sortActive,
|
|
32455
|
+
}, icon: iconName, size: 16 })));
|
|
31215
32456
|
}
|
|
31216
|
-
this.
|
|
32457
|
+
return this.renderLabelText();
|
|
31217
32458
|
}
|
|
31218
32459
|
render() {
|
|
31219
|
-
const colIndex = this.
|
|
31220
|
-
? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
|
|
31221
|
-
: 0;
|
|
32460
|
+
const colIndex = this.getColumnIndex0() + 1;
|
|
31222
32461
|
const renderContent = () => {
|
|
31223
32462
|
switch (this.type) {
|
|
31224
32463
|
case 'label':
|
|
31225
|
-
return
|
|
32464
|
+
return this.renderLabelContent();
|
|
31226
32465
|
case 'checkbox':
|
|
31227
|
-
return hAsync("xpl-checkbox",
|
|
32466
|
+
return (hAsync("xpl-checkbox", { ariaLabel: this.checkboxAriaLabel ?? 'Select all rows', checked: this.checked, indeterminate: this.indeterminate, onCheckboxChange: this.onHeaderInnerCheckboxChange }));
|
|
31228
32467
|
case 'icon':
|
|
31229
32468
|
return this.icon ? hAsync("xpl-icon", { icon: this.icon, size: 20 }) : null;
|
|
32469
|
+
case 'empty':
|
|
32470
|
+
return null;
|
|
31230
32471
|
default:
|
|
31231
32472
|
return '';
|
|
31232
32473
|
}
|
|
31233
32474
|
};
|
|
31234
|
-
const
|
|
31235
|
-
|
|
31236
|
-
|
|
31237
|
-
|
|
31238
|
-
|
|
31239
|
-
|
|
31240
|
-
|
|
31241
|
-
|
|
31242
|
-
|
|
31243
|
-
|
|
31244
|
-
|
|
31245
|
-
|
|
31246
|
-
|
|
32475
|
+
const effectiveAlign = (this.type === 'checkbox' || this.type === 'icon') && this.align === 'left'
|
|
32476
|
+
? 'center'
|
|
32477
|
+
: this.align;
|
|
32478
|
+
const alignClass = `xpl-table-header-cell--align-${effectiveAlign}`;
|
|
32479
|
+
const ariaSort = this.type === 'label' && this.sortable
|
|
32480
|
+
? this.sortDirection === 'asc'
|
|
32481
|
+
? 'ascending'
|
|
32482
|
+
: this.sortDirection === 'desc'
|
|
32483
|
+
? 'descending'
|
|
32484
|
+
: 'none'
|
|
32485
|
+
: undefined;
|
|
32486
|
+
return (hAsync(Host, { role: "columnheader", "aria-colindex": colIndex, class: {
|
|
32487
|
+
'xpl-table-header-cell': true,
|
|
32488
|
+
[alignClass]: true,
|
|
32489
|
+
'xpl-table-header-cell--checkbox': this.type === 'checkbox',
|
|
32490
|
+
'xpl-table-header-cell--icon': this.type === 'icon',
|
|
32491
|
+
'xpl-table-header-cell--empty': this.type === 'empty',
|
|
32492
|
+
'xpl-table-header-cell--sortable': this.sortable && this.type === 'label',
|
|
32493
|
+
}, "aria-checked": this.type === 'checkbox'
|
|
32494
|
+
? this.indeterminate
|
|
32495
|
+
? 'mixed'
|
|
32496
|
+
: this.checked
|
|
32497
|
+
? 'true'
|
|
32498
|
+
: 'false'
|
|
32499
|
+
: undefined, "aria-sort": ariaSort }, this.type === 'empty' ? null : renderContent()));
|
|
31247
32500
|
}
|
|
31248
32501
|
get el() { return getElement(this); }
|
|
32502
|
+
static get watchers() { return {
|
|
32503
|
+
"columnWidth": [{
|
|
32504
|
+
"watchColumnWidth": 0
|
|
32505
|
+
}],
|
|
32506
|
+
"width": [{
|
|
32507
|
+
"watchWidth": 0
|
|
32508
|
+
}]
|
|
32509
|
+
}; }
|
|
31249
32510
|
static get cmpMeta() { return {
|
|
31250
|
-
"$flags$":
|
|
32511
|
+
"$flags$": 260,
|
|
31251
32512
|
"$tagName$": "xpl-table-header-cell",
|
|
31252
32513
|
"$members$": {
|
|
32514
|
+
"align": [1],
|
|
32515
|
+
"checkboxAriaLabel": [1, "checkbox-aria-label"],
|
|
32516
|
+
"checked": [4],
|
|
32517
|
+
"columnWidth": [513, "column-width"],
|
|
31253
32518
|
"icon": [1],
|
|
31254
|
-
"
|
|
32519
|
+
"indeterminate": [4],
|
|
31255
32520
|
"label": [1],
|
|
31256
|
-
"
|
|
31257
|
-
"
|
|
31258
|
-
"
|
|
32521
|
+
"sortDirection": [1537, "sort-direction"],
|
|
32522
|
+
"sortKey": [1, "sort-key"],
|
|
32523
|
+
"sortable": [4],
|
|
32524
|
+
"type": [513],
|
|
32525
|
+
"width": [514]
|
|
31259
32526
|
},
|
|
31260
32527
|
"$listeners$": undefined,
|
|
31261
32528
|
"$lazyBundleId$": "-",
|
|
31262
|
-
"$attrsToReflect$": []
|
|
32529
|
+
"$attrsToReflect$": [["columnWidth", "column-width"], ["sortDirection", "sort-direction"], ["type", "type"], ["width", "width"]]
|
|
31263
32530
|
}; }
|
|
31264
32531
|
}
|
|
31265
32532
|
|
|
@@ -31587,11 +32854,11 @@ class Tabs {
|
|
|
31587
32854
|
}
|
|
31588
32855
|
render() {
|
|
31589
32856
|
const isSegment = this.type === 'segment';
|
|
31590
|
-
return (hAsync(Host, { key: '
|
|
32857
|
+
return (hAsync(Host, { key: '0bb77237fce464cc536ce4efabb29249fa14ef4a', class: {
|
|
31591
32858
|
'xpl-tabs': true,
|
|
31592
32859
|
'xpl-tabs--full-width': this.fullWidth,
|
|
31593
32860
|
'xpl-tabs--segment': isSegment,
|
|
31594
|
-
}, "data-choices-tick": this.choicesTick }, hAsync("xpl-select", { key: '
|
|
32861
|
+
}, "data-choices-tick": this.choicesTick }, hAsync("xpl-select", { key: 'fbcc113cc9a308df73bf99f6c941612725e49ddb', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
|
|
31595
32862
|
if (event.detail) {
|
|
31596
32863
|
this.isMobileSelectChange = true;
|
|
31597
32864
|
}
|
|
@@ -31602,17 +32869,17 @@ class Tabs {
|
|
|
31602
32869
|
this.tabChange.emit(selectedValue);
|
|
31603
32870
|
this.isMobileSelectChange = false;
|
|
31604
32871
|
}
|
|
31605
|
-
} }), hAsync("nav", { key: '
|
|
32872
|
+
} }), hAsync("nav", { key: '1b93068116c5ff0ac94d5139e147daffc1157c73', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
|
|
31606
32873
|
this.headingsContainerRef = el;
|
|
31607
32874
|
}, onTabChange: (event) => {
|
|
31608
32875
|
event.stopPropagation();
|
|
31609
32876
|
this.isMobileSelectChange = false;
|
|
31610
32877
|
this.handleTabChange(event.detail);
|
|
31611
32878
|
this.tabChange.emit(event.detail);
|
|
31612
|
-
} }, !isSegment && (hAsync("div", { key: '
|
|
32879
|
+
} }, !isSegment && (hAsync("div", { key: '38a88df2520d308e3a22b4cd70ff274af7403616', class: "xpl-tabs__active-bar", style: {
|
|
31613
32880
|
transform: `translateX(${this.activeBarPosition.left}px)`,
|
|
31614
32881
|
width: `${this.activeBarPosition.width}px`,
|
|
31615
|
-
} })), hAsync("slot", { key: '
|
|
32882
|
+
} })), hAsync("slot", { key: 'dc30ab2123d7c1c8b6591ac0129af44da3795977', name: "heading" })), hAsync("div", { key: '36c1fc45216499d4af87b8fc536df3ea6af666ab', class: "xpl-tabs__panels" }, hAsync("slot", { key: 'a660913c7d2fce500da666490b600b4c7fc93746', name: "panel" }))));
|
|
31616
32883
|
}
|
|
31617
32884
|
get el() { return getElement(this); }
|
|
31618
32885
|
static get watchers() { return {
|
|
@@ -31773,7 +33040,7 @@ class Tag {
|
|
|
31773
33040
|
}
|
|
31774
33041
|
render() {
|
|
31775
33042
|
const dragEnabled = this.isDraggable && !this.disabled;
|
|
31776
|
-
return (hAsync(Host, { key: '
|
|
33043
|
+
return (hAsync(Host, { key: '9a05e10e7fbc047112f740884e6ba40c773b472c', class: {
|
|
31777
33044
|
'xpl-tag': true,
|
|
31778
33045
|
'xpl-tag-container': true,
|
|
31779
33046
|
'xpl-tag--disabled': this.disabled,
|
|
@@ -31781,7 +33048,7 @@ class Tag {
|
|
|
31781
33048
|
'xpl-tag--dragging': this.isDragging,
|
|
31782
33049
|
'xpl-tag--draggable': dragEnabled,
|
|
31783
33050
|
'xpl-tag--sm': this.size === 'sm',
|
|
31784
|
-
}, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (hAsync("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, hAsync("slot", null))) : (hAsync("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, hAsync("slot", null))), this.dismissible && (hAsync("button", { key: '
|
|
33051
|
+
}, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (hAsync("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, hAsync("slot", null))) : (hAsync("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, hAsync("slot", null))), this.dismissible && (hAsync("button", { key: '37f7687aa9675c52cbd4390d66d63ced630904d0', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, hAsync("xpl-icon", { key: '104eac0362541d99c59e0fd6b18a5e1b2171030b', icon: "xmark", size: 10 })))));
|
|
31785
33052
|
}
|
|
31786
33053
|
get el() { return getElement(this); }
|
|
31787
33054
|
static get watchers() { return {
|
|
@@ -31879,11 +33146,11 @@ class Toast {
|
|
|
31879
33146
|
}
|
|
31880
33147
|
}
|
|
31881
33148
|
render() {
|
|
31882
|
-
return (hAsync(Host, { key: '
|
|
33149
|
+
return (hAsync(Host, { key: 'd51d901c62de43e0ad248a626e0447a7849e50f3', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, hAsync("div", { key: 'e2e3585a43272f51f6ace1ce62544ae41464a3e5', class: "xpl-toast__left" }, this.showIcon && (hAsync("div", { key: 'e3fd60595f205d8e15ed3ca1826e5e6d356e1a63', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), hAsync("div", { key: '49642e6ee5502c09deb32188b62a160f748bb564', class: "xpl-toast__notification" }, hAsync("p", { key: 'f7176eea6e6e125bec0c4397b0399bb76e8554b7', class: "xpl-toast__title" }, hAsync("slot", { key: 'd5dd0d0413ec4f8198d16f8689791614fea877bc', name: "title" })), this.caption !== '' && (hAsync("p", { key: '966112d3fe6dc1348341034685c606ca98e95d84', class: "xpl-toast__caption" }, this.caption?.substring(0, 85))))), hAsync("div", { key: 'c9ba66aaf64f191d5bab1c3290e0981a86a3ef91', class: "xpl-toast__action", ref: (el) => {
|
|
31883
33150
|
if (el) {
|
|
31884
33151
|
this.actionSlot = el;
|
|
31885
33152
|
}
|
|
31886
|
-
} }, hAsync("slot", { key: '
|
|
33153
|
+
} }, hAsync("slot", { key: 'faad90759fd343be3caa4540422c09d04642a217', name: "action" })), this.isDismissible && (hAsync("div", { key: '25f1140170ec9a242e62c6665ebf0eb8aa1bae64', class: "xpl-toast__close" }, hAsync("xpl-button", { key: '635900d579bda4fb905c7280de700de1143d474b', variant: "tertiary", size: "sm", iconOnly: true, icon: "xmark", type: "button", "aria-label": "Dismiss notification", onClick: this.dismiss })))));
|
|
31887
33154
|
}
|
|
31888
33155
|
get el() { return getElement(this); }
|
|
31889
33156
|
static get watchers() { return {
|
|
@@ -31929,13 +33196,13 @@ class Toggle {
|
|
|
31929
33196
|
let className = 'xpl-toggle';
|
|
31930
33197
|
if (this.variant === 'small')
|
|
31931
33198
|
className += ' xpl-toggle--small';
|
|
31932
|
-
return (hAsync(Host, { key: '
|
|
33199
|
+
return (hAsync(Host, { key: '79915f2091093b5440ca3a8e63584e448137f479', class: containerClassName }, (this.heading || this.description) && (hAsync("label", { key: '6660a95ec66eec9ed33016efcf58aaf0940f6f47', class: {
|
|
31933
33200
|
'xpl-label': true,
|
|
31934
33201
|
'xpl-label--disabled': !!this.disabled,
|
|
31935
|
-
}, htmlFor: this.id }, this.heading, this.description && (hAsync("small", { key: '
|
|
33202
|
+
}, htmlFor: this.id }, this.heading, this.description && (hAsync("small", { key: '160f0a90739142bc37779af28725183979de5a4c', class: {
|
|
31936
33203
|
'xpl-description': true,
|
|
31937
33204
|
'xpl-description--disabled': !!this.disabled,
|
|
31938
|
-
} }, this.description)))), hAsync("input", { key: '
|
|
33205
|
+
} }, this.description)))), hAsync("input", { key: 'b136188b1de98d1ede875bf9f80b97c9ee66321d', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && hAsync("label", { key: '0329f2badfa3b3e8c1153c2e5baa4ee76e40ac5d', htmlFor: this.id }, this.label)));
|
|
31939
33206
|
}
|
|
31940
33207
|
static get cmpMeta() { return {
|
|
31941
33208
|
"$flags$": 0,
|
|
@@ -31970,11 +33237,11 @@ class Toolbar {
|
|
|
31970
33237
|
this.selectedItemCount = event.detail.length;
|
|
31971
33238
|
}
|
|
31972
33239
|
render() {
|
|
31973
|
-
return (hAsync(Host, { key: '
|
|
33240
|
+
return (hAsync(Host, { key: '688ada0542f0634df6b447331833205149e88a94', class: {
|
|
31974
33241
|
'xpl-toolbar': true,
|
|
31975
33242
|
dark: true,
|
|
31976
33243
|
hidden: this.selectedItemCount === 0,
|
|
31977
|
-
} }, hAsync("div", { key: '
|
|
33244
|
+
} }, hAsync("div", { key: '6b8c2990c354d2b9ee93225ad98fb8fbaf3dbaf7', class: "toolbar" }, hAsync("p", { key: '60923603e318d109fd794259863a684d749ed52b', class: "selected-item-count" }, this.selectedItemCount, " Selected"), hAsync("div", { key: '77df55c910d8ce89a4ff2a0356bc7cf78120e49a', class: "actions" }, hAsync("slot", { key: '5de2e6bd168c31be133c55758acd2f95c56b715c', name: "actions-left" }), hAsync("slot", { key: '3f8b3540adbd441c28771410f4d33e29d87d3be9', name: "actions-right" })))));
|
|
31978
33245
|
}
|
|
31979
33246
|
get el() { return getElement(this); }
|
|
31980
33247
|
static get cmpMeta() { return {
|
|
@@ -31998,7 +33265,7 @@ class Tooltip {
|
|
|
31998
33265
|
this.hideArrow = false;
|
|
31999
33266
|
}
|
|
32000
33267
|
render() {
|
|
32001
|
-
return (hAsync(Host, { key: '
|
|
33268
|
+
return (hAsync(Host, { key: '916a12e608a6e40c40ddfdbe40f12e115215758e' }, hAsync("div", { key: '2f6c39a146fb2ba830306933309ffad9e8919eab', class: "xpl-tooltip-container" }, hAsync("slot", { key: '39b1b2cf370620b96fd00b6343dc0896791ad510' }), hAsync("div", { key: '34198d0f1184a3e05236a508e94531f503309691', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (hAsync("div", { key: '42f42b07b4f0ae6bd7cbd31837e4846a28ed4e72', class: "xpl-tooltip-arrow" }, hAsync(TooltipArrow, { key: 'af8672da89cda34507e53906937e600400b26953' })))))));
|
|
32002
33269
|
}
|
|
32003
33270
|
static get cmpMeta() { return {
|
|
32004
33271
|
"$flags$": 260,
|
|
@@ -32319,7 +33586,7 @@ class TopNav {
|
|
|
32319
33586
|
}
|
|
32320
33587
|
}
|
|
32321
33588
|
render() {
|
|
32322
|
-
return (hAsync(Host, { key: '
|
|
33589
|
+
return (hAsync(Host, { key: 'f51ed285523198b4ef39de7ea1e5dc025d5a308a', class: {
|
|
32323
33590
|
'xpl-top-nav': true,
|
|
32324
33591
|
'xpl-top-nav--nav-control': Boolean(this.navControl),
|
|
32325
33592
|
'xpl-top-nav--open': this.open,
|
|
@@ -32327,15 +33594,15 @@ class TopNav {
|
|
|
32327
33594
|
'xpl-top-nav--has-brand': this.hasBrand,
|
|
32328
33595
|
'xpl-top-nav--has-user-menu': this.hasUserMenu,
|
|
32329
33596
|
dark: true,
|
|
32330
|
-
} }, hAsync("nav", { key: '
|
|
33597
|
+
} }, hAsync("nav", { key: 'c2c14ed2ba975299efd76a391dfd6371b9214449', "aria-label": this.label ?? 'top-navigation-bar', class: "xpl-top-nav__bar" }, hAsync("div", { key: 'c223b947ffbcb55c6c6a06fa3adaeaee7661b61e', class: "xpl-top-nav__inner-left" }, this.navControl && (hAsync("button", { key: 'd364b6dd709d59730d40e7a0d41f9dd8fd55d40b', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, hAsync("xpl-icon", { key: 'b84614dc20189f641b2f5a08eef1c76610135598', class: "xpl-top-nav__control-icon", icon: "menu", size: 32 }))), this.hasBrand && (hAsync("div", { key: '90b104133cbdea89643923fd06f54179978862a5', class: "xpl-top-nav__brand-bar" }, hAsync("xpl-top-nav-item", { key: '2b40b31ba1312a76231f7a89b1e95508a5a146a1', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, this.brandLogo?.trim() ? (hAsync("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: this.brandName?.trim()
|
|
32331
33598
|
? this.brandName.trim()
|
|
32332
|
-
: 'Brand' })) : this.brandLogoSlotPresent ? (hAsync("span", { class: "xpl-top-nav__brand-logo-slot" }, hAsync("slot", { name: "brand-logo" }))) : null, this.brandName?.trim() ? (hAsync("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), hAsync("div", { key: '
|
|
33599
|
+
: 'Brand' })) : this.brandLogoSlotPresent ? (hAsync("span", { class: "xpl-top-nav__brand-logo-slot" }, hAsync("slot", { name: "brand-logo" }))) : null, this.brandName?.trim() ? (hAsync("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), hAsync("div", { key: 'ca3e9b4501ab3756301b2079bcb9632734e56922', class: {
|
|
32333
33600
|
'xpl-top-nav__aside': true,
|
|
32334
33601
|
'xpl-nav-left': true,
|
|
32335
|
-
} }, hAsync("div", { key: '
|
|
33602
|
+
} }, hAsync("div", { key: 'f2674faf140853536150058d13a5d40c7399979e', class: "xpl-top-nav__left-primary", role: "list" }, hAsync("slot", { key: '29363ac15d3f3bf7a43b237a7f7e0622c5bd54c4', name: "left-aside" })))), hAsync("div", { key: '7c83bd0a80649b9cbe9ed757ead1136b6fabd09c', class: {
|
|
32336
33603
|
'xpl-top-nav__aside': true,
|
|
32337
33604
|
'xpl-nav-right': true,
|
|
32338
|
-
} }, hAsync("div", { key: '
|
|
33605
|
+
} }, hAsync("div", { key: 'c67e6d3365d90cd7f7c55b08dcc4fa56dcb3e291', class: "xpl-nav-right__list" }, hAsync("div", { key: '46b9c3b0b010bf52a5632bc81b279310c0a54438', class: "xpl-top-nav__right-rail" }, hAsync("div", { key: '72279d15a5464dfabd9f92c04bc231e270ea04b9', class: "xpl-top-nav__right-lead" }, hAsync("slot", { key: 'd8b44d01141f9cfbeb7d6b019345ffc8c94fd0c3', name: "right-aside" })), this.hasUserMenu ? (hAsync("div", { class: "xpl-top-nav__right-user" }, hAsync("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (hAsync("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (hAsync("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
|
|
32339
33606
|
? undefined
|
|
32340
33607
|
: 'Open account menu' }, this.childAccountLabelText.length > 0
|
|
32341
33608
|
? this.childAccountLabelText
|
|
@@ -32778,7 +34045,7 @@ class TopNavItem {
|
|
|
32778
34045
|
return (hAsync("button", { ...shared, type: "button" }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
|
|
32779
34046
|
}
|
|
32780
34047
|
render() {
|
|
32781
|
-
return (hAsync(Host, { key: '
|
|
34048
|
+
return (hAsync(Host, { key: 'fe53cfd84cba8502089c4a3fae62dfed10c0cdf0', class: {
|
|
32782
34049
|
'xpl-top-nav-item': true,
|
|
32783
34050
|
'xpl-top-nav-item--active': this.active,
|
|
32784
34051
|
'xpl-top-nav-item--dropdown-open': this.hasDropdown && this.open,
|
|
@@ -32786,7 +34053,7 @@ class TopNavItem {
|
|
|
32786
34053
|
'xpl-top-nav-item--has-dropdown': this.hasDropdown,
|
|
32787
34054
|
'xpl-top-nav-item--selected': this.selected,
|
|
32788
34055
|
dark: true,
|
|
32789
|
-
}, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, ...(this.hostListitemRole ? { role: 'listitem' } : {}) }, this.renderInner(), this.hasDropdown && (hAsync("div", { key: '
|
|
34056
|
+
}, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, ...(this.hostListitemRole ? { role: 'listitem' } : {}) }, this.renderInner(), this.hasDropdown && (hAsync("div", { key: '954f83c94bd56d9bd328212f2ecc070861b1fd54', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, hAsync("slot", { key: '4d830a9386f12026cd1a2ecb454bcb9df2202431', name: "dropdown" })))));
|
|
32790
34057
|
}
|
|
32791
34058
|
get el() { return getElement(this); }
|
|
32792
34059
|
static get watchers() { return {
|
|
@@ -32902,10 +34169,10 @@ class TopNavMenu {
|
|
|
32902
34169
|
return (hAsync("xpl-top-nav-item", { class: "xpl-top-nav-menu__back", label: this.label, onNavItemClick: this.handleBackClick }, hAsync("xpl-icon", { slot: "leading-icon", icon: "chevron-left", size: 24 })));
|
|
32903
34170
|
}
|
|
32904
34171
|
render() {
|
|
32905
|
-
return (hAsync(Host, { key: '
|
|
34172
|
+
return (hAsync(Host, { key: '10a844d721713b72f636a8a3a3e266139b9c0193', class: {
|
|
32906
34173
|
'xpl-top-nav-menu': true,
|
|
32907
34174
|
dark: true,
|
|
32908
|
-
}, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), hAsync("slot", { key: '
|
|
34175
|
+
}, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), hAsync("slot", { key: 'e7db1c580f34bf388658f6baacfc325322e2670e' })));
|
|
32909
34176
|
}
|
|
32910
34177
|
get el() { return getElement(this); }
|
|
32911
34178
|
static get cmpMeta() { return {
|
|
@@ -32935,7 +34202,7 @@ class UtilityBar {
|
|
|
32935
34202
|
this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
|
|
32936
34203
|
}
|
|
32937
34204
|
render() {
|
|
32938
|
-
return (hAsync(Host, { key: '
|
|
34205
|
+
return (hAsync(Host, { key: '9bb4778368fca3035fc19b74ec3881b9c21ce856' }, hAsync("nav", { key: '909606f5baaef1a9c7402ac18107a607aa1df742', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (hAsync("div", null, hAsync("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, hAsync("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), hAsync("slot", { name: "aside" }))) : (hAsync("slot", { name: "aside" })), hAsync("slot", { key: 'd6bce27702906a01823de67d63173406ceb06290', name: "main" }))));
|
|
32939
34206
|
}
|
|
32940
34207
|
static get cmpMeta() { return {
|
|
32941
34208
|
"$flags$": 260,
|
|
@@ -33438,11 +34705,11 @@ class XplPanel {
|
|
|
33438
34705
|
}
|
|
33439
34706
|
render() {
|
|
33440
34707
|
const hasAccent = this.accent !== 'none';
|
|
33441
|
-
return (hAsync(Host, { key: '
|
|
34708
|
+
return (hAsync(Host, { key: '61852953ba87a556efaeff011546aecdd27bb6b1', class: {
|
|
33442
34709
|
'xpl-panel': true,
|
|
33443
34710
|
[`xpl-panel--accent-${this.accent}`]: hasAccent,
|
|
33444
34711
|
[`xpl-panel--padding-${this.padding}`]: true,
|
|
33445
|
-
} }, hasAccent && hAsync("div", { key: '
|
|
34712
|
+
} }, hasAccent && hAsync("div", { key: 'b4317b146c7759041d90b1a07ddd18f8dd3f2fd9', "aria-hidden": "true", class: "xpl-panel__accent" }), hAsync("div", { key: 'b6d5634c93f921a002a3928884f54d3f8cce76cf', class: "xpl-panel__content" }, hAsync("slot", { key: '903c5e6f307ab7045b992f6b3bf3ec2c5b563455' }))));
|
|
33446
34713
|
}
|
|
33447
34714
|
static get cmpMeta() { return {
|
|
33448
34715
|
"$flags$": 260,
|
|
@@ -33462,7 +34729,7 @@ class XplTableBody {
|
|
|
33462
34729
|
registerInstance(this, hostRef);
|
|
33463
34730
|
}
|
|
33464
34731
|
render() {
|
|
33465
|
-
return (hAsync(Host, { key: '
|
|
34732
|
+
return (hAsync(Host, { key: 'e5934161758f0934269a09e4a1058f3fda919e9d', class: "xpl-table-body", role: "rowgroup" }, hAsync("slot", { key: 'e042714dc35cbe4ecc83cff740f7a24de48feec1' })));
|
|
33466
34733
|
}
|
|
33467
34734
|
static get cmpMeta() { return {
|
|
33468
34735
|
"$flags$": 260,
|
|
@@ -33474,12 +34741,107 @@ class XplTableBody {
|
|
|
33474
34741
|
}; }
|
|
33475
34742
|
}
|
|
33476
34743
|
|
|
34744
|
+
const CELL_MANAGED_DISABLED_ATTR = 'data-xpl-table-cell-managed-disabled';
|
|
34745
|
+
function isDisablableControl(el) {
|
|
34746
|
+
if ('disabled' in el) {
|
|
34747
|
+
return true;
|
|
34748
|
+
}
|
|
34749
|
+
switch (el.tagName) {
|
|
34750
|
+
case 'BUTTON':
|
|
34751
|
+
case 'INPUT':
|
|
34752
|
+
case 'SELECT':
|
|
34753
|
+
case 'TEXTAREA':
|
|
34754
|
+
case 'FIELDSET':
|
|
34755
|
+
case 'OPTGROUP':
|
|
34756
|
+
case 'OPTION':
|
|
34757
|
+
return true;
|
|
34758
|
+
default:
|
|
34759
|
+
return false;
|
|
34760
|
+
}
|
|
34761
|
+
}
|
|
34762
|
+
class XplTableCell {
|
|
34763
|
+
constructor(hostRef) {
|
|
34764
|
+
registerInstance(this, hostRef);
|
|
34765
|
+
this.align = 'left';
|
|
34766
|
+
this.bold = false;
|
|
34767
|
+
this.disabled = false;
|
|
34768
|
+
this.underline = false;
|
|
34769
|
+
}
|
|
34770
|
+
onDisabledChange() {
|
|
34771
|
+
this.propagateDisabledToSlotted();
|
|
34772
|
+
}
|
|
34773
|
+
componentDidLoad() {
|
|
34774
|
+
this.propagateDisabledToSlotted();
|
|
34775
|
+
}
|
|
34776
|
+
propagateDisabledToSlotted() {
|
|
34777
|
+
const setControlDisabled = (element) => {
|
|
34778
|
+
if (!isDisablableControl(element)) {
|
|
34779
|
+
return;
|
|
34780
|
+
}
|
|
34781
|
+
const control = element;
|
|
34782
|
+
if (this.disabled) {
|
|
34783
|
+
if (control.disabled) {
|
|
34784
|
+
return;
|
|
34785
|
+
}
|
|
34786
|
+
control.disabled = true;
|
|
34787
|
+
control.setAttribute('disabled', '');
|
|
34788
|
+
control.setAttribute(CELL_MANAGED_DISABLED_ATTR, '');
|
|
34789
|
+
return;
|
|
34790
|
+
}
|
|
34791
|
+
if (!control.hasAttribute(CELL_MANAGED_DISABLED_ATTR)) {
|
|
34792
|
+
return;
|
|
34793
|
+
}
|
|
34794
|
+
control.disabled = false;
|
|
34795
|
+
control.removeAttribute('disabled');
|
|
34796
|
+
control.removeAttribute(CELL_MANAGED_DISABLED_ATTR);
|
|
34797
|
+
};
|
|
34798
|
+
const walk = (parent) => {
|
|
34799
|
+
Array.from(parent.children).forEach((child) => {
|
|
34800
|
+
if (child.tagName === 'XPL-TABLE') {
|
|
34801
|
+
return;
|
|
34802
|
+
}
|
|
34803
|
+
setControlDisabled(child);
|
|
34804
|
+
walk(child);
|
|
34805
|
+
});
|
|
34806
|
+
};
|
|
34807
|
+
walk(this.el);
|
|
34808
|
+
}
|
|
34809
|
+
render() {
|
|
34810
|
+
return (hAsync(Host, { key: 'f4e7639b0cb35eda08fdbb13cf1e0ddcb380cb7a', role: "gridcell", class: {
|
|
34811
|
+
'xpl-table-cell': true,
|
|
34812
|
+
[`xpl-table-cell--align-${this.align}`]: true,
|
|
34813
|
+
'xpl-table-cell--bold': this.bold,
|
|
34814
|
+
'xpl-table-cell--underline': this.underline,
|
|
34815
|
+
'xpl-table-cell--disabled': this.disabled,
|
|
34816
|
+
} }, hAsync("slot", { key: '16d9a63cb992b9bbeb56500b5d6537b824336b40' })));
|
|
34817
|
+
}
|
|
34818
|
+
get el() { return getElement(this); }
|
|
34819
|
+
static get watchers() { return {
|
|
34820
|
+
"disabled": [{
|
|
34821
|
+
"onDisabledChange": 0
|
|
34822
|
+
}]
|
|
34823
|
+
}; }
|
|
34824
|
+
static get cmpMeta() { return {
|
|
34825
|
+
"$flags$": 260,
|
|
34826
|
+
"$tagName$": "xpl-table-cell",
|
|
34827
|
+
"$members$": {
|
|
34828
|
+
"align": [1],
|
|
34829
|
+
"bold": [4],
|
|
34830
|
+
"disabled": [4],
|
|
34831
|
+
"underline": [4]
|
|
34832
|
+
},
|
|
34833
|
+
"$listeners$": undefined,
|
|
34834
|
+
"$lazyBundleId$": "-",
|
|
34835
|
+
"$attrsToReflect$": []
|
|
34836
|
+
}; }
|
|
34837
|
+
}
|
|
34838
|
+
|
|
33477
34839
|
class XplTableFooter {
|
|
33478
34840
|
constructor(hostRef) {
|
|
33479
34841
|
registerInstance(this, hostRef);
|
|
33480
34842
|
}
|
|
33481
34843
|
render() {
|
|
33482
|
-
return (hAsync(Host, { key: '
|
|
34844
|
+
return (hAsync(Host, { key: '57872baa33166a8146bd0c9b3d7af1597e1fb41e', class: "xpl-table-footer", role: "rowgroup" }, hAsync("slot", { key: '65def2bdfee1be95fa966f7f746dedc7176b91e6' })));
|
|
33483
34845
|
}
|
|
33484
34846
|
static get cmpMeta() { return {
|
|
33485
34847
|
"$flags$": 260,
|
|
@@ -33497,10 +34859,10 @@ class XplTableFooterCell {
|
|
|
33497
34859
|
this.align = 'left';
|
|
33498
34860
|
}
|
|
33499
34861
|
render() {
|
|
33500
|
-
return (hAsync(Host, { key: '
|
|
34862
|
+
return (hAsync(Host, { key: '1434aa38de9894875e70b2a7b3c55479726727d5', class: {
|
|
33501
34863
|
'xpl-table-footer-cell': true,
|
|
33502
34864
|
[`xpl-table-footer-cell--align-${this.align}`]: true,
|
|
33503
|
-
}, role: "gridcell" }, hAsync("slot", { key: '
|
|
34865
|
+
}, role: "gridcell" }, hAsync("slot", { key: 'e3bac594dbd5265f44c7bd620e1fccfc9248abf0' })));
|
|
33504
34866
|
}
|
|
33505
34867
|
static get cmpMeta() { return {
|
|
33506
34868
|
"$flags$": 260,
|
|
@@ -33514,19 +34876,60 @@ class XplTableFooterCell {
|
|
|
33514
34876
|
}; }
|
|
33515
34877
|
}
|
|
33516
34878
|
|
|
34879
|
+
function isTableCell(node) {
|
|
34880
|
+
return node.nodeName === 'XPL-TABLE-CELL';
|
|
34881
|
+
}
|
|
33517
34882
|
class XplTableRow {
|
|
33518
34883
|
constructor(hostRef) {
|
|
33519
34884
|
registerInstance(this, hostRef);
|
|
33520
34885
|
this.disabled = false;
|
|
33521
34886
|
this.selected = false;
|
|
33522
34887
|
}
|
|
34888
|
+
onDisabledChange() {
|
|
34889
|
+
this.propagateDisabledToCells();
|
|
34890
|
+
}
|
|
34891
|
+
connectedCallback() {
|
|
34892
|
+
if (typeof MutationObserver === 'undefined')
|
|
34893
|
+
return;
|
|
34894
|
+
this.cellObserver = new MutationObserver((mutations) => {
|
|
34895
|
+
mutations.forEach((mutation) => {
|
|
34896
|
+
if (mutation.type !== 'childList')
|
|
34897
|
+
return;
|
|
34898
|
+
mutation.addedNodes.forEach((node) => {
|
|
34899
|
+
if (isTableCell(node)) {
|
|
34900
|
+
node.disabled = this.disabled;
|
|
34901
|
+
}
|
|
34902
|
+
});
|
|
34903
|
+
});
|
|
34904
|
+
});
|
|
34905
|
+
this.cellObserver.observe(this.el, { childList: true });
|
|
34906
|
+
}
|
|
34907
|
+
disconnectedCallback() {
|
|
34908
|
+
this.cellObserver?.disconnect();
|
|
34909
|
+
this.cellObserver = undefined;
|
|
34910
|
+
}
|
|
34911
|
+
componentDidLoad() {
|
|
34912
|
+
this.propagateDisabledToCells();
|
|
34913
|
+
}
|
|
34914
|
+
propagateDisabledToCells() {
|
|
34915
|
+
const cells = Array.from(this.el.children).filter(isTableCell);
|
|
34916
|
+
cells.forEach((cell) => {
|
|
34917
|
+
cell.disabled = this.disabled;
|
|
34918
|
+
});
|
|
34919
|
+
}
|
|
33523
34920
|
render() {
|
|
33524
|
-
return (hAsync(Host, { key: '
|
|
34921
|
+
return (hAsync(Host, { key: '8c49ba27b39d934cb774140b43e811e5ee2bb904', class: {
|
|
33525
34922
|
'xpl-table-row': true,
|
|
33526
34923
|
'xpl-table-row--disabled': this.disabled,
|
|
33527
34924
|
'xpl-table-row--selected': this.selected,
|
|
33528
|
-
}, role: "row" }, hAsync("slot", { key: '
|
|
34925
|
+
}, role: "row" }, hAsync("slot", { key: '30788ce629c65d7eab04d268da978d46f0145e99' })));
|
|
33529
34926
|
}
|
|
34927
|
+
get el() { return getElement(this); }
|
|
34928
|
+
static get watchers() { return {
|
|
34929
|
+
"disabled": [{
|
|
34930
|
+
"onDisabledChange": 0
|
|
34931
|
+
}]
|
|
34932
|
+
}; }
|
|
33530
34933
|
static get cmpMeta() { return {
|
|
33531
34934
|
"$flags$": 260,
|
|
33532
34935
|
"$tagName$": "xpl-table-row",
|
|
@@ -33615,6 +35018,7 @@ registerComponents([
|
|
|
33615
35018
|
XplListItem,
|
|
33616
35019
|
XplPanel,
|
|
33617
35020
|
XplTableBody,
|
|
35021
|
+
XplTableCell,
|
|
33618
35022
|
XplTableFooter,
|
|
33619
35023
|
XplTableFooterCell,
|
|
33620
35024
|
XplTableRow,
|