@ds-mo/ui 14.35.0 → 14.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +1105 -187
- package/dist/angular/ds-button-inverted.d.ts +17 -0
- package/dist/angular/ds-button-inverted.js +46 -0
- package/dist/angular/ds-calendar.d.ts +15 -0
- package/dist/angular/ds-calendar.js +43 -0
- package/dist/angular/ds-field.d.ts +1 -1
- package/dist/angular/ds-field.js +1 -1
- package/dist/angular/ds-input-date.d.ts +15 -0
- package/dist/angular/ds-input-date.js +43 -0
- package/dist/angular/ds-input-time.d.ts +15 -0
- package/dist/angular/ds-input-time.js +43 -0
- package/dist/angular/ds-input.d.ts +1 -1
- package/dist/angular/ds-input.js +3 -3
- package/dist/angular/ds-select.d.ts +1 -1
- package/dist/angular/ds-select.js +3 -3
- package/dist/angular/ds-time-picker.d.ts +15 -0
- package/dist/angular/ds-time-picker.js +43 -0
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +5 -0
- package/dist/angular/proxies.d.ts +5 -0
- package/dist/angular/proxies.js +5 -0
- package/dist/angular/text-value-accessor.d.ts +1 -1
- package/dist/angular/text-value-accessor.js +2 -2
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-action.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-page-title.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-inverted.d.ts +11 -0
- package/dist/components/ds-button-inverted.js +2 -0
- package/dist/components/ds-button-inverted.js.map +1 -0
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-calendar.d.ts +11 -0
- package/dist/components/ds-calendar.js +2 -0
- package/dist/components/ds-calendar.js.map +1 -0
- package/dist/components/ds-card-action-center.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-navigation.js +1 -1
- package/dist/components/ds-card-navigation.js.map +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-settings-scope.js +1 -1
- package/dist/components/ds-card-settings-scope.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-input-date.d.ts +11 -0
- package/dist/components/ds-input-date.js +2 -0
- package/dist/components/ds-input-date.js.map +1 -0
- package/dist/components/ds-input-time.d.ts +11 -0
- package/dist/components/ds-input-time.js +2 -0
- package/dist/components/ds-input-time.js.map +1 -0
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-bubble.js.map +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-paper-texture.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-score.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table-filter.js +1 -1
- package/dist/components/ds-table-filter.js.map +1 -1
- package/dist/components/ds-table-group.js +1 -1
- package/dist/components/ds-table-preferences.js +1 -1
- package/dist/components/ds-table-preferences.js.map +1 -1
- package/dist/components/ds-table-saved-views.js +1 -1
- package/dist/components/ds-table-saved-views.js.map +1 -1
- package/dist/components/ds-table-search.js +1 -1
- package/dist/components/ds-table-search.js.map +1 -1
- package/dist/components/ds-table-sort.js +1 -1
- package/dist/components/ds-table-sort.js.map +1 -1
- package/dist/components/ds-table-toolbar.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-textarea.js +1 -1
- package/dist/components/ds-textarea.js.map +1 -1
- package/dist/components/ds-time-picker.d.ts +11 -0
- package/dist/components/ds-time-picker.js +2 -0
- package/dist/components/ds-time-picker.js.map +1 -0
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-tooltip-chart.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/{p-CI7VfYC3.js → p-2GVGhrh0.js} +2 -2
- package/dist/components/p-7O-2D29W.js +2 -0
- package/dist/components/p-7O-2D29W.js.map +1 -0
- package/dist/components/{p-CE540WZ7.js → p-8oRkhvjy.js} +2 -2
- package/dist/components/p-B27_chI7.js +2 -0
- package/dist/components/p-B27_chI7.js.map +1 -0
- package/dist/components/{p-xHGqrz_p.js → p-BOhpMUwO.js} +2 -2
- package/dist/components/{p-DdspY23v.js → p-BV5T1hzN.js} +2 -2
- package/dist/components/{p-DTDLlinw.js → p-BWfzaSc3.js} +2 -2
- package/dist/components/{p-CLGtPE0K.js → p-BgLI9JoT.js} +2 -2
- package/dist/components/{p-DGzn4k4h.js → p-C-dHtQMi.js} +2 -2
- package/dist/components/p-C0CE2v5D.js +2 -0
- package/dist/components/{p-yZRXPHDe.js → p-C2JnoaWI.js} +2 -2
- package/dist/components/{p-umAf0fBn.js → p-C4m8y9ki.js} +2 -2
- package/dist/components/{p-CAxDdYjh.js → p-CDJ2Ntcq.js} +2 -2
- package/dist/components/{p-DQQFN2sw.js → p-CMQUuGvl.js} +2 -2
- package/dist/components/{p-BQaO7cg_.js → p-CQ5RwY2C.js} +2 -2
- package/dist/components/p-CQIh2yRP.js +2 -0
- package/dist/components/{p-C1_3CVma.js.map → p-CQIh2yRP.js.map} +1 -1
- package/dist/components/{p-DEGNrPLe.js → p-CWPT3aOB.js} +2 -2
- package/dist/components/p-CWog26I_.js +2 -0
- package/dist/components/p-CWog26I_.js.map +1 -0
- package/dist/components/{p-beRFLHbB.js → p-CaNCGKEJ.js} +2 -2
- package/dist/components/p-CbSUyv5B.js +2 -0
- package/dist/components/{p-BINSI_KF.js.map → p-CbSUyv5B.js.map} +1 -1
- package/dist/components/{p-Dhw_W8nk.js → p-Cc3ZUQlJ.js} +2 -2
- package/dist/components/p-Cc3ZUQlJ.js.map +1 -0
- package/dist/components/{p-DFjIBS5B.js → p-Ce4zy8q1.js} +2 -2
- package/dist/components/{p-BcdHgPi5.js → p-CeXf9-X3.js} +2 -2
- package/dist/components/{p-omPm8_vx.js → p-Cga6Ex0E.js} +2 -2
- package/dist/components/{p-y06IxxoN.js → p-Cl9phSf0.js} +2 -2
- package/dist/components/{p-Dk-8Ju0Q.js → p-ClJhuG5Y.js} +2 -2
- package/dist/components/{p-BmFeeR4q.js → p-CqW2eyiF.js} +2 -2
- package/dist/components/p-Cus1Sigh.js +2 -0
- package/dist/components/{p-N5SHSVo2.js.map → p-Cus1Sigh.js.map} +1 -1
- package/dist/components/{p-CzbsTZt7.js → p-Cxr0IQjC.js} +2 -2
- package/dist/components/{p-CwqFJMvP.js → p-D7yBIPB6.js} +2 -2
- package/dist/components/p-D8rpKod8.js +2 -0
- package/dist/components/p-D8rpKod8.js.map +1 -0
- package/dist/components/{p-DtLQIMsa.js → p-DBwa1OXP.js} +2 -2
- package/dist/components/{p-BQsVI_vO.js → p-DK9Ex3aY.js} +2 -2
- package/dist/components/{p-CqlBlv55.js → p-DLXXGgmf.js} +2 -2
- package/dist/components/{p-BnzsBNUY.js → p-DVd1TIxi.js} +2 -2
- package/dist/components/p-DZ58Sg5a.js.map +1 -1
- package/dist/components/{p-CZOiTaNa.js → p-DgG9W9N4.js} +2 -2
- package/dist/components/{p-mpk_Mm8_.js → p-DkfM55x8.js} +2 -2
- package/dist/components/p-DkikNSSO.js +2 -0
- package/dist/components/p-DkikNSSO.js.map +1 -0
- package/dist/components/{p-C7CZ9pnP.js → p-Dryt3COt.js} +2 -2
- package/dist/components/{p-eo_pmPqp.js → p-Ds51RgCi.js} +2 -2
- package/dist/components/p-DtkLtKY0.js +2 -0
- package/dist/components/p-DtkLtKY0.js.map +1 -0
- package/dist/components/{p-C8ek-1SP.js → p-DvzI2A_M.js} +2 -2
- package/dist/components/p-J5x-QtlD.js +2 -0
- package/dist/components/{p-beCz9OnD.js.map → p-J5x-QtlD.js.map} +1 -1
- package/dist/components/{p-CSnsz3Eb.js → p-Jaqdfw4E.js} +2 -2
- package/dist/components/p-MQ36mEgn.js +2 -0
- package/dist/components/{p-UAIxh67Q.js.map → p-MQ36mEgn.js.map} +1 -1
- package/dist/components/{p-BnWxbhFP.js → p-PmcUwTQ_.js} +2 -2
- package/dist/components/p-TjXGRPik.js +2 -0
- package/dist/components/{p-B-9fdIWv.js.map → p-TjXGRPik.js.map} +1 -1
- package/dist/components/{p-Cq_Qpe_C.js → p-bM3LH3kc.js} +2 -2
- package/dist/components/{p-BPhbwXOv.js → p-ji09W9el.js} +2 -2
- package/dist/components/{p-n68x-ZKp.js → p-neWTRxmf.js} +2 -2
- package/dist/components/{p-BPlWEidl.js → p-rYePOPbJ.js} +2 -2
- package/dist/components/{p-D44g2Kw1.js → p-su6y4hLK.js} +2 -2
- package/dist/components/p-su6y4hLK.js.map +1 -0
- package/dist/components/{p-DC69DgAR.js → p-tNQ0YulU.js} +2 -2
- package/dist/components/{p-Cwz9TPVS.js → p-x1wf38q3.js} +2 -2
- package/dist/docs/components.json +6485 -3451
- package/dist/lib/utils/button-render.d.ts +1 -1
- package/dist/lib/utils/clock-time.d.ts +22 -0
- package/dist/lib/utils/date-filter-value.d.ts +4 -0
- package/dist/lib/utils/index.d.ts +3 -1
- package/dist/lib/utils/index.js +133 -0
- package/dist/lib/utils/index.js.map +4 -4
- package/dist/mcp-data/registry/bar-title.json +2 -2
- package/dist/mcp-data/registry/button-inverted.json +580 -0
- package/dist/mcp-data/registry/calendar.json +273 -0
- package/dist/mcp-data/registry/card-navigation.json +4 -2
- package/dist/mcp-data/registry/field.json +19 -14
- package/dist/mcp-data/registry/filter-menu.json +6 -10
- package/dist/mcp-data/registry/input-date.json +516 -0
- package/dist/mcp-data/registry/input-time.json +535 -0
- package/dist/mcp-data/registry/input.json +56 -8
- package/dist/mcp-data/registry/registry.json +1118 -185
- package/dist/mcp-data/registry/select.json +63 -7
- package/dist/mcp-data/registry/table-saved-views.json +6 -4
- package/dist/mcp-data/registry/textarea.json +2 -2
- package/dist/mcp-data/registry/time-picker.json +259 -0
- package/dist/react/components.d.ts +5 -0
- package/dist/react/components.js +5 -0
- package/dist/react/ds-button-inverted.d.ts +13 -0
- package/dist/react/ds-button-inverted.js +15 -0
- package/dist/react/ds-calendar.d.ts +12 -0
- package/dist/react/ds-calendar.js +12 -0
- package/dist/react/ds-field.d.ts +1 -1
- package/dist/react/ds-input-date.d.ts +12 -0
- package/dist/react/ds-input-date.js +12 -0
- package/dist/react/ds-input-time.d.ts +12 -0
- package/dist/react/ds-input-time.js +12 -0
- package/dist/react/ds-time-picker.d.ts +12 -0
- package/dist/react/ds-time-picker.js +12 -0
- package/dist/types/components/BarTitle/BarTitle.d.ts +1 -0
- package/dist/types/components/BarTitle/bar-title-action-chrome.d.ts +2 -0
- package/dist/types/components/ButtonInverted/ButtonInverted.d.ts +83 -0
- package/dist/types/components/ButtonInverted/index.d.ts +2 -0
- package/dist/types/components/Calendar/Calendar.d.ts +32 -0
- package/dist/types/components/Calendar/calendar-grid.d.ts +19 -0
- package/dist/types/components/Field/Field.d.ts +7 -2
- package/dist/types/components/FilterMenu/FilterMenu.d.ts +0 -10
- package/dist/types/components/Input/Input.d.ts +10 -0
- package/dist/types/components/InputDate/InputDate.d.ts +78 -0
- package/dist/types/components/InputTime/InputTime.d.ts +80 -0
- package/dist/types/components/Select/Select.d.ts +8 -1
- package/dist/types/components/TimePicker/TimePicker.d.ts +33 -0
- package/dist/types/components.d.ts +858 -27
- package/dist/types/utils/button-render.d.ts +1 -1
- package/dist/types/utils/clock-time.d.ts +23 -0
- package/dist/types/utils/date-filter-value.d.ts +4 -0
- package/dist/types/utils/index.d.ts +3 -1
- package/dist/vue/components.d.ts +5 -0
- package/dist/vue/components.js +5 -0
- package/dist/vue/ds-button-inverted.d.ts +3 -0
- package/dist/vue/ds-button-inverted.js +33 -0
- package/dist/vue/ds-calendar.d.ts +3 -0
- package/dist/vue/ds-calendar.js +16 -0
- package/dist/vue/ds-input-date.d.ts +3 -0
- package/dist/vue/ds-input-date.js +31 -0
- package/dist/vue/ds-input-time.d.ts +3 -0
- package/dist/vue/ds-input-time.js +32 -0
- package/dist/vue/ds-input.js +2 -0
- package/dist/vue/ds-select.js +3 -0
- package/dist/vue/ds-time-picker.d.ts +3 -0
- package/dist/vue/ds-time-picker.js +16 -0
- package/package.json +1 -1
- package/dist/components/p-B-9fdIWv.js +0 -2
- package/dist/components/p-BINSI_KF.js +0 -2
- package/dist/components/p-BbfBvMRR.js +0 -2
- package/dist/components/p-BbfBvMRR.js.map +0 -1
- package/dist/components/p-C1_3CVma.js +0 -2
- package/dist/components/p-Cmj04E5Q.js +0 -2
- package/dist/components/p-Cmj04E5Q.js.map +0 -1
- package/dist/components/p-D44g2Kw1.js.map +0 -1
- package/dist/components/p-D_u8WhlU.js +0 -2
- package/dist/components/p-Dhw_W8nk.js.map +0 -1
- package/dist/components/p-FPZbS19l.js +0 -2
- package/dist/components/p-FPZbS19l.js.map +0 -1
- package/dist/components/p-N5SHSVo2.js +0 -2
- package/dist/components/p-QjkufCcn.js +0 -2
- package/dist/components/p-QjkufCcn.js.map +0 -1
- package/dist/components/p-UAIxh67Q.js +0 -2
- package/dist/components/p-beCz9OnD.js +0 -2
- package/dist/types/components/FilterMenu/filter-menu-calendar.d.ts +0 -13
- /package/dist/components/{p-CI7VfYC3.js.map → p-2GVGhrh0.js.map} +0 -0
- /package/dist/components/{p-CE540WZ7.js.map → p-8oRkhvjy.js.map} +0 -0
- /package/dist/components/{p-xHGqrz_p.js.map → p-BOhpMUwO.js.map} +0 -0
- /package/dist/components/{p-DdspY23v.js.map → p-BV5T1hzN.js.map} +0 -0
- /package/dist/components/{p-DTDLlinw.js.map → p-BWfzaSc3.js.map} +0 -0
- /package/dist/components/{p-CLGtPE0K.js.map → p-BgLI9JoT.js.map} +0 -0
- /package/dist/components/{p-DGzn4k4h.js.map → p-C-dHtQMi.js.map} +0 -0
- /package/dist/components/{p-D_u8WhlU.js.map → p-C0CE2v5D.js.map} +0 -0
- /package/dist/components/{p-yZRXPHDe.js.map → p-C2JnoaWI.js.map} +0 -0
- /package/dist/components/{p-umAf0fBn.js.map → p-C4m8y9ki.js.map} +0 -0
- /package/dist/components/{p-CAxDdYjh.js.map → p-CDJ2Ntcq.js.map} +0 -0
- /package/dist/components/{p-DQQFN2sw.js.map → p-CMQUuGvl.js.map} +0 -0
- /package/dist/components/{p-BQaO7cg_.js.map → p-CQ5RwY2C.js.map} +0 -0
- /package/dist/components/{p-DEGNrPLe.js.map → p-CWPT3aOB.js.map} +0 -0
- /package/dist/components/{p-beRFLHbB.js.map → p-CaNCGKEJ.js.map} +0 -0
- /package/dist/components/{p-DFjIBS5B.js.map → p-Ce4zy8q1.js.map} +0 -0
- /package/dist/components/{p-BcdHgPi5.js.map → p-CeXf9-X3.js.map} +0 -0
- /package/dist/components/{p-omPm8_vx.js.map → p-Cga6Ex0E.js.map} +0 -0
- /package/dist/components/{p-y06IxxoN.js.map → p-Cl9phSf0.js.map} +0 -0
- /package/dist/components/{p-Dk-8Ju0Q.js.map → p-ClJhuG5Y.js.map} +0 -0
- /package/dist/components/{p-BmFeeR4q.js.map → p-CqW2eyiF.js.map} +0 -0
- /package/dist/components/{p-CzbsTZt7.js.map → p-Cxr0IQjC.js.map} +0 -0
- /package/dist/components/{p-CwqFJMvP.js.map → p-D7yBIPB6.js.map} +0 -0
- /package/dist/components/{p-DtLQIMsa.js.map → p-DBwa1OXP.js.map} +0 -0
- /package/dist/components/{p-BQsVI_vO.js.map → p-DK9Ex3aY.js.map} +0 -0
- /package/dist/components/{p-CqlBlv55.js.map → p-DLXXGgmf.js.map} +0 -0
- /package/dist/components/{p-BnzsBNUY.js.map → p-DVd1TIxi.js.map} +0 -0
- /package/dist/components/{p-CZOiTaNa.js.map → p-DgG9W9N4.js.map} +0 -0
- /package/dist/components/{p-mpk_Mm8_.js.map → p-DkfM55x8.js.map} +0 -0
- /package/dist/components/{p-C7CZ9pnP.js.map → p-Dryt3COt.js.map} +0 -0
- /package/dist/components/{p-eo_pmPqp.js.map → p-Ds51RgCi.js.map} +0 -0
- /package/dist/components/{p-C8ek-1SP.js.map → p-DvzI2A_M.js.map} +0 -0
- /package/dist/components/{p-CSnsz3Eb.js.map → p-Jaqdfw4E.js.map} +0 -0
- /package/dist/components/{p-BnWxbhFP.js.map → p-PmcUwTQ_.js.map} +0 -0
- /package/dist/components/{p-Cq_Qpe_C.js.map → p-bM3LH3kc.js.map} +0 -0
- /package/dist/components/{p-BPhbwXOv.js.map → p-ji09W9el.js.map} +0 -0
- /package/dist/components/{p-n68x-ZKp.js.map → p-neWTRxmf.js.map} +0 -0
- /package/dist/components/{p-BPlWEidl.js.map → p-rYePOPbJ.js.map} +0 -0
- /package/dist/components/{p-DC69DgAR.js.map → p-tNQ0YulU.js.map} +0 -0
- /package/dist/components/{p-Cwz9TPVS.js.map → p-x1wf38q3.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["sliderCss","sliderId","sliderExternalLabelId","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","min","max","step","minStepsBetweenValues","showValue","size","orientation","thumbAlignment","disabled","readOnly","isInactive","ariaLabel","startLabel","endLabel","valueTexts","valuePrefix","valueSuffix","rangeSeparator","formDisabled","dragging","focused","touched","activeThumbIndex","generatedId","labelId","initialValue","lastCommittedValue","pointerId","pointerStartValue","controlEl","handleNativeInput","event","index","input","target","isDisabled","String","resolvedValues","setValueAt","Number","handleNativeChange","commitIfChanged","handleKeyDown","includes","key","preventDefault","handleFocus","handleBlur","next","relatedTarget","Node","el","contains","handleHostClick","inputs","querySelectorAll","Math","length","focus","handlePointerDown","button","valueFromPointer","closestThumbIndex","cloneValue","publicValue","setPointerCapture","requestAnimationFrame","preventScroll","handlePointerMove","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","values","isRange","setRepeatedFormControlValue","internals","name","inactive","setFormControlValue","state","formDisabledCallback","formResetCallback","formStateRestoreCallback","restored","restoreNumberArrayFormState","restoreStringFormState","isFinite","setFocus","Array","isArray","safeStep","safeMin","safeMax","minimum","minimumGap","steps","floor","maximum","snap","raw","lower","upper","gap","valuesEqual","a","b","every","decimalPlaces","text","toLowerCase","split","candidate","stepped","round","precision","toFixed","percent","allowedMin","allowedMax","previous","constrained","nextValue","dsChange","emit","current","dsCommit","label","ariaLabelledby","ids","from","labels","map","id","externalLabelledby","join","formattedValue","authored","valueText","number","Intl","NumberFormat","locale","formatOptions","format","ariaValueText","undefined","pointerPercent","control","rect","getBoundingClientRect","thumb","querySelector","thumbSize","offsetWidth","offsetHeight","inset","travel","height","bottom","clientY","width","clientX","left","targetElement","closest","dataset","lowerDistance","abs","upperDistance","endPointerInteraction","canceled","hasPointerCapture","releasePointerCapture","renderThumb","inputId","rangeLabel","labelledby","directLabel","h","class","slider__thumb","style","type","ariaDescribedby","onInput","onChange","onKeyDown","onFocus","onBlur","render","first","last","firstInputId","dirty","valueDisplay","Host","slider","onClick","as","variant","color","emphasis","for","textId","fontFeature","ref","element","onPointerDown","onPointerMove","onPointerUp","onPointerCancel"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n --ds-slider-control-size: var(--dimension-size-400);\n --ds-slider-thumb-size: var(--dimension-size-200);\n --ds-slider-track-size: var(--dimension-size-100);\n --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n box-sizing: border-box;\n width: 100%;\n color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n --ds-slider-control-size: var(--dimension-size-300);\n --ds-slider-thumb-size: var(--dimension-size-150);\n --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n --ds-slider-control-size: var(--dimension-size-200);\n --ds-slider-thumb-size: var(--dimension-size-100);\n --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n width: fit-content;\n min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n min-width: 0;\n}\n\n.slider__label {\n min-width: 0;\n}\n\n.slider__value {\n flex-shrink: 0;\n}\n\n.slider__control {\n position: relative;\n width: 100%;\n height: var(--ds-slider-control-size);\n border-radius: var(--dimension-radius-half);\n cursor: default;\n touch-action: none;\n user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n align-self: center;\n width: var(--ds-slider-control-size);\n height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n cursor: not-allowed;\n}\n\n.slider__rail {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n height: var(--ds-slider-track-size);\n overflow: hidden;\n border-radius: var(--dimension-radius-025);\n background-color: transparent;\n box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n transform: translateY(-50%);\n pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n right: calc(var(--ds-slider-thumb-size) / 2);\n left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: calc(\n var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n border-radius: inherit;\n background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n left: calc(\n var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n width: calc(\n ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n left: calc(var(--ds-slider-start-pct, 0) * 1%);\n width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n position: absolute;\n top: 50%;\n left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n width: var(--ds-slider-thumb-size);\n height: var(--ds-slider-thumb-size);\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.slider__thumb--active {\n z-index: 2;\n}\n\n.slider__input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n opacity: 0;\n appearance: none;\n pointer-events: none;\n z-index: 2;\n}\n\n.slider__thumb-visual {\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n overflow: visible;\n border-radius: var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-sm);\n pointer-events: none;\n transition:\n background-color var(--effect-motion-short-2),\n box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: transparent;\n transition: background-color var(--effect-motion-short-2);\n}\n\n@media (hover: hover) and (pointer: fine) {\n :host(:not(.slider--readonly):not(.ds-control-inactive))\n .slider__thumb:hover\n .slider__thumb-wash {\n background-color: var(--color-interaction-hover);\n }\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n .slider__thumb--active\n .slider__thumb-wash {\n background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n top: 0;\n right: auto;\n bottom: 0;\n left: 50%;\n width: var(--ds-slider-track-size);\n height: auto;\n transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n top: calc(var(--ds-slider-thumb-size) / 2);\n bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n top: auto;\n right: 0;\n bottom: 0;\n left: 0;\n width: auto;\n height: calc(\n var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n bottom: calc(\n var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n height: calc(\n ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n top: auto;\n bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n left: 50%;\n transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .slider__thumb-visual,\n .slider__thumb-wash {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n .slider__rail {\n border: var(--ds-slider-track-stroke) solid var(--ds-forced-color-content);\n box-shadow: none;\n }\n\n .slider__indicator {\n background-color: var(--ds-forced-color-selected);\n }\n\n .slider__thumb-visual {\n border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n background-color: var(--ds-forced-color-surface);\n box-shadow: none;\n }\n\n .slider__input:focus-visible + .slider__thumb-visual,\n :host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n outline-color: var(--ds-forced-color-selected);\n }\n}\n","import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport {\n restoreNumberArrayFormState,\n restoreStringFormState,\n setFormControlValue,\n setRepeatedFormControlValue,\n} from '../../utils';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n tag: 'ds-slider',\n styleUrl: 'Slider.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Slider {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n @Prop({ mutable: true }) value: SliderValue = 0;\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 1;\n /** Minimum number of steps kept between two range thumbs. */\n @Prop() minStepsBetweenValues: number = 0;\n /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n @Prop() label: string | undefined;\n /** Show the formatted current value beside the visible label. */\n @Prop() showValue: boolean = true;\n @Prop() size: SliderSize = 'md';\n @Prop() orientation: SliderOrientation = 'horizontal';\n /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Keep the value focusable and submittable while preventing changes. */\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop() isInactive: boolean = false;\n /** Direct accessible name for a single-thumb slider without a visible label. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Id references for a visible single-thumb slider label. */\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n /** Id references for supporting guidance or error text. */\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n /** Accessible label for the lower thumb in a range slider. */\n @Prop() startLabel: string = 'Minimum value';\n /** Accessible label for the upper thumb in a range slider. */\n @Prop() endLabel: string = 'Maximum value';\n /** Human-readable value text for a single slider or both range thumbs. */\n @Prop() valueText: string | undefined;\n /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n @Prop() valueTexts: string[] = [];\n /** Locale used by Intl.NumberFormat for the visible value. */\n @Prop() locale: string | undefined;\n /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n @Prop() valuePrefix: string = '';\n @Prop() valueSuffix: string = '';\n @Prop() rangeSeparator: string = '–';\n /** Id applied to the first native range input. */\n @Prop() inputId: string | undefined;\n\n /** Emitted continuously while the value changes. */\n @Event() dsChange!: EventEmitter<SliderValue>;\n /** Emitted when a pointer or keyboard value change is committed. */\n @Event() dsCommit!: EventEmitter<SliderValue>;\n\n @State() private formDisabled = false;\n @State() private dragging = false;\n @State() private focused = false;\n @State() private touched = false;\n @State() private activeThumbIndex = 0;\n @State() private externalLabelledby: string | undefined;\n\n private readonly generatedId = `ds-slider-${++sliderId}`;\n private readonly labelId = `${this.generatedId}-label`;\n private initialValue: SliderValue = 0;\n private lastCommittedValue: SliderValue = 0;\n private pointerId: number | null = null;\n private pointerStartValue: SliderValue = 0;\n private controlEl: HTMLDivElement | null = null;\n\n componentWillLoad() {\n this.initialValue = this.cloneValue(this.publicValue);\n this.lastCommittedValue = this.cloneValue(this.publicValue);\n this.syncFormValue();\n }\n\n componentDidLoad() {\n this.syncNativeLabels();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n @Watch('step')\n @Watch('minStepsBetweenValues')\n @Watch('name')\n @Watch('disabled')\n @Watch('isInactive')\n syncFormValue() {\n const values = this.resolvedValues;\n if (this.isRange) {\n setRepeatedFormControlValue(this.internals, this.name, values, {\n inactive: this.isDisabled,\n });\n } else {\n const value = String(values[0]);\n setFormControlValue(this.internals, this.name ? value : null, {\n inactive: this.isDisabled,\n state: value,\n });\n }\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.cloneValue(this.initialValue);\n this.lastCommittedValue = this.cloneValue(this.initialValue);\n this.dragging = false;\n this.focused = false;\n this.touched = false;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n if (this.isRange) {\n const restored = restoreNumberArrayFormState(state, 2);\n this.value = restored.length ? restored : this.cloneValue(this.initialValue);\n } else {\n const restored = Number(restoreStringFormState(state, 'NaN'));\n if (Number.isFinite(restored)) this.value = restored;\n }\n this.lastCommittedValue = this.cloneValue(this.publicValue);\n }\n\n @Method()\n async setFocus(index: number = 0) {\n const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.isInactive || this.formDisabled;\n }\n\n private get isRange(): boolean {\n return Array.isArray(this.value);\n }\n\n private get safeStep(): number {\n return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n }\n\n private get safeMin(): number {\n return Number.isFinite(this.min) ? this.min : 0;\n }\n\n private get safeMax(): number {\n const minimum = this.safeMin;\n return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n }\n\n private get minimumGap(): number {\n const steps = Number.isFinite(this.minStepsBetweenValues)\n ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n : 0;\n return steps * this.safeStep;\n }\n\n private get resolvedValues(): number[] {\n const minimum = this.safeMin;\n const maximum = this.safeMax;\n if (!this.isRange) return [this.snap(Number(this.value))];\n\n const raw = this.value as number[];\n let lower = this.snap(Number(raw[0] ?? minimum));\n let upper = this.snap(Number(raw[1] ?? maximum));\n if (lower > upper) [lower, upper] = [upper, lower];\n\n const gap = Math.min(this.minimumGap, maximum - minimum);\n if (upper - lower < gap) {\n upper = Math.min(maximum, this.snap(lower + gap));\n lower = Math.max(minimum, this.snap(upper - gap));\n }\n return [lower, upper];\n }\n\n private get publicValue(): SliderValue {\n const values = this.resolvedValues;\n return this.isRange ? [...values] : values[0];\n }\n\n private cloneValue(value: SliderValue): SliderValue {\n return Array.isArray(value) ? [...value] : value;\n }\n\n private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n if (Array.isArray(a) && Array.isArray(b)) {\n return a.length === b.length && a.every((value, index) => value === b[index]);\n }\n return !Array.isArray(a) && !Array.isArray(b) && a === b;\n }\n\n private decimalPlaces(value: number): number {\n const text = String(value).toLowerCase();\n if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n return text.includes('.') ? text.split('.')[1].length : 0;\n }\n\n private snap(value: number): number {\n const minimum = this.safeMin;\n const maximum = this.safeMax;\n const candidate = Number.isFinite(value) ? value : minimum;\n const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n const precision = Math.min(\n 10,\n Math.max(\n this.decimalPlaces(minimum),\n this.decimalPlaces(maximum),\n this.decimalPlaces(this.safeStep)\n )\n );\n return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n }\n\n private percent(value: number): number {\n return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n }\n\n private allowedMin(index: number, values = this.resolvedValues): number {\n return this.isRange && index === 1\n ? Math.min(this.safeMax, values[0] + this.minimumGap)\n : this.safeMin;\n }\n\n private allowedMax(index: number, values = this.resolvedValues): number {\n return this.isRange && index === 0\n ? Math.max(this.safeMin, values[1] - this.minimumGap)\n : this.safeMax;\n }\n\n private setValueAt(index: number, next: number): boolean {\n const previous = this.publicValue;\n const values = this.resolvedValues;\n const constrained = Math.min(\n this.allowedMax(index, values),\n Math.max(this.allowedMin(index, values), this.snap(next))\n );\n values[index] = constrained;\n const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n if (this.valuesEqual(previous, nextValue)) return false;\n\n this.value = nextValue;\n this.dsChange.emit(this.cloneValue(nextValue));\n return true;\n }\n\n private commitIfChanged() {\n const current = this.publicValue;\n if (this.valuesEqual(current, this.lastCommittedValue)) return;\n this.lastCommittedValue = this.cloneValue(current);\n this.dsCommit.emit(this.cloneValue(current));\n }\n\n private syncNativeLabels() {\n if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n return label.id;\n });\n if (ids.length) this.externalLabelledby = ids.join(' ');\n }\n\n private formattedValue(value: number, index: number): string {\n const authored = this.valueTexts[index] ?? this.valueText;\n if (authored) return authored;\n let number: string;\n try {\n number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n } catch {\n number = String(value);\n }\n return `${this.valuePrefix}${number}${this.valueSuffix}`;\n }\n\n private ariaValueText(value: number, index: number): string | undefined {\n if (\n this.valueTexts[index] ||\n this.valueText ||\n this.valuePrefix ||\n this.valueSuffix ||\n this.formatOptions\n ) {\n return this.formattedValue(value, index);\n }\n return undefined;\n }\n\n private handleNativeInput = (event: Event, index: number) => {\n const input = event.target as HTMLInputElement;\n this.activeThumbIndex = index;\n if (this.readOnly || this.isDisabled) {\n input.value = String(this.resolvedValues[index]);\n return;\n }\n this.setValueAt(index, Number(input.value));\n };\n\n private handleNativeChange = () => {\n if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (!this.readOnly) return;\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n 'PageUp',\n 'PageDown',\n ].includes(event.key)\n ) {\n event.preventDefault();\n }\n };\n\n private handleFocus = (index: number) => {\n this.activeThumbIndex = index;\n this.focused = true;\n };\n\n private handleBlur = (event: FocusEvent) => {\n const next = event.relatedTarget;\n if (next instanceof Node && this.el.contains(next)) return;\n this.focused = false;\n this.touched = true;\n };\n\n private handleHostClick = (event: MouseEvent) => {\n if (event.target !== this.el || this.isDisabled) return;\n const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n };\n\n private pointerPercent(event: PointerEvent): number {\n const control = this.controlEl;\n if (!control) return 0;\n const rect = control.getBoundingClientRect();\n const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n const thumbSize = thumb\n ? this.orientation === 'horizontal'\n ? thumb.offsetWidth\n : thumb.offsetHeight\n : 0;\n // Both alignment modes keep the complete thumb inside the control. Edge\n // alignment lets the rail span the control while center alignment insets\n // the rail to the same thumb-center travel.\n const inset = thumbSize / 2;\n\n if (this.orientation === 'vertical') {\n const travel = Math.max(1, rect.height - inset * 2);\n return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n }\n\n const travel = Math.max(1, rect.width - inset * 2);\n const percent = (event.clientX - rect.left - inset) / travel;\n return Math.min(1, Math.max(0, percent));\n }\n\n private valueFromPointer(event: PointerEvent): number {\n return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n }\n\n private closestThumbIndex(value: number, target: EventTarget | null): number {\n const targetElement =\n target instanceof HTMLElement ? target.closest<HTMLElement>('.slider__thumb') : null;\n if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n if (!this.isRange) return 0;\n\n const values = this.resolvedValues;\n const lowerDistance = Math.abs(value - values[0]);\n const upperDistance = Math.abs(value - values[1]);\n if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n return lowerDistance < upperDistance ? 0 : 1;\n }\n\n private handlePointerDown = (event: PointerEvent) => {\n if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n event.preventDefault();\n const value = this.valueFromPointer(event);\n const index = this.closestThumbIndex(value, event.target);\n this.activeThumbIndex = index;\n this.pointerId = event.pointerId;\n this.pointerStartValue = this.cloneValue(this.publicValue);\n this.dragging = true;\n this.setValueAt(index, value);\n this.controlEl?.setPointerCapture(event.pointerId);\n requestAnimationFrame(() => {\n const input = this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index];\n input?.focus({ preventScroll: true });\n });\n };\n\n private handlePointerMove = (event: PointerEvent) => {\n if (this.pointerId !== event.pointerId || !this.dragging) return;\n event.preventDefault();\n this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n };\n\n private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n if (this.pointerId !== event.pointerId) return;\n if (this.controlEl?.hasPointerCapture(event.pointerId))\n this.controlEl.releasePointerCapture(event.pointerId);\n this.pointerId = null;\n this.dragging = false;\n this.touched = true;\n if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue))\n this.commitIfChanged();\n }\n\n private renderThumb(value: number, index: number) {\n const inputId =\n index === 0\n ? (this.inputId ?? `${this.generatedId}-input`)\n : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n const labelledby = this.isRange\n ? undefined\n : (this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby));\n const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n return (\n <div\n class={{\n slider__thumb: true,\n 'slider__thumb--active': index === this.activeThumbIndex,\n }}\n data-index={String(index)}\n style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n >\n <input\n class=\"slider__input\"\n type=\"range\"\n id={inputId}\n min={this.allowedMin(index)}\n max={this.allowedMax(index)}\n step={this.safeStep}\n value={value}\n disabled={this.isDisabled}\n aria-label={directLabel}\n aria-labelledby={labelledby}\n aria-describedby={this.ariaDescribedby}\n aria-valuetext={this.ariaValueText(value, index)}\n aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n aria-readonly={this.readOnly ? 'true' : undefined}\n onInput={(event: Event) => this.handleNativeInput(event, index)}\n onChange={this.handleNativeChange}\n onKeyDown={this.handleKeyDown}\n onFocus={() => this.handleFocus(index)}\n onBlur={this.handleBlur}\n />\n <span class=\"slider__thumb-visual\" aria-hidden=\"true\">\n <span class=\"slider__thumb-wash\" />\n </span>\n </div>\n );\n }\n\n render() {\n const values = this.resolvedValues;\n const first = values[0];\n const last = values[values.length - 1];\n const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n const valueDisplay = values\n .map((value, index) => this.formattedValue(value, index))\n .join(` ${this.rangeSeparator} `);\n\n return (\n <Host\n aria-disabled={this.isDisabled ? 'true' : undefined}\n class={{\n slider: true,\n 'ds-field-stack': true,\n [`slider--${this.size}`]: true,\n [`slider--${this.orientation}`]: true,\n [`slider--thumb-${this.thumbAlignment}`]: true,\n 'slider--range': this.isRange,\n 'slider--readonly': this.readOnly,\n 'ds-control-inactive': this.isDisabled,\n }}\n data-orientation={this.orientation}\n data-disabled={this.isDisabled ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-dragging={this.dragging ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-filled=\"\"\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n data-valid={!this.isDisabled ? '' : undefined}\n onClick={this.handleHostClick}\n >\n {(this.label || this.showValue) && (\n <div class=\"slider__label-row\">\n {this.label && (\n <ds-text\n class=\"slider__label\"\n as=\"label\"\n variant=\"text-body-small\"\n color=\"primary\"\n emphasis\n for={firstInputId}\n textId={this.labelId}\n >\n {this.label}\n </ds-text>\n )}\n {this.showValue && (\n <ds-text\n class=\"slider__value\"\n as=\"span\"\n variant=\"text-body-small\"\n color=\"primary\"\n fontFeature=\"tabular-nums\"\n >\n {valueDisplay}\n </ds-text>\n )}\n </div>\n )}\n <div\n class=\"slider__control\"\n ref={element => {\n this.controlEl = element ?? null;\n }}\n style={\n {\n '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n '--ds-slider-end-pct': String(this.percent(last)),\n } as Record<string, string>\n }\n onPointerDown={this.handlePointerDown}\n onPointerMove={this.handlePointerMove}\n onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n >\n <div class=\"slider__rail\" aria-hidden=\"true\">\n <div class=\"slider__indicator\" />\n </div>\n {values.map((value, index) => this.renderThumb(value, index))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["sliderCss","sliderId","sliderExternalLabelId","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","min","max","step","minStepsBetweenValues","showValue","size","orientation","thumbAlignment","disabled","readOnly","isInactive","ariaLabel","startLabel","endLabel","valueTexts","valuePrefix","valueSuffix","rangeSeparator","formDisabled","dragging","focused","touched","activeThumbIndex","generatedId","labelId","initialValue","lastCommittedValue","pointerId","pointerStartValue","controlEl","handleNativeInput","event","index","input","target","isDisabled","String","resolvedValues","setValueAt","Number","handleNativeChange","commitIfChanged","handleKeyDown","includes","key","preventDefault","handleFocus","handleBlur","next","relatedTarget","Node","el","contains","handleHostClick","inputs","querySelectorAll","Math","length","focus","handlePointerDown","button","valueFromPointer","closestThumbIndex","cloneValue","publicValue","setPointerCapture","requestAnimationFrame","preventScroll","handlePointerMove","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","values","isRange","setRepeatedFormControlValue","internals","name","inactive","setFormControlValue","state","formDisabledCallback","formResetCallback","formStateRestoreCallback","restored","restoreNumberArrayFormState","restoreStringFormState","isFinite","setFocus","Array","isArray","safeStep","safeMin","safeMax","minimum","minimumGap","steps","floor","maximum","snap","raw","lower","upper","gap","valuesEqual","a","b","every","decimalPlaces","text","toLowerCase","split","candidate","stepped","round","precision","toFixed","percent","allowedMin","allowedMax","previous","constrained","nextValue","dsChange","emit","current","dsCommit","label","ariaLabelledby","ids","from","labels","map","id","externalLabelledby","join","formattedValue","authored","valueText","number","Intl","NumberFormat","locale","formatOptions","format","ariaValueText","undefined","pointerPercent","control","rect","getBoundingClientRect","thumb","querySelector","thumbSize","offsetWidth","offsetHeight","inset","travel","height","bottom","clientY","width","clientX","left","targetElement","closest","dataset","lowerDistance","abs","upperDistance","endPointerInteraction","canceled","hasPointerCapture","releasePointerCapture","renderThumb","inputId","rangeLabel","labelledby","directLabel","h","class","slider__thumb","style","type","ariaDescribedby","onInput","onChange","onKeyDown","onFocus","onBlur","render","first","last","firstInputId","dirty","valueDisplay","Host","slider","onClick","as","variant","color","emphasis","for","textId","fontFeature","ref","element","onPointerDown","onPointerMove","onPointerUp","onPointerCancel"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n --ds-slider-control-size: var(--dimension-size-400);\n --ds-slider-thumb-size: var(--dimension-size-200);\n --ds-slider-track-size: var(--dimension-size-100);\n --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n box-sizing: border-box;\n width: 100%;\n color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n --ds-slider-control-size: var(--dimension-size-300);\n --ds-slider-thumb-size: var(--dimension-size-150);\n --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n --ds-slider-control-size: var(--dimension-size-200);\n --ds-slider-thumb-size: var(--dimension-size-100);\n --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n width: fit-content;\n min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n min-width: 0;\n}\n\n.slider__label {\n min-width: 0;\n}\n\n.slider__value {\n flex-shrink: 0;\n}\n\n.slider__control {\n position: relative;\n width: 100%;\n height: var(--ds-slider-control-size);\n border-radius: var(--dimension-radius-half);\n cursor: default;\n touch-action: none;\n user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n align-self: center;\n width: var(--ds-slider-control-size);\n height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n cursor: not-allowed;\n}\n\n.slider__rail {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n height: var(--ds-slider-track-size);\n overflow: hidden;\n border-radius: var(--dimension-radius-025);\n background-color: transparent;\n box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n transform: translateY(-50%);\n pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n right: calc(var(--ds-slider-thumb-size) / 2);\n left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: calc(\n var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n border-radius: inherit;\n background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n left: calc(\n var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n width: calc(\n ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n left: calc(var(--ds-slider-start-pct, 0) * 1%);\n width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n position: absolute;\n top: 50%;\n left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n width: var(--ds-slider-thumb-size);\n height: var(--ds-slider-thumb-size);\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.slider__thumb--active {\n z-index: 2;\n}\n\n.slider__input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n opacity: 0;\n appearance: none;\n pointer-events: none;\n z-index: 2;\n}\n\n.slider__thumb-visual {\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n overflow: visible;\n border-radius: var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-sm);\n pointer-events: none;\n transition:\n background-color var(--effect-motion-short-2),\n box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: transparent;\n transition: background-color var(--effect-motion-short-2);\n}\n\n@media (hover: hover) and (pointer: fine) {\n :host(:not(.slider--readonly):not(.ds-control-inactive))\n .slider__thumb:hover\n .slider__thumb-wash {\n background-color: var(--color-interaction-hover);\n }\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n .slider__thumb--active\n .slider__thumb-wash {\n background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n top: 0;\n right: auto;\n bottom: 0;\n left: 50%;\n width: var(--ds-slider-track-size);\n height: auto;\n transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n top: calc(var(--ds-slider-thumb-size) / 2);\n bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n top: auto;\n right: 0;\n bottom: 0;\n left: 0;\n width: auto;\n height: calc(\n var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n bottom: calc(\n var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n height: calc(\n ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n top: auto;\n bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n left: 50%;\n transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .slider__thumb-visual,\n .slider__thumb-wash {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n .slider__rail {\n border: var(--ds-slider-track-stroke) solid var(--ds-forced-color-content);\n box-shadow: none;\n }\n\n .slider__indicator {\n background-color: var(--ds-forced-color-selected);\n }\n\n .slider__thumb-visual {\n border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n background-color: var(--ds-forced-color-surface);\n box-shadow: none;\n }\n\n .slider__input:focus-visible + .slider__thumb-visual,\n :host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n outline-color: var(--ds-forced-color-selected);\n }\n}\n","import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport {\n restoreNumberArrayFormState,\n restoreStringFormState,\n setFormControlValue,\n setRepeatedFormControlValue,\n} from '../../utils';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n tag: 'ds-slider',\n styleUrl: 'Slider.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Slider {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n @Prop({ mutable: true }) value: SliderValue = 0;\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 1;\n /** Minimum number of steps kept between two range thumbs. */\n @Prop() minStepsBetweenValues: number = 0;\n /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n @Prop() label: string | undefined;\n /** Show the formatted current value beside the visible label. */\n @Prop() showValue: boolean = true;\n @Prop() size: SliderSize = 'md';\n @Prop() orientation: SliderOrientation = 'horizontal';\n /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Keep the value focusable and submittable while preventing changes. */\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop() isInactive: boolean = false;\n /** Direct accessible name for a single-thumb slider without a visible label. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Id references for a visible single-thumb slider label. */\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n /** Id references for supporting guidance or error text. */\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n /** Accessible label for the lower thumb in a range slider. */\n @Prop() startLabel: string = 'Minimum value';\n /** Accessible label for the upper thumb in a range slider. */\n @Prop() endLabel: string = 'Maximum value';\n /** Human-readable value text for a single slider or both range thumbs. */\n @Prop() valueText: string | undefined;\n /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n @Prop() valueTexts: string[] = [];\n /** Locale used by Intl.NumberFormat for the visible value. */\n @Prop() locale: string | undefined;\n /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n @Prop() valuePrefix: string = '';\n @Prop() valueSuffix: string = '';\n @Prop() rangeSeparator: string = '–';\n /** Id applied to the first native range input. */\n @Prop() inputId: string | undefined;\n\n /** Emitted continuously while the value changes. */\n @Event() dsChange!: EventEmitter<SliderValue>;\n /** Emitted when a pointer or keyboard value change is committed. */\n @Event() dsCommit!: EventEmitter<SliderValue>;\n\n @State() private formDisabled = false;\n @State() private dragging = false;\n @State() private focused = false;\n @State() private touched = false;\n @State() private activeThumbIndex = 0;\n @State() private externalLabelledby: string | undefined;\n\n private readonly generatedId = `ds-slider-${++sliderId}`;\n private readonly labelId = `${this.generatedId}-label`;\n private initialValue: SliderValue = 0;\n private lastCommittedValue: SliderValue = 0;\n private pointerId: number | null = null;\n private pointerStartValue: SliderValue = 0;\n private controlEl: HTMLDivElement | null = null;\n\n componentWillLoad() {\n this.initialValue = this.cloneValue(this.publicValue);\n this.lastCommittedValue = this.cloneValue(this.publicValue);\n this.syncFormValue();\n }\n\n componentDidLoad() {\n this.syncNativeLabels();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n @Watch('step')\n @Watch('minStepsBetweenValues')\n @Watch('name')\n @Watch('disabled')\n @Watch('isInactive')\n syncFormValue() {\n const values = this.resolvedValues;\n if (this.isRange) {\n setRepeatedFormControlValue(this.internals, this.name, values, {\n inactive: this.isDisabled,\n });\n } else {\n const value = String(values[0]);\n setFormControlValue(this.internals, this.name ? value : null, {\n inactive: this.isDisabled,\n state: value,\n });\n }\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.cloneValue(this.initialValue);\n this.lastCommittedValue = this.cloneValue(this.initialValue);\n this.dragging = false;\n this.focused = false;\n this.touched = false;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n if (this.isRange) {\n const restored = restoreNumberArrayFormState(state, 2);\n this.value = restored.length ? restored : this.cloneValue(this.initialValue);\n } else {\n const restored = Number(restoreStringFormState(state, 'NaN'));\n if (Number.isFinite(restored)) this.value = restored;\n }\n this.lastCommittedValue = this.cloneValue(this.publicValue);\n }\n\n @Method()\n async setFocus(index: number = 0) {\n const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.isInactive || this.formDisabled;\n }\n\n private get isRange(): boolean {\n return Array.isArray(this.value);\n }\n\n private get safeStep(): number {\n return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n }\n\n private get safeMin(): number {\n return Number.isFinite(this.min) ? this.min : 0;\n }\n\n private get safeMax(): number {\n const minimum = this.safeMin;\n return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n }\n\n private get minimumGap(): number {\n const steps = Number.isFinite(this.minStepsBetweenValues)\n ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n : 0;\n return steps * this.safeStep;\n }\n\n private get resolvedValues(): number[] {\n const minimum = this.safeMin;\n const maximum = this.safeMax;\n if (!this.isRange) return [this.snap(Number(this.value))];\n\n const raw = this.value as number[];\n let lower = this.snap(Number(raw[0] ?? minimum));\n let upper = this.snap(Number(raw[1] ?? maximum));\n if (lower > upper) [lower, upper] = [upper, lower];\n\n const gap = Math.min(this.minimumGap, maximum - minimum);\n if (upper - lower < gap) {\n upper = Math.min(maximum, this.snap(lower + gap));\n lower = Math.max(minimum, this.snap(upper - gap));\n }\n return [lower, upper];\n }\n\n private get publicValue(): SliderValue {\n const values = this.resolvedValues;\n return this.isRange ? [...values] : values[0];\n }\n\n private cloneValue(value: SliderValue): SliderValue {\n return Array.isArray(value) ? [...value] : value;\n }\n\n private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n if (Array.isArray(a) && Array.isArray(b)) {\n return a.length === b.length && a.every((value, index) => value === b[index]);\n }\n return !Array.isArray(a) && !Array.isArray(b) && a === b;\n }\n\n private decimalPlaces(value: number): number {\n const text = String(value).toLowerCase();\n if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n return text.includes('.') ? text.split('.')[1].length : 0;\n }\n\n private snap(value: number): number {\n const minimum = this.safeMin;\n const maximum = this.safeMax;\n const candidate = Number.isFinite(value) ? value : minimum;\n const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n const precision = Math.min(\n 10,\n Math.max(\n this.decimalPlaces(minimum),\n this.decimalPlaces(maximum),\n this.decimalPlaces(this.safeStep)\n )\n );\n return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n }\n\n private percent(value: number): number {\n return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n }\n\n private allowedMin(index: number, values = this.resolvedValues): number {\n return this.isRange && index === 1\n ? Math.min(this.safeMax, values[0] + this.minimumGap)\n : this.safeMin;\n }\n\n private allowedMax(index: number, values = this.resolvedValues): number {\n return this.isRange && index === 0\n ? Math.max(this.safeMin, values[1] - this.minimumGap)\n : this.safeMax;\n }\n\n private setValueAt(index: number, next: number): boolean {\n const previous = this.publicValue;\n const values = this.resolvedValues;\n const constrained = Math.min(\n this.allowedMax(index, values),\n Math.max(this.allowedMin(index, values), this.snap(next))\n );\n values[index] = constrained;\n const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n if (this.valuesEqual(previous, nextValue)) return false;\n\n this.value = nextValue;\n this.dsChange.emit(this.cloneValue(nextValue));\n return true;\n }\n\n private commitIfChanged() {\n const current = this.publicValue;\n if (this.valuesEqual(current, this.lastCommittedValue)) return;\n this.lastCommittedValue = this.cloneValue(current);\n this.dsCommit.emit(this.cloneValue(current));\n }\n\n private syncNativeLabels() {\n if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n return label.id;\n });\n if (ids.length) this.externalLabelledby = ids.join(' ');\n }\n\n private formattedValue(value: number, index: number): string {\n const authored = this.valueTexts[index] ?? this.valueText;\n if (authored) return authored;\n let number: string;\n try {\n number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n } catch {\n number = String(value);\n }\n return `${this.valuePrefix}${number}${this.valueSuffix}`;\n }\n\n private ariaValueText(value: number, index: number): string | undefined {\n if (\n this.valueTexts[index] ||\n this.valueText ||\n this.valuePrefix ||\n this.valueSuffix ||\n this.formatOptions\n ) {\n return this.formattedValue(value, index);\n }\n return undefined;\n }\n\n private handleNativeInput = (event: Event, index: number) => {\n const input = event.target as HTMLInputElement;\n this.activeThumbIndex = index;\n if (this.readOnly || this.isDisabled) {\n input.value = String(this.resolvedValues[index]);\n return;\n }\n this.setValueAt(index, Number(input.value));\n };\n\n private handleNativeChange = () => {\n if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (!this.readOnly) return;\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n 'PageUp',\n 'PageDown',\n ].includes(event.key)\n ) {\n event.preventDefault();\n }\n };\n\n private handleFocus = (index: number) => {\n this.activeThumbIndex = index;\n this.focused = true;\n };\n\n private handleBlur = (event: FocusEvent) => {\n const next = event.relatedTarget;\n if (next instanceof Node && this.el.contains(next)) return;\n this.focused = false;\n this.touched = true;\n };\n\n private handleHostClick = (event: MouseEvent) => {\n if (event.target !== this.el || this.isDisabled) return;\n const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n };\n\n private pointerPercent(event: PointerEvent): number {\n const control = this.controlEl;\n if (!control) return 0;\n const rect = control.getBoundingClientRect();\n const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n const thumbSize = thumb\n ? this.orientation === 'horizontal'\n ? thumb.offsetWidth\n : thumb.offsetHeight\n : 0;\n // Both alignment modes keep the complete thumb inside the control. Edge\n // alignment lets the rail span the control while center alignment insets\n // the rail to the same thumb-center travel.\n const inset = thumbSize / 2;\n\n if (this.orientation === 'vertical') {\n const travel = Math.max(1, rect.height - inset * 2);\n return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n }\n\n const travel = Math.max(1, rect.width - inset * 2);\n const percent = (event.clientX - rect.left - inset) / travel;\n return Math.min(1, Math.max(0, percent));\n }\n\n private valueFromPointer(event: PointerEvent): number {\n return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n }\n\n private closestThumbIndex(value: number, target: EventTarget | null): number {\n const targetElement =\n target instanceof HTMLElement ? target.closest<HTMLElement>('.slider__thumb') : null;\n if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n if (!this.isRange) return 0;\n\n const values = this.resolvedValues;\n const lowerDistance = Math.abs(value - values[0]);\n const upperDistance = Math.abs(value - values[1]);\n if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n return lowerDistance < upperDistance ? 0 : 1;\n }\n\n private handlePointerDown = (event: PointerEvent) => {\n if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n event.preventDefault();\n const value = this.valueFromPointer(event);\n const index = this.closestThumbIndex(value, event.target);\n this.activeThumbIndex = index;\n this.pointerId = event.pointerId;\n this.pointerStartValue = this.cloneValue(this.publicValue);\n this.dragging = true;\n this.setValueAt(index, value);\n this.controlEl?.setPointerCapture(event.pointerId);\n requestAnimationFrame(() => {\n const input = this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index];\n input?.focus({ preventScroll: true });\n });\n };\n\n private handlePointerMove = (event: PointerEvent) => {\n if (this.pointerId !== event.pointerId || !this.dragging) return;\n event.preventDefault();\n this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n };\n\n private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n if (this.pointerId !== event.pointerId) return;\n if (this.controlEl?.hasPointerCapture(event.pointerId))\n this.controlEl.releasePointerCapture(event.pointerId);\n this.pointerId = null;\n this.dragging = false;\n this.touched = true;\n if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue))\n this.commitIfChanged();\n }\n\n private renderThumb(value: number, index: number) {\n const inputId =\n index === 0\n ? (this.inputId ?? `${this.generatedId}-input`)\n : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n const labelledby = this.isRange\n ? undefined\n : (this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby));\n const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n return (\n <div\n class={{\n slider__thumb: true,\n 'slider__thumb--active': index === this.activeThumbIndex,\n }}\n data-index={String(index)}\n style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n >\n <input\n class=\"slider__input\"\n type=\"range\"\n id={inputId}\n min={this.allowedMin(index)}\n max={this.allowedMax(index)}\n step={this.safeStep}\n value={value}\n disabled={this.isDisabled}\n aria-label={directLabel}\n aria-labelledby={labelledby}\n aria-describedby={this.ariaDescribedby}\n aria-valuetext={this.ariaValueText(value, index)}\n aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n aria-readonly={this.readOnly ? 'true' : undefined}\n onInput={(event: Event) => this.handleNativeInput(event, index)}\n onChange={this.handleNativeChange}\n onKeyDown={this.handleKeyDown}\n onFocus={() => this.handleFocus(index)}\n onBlur={this.handleBlur}\n />\n <span class=\"slider__thumb-visual\" aria-hidden=\"true\">\n <span class=\"slider__thumb-wash\" />\n </span>\n </div>\n );\n }\n\n render() {\n const values = this.resolvedValues;\n const first = values[0];\n const last = values[values.length - 1];\n const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n const valueDisplay = values\n .map((value, index) => this.formattedValue(value, index))\n .join(` ${this.rangeSeparator} `);\n\n return (\n <Host\n aria-disabled={this.isDisabled ? 'true' : undefined}\n class={{\n slider: true,\n 'ds-field-stack': true,\n [`slider--${this.size}`]: true,\n [`slider--${this.orientation}`]: true,\n [`slider--thumb-${this.thumbAlignment}`]: true,\n 'slider--range': this.isRange,\n 'slider--readonly': this.readOnly,\n 'ds-control-inactive': this.isDisabled,\n }}\n data-orientation={this.orientation}\n data-disabled={this.isDisabled ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-dragging={this.dragging ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-filled=\"\"\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n data-valid={!this.isDisabled ? '' : undefined}\n onClick={this.handleHostClick}\n >\n {(this.label || this.showValue) && (\n <div class=\"slider__label-row\">\n {this.label && (\n <ds-text\n class=\"slider__label\"\n as=\"label\"\n variant=\"text-body-small\"\n color=\"primary\"\n emphasis\n for={firstInputId}\n textId={this.labelId}\n >\n {this.label}\n </ds-text>\n )}\n {this.showValue && (\n <ds-text\n class=\"slider__value\"\n as=\"span\"\n variant=\"text-body-small\"\n color=\"primary\"\n fontFeature=\"tabular-nums\"\n >\n {valueDisplay}\n </ds-text>\n )}\n </div>\n )}\n <div\n class=\"slider__control\"\n ref={element => {\n this.controlEl = element ?? null;\n }}\n style={\n {\n '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n '--ds-slider-end-pct': String(this.percent(last)),\n } as Record<string, string>\n }\n onPointerDown={this.handlePointerDown}\n onPointerMove={this.handlePointerMove}\n onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n >\n <div class=\"slider__rail\" aria-hidden=\"true\">\n <div class=\"slider__indicator\" />\n </div>\n {values.map((value, index) => this.renderThumb(value, index))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as
|
|
1
|
+
import{S as o,d as s}from"./p-BV5T1hzN.js";const t=o;const p=s;export{t as DsSwatchPicker,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-swatch-picker.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as o,d as s}from"./p-
|
|
1
|
+
import{S as o,d as s}from"./p-tNQ0YulU.js";const t=o;const p=s;export{t as DsSwitch,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-switch.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{T as o,d as s}from"./p-
|
|
1
|
+
import{T as o,d as s}from"./p-CaNCGKEJ.js";const t=o;const a=s;export{t as DsTabGroup,a as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tab-group.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as i,a,t as r}from"./index.js";import{d as l}from"./p-
|
|
1
|
+
import{p as e,H as s,c as t,h as i,a,t as r}from"./index.js";import{d as l}from"./p-DBwa1OXP.js";import{d as o}from"./p-BOhpMUwO.js";import{d}from"./p-D8rpKod8.js";import{d as n}from"./p-Dryt3COt.js";import{d as c}from"./p-Ds51RgCi.js";import{d as h}from"./p-C0CE2v5D.js";import{d as m}from"./p-DtkLtKY0.js";import{d as f}from"./p-Cea7rROU.js";import{d as u}from"./p-DkikNSSO.js";import{d as p}from"./p-0XTyQNRG.js";import{d as b}from"./p-CaNCGKEJ.js";import{d as g}from"./p-ji09W9el.js";import{d as C}from"./p-BgLI9JoT.js";import{d as k}from"./p-CbSUyv5B.js";const E=()=>`.sc-ds-table-filter-h{display:inline-flex;min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs)}ds-filter-menu.sc-ds-table-filter{min-inline-size:0;max-inline-size:100%;--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs)}`;const j=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.dsClear=t(this,"dsClear",7);this.dsMatchModeChange=t(this,"dsMatchModeChange",7);this.dsActiveFilterChange=t(this,"dsActiveFilterChange",7);this.dsClose=t(this,"dsClose",7);this.dsOpenChange=t(this,"dsOpenChange",7);this.dsAfterClose=t(this,"dsAfterClose",7);this.open=false;this.hasBorder=true;this.filters=[];this.values={};this.matchModes={};this.label="Filter";this.ariaLabel=null;this.menuLabel=null;this.categoriesLabel="Filter categories";this.clearLabel="Clear";this.searchPlaceholder="Search";this.noResultsText="No results"}render(){const e=this.ariaLabel?.trim()||"Filter table";const s=this.menuLabel?.trim()||e;return i(a,{key:"57baefdcf42ea5b3dfe5635d18807ddabc978ff5"},i("ds-filter-menu",{key:"e41e0c964f2fbb9618cd14dedc69a2a9424cbaf5",neutralTrigger:true,applyRequired:true,open:this.open,triggerLabel:this.label,showSelectedCount:false,showIndicator:false,icon:"Filters",size:"md",width:"hug",hasBorder:this.hasBorder,activeFill:false,collapseLabel:true,align:"start","aria-label":e,filters:this.filters,values:this.values,matchModes:this.matchModes,activeFilterId:this.activeFilterId,menuLabel:s,categoriesLabel:this.categoriesLabel,clearLabel:this.clearLabel,searchPlaceholder:this.searchPlaceholder,noResultsText:this.noResultsText,footerLayout:"categories-clear",onDsChange:e=>this.forward(e,this.dsChange),onDsClear:e=>this.forward(e,this.dsClear),onDsMatchModeChange:e=>this.forward(e,this.dsMatchModeChange),onDsActiveFilterChange:e=>this.forward(e,this.dsActiveFilterChange),onDsClose:e=>this.forward(e,this.dsClose),onDsOpenChange:e=>{e.stopPropagation();this.open=e.detail;this.dsOpenChange.emit(e.detail)},onDsAfterClose:e=>this.forward(e,this.dsAfterClose)}))}forward(e,s){e.stopPropagation();s.emit(e.detail)}static get style(){return E()}},[2,"ds-table-filter",{open:[1028],hasBorder:[4,"has-border"],filters:[16],values:[16],matchModes:[16],activeFilterId:[1,"active-filter-id"],label:[1],ariaLabel:[1,"aria-label"],menuLabel:[1,"menu-label"],categoriesLabel:[1,"categories-label"],clearLabel:[1,"clear-label"],searchPlaceholder:[1,"search-placeholder"],noResultsText:[1,"no-results-text"]}]);function x(){if(typeof customElements==="undefined"){return}const e=["ds-table-filter","ds-badge","ds-button-unfilled","ds-calendar","ds-checkbox","ds-divider","ds-empty-state","ds-filter-menu","ds-icon","ds-input","ds-loader","ds-tab-group","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-table-filter":if(!customElements.get(r(e))){customElements.define(r(e),j)}break;case"ds-badge":if(!customElements.get(r(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){o()}break;case"ds-calendar":if(!customElements.get(r(e))){d()}break;case"ds-checkbox":if(!customElements.get(r(e))){n()}break;case"ds-divider":if(!customElements.get(r(e))){c()}break;case"ds-empty-state":if(!customElements.get(r(e))){h()}break;case"ds-filter-menu":if(!customElements.get(r(e))){m()}break;case"ds-icon":if(!customElements.get(r(e))){f()}break;case"ds-input":if(!customElements.get(r(e))){u()}break;case"ds-loader":if(!customElements.get(r(e))){p()}break;case"ds-tab-group":if(!customElements.get(r(e))){b()}break;case"ds-tag":if(!customElements.get(r(e))){g()}break;case"ds-text":if(!customElements.get(r(e))){C()}break;case"ds-tooltip":if(!customElements.get(r(e))){k()}break}}))}x();const v=j;const D=x;export{v as DsTableFilter,D as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-table-filter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tableFilterCss","TableFilter","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","hasBorder","filters","values","matchModes","label","ariaLabel","menuLabel","categoriesLabel","clearLabel","searchPlaceholder","noResultsText","render","name","trim","menuName","h","Host","key","neutralTrigger","applyRequired","triggerLabel","showSelectedCount","showIndicator","icon","size","width","activeFill","collapseLabel","align","activeFilterId","footerLayout","onDsChange","event","forward","dsChange","onDsClear","dsClear","onDsMatchModeChange","dsMatchModeChange","onDsActiveFilterChange","dsActiveFilterChange","onDsClose","dsClose","onDsOpenChange","stopPropagation","detail","dsOpenChange","emit","onDsAfterClose","dsAfterClose","emitter"],"sources":["src/wc/components/TableFilter/TableFilter.css?tag=ds-table-filter&encapsulation=scoped","src/wc/components/TableFilter/TableFilter.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n}\n\nds-filter-menu {\n min-inline-size: 0;\n max-inline-size: 100%;\n --ds-choice-popup-min-inline-size: var(--dimension-menu-width-xs);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type {\n FilterMenuChangeDetail,\n FilterMenuFilter,\n FilterMenuMatchModeChangeDetail,\n FilterMenuMatchModes,\n FilterMenuValues,\n} from '../FilterMenu/FilterMenu';\n\n@Component({\n tag: 'ds-table-filter',\n styleUrl: 'TableFilter.css',\n scoped: true,\n})\nexport class TableFilter {\n /** Controlled popup visibility. */\n @Prop({ mutable: true }) open: boolean = false;\n /** Product-owned filter categories and option definitions. */\n /** Show the trigger border. */\n @Prop() hasBorder: boolean = true;\n @Prop() filters: FilterMenuFilter[] = [];\n /** Controlled values keyed by filter id. */\n @Prop() values: FilterMenuValues = {};\n /** Controlled any/all match mode keyed by multiple-choice filter id. Defaults to any. */\n @Prop() matchModes: FilterMenuMatchModes = {};\n /** Controlled category shown in the option pane. */\n @Prop() activeFilterId: string | undefined;\n /** Visible trigger label. */\n @Prop() label: string = 'Filter';\n /** Accessible name for the trigger. Defaults to Filter table. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Accessible name for the non-modal filter dialog. Defaults to the trigger name. */\n @Prop() menuLabel: string | null = null;\n /** Accessible name for the category tab list. */\n @Prop() categoriesLabel: string = 'Filter categories';\n /** Footer action and date-clear accessible label. */\n @Prop() clearLabel: string = 'Clear';\n /** Placeholder shown in each non-date option search header. */\n @Prop() searchPlaceholder: string = 'Search';\n /** Empty-state text shown when an option search has no matches. */\n @Prop() noResultsText: string = 'No results';\n\n /** Requests a controlled value replacement without closing the popup. */\n @Event() dsChange!: EventEmitter<FilterMenuChangeDetail>;\n /** Requests that the consumer clear every filter value. */\n @Event() dsClear!: EventEmitter<void>;\n /** Requests a controlled any/all mode replacement for a multiple-choice filter. */\n @Event() dsMatchModeChange!: EventEmitter<FilterMenuMatchModeChangeDetail>;\n /** Requests a controlled active-category replacement. */\n @Event() dsActiveFilterChange!: EventEmitter<string>;\n /** Requests that the controlled popup close. */\n @Event() dsClose!: EventEmitter<void>;\n /** Emitted whenever trigger activation changes popup visibility. */\n @Event() dsOpenChange!: EventEmitter<boolean>;\n /** Emitted after exit motion and rendered popup removal complete. */\n @Event() dsAfterClose!: EventEmitter<void>;\n\n render() {\n const name = this.ariaLabel?.trim() || 'Filter table';\n const menuName = this.menuLabel?.trim() || name;\n\n return (\n <Host>\n <ds-filter-menu\n neutralTrigger\n applyRequired\n open={this.open}\n triggerLabel={this.label}\n showSelectedCount={false}\n showIndicator={false}\n icon=\"Filters\"\n size=\"md\"\n width=\"hug\"\n hasBorder={this.hasBorder}\n activeFill={false}\n collapseLabel={true}\n align=\"start\"\n aria-label={name}\n filters={this.filters}\n values={this.values}\n matchModes={this.matchModes}\n activeFilterId={this.activeFilterId}\n menuLabel={menuName}\n categoriesLabel={this.categoriesLabel}\n clearLabel={this.clearLabel}\n searchPlaceholder={this.searchPlaceholder}\n noResultsText={this.noResultsText}\n footerLayout=\"categories-clear\"\n onDsChange={event => this.forward(event, this.dsChange)}\n onDsClear={event => this.forward(event, this.dsClear)}\n onDsMatchModeChange={event => this.forward(event, this.dsMatchModeChange)}\n onDsActiveFilterChange={event => this.forward(event, this.dsActiveFilterChange)}\n onDsClose={event => this.forward(event, this.dsClose)}\n onDsOpenChange={event => {\n event.stopPropagation();\n this.open = event.detail;\n this.dsOpenChange.emit(event.detail);\n }}\n onDsAfterClose={event => this.forward(event, this.dsAfterClose)}\n />\n </Host>\n );\n }\n\n private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>): void {\n event.stopPropagation();\n emitter.emit(event.detail);\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["tableFilterCss","TableFilter","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","hasBorder","filters","values","matchModes","label","ariaLabel","menuLabel","categoriesLabel","clearLabel","searchPlaceholder","noResultsText","render","name","trim","menuName","h","Host","key","neutralTrigger","applyRequired","triggerLabel","showSelectedCount","showIndicator","icon","size","width","activeFill","collapseLabel","align","activeFilterId","footerLayout","onDsChange","event","forward","dsChange","onDsClear","dsClear","onDsMatchModeChange","dsMatchModeChange","onDsActiveFilterChange","dsActiveFilterChange","onDsClose","dsClose","onDsOpenChange","stopPropagation","detail","dsOpenChange","emit","onDsAfterClose","dsAfterClose","emitter"],"sources":["src/wc/components/TableFilter/TableFilter.css?tag=ds-table-filter&encapsulation=scoped","src/wc/components/TableFilter/TableFilter.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n}\n\nds-filter-menu {\n min-inline-size: 0;\n max-inline-size: 100%;\n --ds-choice-popup-min-inline-size: var(--dimension-menu-width-xs);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type {\n FilterMenuChangeDetail,\n FilterMenuFilter,\n FilterMenuMatchModeChangeDetail,\n FilterMenuMatchModes,\n FilterMenuValues,\n} from '../FilterMenu/FilterMenu';\n\n@Component({\n tag: 'ds-table-filter',\n styleUrl: 'TableFilter.css',\n scoped: true,\n})\nexport class TableFilter {\n /** Controlled popup visibility. */\n @Prop({ mutable: true }) open: boolean = false;\n /** Product-owned filter categories and option definitions. */\n /** Show the trigger border. */\n @Prop() hasBorder: boolean = true;\n @Prop() filters: FilterMenuFilter[] = [];\n /** Controlled values keyed by filter id. */\n @Prop() values: FilterMenuValues = {};\n /** Controlled any/all match mode keyed by multiple-choice filter id. Defaults to any. */\n @Prop() matchModes: FilterMenuMatchModes = {};\n /** Controlled category shown in the option pane. */\n @Prop() activeFilterId: string | undefined;\n /** Visible trigger label. */\n @Prop() label: string = 'Filter';\n /** Accessible name for the trigger. Defaults to Filter table. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Accessible name for the non-modal filter dialog. Defaults to the trigger name. */\n @Prop() menuLabel: string | null = null;\n /** Accessible name for the category tab list. */\n @Prop() categoriesLabel: string = 'Filter categories';\n /** Footer action and date-clear accessible label. */\n @Prop() clearLabel: string = 'Clear';\n /** Placeholder shown in each non-date option search header. */\n @Prop() searchPlaceholder: string = 'Search';\n /** Empty-state text shown when an option search has no matches. */\n @Prop() noResultsText: string = 'No results';\n\n /** Requests a controlled value replacement without closing the popup. */\n @Event() dsChange!: EventEmitter<FilterMenuChangeDetail>;\n /** Requests that the consumer clear every filter value. */\n @Event() dsClear!: EventEmitter<void>;\n /** Requests a controlled any/all mode replacement for a multiple-choice filter. */\n @Event() dsMatchModeChange!: EventEmitter<FilterMenuMatchModeChangeDetail>;\n /** Requests a controlled active-category replacement. */\n @Event() dsActiveFilterChange!: EventEmitter<string>;\n /** Requests that the controlled popup close. */\n @Event() dsClose!: EventEmitter<void>;\n /** Emitted whenever trigger activation changes popup visibility. */\n @Event() dsOpenChange!: EventEmitter<boolean>;\n /** Emitted after exit motion and rendered popup removal complete. */\n @Event() dsAfterClose!: EventEmitter<void>;\n\n render() {\n const name = this.ariaLabel?.trim() || 'Filter table';\n const menuName = this.menuLabel?.trim() || name;\n\n return (\n <Host>\n <ds-filter-menu\n neutralTrigger\n applyRequired\n open={this.open}\n triggerLabel={this.label}\n showSelectedCount={false}\n showIndicator={false}\n icon=\"Filters\"\n size=\"md\"\n width=\"hug\"\n hasBorder={this.hasBorder}\n activeFill={false}\n collapseLabel={true}\n align=\"start\"\n aria-label={name}\n filters={this.filters}\n values={this.values}\n matchModes={this.matchModes}\n activeFilterId={this.activeFilterId}\n menuLabel={menuName}\n categoriesLabel={this.categoriesLabel}\n clearLabel={this.clearLabel}\n searchPlaceholder={this.searchPlaceholder}\n noResultsText={this.noResultsText}\n footerLayout=\"categories-clear\"\n onDsChange={event => this.forward(event, this.dsChange)}\n onDsClear={event => this.forward(event, this.dsClear)}\n onDsMatchModeChange={event => this.forward(event, this.dsMatchModeChange)}\n onDsActiveFilterChange={event => this.forward(event, this.dsActiveFilterChange)}\n onDsClose={event => this.forward(event, this.dsClose)}\n onDsOpenChange={event => {\n event.stopPropagation();\n this.open = event.detail;\n this.dsOpenChange.emit(event.detail);\n }}\n onDsAfterClose={event => this.forward(event, this.dsAfterClose)}\n />\n </Host>\n );\n }\n\n private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>): void {\n event.stopPropagation();\n emitter.emit(event.detail);\n }\n}\n"],"mappings":"gjBAAA,MAAMA,EAAiB,IAAM,wP,MCchBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,uVAO2BC,KAAAC,KAAgB,MAGjCD,KAAAE,UAAqB,KACrBF,KAAAG,QAA8B,GAE9BH,KAAAI,OAA2B,GAE3BJ,KAAAK,WAAmC,GAInCL,KAAAM,MAAgB,SAEWN,KAAAO,UAA2B,KAEtDP,KAAAQ,UAA2B,KAE3BR,KAAAS,gBAA0B,oBAE1BT,KAAAU,WAAqB,QAErBV,KAAAW,kBAA4B,SAE5BX,KAAAY,cAAwB,YAoEjC,CAnDC,MAAAC,GACE,MAAMC,EAAOd,KAAKO,WAAWQ,QAAU,eACvC,MAAMC,EAAWhB,KAAKQ,WAAWO,QAAUD,EAE3C,OACEG,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,kBAAAE,IAAA,2CACEC,eAAc,KACdC,cAAa,KACbpB,KAAMD,KAAKC,KACXqB,aAActB,KAAKM,MACnBiB,kBAAmB,MACnBC,cAAe,MACfC,KAAK,UACLC,KAAK,KACLC,MAAM,MACNzB,UAAWF,KAAKE,UAChB0B,WAAY,MACZC,cAAe,KACfC,MAAM,QAAO,aACDhB,EACZX,QAASH,KAAKG,QACdC,OAAQJ,KAAKI,OACbC,WAAYL,KAAKK,WACjB0B,eAAgB/B,KAAK+B,eACrBvB,UAAWQ,EACXP,gBAAiBT,KAAKS,gBACtBC,WAAYV,KAAKU,WACjBC,kBAAmBX,KAAKW,kBACxBC,cAAeZ,KAAKY,cACpBoB,aAAa,mBACbC,WAAYC,GAASlC,KAAKmC,QAAQD,EAAOlC,KAAKoC,UAC9CC,UAAWH,GAASlC,KAAKmC,QAAQD,EAAOlC,KAAKsC,SAC7CC,oBAAqBL,GAASlC,KAAKmC,QAAQD,EAAOlC,KAAKwC,mBACvDC,uBAAwBP,GAASlC,KAAKmC,QAAQD,EAAOlC,KAAK0C,sBAC1DC,UAAWT,GAASlC,KAAKmC,QAAQD,EAAOlC,KAAK4C,SAC7CC,eAAgBX,IACdA,EAAMY,kBACN9C,KAAKC,KAAOiC,EAAMa,OAClB/C,KAAKgD,aAAaC,KAAKf,EAAMa,OAAO,EAEtCG,eAAgBhB,GAASlC,KAAKmC,QAAQD,EAAOlC,KAAKmD,gB,CAMlD,OAAAhB,CAAWD,EAAuBkB,GACxClB,EAAMY,kBACNM,EAAQH,KAAKf,EAAMa,O","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{T as o,d as s}from"./p-
|
|
1
|
+
import{T as o,d as s}from"./p-MQ36mEgn.js";const t=o;const m=s;export{t as DsTableGroup,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-table-group.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as i,a as r,t as a}from"./index.js";import{A as o,r as d}from"./p-B8ZonS3S.js";import{t as n,n as h}from"./p-CKarsuR2.js";import{t as l,r as c,a as p}from"./p-KBrC9IG4.js";import{A as f}from"./p-etg-Uk1u.js";import{r as m}from"./p-CochmPyg.js";import{T as b}from"./p-BcdHgPi5.js";import{d as u}from"./p-DtLQIMsa.js";import{d as g}from"./p-xHGqrz_p.js";import{d as v}from"./p-C7CZ9pnP.js";import{d as w}from"./p-D_u8WhlU.js";import{d as y}from"./p-QjkufCcn.js";import{d as k}from"./p-Cea7rROU.js";import{d as C}from"./p-FPZbS19l.js";import{d as x}from"./p-0XTyQNRG.js";import{d as j}from"./p-C1_3CVma.js";import{d as E}from"./p-DdspY23v.js";import{d as D}from"./p-DC69DgAR.js";import{d as z}from"./p-beRFLHbB.js";import{d as O}from"./p-UAIxh67Q.js";import{d as P}from"./p-BPhbwXOv.js";import{d as _}from"./p-CLGtPE0K.js";import{d as F}from"./p-BINSI_KF.js";const M=()=>`.sc-ds-table-preferences-h,.sc-ds-table-preferences:where(.ds-table),.sc-ds-table-preferences:where(.tooltip-popup),.sc-ds-table-preferences:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.sc-ds-table-preferences-h{display:inline-flex}.table-preferences.sc-ds-table-preferences{position:fixed;margin:0;padding:0;border:0;border-radius:var(--ds-radius-menu);width:min(var(--dimension-menu-width-lg), calc(100vw - var(--dimension-space-200)));max-height:calc(100dvh - var(--dimension-space-400));display:flex;flex-direction:column;overflow:hidden;background:var(--color-background-primary);color:var(--color-foreground-secondary);box-shadow:var(--effect-shadow-elevated-floating)}.table-preferences.sc-ds-table-preferences::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-floating);pointer-events:none;z-index:4}.table-preferences__tabs.sc-ds-table-preferences{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;flex:0 0 var(--dimension-size-500);min-block-size:var(--dimension-size-500);padding:var(--dimension-space-050);background:var(--color-background-primary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.table-preferences__body.sc-ds-table-preferences{min-height:0;overflow:auto;overscroll-behavior:contain}.sc-ds-table-preferences-h:has(.table-preferences-panel){display:flex;flex:1;min-height:0}.table-preferences-panel.sc-ds-table-preferences{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.table-preferences-panel.sc-ds-table-preferences .table-preferences__tabs.sc-ds-table-preferences{flex:0 0 auto;padding:var(--dimension-space-200)}`;let A=0;const I=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsCustomizeOptionChange=t(this,"dsCustomizeOptionChange",7);this.dsPreferencesTabChange=t(this,"dsPreferencesTabChange",7);this.dsFilterChange=t(this,"dsFilterChange",7);this.dsFilterMatchModeChange=t(this,"dsFilterMatchModeChange",7);this.dsActiveFilterChange=t(this,"dsActiveFilterChange",7);this.dsFiltersClear=t(this,"dsFiltersClear",7);this.dsSortChange=t(this,"dsSortChange",7);this.dsGroupChange=t(this,"dsGroupChange",7);this.dsGroupClear=t(this,"dsGroupClear",7);this.dsColumnsConfigChange=t(this,"dsColumnsConfigChange",7);this.hasBorder=true;this.filters=[];this.values={};this.matchModes={};this.columns=[];this.customizeOptions=[];this.customizeSections=[];this.sort=null;this.groupingOptions=[];this.grouping=null;this.hiddenColumnIds=[];this.columnOrder=[];this.embedded=false;this.activeTab="filters";this.label="Configure view";this.open=false;this.tab="filters";this.pos={x:0,y:0};this.ready=false;this.popupId=`ds-table-preferences-${++A}`;this.position=new o({getAnchor:()=>this.trigger??null,getPopup:()=>this.popup??null,getOwnerDocument:()=>this.el.ownerDocument,measure:(e,s)=>{const t=d(e);const i=m(b.space100,8);s.style.maxWidth=`${Math.max(0,Math.min(window.innerWidth,t?.width??window.innerWidth)-i*2)}px`;s.style.maxHeight=`${Math.max(0,Math.min(window.innerHeight,t?.height??window.innerHeight)-i*2)}px`;return{anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth,popupHeight:s.offsetHeight,side:"bottom",align:"end",sideOffsetPx:m(b.space050,4),alignOffsetPx:0,viewportPadPx:m(b.space100,8),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,collisionRect:t}},apply:({x:e,y:s})=>{this.pos={x:e,y:s}},onReady:()=>{this.ready=true},topLayer:true,observeResize:true,observeAnchorMotion:true,liveUpdate:"double-frame"});this.interaction=new f({getAnchor:()=>this.trigger??null,getPopup:()=>this.popup??null,getOwnerDocument:()=>this.el.ownerDocument,onOutsideActivation:()=>this.close()})}disconnectedCallback(){this.position.unobserve();this.interaction.disconnect()}close(){this.position.unobserve();this.interaction.disconnect();if(this.popup?.matches(":popover-open"))this.popup.hidePopover();this.open=false;void this.trigger?.setFocus()}toggle(){if(this.open){this.close();return}this.open=true;this.ready=false;this.position.observe();this.interaction.connect();this.position.schedule((async()=>{await(this.popup?.querySelector("ds-tab-group")?.componentOnReady?.());requestAnimationFrame((()=>{if(this.open)this.popup?.querySelector('[role="tab"][aria-selected="true"]')?.focus()}))}))}onKeydown(e){if(this.embedded||!this.open||e.defaultPrevented)return;if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.close()}else if(e.key==="Tab"&&this.interaction.tabLeavesPopup(e)){e.preventDefault();this.close();this.interaction.moveFocusAfterTab(e.shiftKey)}}forward(e,s){e.stopPropagation();s.emit(e.detail)}render(){const e=this.embedded?this.activeTab:this.tab;const s=["filters","sort","group","customize"].map((e=>({id:e,label:e==="filters"?"Filters":e[0].toUpperCase()+e.slice(1),panelId:`${this.popupId}-${e}`})));return i(r,{key:"1bc48e74550214ecc1d06eb8b37df4b16b741ad1"},!this.embedded&&i("ds-tooltip",{key:"d0ecd5fd47899508442044b608d150530ed2f71b",label:this.label,side:"bottom",size:"sm"},i("ds-button-unfilled",{key:"3d8d198c13a8d484d0817ba324c74900365109d7",hasBorder:this.hasBorder,ref:e=>{this.trigger=e},variant:"icon",icon:"Preferences",size:"md",ariaLabel:this.label,haspopup:"dialog",expanded:this.open,surfaceOpen:this.open,controls:this.popupId,onDsClick:()=>this.toggle()})),(this.open||this.embedded)&&i("div",{key:"f4d70bd3050ff04fb9043f46092fbc181e5a3d69",ref:e=>{this.popup=e},id:this.popupId,popover:this.embedded?undefined:"manual",role:this.embedded?undefined:"dialog","aria-label":this.label,class:{"table-preferences":!this.embedded,"table-preferences-panel":this.embedded},style:this.embedded?undefined:{left:`${this.pos.x}px`,top:`${this.pos.y}px`,visibility:this.ready?"visible":"hidden"}},i("div",{key:"d4220cd4eef456d0b6c0ad51aec2fd6b6eee9ae6",class:"table-preferences__tabs"},i("ds-tab-group",{key:"e2abb65f1384c17494f9045760e4856ab9e79600",ariaLabel:"Table preference sections",size:"md",presentation:this.embedded?"segmented":"tabs",width:this.embedded?"fill":"hug",tabs:s,value:e,onDsChange:e=>{e.stopPropagation();this.tab=e.detail;this.dsPreferencesTabChange.emit(this.tab)}})),i("div",{key:"5b631d7edf6424b14b6a7689c917882b7a0e718b",class:"table-preferences__body",id:`${this.popupId}-${e}`,role:"tabpanel","aria-label":s.find((s=>s.id===e))?.label},i("div",{key:"7cf452b28e451fc90fb68a4e2e804094208da152",hidden:e!=="filters"},i("ds-filter-menu",{key:"4a6e29619c961f3577cef427e0baf528fe9a20be",embedded:true,vertical:this.embedded,applyRequired:!this.embedded,filters:this.filters,values:this.values,matchModes:this.matchModes,activeFilterId:this.activeFilterId,footerLayout:"categories-clear",onDsChange:e=>this.forward(e,this.dsFilterChange),onDsMatchModeChange:e=>this.forward(e,this.dsFilterMatchModeChange),onDsActiveFilterChange:e=>this.forward(e,this.dsActiveFilterChange),onDsClear:e=>this.forward(e,this.dsFiltersClear)})),e==="sort"&&i("ds-menu",{key:"b7c3f220a888137f46fc51b1dce4c54cb8504774",embedded:true,menuLabel:"Sort table",sections:n(this.sortColumns??this.columns,this.sort),onDsSelect:e=>{e.stopPropagation();this.dsSortChange.emit({sort:h(this.sortColumns??this.columns,this.sort,e.detail)})}}),e==="group"&&i("ds-table-group",{key:"b31df26e2325b4735dbde33eeaac9b4ce2d83f25",embedded:true,vertical:this.embedded,options:this.groupingOptions,grouping:this.grouping,onDsGroupChange:e=>this.forward(e,this.dsGroupChange),onDsClear:e=>this.forward(e,this.dsGroupClear)}),e==="customize"&&i("ds-menu",{key:"b8a555db90c34291ecf5969ee7d5e24c4e4b8045",embedded:true,menuLabel:"Customize table",sections:[...this.columns.length?[{header:this.customizeOptions.length?"Columns":undefined,items:l(this.columns,this.hiddenColumnIds,this.columnOrder)}]:[],...this.customizeSections,...this.customizeOptions.length?[{header:"Options",items:this.customizeOptions}]:[]],onDsSelect:e=>{e.stopPropagation();if(!e.detail.value||e.detail.isInactive)return;if([...this.customizeOptions,...this.customizeSections.flatMap((e=>"items"in e?e.items:[]))].some((s=>s.value===e.detail.value))){this.dsCustomizeOptionChange.emit(e.detail.value);return}this.dsColumnsConfigChange.emit({hiddenColumnIds:p(this.columns,this.hiddenColumnIds,e.detail.value),columnOrder:c(this.columns,this.columnOrder)})},onDsReorder:e=>{e.stopPropagation();this.dsColumnsConfigChange.emit({hiddenColumnIds:this.hiddenColumnIds,columnOrder:e.detail.items.filter((e=>e.reorderable)).map((e=>e.value)).filter(Boolean)})}}))))}get el(){return this}static get style(){return M()}},[2,"ds-table-preferences",{hasBorder:[4,"has-border"],filters:[16],values:[16],matchModes:[16],activeFilterId:[1,"active-filter-id"],columns:[16],customizeOptions:[16],customizeSections:[16],sortColumns:[16],sort:[16],groupingOptions:[16],grouping:[16],hiddenColumnIds:[16],columnOrder:[16],embedded:[4],activeTab:[1,"active-tab"],label:[1],open:[32],tab:[32],pos:[32],ready:[32]},[[0,"keydown","onKeydown"]]]);function R(){if(typeof customElements==="undefined"){return}const e=["ds-table-preferences","ds-badge","ds-button-unfilled","ds-checkbox","ds-empty-state","ds-filter-menu","ds-icon","ds-input","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tab-group","ds-table-group","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-table-preferences":if(!customElements.get(a(e))){customElements.define(a(e),I)}break;case"ds-badge":if(!customElements.get(a(e))){u()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){g()}break;case"ds-checkbox":if(!customElements.get(a(e))){v()}break;case"ds-empty-state":if(!customElements.get(a(e))){w()}break;case"ds-filter-menu":if(!customElements.get(a(e))){y()}break;case"ds-icon":if(!customElements.get(a(e))){k()}break;case"ds-input":if(!customElements.get(a(e))){C()}break;case"ds-loader":if(!customElements.get(a(e))){x()}break;case"ds-menu":if(!customElements.get(a(e))){j()}break;case"ds-swatch-picker":if(!customElements.get(a(e))){E()}break;case"ds-switch":if(!customElements.get(a(e))){D()}break;case"ds-tab-group":if(!customElements.get(a(e))){z()}break;case"ds-table-group":if(!customElements.get(a(e))){O()}break;case"ds-tag":if(!customElements.get(a(e))){P()}break;case"ds-text":if(!customElements.get(a(e))){_()}break;case"ds-tooltip":if(!customElements.get(a(e))){F()}break}}))}R();const B=I;const L=R;export{B as DsTablePreferences,L as defineCustomElement};
|
|
1
|
+
import{p as e,H as s,c as t,h as i,a,t as r}from"./index.js";import{A as o,r as d}from"./p-B8ZonS3S.js";import{t as n,n as h}from"./p-CKarsuR2.js";import{t as l,r as c,a as f}from"./p-KBrC9IG4.js";import{A as p}from"./p-etg-Uk1u.js";import{r as m}from"./p-CochmPyg.js";import{T as u}from"./p-CeXf9-X3.js";import{d as b}from"./p-DBwa1OXP.js";import{d as g}from"./p-BOhpMUwO.js";import{d as v}from"./p-D8rpKod8.js";import{d as k}from"./p-Dryt3COt.js";import{d as y}from"./p-Ds51RgCi.js";import{d as w}from"./p-C0CE2v5D.js";import{d as C}from"./p-DtkLtKY0.js";import{d as x}from"./p-Cea7rROU.js";import{d as j}from"./p-DkikNSSO.js";import{d as E}from"./p-0XTyQNRG.js";import{d as D}from"./p-CQIh2yRP.js";import{d as O}from"./p-BV5T1hzN.js";import{d as z}from"./p-tNQ0YulU.js";import{d as M}from"./p-CaNCGKEJ.js";import{d as P}from"./p-MQ36mEgn.js";import{d as R}from"./p-ji09W9el.js";import{d as B}from"./p-BgLI9JoT.js";import{d as S}from"./p-CbSUyv5B.js";const _=()=>`.sc-ds-table-preferences-h,.sc-ds-table-preferences:where(.ds-table),.sc-ds-table-preferences:where(.tooltip-popup),.sc-ds-table-preferences:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.sc-ds-table-preferences-h{display:inline-flex}.table-preferences.sc-ds-table-preferences{position:fixed;margin:0;padding:0;border:0;border-radius:var(--ds-radius-menu);width:min(var(--dimension-menu-width-lg), calc(100vw - var(--dimension-space-200)));max-height:calc(100dvh - var(--dimension-space-400));display:flex;flex-direction:column;overflow:hidden;background:var(--color-background-primary);color:var(--color-foreground-secondary);box-shadow:var(--effect-shadow-elevated-floating)}.table-preferences.sc-ds-table-preferences::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-floating);pointer-events:none;z-index:4}.table-preferences__tabs.sc-ds-table-preferences{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;flex:0 0 var(--dimension-size-500);min-block-size:var(--dimension-size-500);padding:var(--dimension-space-050);background:var(--color-background-primary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.table-preferences__body.sc-ds-table-preferences{min-height:0;overflow:auto;overscroll-behavior:contain}.sc-ds-table-preferences-h:has(.table-preferences-panel){display:flex;flex:1;min-height:0}.table-preferences-panel.sc-ds-table-preferences{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.table-preferences-panel.sc-ds-table-preferences .table-preferences__tabs.sc-ds-table-preferences{flex:0 0 auto;padding:var(--dimension-space-200)}`;let A=0;const F=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsCustomizeOptionChange=t(this,"dsCustomizeOptionChange",7);this.dsPreferencesTabChange=t(this,"dsPreferencesTabChange",7);this.dsFilterChange=t(this,"dsFilterChange",7);this.dsFilterMatchModeChange=t(this,"dsFilterMatchModeChange",7);this.dsActiveFilterChange=t(this,"dsActiveFilterChange",7);this.dsFiltersClear=t(this,"dsFiltersClear",7);this.dsSortChange=t(this,"dsSortChange",7);this.dsGroupChange=t(this,"dsGroupChange",7);this.dsGroupClear=t(this,"dsGroupClear",7);this.dsColumnsConfigChange=t(this,"dsColumnsConfigChange",7);this.hasBorder=true;this.filters=[];this.values={};this.matchModes={};this.columns=[];this.customizeOptions=[];this.customizeSections=[];this.sort=null;this.groupingOptions=[];this.grouping=null;this.hiddenColumnIds=[];this.columnOrder=[];this.embedded=false;this.activeTab="filters";this.label="Configure view";this.open=false;this.tab="filters";this.pos={x:0,y:0};this.ready=false;this.popupId=`ds-table-preferences-${++A}`;this.position=new o({getAnchor:()=>this.trigger??null,getPopup:()=>this.popup??null,getOwnerDocument:()=>this.el.ownerDocument,measure:(e,s)=>{const t=d(e);const i=m(u.space100,8);s.style.maxWidth=`${Math.max(0,Math.min(window.innerWidth,t?.width??window.innerWidth)-i*2)}px`;s.style.maxHeight=`${Math.max(0,Math.min(window.innerHeight,t?.height??window.innerHeight)-i*2)}px`;return{anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth,popupHeight:s.offsetHeight,side:"bottom",align:"end",sideOffsetPx:m(u.space050,4),alignOffsetPx:0,viewportPadPx:m(u.space100,8),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,collisionRect:t}},apply:({x:e,y:s})=>{this.pos={x:e,y:s}},onReady:()=>{this.ready=true},topLayer:true,observeResize:true,observeAnchorMotion:true,liveUpdate:"double-frame"});this.interaction=new p({getAnchor:()=>this.trigger??null,getPopup:()=>this.popup??null,getOwnerDocument:()=>this.el.ownerDocument,onOutsideActivation:()=>this.close()})}disconnectedCallback(){this.position.unobserve();this.interaction.disconnect()}close(){this.position.unobserve();this.interaction.disconnect();if(this.popup?.matches(":popover-open"))this.popup.hidePopover();this.open=false;void this.trigger?.setFocus()}toggle(){if(this.open){this.close();return}this.open=true;this.ready=false;this.position.observe();this.interaction.connect();this.position.schedule((async()=>{await(this.popup?.querySelector("ds-tab-group")?.componentOnReady?.());requestAnimationFrame((()=>{if(this.open)this.popup?.querySelector('[role="tab"][aria-selected="true"]')?.focus()}))}))}onKeydown(e){if(this.embedded||!this.open||e.defaultPrevented)return;if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.close()}else if(e.key==="Tab"&&this.interaction.tabLeavesPopup(e)){e.preventDefault();this.close();this.interaction.moveFocusAfterTab(e.shiftKey)}}forward(e,s){e.stopPropagation();s.emit(e.detail)}render(){const e=this.embedded?this.activeTab:this.tab;const s=["filters","sort","group","customize"].map((e=>({id:e,label:e==="filters"?"Filters":e[0].toUpperCase()+e.slice(1),panelId:`${this.popupId}-${e}`})));return i(a,{key:"8c5766c2c94b0c6199280f7d78cf97473688582d"},!this.embedded&&i("ds-tooltip",{key:"a47a74a041b141d100c332919bd15e04ba10272d",label:this.label,side:"bottom",size:"sm"},i("ds-button-unfilled",{key:"310a59cd435f271cf1ad2d0be1aae2805d57bfa4",hasBorder:this.hasBorder,ref:e=>{this.trigger=e},variant:"icon",icon:"Preferences",size:"md",ariaLabel:this.label,haspopup:"dialog",expanded:this.open,surfaceOpen:this.open,controls:this.popupId,onDsClick:()=>this.toggle()})),(this.open||this.embedded)&&i("div",{key:"48cf895c4681f6a4bb3688f74f9764c709d0c13c",ref:e=>{this.popup=e},id:this.popupId,popover:this.embedded?undefined:"manual",role:this.embedded?undefined:"dialog","aria-label":this.label,class:{"table-preferences":!this.embedded,"table-preferences-panel":this.embedded},style:this.embedded?undefined:{left:`${this.pos.x}px`,top:`${this.pos.y}px`,visibility:this.ready?"visible":"hidden"}},i("div",{key:"d5b1affdae12dbe6105db7589e644563865992aa",class:"table-preferences__tabs"},i("ds-tab-group",{key:"6ab6c93e94085884e0fb498548a0256b7ab4a727",ariaLabel:"Table preference sections",size:"md",presentation:this.embedded?"segmented":"tabs",width:this.embedded?"fill":"hug",tabs:s,value:e,onDsChange:e=>{e.stopPropagation();this.tab=e.detail;this.dsPreferencesTabChange.emit(this.tab)}})),i("div",{key:"54a6bb10b56cf65a06a7a01de46ed704f2cd3fc6",class:"table-preferences__body",id:`${this.popupId}-${e}`,role:"tabpanel","aria-label":s.find((s=>s.id===e))?.label},i("div",{key:"838284b4353e18fbf70303afe4c0c4b29f982b09",hidden:e!=="filters"},i("ds-filter-menu",{key:"c2fe42ab73f521ad82066cfcfea0603a006bb02b",embedded:true,vertical:this.embedded,applyRequired:!this.embedded,filters:this.filters,values:this.values,matchModes:this.matchModes,activeFilterId:this.activeFilterId,footerLayout:"categories-clear",onDsChange:e=>this.forward(e,this.dsFilterChange),onDsMatchModeChange:e=>this.forward(e,this.dsFilterMatchModeChange),onDsActiveFilterChange:e=>this.forward(e,this.dsActiveFilterChange),onDsClear:e=>this.forward(e,this.dsFiltersClear)})),e==="sort"&&i("ds-menu",{key:"0fa114b755792784ea28f450a668103da457964d",embedded:true,menuLabel:"Sort table",sections:n(this.sortColumns??this.columns,this.sort),onDsSelect:e=>{e.stopPropagation();this.dsSortChange.emit({sort:h(this.sortColumns??this.columns,this.sort,e.detail)})}}),e==="group"&&i("ds-table-group",{key:"1d7fe2a2a7e5bb648c6e6a1be921a62c7d8f04ae",embedded:true,vertical:this.embedded,options:this.groupingOptions,grouping:this.grouping,onDsGroupChange:e=>this.forward(e,this.dsGroupChange),onDsClear:e=>this.forward(e,this.dsGroupClear)}),e==="customize"&&i("ds-menu",{key:"ec05cda6c67dae8e2d761d5ea53e73fbf1aa2264",embedded:true,menuLabel:"Customize table",sections:[...this.columns.length?[{header:this.customizeOptions.length?"Columns":undefined,items:l(this.columns,this.hiddenColumnIds,this.columnOrder)}]:[],...this.customizeSections,...this.customizeOptions.length?[{header:"Options",items:this.customizeOptions}]:[]],onDsSelect:e=>{e.stopPropagation();if(!e.detail.value||e.detail.isInactive)return;if([...this.customizeOptions,...this.customizeSections.flatMap((e=>"items"in e?e.items:[]))].some((s=>s.value===e.detail.value))){this.dsCustomizeOptionChange.emit(e.detail.value);return}this.dsColumnsConfigChange.emit({hiddenColumnIds:f(this.columns,this.hiddenColumnIds,e.detail.value),columnOrder:c(this.columns,this.columnOrder)})},onDsReorder:e=>{e.stopPropagation();this.dsColumnsConfigChange.emit({hiddenColumnIds:this.hiddenColumnIds,columnOrder:e.detail.items.filter((e=>e.reorderable)).map((e=>e.value)).filter(Boolean)})}}))))}get el(){return this}static get style(){return _()}},[2,"ds-table-preferences",{hasBorder:[4,"has-border"],filters:[16],values:[16],matchModes:[16],activeFilterId:[1,"active-filter-id"],columns:[16],customizeOptions:[16],customizeSections:[16],sortColumns:[16],sort:[16],groupingOptions:[16],grouping:[16],hiddenColumnIds:[16],columnOrder:[16],embedded:[4],activeTab:[1,"active-tab"],label:[1],open:[32],tab:[32],pos:[32],ready:[32]},[[0,"keydown","onKeydown"]]]);function I(){if(typeof customElements==="undefined"){return}const e=["ds-table-preferences","ds-badge","ds-button-unfilled","ds-calendar","ds-checkbox","ds-divider","ds-empty-state","ds-filter-menu","ds-icon","ds-input","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tab-group","ds-table-group","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-table-preferences":if(!customElements.get(r(e))){customElements.define(r(e),F)}break;case"ds-badge":if(!customElements.get(r(e))){b()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){g()}break;case"ds-calendar":if(!customElements.get(r(e))){v()}break;case"ds-checkbox":if(!customElements.get(r(e))){k()}break;case"ds-divider":if(!customElements.get(r(e))){y()}break;case"ds-empty-state":if(!customElements.get(r(e))){w()}break;case"ds-filter-menu":if(!customElements.get(r(e))){C()}break;case"ds-icon":if(!customElements.get(r(e))){x()}break;case"ds-input":if(!customElements.get(r(e))){j()}break;case"ds-loader":if(!customElements.get(r(e))){E()}break;case"ds-menu":if(!customElements.get(r(e))){D()}break;case"ds-swatch-picker":if(!customElements.get(r(e))){O()}break;case"ds-switch":if(!customElements.get(r(e))){z()}break;case"ds-tab-group":if(!customElements.get(r(e))){M()}break;case"ds-table-group":if(!customElements.get(r(e))){P()}break;case"ds-tag":if(!customElements.get(r(e))){R()}break;case"ds-text":if(!customElements.get(r(e))){B()}break;case"ds-tooltip":if(!customElements.get(r(e))){S()}break}}))}I();const $=F;const L=I;export{$ as DsTablePreferences,L as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-table-preferences.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tablePreferencesCss","preferencesSequence","TablePreferences","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasBorder","filters","values","matchModes","columns","customizeOptions","customizeSections","sort","groupingOptions","grouping","hiddenColumnIds","columnOrder","embedded","activeTab","label","open","tab","pos","x","y","ready","popupId","position","AnchoredPositionController","getAnchor","trigger","getPopup","popup","getOwnerDocument","el","ownerDocument","measure","anchor","collisionRect","resolveAnchoredOverlayBoundaryRect","pad","resolveCssLengthPx","TOKEN_DEFAULTS","space100","style","maxWidth","Math","max","min","window","innerWidth","width","maxHeight","innerHeight","height","anchorRect","getBoundingClientRect","popupWidth","offsetWidth","popupHeight","offsetHeight","side","align","sideOffsetPx","space050","alignOffsetPx","viewportPadPx","viewportWidth","viewportHeight","apply","onReady","topLayer","observeResize","observeAnchorMotion","liveUpdate","interaction","AnchoredOverlayInteractionController","onOutsideActivation","close","disconnectedCallback","unobserve","disconnect","matches","hidePopover","setFocus","toggle","observe","connect","schedule","async","querySelector","componentOnReady","requestAnimationFrame","focus","onKeydown","event","defaultPrevented","key","preventDefault","stopPropagation","tabLeavesPopup","moveFocusAfterTab","shiftKey","forward","emitter","emit","detail","render","currentTab","tabs","map","id","toUpperCase","slice","panelId","h","Host","size","ref","variant","icon","ariaLabel","haspopup","expanded","surfaceOpen","controls","onDsClick","popover","undefined","role","class","left","top","visibility","presentation","value","onDsChange","dsPreferencesTabChange","find","hidden","vertical","applyRequired","activeFilterId","footerLayout","e","dsFilterChange","onDsMatchModeChange","dsFilterMatchModeChange","onDsActiveFilterChange","dsActiveFilterChange","onDsClear","dsFiltersClear","menuLabel","sections","tableSortMenuSections","sortColumns","onDsSelect","dsSortChange","nextTableSortStateFromMenuItem","options","onDsGroupChange","dsGroupChange","dsGroupClear","length","header","items","tableColumnCustomizerMenuItems","isInactive","flatMap","section","some","option","dsCustomizeOptionChange","dsColumnsConfigChange","toggleTableColumnHidden","resolveTableColumnOrder","onDsReorder","filter","item","reorderable","Boolean"],"sources":["src/wc/components/TablePreferences/TablePreferences.css?tag=ds-table-preferences&encapsulation=scoped","src/wc/components/TablePreferences/TablePreferences.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n\n:host {\n display: inline-flex;\n}\n\n.table-preferences {\n position: fixed;\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: var(--ds-radius-menu);\n width: min(var(--dimension-menu-width-lg), calc(100vw - var(--dimension-space-200)));\n max-height: calc(100dvh - var(--dimension-space-400));\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--color-background-primary);\n color: var(--color-foreground-secondary);\n box-shadow: var(--effect-shadow-elevated-floating);\n}\n\n.table-preferences::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n box-shadow: var(--effect-highlight-elevated-floating);\n pointer-events: none;\n z-index: 4;\n}\n\n.table-preferences__tabs {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n flex: 0 0 var(--dimension-size-500);\n min-block-size: var(--dimension-size-500);\n padding: var(--dimension-space-050);\n background: var(--color-background-primary);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.table-preferences__body {\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n}\n\n:host:has(.table-preferences-panel) {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n.table-preferences-panel {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n min-width: 0;\n}\n.table-preferences-panel .table-preferences__tabs {\n flex: 0 0 auto;\n padding: var(--dimension-space-200);\n}\n","import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport type {\n FilterMenuFilter,\n FilterMenuValues,\n FilterMenuMatchModes,\n FilterMenuChangeDetail,\n FilterMenuMatchModeChangeDetail,\n} from '../FilterMenu/FilterMenu';\nimport type {\n TableColumn,\n TableSortState,\n TableSortChangeDetail,\n TableGroupingState,\n TableColumnsConfigChangeDetail,\n} from '../Table/table-types';\nimport type { TableGroupOption } from '../TableGroup/TableGroup';\nimport {\n tableSortMenuSections,\n nextTableSortStateFromMenuItem,\n} from '../TableSort/table-sort-menu';\nimport {\n tableColumnCustomizerMenuItems,\n toggleTableColumnHidden,\n resolveTableColumnOrder,\n} from '../Table/table-column-customizer';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport { TOKEN_DEFAULTS } from '../../utils/token-defaults';\n\nexport type PreferencesTab = 'filters' | 'sort' | 'group' | 'customize';\nlet preferencesSequence = 0;\n\n@Component({ tag: 'ds-table-preferences', styleUrl: 'TablePreferences.css', scoped: true })\nexport class TablePreferences {\n @Element() el!: HTMLElement;\n /** Show the trigger border. */\n @Prop() hasBorder: boolean = true;\n @Prop() filters: FilterMenuFilter[] = [];\n @Prop() values: FilterMenuValues = {};\n @Prop() matchModes: FilterMenuMatchModes = {};\n @Prop() activeFilterId: string | undefined;\n @Prop() columns: TableColumn[] = [];\n /** Additional toggle options in the column customizer. */\n @Prop() customizeOptions: MenuItemData[] = [];\n @Prop() customizeSections: MenuSection[] = [];\n @Event() dsCustomizeOptionChange!: EventEmitter<string>;\n /** Optional sort fields when they differ from customizable content. */\n @Prop() sortColumns?: TableColumn[];\n @Prop() sort: TableSortState | null = null;\n @Prop() groupingOptions: TableGroupOption[] = [];\n @Prop() grouping: TableGroupingState | null = null;\n @Prop() hiddenColumnIds: string[] = [];\n @Prop() columnOrder: string[] = [];\n /** Render shared content without its popup or trigger. */\n @Prop() embedded = false;\n @Prop() activeTab: PreferencesTab = 'filters';\n @Event() dsPreferencesTabChange!: EventEmitter<PreferencesTab>;\n @Prop() label = 'Configure view';\n @Event() dsFilterChange!: EventEmitter<FilterMenuChangeDetail>;\n @Event() dsFilterMatchModeChange!: EventEmitter<FilterMenuMatchModeChangeDetail>;\n @Event() dsActiveFilterChange!: EventEmitter<string>;\n @Event() dsFiltersClear!: EventEmitter<void>;\n @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n @Event() dsGroupChange!: EventEmitter<TableGroupingState>;\n @Event() dsGroupClear!: EventEmitter<void>;\n @Event() dsColumnsConfigChange!: EventEmitter<TableColumnsConfigChangeDetail>;\n @State() private open = false;\n @State() private tab: PreferencesTab = 'filters';\n @State() private pos = { x: 0, y: 0 };\n @State() private ready = false;\n private readonly popupId = `ds-table-preferences-${++preferencesSequence}`;\n private trigger?: HTMLDsButtonUnfilledElement;\n private popup?: HTMLElement;\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.trigger ?? null,\n getPopup: () => this.popup ?? null,\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n const collisionRect = resolveAnchoredOverlayBoundaryRect(anchor);\n const pad = resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8);\n popup.style.maxWidth = `${Math.max(0, Math.min(window.innerWidth, collisionRect?.width ?? window.innerWidth) - pad * 2)}px`;\n popup.style.maxHeight = `${Math.max(0, Math.min(window.innerHeight, collisionRect?.height ?? window.innerHeight) - pad * 2)}px`;\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth,\n popupHeight: popup.offsetHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, 4),\n alignOffsetPx: 0,\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect,\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.ready = true;\n },\n topLayer: true,\n observeResize: true,\n observeAnchorMotion: true,\n liveUpdate: 'double-frame',\n });\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.trigger ?? null,\n getPopup: () => this.popup ?? null,\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.close(),\n });\n disconnectedCallback() {\n this.position.unobserve();\n this.interaction.disconnect();\n }\n private close() {\n this.position.unobserve();\n this.interaction.disconnect();\n if (this.popup?.matches(':popover-open')) this.popup.hidePopover();\n this.open = false;\n void this.trigger?.setFocus();\n }\n private toggle() {\n if (this.open) {\n this.close();\n return;\n }\n this.open = true;\n this.ready = false;\n this.position.observe();\n this.interaction.connect();\n this.position.schedule(async () => {\n await this.popup?.querySelector('ds-tab-group')?.componentOnReady?.();\n requestAnimationFrame(() => {\n if (this.open)\n this.popup?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')?.focus();\n });\n });\n }\n @Listen('keydown')\n onKeydown(event: KeyboardEvent) {\n if (this.embedded || !this.open || event.defaultPrevented) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n this.close();\n } else if (event.key === 'Tab' && this.interaction.tabLeavesPopup(event)) {\n event.preventDefault();\n this.close();\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n }\n private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>) {\n event.stopPropagation();\n emitter.emit(event.detail);\n }\n render() {\n const currentTab = this.embedded ? this.activeTab : this.tab;\n const tabs = ['filters', 'sort', 'group', 'customize'].map(id => ({\n id,\n label: id === 'filters' ? 'Filters' : id[0].toUpperCase() + id.slice(1),\n panelId: `${this.popupId}-${id}`,\n }));\n return (\n <Host>\n {!this.embedded && (\n <ds-tooltip label={this.label} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n hasBorder={this.hasBorder}\n ref={el => {\n this.trigger = el;\n }}\n variant=\"icon\"\n icon=\"Preferences\"\n size=\"md\"\n ariaLabel={this.label}\n haspopup=\"dialog\"\n expanded={this.open}\n surfaceOpen={this.open}\n controls={this.popupId}\n onDsClick={() => this.toggle()}\n />\n </ds-tooltip>\n )}\n {(this.open || this.embedded) && (\n <div\n ref={el => {\n this.popup = el;\n }}\n id={this.popupId}\n popover={this.embedded ? undefined : 'manual'}\n role={this.embedded ? undefined : 'dialog'}\n aria-label={this.label}\n class={{\n 'table-preferences': !this.embedded,\n 'table-preferences-panel': this.embedded,\n }}\n style={\n this.embedded\n ? undefined\n : {\n left: `${this.pos.x}px`,\n top: `${this.pos.y}px`,\n visibility: this.ready ? 'visible' : 'hidden',\n }\n }\n >\n <div class=\"table-preferences__tabs\">\n <ds-tab-group\n ariaLabel=\"Table preference sections\"\n size=\"md\"\n presentation={this.embedded ? 'segmented' : 'tabs'}\n width={this.embedded ? 'fill' : 'hug'}\n tabs={tabs}\n value={currentTab}\n onDsChange={event => {\n event.stopPropagation();\n this.tab = event.detail as PreferencesTab;\n this.dsPreferencesTabChange.emit(this.tab);\n }}\n />\n </div>\n <div\n class=\"table-preferences__body\"\n id={`${this.popupId}-${currentTab}`}\n role=\"tabpanel\"\n aria-label={tabs.find(tab => tab.id === currentTab)?.label}\n >\n <div hidden={currentTab !== 'filters'}>\n <ds-filter-menu\n embedded\n vertical={this.embedded}\n applyRequired={!this.embedded}\n filters={this.filters}\n values={this.values}\n matchModes={this.matchModes}\n activeFilterId={this.activeFilterId}\n footerLayout=\"categories-clear\"\n onDsChange={e => this.forward(e, this.dsFilterChange)}\n onDsMatchModeChange={e => this.forward(e, this.dsFilterMatchModeChange)}\n onDsActiveFilterChange={e => this.forward(e, this.dsActiveFilterChange)}\n onDsClear={e => this.forward(e, this.dsFiltersClear)}\n />\n </div>\n {currentTab === 'sort' && (\n <ds-menu\n embedded\n menuLabel=\"Sort table\"\n sections={tableSortMenuSections(this.sortColumns ?? this.columns, this.sort)}\n onDsSelect={e => {\n e.stopPropagation();\n this.dsSortChange.emit({\n sort: nextTableSortStateFromMenuItem(\n this.sortColumns ?? this.columns,\n this.sort,\n e.detail\n ),\n });\n }}\n />\n )}\n {currentTab === 'group' && (\n <ds-table-group\n embedded\n vertical={this.embedded}\n options={this.groupingOptions}\n grouping={this.grouping}\n onDsGroupChange={e => this.forward(e, this.dsGroupChange)}\n onDsClear={e => this.forward(e, this.dsGroupClear)}\n />\n )}\n {currentTab === 'customize' && (\n <ds-menu\n embedded\n menuLabel=\"Customize table\"\n sections={[\n ...(this.columns.length\n ? [\n {\n header: this.customizeOptions.length ? 'Columns' : undefined,\n items: tableColumnCustomizerMenuItems(\n this.columns,\n this.hiddenColumnIds,\n this.columnOrder\n ),\n },\n ]\n : []),\n ...this.customizeSections,\n ...(this.customizeOptions.length\n ? [{ header: 'Options', items: this.customizeOptions }]\n : []),\n ]}\n onDsSelect={e => {\n e.stopPropagation();\n if (!e.detail.value || e.detail.isInactive) return;\n if (\n [\n ...this.customizeOptions,\n ...this.customizeSections.flatMap(section =>\n 'items' in section ? section.items : []\n ),\n ].some(option => option.value === e.detail.value)\n ) {\n this.dsCustomizeOptionChange.emit(e.detail.value);\n return;\n }\n this.dsColumnsConfigChange.emit({\n hiddenColumnIds: toggleTableColumnHidden(\n this.columns,\n this.hiddenColumnIds,\n e.detail.value\n ),\n columnOrder: resolveTableColumnOrder(this.columns, this.columnOrder),\n });\n }}\n onDsReorder={e => {\n e.stopPropagation();\n this.dsColumnsConfigChange.emit({\n hiddenColumnIds: this.hiddenColumnIds,\n columnOrder: e.detail.items\n .filter(item => item.reorderable)\n .map(item => item.value!)\n .filter(Boolean),\n });\n }}\n />\n )}\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["tablePreferencesCss","preferencesSequence","TablePreferences","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasBorder","filters","values","matchModes","columns","customizeOptions","customizeSections","sort","groupingOptions","grouping","hiddenColumnIds","columnOrder","embedded","activeTab","label","open","tab","pos","x","y","ready","popupId","position","AnchoredPositionController","getAnchor","trigger","getPopup","popup","getOwnerDocument","el","ownerDocument","measure","anchor","collisionRect","resolveAnchoredOverlayBoundaryRect","pad","resolveCssLengthPx","TOKEN_DEFAULTS","space100","style","maxWidth","Math","max","min","window","innerWidth","width","maxHeight","innerHeight","height","anchorRect","getBoundingClientRect","popupWidth","offsetWidth","popupHeight","offsetHeight","side","align","sideOffsetPx","space050","alignOffsetPx","viewportPadPx","viewportWidth","viewportHeight","apply","onReady","topLayer","observeResize","observeAnchorMotion","liveUpdate","interaction","AnchoredOverlayInteractionController","onOutsideActivation","close","disconnectedCallback","unobserve","disconnect","matches","hidePopover","setFocus","toggle","observe","connect","schedule","async","querySelector","componentOnReady","requestAnimationFrame","focus","onKeydown","event","defaultPrevented","key","preventDefault","stopPropagation","tabLeavesPopup","moveFocusAfterTab","shiftKey","forward","emitter","emit","detail","render","currentTab","tabs","map","id","toUpperCase","slice","panelId","h","Host","size","ref","variant","icon","ariaLabel","haspopup","expanded","surfaceOpen","controls","onDsClick","popover","undefined","role","class","left","top","visibility","presentation","value","onDsChange","dsPreferencesTabChange","find","hidden","vertical","applyRequired","activeFilterId","footerLayout","e","dsFilterChange","onDsMatchModeChange","dsFilterMatchModeChange","onDsActiveFilterChange","dsActiveFilterChange","onDsClear","dsFiltersClear","menuLabel","sections","tableSortMenuSections","sortColumns","onDsSelect","dsSortChange","nextTableSortStateFromMenuItem","options","onDsGroupChange","dsGroupChange","dsGroupClear","length","header","items","tableColumnCustomizerMenuItems","isInactive","flatMap","section","some","option","dsCustomizeOptionChange","dsColumnsConfigChange","toggleTableColumnHidden","resolveTableColumnOrder","onDsReorder","filter","item","reorderable","Boolean"],"sources":["src/wc/components/TablePreferences/TablePreferences.css?tag=ds-table-preferences&encapsulation=scoped","src/wc/components/TablePreferences/TablePreferences.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n\n:host {\n display: inline-flex;\n}\n\n.table-preferences {\n position: fixed;\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: var(--ds-radius-menu);\n width: min(var(--dimension-menu-width-lg), calc(100vw - var(--dimension-space-200)));\n max-height: calc(100dvh - var(--dimension-space-400));\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--color-background-primary);\n color: var(--color-foreground-secondary);\n box-shadow: var(--effect-shadow-elevated-floating);\n}\n\n.table-preferences::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n box-shadow: var(--effect-highlight-elevated-floating);\n pointer-events: none;\n z-index: 4;\n}\n\n.table-preferences__tabs {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n flex: 0 0 var(--dimension-size-500);\n min-block-size: var(--dimension-size-500);\n padding: var(--dimension-space-050);\n background: var(--color-background-primary);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.table-preferences__body {\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n}\n\n:host:has(.table-preferences-panel) {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n.table-preferences-panel {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n min-width: 0;\n}\n.table-preferences-panel .table-preferences__tabs {\n flex: 0 0 auto;\n padding: var(--dimension-space-200);\n}\n","import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport type {\n FilterMenuFilter,\n FilterMenuValues,\n FilterMenuMatchModes,\n FilterMenuChangeDetail,\n FilterMenuMatchModeChangeDetail,\n} from '../FilterMenu/FilterMenu';\nimport type {\n TableColumn,\n TableSortState,\n TableSortChangeDetail,\n TableGroupingState,\n TableColumnsConfigChangeDetail,\n} from '../Table/table-types';\nimport type { TableGroupOption } from '../TableGroup/TableGroup';\nimport {\n tableSortMenuSections,\n nextTableSortStateFromMenuItem,\n} from '../TableSort/table-sort-menu';\nimport {\n tableColumnCustomizerMenuItems,\n toggleTableColumnHidden,\n resolveTableColumnOrder,\n} from '../Table/table-column-customizer';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport { TOKEN_DEFAULTS } from '../../utils/token-defaults';\n\nexport type PreferencesTab = 'filters' | 'sort' | 'group' | 'customize';\nlet preferencesSequence = 0;\n\n@Component({ tag: 'ds-table-preferences', styleUrl: 'TablePreferences.css', scoped: true })\nexport class TablePreferences {\n @Element() el!: HTMLElement;\n /** Show the trigger border. */\n @Prop() hasBorder: boolean = true;\n @Prop() filters: FilterMenuFilter[] = [];\n @Prop() values: FilterMenuValues = {};\n @Prop() matchModes: FilterMenuMatchModes = {};\n @Prop() activeFilterId: string | undefined;\n @Prop() columns: TableColumn[] = [];\n /** Additional toggle options in the column customizer. */\n @Prop() customizeOptions: MenuItemData[] = [];\n @Prop() customizeSections: MenuSection[] = [];\n @Event() dsCustomizeOptionChange!: EventEmitter<string>;\n /** Optional sort fields when they differ from customizable content. */\n @Prop() sortColumns?: TableColumn[];\n @Prop() sort: TableSortState | null = null;\n @Prop() groupingOptions: TableGroupOption[] = [];\n @Prop() grouping: TableGroupingState | null = null;\n @Prop() hiddenColumnIds: string[] = [];\n @Prop() columnOrder: string[] = [];\n /** Render shared content without its popup or trigger. */\n @Prop() embedded = false;\n @Prop() activeTab: PreferencesTab = 'filters';\n @Event() dsPreferencesTabChange!: EventEmitter<PreferencesTab>;\n @Prop() label = 'Configure view';\n @Event() dsFilterChange!: EventEmitter<FilterMenuChangeDetail>;\n @Event() dsFilterMatchModeChange!: EventEmitter<FilterMenuMatchModeChangeDetail>;\n @Event() dsActiveFilterChange!: EventEmitter<string>;\n @Event() dsFiltersClear!: EventEmitter<void>;\n @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n @Event() dsGroupChange!: EventEmitter<TableGroupingState>;\n @Event() dsGroupClear!: EventEmitter<void>;\n @Event() dsColumnsConfigChange!: EventEmitter<TableColumnsConfigChangeDetail>;\n @State() private open = false;\n @State() private tab: PreferencesTab = 'filters';\n @State() private pos = { x: 0, y: 0 };\n @State() private ready = false;\n private readonly popupId = `ds-table-preferences-${++preferencesSequence}`;\n private trigger?: HTMLDsButtonUnfilledElement;\n private popup?: HTMLElement;\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.trigger ?? null,\n getPopup: () => this.popup ?? null,\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n const collisionRect = resolveAnchoredOverlayBoundaryRect(anchor);\n const pad = resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8);\n popup.style.maxWidth = `${Math.max(0, Math.min(window.innerWidth, collisionRect?.width ?? window.innerWidth) - pad * 2)}px`;\n popup.style.maxHeight = `${Math.max(0, Math.min(window.innerHeight, collisionRect?.height ?? window.innerHeight) - pad * 2)}px`;\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth,\n popupHeight: popup.offsetHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, 4),\n alignOffsetPx: 0,\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect,\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.ready = true;\n },\n topLayer: true,\n observeResize: true,\n observeAnchorMotion: true,\n liveUpdate: 'double-frame',\n });\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.trigger ?? null,\n getPopup: () => this.popup ?? null,\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.close(),\n });\n disconnectedCallback() {\n this.position.unobserve();\n this.interaction.disconnect();\n }\n private close() {\n this.position.unobserve();\n this.interaction.disconnect();\n if (this.popup?.matches(':popover-open')) this.popup.hidePopover();\n this.open = false;\n void this.trigger?.setFocus();\n }\n private toggle() {\n if (this.open) {\n this.close();\n return;\n }\n this.open = true;\n this.ready = false;\n this.position.observe();\n this.interaction.connect();\n this.position.schedule(async () => {\n await this.popup?.querySelector('ds-tab-group')?.componentOnReady?.();\n requestAnimationFrame(() => {\n if (this.open)\n this.popup?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')?.focus();\n });\n });\n }\n @Listen('keydown')\n onKeydown(event: KeyboardEvent) {\n if (this.embedded || !this.open || event.defaultPrevented) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n this.close();\n } else if (event.key === 'Tab' && this.interaction.tabLeavesPopup(event)) {\n event.preventDefault();\n this.close();\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n }\n private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>) {\n event.stopPropagation();\n emitter.emit(event.detail);\n }\n render() {\n const currentTab = this.embedded ? this.activeTab : this.tab;\n const tabs = ['filters', 'sort', 'group', 'customize'].map(id => ({\n id,\n label: id === 'filters' ? 'Filters' : id[0].toUpperCase() + id.slice(1),\n panelId: `${this.popupId}-${id}`,\n }));\n return (\n <Host>\n {!this.embedded && (\n <ds-tooltip label={this.label} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n hasBorder={this.hasBorder}\n ref={el => {\n this.trigger = el;\n }}\n variant=\"icon\"\n icon=\"Preferences\"\n size=\"md\"\n ariaLabel={this.label}\n haspopup=\"dialog\"\n expanded={this.open}\n surfaceOpen={this.open}\n controls={this.popupId}\n onDsClick={() => this.toggle()}\n />\n </ds-tooltip>\n )}\n {(this.open || this.embedded) && (\n <div\n ref={el => {\n this.popup = el;\n }}\n id={this.popupId}\n popover={this.embedded ? undefined : 'manual'}\n role={this.embedded ? undefined : 'dialog'}\n aria-label={this.label}\n class={{\n 'table-preferences': !this.embedded,\n 'table-preferences-panel': this.embedded,\n }}\n style={\n this.embedded\n ? undefined\n : {\n left: `${this.pos.x}px`,\n top: `${this.pos.y}px`,\n visibility: this.ready ? 'visible' : 'hidden',\n }\n }\n >\n <div class=\"table-preferences__tabs\">\n <ds-tab-group\n ariaLabel=\"Table preference sections\"\n size=\"md\"\n presentation={this.embedded ? 'segmented' : 'tabs'}\n width={this.embedded ? 'fill' : 'hug'}\n tabs={tabs}\n value={currentTab}\n onDsChange={event => {\n event.stopPropagation();\n this.tab = event.detail as PreferencesTab;\n this.dsPreferencesTabChange.emit(this.tab);\n }}\n />\n </div>\n <div\n class=\"table-preferences__body\"\n id={`${this.popupId}-${currentTab}`}\n role=\"tabpanel\"\n aria-label={tabs.find(tab => tab.id === currentTab)?.label}\n >\n <div hidden={currentTab !== 'filters'}>\n <ds-filter-menu\n embedded\n vertical={this.embedded}\n applyRequired={!this.embedded}\n filters={this.filters}\n values={this.values}\n matchModes={this.matchModes}\n activeFilterId={this.activeFilterId}\n footerLayout=\"categories-clear\"\n onDsChange={e => this.forward(e, this.dsFilterChange)}\n onDsMatchModeChange={e => this.forward(e, this.dsFilterMatchModeChange)}\n onDsActiveFilterChange={e => this.forward(e, this.dsActiveFilterChange)}\n onDsClear={e => this.forward(e, this.dsFiltersClear)}\n />\n </div>\n {currentTab === 'sort' && (\n <ds-menu\n embedded\n menuLabel=\"Sort table\"\n sections={tableSortMenuSections(this.sortColumns ?? this.columns, this.sort)}\n onDsSelect={e => {\n e.stopPropagation();\n this.dsSortChange.emit({\n sort: nextTableSortStateFromMenuItem(\n this.sortColumns ?? this.columns,\n this.sort,\n e.detail\n ),\n });\n }}\n />\n )}\n {currentTab === 'group' && (\n <ds-table-group\n embedded\n vertical={this.embedded}\n options={this.groupingOptions}\n grouping={this.grouping}\n onDsGroupChange={e => this.forward(e, this.dsGroupChange)}\n onDsClear={e => this.forward(e, this.dsGroupClear)}\n />\n )}\n {currentTab === 'customize' && (\n <ds-menu\n embedded\n menuLabel=\"Customize table\"\n sections={[\n ...(this.columns.length\n ? [\n {\n header: this.customizeOptions.length ? 'Columns' : undefined,\n items: tableColumnCustomizerMenuItems(\n this.columns,\n this.hiddenColumnIds,\n this.columnOrder\n ),\n },\n ]\n : []),\n ...this.customizeSections,\n ...(this.customizeOptions.length\n ? [{ header: 'Options', items: this.customizeOptions }]\n : []),\n ]}\n onDsSelect={e => {\n e.stopPropagation();\n if (!e.detail.value || e.detail.isInactive) return;\n if (\n [\n ...this.customizeOptions,\n ...this.customizeSections.flatMap(section =>\n 'items' in section ? section.items : []\n ),\n ].some(option => option.value === e.detail.value)\n ) {\n this.dsCustomizeOptionChange.emit(e.detail.value);\n return;\n }\n this.dsColumnsConfigChange.emit({\n hiddenColumnIds: toggleTableColumnHidden(\n this.columns,\n this.hiddenColumnIds,\n e.detail.value\n ),\n columnOrder: resolveTableColumnOrder(this.columns, this.columnOrder),\n });\n }}\n onDsReorder={e => {\n e.stopPropagation();\n this.dsColumnsConfigChange.emit({\n hiddenColumnIds: this.hiddenColumnIds,\n columnOrder: e.detail.items\n .filter(item => item.reorderable)\n .map(item => item.value!)\n .filter(Boolean),\n });\n }}\n />\n )}\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as i,a,t as n}from"./index.js";import{d}from"./p-
|
|
1
|
+
import{p as e,H as s,c as t,h as i,a,t as n}from"./index.js";import{d as o}from"./p-DBwa1OXP.js";import{d}from"./p-Jaqdfw4E.js";import{d as l}from"./p-BOhpMUwO.js";import{d as r}from"./p-Dryt3COt.js";import{d as h}from"./p-Ds51RgCi.js";import{d as c}from"./p-C0CE2v5D.js";import{d as m}from"./p-7O-2D29W.js";import{d as f}from"./p-Cea7rROU.js";import{d as u}from"./p-DkikNSSO.js";import{d as b}from"./p-0XTyQNRG.js";import{d as p}from"./p-CQIh2yRP.js";import{d as v}from"./p-DK9Ex3aY.js";import{d as w}from"./p-B27_chI7.js";import{d as g}from"./p-BV5T1hzN.js";import{d as k}from"./p-tNQ0YulU.js";import{d as D}from"./p-ji09W9el.js";import{d as E}from"./p-BgLI9JoT.js";import{d as y}from"./p-CbSUyv5B.js";const C=()=>`.sc-ds-table-saved-views-h{--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs);display:inline-block;min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs)}ds-select.sc-ds-table-saved-views{display:block;min-inline-size:0;max-inline-size:100%}`;let j=0;const V=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsViewChange=t(this,"dsViewChange",7);this.dsViewCreate=t(this,"dsViewCreate",7);this.dsViewRename=t(this,"dsViewRename",7);this.dsViewRemove=t(this,"dsViewRemove",7);this.dsViewSave=t(this,"dsViewSave",7);this.dsViewDiscard=t(this,"dsViewDiscard",7);this.hasBorder=true;this.views=[];this.value="__default__";this.dirty=false;this.defaultViewId="__default__";this.defaultViewLabel="Default";this.label="Saved views";this.triggerLabel="Views";this.compact=false;this.createLabel="New view";this.actionViewId=null;this.actionMenuOpen=false;this.actionMenuInitialFocusVisible=false;this.dialogOpen=false;this.dialogMode="create";this.dialogViewId=null;this.nameDraft="";this.nameError="";this.componentId=`ds-table-saved-views-${++j}`;this.selectId=`${this.componentId}-select`;this.actionMenuId=`${this.componentId}-actions`;this.fieldId=`${this.componentId}-name-field`;this.inputId=`${this.componentId}-name-input`;this.actionItems=[{label:"Rename",value:"rename"},{label:"Remove",value:"remove",isDestructive:true}]}get selectedCustomView(){return this.views.find((e=>e.id===this.value))}get dialogView(){return this.views.find((e=>e.id===this.dialogViewId))}get sections(){const e=this.views.map((e=>({label:e.label,value:e.id,subtextActions:this.dirty&&e.id===this.selectedCustomView?.id?[{label:"Save",value:"save"},{label:"Discard",value:"discard",tone:"negative"}]:undefined,action:{label:`Options for ${e.label}`,controls:this.actionMenuId,expanded:this.actionViewId===e.id&&this.actionMenuOpen,surfaceOpen:this.actionViewId===e.id}})));const s={header:"Templates",options:[{label:this.defaultViewLabel,value:this.defaultViewId}],divider:e.length>0};return e.length>0?[s,{header:"Custom",options:e}]:[s]}handleViewChange(e){if(typeof e==="string")this.dsViewChange.emit({viewId:e})}handleSubtextAction(e){const s=this.selectedCustomView;if(!s||!this.dirty||e.value!==s.id)return;if(e.actionValue==="save")this.dsViewSave.emit({viewId:s.id});if(e.actionValue==="discard")this.dsViewDiscard.emit({viewId:s.id})}handleOptionAction(e){if(!this.views.some((s=>s.id===e.value)))return;this.actionMenuInitialFocusVisible=e.originalEvent.detail===0;if(this.actionViewId===e.value&&this.actionMenuOpen){this.actionMenuOpen=false;return}this.actionViewId=e.value;this.actionAnchorId=e.anchorId;this.actionMenuOpen=true}handleActionSelect(e){const s=this.actionViewId;this.actionMenuOpen=false;if(!s)return;if(e.detail.value==="rename")this.openDialog("rename",s);if(e.detail.value==="remove")this.dsViewRemove.emit({viewId:s})}openDialog(e,s=null){const t=e==="rename"?this.views.find((e=>e.id===s)):undefined;if(e==="rename"&&!t)return;this.dialogMode=e;this.dialogViewId=t?.id??null;this.nameDraft=t?.label??"";this.nameError="";this.dialogOpen=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{const e=this.el.querySelector(`#${this.inputId}`);void e?.setFocus?.()}))}))}validateName(){const e=this.nameDraft.trim();if(!e)return"View name is required.";const s=this.views.some((s=>s.id!==this.dialogViewId&&s.label.trim().toLocaleLowerCase()===e.toLocaleLowerCase()));if(s||this.defaultViewLabel.trim().toLocaleLowerCase()===e.toLocaleLowerCase()){return"A view with this name already exists."}return""}submitDialog(){const e=this.validateName();if(e){this.nameError=e;return}const s=this.nameDraft.trim();if(this.dialogMode==="rename"&&this.dialogView){this.dsViewRename.emit({viewId:this.dialogView.id,name:s})}else{this.dsViewCreate.emit({name:s})}this.dialogOpen=false}finishDialogClose(){if(this.dialogOpen)return;this.dialogViewId=null;this.nameDraft="";this.nameError="";const e=this.el.querySelector(`#${this.selectId}`);void e?.setFocus?.()}render(){return i(a,{key:"43fc7569a2b2e1109ac64134e65f541703e59e54"},i("ds-select",{key:"821730bb9f01d279ce66fb1dafb468c924267b2e",neutralTrigger:true,hasBorder:this.hasBorder,id:this.selectId,size:"md",icon:"ViewMenu",indicator:"none",collapseLabel:true,iconOnly:this.compact,width:"fill",placeholder:this.label,"aria-label":this.label,sections:this.sections,value:this.value,triggerLabel:this.selectedCustomView?undefined:this.triggerLabel,triggerLabelPlaceholder:!this.selectedCustomView,dot:this.dirty&&Boolean(this.selectedCustomView),footerActionLabel:this.createLabel,activeFill:false,allowClear:false,onDsChange:e=>this.handleViewChange(e.detail),onDsFooterAction:()=>this.openDialog("create"),onDsOptionSubtextAction:e=>this.handleSubtextAction(e.detail),onDsOptionAction:e=>this.handleOptionAction(e.detail)}),i("ds-menu",{key:"5409715aa5b78a0959842a2c17d3457425e9397c",id:this.actionMenuId,anchorId:this.actionAnchorId,menuLabel:"Saved view options",side:"bottom",align:"end",menuWidth:"max-content",minWidth:"0",items:this.actionItems,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,onDsClose:()=>this.actionMenuOpen=false,onDsAfterClose:()=>{if(this.actionMenuOpen)return;this.actionViewId=null;this.actionAnchorId=undefined},onDsSelect:e=>this.handleActionSelect(e)}),i("ds-modal",{key:"475b272b4536c90b85b74812cc84c4fb26d6bc29",open:this.dialogOpen,heading:this.dialogMode==="rename"?"Rename view":"Save as new view",modalWidth:"sm",onDsClose:()=>this.dialogOpen=false,onDsAfterClose:()=>this.finishDialogClose()},i("ds-field",{key:"11e73766e31b14b7204ce0bad84cc7f1005b2d16",fieldId:this.fieldId,error:this.nameError.length>0,errorMessage:this.nameError},i("ds-input",{key:"8dc528f0a8c02d9d18f65e5e2727393300d0e8b8",id:this.inputId,size:"md","aria-label":"Name",placeholder:"Enter a unique name",value:this.nameDraft,autoFocus:true,onDsChange:e=>{this.nameDraft=e.detail;if(this.nameError)this.nameError=""},onKeyDown:e=>{if(e.key==="Enter")this.submitDialog()}})),i("ds-button-filled",{key:"5a896d09c946ea25061eac2b510225044651c9f6",slot:"footer",label:this.dialogMode==="rename"?"Rename":"Save",size:"md",onDsClick:()=>this.submitDialog()}),i("ds-button-unfilled",{key:"318cfaf66f4e147cffce3f17ed9d5d24c8928665",slot:"footer",label:"Cancel",size:"md",onDsClick:()=>this.dialogOpen=false})))}get el(){return this}static get style(){return C()}},[2,"ds-table-saved-views",{hasBorder:[4,"has-border"],views:[16],value:[1],dirty:[4],defaultViewId:[1,"default-view-id"],defaultViewLabel:[1,"default-view-label"],label:[1],triggerLabel:[1,"trigger-label"],compact:[4],createLabel:[1,"create-label"],actionViewId:[32],actionAnchorId:[32],actionMenuOpen:[32],actionMenuInitialFocusVisible:[32],dialogOpen:[32],dialogMode:[32],dialogViewId:[32],nameDraft:[32],nameError:[32]}]);function x(){if(typeof customElements==="undefined"){return}const e=["ds-table-saved-views","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-divider","ds-empty-state","ds-field","ds-icon","ds-input","ds-loader","ds-menu","ds-modal","ds-select","ds-swatch-picker","ds-switch","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-table-saved-views":if(!customElements.get(n(e))){customElements.define(n(e),V)}break;case"ds-badge":if(!customElements.get(n(e))){o()}break;case"ds-button-filled":if(!customElements.get(n(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){l()}break;case"ds-checkbox":if(!customElements.get(n(e))){r()}break;case"ds-divider":if(!customElements.get(n(e))){h()}break;case"ds-empty-state":if(!customElements.get(n(e))){c()}break;case"ds-field":if(!customElements.get(n(e))){m()}break;case"ds-icon":if(!customElements.get(n(e))){f()}break;case"ds-input":if(!customElements.get(n(e))){u()}break;case"ds-loader":if(!customElements.get(n(e))){b()}break;case"ds-menu":if(!customElements.get(n(e))){p()}break;case"ds-modal":if(!customElements.get(n(e))){v()}break;case"ds-select":if(!customElements.get(n(e))){w()}break;case"ds-swatch-picker":if(!customElements.get(n(e))){g()}break;case"ds-switch":if(!customElements.get(n(e))){k()}break;case"ds-tag":if(!customElements.get(n(e))){D()}break;case"ds-text":if(!customElements.get(n(e))){E()}break;case"ds-tooltip":if(!customElements.get(n(e))){y()}break}}))}x();const I=V;const O=x;export{I as DsTableSavedViews,O as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-table-saved-views.js.map
|