@ds-mo/ui 15.5.0 → 15.6.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 +48 -23
- package/dist/angular/ds-data-preferences.d.ts +1 -1
- package/dist/angular/ds-data-preferences.js +3 -3
- package/dist/angular/ds-menu.d.ts +7 -1
- package/dist/angular/ds-menu.js +5 -2
- package/dist/angular/ds-table.d.ts +1 -1
- package/dist/angular/ds-table.js +3 -3
- package/dist/components/THIRD-PARTY-NOTICES +1 -1
- package/dist/components/bundled-dependencies.json +1 -1
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-banner.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-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-calendar.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-data-customize.js +1 -1
- package/dist/components/ds-data-filter.js +1 -1
- package/dist/components/ds-data-group.js +1 -1
- package/dist/components/ds-data-preferences.js +1 -1
- package/dist/components/ds-data-preferences.js.map +1 -1
- package/dist/components/ds-data-saved-views.js +1 -1
- package/dist/components/ds-data-search.js +1 -1
- package/dist/components/ds-data-search.js.map +1 -1
- package/dist/components/ds-data-sort.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-input-date.js +1 -1
- package/dist/components/ds-input-time.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-map-entity-marker.js +1 -1
- package/dist/components/ds-map-entity-marker.js.map +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-composer.js +1 -1
- package/dist/components/ds-message-scroller.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-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-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-toast.js.map +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-BO5URdZF.js → p-B-pkoIX9.js} +2 -2
- package/dist/components/{p--STJbKuN.js → p-B3o9zn3Y.js} +2 -2
- package/dist/components/p-BR9Pjp15.js +2 -0
- package/dist/components/{p-Bq_ypMSy.js.map → p-BR9Pjp15.js.map} +1 -1
- package/dist/components/{p-rmPIcWED.js → p-BZY40-pE.js} +2 -2
- package/dist/components/{p-D-J7GgjY.js → p-BqipGGua.js} +2 -2
- package/dist/components/{p-D-J7GgjY.js.map → p-BqipGGua.js.map} +1 -1
- package/dist/components/{p-PtxCwf5S.js → p-C6kUn-vb.js} +2 -2
- package/dist/components/p-CElsKlxj.js +2 -0
- package/dist/components/{p-C1oczmAc.js.map → p-CElsKlxj.js.map} +1 -1
- package/dist/components/p-CIMyD_6H.js +2 -0
- package/dist/components/{p-C5BBIDVm.js.map → p-CIMyD_6H.js.map} +1 -1
- package/dist/components/{p-BcpIK9S6.js → p-CSxwWcwW.js} +2 -2
- package/dist/components/p-CUYLGe5d.js +2 -0
- package/dist/components/{p-D9_iDlkT.js.map → p-CUYLGe5d.js.map} +1 -1
- package/dist/components/{p-wRhYxngW.js → p-CaFXrn_8.js} +2 -2
- package/dist/components/{p-BYeG0b5N.js → p-DObhRLBa.js} +2 -2
- package/dist/components/{p-C_9VGgPf.js → p-DP07JCed.js} +2 -2
- package/dist/components/{p-Dg6hnCc2.js → p-DVsGfz7J.js} +2 -2
- package/dist/components/{p-Dg6hnCc2.js.map → p-DVsGfz7J.js.map} +1 -1
- package/dist/components/p-DYGllrVT.js +2 -0
- package/dist/components/{p-DEYCF-oJ.js.map → p-DYGllrVT.js.map} +1 -1
- package/dist/components/{p-BGSG6xIS.js → p-DYtVsnDS.js} +2 -2
- package/dist/components/p-DbW8S5qe.js +2 -0
- package/dist/components/p-DbW8S5qe.js.map +1 -0
- package/dist/components/p-DcxY_pdJ.js +2 -0
- package/dist/components/{p-CA3iQ1ME.js.map → p-DcxY_pdJ.js.map} +1 -1
- package/dist/components/{p-B6TX55c5.js → p-DdFeWC-e.js} +2 -2
- package/dist/components/p-DlCLfwP4.js +2 -0
- package/dist/components/p-DuCfCvPs.js +2 -0
- package/dist/components/p-DuCfCvPs.js.map +1 -0
- package/dist/components/{p-BYrBU_U9.js → p-HMDczkQf.js} +2 -2
- package/dist/components/p-HfZ1gI2q.js +2 -0
- package/dist/components/{p-jp7hwRtC.js.map → p-HfZ1gI2q.js.map} +1 -1
- package/dist/components/{p-DR_8IPn9.js → p-KA8srEed.js} +2 -2
- package/dist/components/{p-CXGjCWSh.js → p-OJ5WeR05.js} +2 -2
- package/dist/components/p-Ouk6FCxc.js +2 -0
- package/dist/components/{p-PzYJqN8B.js.map → p-Ouk6FCxc.js.map} +1 -1
- package/dist/components/p-leZFu-cd.js +2 -0
- package/dist/components/{p-DPFg5d4_.js.map → p-leZFu-cd.js.map} +1 -1
- package/dist/components/{p-DjbT9kKm.js → p-wXKIVUTn.js} +2 -2
- package/dist/components/p-xMBaOeKa.js +2 -0
- package/dist/components/p-xMBaOeKa.js.map +1 -0
- package/dist/docs/components.json +208 -30
- package/dist/lint/index.js +1 -1
- package/dist/mcp-data/registry/agent-activity.json +1 -1
- package/dist/mcp-data/registry/agent-questionnaire.json +1 -1
- package/dist/mcp-data/registry/agent-response.json +1 -1
- package/dist/mcp-data/registry/agent-source-list.json +1 -1
- package/dist/mcp-data/registry/agent-tool-call.json +1 -1
- package/dist/mcp-data/registry/attachment-list.json +1 -1
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/badge.json +1 -1
- package/dist/mcp-data/registry/banner.json +1 -1
- package/dist/mcp-data/registry/bar-action.json +1 -1
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/bar-page-title.json +1 -1
- package/dist/mcp-data/registry/bar-title.json +1 -1
- package/dist/mcp-data/registry/bar-workflow.json +1 -1
- package/dist/mcp-data/registry/breadcrumb.json +1 -1
- package/dist/mcp-data/registry/button-filled.json +2 -2
- package/dist/mcp-data/registry/button-inverted.json +1 -1
- package/dist/mcp-data/registry/button-unfilled.json +1 -1
- package/dist/mcp-data/registry/calendar.json +1 -1
- package/dist/mcp-data/registry/card-action-center.json +1 -1
- package/dist/mcp-data/registry/card-chart.json +1 -1
- package/dist/mcp-data/registry/card-navigation.json +1 -1
- package/dist/mcp-data/registry/card-overview.json +1 -1
- package/dist/mcp-data/registry/card-setting.json +1 -1
- package/dist/mcp-data/registry/card-settings-scope.json +1 -1
- package/dist/mcp-data/registry/chart-legend.json +1 -1
- package/dist/mcp-data/registry/chart.json +1 -1
- package/dist/mcp-data/registry/checkbox-group.json +1 -1
- package/dist/mcp-data/registry/checkbox.json +1 -1
- package/dist/mcp-data/registry/chip.json +1 -1
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +1 -1
- package/dist/mcp-data/registry/conversation-list-section.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +1 -1
- package/dist/mcp-data/registry/data-customize.json +1 -1
- package/dist/mcp-data/registry/data-filter.json +1 -1
- package/dist/mcp-data/registry/data-group.json +1 -1
- package/dist/mcp-data/registry/data-preferences.json +22 -6
- package/dist/mcp-data/registry/data-saved-views.json +1 -1
- package/dist/mcp-data/registry/data-search.json +1 -1
- package/dist/mcp-data/registry/data-sort.json +1 -1
- package/dist/mcp-data/registry/data-toolbar.json +1 -1
- package/dist/mcp-data/registry/divider.json +1 -1
- package/dist/mcp-data/registry/empty-state.json +1 -1
- package/dist/mcp-data/registry/field.json +1 -1
- package/dist/mcp-data/registry/filter-menu.json +1 -1
- package/dist/mcp-data/registry/icon.json +1 -1
- package/dist/mcp-data/registry/inline-banner-settings.json +1 -1
- package/dist/mcp-data/registry/input-date.json +1 -1
- package/dist/mcp-data/registry/input-time.json +1 -1
- package/dist/mcp-data/registry/input.json +1 -1
- package/dist/mcp-data/registry/loader.json +1 -1
- package/dist/mcp-data/registry/map-cluster-marker.json +1 -1
- package/dist/mcp-data/registry/map-entity-marker.json +6 -6
- package/dist/mcp-data/registry/markdown.json +1 -1
- package/dist/mcp-data/registry/menu.json +31 -12
- package/dist/mcp-data/registry/message-actions.json +1 -1
- package/dist/mcp-data/registry/message-bubble.json +1 -1
- package/dist/mcp-data/registry/message-composer.json +1 -1
- package/dist/mcp-data/registry/message-scroller.json +1 -1
- package/dist/mcp-data/registry/message.json +1 -1
- package/dist/mcp-data/registry/mobile-bar-nav.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +1 -1
- package/dist/mcp-data/registry/mobile-section-switcher.json +1 -1
- package/dist/mcp-data/registry/mobile-sheet-nav.json +1 -1
- package/dist/mcp-data/registry/modal.json +1 -1
- package/dist/mcp-data/registry/pagination.json +1 -1
- package/dist/mcp-data/registry/panel-nav.json +1 -1
- package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tool-search.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +1 -1
- package/dist/mcp-data/registry/paper-texture.json +1 -1
- package/dist/mcp-data/registry/radio-tile.json +1 -1
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/registry.json +48 -23
- package/dist/mcp-data/registry/score.json +1 -1
- package/dist/mcp-data/registry/scroll-overlay.json +1 -1
- package/dist/mcp-data/registry/select.json +1 -1
- package/dist/mcp-data/registry/setting-row-checkbox.json +1 -1
- package/dist/mcp-data/registry/setting-row-radio.json +1 -1
- package/dist/mcp-data/registry/setting-row-toggle.json +1 -1
- package/dist/mcp-data/registry/shell-app.json +1 -1
- package/dist/mcp-data/registry/shell-page.json +1 -1
- package/dist/mcp-data/registry/shell-tools.json +1 -1
- package/dist/mcp-data/registry/skeleton.json +1 -1
- package/dist/mcp-data/registry/slider.json +1 -1
- package/dist/mcp-data/registry/swatch-picker.json +1 -1
- package/dist/mcp-data/registry/switch.json +1 -1
- package/dist/mcp-data/registry/tab-group.json +1 -1
- package/dist/mcp-data/registry/table.json +59 -19
- package/dist/mcp-data/registry/tag.json +1 -1
- package/dist/mcp-data/registry/text.json +1 -1
- package/dist/mcp-data/registry/textarea.json +1 -1
- package/dist/mcp-data/registry/time-picker.json +1 -1
- package/dist/mcp-data/registry/toast.json +1 -1
- package/dist/mcp-data/registry/tooltip-chart.json +1 -1
- package/dist/mcp-data/registry/tooltip.json +1 -1
- package/dist/mcp-data/registry/typing-indicator.json +1 -1
- package/dist/react/ds-menu.d.ts +2 -1
- package/dist/react/ds-menu.js +1 -0
- package/dist/styles/table.css +41 -0
- package/dist/types/components/DataPreferences/DataPreferences.d.ts +3 -0
- package/dist/types/components/MapEntityMarker/MapEntityMarker.d.ts +1 -1
- package/dist/types/components/Menu/Menu.d.ts +5 -1
- package/dist/types/components/Menu/menu-types.d.ts +36 -0
- package/dist/types/components/Table/Table.d.ts +11 -2
- package/dist/types/components/Table/index.d.ts +1 -1
- package/dist/types/components/Table/table-column-customizer.d.ts +23 -4
- package/dist/types/components/Table/table-layout-controller.d.ts +2 -1
- package/dist/types/components/Table/table-types.d.ts +3 -1
- package/dist/types/components.d.ts +44 -8
- package/dist/vue/ds-data-preferences.js +1 -0
- package/dist/vue/ds-menu.js +2 -0
- package/dist/vue/ds-table.js +2 -0
- package/package.json +3 -3
- package/dist/components/p-Bq_ypMSy.js +0 -2
- package/dist/components/p-C1oczmAc.js +0 -2
- package/dist/components/p-C5BBIDVm.js +0 -2
- package/dist/components/p-CA3iQ1ME.js +0 -2
- package/dist/components/p-CE6MaXBg.js +0 -2
- package/dist/components/p-CE6MaXBg.js.map +0 -1
- package/dist/components/p-D9_iDlkT.js +0 -2
- package/dist/components/p-DEYCF-oJ.js +0 -2
- package/dist/components/p-DPFg5d4_.js +0 -2
- package/dist/components/p-DvGrsLgt.js +0 -2
- package/dist/components/p-DvGrsLgt.js.map +0 -1
- package/dist/components/p-PzYJqN8B.js +0 -2
- package/dist/components/p-aD5cw_m2.js +0 -2
- package/dist/components/p-aD5cw_m2.js.map +0 -1
- package/dist/components/p-jp7hwRtC.js +0 -2
- package/dist/components/p-kDZ0sEII.js +0 -2
- package/dist/components/p-t2Ebn8si.js +0 -2
- package/dist/components/p-t2Ebn8si.js.map +0 -1
- /package/dist/components/{p-BO5URdZF.js.map → p-B-pkoIX9.js.map} +0 -0
- /package/dist/components/{p--STJbKuN.js.map → p-B3o9zn3Y.js.map} +0 -0
- /package/dist/components/{p-rmPIcWED.js.map → p-BZY40-pE.js.map} +0 -0
- /package/dist/components/{p-PtxCwf5S.js.map → p-C6kUn-vb.js.map} +0 -0
- /package/dist/components/{p-BcpIK9S6.js.map → p-CSxwWcwW.js.map} +0 -0
- /package/dist/components/{p-wRhYxngW.js.map → p-CaFXrn_8.js.map} +0 -0
- /package/dist/components/{p-BYeG0b5N.js.map → p-DObhRLBa.js.map} +0 -0
- /package/dist/components/{p-C_9VGgPf.js.map → p-DP07JCed.js.map} +0 -0
- /package/dist/components/{p-BGSG6xIS.js.map → p-DYtVsnDS.js.map} +0 -0
- /package/dist/components/{p-B6TX55c5.js.map → p-DdFeWC-e.js.map} +0 -0
- /package/dist/components/{p-kDZ0sEII.js.map → p-DlCLfwP4.js.map} +0 -0
- /package/dist/components/{p-BYrBU_U9.js.map → p-HMDczkQf.js.map} +0 -0
- /package/dist/components/{p-DR_8IPn9.js.map → p-KA8srEed.js.map} +0 -0
- /package/dist/components/{p-CXGjCWSh.js.map → p-OJ5WeR05.js.map} +0 -0
- /package/dist/components/{p-DjbT9kKm.js.map → p-wXKIVUTn.js.map} +0 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as i,H as e,c as s,h as t,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{C as a}from"./p-DlsjHRU3.js";import{d}from"./p-CwdRaJER.js";import{d as l}from"./p-BqipGGua.js";import{d as h}from"./p-pPtjNRqC.js";import{d as m}from"./p-0XTyQNRG.js";import{d as b}from"./p-xMBaOeKa.js";import{d as f}from"./p-B9y6azEw.js";import{d as u}from"./p-Bf-BphXP.js";import{d as v}from"./p-d76Ry5nh.js";import{d as g}from"./p-D8OWhnID.js";import{d as w}from"./p-DbW8S5qe.js";import{b as p,T as x}from"./p-CeXf9-X3.js";function k(i,e){const s=r(i);const t=s.findIndex((i=>i.id===e));const o=t>=0?t:0;return{selectedIndex:o,selected:s[o],hasPrevious:o>0,hasNext:o<s.length-1}}const _=()=>`@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-mobile-section-switcher-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-mobile-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-mobile-section-switcher-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-mobile-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-chrome.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-mobile-section-switcher-h,.sc-ds-mobile-section-switcher:where(.ds-table),.sc-ds-mobile-section-switcher:where(.tooltip-popup),.sc-ds-mobile-section-switcher: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)}.ds-control--lg.sc-ds-mobile-section-switcher,.ds-control--lg.sc-ds-mobile-section-switcher-h,.ds-control--md.sc-ds-mobile-section-switcher-h,.ds-control--md.sc-ds-mobile-section-switcher,.ds-control--sm.sc-ds-mobile-section-switcher-h,.ds-control--sm.sc-ds-mobile-section-switcher,.ds-control--xs.sc-ds-mobile-section-switcher-h,.ds-control--xs.sc-ds-mobile-section-switcher{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-mobile-section-switcher-h,.ds-control--lg.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-mobile-section-switcher-h,.ds-control--md.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-mobile-section-switcher-h,.ds-control--sm.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-mobile-section-switcher-h,.ds-control--xs.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-mobile-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:default}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}.mobile-section-switcher--sheet.sc-ds-mobile-section-switcher{grid-template-columns:minmax(0, auto);min-height:var(--dimension-size-500);padding-inline:var(--dimension-space-150);border-radius:var(--dimension-radius-half);background:transparent;--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.mobile-section-switcher--combined.sc-ds-mobile-section-switcher{display:flex}.mobile-section-switcher__page-label.sc-ds-mobile-section-switcher{flex:0 1 auto;min-width:0}.mobile-section-switcher__separator.sc-ds-mobile-section-switcher{flex:0 0 auto}.mobile-section-switcher--combined.sc-ds-mobile-section-switcher .mobile-section-switcher__label.sc-ds-mobile-section-switcher{flex:0 0 auto;max-width:50%}.mobile-section-sheet.sc-ds-mobile-section-switcher{position:fixed;inset:0 0 auto;width:100%;max-width:none;max-height:calc(100dvh - var(--dimension-size-500) - var(--dimension-space-200));margin:0;padding:0;border:0;border-radius:0;box-sizing:border-box;overflow:visible;background:transparent;color:var(--color-foreground-secondary);outline:none}.mobile-section-sheet[open].sc-ds-mobile-section-switcher{display:flex;flex-direction:column}.mobile-section-sheet[open].sc-ds-mobile-section-switcher .mobile-section-sheet__items.sc-ds-mobile-section-switcher{animation:mobileSectionSheetIn var(--effect-motion-short-2) both}.mobile-section-sheet.sc-ds-mobile-section-switcher::backdrop{background:var(--color-background-shade);animation:mobileSectionShadeIn var(--effect-motion-short-2) both}.mobile-section-sheet--closing[open].sc-ds-mobile-section-switcher .mobile-section-sheet__items.sc-ds-mobile-section-switcher{animation-name:mobileSectionSheetOut}.mobile-section-sheet--closing.sc-ds-mobile-section-switcher::backdrop{animation-name:mobileSectionShadeOut}.mobile-section-sheet__items.sc-ds-mobile-section-switcher{display:flex;flex-direction:column;gap:var(--dimension-space-100);min-height:0;max-height:inherit;box-sizing:border-box;background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);padding:var(--dimension-space-100);padding-block-start:max(var(--dimension-space-100), env(safe-area-inset-top, 0px));overflow-y:auto;overscroll-behavior:contain}.mobile-section-sheet__item.sc-ds-mobile-section-switcher{appearance:none;flex:0 0 auto;display:flex;align-items:center;height:var(--ds-control-height);width:100%;min-width:0;padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:0;border-radius:var(--ds-control-radius);background:transparent;color:inherit;text-align:start}.mobile-section-sheet__item[aria-current='page'].sc-ds-mobile-section-switcher{color:var(--color-foreground-primary)}.mobile-section-sheet__item.sc-ds-mobile-section-switcher:disabled{color:var(--color-foreground-tertiary)}.mobile-section-sheet__label.sc-ds-mobile-section-switcher{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-section-sheet__divider.sc-ds-mobile-section-switcher{flex:0 0 auto;height:var(--dimension-stroke-width-012);margin-inline:var(--dimension-space-100);background:var(--color-border-tertiary)}@keyframes mobileSectionSheetIn{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes mobileSectionSheetOut{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes mobileSectionShadeIn{from{opacity:0}to{opacity:1}}@keyframes mobileSectionShadeOut{from{opacity:1}to{opacity:0}}.mobile-section-switcher--pointer-focus.sc-ds-mobile-section-switcher-h .ds-focus-ring-inset.sc-ds-mobile-section-switcher::after{outline:none}.mobile-section-sheet__browser-edge.sc-ds-mobile-section-switcher{position:fixed;inset:auto 0 0;height:max(var(--dimension-space-200), env(safe-area-inset-bottom, 0px));pointer-events:none;color:var(--color-background-primary);background-color:var(--_mobile-section-edge-color, var(--color-background-primary))}.mobile-section-sheet[open].sc-ds-mobile-section-switcher .mobile-section-sheet__browser-edge.sc-ds-mobile-section-switcher{animation:mobileSectionEdgeIn var(--effect-motion-short-2) both}.mobile-section-sheet--closing[open].sc-ds-mobile-section-switcher .mobile-section-sheet__browser-edge.sc-ds-mobile-section-switcher{animation-name:mobileSectionEdgeOut}@keyframes mobileSectionEdgeIn{from{background-color:var(--color-background-primary)}to{background-color:var(--_mobile-section-edge-color, var(--color-background-primary))}}@keyframes mobileSectionEdgeOut{from{background-color:var(--_mobile-section-edge-color, var(--color-background-primary))}to{background-color:var(--color-background-primary)}}@media (prefers-reduced-motion: reduce){.mobile-section-sheet[open].sc-ds-mobile-section-switcher .mobile-section-sheet__items.sc-ds-mobile-section-switcher,.mobile-section-sheet[open].sc-ds-mobile-section-switcher .mobile-section-sheet__browser-edge.sc-ds-mobile-section-switcher,.mobile-section-sheet.sc-ds-mobile-section-switcher::backdrop{animation:none}}`;let y=0;const C=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange",7);this.sections=[];this.value="";this.navigationLabel="Change page section";this.presentation="menu";this.pageLabel="";this.menuOpen=false;this.menuSurfaceOpen=false;this.initialFocusVisible=false;this.pointerFocus=false;this.sheetClosing=false;this.focusedSection="";this.instanceId=y++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.dialogEl=null;this.browserEdgeEl=null;this.browserEdgeColors="";this.closeTimer=null;this.loaded=false;this.tasks=new a((()=>this.el.isConnected));this.handleDocumentKeyDown=i=>{if(["Shift","Control","Alt","Meta"].includes(i.key))return;this.pointerFocus=false};this.updateBrowserEdgeColor=()=>{if(!this.el.isConnected||!this.browserEdgeEl||!this.dialogEl)return;const i=getComputedStyle(this.browserEdgeEl).color;const e=getComputedStyle(this.dialogEl,"::backdrop").backgroundColor;const s=`${i}|${e}`;if(s===this.browserEdgeColors)return;const t=this.el.ownerDocument.createElement("canvas");t.width=t.height=1;const o=t.getContext("2d");if(!o)return;o.fillStyle=i;o.fillRect(0,0,1,1);o.fillStyle=e;o.fillRect(0,0,1,1);const[n,r,c]=o.getImageData(0,0,1,1).data;this.browserEdgeEl.style.setProperty("--_mobile-section-edge-color",`rgb(${n}, ${r}, ${c})`);this.browserEdgeColors=s};this.handleSheetKeyDown=i=>{if(i.key==="Escape"){i.preventDefault();i.stopPropagation();this.closeMenu();return}const e=this.selectableSections.filter((i=>!i.isInactive));if(!e.length)return;const s=Math.max(0,e.findIndex((i=>i.id===this.focusedSection)));let t;if(i.key==="ArrowDown")t=(s+1)%e.length;else if(i.key==="ArrowUp")t=(s+e.length-1)%e.length;else if(i.key==="Home")t=0;else if(i.key==="End")t=e.length-1;else if(i.key==="Tab")t=s;else if(i.key.length===1&&!i.ctrlKey&&!i.metaKey&&!i.altKey&&i.key!==" "){const o=e.findIndex(((t,o)=>e[(s+o+1)%e.length].label.toLowerCase().startsWith(i.key.toLowerCase())));if(o<0)return;t=(s+o+1)%e.length}else return;i.preventDefault();this.initialFocusVisible=true;this.focusSheetItem(e[t].id)};this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;if(this.presentation==="sheet"){if(this.menuOpen)this.closeMenu();else{this.focusedSection=this.selectedSection?.id??"";this.menuOpen=true}return}this.menuOpen=!this.menuOpen;if(this.menuOpen)this.menuSurfaceOpen=true};this.closeMenu=()=>{this.menuOpen=false;if(this.dialogEl?.open)this.sheetClosing=true};this.handleSelect=i=>{const e=String(i.detail.value??"");const s=this.selectableSections.find((i=>i.id===e));if(!s||s.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);this.tasks.frame((()=>this.triggerEl?.focus()))}}componentDidLoad(){this.loaded=true;this.connectResources()}connectedCallback(){if(this.loaded)this.connectResources()}connectResources(){if(!this.el.isConnected||this.boundDocument)return;this.boundDocument=this.el.ownerDocument;this.boundDocument.addEventListener("keydown",this.handleDocumentKeyDown,true);this.visibilityObserver=new ResizeObserver(this.tasks.guard((()=>{if(this.dialogEl?.open&&!this.triggerEl?.getClientRects().length){this.finishSheetClose(false)}})));this.visibilityObserver.observe(this.el)}componentDidRender(){if(!this.el.isConnected||!this.dialogEl)return;if(this.presentation==="sheet"&&this.menuOpen&&!this.dialogEl.open){const i=this.focusedSection;this.updateBrowserEdgeColor();this.observeBrowserEdgeTheme();this.dialogEl.showModal();this.focusSheetItem(i)}if(this.sheetClosing&&this.dialogEl.open&&!this.closeTimer){const i=p(x.motionShort2,x.animationDurationShort3);if(!i)this.finishSheetClose();else this.closeTimer=setTimeout((()=>this.finishSheetClose()),i)}}disconnectedCallback(){this.tasks.cancel();this.boundDocument?.removeEventListener("keydown",this.handleDocumentKeyDown,true);this.boundDocument=undefined;this.visibilityObserver?.disconnect();this.visibilityObserver=undefined;this.pointerFocus=false;this.menuSurfaceOpen=false;this.finishSheetClose(false)}handlePresentationChange(){this.menuSurfaceOpen=false;this.closeMenu()}handleContextChange(){this.closeMenu()}finishSheetClose(i=true){if(this.closeTimer)clearTimeout(this.closeTimer);this.closeTimer=null;const e=this.dialogEl?.open;this.dialogEl?.close();this.themeObserver?.disconnect();this.menuOpen=false;this.sheetClosing=false;if(e&&i&&this.triggerEl?.getClientRects().length)this.triggerEl.focus()}observeBrowserEdgeTheme(){this.themeObserver??(this.themeObserver=new MutationObserver(this.updateBrowserEdgeColor));for(let i=this.el;i;i=i.parentElement){this.themeObserver.observe(i,{attributes:true,attributeFilter:["class","style","data-theme"]})}}focusSheetItem(i){const e=Array.from(this.dialogEl?.querySelectorAll("button")??[]);const s=e.find((e=>e.value===i&&!e.disabled))??e.find((i=>!i.disabled));if(s){this.focusedSection=s.value;s.focus()}else this.dialogEl?.focus()}get resolvedSections(){return this.sections??[]}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return k(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return k(this.resolvedSections,this.value).hasPrevious}get hasNext(){return k(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.presentation==="sheet"&&this.pageLabel?`${this.pageLabel}. `:""}${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const s=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){s();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}s();return i}handleSectionsChange(){if(this.selectableSections.length<=1){this.closeMenu();this.menuSurfaceOpen=false}else if(this.dialogEl?.open&&!this.sheetClosing){this.tasks.frame((()=>{if(this.dialogEl?.open&&!this.sheetClosing)this.focusSheetItem(this.focusedSection)}))}}renderSheet(){return t("dialog",{id:this.menuId,ref:i=>{this.dialogEl=i??null},class:{"mobile-section-sheet":true,"mobile-section-sheet--closing":this.sheetClosing},"aria-label":this.navigationLabel,tabIndex:-1,onCancel:i=>{i.preventDefault();this.closeMenu()},onKeyDown:this.handleSheetKeyDown,onClick:i=>{if(!this.dialogEl||i.target!==this.dialogEl)return;const e=this.dialogEl.getBoundingClientRect();if(i.clientY<e.top||i.clientY>e.bottom||i.clientX<e.left||i.clientX>e.right)this.closeMenu()}},t("div",{class:"mobile-section-sheet__items",role:"menu","aria-label":this.navigationLabel},this.resolvedSections.map((i=>c(i)?t("div",{class:"mobile-section-sheet__divider",role:"separator"}):t("button",{type:"button",role:"menuitem",value:i.id,disabled:i.isInactive,"aria-current":i.id===this.selectedSection?.id?"page":undefined,tabIndex:i.id===this.focusedSection?0:-1,class:{"mobile-section-sheet__item":true,"ds-control--lg":true,"ds-interaction-fill":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":this.initialFocusVisible&&i.id===this.focusedSection},onFocus:()=>{this.focusedSection=i.id},onClick:()=>{if(this.sheetClosing||i.isInactive)return;this.closeMenu();if(i.id!==this.selectedSection?.id)this.dsChange.emit(i.id)}},t("ds-text",{class:"mobile-section-sheet__label ds-interaction-fill__content",as:"span",variant:"text-body-large",color:"inherit",emphasis:i.id===this.selectedSection?.id,lineTruncation:1},i.label))))),t("div",{ref:i=>{if(this.browserEdgeEl!==i)this.browserEdgeColors="";this.browserEdgeEl=i??null},class:"mobile-section-sheet__browser-edge","aria-hidden":"true"}))}render(){const i=this.selectedSection;if(!i)return t(o,null);const e=this.presentation==="sheet"&&!!this.pageLabel;return t(o,{class:{"mobile-section-switcher--pointer-focus":this.pointerFocus},onPointerDown:()=>{this.pointerFocus=true;this.initialFocusVisible=false}},t("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-interaction-fill--surface-open":this.menuSurfaceOpen||this.menuOpen||this.sheetClosing,"mobile-section-switcher--sheet":this.presentation==="sheet","mobile-section-switcher--combined":e,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":this.presentation==="sheet"?"dialog":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},this.presentation==="menu"?t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}):null,e?[t("ds-text",{class:"mobile-section-switcher__page-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:true,color:"inherit",lineTruncation:1},this.pageLabel),t("ds-text",{class:"mobile-section-switcher__separator ds-interaction-fill__content",as:"span",variant:"text-body-large",color:"inherit","aria-hidden":"true"},"·")]:null,t("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:this.presentation==="sheet"?"text-body-large":"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),this.presentation==="menu"?t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"}):null),this.presentation==="sheet"||this.sheetClosing?this.renderSheet():this.selectableSections.length>1?t("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsAfterClose:()=>{if(!this.menuOpen)this.menuSurfaceOpen=false},onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{presentation:[{handlePresentationChange:0}],value:[{handleContextChange:0}],pageLabel:[{handleContextChange:0}],sections:[{handleSectionsChange:0}]}}static get style(){return _()}},[2,"ds-mobile-section-switcher",{sections:[16],value:[1],navigationLabel:[1,"navigation-label"],presentation:[1],pageLabel:[1,"page-label"],menuOpen:[32],menuSurfaceOpen:[32],initialFocusVisible:[32],pointerFocus:[32],sheetClosing:[32],focusedSection:[32]},undefined,{presentation:[{handlePresentationChange:0}],value:[{handleContextChange:0}],pageLabel:[{handleContextChange:0}],sections:[{handleSectionsChange:0}]}]);function S(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text","ds-tooltip"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),C)}break;case"ds-badge":if(!customElements.get(n(i))){d()}break;case"ds-button-unfilled":if(!customElements.get(n(i))){l()}break;case"ds-icon":if(!customElements.get(n(i))){h()}break;case"ds-loader":if(!customElements.get(n(i))){m()}break;case"ds-menu":if(!customElements.get(n(i))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){f()}break;case"ds-switch":if(!customElements.get(n(i))){u()}break;case"ds-tag":if(!customElements.get(n(i))){v()}break;case"ds-text":if(!customElements.get(n(i))){g()}break;case"ds-tooltip":if(!customElements.get(n(i))){w()}break}}))}S();export{C as M,S as d};
|
|
2
|
+
//# sourceMappingURL=p-CIMyD_6H.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["resolveMobileSectionPosition","sections","value","selectable","getSelectableTabs","matchedIndex","findIndex","section","id","selectedIndex","selected","hasPrevious","hasNext","length","mobileSectionSwitcherCss","nextMobileSectionSwitcherId","MobileSectionSwitcher","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navigationLabel","presentation","pageLabel","menuOpen","menuSurfaceOpen","initialFocusVisible","pointerFocus","sheetClosing","focusedSection","instanceId","triggerId","menuId","triggerEl","dialogEl","browserEdgeEl","browserEdgeColors","closeTimer","loaded","tasks","ConnectionTasks","el","isConnected","handleDocumentKeyDown","event","includes","key","updateBrowserEdgeColor","base","getComputedStyle","color","shade","backgroundColor","colors","canvas","ownerDocument","createElement","width","height","context","getContext","fillStyle","fillRect","red","green","blue","getImageData","data","style","setProperty","handleSheetKeyDown","preventDefault","stopPropagation","closeMenu","selectableSections","filter","isInactive","index","Math","max","next","ctrlKey","metaKey","altKey","match","_","offset","label","toLowerCase","startsWith","focusSheetItem","toggleMenu","detail","selectedSection","open","handleSelect","String","find","candidate","dsChange","emit","frame","focus","componentDidLoad","connectResources","connectedCallback","boundDocument","addEventListener","visibilityObserver","ResizeObserver","guard","getClientRects","finishSheetClose","observe","componentDidRender","initialSection","observeBrowserEdgeTheme","showModal","duration","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort2","animationDurationShort3","setTimeout","disconnectedCallback","cancel","removeEventListener","undefined","disconnect","handlePresentationChange","handleContextChange","restoreFocus","clearTimeout","wasOpen","close","themeObserver","MutationObserver","ancestor","parentElement","attributes","attributeFilter","buttons","Array","from","querySelectorAll","button","item","disabled","resolvedSections","triggerAriaLabel","menuSections","groups","items","commit","push","isTabDivider","dot","isSelected","handleSectionsChange","renderSheet","h","ref","element","class","tabIndex","onCancel","onKeyDown","onClick","target","rect","getBoundingClientRect","clientY","top","bottom","clientX","left","right","role","map","type","onFocus","as","variant","emphasis","lineTruncation","render","Host","combined","onPointerDown","anchorId","align","menuLabel","onDsClose","onDsAfterClose","onDsSelect"],"sources":["src/wc/components/MobileSectionSwitcher/mobile-section-switcher-utils.ts","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css?tag=ds-mobile-section-switcher&encapsulation=scoped","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx"],"sourcesContent":["import { getSelectableTabs, type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';\n\nexport interface MobileSectionPosition {\n selectedIndex: number;\n selected?: TabItemTab;\n hasPrevious: boolean;\n hasNext: boolean;\n}\n\n/** Resolve ordered selectable neighbors while ignoring visual divider entries. */\nexport function resolveMobileSectionPosition(\n sections: TabItem[],\n value: string\n): MobileSectionPosition {\n const selectable = getSelectableTabs(sections);\n const matchedIndex = selectable.findIndex(section => section.id === value);\n const selectedIndex = matchedIndex >= 0 ? matchedIndex : 0;\n return {\n selectedIndex,\n selected: selectable[selectedIndex],\n hasPrevious: selectedIndex > 0,\n hasNext: selectedIndex < selectable.length - 1,\n };\n}\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n\n:host {\n display: block;\n min-width: 0;\n max-width: 100%;\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n appearance: none;\n display: grid;\n grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n max-width: 100%;\n min-height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n border: 0;\n border-radius: var(--dimension-radius-100);\n background: var(--color-background-secondary);\n color: inherit;\n box-sizing: border-box;\n cursor: default;\n}\n\n.mobile-section-switcher__label {\n min-width: 0;\n max-width: 100%;\n text-align: center;\n}\n\n.mobile-section-switcher__position {\n width: var(--dimension-size-050);\n height: var(--dimension-size-050);\n border-radius: var(--dimension-radius-half);\n background: currentColor;\n opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n opacity: 1;\n}\n\n.mobile-section-switcher--sheet {\n grid-template-columns: minmax(0, auto);\n min-height: var(--dimension-size-500);\n padding-inline: var(--dimension-space-150);\n border-radius: var(--dimension-radius-half);\n background: transparent;\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.mobile-section-switcher--combined {\n display: flex;\n}\n\n.mobile-section-switcher__page-label {\n flex: 0 1 auto;\n min-width: 0;\n}\n\n.mobile-section-switcher__separator {\n flex: 0 0 auto;\n}\n\n.mobile-section-switcher--combined .mobile-section-switcher__label {\n flex: 0 0 auto;\n max-width: 50%;\n}\n\n.mobile-section-sheet {\n position: fixed;\n inset: 0 0 auto;\n width: 100%;\n max-width: none;\n max-height: calc(100dvh - var(--dimension-size-500) - var(--dimension-space-200));\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n box-sizing: border-box;\n overflow: visible;\n background: transparent;\n color: var(--color-foreground-secondary);\n outline: none;\n}\n\n.mobile-section-sheet[open] {\n display: flex;\n flex-direction: column;\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__items {\n animation: mobileSectionSheetIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet::backdrop {\n background: var(--color-background-shade);\n animation: mobileSectionShadeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__items {\n animation-name: mobileSectionSheetOut;\n}\n\n.mobile-section-sheet--closing::backdrop {\n animation-name: mobileSectionShadeOut;\n}\n\n.mobile-section-sheet__items {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-height: 0;\n max-height: inherit;\n box-sizing: border-box;\n background: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-floating);\n padding: var(--dimension-space-100);\n padding-block-start: max(var(--dimension-space-100), env(safe-area-inset-top, 0px));\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.mobile-section-sheet__item {\n appearance: none;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--ds-control-height);\n width: 100%;\n min-width: 0;\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: 0;\n border-radius: var(--ds-control-radius);\n background: transparent;\n color: inherit;\n text-align: start;\n}\n\n.mobile-section-sheet__item[aria-current='page'] {\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-sheet__item:disabled {\n color: var(--color-foreground-tertiary);\n}\n\n.mobile-section-sheet__label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-section-sheet__divider {\n flex: 0 0 auto;\n height: var(--dimension-stroke-width-012);\n margin-inline: var(--dimension-space-100);\n background: var(--color-border-tertiary);\n}\n\n@keyframes mobileSectionSheetIn {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes mobileSectionSheetOut {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n\n@keyframes mobileSectionShadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes mobileSectionShadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n/* Safari can preserve :focus-visible across modal entry and focus return after\n * a tap. Track the actual input, while leaving focus and keyboard access intact. */\n:host(.mobile-section-switcher--pointer-focus) .ds-focus-ring-inset::after {\n outline: none;\n}\n\n/* Keep this opaque strip in the modal top layer, outside the moving sheet.\n * Safari samples fixed edge backgrounds to tint its browser controls. */\n.mobile-section-sheet__browser-edge {\n position: fixed;\n inset: auto 0 0;\n height: max(var(--dimension-space-200), env(safe-area-inset-bottom, 0px));\n pointer-events: none;\n color: var(--color-background-primary);\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__browser-edge {\n animation: mobileSectionEdgeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__browser-edge {\n animation-name: mobileSectionEdgeOut;\n}\n\n/* Animate the opaque color, not opacity: the backdrop is already fading below. */\n@keyframes mobileSectionEdgeIn {\n from {\n background-color: var(--color-background-primary);\n }\n to {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n}\n\n@keyframes mobileSectionEdgeOut {\n from {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n to {\n background-color: var(--color-background-primary);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mobile-section-sheet[open] .mobile-section-sheet__items,\n .mobile-section-sheet[open] .mobile-section-sheet__browser-edge,\n .mobile-section-sheet::backdrop {\n animation: none;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n tag: 'ds-mobile-section-switcher',\n styleUrl: 'MobileSectionSwitcher.css',\n scoped: true,\n})\nexport class MobileSectionSwitcher {\n @Element() el!: HTMLElement;\n\n /** Ordered controlled sections. Divider entries group the popup menu. */\n @Prop() sections: TabItem[] = [];\n /** Controlled selected section id. */\n @Prop() value: string = '';\n /** Accessible name for the section chooser. */\n @Prop() navigationLabel: string = 'Change page section';\n /** Anchored local-view menu or viewport-edge sheet for primary page sections. */\n @Prop() presentation: 'menu' | 'sheet' = 'menu';\n /** Stable page identity shown before the selected section in a sheet trigger. */\n @Prop() pageLabel: string = '';\n\n /** Selection intent. The route, tool, or workflow owner updates `value`. */\n @Event() dsChange!: EventEmitter<string>;\n\n @State() private menuOpen = false;\n @State() private menuSurfaceOpen = false;\n @State() private initialFocusVisible = false;\n @State() private pointerFocus = false;\n @State() private sheetClosing = false;\n @State() private focusedSection = '';\n\n private readonly instanceId = nextMobileSectionSwitcherId++;\n private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n private triggerEl: HTMLButtonElement | null = null;\n private dialogEl: HTMLDialogElement | null = null;\n private browserEdgeEl: HTMLDivElement | null = null;\n private browserEdgeColors = '';\n private themeObserver?: MutationObserver;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private visibilityObserver?: ResizeObserver;\n private loaded = false;\n private boundDocument?: Document;\n private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (['Shift', 'Control', 'Alt', 'Meta'].includes(event.key)) return;\n this.pointerFocus = false;\n };\n\n componentDidLoad() {\n this.loaded = true;\n this.connectResources();\n }\n\n connectedCallback() {\n if (this.loaded) this.connectResources();\n }\n\n private connectResources() {\n if (!this.el.isConnected || this.boundDocument) return;\n this.boundDocument = this.el.ownerDocument;\n this.boundDocument.addEventListener('keydown', this.handleDocumentKeyDown, true);\n this.visibilityObserver = new ResizeObserver(\n this.tasks.guard(() => {\n if (this.dialogEl?.open && !this.triggerEl?.getClientRects().length) {\n this.finishSheetClose(false);\n }\n })\n );\n this.visibilityObserver.observe(this.el);\n }\n\n componentDidRender() {\n if (!this.el.isConnected || !this.dialogEl) return;\n if (this.presentation === 'sheet' && this.menuOpen && !this.dialogEl.open) {\n const initialSection = this.focusedSection;\n this.updateBrowserEdgeColor();\n this.observeBrowserEdgeTheme();\n this.dialogEl.showModal();\n this.focusSheetItem(initialSection);\n }\n if (this.sheetClosing && this.dialogEl.open && !this.closeTimer) {\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (!duration) this.finishSheetClose();\n else this.closeTimer = setTimeout(() => this.finishSheetClose(), duration);\n }\n }\n\n disconnectedCallback() {\n this.tasks.cancel();\n this.boundDocument?.removeEventListener('keydown', this.handleDocumentKeyDown, true);\n this.boundDocument = undefined;\n this.visibilityObserver?.disconnect();\n this.visibilityObserver = undefined;\n this.pointerFocus = false;\n this.menuSurfaceOpen = false;\n this.finishSheetClose(false);\n }\n\n @Watch('presentation')\n handlePresentationChange() {\n this.menuSurfaceOpen = false;\n this.closeMenu();\n }\n\n @Watch('value')\n @Watch('pageLabel')\n handleContextChange() {\n this.closeMenu();\n }\n\n private finishSheetClose(restoreFocus = true) {\n if (this.closeTimer) clearTimeout(this.closeTimer);\n this.closeTimer = null;\n const wasOpen = this.dialogEl?.open;\n this.dialogEl?.close();\n this.themeObserver?.disconnect();\n this.menuOpen = false;\n this.sheetClosing = false;\n if (wasOpen && restoreFocus && this.triggerEl?.getClientRects().length) this.triggerEl.focus();\n }\n\n private updateBrowserEdgeColor = () => {\n if (!this.el.isConnected || !this.browserEdgeEl || !this.dialogEl) return;\n const base = getComputedStyle(this.browserEdgeEl).color;\n const shade = getComputedStyle(this.dialogEl, '::backdrop').backgroundColor;\n const colors = `${base}|${shade}`;\n if (colors === this.browserEdgeColors) return;\n // Let the browser resolve token colors, including alpha and non-sRGB syntax,\n // then flatten the shade over the bar into the opaque color Safari samples.\n const canvas = this.el.ownerDocument.createElement('canvas');\n canvas.width = canvas.height = 1;\n const context = canvas.getContext('2d');\n if (!context) return;\n context.fillStyle = base;\n context.fillRect(0, 0, 1, 1);\n context.fillStyle = shade;\n context.fillRect(0, 0, 1, 1);\n const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;\n this.browserEdgeEl.style.setProperty(\n '--_mobile-section-edge-color',\n `rgb(${red}, ${green}, ${blue})`\n );\n this.browserEdgeColors = colors;\n };\n\n private observeBrowserEdgeTheme() {\n this.themeObserver ??= new MutationObserver(this.updateBrowserEdgeColor);\n // Token themes are inherited from the page or a containing theme scope.\n for (let ancestor: HTMLElement | null = this.el; ancestor; ancestor = ancestor.parentElement) {\n this.themeObserver.observe(ancestor, {\n attributes: true,\n attributeFilter: ['class', 'style', 'data-theme'],\n });\n }\n }\n\n private focusSheetItem(id: string) {\n const buttons = Array.from(this.dialogEl?.querySelectorAll<HTMLButtonElement>('button') ?? []);\n const button =\n buttons.find(item => item.value === id && !item.disabled) ??\n buttons.find(item => !item.disabled);\n if (button) {\n this.focusedSection = button.value;\n button.focus();\n } else this.dialogEl?.focus();\n }\n\n private handleSheetKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n this.closeMenu();\n return;\n }\n const sections = this.selectableSections.filter(section => !section.isInactive);\n if (!sections.length) return;\n const index = Math.max(\n 0,\n sections.findIndex(section => section.id === this.focusedSection)\n );\n let next: number;\n if (event.key === 'ArrowDown') next = (index + 1) % sections.length;\n else if (event.key === 'ArrowUp') next = (index + sections.length - 1) % sections.length;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = sections.length - 1;\n else if (event.key === 'Tab') next = index;\n else if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey &&\n event.key !== ' '\n ) {\n const match = sections.findIndex((_, offset) =>\n sections[(index + offset + 1) % sections.length].label\n .toLowerCase()\n .startsWith(event.key.toLowerCase())\n );\n if (match < 0) return;\n next = (index + match + 1) % sections.length;\n } else return;\n event.preventDefault();\n this.initialFocusVisible = true;\n this.focusSheetItem(sections[next].id);\n };\n\n private get resolvedSections(): TabItem[] {\n return this.sections ?? [];\n }\n\n private get selectableSections(): TabItemTab[] {\n return getSelectableTabs(this.resolvedSections);\n }\n\n private get selectedIndex(): number {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n }\n\n private get selectedSection(): TabItemTab | undefined {\n return this.selectableSections[this.selectedIndex];\n }\n\n private get hasPrevious(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n }\n\n private get hasNext(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n }\n\n private get triggerAriaLabel(): string {\n return `${this.presentation === 'sheet' && this.pageLabel ? `${this.pageLabel}. ` : ''}${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n }\n\n private get menuSections(): MenuSection[] {\n const groups: MenuSection[] = [];\n let items: MenuItemData[] = [];\n const commit = () => {\n if (items.length) groups.push({ items });\n items = [];\n };\n\n for (const section of this.resolvedSections) {\n if (isTabDivider(section)) {\n commit();\n continue;\n }\n items.push({\n label: section.label,\n value: section.id,\n dot: section.dot,\n isSelected: section.id === this.selectedSection?.id,\n isInactive: section.isInactive,\n });\n }\n commit();\n return groups;\n }\n\n @Watch('sections')\n handleSectionsChange() {\n if (this.selectableSections.length <= 1) {\n this.closeMenu();\n this.menuSurfaceOpen = false;\n } else if (this.dialogEl?.open && !this.sheetClosing) {\n this.tasks.frame(() => {\n if (this.dialogEl?.open && !this.sheetClosing) this.focusSheetItem(this.focusedSection);\n });\n }\n }\n\n private toggleMenu = (event: MouseEvent) => {\n if (this.selectableSections.length <= 1) return;\n this.initialFocusVisible = event.detail === 0;\n if (this.presentation === 'sheet') {\n if (this.menuOpen) this.closeMenu();\n else {\n this.focusedSection = this.selectedSection?.id ?? '';\n this.menuOpen = true;\n }\n return;\n }\n this.menuOpen = !this.menuOpen;\n if (this.menuOpen) this.menuSurfaceOpen = true;\n };\n\n private closeMenu = () => {\n this.menuOpen = false;\n if (this.dialogEl?.open) this.sheetClosing = true;\n };\n\n private renderSheet() {\n return (\n <dialog\n id={this.menuId}\n ref={element => {\n this.dialogEl = element ?? null;\n }}\n class={{ 'mobile-section-sheet': true, 'mobile-section-sheet--closing': this.sheetClosing }}\n aria-label={this.navigationLabel}\n tabIndex={-1}\n onCancel={event => {\n event.preventDefault();\n this.closeMenu();\n }}\n onKeyDown={this.handleSheetKeyDown}\n onClick={event => {\n if (!this.dialogEl || event.target !== this.dialogEl) return;\n const rect = this.dialogEl.getBoundingClientRect();\n if (\n event.clientY < rect.top ||\n event.clientY > rect.bottom ||\n event.clientX < rect.left ||\n event.clientX > rect.right\n )\n this.closeMenu();\n }}\n >\n <div class=\"mobile-section-sheet__items\" role=\"menu\" aria-label={this.navigationLabel}>\n {this.resolvedSections.map(section =>\n isTabDivider(section) ? (\n <div class=\"mobile-section-sheet__divider\" role=\"separator\" />\n ) : (\n <button\n type=\"button\"\n role=\"menuitem\"\n value={section.id}\n disabled={section.isInactive}\n aria-current={section.id === this.selectedSection?.id ? 'page' : undefined}\n tabIndex={section.id === this.focusedSection ? 0 : -1}\n class={{\n 'mobile-section-sheet__item': true,\n 'ds-control--lg': true,\n 'ds-interaction-fill': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible':\n this.initialFocusVisible && section.id === this.focusedSection,\n }}\n onFocus={() => {\n this.focusedSection = section.id;\n }}\n onClick={() => {\n if (this.sheetClosing || section.isInactive) return;\n this.closeMenu();\n if (section.id !== this.selectedSection?.id) this.dsChange.emit(section.id);\n }}\n >\n <ds-text\n class=\"mobile-section-sheet__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n color=\"inherit\"\n emphasis={section.id === this.selectedSection?.id}\n lineTruncation={1}\n >\n {section.label}\n </ds-text>\n </button>\n )\n )}\n </div>\n <div\n ref={element => {\n if (this.browserEdgeEl !== element) this.browserEdgeColors = '';\n this.browserEdgeEl = element ?? null;\n }}\n class=\"mobile-section-sheet__browser-edge\"\n aria-hidden=\"true\"\n />\n </dialog>\n );\n }\n\n private handleSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail.value ?? '');\n const section = this.selectableSections.find(candidate => candidate.id === id);\n if (!section || section.isInactive) return;\n this.closeMenu();\n if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n this.tasks.frame(() => this.triggerEl?.focus());\n };\n\n render() {\n const selected = this.selectedSection;\n if (!selected) return <Host />;\n const combined = this.presentation === 'sheet' && !!this.pageLabel;\n\n return (\n <Host\n class={{ 'mobile-section-switcher--pointer-focus': this.pointerFocus }}\n onPointerDown={() => {\n this.pointerFocus = true;\n this.initialFocusVisible = false;\n }}\n >\n <button\n ref={element => {\n this.triggerEl = element ?? null;\n }}\n id={this.triggerId}\n class={{\n 'mobile-section-switcher': true,\n 'mobile-section-switcher--expanded': this.menuOpen,\n 'ds-interaction-fill--surface-open':\n this.menuSurfaceOpen || this.menuOpen || this.sheetClosing,\n 'mobile-section-switcher--sheet': this.presentation === 'sheet',\n 'mobile-section-switcher--combined': combined,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n type=\"button\"\n aria-haspopup={this.presentation === 'sheet' ? 'dialog' : 'menu'}\n aria-controls={this.menuId}\n aria-expanded={String(this.menuOpen)}\n aria-label={this.triggerAriaLabel}\n onClick={this.toggleMenu}\n >\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasPrevious,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n {combined\n ? [\n <ds-text\n class=\"mobile-section-switcher__page-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {this.pageLabel}\n </ds-text>,\n <ds-text\n class=\"mobile-section-switcher__separator ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n color=\"inherit\"\n aria-hidden=\"true\"\n >\n ·\n </ds-text>,\n ]\n : null}\n <ds-text\n class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n as=\"span\"\n variant={this.presentation === 'sheet' ? 'text-body-large' : 'text-body-medium'}\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {selected.label}\n </ds-text>\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasNext,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n </button>\n\n {this.presentation === 'sheet' || this.sheetClosing ? (\n this.renderSheet()\n ) : this.selectableSections.length > 1 ? (\n <ds-menu\n id={this.menuId}\n anchorId={this.triggerId}\n align=\"center\"\n menuLabel={this.navigationLabel}\n open={this.menuOpen}\n initialFocusVisible={this.initialFocusVisible}\n sections={this.menuSections}\n onDsClose={this.closeMenu}\n onDsAfterClose={() => {\n if (!this.menuOpen) this.menuSurfaceOpen = false;\n }}\n onDsSelect={this.handleSelect}\n />\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["resolveMobileSectionPosition","sections","value","selectable","getSelectableTabs","matchedIndex","findIndex","section","id","selectedIndex","selected","hasPrevious","hasNext","length","mobileSectionSwitcherCss","nextMobileSectionSwitcherId","MobileSectionSwitcher","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navigationLabel","presentation","pageLabel","menuOpen","menuSurfaceOpen","initialFocusVisible","pointerFocus","sheetClosing","focusedSection","instanceId","triggerId","menuId","triggerEl","dialogEl","browserEdgeEl","browserEdgeColors","closeTimer","loaded","tasks","ConnectionTasks","el","isConnected","handleDocumentKeyDown","event","includes","key","updateBrowserEdgeColor","base","getComputedStyle","color","shade","backgroundColor","colors","canvas","ownerDocument","createElement","width","height","context","getContext","fillStyle","fillRect","red","green","blue","getImageData","data","style","setProperty","handleSheetKeyDown","preventDefault","stopPropagation","closeMenu","selectableSections","filter","isInactive","index","Math","max","next","ctrlKey","metaKey","altKey","match","_","offset","label","toLowerCase","startsWith","focusSheetItem","toggleMenu","detail","selectedSection","open","handleSelect","String","find","candidate","dsChange","emit","frame","focus","componentDidLoad","connectResources","connectedCallback","boundDocument","addEventListener","visibilityObserver","ResizeObserver","guard","getClientRects","finishSheetClose","observe","componentDidRender","initialSection","observeBrowserEdgeTheme","showModal","duration","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort2","animationDurationShort3","setTimeout","disconnectedCallback","cancel","removeEventListener","undefined","disconnect","handlePresentationChange","handleContextChange","restoreFocus","clearTimeout","wasOpen","close","themeObserver","MutationObserver","ancestor","parentElement","attributes","attributeFilter","buttons","Array","from","querySelectorAll","button","item","disabled","resolvedSections","triggerAriaLabel","menuSections","groups","items","commit","push","isTabDivider","dot","isSelected","handleSectionsChange","renderSheet","h","ref","element","class","tabIndex","onCancel","onKeyDown","onClick","target","rect","getBoundingClientRect","clientY","top","bottom","clientX","left","right","role","map","type","onFocus","as","variant","emphasis","lineTruncation","render","Host","combined","onPointerDown","anchorId","align","menuLabel","onDsClose","onDsAfterClose","onDsSelect"],"sources":["src/wc/components/MobileSectionSwitcher/mobile-section-switcher-utils.ts","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css?tag=ds-mobile-section-switcher&encapsulation=scoped","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx"],"sourcesContent":["import { getSelectableTabs, type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';\n\nexport interface MobileSectionPosition {\n selectedIndex: number;\n selected?: TabItemTab;\n hasPrevious: boolean;\n hasNext: boolean;\n}\n\n/** Resolve ordered selectable neighbors while ignoring visual divider entries. */\nexport function resolveMobileSectionPosition(\n sections: TabItem[],\n value: string\n): MobileSectionPosition {\n const selectable = getSelectableTabs(sections);\n const matchedIndex = selectable.findIndex(section => section.id === value);\n const selectedIndex = matchedIndex >= 0 ? matchedIndex : 0;\n return {\n selectedIndex,\n selected: selectable[selectedIndex],\n hasPrevious: selectedIndex > 0,\n hasNext: selectedIndex < selectable.length - 1,\n };\n}\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n\n:host {\n display: block;\n min-width: 0;\n max-width: 100%;\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n appearance: none;\n display: grid;\n grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n max-width: 100%;\n min-height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n border: 0;\n border-radius: var(--dimension-radius-100);\n background: var(--color-background-secondary);\n color: inherit;\n box-sizing: border-box;\n cursor: default;\n}\n\n.mobile-section-switcher__label {\n min-width: 0;\n max-width: 100%;\n text-align: center;\n}\n\n.mobile-section-switcher__position {\n width: var(--dimension-size-050);\n height: var(--dimension-size-050);\n border-radius: var(--dimension-radius-half);\n background: currentColor;\n opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n opacity: 1;\n}\n\n.mobile-section-switcher--sheet {\n grid-template-columns: minmax(0, auto);\n min-height: var(--dimension-size-500);\n padding-inline: var(--dimension-space-150);\n border-radius: var(--dimension-radius-half);\n background: transparent;\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.mobile-section-switcher--combined {\n display: flex;\n}\n\n.mobile-section-switcher__page-label {\n flex: 0 1 auto;\n min-width: 0;\n}\n\n.mobile-section-switcher__separator {\n flex: 0 0 auto;\n}\n\n.mobile-section-switcher--combined .mobile-section-switcher__label {\n flex: 0 0 auto;\n max-width: 50%;\n}\n\n.mobile-section-sheet {\n position: fixed;\n inset: 0 0 auto;\n width: 100%;\n max-width: none;\n max-height: calc(100dvh - var(--dimension-size-500) - var(--dimension-space-200));\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n box-sizing: border-box;\n overflow: visible;\n background: transparent;\n color: var(--color-foreground-secondary);\n outline: none;\n}\n\n.mobile-section-sheet[open] {\n display: flex;\n flex-direction: column;\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__items {\n animation: mobileSectionSheetIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet::backdrop {\n background: var(--color-background-shade);\n animation: mobileSectionShadeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__items {\n animation-name: mobileSectionSheetOut;\n}\n\n.mobile-section-sheet--closing::backdrop {\n animation-name: mobileSectionShadeOut;\n}\n\n.mobile-section-sheet__items {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-height: 0;\n max-height: inherit;\n box-sizing: border-box;\n background: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-floating);\n padding: var(--dimension-space-100);\n padding-block-start: max(var(--dimension-space-100), env(safe-area-inset-top, 0px));\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.mobile-section-sheet__item {\n appearance: none;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--ds-control-height);\n width: 100%;\n min-width: 0;\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: 0;\n border-radius: var(--ds-control-radius);\n background: transparent;\n color: inherit;\n text-align: start;\n}\n\n.mobile-section-sheet__item[aria-current='page'] {\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-sheet__item:disabled {\n color: var(--color-foreground-tertiary);\n}\n\n.mobile-section-sheet__label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-section-sheet__divider {\n flex: 0 0 auto;\n height: var(--dimension-stroke-width-012);\n margin-inline: var(--dimension-space-100);\n background: var(--color-border-tertiary);\n}\n\n@keyframes mobileSectionSheetIn {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes mobileSectionSheetOut {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n\n@keyframes mobileSectionShadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes mobileSectionShadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n/* Safari can preserve :focus-visible across modal entry and focus return after\n * a tap. Track the actual input, while leaving focus and keyboard access intact. */\n:host(.mobile-section-switcher--pointer-focus) .ds-focus-ring-inset::after {\n outline: none;\n}\n\n/* Keep this opaque strip in the modal top layer, outside the moving sheet.\n * Safari samples fixed edge backgrounds to tint its browser controls. */\n.mobile-section-sheet__browser-edge {\n position: fixed;\n inset: auto 0 0;\n height: max(var(--dimension-space-200), env(safe-area-inset-bottom, 0px));\n pointer-events: none;\n color: var(--color-background-primary);\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__browser-edge {\n animation: mobileSectionEdgeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__browser-edge {\n animation-name: mobileSectionEdgeOut;\n}\n\n/* Animate the opaque color, not opacity: the backdrop is already fading below. */\n@keyframes mobileSectionEdgeIn {\n from {\n background-color: var(--color-background-primary);\n }\n to {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n}\n\n@keyframes mobileSectionEdgeOut {\n from {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n to {\n background-color: var(--color-background-primary);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mobile-section-sheet[open] .mobile-section-sheet__items,\n .mobile-section-sheet[open] .mobile-section-sheet__browser-edge,\n .mobile-section-sheet::backdrop {\n animation: none;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n tag: 'ds-mobile-section-switcher',\n styleUrl: 'MobileSectionSwitcher.css',\n scoped: true,\n})\nexport class MobileSectionSwitcher {\n @Element() el!: HTMLElement;\n\n /** Ordered controlled sections. Divider entries group the popup menu. */\n @Prop() sections: TabItem[] = [];\n /** Controlled selected section id. */\n @Prop() value: string = '';\n /** Accessible name for the section chooser. */\n @Prop() navigationLabel: string = 'Change page section';\n /** Anchored local-view menu or viewport-edge sheet for primary page sections. */\n @Prop() presentation: 'menu' | 'sheet' = 'menu';\n /** Stable page identity shown before the selected section in a sheet trigger. */\n @Prop() pageLabel: string = '';\n\n /** Selection intent. The route, tool, or workflow owner updates `value`. */\n @Event() dsChange!: EventEmitter<string>;\n\n @State() private menuOpen = false;\n @State() private menuSurfaceOpen = false;\n @State() private initialFocusVisible = false;\n @State() private pointerFocus = false;\n @State() private sheetClosing = false;\n @State() private focusedSection = '';\n\n private readonly instanceId = nextMobileSectionSwitcherId++;\n private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n private triggerEl: HTMLButtonElement | null = null;\n private dialogEl: HTMLDialogElement | null = null;\n private browserEdgeEl: HTMLDivElement | null = null;\n private browserEdgeColors = '';\n private themeObserver?: MutationObserver;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private visibilityObserver?: ResizeObserver;\n private loaded = false;\n private boundDocument?: Document;\n private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (['Shift', 'Control', 'Alt', 'Meta'].includes(event.key)) return;\n this.pointerFocus = false;\n };\n\n componentDidLoad() {\n this.loaded = true;\n this.connectResources();\n }\n\n connectedCallback() {\n if (this.loaded) this.connectResources();\n }\n\n private connectResources() {\n if (!this.el.isConnected || this.boundDocument) return;\n this.boundDocument = this.el.ownerDocument;\n this.boundDocument.addEventListener('keydown', this.handleDocumentKeyDown, true);\n this.visibilityObserver = new ResizeObserver(\n this.tasks.guard(() => {\n if (this.dialogEl?.open && !this.triggerEl?.getClientRects().length) {\n this.finishSheetClose(false);\n }\n })\n );\n this.visibilityObserver.observe(this.el);\n }\n\n componentDidRender() {\n if (!this.el.isConnected || !this.dialogEl) return;\n if (this.presentation === 'sheet' && this.menuOpen && !this.dialogEl.open) {\n const initialSection = this.focusedSection;\n this.updateBrowserEdgeColor();\n this.observeBrowserEdgeTheme();\n this.dialogEl.showModal();\n this.focusSheetItem(initialSection);\n }\n if (this.sheetClosing && this.dialogEl.open && !this.closeTimer) {\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (!duration) this.finishSheetClose();\n else this.closeTimer = setTimeout(() => this.finishSheetClose(), duration);\n }\n }\n\n disconnectedCallback() {\n this.tasks.cancel();\n this.boundDocument?.removeEventListener('keydown', this.handleDocumentKeyDown, true);\n this.boundDocument = undefined;\n this.visibilityObserver?.disconnect();\n this.visibilityObserver = undefined;\n this.pointerFocus = false;\n this.menuSurfaceOpen = false;\n this.finishSheetClose(false);\n }\n\n @Watch('presentation')\n handlePresentationChange() {\n this.menuSurfaceOpen = false;\n this.closeMenu();\n }\n\n @Watch('value')\n @Watch('pageLabel')\n handleContextChange() {\n this.closeMenu();\n }\n\n private finishSheetClose(restoreFocus = true) {\n if (this.closeTimer) clearTimeout(this.closeTimer);\n this.closeTimer = null;\n const wasOpen = this.dialogEl?.open;\n this.dialogEl?.close();\n this.themeObserver?.disconnect();\n this.menuOpen = false;\n this.sheetClosing = false;\n if (wasOpen && restoreFocus && this.triggerEl?.getClientRects().length) this.triggerEl.focus();\n }\n\n private updateBrowserEdgeColor = () => {\n if (!this.el.isConnected || !this.browserEdgeEl || !this.dialogEl) return;\n const base = getComputedStyle(this.browserEdgeEl).color;\n const shade = getComputedStyle(this.dialogEl, '::backdrop').backgroundColor;\n const colors = `${base}|${shade}`;\n if (colors === this.browserEdgeColors) return;\n // Let the browser resolve token colors, including alpha and non-sRGB syntax,\n // then flatten the shade over the bar into the opaque color Safari samples.\n const canvas = this.el.ownerDocument.createElement('canvas');\n canvas.width = canvas.height = 1;\n const context = canvas.getContext('2d');\n if (!context) return;\n context.fillStyle = base;\n context.fillRect(0, 0, 1, 1);\n context.fillStyle = shade;\n context.fillRect(0, 0, 1, 1);\n const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;\n this.browserEdgeEl.style.setProperty(\n '--_mobile-section-edge-color',\n `rgb(${red}, ${green}, ${blue})`\n );\n this.browserEdgeColors = colors;\n };\n\n private observeBrowserEdgeTheme() {\n this.themeObserver ??= new MutationObserver(this.updateBrowserEdgeColor);\n // Token themes are inherited from the page or a containing theme scope.\n for (let ancestor: HTMLElement | null = this.el; ancestor; ancestor = ancestor.parentElement) {\n this.themeObserver.observe(ancestor, {\n attributes: true,\n attributeFilter: ['class', 'style', 'data-theme'],\n });\n }\n }\n\n private focusSheetItem(id: string) {\n const buttons = Array.from(this.dialogEl?.querySelectorAll<HTMLButtonElement>('button') ?? []);\n const button =\n buttons.find(item => item.value === id && !item.disabled) ??\n buttons.find(item => !item.disabled);\n if (button) {\n this.focusedSection = button.value;\n button.focus();\n } else this.dialogEl?.focus();\n }\n\n private handleSheetKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n this.closeMenu();\n return;\n }\n const sections = this.selectableSections.filter(section => !section.isInactive);\n if (!sections.length) return;\n const index = Math.max(\n 0,\n sections.findIndex(section => section.id === this.focusedSection)\n );\n let next: number;\n if (event.key === 'ArrowDown') next = (index + 1) % sections.length;\n else if (event.key === 'ArrowUp') next = (index + sections.length - 1) % sections.length;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = sections.length - 1;\n else if (event.key === 'Tab') next = index;\n else if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey &&\n event.key !== ' '\n ) {\n const match = sections.findIndex((_, offset) =>\n sections[(index + offset + 1) % sections.length].label\n .toLowerCase()\n .startsWith(event.key.toLowerCase())\n );\n if (match < 0) return;\n next = (index + match + 1) % sections.length;\n } else return;\n event.preventDefault();\n this.initialFocusVisible = true;\n this.focusSheetItem(sections[next].id);\n };\n\n private get resolvedSections(): TabItem[] {\n return this.sections ?? [];\n }\n\n private get selectableSections(): TabItemTab[] {\n return getSelectableTabs(this.resolvedSections);\n }\n\n private get selectedIndex(): number {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n }\n\n private get selectedSection(): TabItemTab | undefined {\n return this.selectableSections[this.selectedIndex];\n }\n\n private get hasPrevious(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n }\n\n private get hasNext(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n }\n\n private get triggerAriaLabel(): string {\n return `${this.presentation === 'sheet' && this.pageLabel ? `${this.pageLabel}. ` : ''}${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n }\n\n private get menuSections(): MenuSection[] {\n const groups: MenuSection[] = [];\n let items: MenuItemData[] = [];\n const commit = () => {\n if (items.length) groups.push({ items });\n items = [];\n };\n\n for (const section of this.resolvedSections) {\n if (isTabDivider(section)) {\n commit();\n continue;\n }\n items.push({\n label: section.label,\n value: section.id,\n dot: section.dot,\n isSelected: section.id === this.selectedSection?.id,\n isInactive: section.isInactive,\n });\n }\n commit();\n return groups;\n }\n\n @Watch('sections')\n handleSectionsChange() {\n if (this.selectableSections.length <= 1) {\n this.closeMenu();\n this.menuSurfaceOpen = false;\n } else if (this.dialogEl?.open && !this.sheetClosing) {\n this.tasks.frame(() => {\n if (this.dialogEl?.open && !this.sheetClosing) this.focusSheetItem(this.focusedSection);\n });\n }\n }\n\n private toggleMenu = (event: MouseEvent) => {\n if (this.selectableSections.length <= 1) return;\n this.initialFocusVisible = event.detail === 0;\n if (this.presentation === 'sheet') {\n if (this.menuOpen) this.closeMenu();\n else {\n this.focusedSection = this.selectedSection?.id ?? '';\n this.menuOpen = true;\n }\n return;\n }\n this.menuOpen = !this.menuOpen;\n if (this.menuOpen) this.menuSurfaceOpen = true;\n };\n\n private closeMenu = () => {\n this.menuOpen = false;\n if (this.dialogEl?.open) this.sheetClosing = true;\n };\n\n private renderSheet() {\n return (\n <dialog\n id={this.menuId}\n ref={element => {\n this.dialogEl = element ?? null;\n }}\n class={{ 'mobile-section-sheet': true, 'mobile-section-sheet--closing': this.sheetClosing }}\n aria-label={this.navigationLabel}\n tabIndex={-1}\n onCancel={event => {\n event.preventDefault();\n this.closeMenu();\n }}\n onKeyDown={this.handleSheetKeyDown}\n onClick={event => {\n if (!this.dialogEl || event.target !== this.dialogEl) return;\n const rect = this.dialogEl.getBoundingClientRect();\n if (\n event.clientY < rect.top ||\n event.clientY > rect.bottom ||\n event.clientX < rect.left ||\n event.clientX > rect.right\n )\n this.closeMenu();\n }}\n >\n <div class=\"mobile-section-sheet__items\" role=\"menu\" aria-label={this.navigationLabel}>\n {this.resolvedSections.map(section =>\n isTabDivider(section) ? (\n <div class=\"mobile-section-sheet__divider\" role=\"separator\" />\n ) : (\n <button\n type=\"button\"\n role=\"menuitem\"\n value={section.id}\n disabled={section.isInactive}\n aria-current={section.id === this.selectedSection?.id ? 'page' : undefined}\n tabIndex={section.id === this.focusedSection ? 0 : -1}\n class={{\n 'mobile-section-sheet__item': true,\n 'ds-control--lg': true,\n 'ds-interaction-fill': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible':\n this.initialFocusVisible && section.id === this.focusedSection,\n }}\n onFocus={() => {\n this.focusedSection = section.id;\n }}\n onClick={() => {\n if (this.sheetClosing || section.isInactive) return;\n this.closeMenu();\n if (section.id !== this.selectedSection?.id) this.dsChange.emit(section.id);\n }}\n >\n <ds-text\n class=\"mobile-section-sheet__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n color=\"inherit\"\n emphasis={section.id === this.selectedSection?.id}\n lineTruncation={1}\n >\n {section.label}\n </ds-text>\n </button>\n )\n )}\n </div>\n <div\n ref={element => {\n if (this.browserEdgeEl !== element) this.browserEdgeColors = '';\n this.browserEdgeEl = element ?? null;\n }}\n class=\"mobile-section-sheet__browser-edge\"\n aria-hidden=\"true\"\n />\n </dialog>\n );\n }\n\n private handleSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail.value ?? '');\n const section = this.selectableSections.find(candidate => candidate.id === id);\n if (!section || section.isInactive) return;\n this.closeMenu();\n if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n this.tasks.frame(() => this.triggerEl?.focus());\n };\n\n render() {\n const selected = this.selectedSection;\n if (!selected) return <Host />;\n const combined = this.presentation === 'sheet' && !!this.pageLabel;\n\n return (\n <Host\n class={{ 'mobile-section-switcher--pointer-focus': this.pointerFocus }}\n onPointerDown={() => {\n this.pointerFocus = true;\n this.initialFocusVisible = false;\n }}\n >\n <button\n ref={element => {\n this.triggerEl = element ?? null;\n }}\n id={this.triggerId}\n class={{\n 'mobile-section-switcher': true,\n 'mobile-section-switcher--expanded': this.menuOpen,\n 'ds-interaction-fill--surface-open':\n this.menuSurfaceOpen || this.menuOpen || this.sheetClosing,\n 'mobile-section-switcher--sheet': this.presentation === 'sheet',\n 'mobile-section-switcher--combined': combined,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n type=\"button\"\n aria-haspopup={this.presentation === 'sheet' ? 'dialog' : 'menu'}\n aria-controls={this.menuId}\n aria-expanded={String(this.menuOpen)}\n aria-label={this.triggerAriaLabel}\n onClick={this.toggleMenu}\n >\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasPrevious,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n {combined\n ? [\n <ds-text\n class=\"mobile-section-switcher__page-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {this.pageLabel}\n </ds-text>,\n <ds-text\n class=\"mobile-section-switcher__separator ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n color=\"inherit\"\n aria-hidden=\"true\"\n >\n ·\n </ds-text>,\n ]\n : null}\n <ds-text\n class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n as=\"span\"\n variant={this.presentation === 'sheet' ? 'text-body-large' : 'text-body-medium'}\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {selected.label}\n </ds-text>\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasNext,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n </button>\n\n {this.presentation === 'sheet' || this.sheetClosing ? (\n this.renderSheet()\n ) : this.selectableSections.length > 1 ? (\n <ds-menu\n id={this.menuId}\n anchorId={this.triggerId}\n align=\"center\"\n menuLabel={this.navigationLabel}\n open={this.menuOpen}\n initialFocusVisible={this.initialFocusVisible}\n sections={this.menuSections}\n onDsClose={this.closeMenu}\n onDsAfterClose={() => {\n if (!this.menuOpen) this.menuSurfaceOpen = false;\n }}\n onDsSelect={this.handleSelect}\n />\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as n,H as e,c as r,h as i,a as s,t as a}from"./index.js";import{d as t}from"./p-CwdRaJER.js";import{d as o}from"./p-D-J7GgjY.js";import{d}from"./p-pPtjNRqC.js";import{d as c}from"./p-0XTyQNRG.js";import{d as l}from"./p-D8OWhnID.js";import{d as f}from"./p-DvGrsLgt.js";const u=[{label:"Today",value:"today",days:1,offset:0},{label:"Yesterday",value:"yesterday",days:1,offset:-1},{label:"Last 7 days",value:"last-7-days",days:7,offset:0},{label:"Last 14 days",value:"last-14-days",days:14,offset:0},{label:"Last 30 days",value:"last-30-days",days:30,offset:0},{label:"Last 60 days",value:"last-60-days",days:60,offset:0},{label:"Last 90 days",value:"last-90-days",days:90,offset:0}];const v=/^\d{4}-\d{2}-\d{2}$/;const h=new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric",timeZone:"UTC"});function g(n){if(typeof n!=="string"||!v.test(n))return false;const[e,r,i]=n.split("-").map(Number);if(e<1)return false;const s=new Date(`${n}T00:00:00Z`);return s.getUTCFullYear()===e&&s.getUTCMonth()===r-1&&s.getUTCDate()===i}function m(n){if(!g(n))return"";return h.formatToParts(new Date(`${n}T00:00:00Z`)).map((n=>n.type==="year"?n.value.padStart(4,"0"):n.value)).join("")}const p=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];function b(n){if(typeof n!=="string")return"";const e=n.trim();if(!e)return"";if(g(e))return e;const r=e.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);if(r){const n=`${r[3]}-${r[1].padStart(2,"0")}-${r[2].padStart(2,"0")}`;return g(n)?n:""}const i=e.match(/^([A-Za-z]{3})\s+(\d{1,2}),\s+(\d{4})$/);if(!i)return"";const s=p.indexOf(i[1].toLowerCase());if(s<0)return"";const a=`${i[3]}-${String(s+1).padStart(2,"0")}-${i[2].padStart(2,"0")}`;return g(a)?a:""}function y(n,e){if(!g(n)||!Number.isSafeInteger(e))return"";const r=new Date(`${n}T00:00:00Z`);r.setUTCDate(r.getUTCDate()+e);const i=r.getUTCFullYear();return i>=1&&i<=9999?r.toISOString().slice(0,10):""}function w(n){return`relative:${n}`}function k(n,e=n){const r=n<=e?[n,e]:[e,n];return`range:${r[0]}/${r[1]}`}function x(n){if(typeof n!=="string"||!n)return null;if(n.startsWith("relative:")){const e=n.slice("relative:".length);return u.some((n=>n.value===e))?{kind:"relative",preset:e}:null}if(n.startsWith("range:")){const[e,r,...i]=n.slice("range:".length).split("/");if(i.length||!g(e)||!g(r))return null;return e<=r?{kind:"range",start:e,end:r}:{kind:"range",start:r,end:e}}return g(n)?{kind:"range",start:n,end:n}:null}const $=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];const T=new Intl.DateTimeFormat("en-US",{month:"long",year:"numeric",timeZone:"UTC"});const D=new Intl.DateTimeFormat("en-US",{weekday:"long",month:"long",day:"numeric",year:"numeric",timeZone:"UTC"});function C(){const n=new Date;const e=String(n.getFullYear()).padStart(4,"0");const r=String(n.getMonth()+1).padStart(2,"0");const i=String(n.getDate()).padStart(2,"0");return`${e}-${r}-${i}`}function z(n){return g(n)?n.slice(0,7):C().slice(0,7)}function j(n,e){if(!g(`${n}-01`)||!Number.isSafeInteger(e))return"";const r=new Date(`${n}-01T00:00:00Z`);r.setUTCMonth(r.getUTCMonth()+e);const i=r.getUTCFullYear();return i>=1&&i<=9999?r.toISOString().slice(0,7):""}function E(n){if(!g(`${n}-01`))return"";return T.format(new Date(`${n}-01T00:00:00Z`))}function L(n){if(!g(`${n}-01`))return[];const e=new Date(`${n}-01T00:00:00Z`);const r=e.getUTCDay();return Array.from({length:42},((i,s)=>{const a=new Date(e);a.setUTCDate(1-r+s);const t=a.getUTCFullYear();const o=t>=1&&t<=9999?a.toISOString().slice(0,10):"";return{value:o,day:a.getUTCDate(),inMonth:o.startsWith(`${n}-`),label:o?D.format(a):"Unavailable date"}}))}function Z(n,e,r){return n?e:r}const _=()=>`.sc-ds-calendar-h,.sc-ds-calendar:where(.ds-table),.sc-ds-calendar:where(.tooltip-popup),.sc-ds-calendar: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)}.ds-control--lg.sc-ds-calendar,.ds-control--lg.sc-ds-calendar-h,.ds-control--md.sc-ds-calendar-h,.ds-control--md.sc-ds-calendar,.ds-control--sm.sc-ds-calendar-h,.ds-control--sm.sc-ds-calendar,.ds-control--xs.sc-ds-calendar-h,.ds-control--xs.sc-ds-calendar{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-calendar-h,.ds-control--lg.sc-ds-calendar{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-calendar-h,.ds-control--md.sc-ds-calendar{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-calendar-h,.ds-control--sm.sc-ds-calendar{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-calendar-h,.ds-control--xs.sc-ds-calendar{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-calendar:root,.sc-ds-calendar-h,.ds-forced-colors-scope.sc-ds-calendar{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-calendar-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-calendar-h,.ds-focus-ring.sc-ds-calendar,.ds-focus-ring-inset.sc-ds-calendar-h,.ds-focus-ring-inset.sc-ds-calendar{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-calendar-h:focus-visible,.ds-focus-ring.sc-ds-calendar:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-calendar-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-calendar{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-calendar-h:focus-visible,.ds-focus-ring-inset.sc-ds-calendar:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-calendar-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-calendar:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-calendar-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-calendar{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-calendar-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-calendar::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-calendar-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-calendar:root,.sc-ds-calendar-h,.ds-forced-colors-scope.sc-ds-calendar{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-calendar-h,.ds-interaction-fill.sc-ds-calendar{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-calendar-h::before,.ds-interaction-fill.sc-ds-calendar::before,.ds-interaction-fill.sc-ds-calendar-h::after,.ds-interaction-fill.sc-ds-calendar::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-calendar-h::before,.ds-interaction-fill.sc-ds-calendar::before{z-index:1}.ds-interaction-fill.sc-ds-calendar-h::after,.ds-interaction-fill.sc-ds-calendar::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-calendar-h,.ds-interaction-fill--bordered.sc-ds-calendar{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-calendar-h::before,.ds-interaction-fill--selected.sc-ds-calendar::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-calendar-h,.ds-interaction-fill--selected.sc-ds-calendar{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-calendar-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-calendar:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-calendar-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-calendar:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-calendar-h::after,.ds-interaction-fill--grouped.sc-ds-calendar::after,.ds-interaction-fill--grouped.sc-ds-calendar-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-calendar:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-calendar-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-calendar:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-calendar-h,.ds-interaction-fill--grouped.sc-ds-calendar{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-calendar-h>.ds-interaction-fill__content.sc-ds-calendar,.ds-interaction-fill.sc-ds-calendar>.ds-interaction-fill__content.sc-ds-calendar,.ds-interaction-fill__content.sc-ds-calendar{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-calendar-h,.ds-interaction-fill--on-faint.sc-ds-calendar{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-calendar-h,.ds-interaction-fill--on-medium.sc-ds-calendar{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-calendar-h,.ds-interaction-fill--on-bold.sc-ds-calendar{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-calendar-h,.ds-interaction-fill--on-strong.sc-ds-calendar{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-calendar-h,.ds-interaction-fill--on-translucent.sc-ds-calendar{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-calendar-h,.ds-interaction-fill--on-inverted.sc-ds-calendar{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-calendar-h,.ds-interaction-fill--on-media.sc-ds-calendar{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-calendar-h,.ds-interaction-fill--on-always-dark.sc-ds-calendar{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-calendar-h,.ds-interaction-fill--on-chrome.sc-ds-calendar{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-calendar-h,.ds-interaction-fill--on-navigation.sc-ds-calendar{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-calendar-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-calendar:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-calendar-h::after,.ds-interaction-fill.sc-ds-calendar::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-calendar-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-calendar:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-calendar-h::before,.ds-interaction-fill--selected.sc-ds-calendar::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-calendar-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-calendar:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-calendar:root,.sc-ds-calendar-h,.ds-forced-colors-scope.sc-ds-calendar{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-calendar-h{display:flex;min-height:0;flex-direction:column}.calendar.sc-ds-calendar{display:flex;min-height:0;flex-direction:column;min-width:calc( (var(--dimension-size-400) * 7) + (var(--dimension-space-050) * 6) + (var(--dimension-space-100) * 2) );padding:var(--ds-calendar-padding, var(--dimension-space-100))}.calendar-heading.sc-ds-calendar{display:grid;grid-template-columns:var(--dimension-size-400) minmax(0, 1fr) var(--dimension-size-400);align-items:center;text-align:center}.calendar-nav--previous.sc-ds-calendar{justify-self:start}.calendar-nav--next.sc-ds-calendar{justify-self:end}.calendar-weekdays.sc-ds-calendar,.calendar-grid__row.sc-ds-calendar{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:var(--dimension-space-050)}.calendar-grid.sc-ds-calendar{display:flex;flex-direction:column;row-gap:var(--dimension-space-050)}.calendar-weekdays.sc-ds-calendar{align-items:center;min-height:var(--dimension-size-400);margin-block-start:var(--dimension-space-050);color:var(--color-foreground-secondary);text-align:center}.calendar-day.sc-ds-calendar{appearance:none;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:var(--dimension-size-400);padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-primary);cursor:default}.calendar-day.sc-ds-calendar:disabled{cursor:not-allowed}.calendar-day--outside.sc-ds-calendar{color:var(--color-foreground-tertiary)}.calendar-day--in-range.sc-ds-calendar{background:var(--color-background-faint-brand);color:var(--color-foreground-primary)}.calendar-day.ds-interaction-fill.calendar-day--range-preview.sc-ds-calendar:not(:disabled)::after{background:var(--ds-interaction-hover)}.calendar-day.ds-interaction-fill.calendar-day--range-preview.sc-ds-calendar:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.calendar-day--today.sc-ds-calendar{color:var(--color-foreground-primary)}.calendar-day--range-edge.sc-ds-calendar{background:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}@media (forced-colors: active){.calendar-day--range-edge.sc-ds-calendar{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content)}}`;const B=n(class n extends e{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=r(this,"dsChange",7);this.selectionMode="single";this.value="";this.isInactive=false;this.autoFocus=false;this.month=z(C());this.focusedDay="";this.pendingStart="";this.previewEnd="";this.heldRange=null;this.moveMonth=n=>{const e=j(this.month,n);if(this.isInactive||!e)return;this.previewEnd="";this.month=e};this.selectDate=n=>{if(this.isDisabled(n))return;this.previewEnd="";if(this.selectionMode==="single"){this.pendingStart="";this.heldRange=null;this.dsChange.emit(n);return}const e=this.pendingStart;if(e){this.pendingStart="";this.heldRange=null;this.dsChange.emit(k(e,n));return}const r=x(this.value);this.heldRange=r?.kind==="range"?{start:r.start,end:r.end}:null;this.pendingStart=n;this.dsChange.emit(k(n,n))};this.previewRange=n=>{if(this.isDisabled(n)){this.clearPreview();return}if(!this.pendingStart||this.previewEnd===n)return;this.previewEnd=n};this.clearPreview=()=>{if(!this.previewEnd)return;this.previewEnd=""};this.handleDayKeyDown=(n,e)=>{let r=null;if(n.key==="ArrowLeft")r=-1;else if(n.key==="ArrowRight")r=1;else if(n.key==="ArrowUp")r=-7;else if(n.key==="ArrowDown")r=7;else if(n.key==="Home"){r=-new Date(`${e}T00:00:00Z`).getUTCDay()}else if(n.key==="End"){r=6-new Date(`${e}T00:00:00Z`).getUTCDay()}else if(n.key==="PageUp"||n.key==="PageDown"){const r=j(z(e),n.key==="PageUp"?-1:1);const i=`${r}-${e.slice(8,10)}`;n.preventDefault();this.focusDate(g(i)?i:`${r}-01`);return}if(r===null)return;n.preventDefault();this.focusDate(y(e,r))}}componentWillLoad(){this.month=z(this.anchorDate())}componentDidLoad(){if(this.autoFocus)void this.setFocus()}onValueChange(){this.month=z(this.anchorDate());this.focusedDay=""}async setFocus(){this.el.querySelector('.calendar-day[tabindex="0"]')?.focus()}anchorDate(){if(this.selectionMode==="range"){const n=x(this.value);if(n?.kind==="range")return n.start;return C()}return g(this.value)?this.value:C()}isUnavailable(n){if(this.isInactive||!g(n))return true;if(this.min&&g(this.min)&&n<this.min)return true;if(this.max&&g(this.max)&&n>this.max)return true;return false}isDisabled(n){return!n.startsWith(`${this.month}-`)||this.isUnavailable(n)}focusDate(n){if(this.isUnavailable(n))return;const e=z(n);if(this.month!==e)this.month=e;this.focusedDay=n;this.previewRange(n);requestAnimationFrame((()=>{this.el.querySelector(`[data-date-option="${n}"]`)?.focus()}))}render(){const n=this.selectionMode==="range"?x(this.value):null;const e=n?.kind==="range"?n:null;const r=Z(this.pendingStart,this.heldRange,e);const a=L(this.month);const t=Array.from({length:6},((n,e)=>a.slice(e*7,e*7+7)));const o=C();const d=this.pendingStart&&this.previewEnd?[this.pendingStart,this.previewEnd].sort()[0]:null;const c=this.pendingStart&&this.previewEnd?[this.pendingStart,this.previewEnd].sort()[1]:null;const l=this.selectionMode==="single"&&g(this.value)?this.value:"";const f=a.filter((n=>!this.isDisabled(n.value)));const u=[this.focusedDay,this.pendingStart,l,r?.end,o].find((n=>f.some((e=>e.value===n))))??f[0]?.value;return i(s,{key:"e5f8aeec1b76e7664931c6cf22096097d1f7fc3d"},i("div",{key:"165448e6144ee8a5fb673bfd89b1caa41379831b",class:"calendar"},i("div",{key:"8ca215c40d50727409d32ae2fc082ad7b0ed4eaf",class:"calendar-heading ds-control--md"},i("ds-button-unfilled",{key:"bfa9ed06eba9bcc1a8af636ef46ae20d764faf75",class:"calendar-nav calendar-nav--previous",variant:"icon",icon:"ChevronLeft",size:"md",hasBorder:false,isInactive:this.isInactive||!j(this.month,-1),ariaLabel:"Previous month",onDsClick:()=>this.moveMonth(-1)}),i("ds-text",{key:"5d56b0459680bb0c88041fa2b446f672a6161750",as:"span",variant:"text-body-medium",emphasis:true,color:"primary"},E(this.month)),i("ds-button-unfilled",{key:"cec3f0e057d55866e9fa35e8a1a7dc7f2c8e69ed",class:"calendar-nav calendar-nav--next",variant:"icon",icon:"ChevronRight",size:"md",hasBorder:false,isInactive:this.isInactive||!j(this.month,1),ariaLabel:"Next month",onDsClick:()=>this.moveMonth(1)})),i("div",{key:"5644a4f00cd2b04d80ef1a6113b2fa652663ae1a",class:"calendar-weekdays","aria-hidden":"true"},$.map((n=>i("ds-text",{as:"span",variant:"text-body-small",color:"secondary"},n)))),i("div",{key:"14d0a7d062ee683bc94a5f356c7a2e166f6901c8",class:"calendar-grid",role:"grid","aria-label":E(this.month),onMouseLeave:this.clearPreview},t.map(((n,s)=>i("div",{class:"calendar-grid__row",role:"row",key:`week-${s}`},n.map((n=>{const s=this.isDisabled(n.value);const a=Boolean(e&&n.value>=e.start&&n.value<=e.end);const t=Boolean(r&&n.value>=r.start&&n.value<=r.end);const f=this.selectionMode==="range"&&Boolean(this.pendingStart)&&n.value===this.pendingStart;const v=Boolean(this.pendingStart&&d&&c&&n.value>=d&&n.value<=c&&n.value!==this.pendingStart);const h=this.selectionMode==="range"&&t;const g=Boolean(this.selectionMode==="range"&&r&&(n.value===r.start||n.value===r.end));const m=this.selectionMode==="single"&&Boolean(n.value)&&n.value===l;const p=g?"on-bold":m||h||f||v||n.value===o?"primary":n.inMonth?"secondary":"tertiary";return i("button",{type:"button",role:"gridcell","data-date-option":n.value,class:{"calendar-day":true,"calendar-day--outside":!n.inMonth,"calendar-day--today":n.value===o,"calendar-day--in-range":h,"calendar-day--range-preview":v,"calendar-day--range-edge":g,"calendar-day--selected":m,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--on-bold":g,"ds-interaction-fill--surface-open":f&&!s,"ds-interaction-fill--selected":m&&!s},disabled:s,"aria-label":n.label,"aria-selected":a||m?"true":"false",tabIndex:n.value===u?0:-1,onMouseEnter:()=>this.previewRange(n.value),onFocus:()=>{this.focusedDay=n.value;this.previewRange(n.value)},onClick:()=>this.selectDate(n.value),onKeyDown:e=>this.handleDayKeyDown(e,n.value)},i("ds-text",{class:"ds-interaction-fill__content",as:"span",variant:"text-body-medium",color:p,emphasis:n.value===o},n.day))}))))))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return _()}},[2,"ds-calendar",{selectionMode:[1,"selection-mode"],value:[1],min:[1],max:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],month:[32],focusedDay:[32],pendingStart:[32],previewEnd:[32],heldRange:[32],setFocus:[64]},undefined,{value:[{onValueChange:0}]}]);function U(){if(typeof customElements==="undefined"){return}const n=["ds-calendar","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];n.forEach((n=>{switch(n){case"ds-calendar":if(!customElements.get(a(n))){customElements.define(a(n),B)}break;case"ds-badge":if(!customElements.get(a(n))){t()}break;case"ds-button-unfilled":if(!customElements.get(a(n))){o()}break;case"ds-icon":if(!customElements.get(a(n))){d()}break;case"ds-loader":if(!customElements.get(a(n))){c()}break;case"ds-text":if(!customElements.get(a(n))){l()}break;case"ds-tooltip":if(!customElements.get(a(n))){f()}break}}))}U();export{B as C,u as D,w as a,b,U as d,m as f,g as i,x as p};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as n,H as e,c as r,h as i,a as s,t as a}from"./index.js";import{d as t}from"./p-CwdRaJER.js";import{d as o}from"./p-BqipGGua.js";import{d}from"./p-pPtjNRqC.js";import{d as c}from"./p-0XTyQNRG.js";import{d as l}from"./p-D8OWhnID.js";import{d as f}from"./p-DbW8S5qe.js";const u=[{label:"Today",value:"today",days:1,offset:0},{label:"Yesterday",value:"yesterday",days:1,offset:-1},{label:"Last 7 days",value:"last-7-days",days:7,offset:0},{label:"Last 14 days",value:"last-14-days",days:14,offset:0},{label:"Last 30 days",value:"last-30-days",days:30,offset:0},{label:"Last 60 days",value:"last-60-days",days:60,offset:0},{label:"Last 90 days",value:"last-90-days",days:90,offset:0}];const v=/^\d{4}-\d{2}-\d{2}$/;const h=new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric",timeZone:"UTC"});function g(n){if(typeof n!=="string"||!v.test(n))return false;const[e,r,i]=n.split("-").map(Number);if(e<1)return false;const s=new Date(`${n}T00:00:00Z`);return s.getUTCFullYear()===e&&s.getUTCMonth()===r-1&&s.getUTCDate()===i}function m(n){if(!g(n))return"";return h.formatToParts(new Date(`${n}T00:00:00Z`)).map((n=>n.type==="year"?n.value.padStart(4,"0"):n.value)).join("")}const p=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];function b(n){if(typeof n!=="string")return"";const e=n.trim();if(!e)return"";if(g(e))return e;const r=e.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);if(r){const n=`${r[3]}-${r[1].padStart(2,"0")}-${r[2].padStart(2,"0")}`;return g(n)?n:""}const i=e.match(/^([A-Za-z]{3})\s+(\d{1,2}),\s+(\d{4})$/);if(!i)return"";const s=p.indexOf(i[1].toLowerCase());if(s<0)return"";const a=`${i[3]}-${String(s+1).padStart(2,"0")}-${i[2].padStart(2,"0")}`;return g(a)?a:""}function y(n,e){if(!g(n)||!Number.isSafeInteger(e))return"";const r=new Date(`${n}T00:00:00Z`);r.setUTCDate(r.getUTCDate()+e);const i=r.getUTCFullYear();return i>=1&&i<=9999?r.toISOString().slice(0,10):""}function w(n){return`relative:${n}`}function k(n,e=n){const r=n<=e?[n,e]:[e,n];return`range:${r[0]}/${r[1]}`}function x(n){if(typeof n!=="string"||!n)return null;if(n.startsWith("relative:")){const e=n.slice("relative:".length);return u.some((n=>n.value===e))?{kind:"relative",preset:e}:null}if(n.startsWith("range:")){const[e,r,...i]=n.slice("range:".length).split("/");if(i.length||!g(e)||!g(r))return null;return e<=r?{kind:"range",start:e,end:r}:{kind:"range",start:r,end:e}}return g(n)?{kind:"range",start:n,end:n}:null}const $=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];const T=new Intl.DateTimeFormat("en-US",{month:"long",year:"numeric",timeZone:"UTC"});const D=new Intl.DateTimeFormat("en-US",{weekday:"long",month:"long",day:"numeric",year:"numeric",timeZone:"UTC"});function C(){const n=new Date;const e=String(n.getFullYear()).padStart(4,"0");const r=String(n.getMonth()+1).padStart(2,"0");const i=String(n.getDate()).padStart(2,"0");return`${e}-${r}-${i}`}function z(n){return g(n)?n.slice(0,7):C().slice(0,7)}function j(n,e){if(!g(`${n}-01`)||!Number.isSafeInteger(e))return"";const r=new Date(`${n}-01T00:00:00Z`);r.setUTCMonth(r.getUTCMonth()+e);const i=r.getUTCFullYear();return i>=1&&i<=9999?r.toISOString().slice(0,7):""}function E(n){if(!g(`${n}-01`))return"";return T.format(new Date(`${n}-01T00:00:00Z`))}function B(n){if(!g(`${n}-01`))return[];const e=new Date(`${n}-01T00:00:00Z`);const r=e.getUTCDay();return Array.from({length:42},((i,s)=>{const a=new Date(e);a.setUTCDate(1-r+s);const t=a.getUTCFullYear();const o=t>=1&&t<=9999?a.toISOString().slice(0,10):"";return{value:o,day:a.getUTCDate(),inMonth:o.startsWith(`${n}-`),label:o?D.format(a):"Unavailable date"}}))}function L(n,e,r){return n?e:r}const Z=()=>`.sc-ds-calendar-h,.sc-ds-calendar:where(.ds-table),.sc-ds-calendar:where(.tooltip-popup),.sc-ds-calendar: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)}.ds-control--lg.sc-ds-calendar,.ds-control--lg.sc-ds-calendar-h,.ds-control--md.sc-ds-calendar-h,.ds-control--md.sc-ds-calendar,.ds-control--sm.sc-ds-calendar-h,.ds-control--sm.sc-ds-calendar,.ds-control--xs.sc-ds-calendar-h,.ds-control--xs.sc-ds-calendar{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-calendar-h,.ds-control--lg.sc-ds-calendar{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-calendar-h,.ds-control--md.sc-ds-calendar{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-calendar-h,.ds-control--sm.sc-ds-calendar{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-calendar-h,.ds-control--xs.sc-ds-calendar{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-calendar:root,.sc-ds-calendar-h,.ds-forced-colors-scope.sc-ds-calendar{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-calendar-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-calendar-h,.ds-focus-ring.sc-ds-calendar,.ds-focus-ring-inset.sc-ds-calendar-h,.ds-focus-ring-inset.sc-ds-calendar{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-calendar-h:focus-visible,.ds-focus-ring.sc-ds-calendar:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-calendar-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-calendar{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-calendar-h:focus-visible,.ds-focus-ring-inset.sc-ds-calendar:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-calendar-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-calendar:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-calendar-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-calendar{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-calendar-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-calendar::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-calendar-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-calendar:root,.sc-ds-calendar-h,.ds-forced-colors-scope.sc-ds-calendar{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-calendar-h,.ds-interaction-fill.sc-ds-calendar{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-calendar-h::before,.ds-interaction-fill.sc-ds-calendar::before,.ds-interaction-fill.sc-ds-calendar-h::after,.ds-interaction-fill.sc-ds-calendar::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-calendar-h::before,.ds-interaction-fill.sc-ds-calendar::before{z-index:1}.ds-interaction-fill.sc-ds-calendar-h::after,.ds-interaction-fill.sc-ds-calendar::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-calendar-h,.ds-interaction-fill--bordered.sc-ds-calendar{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-calendar-h::before,.ds-interaction-fill--selected.sc-ds-calendar::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-calendar-h,.ds-interaction-fill--selected.sc-ds-calendar{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-calendar-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-calendar:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-calendar-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-calendar:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-calendar-h::after,.ds-interaction-fill--grouped.sc-ds-calendar::after,.ds-interaction-fill--grouped.sc-ds-calendar-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-calendar:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-calendar-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-calendar:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-calendar-h,.ds-interaction-fill--grouped.sc-ds-calendar{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-calendar-h>.ds-interaction-fill__content.sc-ds-calendar,.ds-interaction-fill.sc-ds-calendar>.ds-interaction-fill__content.sc-ds-calendar,.ds-interaction-fill__content.sc-ds-calendar{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-calendar-h,.ds-interaction-fill--on-faint.sc-ds-calendar{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-calendar-h,.ds-interaction-fill--on-medium.sc-ds-calendar{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-calendar-h,.ds-interaction-fill--on-bold.sc-ds-calendar{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-calendar-h,.ds-interaction-fill--on-strong.sc-ds-calendar{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-calendar-h,.ds-interaction-fill--on-translucent.sc-ds-calendar{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-calendar-h,.ds-interaction-fill--on-inverted.sc-ds-calendar{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-calendar-h,.ds-interaction-fill--on-media.sc-ds-calendar{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-calendar-h,.ds-interaction-fill--on-always-dark.sc-ds-calendar{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-calendar-h,.ds-interaction-fill--on-chrome.sc-ds-calendar{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-calendar-h,.ds-interaction-fill--on-navigation.sc-ds-calendar{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-calendar-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-calendar:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-calendar-h::after,.ds-interaction-fill.sc-ds-calendar::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-calendar-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-calendar:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-calendar-h::before,.ds-interaction-fill--selected.sc-ds-calendar::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-calendar-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-calendar:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-calendar:root,.sc-ds-calendar-h,.ds-forced-colors-scope.sc-ds-calendar{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-calendar-h{display:flex;min-height:0;flex-direction:column}.calendar.sc-ds-calendar{display:flex;min-height:0;flex-direction:column;min-width:calc( (var(--dimension-size-400) * 7) + (var(--dimension-space-050) * 6) + (var(--dimension-space-100) * 2) );padding:var(--ds-calendar-padding, var(--dimension-space-100))}.calendar-heading.sc-ds-calendar{display:grid;grid-template-columns:var(--dimension-size-400) minmax(0, 1fr) var(--dimension-size-400);align-items:center;text-align:center}.calendar-nav--previous.sc-ds-calendar{justify-self:start}.calendar-nav--next.sc-ds-calendar{justify-self:end}.calendar-weekdays.sc-ds-calendar,.calendar-grid__row.sc-ds-calendar{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:var(--dimension-space-050)}.calendar-grid.sc-ds-calendar{display:flex;flex-direction:column;row-gap:var(--dimension-space-050)}.calendar-weekdays.sc-ds-calendar{align-items:center;min-height:var(--dimension-size-400);margin-block-start:var(--dimension-space-050);color:var(--color-foreground-secondary);text-align:center}.calendar-day.sc-ds-calendar{appearance:none;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:var(--dimension-size-400);padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-primary);cursor:default}.calendar-day.sc-ds-calendar:disabled{cursor:not-allowed}.calendar-day--outside.sc-ds-calendar{color:var(--color-foreground-tertiary)}.calendar-day--in-range.sc-ds-calendar{background:var(--color-background-faint-brand);color:var(--color-foreground-primary)}.calendar-day.ds-interaction-fill.calendar-day--range-preview.sc-ds-calendar:not(:disabled)::after{background:var(--ds-interaction-hover)}.calendar-day.ds-interaction-fill.calendar-day--range-preview.sc-ds-calendar:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.calendar-day--today.sc-ds-calendar{color:var(--color-foreground-primary)}.calendar-day--range-edge.sc-ds-calendar{background:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}@media (forced-colors: active){.calendar-day--range-edge.sc-ds-calendar{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content)}}`;const _=n(class n extends e{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=r(this,"dsChange",7);this.selectionMode="single";this.value="";this.isInactive=false;this.autoFocus=false;this.month=z(C());this.focusedDay="";this.pendingStart="";this.previewEnd="";this.heldRange=null;this.moveMonth=n=>{const e=j(this.month,n);if(this.isInactive||!e)return;this.previewEnd="";this.month=e};this.selectDate=n=>{if(this.isDisabled(n))return;this.previewEnd="";if(this.selectionMode==="single"){this.pendingStart="";this.heldRange=null;this.dsChange.emit(n);return}const e=this.pendingStart;if(e){this.pendingStart="";this.heldRange=null;this.dsChange.emit(k(e,n));return}const r=x(this.value);this.heldRange=r?.kind==="range"?{start:r.start,end:r.end}:null;this.pendingStart=n;this.dsChange.emit(k(n,n))};this.previewRange=n=>{if(this.isDisabled(n)){this.clearPreview();return}if(!this.pendingStart||this.previewEnd===n)return;this.previewEnd=n};this.clearPreview=()=>{if(!this.previewEnd)return;this.previewEnd=""};this.handleDayKeyDown=(n,e)=>{let r=null;if(n.key==="ArrowLeft")r=-1;else if(n.key==="ArrowRight")r=1;else if(n.key==="ArrowUp")r=-7;else if(n.key==="ArrowDown")r=7;else if(n.key==="Home"){r=-new Date(`${e}T00:00:00Z`).getUTCDay()}else if(n.key==="End"){r=6-new Date(`${e}T00:00:00Z`).getUTCDay()}else if(n.key==="PageUp"||n.key==="PageDown"){const r=j(z(e),n.key==="PageUp"?-1:1);const i=`${r}-${e.slice(8,10)}`;n.preventDefault();this.focusDate(g(i)?i:`${r}-01`);return}if(r===null)return;n.preventDefault();this.focusDate(y(e,r))}}componentWillLoad(){this.month=z(this.anchorDate())}componentDidLoad(){if(this.autoFocus)void this.setFocus()}onValueChange(){this.month=z(this.anchorDate());this.focusedDay=""}async setFocus(){this.el.querySelector('.calendar-day[tabindex="0"]')?.focus()}anchorDate(){if(this.selectionMode==="range"){const n=x(this.value);if(n?.kind==="range")return n.start;return C()}return g(this.value)?this.value:C()}isUnavailable(n){if(this.isInactive||!g(n))return true;if(this.min&&g(this.min)&&n<this.min)return true;if(this.max&&g(this.max)&&n>this.max)return true;return false}isDisabled(n){return!n.startsWith(`${this.month}-`)||this.isUnavailable(n)}focusDate(n){if(this.isUnavailable(n))return;const e=z(n);if(this.month!==e)this.month=e;this.focusedDay=n;this.previewRange(n);requestAnimationFrame((()=>{this.el.querySelector(`[data-date-option="${n}"]`)?.focus()}))}render(){const n=this.selectionMode==="range"?x(this.value):null;const e=n?.kind==="range"?n:null;const r=L(this.pendingStart,this.heldRange,e);const a=B(this.month);const t=Array.from({length:6},((n,e)=>a.slice(e*7,e*7+7)));const o=C();const d=this.pendingStart&&this.previewEnd?[this.pendingStart,this.previewEnd].sort()[0]:null;const c=this.pendingStart&&this.previewEnd?[this.pendingStart,this.previewEnd].sort()[1]:null;const l=this.selectionMode==="single"&&g(this.value)?this.value:"";const f=a.filter((n=>!this.isDisabled(n.value)));const u=[this.focusedDay,this.pendingStart,l,r?.end,o].find((n=>f.some((e=>e.value===n))))??f[0]?.value;return i(s,{key:"e5f8aeec1b76e7664931c6cf22096097d1f7fc3d"},i("div",{key:"165448e6144ee8a5fb673bfd89b1caa41379831b",class:"calendar"},i("div",{key:"8ca215c40d50727409d32ae2fc082ad7b0ed4eaf",class:"calendar-heading ds-control--md"},i("ds-button-unfilled",{key:"bfa9ed06eba9bcc1a8af636ef46ae20d764faf75",class:"calendar-nav calendar-nav--previous",variant:"icon",icon:"ChevronLeft",size:"md",hasBorder:false,isInactive:this.isInactive||!j(this.month,-1),ariaLabel:"Previous month",onDsClick:()=>this.moveMonth(-1)}),i("ds-text",{key:"5d56b0459680bb0c88041fa2b446f672a6161750",as:"span",variant:"text-body-medium",emphasis:true,color:"primary"},E(this.month)),i("ds-button-unfilled",{key:"cec3f0e057d55866e9fa35e8a1a7dc7f2c8e69ed",class:"calendar-nav calendar-nav--next",variant:"icon",icon:"ChevronRight",size:"md",hasBorder:false,isInactive:this.isInactive||!j(this.month,1),ariaLabel:"Next month",onDsClick:()=>this.moveMonth(1)})),i("div",{key:"5644a4f00cd2b04d80ef1a6113b2fa652663ae1a",class:"calendar-weekdays","aria-hidden":"true"},$.map((n=>i("ds-text",{as:"span",variant:"text-body-small",color:"secondary"},n)))),i("div",{key:"14d0a7d062ee683bc94a5f356c7a2e166f6901c8",class:"calendar-grid",role:"grid","aria-label":E(this.month),onMouseLeave:this.clearPreview},t.map(((n,s)=>i("div",{class:"calendar-grid__row",role:"row",key:`week-${s}`},n.map((n=>{const s=this.isDisabled(n.value);const a=Boolean(e&&n.value>=e.start&&n.value<=e.end);const t=Boolean(r&&n.value>=r.start&&n.value<=r.end);const f=this.selectionMode==="range"&&Boolean(this.pendingStart)&&n.value===this.pendingStart;const v=Boolean(this.pendingStart&&d&&c&&n.value>=d&&n.value<=c&&n.value!==this.pendingStart);const h=this.selectionMode==="range"&&t;const g=Boolean(this.selectionMode==="range"&&r&&(n.value===r.start||n.value===r.end));const m=this.selectionMode==="single"&&Boolean(n.value)&&n.value===l;const p=g?"on-bold":m||h||f||v||n.value===o?"primary":n.inMonth?"secondary":"tertiary";return i("button",{type:"button",role:"gridcell","data-date-option":n.value,class:{"calendar-day":true,"calendar-day--outside":!n.inMonth,"calendar-day--today":n.value===o,"calendar-day--in-range":h,"calendar-day--range-preview":v,"calendar-day--range-edge":g,"calendar-day--selected":m,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--on-bold":g,"ds-interaction-fill--surface-open":f&&!s,"ds-interaction-fill--selected":m&&!s},disabled:s,"aria-label":n.label,"aria-selected":a||m?"true":"false",tabIndex:n.value===u?0:-1,onMouseEnter:()=>this.previewRange(n.value),onFocus:()=>{this.focusedDay=n.value;this.previewRange(n.value)},onClick:()=>this.selectDate(n.value),onKeyDown:e=>this.handleDayKeyDown(e,n.value)},i("ds-text",{class:"ds-interaction-fill__content",as:"span",variant:"text-body-medium",color:p,emphasis:n.value===o},n.day))}))))))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return Z()}},[2,"ds-calendar",{selectionMode:[1,"selection-mode"],value:[1],min:[1],max:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],month:[32],focusedDay:[32],pendingStart:[32],previewEnd:[32],heldRange:[32],setFocus:[64]},undefined,{value:[{onValueChange:0}]}]);function S(){if(typeof customElements==="undefined"){return}const n=["ds-calendar","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];n.forEach((n=>{switch(n){case"ds-calendar":if(!customElements.get(a(n))){customElements.define(a(n),_)}break;case"ds-badge":if(!customElements.get(a(n))){t()}break;case"ds-button-unfilled":if(!customElements.get(a(n))){o()}break;case"ds-icon":if(!customElements.get(a(n))){d()}break;case"ds-loader":if(!customElements.get(a(n))){c()}break;case"ds-text":if(!customElements.get(a(n))){l()}break;case"ds-tooltip":if(!customElements.get(a(n))){f()}break}}))}S();export{_ as C,u as D,w as a,b,S as d,m as f,g as i,x as p};
|
|
2
|
+
//# sourceMappingURL=p-CSxwWcwW.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as e,H as s,c as i,h as a,a as d,t as o}from"./index.js";import{g as r}from"./p-BQq26pt9.js";import{d as t}from"./p-CwdRaJER.js";import{d as n}from"./p-BqipGGua.js";import{d as c}from"./p-pPtjNRqC.js";import{d as m}from"./p-0XTyQNRG.js";import{d as h}from"./p-xMBaOeKa.js";import{d as l}from"./p-CIMyD_6H.js";import{d as b}from"./p-B9y6azEw.js";import{d as p}from"./p-Bf-BphXP.js";import{d as u}from"./p-7MwoWtTJ.js";import{d as g}from"./p-d76Ry5nh.js";import{d as f}from"./p-D8OWhnID.js";import{d as _}from"./p-DbW8S5qe.js";const v=()=>`.ds-chrome-space--sm.sc-ds-mobile-header-h,.ds-chrome-space--sm.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-header-h,.ds-chrome-space--md.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-header-h,.ds-chrome-space--lg.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header,.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header,.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:grid;align-items:center}.sc-ds-mobile-header-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-primary);color:var(--color-foreground-primary)}[tone='brand'].sc-ds-mobile-header-h{background:var(--color-background-bold-brand);color:var(--color-foreground-on-bold)}.mobile-header.sc-ds-mobile-header{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;background:inherit;color:inherit}.mobile-header__primary.sc-ds-mobile-header{grid-template-columns:minmax(var(--dimension-size-500), 1fr) minmax(0, auto) minmax( var(--dimension-size-500), 1fr );width:100%;height:calc(var(--dimension-size-500) + var(--dimension-space-200));min-width:0;background:inherit;color:inherit}.mobile-header__primary--segmented.sc-ds-mobile-header{grid-template-columns:minmax(var(--dimension-size-500), 1fr) minmax(0, 4fr) minmax(var(--dimension-size-500), 1fr)}.mobile-header__primary--segmented.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header,.mobile-header__primary--segmented.sc-ds-mobile-header ds-tab-group.sc-ds-mobile-header{width:100%}.sc-ds-mobile-header-h:not([tone='brand']) .mobile-header.sc-ds-mobile-header::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-header__subsections.sc-ds-mobile-header{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--dimension-size-600);padding:var(--dimension-space-100) var(--dimension-space-200);box-sizing:border-box}.mobile-header__subsections.sc-ds-mobile-header ds-mobile-section-switcher.sc-ds-mobile-header{min-width:0;max-width:100%}.mobile-header__lane.sc-ds-mobile-header{display:flex;align-items:center;gap:var(--dimension-space-050);min-width:0}.mobile-header__lane--leading.sc-ds-mobile-header{justify-content:flex-start}.mobile-header__lane--trailing.sc-ds-mobile-header{justify-content:flex-end}.mobile-header__center.sc-ds-mobile-header{position:relative;min-width:0;max-width:100%;justify-self:center}.mobile-header__heading.sc-ds-mobile-header{display:block;min-width:0;max-width:100%;text-align:center}.mobile-header__primary--inline-subsections.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header,.mobile-header__primary--combined-subsections.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);width:100%}.mobile-header__combined-subsections.sc-ds-mobile-header{min-width:0;max-width:100%}.mobile-header__primary--inline-subsections.sc-ds-mobile-header .mobile-header__heading.sc-ds-mobile-header{flex:0 1 auto;width:auto}.mobile-header__inline-subsections.sc-ds-mobile-header{flex:0 1 auto;min-width:0;max-width:60%}.mobile-header__semantic-heading.sc-ds-mobile-header{position:absolute;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);padding:0;margin:calc(var(--dimension-stroke-width-012) * -1);overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-mobile-header-s>[slot='leading'],.sc-ds-mobile-header-s>[slot='trailing']{flex:0 0 auto}`;const w=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSectionChange=i(this,"dsSectionChange",7);this.dsSubsectionChange=i(this,"dsSubsectionChange",7);this.heading="";this.headingLevel="h1";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.sectionsPresentation="switcher";this.sectionsSize="md";this.subsections=[];this.subvalue="";this.subsectionsAriaLabel="Change page subsection";this.subsectionsPlacement="below";this.tone="default";this.handleSectionChange=e=>{e.stopPropagation();this.dsSectionChange.emit(e.detail)};this.handleSubsectionChange=e=>{e.stopPropagation();this.dsSubsectionChange.emit(e.detail)}}get resolvedSections(){return this.sections??[]}get resolvedSubsections(){return this.subsections??[]}get selectedLabel(){const e=r(this.resolvedSections);return e.find((e=>e.id===this.value))?.label??e[0]?.label??this.heading}render(){const e=this.headingLevel;const s=r(this.resolvedSections);const i=s.length>1;const o=r(this.resolvedSubsections).length>1;const t=i&&this.sectionsPresentation==="segmented";const n=o&&!i&&this.subsectionsPlacement==="inline";const c=o&&!i&&this.subsectionsPlacement==="combined";const m=this.tone==="brand"?"on-bold":"primary";return a(d,{key:"8bf8eead39a2f112682a3f0bbeca5c44a603757e"},a("header",{key:"dd6b04efe48e1a0b93e73d56a456ea06acd05099",class:"mobile-header"},a("div",{key:"f3c034252cf7dbdf439b4c39d0b825fcd4fad3ce",class:{"mobile-header__primary":true,"mobile-header__primary--segmented":t,"mobile-header__primary--inline-subsections":n,"mobile-header__primary--combined-subsections":c,"ds-chrome-grid":true,"ds-chrome-space--md":true}},a("div",{key:"468ebfe82ff7f3e13d526bf03c8ae2a8b738ca89",class:"mobile-header__lane mobile-header__lane--leading"},a("slot",{key:"696aec366bd9b71734ad798cc9970e7fd09848d1",name:"leading"})),a("div",{key:"5e62592ea271528fe3c774528f5eb014c50639a6",class:"mobile-header__center"},c?[a("span",{class:"mobile-header__semantic-heading",role:"heading","aria-level":this.headingLevel==="h1"?"1":"2"},this.selectedLabel),a("nav",{class:"mobile-header__combined-subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{presentation:"sheet",pageLabel:this.selectedLabel,sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange}))]:i?[a("span",{class:"mobile-header__semantic-heading",role:"heading","aria-level":this.headingLevel==="h1"?"1":"2"},this.selectedLabel),this.sectionsPresentation==="segmented"?a("ds-tab-group",{tabs:this.resolvedSections,value:this.value,size:this.sectionsSize,width:"fill",ariaLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange}):a("ds-mobile-section-switcher",{presentation:o?"menu":"sheet",sections:this.resolvedSections,value:this.value,navigationLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange})]:a("ds-text",{class:"mobile-header__heading",as:e,variant:"text-body-large",emphasis:true,color:m,lineTruncation:1},this.selectedLabel),n?this.renderSubsections():null),a("div",{key:"6bb2bb49ed934938154ed9480bde626b71e70561",class:"mobile-header__lane mobile-header__lane--trailing"},a("slot",{key:"4abbae66f41ac1ff791f8fcb5a77b3f5a98bd80f",name:"trailing"}))),o&&!n&&!c?a("nav",{class:"mobile-header__subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange})):null))}renderSubsections(){return a("nav",{class:"mobile-header__inline-subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange}))}static get style(){return v()}},[262,"ds-mobile-header",{heading:[1],headingLevel:[1,"heading-level"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],sectionsPresentation:[1,"sections-presentation"],sectionsSize:[1,"sections-size"],subsections:[16],subvalue:[1],subsectionsAriaLabel:[1,"subsections-aria-label"],subsectionsPlacement:[1,"subsections-placement"],tone:[513]}]);function y(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-header","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-section-switcher","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-header":if(!customElements.get(o(e))){customElements.define(o(e),w)}break;case"ds-badge":if(!customElements.get(o(e))){t()}break;case"ds-button-unfilled":if(!customElements.get(o(e))){n()}break;case"ds-icon":if(!customElements.get(o(e))){c()}break;case"ds-loader":if(!customElements.get(o(e))){m()}break;case"ds-menu":if(!customElements.get(o(e))){h()}break;case"ds-mobile-section-switcher":if(!customElements.get(o(e))){l()}break;case"ds-swatch-picker":if(!customElements.get(o(e))){b()}break;case"ds-switch":if(!customElements.get(o(e))){p()}break;case"ds-tab-group":if(!customElements.get(o(e))){u()}break;case"ds-tag":if(!customElements.get(o(e))){g()}break;case"ds-text":if(!customElements.get(o(e))){f()}break;case"ds-tooltip":if(!customElements.get(o(e))){_()}break}}))}y();export{w as M,y as d};
|
|
2
|
+
//# sourceMappingURL=p-CUYLGe5d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mobileHeaderCss","MobileHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","headingLevel","sections","value","sectionsAriaLabel","sectionsPresentation","sectionsSize","subsections","subvalue","subsectionsAriaLabel","subsectionsPlacement","tone","handleSectionChange","event","stopPropagation","dsSectionChange","emit","detail","handleSubsectionChange","dsSubsectionChange","resolvedSections","resolvedSubsections","selectedLabel","selectable","getSelectableTabs","find","section","id","label","render","Heading","hasSwitcher","length","hasSubsections","hasSegmentedSections","inlineSubsections","combinedSubsections","foreground","h","Host","key","class","name","role","presentation","pageLabel","navigationLabel","onDsChange","tabs","size","width","ariaLabel","as","variant","emphasis","color","lineTruncation","renderSubsections"],"sources":["src/wc/components/MobileHeader/MobileHeader.css?tag=ds-mobile-header&encapsulation=scoped","src/wc/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n\n:host {\n display: block;\n min-width: 0;\n box-sizing: border-box;\n background: var(--color-background-primary);\n color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n background: var(--color-background-bold-brand);\n color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n background: inherit;\n color: inherit;\n}\n\n.mobile-header__primary {\n grid-template-columns: minmax(var(--dimension-size-500), 1fr) minmax(0, auto) minmax(\n var(--dimension-size-500),\n 1fr\n );\n width: 100%;\n height: calc(var(--dimension-size-500) + var(--dimension-space-200));\n min-width: 0;\n background: inherit;\n color: inherit;\n}\n\n.mobile-header__primary--segmented {\n grid-template-columns:\n minmax(var(--dimension-size-500), 1fr)\n minmax(0, 4fr)\n minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-header__primary--segmented .mobile-header__center,\n.mobile-header__primary--segmented ds-tab-group {\n width: 100%;\n}\n\n:host(:not([tone='brand'])) .mobile-header::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n height: var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n pointer-events: none;\n}\n\n.mobile-header__subsections {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100) var(--dimension-space-200);\n box-sizing: border-box;\n}\n\n.mobile-header__subsections ds-mobile-section-switcher {\n min-width: 0;\n max-width: 100%;\n}\n\n.mobile-header__lane {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n.mobile-header__lane--leading {\n justify-content: flex-start;\n}\n\n.mobile-header__lane--trailing {\n justify-content: flex-end;\n}\n\n.mobile-header__center {\n position: relative;\n min-width: 0;\n max-width: 100%;\n justify-self: center;\n}\n\n.mobile-header__heading {\n display: block;\n min-width: 0;\n max-width: 100%;\n text-align: center;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__center,\n.mobile-header__primary--combined-subsections .mobile-header__center {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-100);\n width: 100%;\n}\n\n.mobile-header__combined-subsections {\n min-width: 0;\n max-width: 100%;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__heading {\n flex: 0 1 auto;\n width: auto;\n}\n\n.mobile-header__inline-subsections {\n flex: 0 1 auto;\n min-width: 0;\n max-width: 60%;\n}\n\n.mobile-header__semantic-heading {\n position: absolute;\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-stroke-width-012);\n padding: 0;\n margin: calc(var(--dimension-stroke-width-012) * -1);\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']) {\n flex: 0 0 auto;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { getSelectableTabs, type TabGroupItem, type TabItem } from '../TabGroup/tab-item-utils';\nimport type { TabGroupSize } from '../TabGroup/TabGroup';\nimport type {\n MobileHeaderHeadingLevel,\n MobileHeaderSectionsPresentation,\n MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n tag: 'ds-mobile-header',\n styleUrl: 'MobileHeader.css',\n scoped: true,\n})\nexport class MobileHeader {\n /** Static title used when no peer sections are supplied. */\n @Prop() heading: string = '';\n /** Semantic heading level for the active mobile screen. */\n @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n /** Controlled peer sections. Their selected label replaces the static title. */\n @Prop() sections: TabGroupItem[] = [];\n /** Controlled selected section id. */\n @Prop() value: string = '';\n /** Accessible name for the section chooser. */\n @Prop() sectionsAriaLabel: string = 'Change page section';\n /** Popup switcher or an inline segmented TabGroup for peer sections. */\n @Prop() sectionsPresentation: MobileHeaderSectionsPresentation = 'switcher';\n /** Density for the segmented sections presentation. */\n @Prop() sectionsSize: TabGroupSize = 'md';\n /** Controlled child sections within the selected page or detail screen. */\n @Prop() subsections: TabItem[] = [];\n /** Controlled selected child-section id. */\n @Prop() subvalue: string = '';\n /** Accessible name for the child-section chooser. */\n @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n /** Place local sections below, beside, or combined with the page title in one sheet trigger. */\n @Prop() subsectionsPlacement: 'below' | 'inline' | 'combined' = 'below';\n /** Default page chrome or bold-brand workflow chrome. */\n @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n /** Section selection intent. */\n @Event() dsSectionChange!: EventEmitter<string>;\n /** Child-section selection intent. */\n @Event() dsSubsectionChange!: EventEmitter<string>;\n\n private get resolvedSections(): TabGroupItem[] {\n return this.sections ?? [];\n }\n\n private get resolvedSubsections(): TabItem[] {\n return this.subsections ?? [];\n }\n\n private get selectedLabel(): string {\n const selectable = getSelectableTabs(this.resolvedSections);\n return (\n selectable.find(section => section.id === this.value)?.label ??\n selectable[0]?.label ??\n this.heading\n );\n }\n\n private handleSectionChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.dsSectionChange.emit(event.detail);\n };\n\n private handleSubsectionChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.dsSubsectionChange.emit(event.detail);\n };\n\n render() {\n const Heading = this.headingLevel;\n const selectable = getSelectableTabs(this.resolvedSections);\n const hasSwitcher = selectable.length > 1;\n const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n const hasSegmentedSections = hasSwitcher && this.sectionsPresentation === 'segmented';\n const inlineSubsections =\n hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'inline';\n const combinedSubsections =\n hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'combined';\n const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n return (\n <Host>\n <header class=\"mobile-header\">\n <div\n class={{\n 'mobile-header__primary': true,\n 'mobile-header__primary--segmented': hasSegmentedSections,\n 'mobile-header__primary--inline-subsections': inlineSubsections,\n 'mobile-header__primary--combined-subsections': combinedSubsections,\n 'ds-chrome-grid': true,\n 'ds-chrome-space--md': true,\n }}\n >\n <div class=\"mobile-header__lane mobile-header__lane--leading\">\n <slot name=\"leading\" />\n </div>\n <div class=\"mobile-header__center\">\n {combinedSubsections ? (\n [\n <span\n class=\"mobile-header__semantic-heading\"\n role=\"heading\"\n aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n >\n {this.selectedLabel}\n </span>,\n <nav\n class=\"mobile-header__combined-subsections\"\n aria-label={this.subsectionsAriaLabel}\n >\n <ds-mobile-section-switcher\n presentation=\"sheet\"\n pageLabel={this.selectedLabel}\n sections={this.resolvedSubsections}\n value={this.subvalue}\n navigationLabel={this.subsectionsAriaLabel}\n onDsChange={this.handleSubsectionChange}\n />\n </nav>,\n ]\n ) : hasSwitcher ? (\n [\n <span\n class=\"mobile-header__semantic-heading\"\n role=\"heading\"\n aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n >\n {this.selectedLabel}\n </span>,\n this.sectionsPresentation === 'segmented' ? (\n <ds-tab-group\n tabs={this.resolvedSections}\n value={this.value}\n size={this.sectionsSize}\n width=\"fill\"\n ariaLabel={this.sectionsAriaLabel}\n onDsChange={this.handleSectionChange}\n />\n ) : (\n <ds-mobile-section-switcher\n presentation={hasSubsections ? 'menu' : 'sheet'}\n sections={this.resolvedSections}\n value={this.value}\n navigationLabel={this.sectionsAriaLabel}\n onDsChange={this.handleSectionChange}\n />\n ),\n ]\n ) : (\n <ds-text\n class=\"mobile-header__heading\"\n as={Heading}\n variant=\"text-body-large\"\n emphasis\n color={foreground}\n lineTruncation={1}\n >\n {this.selectedLabel}\n </ds-text>\n )}\n {inlineSubsections ? this.renderSubsections() : null}\n </div>\n <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n <slot name=\"trailing\" />\n </div>\n </div>\n {hasSubsections && !inlineSubsections && !combinedSubsections ? (\n <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n <ds-mobile-section-switcher\n sections={this.resolvedSubsections}\n value={this.subvalue}\n navigationLabel={this.subsectionsAriaLabel}\n onDsChange={this.handleSubsectionChange}\n />\n </nav>\n ) : null}\n </header>\n </Host>\n );\n }\n\n private renderSubsections() {\n return (\n <nav class=\"mobile-header__inline-subsections\" aria-label={this.subsectionsAriaLabel}>\n <ds-mobile-section-switcher\n sections={this.resolvedSubsections}\n value={this.subvalue}\n navigationLabel={this.subsectionsAriaLabel}\n onDsChange={this.handleSubsectionChange}\n />\n </nav>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["mobileHeaderCss","MobileHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","headingLevel","sections","value","sectionsAriaLabel","sectionsPresentation","sectionsSize","subsections","subvalue","subsectionsAriaLabel","subsectionsPlacement","tone","handleSectionChange","event","stopPropagation","dsSectionChange","emit","detail","handleSubsectionChange","dsSubsectionChange","resolvedSections","resolvedSubsections","selectedLabel","selectable","getSelectableTabs","find","section","id","label","render","Heading","hasSwitcher","length","hasSubsections","hasSegmentedSections","inlineSubsections","combinedSubsections","foreground","h","Host","key","class","name","role","presentation","pageLabel","navigationLabel","onDsChange","tabs","size","width","ariaLabel","as","variant","emphasis","color","lineTruncation","renderSubsections"],"sources":["src/wc/components/MobileHeader/MobileHeader.css?tag=ds-mobile-header&encapsulation=scoped","src/wc/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n\n:host {\n display: block;\n min-width: 0;\n box-sizing: border-box;\n background: var(--color-background-primary);\n color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n background: var(--color-background-bold-brand);\n color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n background: inherit;\n color: inherit;\n}\n\n.mobile-header__primary {\n grid-template-columns: minmax(var(--dimension-size-500), 1fr) minmax(0, auto) minmax(\n var(--dimension-size-500),\n 1fr\n );\n width: 100%;\n height: calc(var(--dimension-size-500) + var(--dimension-space-200));\n min-width: 0;\n background: inherit;\n color: inherit;\n}\n\n.mobile-header__primary--segmented {\n grid-template-columns:\n minmax(var(--dimension-size-500), 1fr)\n minmax(0, 4fr)\n minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-header__primary--segmented .mobile-header__center,\n.mobile-header__primary--segmented ds-tab-group {\n width: 100%;\n}\n\n:host(:not([tone='brand'])) .mobile-header::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n height: var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n pointer-events: none;\n}\n\n.mobile-header__subsections {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100) var(--dimension-space-200);\n box-sizing: border-box;\n}\n\n.mobile-header__subsections ds-mobile-section-switcher {\n min-width: 0;\n max-width: 100%;\n}\n\n.mobile-header__lane {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n.mobile-header__lane--leading {\n justify-content: flex-start;\n}\n\n.mobile-header__lane--trailing {\n justify-content: flex-end;\n}\n\n.mobile-header__center {\n position: relative;\n min-width: 0;\n max-width: 100%;\n justify-self: center;\n}\n\n.mobile-header__heading {\n display: block;\n min-width: 0;\n max-width: 100%;\n text-align: center;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__center,\n.mobile-header__primary--combined-subsections .mobile-header__center {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-100);\n width: 100%;\n}\n\n.mobile-header__combined-subsections {\n min-width: 0;\n max-width: 100%;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__heading {\n flex: 0 1 auto;\n width: auto;\n}\n\n.mobile-header__inline-subsections {\n flex: 0 1 auto;\n min-width: 0;\n max-width: 60%;\n}\n\n.mobile-header__semantic-heading {\n position: absolute;\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-stroke-width-012);\n padding: 0;\n margin: calc(var(--dimension-stroke-width-012) * -1);\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']) {\n flex: 0 0 auto;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { getSelectableTabs, type TabGroupItem, type TabItem } from '../TabGroup/tab-item-utils';\nimport type { TabGroupSize } from '../TabGroup/TabGroup';\nimport type {\n MobileHeaderHeadingLevel,\n MobileHeaderSectionsPresentation,\n MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n tag: 'ds-mobile-header',\n styleUrl: 'MobileHeader.css',\n scoped: true,\n})\nexport class MobileHeader {\n /** Static title used when no peer sections are supplied. */\n @Prop() heading: string = '';\n /** Semantic heading level for the active mobile screen. */\n @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n /** Controlled peer sections. Their selected label replaces the static title. */\n @Prop() sections: TabGroupItem[] = [];\n /** Controlled selected section id. */\n @Prop() value: string = '';\n /** Accessible name for the section chooser. */\n @Prop() sectionsAriaLabel: string = 'Change page section';\n /** Popup switcher or an inline segmented TabGroup for peer sections. */\n @Prop() sectionsPresentation: MobileHeaderSectionsPresentation = 'switcher';\n /** Density for the segmented sections presentation. */\n @Prop() sectionsSize: TabGroupSize = 'md';\n /** Controlled child sections within the selected page or detail screen. */\n @Prop() subsections: TabItem[] = [];\n /** Controlled selected child-section id. */\n @Prop() subvalue: string = '';\n /** Accessible name for the child-section chooser. */\n @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n /** Place local sections below, beside, or combined with the page title in one sheet trigger. */\n @Prop() subsectionsPlacement: 'below' | 'inline' | 'combined' = 'below';\n /** Default page chrome or bold-brand workflow chrome. */\n @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n /** Section selection intent. */\n @Event() dsSectionChange!: EventEmitter<string>;\n /** Child-section selection intent. */\n @Event() dsSubsectionChange!: EventEmitter<string>;\n\n private get resolvedSections(): TabGroupItem[] {\n return this.sections ?? [];\n }\n\n private get resolvedSubsections(): TabItem[] {\n return this.subsections ?? [];\n }\n\n private get selectedLabel(): string {\n const selectable = getSelectableTabs(this.resolvedSections);\n return (\n selectable.find(section => section.id === this.value)?.label ??\n selectable[0]?.label ??\n this.heading\n );\n }\n\n private handleSectionChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.dsSectionChange.emit(event.detail);\n };\n\n private handleSubsectionChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.dsSubsectionChange.emit(event.detail);\n };\n\n render() {\n const Heading = this.headingLevel;\n const selectable = getSelectableTabs(this.resolvedSections);\n const hasSwitcher = selectable.length > 1;\n const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n const hasSegmentedSections = hasSwitcher && this.sectionsPresentation === 'segmented';\n const inlineSubsections =\n hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'inline';\n const combinedSubsections =\n hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'combined';\n const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n return (\n <Host>\n <header class=\"mobile-header\">\n <div\n class={{\n 'mobile-header__primary': true,\n 'mobile-header__primary--segmented': hasSegmentedSections,\n 'mobile-header__primary--inline-subsections': inlineSubsections,\n 'mobile-header__primary--combined-subsections': combinedSubsections,\n 'ds-chrome-grid': true,\n 'ds-chrome-space--md': true,\n }}\n >\n <div class=\"mobile-header__lane mobile-header__lane--leading\">\n <slot name=\"leading\" />\n </div>\n <div class=\"mobile-header__center\">\n {combinedSubsections ? (\n [\n <span\n class=\"mobile-header__semantic-heading\"\n role=\"heading\"\n aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n >\n {this.selectedLabel}\n </span>,\n <nav\n class=\"mobile-header__combined-subsections\"\n aria-label={this.subsectionsAriaLabel}\n >\n <ds-mobile-section-switcher\n presentation=\"sheet\"\n pageLabel={this.selectedLabel}\n sections={this.resolvedSubsections}\n value={this.subvalue}\n navigationLabel={this.subsectionsAriaLabel}\n onDsChange={this.handleSubsectionChange}\n />\n </nav>,\n ]\n ) : hasSwitcher ? (\n [\n <span\n class=\"mobile-header__semantic-heading\"\n role=\"heading\"\n aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n >\n {this.selectedLabel}\n </span>,\n this.sectionsPresentation === 'segmented' ? (\n <ds-tab-group\n tabs={this.resolvedSections}\n value={this.value}\n size={this.sectionsSize}\n width=\"fill\"\n ariaLabel={this.sectionsAriaLabel}\n onDsChange={this.handleSectionChange}\n />\n ) : (\n <ds-mobile-section-switcher\n presentation={hasSubsections ? 'menu' : 'sheet'}\n sections={this.resolvedSections}\n value={this.value}\n navigationLabel={this.sectionsAriaLabel}\n onDsChange={this.handleSectionChange}\n />\n ),\n ]\n ) : (\n <ds-text\n class=\"mobile-header__heading\"\n as={Heading}\n variant=\"text-body-large\"\n emphasis\n color={foreground}\n lineTruncation={1}\n >\n {this.selectedLabel}\n </ds-text>\n )}\n {inlineSubsections ? this.renderSubsections() : null}\n </div>\n <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n <slot name=\"trailing\" />\n </div>\n </div>\n {hasSubsections && !inlineSubsections && !combinedSubsections ? (\n <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n <ds-mobile-section-switcher\n sections={this.resolvedSubsections}\n value={this.subvalue}\n navigationLabel={this.subsectionsAriaLabel}\n onDsChange={this.handleSubsectionChange}\n />\n </nav>\n ) : null}\n </header>\n </Host>\n );\n }\n\n private renderSubsections() {\n return (\n <nav class=\"mobile-header__inline-subsections\" aria-label={this.subsectionsAriaLabel}>\n <ds-mobile-section-switcher\n sections={this.resolvedSubsections}\n value={this.subvalue}\n navigationLabel={this.subsectionsAriaLabel}\n onDsChange={this.handleSubsectionChange}\n />\n </nav>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|