@ds-mo/ui 14.11.1 → 14.13.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/NOTICE +10 -0
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +104 -9
- package/dist/angular/ds-pagination.d.ts +1 -1
- package/dist/angular/ds-pagination.js +3 -3
- package/dist/angular/ds-paper-texture.d.ts +12 -0
- package/dist/angular/ds-paper-texture.js +38 -0
- package/dist/angular/ds-shell-app.d.ts +1 -1
- package/dist/angular/ds-shell-app.js +3 -3
- package/dist/angular/ds-table.d.ts +1 -1
- package/dist/angular/ds-table.js +3 -3
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -0
- package/dist/angular/proxies.d.ts +1 -0
- package/dist/angular/proxies.js +1 -0
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-badge.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-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-bar-workflow.js.map +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-chart.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-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-filter-menu.js.map +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-paper-texture.d.ts +11 -0
- package/dist/components/ds-paper-texture.js +2 -0
- package/dist/components/ds-paper-texture.js.map +1 -0
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table-saved-views.js +1 -1
- package/dist/components/ds-table-saved-views.js.map +1 -1
- package/dist/components/ds-table-toolbar.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-typing-indicator.js +1 -1
- package/dist/components/p-BEvBJ65v.js +2 -0
- package/dist/components/p-BEvBJ65v.js.map +1 -0
- package/dist/components/{p-DvJkkdIO.js → p-BxqBiVbH.js} +2 -2
- package/dist/components/p-BzLnSwG9.js +2 -0
- package/dist/components/p-BzLnSwG9.js.map +1 -0
- package/dist/components/{p-CbfmzgdW.js → p-BzObtSlo.js} +2 -2
- package/dist/components/{p-Bv1CFHgD.js → p-C2n8A8NA.js} +2 -2
- package/dist/components/p-C5eosu67.js +2 -0
- package/dist/components/p-C5eosu67.js.map +1 -0
- package/dist/components/{p-c_5SXjwx.js → p-C7rzVotG.js} +2 -2
- package/dist/components/{p-bQm3gfr1.js → p-CKJzHclc.js} +2 -2
- package/dist/components/p-CWDmHPJC.js +2 -0
- package/dist/components/p-CWDmHPJC.js.map +1 -0
- package/dist/components/{p-BPnmiiIS.js → p-CjgnFGd6.js} +2 -2
- package/dist/components/{p-BuGGwWmt.js → p-Ck_VRQYi.js} +2 -2
- package/dist/components/p-CnWC0QvG.js +2 -0
- package/dist/components/p-CnWC0QvG.js.map +1 -0
- package/dist/components/p-CooNucm0.js +2 -0
- package/dist/components/p-CooNucm0.js.map +1 -0
- package/dist/components/{p-CoQSB3tl.js → p-Ct-m0I6U.js} +2 -2
- package/dist/components/{p-CqbMoVDQ.js → p-Cyw9odJX.js} +2 -2
- package/dist/components/{p-D5VglrfF.js → p-D1Nqlrrl.js} +2 -2
- package/dist/components/p-DIEx1e0M.js +2 -0
- package/dist/components/p-DIEx1e0M.js.map +1 -0
- package/dist/components/{p-DjqZWBnM.js → p-DL_5VENG.js} +2 -2
- package/dist/components/p-DfyfrfHL.js +2 -0
- package/dist/components/p-DfyfrfHL.js.map +1 -0
- package/dist/components/{p-CvwtYbmh.js → p-Dsn1RCS5.js} +2 -2
- package/dist/components/{p-D5bPuNiF.js → p-M9DPfXbP.js} +2 -2
- package/dist/components/{p-DgWGfscR.js → p-Rfpd5mWO.js} +2 -2
- package/dist/components/p-URdgCwEs.js +2 -0
- package/dist/components/{p-BCg_6ErW.js.map → p-URdgCwEs.js.map} +1 -1
- package/dist/components/{p-1tOy4H51.js → p-V2ywPfsR.js} +2 -2
- package/dist/components/{p-BVmKcpyP.js → p-iBuPFJL9.js} +2 -2
- package/dist/components/p-vWK5faWZ.js +2 -0
- package/dist/components/p-vWK5faWZ.js.map +1 -0
- package/dist/docs/components.json +163 -5
- package/dist/lib/shell/index.js.map +2 -2
- package/dist/lib/shell/shell-responsive.d.ts +1 -1
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/filter-menu.json +1 -1
- package/dist/mcp-data/registry/menu.json +1 -1
- package/dist/mcp-data/registry/pagination.json +21 -3
- package/dist/mcp-data/registry/panel-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +1 -1
- package/dist/mcp-data/registry/paper-texture.json +141 -0
- package/dist/mcp-data/registry/registry.json +106 -8
- package/dist/mcp-data/registry/select.json +2 -2
- package/dist/mcp-data/registry/shell-app.json +26 -5
- package/dist/mcp-data/registry/shell-tools.json +2 -2
- package/dist/mcp-data/registry/table-saved-views.json +6 -6
- package/dist/mcp-data/registry/table.json +31 -13
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-paper-texture.d.ts +9 -0
- package/dist/react/ds-paper-texture.js +12 -0
- package/dist/styles/table.css +5 -0
- package/dist/types/components/Pagination/Pagination.d.ts +2 -0
- package/dist/types/components/Pagination/pagination-types.d.ts +2 -0
- package/dist/types/components/PanelTools/PanelTools.d.ts +1 -0
- package/dist/types/components/PaperTexture/PaperTexture.d.ts +18 -0
- package/dist/types/components/PaperTexture/paper-texture-types.d.ts +39 -0
- package/dist/types/components/ShellApp/ShellApp.d.ts +7 -2
- package/dist/types/components/Table/Table.d.ts +19 -1
- package/dist/types/components/Table/table-layout-controller.d.ts +7 -1
- package/dist/types/components/Table/table-model.d.ts +3 -2
- package/dist/types/components/Table/table-viewport-fit-controller.d.ts +5 -1
- package/dist/types/components/Table/table-virtual-controller.d.ts +14 -1
- package/dist/types/components/Table/table-virtual-model.d.ts +26 -1
- package/dist/types/components/TableSavedViews/TableSavedViews.d.ts +1 -1
- package/dist/types/components.d.ts +59 -4
- package/dist/types/shell/shell-responsive.d.ts +1 -1
- package/package.json +4 -2
- package/dist/components/p-BCg_6ErW.js +0 -2
- package/dist/components/p-BFSnIEsC.js +0 -2
- package/dist/components/p-BFSnIEsC.js.map +0 -1
- package/dist/components/p-BiTwXttN.js +0 -2
- package/dist/components/p-BiTwXttN.js.map +0 -1
- package/dist/components/p-BmWWU20X.js +0 -2
- package/dist/components/p-BmWWU20X.js.map +0 -1
- package/dist/components/p-C-L4InQ0.js +0 -2
- package/dist/components/p-C-L4InQ0.js.map +0 -1
- package/dist/components/p-C-Zgq_Fx.js +0 -2
- package/dist/components/p-C-Zgq_Fx.js.map +0 -1
- package/dist/components/p-C1jsgfeh.js +0 -2
- package/dist/components/p-C1jsgfeh.js.map +0 -1
- package/dist/components/p-D8nnhQNJ.js +0 -2
- package/dist/components/p-D8nnhQNJ.js.map +0 -1
- package/dist/components/p-DNpE0RBz.js +0 -2
- package/dist/components/p-DNpE0RBz.js.map +0 -1
- /package/dist/components/{p-DvJkkdIO.js.map → p-BxqBiVbH.js.map} +0 -0
- /package/dist/components/{p-CbfmzgdW.js.map → p-BzObtSlo.js.map} +0 -0
- /package/dist/components/{p-Bv1CFHgD.js.map → p-C2n8A8NA.js.map} +0 -0
- /package/dist/components/{p-c_5SXjwx.js.map → p-C7rzVotG.js.map} +0 -0
- /package/dist/components/{p-bQm3gfr1.js.map → p-CKJzHclc.js.map} +0 -0
- /package/dist/components/{p-BPnmiiIS.js.map → p-CjgnFGd6.js.map} +0 -0
- /package/dist/components/{p-BuGGwWmt.js.map → p-Ck_VRQYi.js.map} +0 -0
- /package/dist/components/{p-CoQSB3tl.js.map → p-Ct-m0I6U.js.map} +0 -0
- /package/dist/components/{p-CqbMoVDQ.js.map → p-Cyw9odJX.js.map} +0 -0
- /package/dist/components/{p-D5VglrfF.js.map → p-D1Nqlrrl.js.map} +0 -0
- /package/dist/components/{p-DjqZWBnM.js.map → p-DL_5VENG.js.map} +0 -0
- /package/dist/components/{p-CvwtYbmh.js.map → p-Dsn1RCS5.js.map} +0 -0
- /package/dist/components/{p-D5bPuNiF.js.map → p-M9DPfXbP.js.map} +0 -0
- /package/dist/components/{p-DgWGfscR.js.map → p-Rfpd5mWO.js.map} +0 -0
- /package/dist/components/{p-1tOy4H51.js.map → p-V2ywPfsR.js.map} +0 -0
- /package/dist/components/{p-BVmKcpyP.js.map → p-iBuPFJL9.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as n,H as t,c as o,h as i,a as e,t as s}from"./index.js";import{b as d,r}from"./p-Dr4AgJbV.js";import{d as l}from"./p-D8nnhQNJ.js";import{d as c}from"./p-BFfLvMZd.js";import{d as a}from"./p-Ca-I2UnB.js";import{d as u}from"./p-DZFilC--.js";import{c as f}from"./p-DuFm-ieS.js";const b=()=>`@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--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-button-unfilled-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-button-unfilled-h,.ds-focus-ring.sc-ds-button-unfilled,.ds-focus-ring-inset.sc-ds-button-unfilled-h,.ds-focus-ring-inset.sc-ds-button-unfilled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-unfilled-h:focus-visible,.ds-focus-ring.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{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-button-unfilled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::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-button-unfilled-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--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}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{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-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::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-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h,.ds-interaction-fill--grouped.sc-ds-button-unfilled{--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-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-button-unfilled-h,.ds-interaction-fill--on-faint.sc-ds-button-unfilled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-translucent.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-inverted.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-media.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--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-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::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--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::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-button-unfilled-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-button-unfilled: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)}}.ds-control-press-scale.sc-ds-button-unfilled{transition:scale var(--effect-motion-short-2)}.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:var(--ds-control-press-active-scale, var(--dimension-scale-subtle))}@media (prefers-reduced-motion: reduce){.ds-control-press-scale.sc-ds-button-unfilled,.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:none;transition:none}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--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-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-button-unfilled,.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled,.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled,.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--lg.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--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}.ds-control--lg.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-100) - var(--dimension-space-025) )}.ds-control--md.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-075) - var(--dimension-space-025) )}.ds-control--sm.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-050) - var(--dimension-space-025) )}.ds-control--xs.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--xs.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-025) - var(--dimension-space-025) )}.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc( var(--dimension-space-100) - var(--dimension-space-050) )}.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc( var(--dimension-space-075) - var(--dimension-space-050) )}.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc( var(--dimension-space-050) - var(--dimension-space-050) )}.ds-control-frame.sc-ds-button-unfilled{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-button-unfilled{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-button-unfilled{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-button-unfilled{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-button-unfilled{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none}.ds-button-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-button-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .ds-button.sc-ds-button-unfilled{width:100%}.ds-button.sc-ds-button-unfilled{justify-content:center;overflow:hidden;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));cursor:default;-webkit-user-select:none;user-select:none}.ds-button--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.ds-button--rounded.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-half)}.ds-button--expanded.sc-ds-button-unfilled{--ds-interaction-hover:var(--ds-interaction-pressed)}.ds-button--expanded.sc-ds-button-unfilled::after{background:var(--ds-interaction-pressed)}.ds-button--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012)}.ds-button--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-button__icon-wrap.sc-ds-button-unfilled,.ds-button__label.sc-ds-button-unfilled,.ds-button__chevron.sc-ds-button-unfilled{position:relative;z-index:2}.ds-button__label.sc-ds-button-unfilled{flex-shrink:0;min-width:0;white-space:nowrap}.ds-button__label--loading.sc-ds-button-unfilled,.ds-button__chevron--loading.sc-ds-button-unfilled{visibility:hidden}.ds-button.sc-ds-button-unfilled>.ds-button__loader-overlay.sc-ds-button-unfilled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.ds-button__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}@media (forced-colors: active){.ds-button.sc-ds-button-unfilled{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}.sc-ds-button-unfilled-h{--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled.sc-ds-button-unfilled{background:transparent;color:var(--ds-button-unfilled-fg)}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--background-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--background-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--background-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--background-translucent.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-translucent-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-translucent-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-translucent-translucent);--ds-button-unfilled-border:var(--color-translucent-border-secondary)}.button-unfilled--background-inverted.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-inverted-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-inverted-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-inverted-background);--ds-button-unfilled-border:var(--color-inverted-border-secondary)}.button-unfilled--background-media.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-media-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-media-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-media-background);--ds-button-unfilled-border:var(--color-media-border-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}`;const v=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.isInset=false;this.insetDepth="single";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.rounded=false;this.pressScale=true;this.dot=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.hasMenu=false;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsClick.emit(n);if(this.pressed!==undefined)this.dsChange.emit(!this.pressed)}}async setFocus(){this.buttonEl?.focus()}get showDot(){return this.variant==="icon"&&this.dot&&!this.isLoading}get resolvedHaspopup(){return this.haspopup??(this.hasMenu?"menu":undefined)}get doubleInset(){return this.isInset&&this.insetDepth==="double"&&this.size!=="xs"}get expandedPopup(){return this.expanded===true&&this.resolvedHaspopup!==undefined&&!this.isInactive}get visuallyActive(){return this.isActive||this.pressed===true}get dotRing(){if((this.isActive||this.pressed===true)&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}render(){const n=this.background;const t={"button-unfilled":true,"ds-button":true,"ds-focus-ring-inset":true,"ds-control-press-scale":this.pressScale,"ds-interaction-fill":true,"ds-interaction-fill--selected":(this.isActive||this.pressed===true)&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-faint":n==="faint","ds-interaction-fill--on-medium":n==="medium","ds-interaction-fill--on-bold":n==="bold","ds-interaction-fill--on-strong":n==="strong","ds-interaction-fill--on-translucent":n==="translucent","ds-interaction-fill--on-inverted":n==="inverted","ds-interaction-fill--on-media":n==="media","ds-interaction-fill--on-always-dark":n==="always-dark","button-unfilled--active":this.visuallyActive,"button-unfilled--expanded":this.expandedPopup,"ds-button--expanded":this.expandedPopup,"button-unfilled--bordered":this.hasBorder,"ds-button--bordered":this.hasBorder,"button-unfilled--rounded":this.rounded,"ds-button--rounded":this.rounded,"ds-control-inactive":this.isInactive,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,"ds-control-frame":true,"button-unfilled--icon":this.variant==="icon","ds-button--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--background-faint":n==="faint","button-unfilled--background-medium":n==="medium","button-unfilled--background-bold":n==="bold","button-unfilled--background-strong":n==="strong","button-unfilled--background-translucent":n==="translucent","button-unfilled--background-inverted":n==="inverted","button-unfilled--background-media":n==="media","button-unfilled--on-always-dark":n==="always-dark"};return i(e,{key:"684528ef5a9402c0dde55b83fa59a08e4c77bf4f",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-button-host--icon":this.variant==="icon","ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,...f(this.width)},tabIndex:-1},i("button",{key:"674e1d52b53eec6e954fa169646b01ed9df8dc1e",ref:n=>{this.buttonEl=n??null},type:this.type,class:t,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.resolvedHaspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onPointerDown:n=>d(n,this.pressScale&&!this.isInactive&&!this.isLoading),onClick:this.handleClick},r({namespace:"button-unfilled",variant:this.variant,size:this.size,label:this.label,icon:this.icon,hasMenu:this.hasMenu,isLoading:this.isLoading,dot:{visible:this.showDot,background:this.dotRing}})))}get el(){return this}static get style(){return b()}},[2,"ds-button-unfilled",{variant:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],rounded:[4],pressScale:[4,"press-scale"],dot:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],hasMenu:[4,"has-menu"],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-loader","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(s(n))){customElements.define(s(n),v)}break;case"ds-badge":if(!customElements.get(s(n))){l()}break;case"ds-icon":if(!customElements.get(s(n))){c()}break;case"ds-loader":if(!customElements.get(s(n))){a()}break;case"ds-text":if(!customElements.get(s(n))){u()}break}}))}h();export{v as B,h as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as n,H as t,c as o,h as i,a as e,t as s}from"./index.js";import{b as d,r}from"./p-Dr4AgJbV.js";import{d as l}from"./p-vWK5faWZ.js";import{d as c}from"./p-BFfLvMZd.js";import{d as a}from"./p-Ca-I2UnB.js";import{d as u}from"./p-DZFilC--.js";import{c as f}from"./p-DuFm-ieS.js";const b=()=>`@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--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-button-unfilled-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-button-unfilled-h,.ds-focus-ring.sc-ds-button-unfilled,.ds-focus-ring-inset.sc-ds-button-unfilled-h,.ds-focus-ring-inset.sc-ds-button-unfilled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-unfilled-h:focus-visible,.ds-focus-ring.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{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-button-unfilled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::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-button-unfilled-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--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}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{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-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::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-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h,.ds-interaction-fill--grouped.sc-ds-button-unfilled{--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-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-button-unfilled-h,.ds-interaction-fill--on-faint.sc-ds-button-unfilled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-translucent.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-inverted.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-media.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--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-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::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--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::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-button-unfilled-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-button-unfilled: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)}}.ds-control-press-scale.sc-ds-button-unfilled{transition:scale var(--effect-motion-short-2)}.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:var(--ds-control-press-active-scale, var(--dimension-scale-subtle))}@media (prefers-reduced-motion: reduce){.ds-control-press-scale.sc-ds-button-unfilled,.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:none;transition:none}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--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-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-button-unfilled,.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled,.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled,.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--lg.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--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}.ds-control--lg.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-100) - var(--dimension-space-025) )}.ds-control--md.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-075) - var(--dimension-space-025) )}.ds-control--sm.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-050) - var(--dimension-space-025) )}.ds-control--xs.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--xs.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-025) - var(--dimension-space-025) )}.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc( var(--dimension-space-100) - var(--dimension-space-050) )}.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc( var(--dimension-space-075) - var(--dimension-space-050) )}.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc( var(--dimension-space-050) - var(--dimension-space-050) )}.ds-control-frame.sc-ds-button-unfilled{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-button-unfilled{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-button-unfilled{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-button-unfilled{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-button-unfilled{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none}.ds-button-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-button-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .ds-button.sc-ds-button-unfilled{width:100%}.ds-button.sc-ds-button-unfilled{justify-content:center;overflow:hidden;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));cursor:default;-webkit-user-select:none;user-select:none}.ds-button--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.ds-button--rounded.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-half)}.ds-button--expanded.sc-ds-button-unfilled{--ds-interaction-hover:var(--ds-interaction-pressed)}.ds-button--expanded.sc-ds-button-unfilled::after{background:var(--ds-interaction-pressed)}.ds-button--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012)}.ds-button--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-button__icon-wrap.sc-ds-button-unfilled,.ds-button__label.sc-ds-button-unfilled,.ds-button__chevron.sc-ds-button-unfilled{position:relative;z-index:2}.ds-button__label.sc-ds-button-unfilled{flex-shrink:0;min-width:0;white-space:nowrap}.ds-button__label--loading.sc-ds-button-unfilled,.ds-button__chevron--loading.sc-ds-button-unfilled{visibility:hidden}.ds-button.sc-ds-button-unfilled>.ds-button__loader-overlay.sc-ds-button-unfilled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.ds-button__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}@media (forced-colors: active){.ds-button.sc-ds-button-unfilled{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}.sc-ds-button-unfilled-h{--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled.sc-ds-button-unfilled{background:transparent;color:var(--ds-button-unfilled-fg)}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--background-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--background-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--background-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--background-translucent.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-translucent-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-translucent-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-translucent-translucent);--ds-button-unfilled-border:var(--color-translucent-border-secondary)}.button-unfilled--background-inverted.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-inverted-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-inverted-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-inverted-background);--ds-button-unfilled-border:var(--color-inverted-border-secondary)}.button-unfilled--background-media.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-media-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-media-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-media-background);--ds-button-unfilled-border:var(--color-media-border-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}`;const v=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.isInset=false;this.insetDepth="single";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.rounded=false;this.pressScale=true;this.dot=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.hasMenu=false;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsClick.emit(n);if(this.pressed!==undefined)this.dsChange.emit(!this.pressed)}}async setFocus(){this.buttonEl?.focus()}get showDot(){return this.variant==="icon"&&this.dot&&!this.isLoading}get resolvedHaspopup(){return this.haspopup??(this.hasMenu?"menu":undefined)}get doubleInset(){return this.isInset&&this.insetDepth==="double"&&this.size!=="xs"}get expandedPopup(){return this.expanded===true&&this.resolvedHaspopup!==undefined&&!this.isInactive}get visuallyActive(){return this.isActive||this.pressed===true}get dotRing(){if((this.isActive||this.pressed===true)&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}render(){const n=this.background;const t={"button-unfilled":true,"ds-button":true,"ds-focus-ring-inset":true,"ds-control-press-scale":this.pressScale,"ds-interaction-fill":true,"ds-interaction-fill--selected":(this.isActive||this.pressed===true)&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-faint":n==="faint","ds-interaction-fill--on-medium":n==="medium","ds-interaction-fill--on-bold":n==="bold","ds-interaction-fill--on-strong":n==="strong","ds-interaction-fill--on-translucent":n==="translucent","ds-interaction-fill--on-inverted":n==="inverted","ds-interaction-fill--on-media":n==="media","ds-interaction-fill--on-always-dark":n==="always-dark","button-unfilled--active":this.visuallyActive,"button-unfilled--expanded":this.expandedPopup,"ds-button--expanded":this.expandedPopup,"button-unfilled--bordered":this.hasBorder,"ds-button--bordered":this.hasBorder,"button-unfilled--rounded":this.rounded,"ds-button--rounded":this.rounded,"ds-control-inactive":this.isInactive,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,"ds-control-frame":true,"button-unfilled--icon":this.variant==="icon","ds-button--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--background-faint":n==="faint","button-unfilled--background-medium":n==="medium","button-unfilled--background-bold":n==="bold","button-unfilled--background-strong":n==="strong","button-unfilled--background-translucent":n==="translucent","button-unfilled--background-inverted":n==="inverted","button-unfilled--background-media":n==="media","button-unfilled--on-always-dark":n==="always-dark"};return i(e,{key:"684528ef5a9402c0dde55b83fa59a08e4c77bf4f",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-button-host--icon":this.variant==="icon","ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,...f(this.width)},tabIndex:-1},i("button",{key:"674e1d52b53eec6e954fa169646b01ed9df8dc1e",ref:n=>{this.buttonEl=n??null},type:this.type,class:t,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.resolvedHaspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onPointerDown:n=>d(n,this.pressScale&&!this.isInactive&&!this.isLoading),onClick:this.handleClick},r({namespace:"button-unfilled",variant:this.variant,size:this.size,label:this.label,icon:this.icon,hasMenu:this.hasMenu,isLoading:this.isLoading,dot:{visible:this.showDot,background:this.dotRing}})))}get el(){return this}static get style(){return b()}},[2,"ds-button-unfilled",{variant:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],rounded:[4],pressScale:[4,"press-scale"],dot:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],hasMenu:[4,"has-menu"],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-loader","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(s(n))){customElements.define(s(n),v)}break;case"ds-badge":if(!customElements.get(s(n))){l()}break;case"ds-icon":if(!customElements.get(s(n))){c()}break;case"ds-loader":if(!customElements.get(s(n))){a()}break;case"ds-text":if(!customElements.get(s(n))){u()}break}}))}h();export{v as B,h as d};
|
|
2
|
+
//# sourceMappingURL=p-C7rzVotG.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as o,h as s,a as t,t as a}from"./index.js";import{C as i}from"./p-BnhGV__o.js";import{d as c}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as o,h as s,a as t,t as a}from"./index.js";import{C as i}from"./p-BnhGV__o.js";import{d as c}from"./p-vWK5faWZ.js";import{d}from"./p-C7rzVotG.js";import{d as n}from"./p-BFfLvMZd.js";import{d as r}from"./p-Ca-I2UnB.js";import{d as l}from"./p-DZFilC--.js";import{d as f}from"./p-BXPQmp7q.js";const b=()=>`.sc-ds-code-block-h{display:block;width:100%;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.code-block.sc-ds-code-block{width:100%;min-width:0;margin:0;overflow:hidden;border-radius:var(--dimension-radius-050);background:var(--color-background-strong-neutral);color:var(--color-foreground-faint-neutral);box-sizing:border-box}.code-block__header.sc-ds-code-block{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-100);background:var(--color-background-strong-neutral);box-sizing:border-box}pre.sc-ds-code-block{margin:0;padding:var(--dimension-space-150);overflow:auto;font-family:var( --typography-font-family-code, 'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace );font-size:var(--typography-fontsize-sm);font-variant-ligatures:var(--ds-code-font-variant-ligatures, normal);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none);tab-size:2;-webkit-user-select:text;user-select:text}code.sc-ds-code-block{font:inherit;white-space:pre}`;const p=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.code="";this.language="";this.filename="";this.copied=false;this.copyFeedback=new i((e=>{this.copied=e}));this.copy=async()=>{await this.copyFeedback.copy(this.code)}}connectedCallback(){this.copyFeedback.connect()}handleCodeChange(){this.copyFeedback.reset()}disconnectedCallback(){this.copyFeedback.disconnect()}render(){const e=this.filename||this.language||"Code";return s(t,{key:"6d20caf96fceb733c44fe7cc669df42b7033aab9"},s("figure",{key:"7c55036013f4c3de0f90a3a1f90eb87e0b2778c2",class:"code-block"},s("figcaption",{key:"061e43ca1f0ad5760d61648a4f8be3faba409f2b",class:"code-block__header"},s("ds-text",{key:"4f726dfeb9c9e3de71cf8ca0177e0570f1742d65",as:"span",variant:"text-caption",emphasis:true,color:"on-strong"},e),s("ds-tooltip",{key:"6bb56e6104e5c882eeedeef7b1b493d93d625182",label:this.copied?"Copied":"Copy code",side:"bottom",size:"sm"},s("ds-button-unfilled",{key:"c9c6677443721145038d5dbdb981829421f03444",variant:"icon",icon:this.copied?"Check":"Copy",size:"xs","aria-label":this.copied?"Copied":"Copy code",hasBorder:false,onDsClick:this.copy}))),s("pre",{key:"547fc22eac923e932757f6ec70262a8fc0c90b28"},s("code",{key:"9da4dba3b52a76f823462e3d023fc17c77c670f9"},this.code))))}static get watchers(){return{code:[{handleCodeChange:0}]}}static get style(){return b()}},[2,"ds-code-block",{code:[1],language:[1],filename:[1],copied:[32]},undefined,{code:[{handleCodeChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-code-block","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-code-block":if(!customElements.get(a(e))){customElements.define(a(e),p)}break;case"ds-badge":if(!customElements.get(a(e))){c()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){d()}break;case"ds-icon":if(!customElements.get(a(e))){n()}break;case"ds-loader":if(!customElements.get(a(e))){r()}break;case"ds-text":if(!customElements.get(a(e))){l()}break;case"ds-tooltip":if(!customElements.get(a(e))){f()}break}}))}m();export{p as C,m as d};
|
|
2
|
+
//# sourceMappingURL=p-CKJzHclc.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as e,H as s,c as t,h as i,a as o,t as l}from"./index.js";import{o as a,a as n,r,b as h,d}from"./p-BzLnSwG9.js";import{i as c,r as m}from"./p-BEvBJ65v.js";import{d as u}from"./p-vWK5faWZ.js";import{d as b}from"./p-C7rzVotG.js";import{d as p}from"./p-BFfLvMZd.js";import{d as f}from"./p-Ca-I2UnB.js";import{d as g}from"./p-DfyfrfHL.js";import{d as v}from"./p-C2n8A8NA.js";import{d as w}from"./p-Cyw9odJX.js";import{d as k}from"./p-Dsn1RCS5.js";import{d as _}from"./p-Rfpd5mWO.js";import{d as y}from"./p-Btxwp4lJ.js";import{d as C}from"./p-BzObtSlo.js";import{d as x}from"./p-jMCRaxQW.js";import{d as E}from"./p-DZFilC--.js";import{d as j}from"./p-BXPQmp7q.js";const L=()=>`:host{display:block;min-width:0;min-height:0;height:100%;background:transparent}:host([responsive-mode='mobile']){width:100%;background:var(--color-background-primary)}.shell-tools__desktop,.shell-tools__desktop ds-panel-tools,.shell-tools__mobile{display:block;min-width:0;min-height:0;height:100%}.shell-tools__slot-proxy{display:block;width:100%;height:100%;min-width:0;min-height:0}.shell-tools__mobile{display:grid;grid-template-rows:auto minmax(0, 1fr);background:var(--color-background-primary)}.shell-tools__mobile-header{grid-row:1}.shell-tools__mobile-body,.shell-tools__view{min-width:0;min-height:0;height:100%}.shell-tools__mobile-body{grid-row:2;overflow:hidden}.shell-tools__view{overflow:auto;overscroll-behavior:contain}.shell-tools__view[hidden]{display:none}.shell-tools__view ::slotted(*){min-height:0}`;const B=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.responsiveMode="desktop";this.open=false;this.activeTool="";this.presentation="drawer";this.fullscreenHeaderMode="shared";this.items=[];this.headers={};this.storageKey="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.inboxLabel="Inbox";this.inboxNavigationLabel="Inbox sections";this.panelToolsEl=null;this.selectInboxTool=e=>{const s=e.detail;if(!this.availableInboxTools.includes(s)||s===this.mobileActiveTool)return;this.open=true;this.activeTool=s;this.dsToolChange.emit({id:s,selected:true})};this.handlePanelToolChange=e=>{this.activeTool=e.detail.id;this.open=e.detail.selected};this.handlePanelPresentationChange=e=>{this.presentation=e.detail.presentation};this.handleMobileHeaderAction=(e,s,t)=>{t.stopPropagation();this.dsHeaderAction.emit({tool:e,id:s})}}presentationChanged(e,s){if(e===s)return;if(this.panelToolsEl&&this.panelToolsEl.getAttribute("presentation")!==e){this.panelToolsEl.setAttribute("presentation",e)}}get resolvedItems(){return this.items??[]}get availableInboxTools(){return this.resolvedItems.filter((e=>!e.isInactive&&(e.mobileDestination==="inbox"||c(e.id)))).map((e=>e.id))}get mobileViewOrder(){return a(this.resolvedItems).map((e=>e.id))}toolLabel(e){const s=this.resolvedItems.find((s=>s.id===e));return s?.label??s?.ariaLabel??n[e]??e}get mobileActiveTool(){const e=this.resolvedItems.find((e=>e.id===this.activeTool));const s=e?.mobileDestination==="inbox"||c(this.activeTool);if(!s)return this.activeTool;return m(this.activeTool,this.availableInboxTools)}componentWillLoad(){this.reconcileAvailability()}handleItemsChange(){this.reconcileAvailability()}reconcileAvailability(){const e=r(this.resolvedItems,this.open,this.activeTool);this.open=e.open;this.activeTool=e.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(e){return this.resolvedHeaders()[e]??{}}activateMobileTool(e){const s=this.resolvedItems.find((s=>s.id===e));if(!s||s.isInactive)return;const t=h(this.open,this.activeTool,e);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:e,selected:t.selected})}async activateTool(e){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.activateTool(e));return}this.activateMobileTool(e)}async closeDrawer(){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.closeDrawer());return}if(!this.open)return;const e=this.activeTool;this.open=false;if(e)this.dsToolChange.emit({id:e,selected:false})}async focusHeaderAction(e){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.focusHeaderAction(e));return}const s=(this.el.shadowRoot??this.el).querySelector(`[data-header-action-id="${CSS.escape(e)}"]`);await(s?.setFocus?.())}renderForwardedSlots(){return this.mobileViewOrder.flatMap((e=>[i("div",{key:`tool:${e}`,class:"shell-tools__slot-proxy",slot:e},i("slot",{name:e})),i("div",{key:`tool-view:${e}`,class:"shell-tools__slot-proxy",slot:`${e}-view`},i("slot",{name:`${e}-view`}))]))}renderDesktop(){return i("div",{class:"shell-tools__desktop"},i("ds-panel-tools",{open:this.open,activeTool:this.activeTool,presentation:this.presentation,fullscreenHeaderMode:this.fullscreenHeaderMode,items:this.resolvedItems,headers:this.resolvedHeaders(),storageKey:this.storageKey,toolsLabel:this.toolsLabel,toolShortcutsLabel:this.toolShortcutsLabel,ref:e=>{this.panelToolsEl=e},onDsToolChange:this.handlePanelToolChange,onDsPresentationChange:this.handlePanelPresentationChange},this.renderForwardedSlots()))}renderMobileHeader(e){const s=this.activeHeader(e);const t=s.title?.trim();const o=t||this.toolLabel(e);const l=(s.actions??[]).filter((e=>e.id!=="fullscreen"));const a=c(e)&&!s.showBack;const n=a?this.availableInboxTools.map((e=>{const s=this.resolvedItems.find((s=>s.id===e));return{id:e,label:this.toolLabel(e),variant:"label",dot:s?.dot}})):[];return i("ds-mobile-header",{class:"shell-tools__mobile-header",heading:o,headingLevel:"h2",sections:n,value:e,sectionsAriaLabel:this.inboxNavigationLabel,sectionsPresentation:a?"segmented":"switcher",sectionsSize:"lg",onDsSectionChange:this.selectInboxTool},s.showBack?i("ds-tooltip",{slot:"leading",label:s.backAriaLabel||"Back",side:"bottom",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:s.backIcon||"ChevronLeft",size:"md","aria-label":s.backAriaLabel||"Back",activeFill:false,hasBorder:false,onDsClick:()=>this.dsHeaderBack.emit({tool:e})})):null,l.map((s=>i("ds-tooltip",{slot:"trailing",key:s.id,label:s.ariaLabel,side:"bottom",size:"sm"},i("ds-button-unfilled",{id:s.triggerId||undefined,"data-header-action-id":s.id,variant:"icon",icon:s.icon,size:"md","aria-label":s.ariaLabel,haspopup:s.haspopup,controls:s.controls,expanded:s.expanded,pressed:s.pressed,isInactive:s.isInactive,activeFill:false,hasBorder:false,onDsClick:t=>this.handleMobileHeaderAction(e,s.id,t)})))))}renderMobile(){const e=this.mobileActiveTool;return i("div",{class:"shell-tools__mobile","aria-hidden":this.open&&e?undefined:"true",inert:this.open&&e?undefined:true},e?this.renderMobileHeader(e):null,i("div",{class:"shell-tools__mobile-body"},this.mobileViewOrder.map((s=>{const t=this.open&&s===e;return i("div",{key:`mobile-tool-view:${s}`,class:{"shell-tools__view":true,"shell-tools__view--active":t},hidden:!t,"aria-hidden":t?undefined:"true",inert:t?undefined:true},i("slot",{name:`${s}-view`},i("slot",{name:s})))}))))}render(){const e=this.responsiveMode==="mobile";return i(o,{key:"638abaf130b06ee91488149ab42829bbd89b18a7",role:e?this.presentation==="fullscreen"?"dialog":"complementary":undefined,"aria-modal":e&&this.presentation==="fullscreen"?"true":undefined,"aria-label":e?this.toolsLabel:undefined},e?this.renderMobile():this.renderDesktop())}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}}static get style(){return L()}},[257,"ds-shell-tools",{responsiveMode:[513,"responsive-mode"],open:[1540],activeTool:[1537,"active-tool"],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],items:[16],headers:[16],storageKey:[1,"storage-key"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],inboxLabel:[1,"inbox-label"],inboxNavigationLabel:[1,"inbox-navigation-label"],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},undefined,{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}]);function D(){if(typeof customElements==="undefined"){return}const e=["ds-shell-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-header","ds-mobile-section-switcher","ds-panel-tool-header","ds-panel-tools","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-shell-tools":if(!customElements.get(l(e))){customElements.define(l(e),B)}break;case"ds-badge":if(!customElements.get(l(e))){u()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){b()}break;case"ds-icon":if(!customElements.get(l(e))){p()}break;case"ds-loader":if(!customElements.get(l(e))){f()}break;case"ds-menu":if(!customElements.get(l(e))){g()}break;case"ds-mobile-header":if(!customElements.get(l(e))){v()}break;case"ds-mobile-section-switcher":if(!customElements.get(l(e))){w()}break;case"ds-panel-tool-header":if(!customElements.get(l(e))){k()}break;case"ds-panel-tools":if(!customElements.get(l(e))){d()}break;case"ds-swatch-picker":if(!customElements.get(l(e))){_()}break;case"ds-switch":if(!customElements.get(l(e))){y()}break;case"ds-tab-group":if(!customElements.get(l(e))){C()}break;case"ds-tag":if(!customElements.get(l(e))){x()}break;case"ds-text":if(!customElements.get(l(e))){E()}break;case"ds-tooltip":if(!customElements.get(l(e))){j()}break}}))}D();export{B as S,D as d};
|
|
2
|
+
//# sourceMappingURL=p-CWDmHPJC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["shellToolsCss","ShellTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","responsiveMode","open","activeTool","presentation","fullscreenHeaderMode","items","headers","storageKey","toolsLabel","toolShortcutsLabel","inboxLabel","inboxNavigationLabel","panelToolsEl","selectInboxTool","event","id","detail","availableInboxTools","includes","mobileActiveTool","dsToolChange","emit","selected","handlePanelToolChange","handlePanelPresentationChange","handleMobileHeaderAction","tool","stopPropagation","dsHeaderAction","presentationChanged","next","previous","getAttribute","setAttribute","resolvedItems","filter","item","isInactive","mobileDestination","isShellInboxTool","map","mobileViewOrder","orderPanelToolsItems","toolLabel","find","candidate","label","ariaLabel","PANEL_TOOLS_LABELS","inbox","resolveAvailableInboxTool","componentWillLoad","reconcileAvailability","handleItemsChange","reconcilePanelToolsAvailability","resolvedHeaders","activeHeader","activateMobileTool","entry","resolvePanelToolActivation","activateTool","closeDrawer","focusHeaderAction","action","el","shadowRoot","querySelector","CSS","escape","setFocus","renderForwardedSlots","flatMap","h","key","class","slot","name","renderDesktop","ref","element","onDsToolChange","onDsPresentationChange","renderMobileHeader","header","configuredTitle","title","trim","actions","inboxRoot","showBack","sections","variant","dot","heading","headingLevel","value","sectionsAriaLabel","sectionsPresentation","sectionsSize","onDsSectionChange","backAriaLabel","side","size","icon","backIcon","activeFill","hasBorder","onDsClick","dsHeaderBack","triggerId","undefined","haspopup","controls","expanded","pressed","renderMobile","inert","active","hidden","render","mobile","Host","role"],"sources":["src/wc/components/ShellTools/ShellTools.css?tag=ds-shell-tools&encapsulation=shadow","src/wc/components/ShellTools/ShellTools.tsx"],"sourcesContent":[":host {\n display: block;\n min-width: 0;\n min-height: 0;\n height: 100%;\n background: transparent;\n}\n\n:host([responsive-mode='mobile']) {\n width: 100%;\n background: var(--color-background-primary);\n}\n\n.shell-tools__desktop,\n.shell-tools__desktop ds-panel-tools,\n.shell-tools__mobile {\n display: block;\n min-width: 0;\n min-height: 0;\n height: 100%;\n}\n\n.shell-tools__slot-proxy {\n display: block;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n}\n\n.shell-tools__mobile {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n background: var(--color-background-primary);\n}\n\n.shell-tools__mobile-header {\n grid-row: 1;\n}\n\n.shell-tools__mobile-body,\n.shell-tools__view {\n min-width: 0;\n min-height: 0;\n height: 100%;\n}\n\n.shell-tools__mobile-body {\n grid-row: 2;\n overflow: hidden;\n}\n\n.shell-tools__view {\n overflow: auto;\n overscroll-behavior: contain;\n}\n\n.shell-tools__view[hidden] {\n display: none;\n}\n\n.shell-tools__view ::slotted(*) {\n min-height: 0;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport {\n PANEL_TOOLS_LABELS,\n type PanelToolsHeaderConfig,\n type PanelToolsHeaders,\n type PanelToolsItem,\n type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n orderPanelToolsItems,\n reconcilePanelToolsAvailability,\n resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n isShellInboxTool,\n resolveAvailableInboxTool,\n type ShellInboxToolId,\n type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n tag: 'ds-shell-tools',\n styleUrl: 'ShellTools.css',\n shadow: true,\n})\nexport class ShellTools {\n @Element() el!: HTMLElement;\n\n /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n @Prop({ attribute: 'responsive-mode', reflect: true })\n responsiveMode: ShellResponsiveMode = 'desktop';\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n activeTool: PanelToolsToolId | '' = '';\n @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n @Prop() items: PanelToolsItem[] = [];\n @Prop() headers: PanelToolsHeaders = {};\n @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n @Prop() toolsLabel: string = 'Tools';\n @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n @Prop() inboxLabel: string = 'Inbox';\n @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n @Watch('presentation')\n presentationChanged(next: 'drawer' | 'fullscreen', previous: 'drawer' | 'fullscreen') {\n if (next === previous) return;\n\n /*\n * Consumers update ShellTools and their slotted master/detail layout in the\n * same render. Forward the request immediately so PanelTools can conceal\n * its surface until its matching render class commits on the next frame.\n */\n if (this.panelToolsEl && this.panelToolsEl.getAttribute('presentation') !== next) {\n this.panelToolsEl.setAttribute('presentation', next);\n }\n }\n\n @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n id: PanelToolsToolId;\n selected: boolean;\n }>;\n @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n presentation: 'drawer' | 'fullscreen';\n }>;\n @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n tool: PanelToolsToolId;\n }>;\n @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n tool: PanelToolsToolId;\n id: string;\n }>;\n\n private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n private get resolvedItems(): PanelToolsItem[] {\n return this.items ?? [];\n }\n\n private get availableInboxTools(): ShellInboxToolId[] {\n return this.resolvedItems\n .filter(\n item =>\n !item.isInactive &&\n (item.mobileDestination === 'inbox' || isShellInboxTool(item.id))\n )\n .map(item => item.id as ShellInboxToolId);\n }\n\n private get mobileViewOrder(): PanelToolsToolId[] {\n return orderPanelToolsItems(this.resolvedItems).map(item => item.id);\n }\n\n private toolLabel(id: PanelToolsToolId): string {\n const item = this.resolvedItems.find(candidate => candidate.id === id);\n return (\n item?.label ??\n item?.ariaLabel ??\n PANEL_TOOLS_LABELS[id as keyof typeof PANEL_TOOLS_LABELS] ??\n id\n );\n }\n\n private get mobileActiveTool(): PanelToolsToolId | '' {\n const item = this.resolvedItems.find(candidate => candidate.id === this.activeTool);\n const inbox =\n item?.mobileDestination === 'inbox' || isShellInboxTool(this.activeTool);\n if (!inbox) return this.activeTool;\n return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n }\n\n componentWillLoad() {\n this.reconcileAvailability();\n }\n\n @Watch('items')\n handleItemsChange() {\n this.reconcileAvailability();\n }\n\n private reconcileAvailability() {\n const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n this.open = next.open;\n this.activeTool = next.activeTool;\n }\n\n private resolvedHeaders(): PanelToolsHeaders {\n return this.headers ?? {};\n }\n\n private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n return this.resolvedHeaders()[tool] ?? {};\n }\n\n private activateMobileTool(id: PanelToolsToolId) {\n const item = this.resolvedItems.find(entry => entry.id === id);\n if (!item || item.isInactive) return;\n const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n this.open = next.open;\n this.activeTool = next.activeTool;\n this.dsToolChange.emit({ id, selected: next.selected });\n }\n\n private selectInboxTool = (event: CustomEvent<string>) => {\n const id = event.detail;\n if (!this.availableInboxTools.includes(id) || id === this.mobileActiveTool) return;\n this.open = true;\n this.activeTool = id;\n this.dsToolChange.emit({ id, selected: true });\n };\n\n private handlePanelToolChange = (\n event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n ) => {\n this.activeTool = event.detail.id;\n this.open = event.detail.selected;\n };\n\n private handlePanelPresentationChange = (\n event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n ) => {\n this.presentation = event.detail.presentation;\n };\n\n private handleMobileHeaderAction = (\n tool: PanelToolsToolId,\n id: string,\n event: CustomEvent<MouseEvent>\n ) => {\n event.stopPropagation();\n this.dsHeaderAction.emit({ tool, id });\n };\n\n /** Match PanelTools' imperative activation contract in every responsive mode. */\n @Method()\n async activateTool(id: PanelToolsToolId) {\n if (this.responsiveMode !== 'mobile') {\n await this.panelToolsEl?.activateTool(id);\n return;\n }\n this.activateMobileTool(id);\n }\n\n /** Close the active global tool surface. */\n @Method()\n async closeDrawer() {\n if (this.responsiveMode !== 'mobile') {\n await this.panelToolsEl?.closeDrawer();\n return;\n }\n if (!this.open) return;\n const id = this.activeTool;\n this.open = false;\n if (id) this.dsToolChange.emit({ id, selected: false });\n }\n\n /** Focus an application-owned action in the visible shared tool header. */\n @Method()\n async focusHeaderAction(id: string) {\n if (this.responsiveMode !== 'mobile') {\n await this.panelToolsEl?.focusHeaderAction(id);\n return;\n }\n const action = (this.el.shadowRoot ?? this.el).querySelector(\n `[data-header-action-id=\"${CSS.escape(id)}\"]`\n ) as\n | (HTMLElement & { setFocus?: () => Promise<void> })\n | null;\n await action?.setFocus?.();\n }\n\n private renderForwardedSlots() {\n return this.mobileViewOrder.flatMap(id => [\n <div key={`tool:${id}`} class=\"shell-tools__slot-proxy\" slot={id}>\n <slot name={id} />\n </div>,\n <div\n key={`tool-view:${id}`}\n class=\"shell-tools__slot-proxy\"\n slot={`${id}-view`}\n >\n <slot name={`${id}-view`} />\n </div>,\n ]);\n }\n\n private renderDesktop() {\n return (\n <div class=\"shell-tools__desktop\">\n <ds-panel-tools\n open={this.open}\n activeTool={this.activeTool}\n presentation={this.presentation}\n fullscreenHeaderMode={this.fullscreenHeaderMode}\n items={this.resolvedItems}\n headers={this.resolvedHeaders()}\n storageKey={this.storageKey}\n toolsLabel={this.toolsLabel}\n toolShortcutsLabel={this.toolShortcutsLabel}\n ref={element => {\n this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n }}\n onDsToolChange={this.handlePanelToolChange}\n onDsPresentationChange={this.handlePanelPresentationChange}\n >\n {this.renderForwardedSlots()}\n </ds-panel-tools>\n </div>\n );\n }\n\n private renderMobileHeader(tool: PanelToolsToolId) {\n const header = this.activeHeader(tool);\n const configuredTitle = header.title?.trim();\n const title = configuredTitle || this.toolLabel(tool);\n const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n const inboxRoot = isShellInboxTool(tool) && !header.showBack;\n const sections =\n inboxRoot\n ? this.availableInboxTools.map(id => {\n const item = this.resolvedItems.find(candidate => candidate.id === id);\n return {\n id,\n label: this.toolLabel(id),\n variant: 'label' as const,\n dot: item?.dot,\n };\n })\n : [];\n\n return (\n <ds-mobile-header\n class=\"shell-tools__mobile-header\"\n heading={title}\n headingLevel=\"h2\"\n sections={sections}\n value={tool}\n sectionsAriaLabel={this.inboxNavigationLabel}\n sectionsPresentation={inboxRoot ? 'segmented' : 'switcher'}\n sectionsSize=\"lg\"\n onDsSectionChange={this.selectInboxTool}\n >\n {header.showBack ? (\n <ds-tooltip\n slot=\"leading\"\n label={header.backAriaLabel || 'Back'}\n side=\"bottom\"\n size=\"sm\"\n >\n <ds-button-unfilled\n variant=\"icon\"\n icon={header.backIcon || 'ChevronLeft'}\n size=\"md\"\n aria-label={header.backAriaLabel || 'Back'}\n activeFill={false}\n hasBorder={false}\n onDsClick={() => this.dsHeaderBack.emit({ tool })}\n />\n </ds-tooltip>\n ) : null}\n {actions.map(action => (\n <ds-tooltip\n slot=\"trailing\"\n key={action.id}\n label={action.ariaLabel}\n side=\"bottom\"\n size=\"sm\"\n >\n <ds-button-unfilled\n id={action.triggerId || undefined}\n data-header-action-id={action.id}\n variant=\"icon\"\n icon={action.icon}\n size=\"md\"\n aria-label={action.ariaLabel}\n haspopup={action.haspopup}\n controls={action.controls}\n expanded={action.expanded}\n pressed={action.pressed}\n isInactive={action.isInactive}\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.handleMobileHeaderAction(tool, action.id, event)}\n />\n </ds-tooltip>\n ))}\n </ds-mobile-header>\n );\n }\n\n private renderMobile() {\n const tool = this.mobileActiveTool;\n return (\n <div\n class=\"shell-tools__mobile\"\n aria-hidden={this.open && tool ? undefined : 'true'}\n inert={this.open && tool ? undefined : true}\n >\n {tool ? this.renderMobileHeader(tool) : null}\n <div class=\"shell-tools__mobile-body\">\n {this.mobileViewOrder.map(id => {\n const active = this.open && id === tool;\n return (\n <div\n key={`mobile-tool-view:${id}`}\n class={{\n 'shell-tools__view': true,\n 'shell-tools__view--active': active,\n }}\n hidden={!active}\n aria-hidden={active ? undefined : 'true'}\n inert={active ? undefined : true}\n >\n <slot name={`${id}-view`}>\n <slot name={id} />\n </slot>\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n\n render() {\n const mobile = this.responsiveMode === 'mobile';\n return (\n <Host\n role={\n mobile\n ? this.presentation === 'fullscreen'\n ? 'dialog'\n : 'complementary'\n : undefined\n }\n aria-modal={mobile && this.presentation === 'fullscreen' ? 'true' : undefined}\n aria-label={mobile ? this.toolsLabel : undefined}\n >\n {mobile ? this.renderMobile() : this.renderDesktop()}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as o,c as d,h as e,a,t as i}from"./index.js";import{d as t}from"./p-D8nnhQNJ.js";import{d as r}from"./p-c_5SXjwx.js";import{d as n}from"./p-BFfLvMZd.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as l}from"./p-DZFilC--.js";import{d as m}from"./p-BXPQmp7q.js";import{a as h,T as p}from"./p-NdahPypA.js";const f=()=>`.ds-control--lg.sc-ds-modal,.ds-control--lg.sc-ds-modal-h,.ds-control--md.sc-ds-modal-h,.ds-control--md.sc-ds-modal,.ds-control--sm.sc-ds-modal-h,.ds-control--sm.sc-ds-modal,.ds-control--xs.sc-ds-modal-h,.ds-control--xs.sc-ds-modal{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-modal-h,.ds-control--lg.sc-ds-modal{--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-modal-h,.ds-control--md.sc-ds-modal{--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-modal-h,.ds-control--sm.sc-ds-modal{--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-modal-h,.ds-control--xs.sc-ds-modal{--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}.ds-chrome-header.sc-ds-modal{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-modal{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-modal{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-modal,.ds-chrome-header__trailing.sc-ds-modal{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-modal{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-modal{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-modal{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-modal{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-modal,.ds-chrome-header__description.sc-ds-modal{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-modal{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-modal .ds-chrome-header__description.sc-ds-modal{flex:1 1 var(--dimension-card-width-xs)}.ds-chrome-space--sm.sc-ds-modal-h,.ds-chrome-space--sm.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-modal-h,.ds-chrome-space--md.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-modal-h,.ds-chrome-space--lg.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-modal-h,.ds-chrome-row.sc-ds-modal,.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal,.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{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-modal-h,.ds-chrome-row.sc-ds-modal{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal{flex-direction:column}.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-modal:root,.sc-ds-modal-h,.ds-forced-colors-scope.sc-ds-modal{--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-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog[open].sc-ds-modal{display:flex}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-2) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{align-items:flex-start;flex:0 0 auto;color:var(--color-foreground-primary)}.modal-copy.sc-ds-modal,ds-text.modal-heading.sc-ds-modal,ds-text.modal-description.sc-ds-modal{width:auto;text-align:left}ds-text.modal-heading.sc-ds-modal{-webkit-user-select:none;user-select:none}.modal-close-tooltip.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{justify-content:flex-start;height:var(--dimension-size-800);flex:0 0 auto;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer__actions.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer__actions.sc-ds-modal slot.sc-ds-modal{display:contents}@media (forced-colors: active){.modal-dialog.sc-ds-modal{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const g={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const u=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let b=0;const v=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsClose=d(this,"dsClose");this.dsAfterClose=d(this,"dsAfterClose");this.open=false;this.description="";this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++b}`;this.descriptionId=`${this.titleId}-description`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}componentDidRender(){if(!this.closing||!this.dialogEl?.open||this.closeTimer)return;const s=this.closeAnimationMs;if(s<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),s)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(s){if(s){this.clearCloseTimer();const s=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||s)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true}}focusClose(){const s=this.el.querySelector("ds-button-unfilled.modal-close");void s?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(s,o){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:s,originalEvent:o});this.open=false}updateFooterPresence(s){const o=s?.assignedNodes()??[];this.hasFooter=o.some((s=>s.nodeType!==Node.TEXT_NODE||!!s.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(s){s.preventDefault();this.requestClose("escape",s)}handleBackdropPointerDown(s){if(s.target===this.dialogEl)this.requestClose("backdrop",s)}handleKeyDown(s){if(s.key!=="Tab"||!this.dialogEl)return;const o=Array.from(this.dialogEl.querySelectorAll(u)).filter((s=>!s.hasAttribute("disabled")&&s.getAttribute("aria-hidden")!=="true"));if(!o.length){s.preventDefault();this.dialogEl.focus();return}const d=o[0];const e=o[o.length-1];const a=document.activeElement;if(s.shiftKey&&(a===d||a===this.dialogEl)){s.preventDefault();e.focus()}else if(!s.shiftKey&&a===e){s.preventDefault();d.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return g[this.modalWidth]}return this.modalWidth}get describedBy(){const s=[this.description?this.descriptionId:"",this.ariaDescribedby??""].filter(Boolean);return s.length>0?s.join(" "):undefined}get closeAnimationMs(){return h(p.motionShort2,p.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return e(a,{key:"29b6d21707e8522410e5a320cf80d20bd6628ab9"},e("dialog",{key:"3ddc94b96a01974b8ea7a810f54115d4d7b7497b",ref:s=>{this.dialogEl=s??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.describedBy,onCancel:s=>this.handleCancel(s),onPointerDown:s=>this.handleBackdropPointerDown(s),onKeyDown:s=>this.handleKeyDown(s),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},e("div",{key:"2ac8058d1f9510c1a1061d536f922fe3d9a496c7",class:"modal-header ds-chrome-header ds-chrome-header--bounded"},e("div",{key:"8cca893bb430b38793cf55a0c41c78375a64821d",class:"modal-copy ds-chrome-header__copy ds-chrome-header__copy--stacked ds-control--md"},e("ds-text",{key:"2479c2368fd5387b4fd6299089ce977375ce8c03",class:"modal-heading ds-chrome-header__heading",as:"h2",variant:"text-title-small",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),this.description?e("ds-text",{class:"modal-description ds-chrome-header__description",as:"p",variant:"text-body-medium",color:"secondary",wrap:"wrap",textId:this.descriptionId},this.description):null),e("ds-tooltip",{key:"88f22d81ad9b4748b9fc2672fcd47484e61c412d",class:"modal-close-tooltip ds-chrome-header__trailing",label:this.closeAriaLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{key:"7d6319d337fcbd9566a1695b93902464f872ac2c",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:s=>this.requestClose("close-button",s.detail)}))),e("div",{key:"e11c05f6d870f007b5959464adceb1c713ae4b8c",class:"modal-content"},e("slot",{key:"8880493b997194793d00783fbfa297b29ed597e4"})),e("div",{key:"723d0515ecb21efca1d2f6e93e2677de1e0c6fa6",class:{"modal-footer":true,"ds-chrome-row":true,"ds-chrome-space--lg":true,"modal-footer--empty":!this.hasFooter}},e("div",{key:"cfd8ee140ac00a64be3534c5943c9f98c7f3259e",class:"modal-footer__actions"},e("slot",{key:"293e49da5b7b1edc505da7635588f6aeac4a7555",name:"footer",onSlotchange:s=>this.updateFooterPresence(s.currentTarget)})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return f()}},[262,"ds-modal",{open:[1028],heading:[1],description:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const s=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-modal":if(!customElements.get(i(s))){customElements.define(i(s),v)}break;case"ds-badge":if(!customElements.get(i(s))){t()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){r()}break;case"ds-icon":if(!customElements.get(i(s))){n()}break;case"ds-loader":if(!customElements.get(i(s))){c()}break;case"ds-text":if(!customElements.get(i(s))){l()}break;case"ds-tooltip":if(!customElements.get(i(s))){m()}break}}))}y();export{v as M,y as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as s,H as o,c as d,h as e,a,t as i}from"./index.js";import{d as t}from"./p-vWK5faWZ.js";import{d as r}from"./p-C7rzVotG.js";import{d as n}from"./p-BFfLvMZd.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as l}from"./p-DZFilC--.js";import{d as m}from"./p-BXPQmp7q.js";import{a as h,T as p}from"./p-NdahPypA.js";const f=()=>`.ds-control--lg.sc-ds-modal,.ds-control--lg.sc-ds-modal-h,.ds-control--md.sc-ds-modal-h,.ds-control--md.sc-ds-modal,.ds-control--sm.sc-ds-modal-h,.ds-control--sm.sc-ds-modal,.ds-control--xs.sc-ds-modal-h,.ds-control--xs.sc-ds-modal{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-modal-h,.ds-control--lg.sc-ds-modal{--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-modal-h,.ds-control--md.sc-ds-modal{--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-modal-h,.ds-control--sm.sc-ds-modal{--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-modal-h,.ds-control--xs.sc-ds-modal{--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}.ds-chrome-header.sc-ds-modal{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-modal{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-modal{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-modal,.ds-chrome-header__trailing.sc-ds-modal{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-modal{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-modal{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-modal{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-modal{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-modal,.ds-chrome-header__description.sc-ds-modal{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-modal{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-modal .ds-chrome-header__description.sc-ds-modal{flex:1 1 var(--dimension-card-width-xs)}.ds-chrome-space--sm.sc-ds-modal-h,.ds-chrome-space--sm.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-modal-h,.ds-chrome-space--md.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-modal-h,.ds-chrome-space--lg.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-modal-h,.ds-chrome-row.sc-ds-modal,.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal,.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{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-modal-h,.ds-chrome-row.sc-ds-modal{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal{flex-direction:column}.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-modal:root,.sc-ds-modal-h,.ds-forced-colors-scope.sc-ds-modal{--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-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog[open].sc-ds-modal{display:flex}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-2) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{align-items:flex-start;flex:0 0 auto;color:var(--color-foreground-primary)}.modal-copy.sc-ds-modal,ds-text.modal-heading.sc-ds-modal,ds-text.modal-description.sc-ds-modal{width:auto;text-align:left}ds-text.modal-heading.sc-ds-modal{-webkit-user-select:none;user-select:none}.modal-close-tooltip.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{justify-content:flex-start;height:var(--dimension-size-800);flex:0 0 auto;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer__actions.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer__actions.sc-ds-modal slot.sc-ds-modal{display:contents}@media (forced-colors: active){.modal-dialog.sc-ds-modal{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const g={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const u=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let b=0;const v=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsClose=d(this,"dsClose");this.dsAfterClose=d(this,"dsAfterClose");this.open=false;this.description="";this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++b}`;this.descriptionId=`${this.titleId}-description`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}componentDidRender(){if(!this.closing||!this.dialogEl?.open||this.closeTimer)return;const s=this.closeAnimationMs;if(s<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),s)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(s){if(s){this.clearCloseTimer();const s=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||s)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true}}focusClose(){const s=this.el.querySelector("ds-button-unfilled.modal-close");void s?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(s,o){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:s,originalEvent:o});this.open=false}updateFooterPresence(s){const o=s?.assignedNodes()??[];this.hasFooter=o.some((s=>s.nodeType!==Node.TEXT_NODE||!!s.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(s){s.preventDefault();this.requestClose("escape",s)}handleBackdropPointerDown(s){if(s.target===this.dialogEl)this.requestClose("backdrop",s)}handleKeyDown(s){if(s.key!=="Tab"||!this.dialogEl)return;const o=Array.from(this.dialogEl.querySelectorAll(u)).filter((s=>!s.hasAttribute("disabled")&&s.getAttribute("aria-hidden")!=="true"));if(!o.length){s.preventDefault();this.dialogEl.focus();return}const d=o[0];const e=o[o.length-1];const a=document.activeElement;if(s.shiftKey&&(a===d||a===this.dialogEl)){s.preventDefault();e.focus()}else if(!s.shiftKey&&a===e){s.preventDefault();d.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return g[this.modalWidth]}return this.modalWidth}get describedBy(){const s=[this.description?this.descriptionId:"",this.ariaDescribedby??""].filter(Boolean);return s.length>0?s.join(" "):undefined}get closeAnimationMs(){return h(p.motionShort2,p.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return e(a,{key:"29b6d21707e8522410e5a320cf80d20bd6628ab9"},e("dialog",{key:"3ddc94b96a01974b8ea7a810f54115d4d7b7497b",ref:s=>{this.dialogEl=s??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.describedBy,onCancel:s=>this.handleCancel(s),onPointerDown:s=>this.handleBackdropPointerDown(s),onKeyDown:s=>this.handleKeyDown(s),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},e("div",{key:"2ac8058d1f9510c1a1061d536f922fe3d9a496c7",class:"modal-header ds-chrome-header ds-chrome-header--bounded"},e("div",{key:"8cca893bb430b38793cf55a0c41c78375a64821d",class:"modal-copy ds-chrome-header__copy ds-chrome-header__copy--stacked ds-control--md"},e("ds-text",{key:"2479c2368fd5387b4fd6299089ce977375ce8c03",class:"modal-heading ds-chrome-header__heading",as:"h2",variant:"text-title-small",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),this.description?e("ds-text",{class:"modal-description ds-chrome-header__description",as:"p",variant:"text-body-medium",color:"secondary",wrap:"wrap",textId:this.descriptionId},this.description):null),e("ds-tooltip",{key:"88f22d81ad9b4748b9fc2672fcd47484e61c412d",class:"modal-close-tooltip ds-chrome-header__trailing",label:this.closeAriaLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{key:"7d6319d337fcbd9566a1695b93902464f872ac2c",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:s=>this.requestClose("close-button",s.detail)}))),e("div",{key:"e11c05f6d870f007b5959464adceb1c713ae4b8c",class:"modal-content"},e("slot",{key:"8880493b997194793d00783fbfa297b29ed597e4"})),e("div",{key:"723d0515ecb21efca1d2f6e93e2677de1e0c6fa6",class:{"modal-footer":true,"ds-chrome-row":true,"ds-chrome-space--lg":true,"modal-footer--empty":!this.hasFooter}},e("div",{key:"cfd8ee140ac00a64be3534c5943c9f98c7f3259e",class:"modal-footer__actions"},e("slot",{key:"293e49da5b7b1edc505da7635588f6aeac4a7555",name:"footer",onSlotchange:s=>this.updateFooterPresence(s.currentTarget)})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return f()}},[262,"ds-modal",{open:[1028],heading:[1],description:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const s=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-modal":if(!customElements.get(i(s))){customElements.define(i(s),v)}break;case"ds-badge":if(!customElements.get(i(s))){t()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){r()}break;case"ds-icon":if(!customElements.get(i(s))){n()}break;case"ds-loader":if(!customElements.get(i(s))){c()}break;case"ds-text":if(!customElements.get(i(s))){l()}break;case"ds-tooltip":if(!customElements.get(i(s))){m()}break}}))}y();export{v as M,y as d};
|
|
2
|
+
//# sourceMappingURL=p-CjgnFGd6.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as t,c as e,h as s,a as r,t as n}from"./index.js";import{d as o}from"./p-D8nnhQNJ.js";import{d as a}from"./p-PzI11fs8.js";import{d}from"./p-DvJkkdIO.js";import{d as c}from"./p-c_5SXjwx.js";import{d as l}from"./p-BFfLvMZd.js";import{d as h}from"./p-Ca-I2UnB.js";import{d as b}from"./p-BiTwXttN.js";import{d as u}from"./p-DgWGfscR.js";import{d as v}from"./p-Btxwp4lJ.js";import{d as f}from"./p-jMCRaxQW.js";import{d as m}from"./p-DZFilC--.js";import{d as p}from"./p-BXPQmp7q.js";function g(i){return"type"in i&&i.type==="divider"}const _=()=>`.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--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-bar-title-h,.ds-control--md.sc-ds-bar-title{--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-bar-title-h,.ds-control--sm.sc-ds-bar-title{--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-bar-title-h,.ds-control--xs.sc-ds-bar-title{--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}.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--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-bar-title-h,.ds-control--md.sc-ds-bar-title{--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-bar-title-h,.ds-control--sm.sc-ds-bar-title{--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-bar-title-h,.ds-control--xs.sc-ds-bar-title{--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}.ds-chrome-header.sc-ds-bar-title{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-bar-title{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-bar-title{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-bar-title,.ds-chrome-header__trailing.sc-ds-bar-title{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-bar-title{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-bar-title{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-bar-title{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-bar-title{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-bar-title,.ds-chrome-header__description.sc-ds-bar-title{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-bar-title{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-bar-title .ds-chrome-header__description.sc-ds-bar-title{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--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-bar-title-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-bar-title-h,.ds-focus-ring.sc-ds-bar-title,.ds-focus-ring-inset.sc-ds-bar-title-h,.ds-focus-ring-inset.sc-ds-bar-title{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-title-h:focus-visible,.ds-focus-ring.sc-ds-bar-title: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-bar-title-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title{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-bar-title-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-title: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-bar-title-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title::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-bar-title-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill.sc-ds-bar-title{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-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before,.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before{z-index:1}.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::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-bar-title-h,.ds-interaction-fill--bordered.sc-ds-bar-title{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-bar-title-h,.ds-interaction-fill--selected.sc-ds-bar-title{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-bar-title-h::after,.ds-interaction-fill--grouped.sc-ds-bar-title::after,.ds-interaction-fill--grouped.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-bar-title-h,.ds-interaction-fill--grouped.sc-ds-bar-title{--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-bar-title-h>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill.sc-ds-bar-title>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill__content.sc-ds-bar-title{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-bar-title-h,.ds-interaction-fill--on-faint.sc-ds-bar-title{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-bar-title-h,.ds-interaction-fill--on-medium.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-bold.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-strong.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-translucent.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-inverted.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-media.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-always-dark.sc-ds-bar-title{--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-navigation.sc-ds-bar-title-h,.ds-interaction-fill--on-navigation.sc-ds-bar-title{--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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::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--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::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-bar-title-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-bar-title: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-bar-title-h{display:block;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}[data-shell-page-syncing].sc-ds-bar-title-h{visibility:hidden}.bar-title.sc-ds-bar-title{position:relative;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}.bar-title.sc-ds-bar-title::after{content:'';position:absolute;inset:auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.bar-title--divider-hidden.sc-ds-bar-title::after{display:none}.bar-title__inner.sc-ds-bar-title{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--dimension-space-100);padding:var(--dimension-space-400);box-sizing:border-box}.bar-title__row.sc-ds-bar-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);min-width:0}.bar-title-host--expanded.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{gap:var(--dimension-space-400)}.bar-title__leading.sc-ds-bar-title{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--dimension-space-100);min-width:0}.bar-title__title-row.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0;min-height:var(--dimension-size-400)}.bar-title__identity.sc-ds-bar-title{display:flex;flex:0 1 auto;align-items:center;gap:var(--dimension-space-050);min-width:0}.bar-title__back.sc-ds-bar-title,.bar-title__section-chevron.sc-ds-bar-title{flex:0 0 auto}.bar-title__breadcrumb.sc-ds-bar-title{display:block;width:100%;min-width:0}.bar-title__heading.sc-ds-bar-title{display:block;width:auto;min-width:0;user-select:none}.bar-title__divider.sc-ds-bar-title{width:var(--dimension-stroke-width-012);height:var(--dimension-size-250);margin-inline-start:var(--dimension-space-100);flex:0 0 var(--dimension-stroke-width-012);background:var(--color-border-tertiary)}.bar-title__section-selector.sc-ds-bar-title{display:flex;flex:0 1 auto;min-width:0;max-width:var(--dimension-panel-width-sm)}.bar-title__section-trigger.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-half);display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:0;max-width:100%;padding-inline:var(--ds-control-padding-inline);border:none;border-radius:var(--ds-control-radius);box-sizing:border-box;background:transparent;color:var(--color-foreground-secondary);cursor:default;font-family:inherit;user-select:none}.bar-title__section-trigger--expanded.sc-ds-bar-title{color:var(--color-foreground-primary);--ds-interaction-hover:var(--ds-interaction-pressed)}.bar-title__section-trigger--expanded.sc-ds-bar-title::after{background:var(--ds-interaction-pressed)}.bar-title__section-label.sc-ds-bar-title{min-width:0;padding-inline:var(--ds-control-label-inset)}.bar-title__actions.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto}.bar-title__description.sc-ds-bar-title{display:block;min-width:0;max-width:100%}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title{height:var(--dimension-size-600)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title::after{inset-inline:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__inner.sc-ds-bar-title{flex:1 1 auto;height:100%;min-width:0;padding:0;gap:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{height:100%;align-items:center}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__identity.sc-ds-bar-title{height:var(--dimension-size-400)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__divider.sc-ds-bar-title{margin-inline-start:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__heading.sc-ds-bar-title{display:inline-flex;flex:1 1 auto;align-items:center;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box}`;let x=0;const w=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.dsBack=e(this,"dsBack");this.dsBreadcrumbSelect=e(this,"dsBreadcrumbSelect");this.dsSectionChange=e(this,"dsSectionChange");this.dsAction=e(this,"dsAction");this.description="";this.showBack=false;this.backAriaLabel="Back";this.backLabel="Back";this.breadcrumbs=[];this.breadcrumbAriaLabel="Breadcrumb";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.primaryAction=null;this.actions=[];this.actionsAriaLabel="More page actions";this.variant="expanded";this.showDivider=true;this.sectionMenuOpen=false;this.actionMenuOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=x++;this.sectionMenuTriggerId=`bar-title-section-trigger-${this.instanceId}`;this.sectionMenuId=`bar-title-section-menu-${this.instanceId}`;this.actionMenuTriggerId=`bar-title-action-trigger-${this.instanceId}`;this.actionMenuId=`bar-title-action-menu-${this.instanceId}`;this.sectionTriggerEl=null;this.actionTriggerEl=null;this.toggleSectionMenu=i=>{this.sectionMenuInitialFocusVisible=i.detail===0;this.actionMenuOpen=false;this.sectionMenuOpen=!this.sectionMenuOpen};this.closeSectionMenu=()=>{this.sectionMenuOpen=false};this.handleSectionSelect=i=>{const t=String(i.detail?.value??"");const e=this.selectableSections.find((i=>i.id===t));if(!e||e.isInactive)return;this.closeSectionMenu();this.dsSectionChange.emit(t);requestAnimationFrame((()=>this.sectionTriggerEl?.focus()))};this.toggleActionMenu=i=>{this.actionMenuInitialFocusVisible=i.detail===0;this.sectionMenuOpen=false;this.actionMenuOpen=!this.actionMenuOpen};this.closeActionMenu=()=>{this.actionMenuOpen=false};this.handleActionSelect=i=>{const t=String(i.detail?.value??"");const e=this.primaryCollapsed&&this.primaryAction?.id===t;const s=this.selectableActions.find((i=>i.id===t));if(!e&&!s)return;if(e&&(this.primaryAction?.isInactive||this.primaryAction?.isLoading)||s?.isInactive){return}this.closeActionMenu();this.dsAction.emit(t);requestAnimationFrame((()=>void this.actionTriggerEl?.setFocus?.()))};this.handleBreadcrumbSelect=i=>{if(this.breadcrumbs.length===0){this.dsBack.emit(i.detail.originalEvent);return}const t=this.dsBreadcrumbSelect.emit(i.detail);if(t.defaultPrevented)i.preventDefault()}}componentWillLoad(){if(this.el.closest("ds-shell-page")){this.el.setAttribute("data-shell-page-syncing","")}}handleSectionsChange(){if(!this.hasSectionSelector)this.closeSectionMenu()}handleActionsChange(){if(!this.showActionMenuTrigger)this.closeActionMenu()}get compact(){return this.variant!=="expanded"}get dividerVisible(){return this.compact?this.showCompactDivider??this.showDivider:this.showDivider}get expandedBreadcrumbItems(){if(this.breadcrumbs.length>0)return this.breadcrumbs;if(!this.showBack)return[];return[{id:"back",label:this.backLabel,ariaLabel:this.backAriaLabel}]}get backTooltipLabel(){return"Go back"}get primaryCollapsed(){return this.variant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return this.sections.filter((i=>!g(i)))}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return this.selectableSections.some((i=>i.id===this.value))?this.value:this.selectableSections[0]?.id??""}get selectedSectionLabel(){return this.selectableSections.find((i=>i.id===this.effectiveValue))?.label??""}get sectionTriggerAriaLabel(){return`${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`}groupsFromItems(i,t){const e=[];let s=[];const r=()=>{if(s.length>0)e.push({items:s});s=[]};for(const e of i){if(g(e)){r()}else{s.push(t(e))}}r();return e}get sectionMenuSections(){return this.groupsFromItems(this.sections,(i=>({label:i.label,value:i.id,isSelected:i.id===this.effectiveValue,isInactive:i.isInactive})))}get selectableActions(){return this.actions.filter((i=>!g(i)))}get showActionMenuTrigger(){return this.selectableActions.length>0||this.primaryCollapsed&&this.primaryAction!==null}actionMenuItem(i){const t=i;return{label:i.label,value:i.id,isInactive:i.isInactive||t.isLoading,isDestructive:i.isDestructive||t.intent==="negative"}}get actionMenuSections(){const i=this.groupsFromItems(this.actions,(i=>this.actionMenuItem(i)));if(!this.primaryCollapsed||!this.primaryAction)return i;return[{items:[this.actionMenuItem(this.primaryAction)]},...i]}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[s("div",{class:"bar-title__divider","aria-hidden":"true"}),s("div",{class:"bar-title__section-selector"},s("button",{ref:i=>{this.sectionTriggerEl=i??null},id:this.sectionMenuTriggerId,class:{"bar-title__section-trigger":true,"bar-title__section-trigger--expanded":this.sectionMenuOpen,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.sectionMenuId,"aria-expanded":String(this.sectionMenuOpen),"aria-label":this.sectionTriggerAriaLabel,onClick:this.toggleSectionMenu},s("ds-text",{class:"bar-title__section-label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.selectedSectionLabel),s("ds-icon",{class:"bar-title__section-chevron ds-interaction-fill__content",name:"ChevronUpDown",size:"md",color:"inherit","aria-hidden":"true"})))]}renderActions(){const i=this.primaryAction;if(!i&&!this.showActionMenuTrigger)return null;return s("div",{class:"bar-title__actions"},i&&!this.primaryCollapsed?s("ds-button-filled",{class:"bar-title__primary-action",variant:i.icon?"icon-label":"label",icon:i.icon??"",label:i.label,intent:i.intent??"brand",contrast:i.contrast??"bold",size:"md",type:i.type??"button",isInactive:i.isInactive,isLoading:i.isLoading,onDsClick:()=>this.dsAction.emit(i.id)}):null,this.showActionMenuTrigger?s("ds-tooltip",{label:"Page options",side:"bottom",size:"sm"},s("ds-button-unfilled",{ref:i=>{this.actionTriggerEl=i??null},id:this.actionMenuTriggerId,class:"bar-title__more-actions",variant:"icon",icon:"Ellipses","aria-label":this.actionsAriaLabel,size:"md",activeFill:!this.compact,hasBorder:i!==null&&!this.primaryCollapsed,haspopup:"menu",controls:this.actionMenuId,expanded:this.actionMenuOpen,onDsClick:i=>this.toggleActionMenu(i.detail)})):null)}renderBreadcrumb(){const i=this.expandedBreadcrumbItems;if(i.length===0)return null;return s("ds-breadcrumb",{class:"bar-title__breadcrumb",items:i,ariaLabel:this.breadcrumbAriaLabel,onDsSelect:this.handleBreadcrumbSelect})}renderBack(){if(!this.showBack)return null;return s("ds-tooltip",{label:this.backTooltipLabel,side:"bottom",size:"sm"},s("ds-button-unfilled",{class:"bar-title__back",variant:"icon",icon:"ChevronLeft","aria-label":this.backAriaLabel,size:"md",activeFill:false,hasBorder:false,onDsClick:i=>this.dsBack.emit(i.detail)}))}render(){const i=this.compact;return s(r,{key:"5d28cbbcdc035781a166dddb00035d87e3aabcd9",class:{"bar-title-host--compact":i,"bar-title-host--expanded":this.variant==="expanded","bar-title-host--constrained":this.variant==="constrained","bar-title-host--has-description":!!this.description,"bar-title-host--has-back":this.showBack,"bar-title-host--has-breadcrumb":!i&&this.expandedBreadcrumbItems.length>0}},s("div",{key:"b2336ad4bfdaec80002a9ff6945c45227f211b5e",class:{"bar-title":true,"bar-title--divider-hidden":!this.dividerVisible,"ds-chrome-header":i}},s("div",{key:"95e8106aa5ee41153372776595e7009f917e5e54",class:"bar-title__inner"},!i?this.renderBreadcrumb():null,s("div",{key:"59246271233e0c88f7c9ae4e5625f80011d1065f",class:"bar-title__row"},s("div",{key:"737a3ec6438cb1d6de5a37ae5b9eb77dcbd56f1a",class:"bar-title__leading"},s("div",{key:"bea152fb099212101c3e902b478f09c4952b392a",class:"bar-title__title-row","data-shell-page-header-anchor":true},s("div",{key:"10dc89189eacd1b5734a5765ab1166c28a89596e",class:"bar-title__identity"},i?this.renderBack():null,s("ds-text",{key:"7291b316bd6df4a2c60f14af2b89ecc02264573b",class:"bar-title__heading ds-control--md",variant:i?"text-title-small":"text-title-medium",emphasis:true,color:"primary",as:"h1",lineTruncation:1},this.heading)),this.renderSectionSelector()),this.description&&!i?s("ds-text",{class:"bar-title__description",variant:"text-body-small",color:"secondary",lineTruncation:2,wrap:"wrap",as:"p"},this.description):null),this.renderActions()))),this.hasSectionSelector?s("ds-menu",{id:this.sectionMenuId,class:"bar-title__section-menu",anchorId:this.sectionMenuTriggerId,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsSelect:this.handleSectionSelect}):null,this.showActionMenuTrigger?s("ds-menu",{id:this.actionMenuId,class:"bar-title__action-menu",anchorId:this.actionMenuTriggerId,align:"end",menuLabel:this.actionsAriaLabel,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,sections:this.actionMenuSections,onDsClose:this.closeActionMenu,onDsSelect:this.handleActionSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}}static get style(){return _()}},[2,"ds-bar-title",{heading:[1],description:[1],showBack:[4,"show-back"],backAriaLabel:[1,"back-aria-label"],backLabel:[1,"back-label"],breadcrumbs:[16],breadcrumbAriaLabel:[1,"breadcrumb-aria-label"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],primaryAction:[16],actions:[16],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],showDivider:[4,"show-divider"],showCompactDivider:[4,"show-compact-divider"],sectionMenuOpen:[32],actionMenuOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const i=["ds-bar-title","ds-badge","ds-breadcrumb","ds-button-filled","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-bar-title":if(!customElements.get(n(i))){customElements.define(n(i),w)}break;case"ds-badge":if(!customElements.get(n(i))){o()}break;case"ds-breadcrumb":if(!customElements.get(n(i))){a()}break;case"ds-button-filled":if(!customElements.get(n(i))){d()}break;case"ds-button-unfilled":if(!customElements.get(n(i))){c()}break;case"ds-icon":if(!customElements.get(n(i))){l()}break;case"ds-loader":if(!customElements.get(n(i))){h()}break;case"ds-menu":if(!customElements.get(n(i))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){u()}break;case"ds-switch":if(!customElements.get(n(i))){v()}break;case"ds-tag":if(!customElements.get(n(i))){f()}break;case"ds-text":if(!customElements.get(n(i))){m()}break;case"ds-tooltip":if(!customElements.get(n(i))){p()}break}}))}k();export{w as B,k as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as i,H as t,c as e,h as s,a as r,t as n}from"./index.js";import{d as o}from"./p-vWK5faWZ.js";import{d as a}from"./p-PzI11fs8.js";import{d}from"./p-BxqBiVbH.js";import{d as c}from"./p-C7rzVotG.js";import{d as l}from"./p-BFfLvMZd.js";import{d as h}from"./p-Ca-I2UnB.js";import{d as b}from"./p-DfyfrfHL.js";import{d as u}from"./p-Rfpd5mWO.js";import{d as v}from"./p-Btxwp4lJ.js";import{d as f}from"./p-jMCRaxQW.js";import{d as m}from"./p-DZFilC--.js";import{d as p}from"./p-BXPQmp7q.js";function g(i){return"type"in i&&i.type==="divider"}const _=()=>`.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--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-bar-title-h,.ds-control--md.sc-ds-bar-title{--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-bar-title-h,.ds-control--sm.sc-ds-bar-title{--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-bar-title-h,.ds-control--xs.sc-ds-bar-title{--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}.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--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-bar-title-h,.ds-control--md.sc-ds-bar-title{--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-bar-title-h,.ds-control--sm.sc-ds-bar-title{--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-bar-title-h,.ds-control--xs.sc-ds-bar-title{--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}.ds-chrome-header.sc-ds-bar-title{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-bar-title{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-bar-title{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-bar-title,.ds-chrome-header__trailing.sc-ds-bar-title{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-bar-title{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-bar-title{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-bar-title{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-bar-title{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-bar-title,.ds-chrome-header__description.sc-ds-bar-title{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-bar-title{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-bar-title .ds-chrome-header__description.sc-ds-bar-title{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--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-bar-title-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-bar-title-h,.ds-focus-ring.sc-ds-bar-title,.ds-focus-ring-inset.sc-ds-bar-title-h,.ds-focus-ring-inset.sc-ds-bar-title{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-title-h:focus-visible,.ds-focus-ring.sc-ds-bar-title: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-bar-title-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title{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-bar-title-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-title: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-bar-title-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title::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-bar-title-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill.sc-ds-bar-title{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-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before,.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before{z-index:1}.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::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-bar-title-h,.ds-interaction-fill--bordered.sc-ds-bar-title{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-bar-title-h,.ds-interaction-fill--selected.sc-ds-bar-title{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-bar-title-h::after,.ds-interaction-fill--grouped.sc-ds-bar-title::after,.ds-interaction-fill--grouped.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-bar-title-h,.ds-interaction-fill--grouped.sc-ds-bar-title{--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-bar-title-h>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill.sc-ds-bar-title>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill__content.sc-ds-bar-title{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-bar-title-h,.ds-interaction-fill--on-faint.sc-ds-bar-title{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-bar-title-h,.ds-interaction-fill--on-medium.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-bold.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-strong.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-translucent.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-inverted.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-media.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-always-dark.sc-ds-bar-title{--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-navigation.sc-ds-bar-title-h,.ds-interaction-fill--on-navigation.sc-ds-bar-title{--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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::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--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::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-bar-title-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-bar-title: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-bar-title-h{display:block;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}[data-shell-page-syncing].sc-ds-bar-title-h{visibility:hidden}.bar-title.sc-ds-bar-title{position:relative;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}.bar-title.sc-ds-bar-title::after{content:'';position:absolute;inset:auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.bar-title--divider-hidden.sc-ds-bar-title::after{display:none}.bar-title__inner.sc-ds-bar-title{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--dimension-space-100);padding:var(--dimension-space-400);box-sizing:border-box}.bar-title__row.sc-ds-bar-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);min-width:0}.bar-title-host--expanded.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{gap:var(--dimension-space-400)}.bar-title__leading.sc-ds-bar-title{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--dimension-space-100);min-width:0}.bar-title__title-row.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0;min-height:var(--dimension-size-400)}.bar-title__identity.sc-ds-bar-title{display:flex;flex:0 1 auto;align-items:center;gap:var(--dimension-space-050);min-width:0}.bar-title__back.sc-ds-bar-title,.bar-title__section-chevron.sc-ds-bar-title{flex:0 0 auto}.bar-title__breadcrumb.sc-ds-bar-title{display:block;width:100%;min-width:0}.bar-title__heading.sc-ds-bar-title{display:block;width:auto;min-width:0;user-select:none}.bar-title__divider.sc-ds-bar-title{width:var(--dimension-stroke-width-012);height:var(--dimension-size-250);margin-inline-start:var(--dimension-space-100);flex:0 0 var(--dimension-stroke-width-012);background:var(--color-border-tertiary)}.bar-title__section-selector.sc-ds-bar-title{display:flex;flex:0 1 auto;min-width:0;max-width:var(--dimension-panel-width-sm)}.bar-title__section-trigger.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-half);display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:0;max-width:100%;padding-inline:var(--ds-control-padding-inline);border:none;border-radius:var(--ds-control-radius);box-sizing:border-box;background:transparent;color:var(--color-foreground-secondary);cursor:default;font-family:inherit;user-select:none}.bar-title__section-trigger--expanded.sc-ds-bar-title{color:var(--color-foreground-primary);--ds-interaction-hover:var(--ds-interaction-pressed)}.bar-title__section-trigger--expanded.sc-ds-bar-title::after{background:var(--ds-interaction-pressed)}.bar-title__section-label.sc-ds-bar-title{min-width:0;padding-inline:var(--ds-control-label-inset)}.bar-title__actions.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto}.bar-title__description.sc-ds-bar-title{display:block;min-width:0;max-width:100%}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title{height:var(--dimension-size-600)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title::after{inset-inline:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__inner.sc-ds-bar-title{flex:1 1 auto;height:100%;min-width:0;padding:0;gap:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{height:100%;align-items:center}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__identity.sc-ds-bar-title{height:var(--dimension-size-400)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__divider.sc-ds-bar-title{margin-inline-start:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__heading.sc-ds-bar-title{display:inline-flex;flex:1 1 auto;align-items:center;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box}`;let x=0;const w=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.dsBack=e(this,"dsBack");this.dsBreadcrumbSelect=e(this,"dsBreadcrumbSelect");this.dsSectionChange=e(this,"dsSectionChange");this.dsAction=e(this,"dsAction");this.description="";this.showBack=false;this.backAriaLabel="Back";this.backLabel="Back";this.breadcrumbs=[];this.breadcrumbAriaLabel="Breadcrumb";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.primaryAction=null;this.actions=[];this.actionsAriaLabel="More page actions";this.variant="expanded";this.showDivider=true;this.sectionMenuOpen=false;this.actionMenuOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=x++;this.sectionMenuTriggerId=`bar-title-section-trigger-${this.instanceId}`;this.sectionMenuId=`bar-title-section-menu-${this.instanceId}`;this.actionMenuTriggerId=`bar-title-action-trigger-${this.instanceId}`;this.actionMenuId=`bar-title-action-menu-${this.instanceId}`;this.sectionTriggerEl=null;this.actionTriggerEl=null;this.toggleSectionMenu=i=>{this.sectionMenuInitialFocusVisible=i.detail===0;this.actionMenuOpen=false;this.sectionMenuOpen=!this.sectionMenuOpen};this.closeSectionMenu=()=>{this.sectionMenuOpen=false};this.handleSectionSelect=i=>{const t=String(i.detail?.value??"");const e=this.selectableSections.find((i=>i.id===t));if(!e||e.isInactive)return;this.closeSectionMenu();this.dsSectionChange.emit(t);requestAnimationFrame((()=>this.sectionTriggerEl?.focus()))};this.toggleActionMenu=i=>{this.actionMenuInitialFocusVisible=i.detail===0;this.sectionMenuOpen=false;this.actionMenuOpen=!this.actionMenuOpen};this.closeActionMenu=()=>{this.actionMenuOpen=false};this.handleActionSelect=i=>{const t=String(i.detail?.value??"");const e=this.primaryCollapsed&&this.primaryAction?.id===t;const s=this.selectableActions.find((i=>i.id===t));if(!e&&!s)return;if(e&&(this.primaryAction?.isInactive||this.primaryAction?.isLoading)||s?.isInactive){return}this.closeActionMenu();this.dsAction.emit(t);requestAnimationFrame((()=>void this.actionTriggerEl?.setFocus?.()))};this.handleBreadcrumbSelect=i=>{if(this.breadcrumbs.length===0){this.dsBack.emit(i.detail.originalEvent);return}const t=this.dsBreadcrumbSelect.emit(i.detail);if(t.defaultPrevented)i.preventDefault()}}componentWillLoad(){if(this.el.closest("ds-shell-page")){this.el.setAttribute("data-shell-page-syncing","")}}handleSectionsChange(){if(!this.hasSectionSelector)this.closeSectionMenu()}handleActionsChange(){if(!this.showActionMenuTrigger)this.closeActionMenu()}get compact(){return this.variant!=="expanded"}get dividerVisible(){return this.compact?this.showCompactDivider??this.showDivider:this.showDivider}get expandedBreadcrumbItems(){if(this.breadcrumbs.length>0)return this.breadcrumbs;if(!this.showBack)return[];return[{id:"back",label:this.backLabel,ariaLabel:this.backAriaLabel}]}get backTooltipLabel(){return"Go back"}get primaryCollapsed(){return this.variant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return this.sections.filter((i=>!g(i)))}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return this.selectableSections.some((i=>i.id===this.value))?this.value:this.selectableSections[0]?.id??""}get selectedSectionLabel(){return this.selectableSections.find((i=>i.id===this.effectiveValue))?.label??""}get sectionTriggerAriaLabel(){return`${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`}groupsFromItems(i,t){const e=[];let s=[];const r=()=>{if(s.length>0)e.push({items:s});s=[]};for(const e of i){if(g(e)){r()}else{s.push(t(e))}}r();return e}get sectionMenuSections(){return this.groupsFromItems(this.sections,(i=>({label:i.label,value:i.id,isSelected:i.id===this.effectiveValue,isInactive:i.isInactive})))}get selectableActions(){return this.actions.filter((i=>!g(i)))}get showActionMenuTrigger(){return this.selectableActions.length>0||this.primaryCollapsed&&this.primaryAction!==null}actionMenuItem(i){const t=i;return{label:i.label,value:i.id,isInactive:i.isInactive||t.isLoading,isDestructive:i.isDestructive||t.intent==="negative"}}get actionMenuSections(){const i=this.groupsFromItems(this.actions,(i=>this.actionMenuItem(i)));if(!this.primaryCollapsed||!this.primaryAction)return i;return[{items:[this.actionMenuItem(this.primaryAction)]},...i]}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[s("div",{class:"bar-title__divider","aria-hidden":"true"}),s("div",{class:"bar-title__section-selector"},s("button",{ref:i=>{this.sectionTriggerEl=i??null},id:this.sectionMenuTriggerId,class:{"bar-title__section-trigger":true,"bar-title__section-trigger--expanded":this.sectionMenuOpen,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.sectionMenuId,"aria-expanded":String(this.sectionMenuOpen),"aria-label":this.sectionTriggerAriaLabel,onClick:this.toggleSectionMenu},s("ds-text",{class:"bar-title__section-label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.selectedSectionLabel),s("ds-icon",{class:"bar-title__section-chevron ds-interaction-fill__content",name:"ChevronUpDown",size:"md",color:"inherit","aria-hidden":"true"})))]}renderActions(){const i=this.primaryAction;if(!i&&!this.showActionMenuTrigger)return null;return s("div",{class:"bar-title__actions"},i&&!this.primaryCollapsed?s("ds-button-filled",{class:"bar-title__primary-action",variant:i.icon?"icon-label":"label",icon:i.icon??"",label:i.label,intent:i.intent??"brand",contrast:i.contrast??"bold",size:"md",type:i.type??"button",isInactive:i.isInactive,isLoading:i.isLoading,onDsClick:()=>this.dsAction.emit(i.id)}):null,this.showActionMenuTrigger?s("ds-tooltip",{label:"Page options",side:"bottom",size:"sm"},s("ds-button-unfilled",{ref:i=>{this.actionTriggerEl=i??null},id:this.actionMenuTriggerId,class:"bar-title__more-actions",variant:"icon",icon:"Ellipses","aria-label":this.actionsAriaLabel,size:"md",activeFill:!this.compact,hasBorder:i!==null&&!this.primaryCollapsed,haspopup:"menu",controls:this.actionMenuId,expanded:this.actionMenuOpen,onDsClick:i=>this.toggleActionMenu(i.detail)})):null)}renderBreadcrumb(){const i=this.expandedBreadcrumbItems;if(i.length===0)return null;return s("ds-breadcrumb",{class:"bar-title__breadcrumb",items:i,ariaLabel:this.breadcrumbAriaLabel,onDsSelect:this.handleBreadcrumbSelect})}renderBack(){if(!this.showBack)return null;return s("ds-tooltip",{label:this.backTooltipLabel,side:"bottom",size:"sm"},s("ds-button-unfilled",{class:"bar-title__back",variant:"icon",icon:"ChevronLeft","aria-label":this.backAriaLabel,size:"md",activeFill:false,hasBorder:false,onDsClick:i=>this.dsBack.emit(i.detail)}))}render(){const i=this.compact;return s(r,{key:"5d28cbbcdc035781a166dddb00035d87e3aabcd9",class:{"bar-title-host--compact":i,"bar-title-host--expanded":this.variant==="expanded","bar-title-host--constrained":this.variant==="constrained","bar-title-host--has-description":!!this.description,"bar-title-host--has-back":this.showBack,"bar-title-host--has-breadcrumb":!i&&this.expandedBreadcrumbItems.length>0}},s("div",{key:"b2336ad4bfdaec80002a9ff6945c45227f211b5e",class:{"bar-title":true,"bar-title--divider-hidden":!this.dividerVisible,"ds-chrome-header":i}},s("div",{key:"95e8106aa5ee41153372776595e7009f917e5e54",class:"bar-title__inner"},!i?this.renderBreadcrumb():null,s("div",{key:"59246271233e0c88f7c9ae4e5625f80011d1065f",class:"bar-title__row"},s("div",{key:"737a3ec6438cb1d6de5a37ae5b9eb77dcbd56f1a",class:"bar-title__leading"},s("div",{key:"bea152fb099212101c3e902b478f09c4952b392a",class:"bar-title__title-row","data-shell-page-header-anchor":true},s("div",{key:"10dc89189eacd1b5734a5765ab1166c28a89596e",class:"bar-title__identity"},i?this.renderBack():null,s("ds-text",{key:"7291b316bd6df4a2c60f14af2b89ecc02264573b",class:"bar-title__heading ds-control--md",variant:i?"text-title-small":"text-title-medium",emphasis:true,color:"primary",as:"h1",lineTruncation:1},this.heading)),this.renderSectionSelector()),this.description&&!i?s("ds-text",{class:"bar-title__description",variant:"text-body-small",color:"secondary",lineTruncation:2,wrap:"wrap",as:"p"},this.description):null),this.renderActions()))),this.hasSectionSelector?s("ds-menu",{id:this.sectionMenuId,class:"bar-title__section-menu",anchorId:this.sectionMenuTriggerId,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsSelect:this.handleSectionSelect}):null,this.showActionMenuTrigger?s("ds-menu",{id:this.actionMenuId,class:"bar-title__action-menu",anchorId:this.actionMenuTriggerId,align:"end",menuLabel:this.actionsAriaLabel,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,sections:this.actionMenuSections,onDsClose:this.closeActionMenu,onDsSelect:this.handleActionSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}}static get style(){return _()}},[2,"ds-bar-title",{heading:[1],description:[1],showBack:[4,"show-back"],backAriaLabel:[1,"back-aria-label"],backLabel:[1,"back-label"],breadcrumbs:[16],breadcrumbAriaLabel:[1,"breadcrumb-aria-label"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],primaryAction:[16],actions:[16],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],showDivider:[4,"show-divider"],showCompactDivider:[4,"show-compact-divider"],sectionMenuOpen:[32],actionMenuOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const i=["ds-bar-title","ds-badge","ds-breadcrumb","ds-button-filled","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-bar-title":if(!customElements.get(n(i))){customElements.define(n(i),w)}break;case"ds-badge":if(!customElements.get(n(i))){o()}break;case"ds-breadcrumb":if(!customElements.get(n(i))){a()}break;case"ds-button-filled":if(!customElements.get(n(i))){d()}break;case"ds-button-unfilled":if(!customElements.get(n(i))){c()}break;case"ds-icon":if(!customElements.get(n(i))){l()}break;case"ds-loader":if(!customElements.get(n(i))){h()}break;case"ds-menu":if(!customElements.get(n(i))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){u()}break;case"ds-switch":if(!customElements.get(n(i))){v()}break;case"ds-tag":if(!customElements.get(n(i))){f()}break;case"ds-text":if(!customElements.get(n(i))){m()}break;case"ds-tooltip":if(!customElements.get(n(i))){p()}break}}))}k();export{w as B,k as d};
|
|
2
|
+
//# sourceMappingURL=p-Ck_VRQYi.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as e,H as i,c as a,h as t,a as s,t as n}from"./index.js";import{d as o}from"./p-vWK5faWZ.js";import{d}from"./p-C7rzVotG.js";import{d as r}from"./p-C5TrNd31.js";import{d as c}from"./p-BNkU9dcc.js";import{d as l}from"./p-DLkNcCY0.js";import{d as p}from"./p-BFfLvMZd.js";import{d as g}from"./p-Ca-I2UnB.js";import{d as f}from"./p-CooNucm0.js";import{d as b}from"./p-DZFilC--.js";import{d as h}from"./p-BXPQmp7q.js";const m=[25,50,100,200];function u(e){return Number.isFinite(e)?Math.max(0,Math.trunc(e)):0}function v(e,i){return Number.isFinite(e)&&e>0?Math.trunc(e):i}function z(e){const i=v(e.pageSize,m[0]);const a=e.pageSizeMode==="fit"?"fit":"fixed";const t=u(e.totalItems);const s=Math.max(1,Math.ceil(t/i));const n=Math.min(u(e.pageIndex),s-1);const o=(e.pageSizeOptions?.length?e.pageSizeOptions:m).map((e=>v(e,0))).filter((e=>e>0));const d=[...new Set(a==="fixed"?[...o,i]:o)].sort(((e,i)=>e-i));const r=t===0?0:n*i+1;const c=t===0?0:Math.min(t,r+i-1);return{pageIndex:n,pageSize:i,pageSizeMode:a,totalItems:t,totalPages:s,firstItem:r,lastItem:c,pageSizeOptions:d}}const S=()=>`.ds-visually-hidden.sc-ds-pagination-h,.ds-visually-hidden.sc-ds-pagination{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-pagination-h{display:block;box-sizing:border-box;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}.sc-ds-pagination-h::-webkit-scrollbar{display:none}.pagination.sc-ds-pagination,.pagination__page-size.sc-ds-pagination,.pagination__navigation.sc-ds-pagination{display:flex;align-items:center;box-sizing:border-box}.pagination.sc-ds-pagination{width:max-content;min-width:100%;gap:var(--dimension-space-200)}.pagination__page-size.sc-ds-pagination,.pagination__navigation.sc-ds-pagination{flex:0 0 auto}.pagination__page-size.sc-ds-pagination{gap:var(--dimension-space-100);padding-inline-end:var(--dimension-space-100)}.pagination__navigation.sc-ds-pagination{gap:var(--dimension-space-050)}.pagination__total.sc-ds-pagination,.pagination__page.sc-ds-pagination,.pagination__label.sc-ds-pagination{display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap}.pagination__page.sc-ds-pagination{justify-content:center;min-inline-size:0;padding-inline:var(--dimension-space-100)}`;let x=0;const y=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=a(this,"dsChange");this.pageIndex=0;this.pageSize=25;this.pageSizeMode="fixed";this.totalItems=0;this.pageSizeOptions=[25,50,100,200];this.fitToPage=false;this.fitToPageInactive=false;this.fitPageSizeLabel="Fit to page";this.fitPageSizeTriggerLabel="Fit";this.itemLabel="items";this.pageSizeLabel="Items";this.label="Pagination";this.loading=false;this.pageSizeControlId=`ds-pagination-${++x}-page-size`}requestPage(e){const i=this.resolvedState;if(this.loading||e===i.pageIndex||e<0||e>=i.totalPages){return}this.dsChange.emit({pageIndex:e,pageSize:i.pageSize,pageSizeMode:i.pageSizeMode,totalItems:i.totalItems,pageSizeOptions:i.pageSizeOptions,fitToPage:this.fitToPage,fitToPageInactive:this.fitToPageInactive,fitPageSize:this.resolvedFitPageSize,fitPageSizeLabel:this.fitPageSizeLabel,fitPageSizeTriggerLabel:this.fitPageSizeTriggerLabel,itemLabel:this.itemLabel,pageSizeLabel:this.pageSizeLabel,ariaLabel:this.label,previousPageIndex:i.pageIndex,previousPageSize:i.pageSize,previousPageSizeMode:i.pageSizeMode,reason:"page"})}requestPageSize(e){if(this.loading||typeof e!=="string"||e==="fit"&&this.fitToPageInactive)return;const i=this.resolvedState;const a=e==="fit"?"fit":"fixed";const t=a==="fit"?this.resolvedFitPageSize:Number(e);if(!t||t===i.pageSize&&a===i.pageSizeMode)return;this.dsChange.emit({pageIndex:0,pageSize:Math.trunc(t),pageSizeMode:a,totalItems:i.totalItems,pageSizeOptions:i.pageSizeOptions,fitToPage:this.fitToPage,fitToPageInactive:this.fitToPageInactive,fitPageSize:this.resolvedFitPageSize,fitPageSizeLabel:this.fitPageSizeLabel,fitPageSizeTriggerLabel:this.fitPageSizeTriggerLabel,itemLabel:this.itemLabel,pageSizeLabel:this.pageSizeLabel,ariaLabel:this.label,previousPageIndex:i.pageIndex,previousPageSize:i.pageSize,previousPageSizeMode:i.pageSizeMode,reason:"page-size"})}handleKeyDown(e){if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey){return}const a=e.composedPath().some((e=>e instanceof i&&(e.tagName==="DS-SELECT"||["INPUT","SELECT","TEXTAREA"].includes(e.tagName))));if(a||e.key!=="ArrowLeft"&&e.key!=="ArrowRight")return;const t=this.resolvedState;const s=e.key==="ArrowLeft"?t.pageIndex-1:t.pageIndex+1;if(this.loading||s<0||s>=t.totalPages)return;e.preventDefault();this.requestPage(s)}get resolvedFitPageSize(){return Number.isFinite(this.fitPageSize)&&Number(this.fitPageSize)>0?Math.trunc(Number(this.fitPageSize)):undefined}get resolvedState(){return z({pageIndex:this.pageIndex,pageSize:this.pageSize,pageSizeMode:this.pageSizeMode,totalItems:this.totalItems,pageSizeOptions:this.pageSizeOptions})}render(){const e=this.resolvedState;const i=e.pageIndex===0;const a=e.pageIndex===e.totalPages-1;const n=`of ${e.totalItems}`;const o=`${e.pageIndex+1} of ${e.totalPages}`;const d=`${e.firstItem}–${e.lastItem} of ${e.totalItems}`;const r=`Page ${e.pageIndex+1} of ${e.totalPages}`;const c=this.pageSizeAriaLabel??`${this.pageSizeLabel} per page`;const l=e.pageSizeOptions.map((e=>({label:String(e),value:String(e)})));if(this.fitToPage){l.push({label:this.fitPageSizeLabel,value:"fit",isInactive:this.fitToPageInactive||this.resolvedFitPageSize===undefined})}return t(s,{key:"ce944a08013d8a83ad183653943eb7b83e3148fb"},t("nav",{key:"b4ca827c1323ccf65a3696b7b0d8283ba5f8212b",class:"pagination","aria-label":this.label,"aria-busy":this.loading?"true":undefined,onKeyDown:e=>this.handleKeyDown(e)},t("div",{key:"5cdf7e25924788ffab977e3b530fe22b00568e25",class:"pagination__page-size"},t("ds-text",{key:"2e292df890cf4a30169f18d58cb246e1fc417f99",class:"pagination__label",as:"span",variant:"text-body-medium",color:"secondary","aria-hidden":"true"},this.pageSizeLabel,":"),t("span",{key:"6d085501e1196b77dde4b667e5ac799f84ce5d99",id:`${this.pageSizeControlId}-label`,class:"ds-visually-hidden"},c),t("ds-select",{key:"e7c6648fc2601b0dd77c74bd22f38a0233ce6e0c",size:"md",inputId:this.pageSizeControlId,ariaLabelledby:`${this.pageSizeControlId}-label`,options:l,value:e.pageSizeMode==="fit"?"fit":String(e.pageSize),triggerLabel:e.pageSizeMode==="fit"?this.fitPageSizeTriggerLabel:undefined,indicator:"up-down",allowClear:false,activeFill:false,isInactive:this.loading,onDsChange:e=>{e.stopPropagation();this.requestPageSize(e.detail)}}),t("ds-text",{key:"7b8622720775985039132d67e0f01bce83fb3ef8",class:"pagination__total",as:"span",variant:"text-body-medium",color:"secondary",fontFeature:"tabular-nums"},n)),t("ds-divider",{key:"e81c25c881a7fd21e225d9aa12bb65db1a6e38eb",class:"pagination__divider",orientation:"vertical",length:"24px"}),t("div",{key:"b8ff21ad1634ef252bf1c5bab85efcd91dda3abf",class:"pagination__navigation"},t("ds-button-unfilled",{key:"fa9a56a87f09cbbde94925b73da6bfda4c0060b5",variant:"icon",size:"md",icon:"ChevronLeftDouble",ariaLabel:"First page",hasBorder:false,isInactive:this.loading||i,onDsClick:()=>this.requestPage(0)}),t("ds-button-unfilled",{key:"8431ce89cc8a5adfd139bb451d7960ddc360fea4",variant:"icon",size:"md",icon:"ChevronLeft",ariaLabel:"Previous page",hasBorder:false,isInactive:this.loading||i,onDsClick:()=>this.requestPage(e.pageIndex-1)}),t("ds-text",{key:"b0210ec62e623f77024a85278c16bc621e6a3b8a",class:"pagination__page",as:"span",variant:"text-body-medium",color:"secondary",fontFeature:"tabular-nums"},o),t("ds-button-unfilled",{key:"cd5e2ab74a61a6032bd89ac1ad21773a4c38cce8",variant:"icon",size:"md",icon:"ChevronRight",ariaLabel:"Next page",hasBorder:false,isInactive:this.loading||a,onDsClick:()=>this.requestPage(e.pageIndex+1)}),t("ds-button-unfilled",{key:"4e5bfa64280feb4cb60b291c41e451193a926ae2",variant:"icon",size:"md",icon:"ChevronRightDouble",ariaLabel:"Last page",hasBorder:false,isInactive:this.loading||a,onDsClick:()=>this.requestPage(e.totalPages-1)})),t("span",{key:"1dfa54e58bbc2bc801c5015555045f4c594d2aa5",class:"ds-visually-hidden",role:"status","aria-live":"polite","aria-atomic":"true"},d," ",this.itemLabel,". ",r,".")))}static get style(){return S()}},[2,"ds-pagination",{pageIndex:[2,"page-index"],pageSize:[2,"page-size"],pageSizeMode:[1,"page-size-mode"],totalItems:[2,"total-items"],pageSizeOptions:[16],fitToPage:[4,"fit-to-page"],fitToPageInactive:[4,"fit-to-page-inactive"],fitPageSize:[2,"fit-page-size"],fitPageSizeLabel:[1,"fit-page-size-label"],fitPageSizeTriggerLabel:[1,"fit-page-size-trigger-label"],itemLabel:[1,"item-label"],pageSizeLabel:[1,"page-size-label"],pageSizeAriaLabel:[1,"page-size-aria-label"],label:[1],loading:[4]}]);function k(){if(typeof customElements==="undefined"){return}const e=["ds-pagination","ds-badge","ds-button-unfilled","ds-checkbox","ds-divider","ds-empty-state","ds-icon","ds-loader","ds-select","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-pagination":if(!customElements.get(n(e))){customElements.define(n(e),y)}break;case"ds-badge":if(!customElements.get(n(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){d()}break;case"ds-checkbox":if(!customElements.get(n(e))){r()}break;case"ds-divider":if(!customElements.get(n(e))){c()}break;case"ds-empty-state":if(!customElements.get(n(e))){l()}break;case"ds-icon":if(!customElements.get(n(e))){p()}break;case"ds-loader":if(!customElements.get(n(e))){g()}break;case"ds-select":if(!customElements.get(n(e))){f()}break;case"ds-text":if(!customElements.get(n(e))){b()}break;case"ds-tooltip":if(!customElements.get(n(e))){h()}break}}))}k();export{y as P,k as d,z as r};
|
|
2
|
+
//# sourceMappingURL=p-CnWC0QvG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["DEFAULT_PAGE_SIZE_OPTIONS","nonNegativeInteger","value","Number","isFinite","Math","max","trunc","positiveInteger","fallback","resolvePaginationState","state","pageSize","pageSizeMode","totalItems","totalPages","ceil","pageIndex","min","options","pageSizeOptions","length","map","filter","Set","sort","left","right","firstItem","lastItem","paginationCss","paginationId","Pagination","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","fitToPage","fitToPageInactive","fitPageSizeLabel","fitPageSizeTriggerLabel","itemLabel","pageSizeLabel","label","loading","pageSizeControlId","requestPage","resolvedState","dsChange","emit","fitPageSize","resolvedFitPageSize","ariaLabel","previousPageIndex","previousPageSize","previousPageSizeMode","reason","requestPageSize","nextMode","handleKeyDown","event","defaultPrevented","altKey","ctrlKey","metaKey","shiftKey","fromChoiceControl","composedPath","some","node","tagName","includes","key","preventDefault","undefined","render","atStart","atEnd","total","page","announcedRange","announcedPage","pageSizeAriaLabel","String","push","isInactive","h","Host","class","onKeyDown","as","variant","color","id","size","inputId","ariaLabelledby","triggerLabel","indicator","allowClear","activeFill","onDsChange","stopPropagation","detail","fontFeature","orientation","icon","hasBorder","onDsClick","role"],"sources":["src/wc/components/Pagination/pagination-model.ts","src/wc/components/Pagination/Pagination.css?tag=ds-pagination&encapsulation=scoped","src/wc/components/Pagination/Pagination.tsx"],"sourcesContent":["import type { PaginationPageSizeMode, PaginationState } from './pagination-types';\n\nexport const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 200] as const;\n\nexport interface ResolvedPaginationState {\n pageIndex: number;\n pageSize: number;\n pageSizeMode: PaginationPageSizeMode;\n totalItems: number;\n totalPages: number;\n firstItem: number;\n lastItem: number;\n pageSizeOptions: number[];\n}\n\nfunction nonNegativeInteger(value: number): number {\n return Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0;\n}\n\nfunction positiveInteger(value: number, fallback: number): number {\n return Number.isFinite(value) && value > 0 ? Math.trunc(value) : fallback;\n}\n\nexport function resolvePaginationState(\n state: Pick<\n PaginationState,\n 'pageIndex' | 'pageSize' | 'pageSizeMode' | 'totalItems' | 'pageSizeOptions'\n >,\n): ResolvedPaginationState {\n const pageSize = positiveInteger(state.pageSize, DEFAULT_PAGE_SIZE_OPTIONS[0]);\n const pageSizeMode = state.pageSizeMode === 'fit' ? 'fit' : 'fixed';\n const totalItems = nonNegativeInteger(state.totalItems);\n const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));\n const pageIndex = Math.min(nonNegativeInteger(state.pageIndex), totalPages - 1);\n const options = (state.pageSizeOptions?.length\n ? state.pageSizeOptions\n : DEFAULT_PAGE_SIZE_OPTIONS\n )\n .map(value => positiveInteger(value, 0))\n .filter(value => value > 0);\n const pageSizeOptions = [\n ...new Set(pageSizeMode === 'fixed' ? [...options, pageSize] : options),\n ].sort((left, right) => left - right);\n const firstItem = totalItems === 0 ? 0 : pageIndex * pageSize + 1;\n const lastItem = totalItems === 0 ? 0 : Math.min(totalItems, firstItem + pageSize - 1);\n\n return {\n pageIndex,\n pageSize,\n pageSizeMode,\n totalItems,\n totalPages,\n firstItem,\n lastItem,\n pageSizeOptions,\n };\n}\n","@import '../../utils/visually-hidden.css';\n\n:host {\n display: block;\n box-sizing: border-box;\n min-width: 0;\n max-width: 100%;\n overflow-x: auto;\n scrollbar-width: none;\n}\n\n:host::-webkit-scrollbar {\n display: none;\n}\n\n.pagination,\n.pagination__page-size,\n.pagination__navigation {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n}\n\n.pagination {\n width: max-content;\n min-width: 100%;\n gap: var(--dimension-space-200);\n}\n\n.pagination__page-size,\n.pagination__navigation {\n flex: 0 0 auto;\n}\n\n.pagination__page-size {\n gap: var(--dimension-space-100);\n padding-inline-end: var(--dimension-space-100);\n}\n\n.pagination__navigation {\n gap: var(--dimension-space-050);\n}\n\n.pagination__total,\n.pagination__page,\n.pagination__label {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n white-space: nowrap;\n}\n\n.pagination__page {\n justify-content: center;\n min-inline-size: 0;\n padding-inline: var(--dimension-space-100);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolvePaginationState } from './pagination-model';\nimport type {\n PaginationChangeDetail,\n PaginationPageSizeMode,\n} from './pagination-types';\n\nlet paginationId = 0;\n\n@Component({\n tag: 'ds-pagination',\n styleUrl: 'Pagination.css',\n scoped: true,\n})\nexport class Pagination {\n /** Controlled zero-based page index. */\n @Prop() pageIndex: number = 0;\n /** Controlled number of top-level items on a full page. */\n @Prop() pageSize: number = 25;\n /** Whether pageSize is a fixed choice or a measured Fit snapshot. */\n @Prop() pageSizeMode: PaginationPageSizeMode = 'fixed';\n /** Controlled total number of top-level items across every page. */\n @Prop() totalItems: number = 0;\n /** Available page sizes. Assign arrays through JavaScript. */\n @Prop() pageSizeOptions: number[] = [25, 50, 100, 200];\n /** Include the Fit to page choice. */\n @Prop() fitToPage: boolean = false;\n /** Keep the Fit to page choice visible but unavailable. */\n @Prop() fitToPageInactive: boolean = false;\n /** Effective whole-item capacity to request when Fit is selected. */\n @Prop() fitPageSize: number | undefined;\n /** Full choice-list label for Fit. */\n @Prop() fitPageSizeLabel: string = 'Fit to page';\n /** Compact closed-trigger label while Fit is selected. */\n @Prop() fitPageSizeTriggerLabel: string = 'Fit';\n /** Localized plural noun used by assistive range announcements. */\n @Prop() itemLabel: string = 'items';\n /** Visible page-size control label. */\n @Prop() pageSizeLabel: string = 'Items';\n /** Accessible page-size control label. Defaults to “{pageSizeLabel} per page”. */\n @Prop() pageSizeAriaLabel: string | undefined;\n /** Accessible name for the pagination navigation region. */\n @Prop() label: string = 'Pagination';\n /** Prevent interaction while the owner replaces the current data page. */\n @Prop() loading: boolean = false;\n\n /** Emits the complete next controlled state after a page or page-size request. */\n @Event() dsChange!: EventEmitter<PaginationChangeDetail>;\n\n private readonly pageSizeControlId = `ds-pagination-${++paginationId}-page-size`;\n\n private requestPage(pageIndex: number): void {\n const state = this.resolvedState;\n if (this.loading || pageIndex === state.pageIndex || pageIndex < 0 || pageIndex >= state.totalPages) {\n return;\n }\n this.dsChange.emit({\n pageIndex,\n pageSize: state.pageSize,\n pageSizeMode: state.pageSizeMode,\n totalItems: state.totalItems,\n pageSizeOptions: state.pageSizeOptions,\n fitToPage: this.fitToPage,\n fitToPageInactive: this.fitToPageInactive,\n fitPageSize: this.resolvedFitPageSize,\n fitPageSizeLabel: this.fitPageSizeLabel,\n fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n itemLabel: this.itemLabel,\n pageSizeLabel: this.pageSizeLabel,\n ariaLabel: this.label,\n previousPageIndex: state.pageIndex,\n previousPageSize: state.pageSize,\n previousPageSizeMode: state.pageSizeMode,\n reason: 'page',\n });\n }\n\n private requestPageSize(value: string | string[]): void {\n if (\n this.loading ||\n typeof value !== 'string' ||\n (value === 'fit' && this.fitToPageInactive)\n ) return;\n const state = this.resolvedState;\n const nextMode: PaginationPageSizeMode = value === 'fit' ? 'fit' : 'fixed';\n const pageSize = nextMode === 'fit' ? this.resolvedFitPageSize : Number(value);\n if (!pageSize || (pageSize === state.pageSize && nextMode === state.pageSizeMode)) return;\n this.dsChange.emit({\n pageIndex: 0,\n pageSize: Math.trunc(pageSize),\n pageSizeMode: nextMode,\n totalItems: state.totalItems,\n pageSizeOptions: state.pageSizeOptions,\n fitToPage: this.fitToPage,\n fitToPageInactive: this.fitToPageInactive,\n fitPageSize: this.resolvedFitPageSize,\n fitPageSizeLabel: this.fitPageSizeLabel,\n fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n itemLabel: this.itemLabel,\n pageSizeLabel: this.pageSizeLabel,\n ariaLabel: this.label,\n previousPageIndex: state.pageIndex,\n previousPageSize: state.pageSize,\n previousPageSizeMode: state.pageSizeMode,\n reason: 'page-size',\n });\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n return;\n }\n const fromChoiceControl = event.composedPath().some(node =>\n node instanceof HTMLElement &&\n (node.tagName === 'DS-SELECT' || ['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName)),\n );\n if (fromChoiceControl || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return;\n const state = this.resolvedState;\n const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n if (this.loading || pageIndex < 0 || pageIndex >= state.totalPages) return;\n event.preventDefault();\n this.requestPage(pageIndex);\n }\n\n private get resolvedFitPageSize(): number | undefined {\n return Number.isFinite(this.fitPageSize) && Number(this.fitPageSize) > 0\n ? Math.trunc(Number(this.fitPageSize))\n : undefined;\n }\n\n private get resolvedState() {\n return resolvePaginationState({\n pageIndex: this.pageIndex,\n pageSize: this.pageSize,\n pageSizeMode: this.pageSizeMode,\n totalItems: this.totalItems,\n pageSizeOptions: this.pageSizeOptions,\n });\n }\n\n render() {\n const state = this.resolvedState;\n const atStart = state.pageIndex === 0;\n const atEnd = state.pageIndex === state.totalPages - 1;\n const total = `of ${state.totalItems}`;\n const page = `${state.pageIndex + 1} of ${state.totalPages}`;\n const announcedRange = `${state.firstItem}–${state.lastItem} of ${state.totalItems}`;\n const announcedPage = `Page ${state.pageIndex + 1} of ${state.totalPages}`;\n const pageSizeAriaLabel = this.pageSizeAriaLabel ?? `${this.pageSizeLabel} per page`;\n const options: Array<{ label: string; value: string; isInactive?: boolean }> =\n state.pageSizeOptions.map(value => ({ label: String(value), value: String(value) }));\n if (this.fitToPage) {\n options.push({\n label: this.fitPageSizeLabel,\n value: 'fit',\n isInactive: this.fitToPageInactive || this.resolvedFitPageSize === undefined,\n });\n }\n\n return (\n <Host>\n <nav\n class=\"pagination\"\n aria-label={this.label}\n aria-busy={this.loading ? 'true' : undefined}\n onKeyDown={event => this.handleKeyDown(event)}\n >\n <div class=\"pagination__page-size\">\n <ds-text\n class=\"pagination__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n aria-hidden=\"true\"\n >\n {this.pageSizeLabel}:\n </ds-text>\n <span id={`${this.pageSizeControlId}-label`} class=\"ds-visually-hidden\">\n {pageSizeAriaLabel}\n </span>\n <ds-select\n size=\"md\"\n inputId={this.pageSizeControlId}\n ariaLabelledby={`${this.pageSizeControlId}-label`}\n options={options}\n value={state.pageSizeMode === 'fit' ? 'fit' : String(state.pageSize)}\n triggerLabel={state.pageSizeMode === 'fit' ? this.fitPageSizeTriggerLabel : undefined}\n indicator=\"up-down\"\n allowClear={false}\n activeFill={false}\n isInactive={this.loading}\n onDsChange={event => {\n event.stopPropagation();\n this.requestPageSize(event.detail);\n }}\n />\n <ds-text\n class=\"pagination__total\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n fontFeature=\"tabular-nums\"\n >\n {total}\n </ds-text>\n </div>\n <ds-divider class=\"pagination__divider\" orientation=\"vertical\" length=\"24px\" />\n <div class=\"pagination__navigation\">\n <ds-button-unfilled\n variant=\"icon\"\n size=\"md\"\n icon=\"ChevronLeftDouble\"\n ariaLabel=\"First page\"\n hasBorder={false}\n isInactive={this.loading || atStart}\n onDsClick={() => this.requestPage(0)}\n />\n <ds-button-unfilled\n variant=\"icon\"\n size=\"md\"\n icon=\"ChevronLeft\"\n ariaLabel=\"Previous page\"\n hasBorder={false}\n isInactive={this.loading || atStart}\n onDsClick={() => this.requestPage(state.pageIndex - 1)}\n />\n <ds-text\n class=\"pagination__page\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n fontFeature=\"tabular-nums\"\n >\n {page}\n </ds-text>\n <ds-button-unfilled\n variant=\"icon\"\n size=\"md\"\n icon=\"ChevronRight\"\n ariaLabel=\"Next page\"\n hasBorder={false}\n isInactive={this.loading || atEnd}\n onDsClick={() => this.requestPage(state.pageIndex + 1)}\n />\n <ds-button-unfilled\n variant=\"icon\"\n size=\"md\"\n icon=\"ChevronRightDouble\"\n ariaLabel=\"Last page\"\n hasBorder={false}\n isInactive={this.loading || atEnd}\n onDsClick={() => this.requestPage(state.totalPages - 1)}\n />\n </div>\n <span class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {announcedRange} {this.itemLabel}. {announcedPage}.\n </span>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|