@ds-mo/ui 13.15.0 → 13.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +3 -2
- package/dist/agent.json +59 -12
- package/dist/angular/ds-bar-title.d.ts +1 -1
- package/dist/angular/ds-bar-title.js +3 -3
- package/dist/angular/ds-shell-page.d.ts +1 -1
- package/dist/angular/ds-shell-page.js +3 -3
- package/dist/angular/ds-table.d.ts +1 -1
- package/dist/angular/ds-table.js +3 -3
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list.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-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-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-scroll-overlay.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-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-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-tooltip.js +1 -1
- package/dist/components/{p-DgIRyJoc.js → p-B53Vpuqq.js} +2 -2
- package/dist/components/{p-fKwbYrhi.js → p-B94M62Tx.js} +2 -2
- package/dist/components/p-BAAjiAIF.js +2 -0
- package/dist/components/p-BAAjiAIF.js.map +1 -0
- package/dist/components/{p-ClHpIZg0.js → p-BMAZWEDa.js} +2 -2
- package/dist/components/p-BMAZWEDa.js.map +1 -0
- package/dist/components/p-BMc0DE59.js +2 -0
- package/dist/components/p-BMc0DE59.js.map +1 -0
- package/dist/components/{p-GSnB-sa7.js → p-BPbE-Kbl.js} +2 -2
- package/dist/components/{p-CCkptWPj.js → p-BxR8omPQ.js} +2 -2
- package/dist/components/{p-CY19gMiz.js → p-CJq3n5kA.js} +2 -2
- package/dist/components/{p-IhToA4m4.js → p-CMbcRN92.js} +2 -2
- package/dist/components/{p-QDcUAz9m.js → p-CnIvWEVm.js} +2 -2
- package/dist/components/{p-DWjE0VNn.js → p-D5sIwLjA.js} +2 -2
- package/dist/components/p-D9CDoQBx.js +2 -0
- package/dist/components/{p-BLaqjUWu.js.map → p-D9CDoQBx.js.map} +1 -1
- package/dist/components/{p-CekGwihQ.js → p-D9FdOR_m.js} +2 -2
- package/dist/components/{p-D5aUkdTw.js → p-Dbobj7DI.js} +2 -2
- package/dist/components/{p-DQXzTV8N.js → p-DrvEhJhO.js} +2 -2
- package/dist/components/{p-BH_lVRgp.js → p-DyqLVdJp.js} +2 -2
- package/dist/components/{p-DWNhyLp2.js → p-m5CSrx_s.js} +2 -2
- package/dist/docs/components.json +301 -2
- package/dist/lib/components/ShellApp/shell-app-types.d.ts +12 -0
- package/dist/lib/utils/index.js +41 -4
- package/dist/lib/utils/index.js.map +2 -2
- package/dist/lib/utils/resolve-css-length-px.d.ts +1 -1
- package/dist/mcp-data/registry/bar-title.json +38 -3
- package/dist/mcp-data/registry/registry.json +58 -11
- package/dist/mcp-data/registry/shell-app.json +3 -3
- package/dist/mcp-data/registry/shell-page.json +77 -4
- package/dist/mcp-data/registry/table.json +88 -12
- package/dist/styles/table.css +161 -10
- package/dist/types/components/BarTitle/BarTitle.d.ts +5 -0
- package/dist/types/components/ShellApp/shell-app-types.d.ts +12 -0
- package/dist/types/components/ShellPage/ShellPage.d.ts +9 -0
- package/dist/types/components/Table/Table.d.ts +30 -0
- package/dist/types/components/Table/table-cell-model.d.ts +2 -0
- package/dist/types/components/Table/table-layout-controller.d.ts +6 -0
- package/dist/types/components/Table/table-types.d.ts +3 -0
- package/dist/types/components/Table/table-viewport-fit-controller.d.ts +53 -0
- package/dist/types/components.d.ts +102 -0
- package/dist/types/utils/resolve-css-length-px.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-BJMRBHKW.js +0 -2
- package/dist/components/p-BJMRBHKW.js.map +0 -1
- package/dist/components/p-BLaqjUWu.js +0 -2
- package/dist/components/p-ClHpIZg0.js.map +0 -1
- package/dist/components/p-DyVAWGL9.js +0 -2
- package/dist/components/p-DyVAWGL9.js.map +0 -1
- /package/dist/components/{p-DgIRyJoc.js.map → p-B53Vpuqq.js.map} +0 -0
- /package/dist/components/{p-fKwbYrhi.js.map → p-B94M62Tx.js.map} +0 -0
- /package/dist/components/{p-GSnB-sa7.js.map → p-BPbE-Kbl.js.map} +0 -0
- /package/dist/components/{p-CCkptWPj.js.map → p-BxR8omPQ.js.map} +0 -0
- /package/dist/components/{p-CY19gMiz.js.map → p-CJq3n5kA.js.map} +0 -0
- /package/dist/components/{p-IhToA4m4.js.map → p-CMbcRN92.js.map} +0 -0
- /package/dist/components/{p-QDcUAz9m.js.map → p-CnIvWEVm.js.map} +0 -0
- /package/dist/components/{p-DWjE0VNn.js.map → p-D5sIwLjA.js.map} +0 -0
- /package/dist/components/{p-CekGwihQ.js.map → p-D9FdOR_m.js.map} +0 -0
- /package/dist/components/{p-D5aUkdTw.js.map → p-Dbobj7DI.js.map} +0 -0
- /package/dist/components/{p-DQXzTV8N.js.map → p-DrvEhJhO.js.map} +0 -0
- /package/dist/components/{p-BH_lVRgp.js.map → p-DyqLVdJp.js.map} +0 -0
- /package/dist/components/{p-DWNhyLp2.js.map → p-m5CSrx_s.js.map} +0 -0
package/dist/.package-ready.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"schemaVersion":1,"package":"@ds-mo/ui","version":"13.
|
|
1
|
+
{"schemaVersion":1,"package":"@ds-mo/ui","version":"13.16.0","components":67,"digest":"55fed7e47f4c13794943756d36dadf566a3d4c505a7f1fde06e6595a0fd383da","completedAt":"2026-08-13T00:16:44.079Z"}
|
package/dist/agent-patterns.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"package": "@ds-mo/ui",
|
|
4
|
-
"packageVersion": "13.
|
|
4
|
+
"packageVersion": "13.16.0",
|
|
5
5
|
"kind": "patterns",
|
|
6
6
|
"entries": [
|
|
7
7
|
{
|
|
@@ -601,7 +601,7 @@
|
|
|
601
601
|
}
|
|
602
602
|
],
|
|
603
603
|
"stateOwnership": [
|
|
604
|
-
"The router owns heading copy, selected section, depth, available actions, content inset, content surface, route data, and product outcomes.",
|
|
604
|
+
"The router owns heading copy, selected section, depth, available actions, content inset, divider visibility, scroll-compaction policy, content surface, route data, and product outcomes.",
|
|
605
605
|
"The application replaces pageChrome from completed route state and handles ShellApp page intent events.",
|
|
606
606
|
"ShellApp owns ShellPage, BarTitle, MobileHeader, the content scroller, sticky presentation, and responsive switching.",
|
|
607
607
|
"The default slot contains application-owned routed content and is not recreated for header compaction or breakpoint changes.",
|
|
@@ -617,6 +617,7 @@
|
|
|
617
617
|
"ShellApp derives the desktop BarTitle and mobile MobileHeader from the same pageChrome object.",
|
|
618
618
|
"Route-level sections remain pageChrome tabs; subordinate local views use subsections.",
|
|
619
619
|
"Use contentInset none only for deliberately full-bleed products such as maps and canvases.",
|
|
620
|
+
"Table pages can retain responsive inline and bottom gutters while tuning their roomy and compact block-start seams; set scrollCompaction false when their roomy title must stay pinned, and let shell capacity continue to compact it for tools or tablet layouts.",
|
|
620
621
|
"Choose contentSurface independently: primary and secondary canvases both support default responsive gutters or full-bleed content.",
|
|
621
622
|
"Desktop and tablet BarTitle presentations match a secondary page canvas across expanded, compact, and constrained variants; the separate mobile header remains primary.",
|
|
622
623
|
"ShellPage keeps its scroll-compaction spacer on the selected content surface so the routed canvas remains continuous.",
|
package/dist/agent.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"package": "@ds-mo/ui",
|
|
4
|
-
"packageVersion": "13.
|
|
4
|
+
"packageVersion": "13.16.0",
|
|
5
5
|
"kind": "components",
|
|
6
6
|
"entries": [
|
|
7
7
|
{
|
|
@@ -1147,7 +1147,8 @@
|
|
|
1147
1147
|
"Dividers in sections or actions create separate Menu groups without becoming selectable rows.",
|
|
1148
1148
|
"The overflow trigger uses its bordered treatment whenever the primary action is visible beside it; overflow-only and auto-collapsed-primary presentations keep the trigger borderless.",
|
|
1149
1149
|
"expanded renders the larger heading, optional description, inset divider, and a full-width caption breadcrumb row above the title. The breadcrumb begins after 32px top padding; the following title and right-side actions share one top alignment. Compact renders 48px chrome with the existing icon Back action; constrained uses compact chrome and moves an auto-collapse primary action into overflow.",
|
|
1150
|
-
"primaryAction collapse defaults to auto. Use never for exceptional actions whose hierarchy must remain visible in constrained layouts."
|
|
1150
|
+
"primaryAction collapse defaults to auto. Use never for exceptional actions whose hierarchy must remain visible in constrained layouts.",
|
|
1151
|
+
"showDivider=false removes the bottom divider when the surrounding page composition supplies the boundary; showCompactDivider can independently restore or remove that boundary in compact and constrained variants."
|
|
1151
1152
|
],
|
|
1152
1153
|
"responsiveBehavior": [
|
|
1153
1154
|
"BarTitle does not observe viewport, shell, scroll, or container state. Its owner selects an explicit variant.",
|
|
@@ -1235,6 +1236,14 @@
|
|
|
1235
1236
|
"type": "boolean",
|
|
1236
1237
|
"required": false
|
|
1237
1238
|
},
|
|
1239
|
+
"showCompactDivider": {
|
|
1240
|
+
"type": "boolean",
|
|
1241
|
+
"required": false
|
|
1242
|
+
},
|
|
1243
|
+
"showDivider": {
|
|
1244
|
+
"type": "boolean",
|
|
1245
|
+
"required": false
|
|
1246
|
+
},
|
|
1238
1247
|
"value": {
|
|
1239
1248
|
"type": "string",
|
|
1240
1249
|
"required": false
|
|
@@ -6798,7 +6807,7 @@
|
|
|
6798
6807
|
"Replace navigation and pageChrome together from one completed route state.",
|
|
6799
6808
|
"When pageChrome.showBack marks a detail depth, mobile chrome keeps the page heading as its identity and presents only local subsections; peer route tabs remain in desktop BarNav rather than replacing the detail heading.",
|
|
6800
6809
|
"Managed ShellApp keeps BarNav and ShellPage presentations present and owns page header stickiness and the content scroller.",
|
|
6801
|
-
"Route-owned pageChrome selects ShellPage contentInset and contentSurface
|
|
6810
|
+
"Route-owned pageChrome independently selects ShellPage contentInset, roomy and compact top seams, scroll compaction, expanded and compact header-divider visibility, and contentSurface; ShellApp forwards them without making page-specific layout or surface decisions.",
|
|
6802
6811
|
"The application filters unauthorized destinations, sections, and tools before passing them into shell components."
|
|
6803
6812
|
],
|
|
6804
6813
|
"responsiveBehavior": [
|
|
@@ -6974,12 +6983,12 @@
|
|
|
6974
6983
|
"tag": "ds-shell-page",
|
|
6975
6984
|
"name": "shell-page",
|
|
6976
6985
|
"title": "ShellPage",
|
|
6977
|
-
"summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity,
|
|
6986
|
+
"summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, optional scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
|
|
6978
6987
|
"intentStatus": "complete",
|
|
6979
6988
|
"intent": {
|
|
6980
6989
|
"audience": "general",
|
|
6981
6990
|
"status": "stable",
|
|
6982
|
-
"summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity,
|
|
6991
|
+
"summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, optional scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
|
|
6983
6992
|
"useWhen": [
|
|
6984
6993
|
"Rendering a standard routed page inside ShellApp's default content region.",
|
|
6985
6994
|
"BarTitle should expand at a roomy page top, compact after scroll, or use constrained action layout when the application shell reports reduced capacity.",
|
|
@@ -7024,6 +7033,9 @@
|
|
|
7024
7033
|
"headerPresentation=auto selects the matching header variant from headerCapacity and scroll position.",
|
|
7025
7034
|
"expanded, compact, and constrained are explicit overrides for exceptional layouts and deterministic examples.",
|
|
7026
7035
|
"contentInset=default supplies standard page gutters; none permits maps, canvases, and other full-bleed content.",
|
|
7036
|
+
"contentInsetBlockStart=none removes only the gutter adjacent to the page header while retaining the responsive inline and bottom gutters.",
|
|
7037
|
+
"contentInsetBlockStartSize can provide an exact roomy top seam, while compactContentInsetBlockStartSize independently defines the compact and constrained seam. ShellPage exposes their resolved sticky-header offset through --ds-shell-page-content-block-start-offset for viewport-fitted descendants.",
|
|
7038
|
+
"scrollCompaction=false keeps a roomy header expanded and pinned during page scrolling; capacity changes still select compact or constrained variants.",
|
|
7027
7039
|
"contentSurface=primary keeps the standard page canvas; secondary paints both the inset gutter and the canvas beneath routed content. Desktop and tablet BarTitle chrome matches that canvas in expanded, compact, and constrained presentations; MobileHeader remains primary.",
|
|
7028
7040
|
"contentInset and contentSurface are independent: either surface supports standard responsive gutters or a full-bleed page-owned layout.",
|
|
7029
7041
|
"The header slot accepts one desktop BarTitle or BarWorkflow; mobile-header accepts the corresponding MobileHeader presentation. The default slot owns router output and all page product content."
|
|
@@ -7031,10 +7043,12 @@
|
|
|
7031
7043
|
"responsiveBehavior": [
|
|
7032
7044
|
"The owning application shell resolves viewport and persistent-chrome state into the explicit headerCapacity prop; ShellPage never guesses the cause of reduced width from its own rendered size.",
|
|
7033
7045
|
"Roomy capacity expands at the top and compacts after scroll; compact capacity stays compact; constrained capacity uses the constrained action layout.",
|
|
7046
|
+
"Pages with scrollCompaction=false keep roomy headers expanded while still responding to compact or constrained capacity from tools and breakpoints.",
|
|
7034
7047
|
"A ShellPage-managed BarTitle remains concealed until headerCapacity is available and its rendered variant matches the resolved presentation, preventing a default-variant flash during route activation.",
|
|
7035
7048
|
"responsiveMode=mobile hides and inerts the desktop header, exposes mobile-header, and disables desktop scroll-compaction geometry.",
|
|
7036
7049
|
"Update headerCapacity synchronously with shell layout state so opening tools or crossing application breakpoints cannot briefly render the wrong presentation.",
|
|
7037
7050
|
"The default content inset is balanced on every side: 32px in desktop mode and 16px in tablet and mobile modes.",
|
|
7051
|
+
"contentInsetBlockStart can independently remove the top gutter for table and canvas pages that should meet the sticky header; exact roomy and compact block-start sizes support pages whose seam changes with header capacity.",
|
|
7038
7052
|
"The selected content surface persists unchanged across desktop, tablet, and mobile modes.",
|
|
7039
7053
|
"On a secondary desktop or tablet page, BarTitle matches the page canvas across capacity and scroll-driven variant changes; the separate mobile-header presentation remains primary.",
|
|
7040
7054
|
"The flow-preservation spacer follows contentSurface so compacting a secondary page cannot expose a primary strip before its content.",
|
|
@@ -7074,10 +7088,22 @@
|
|
|
7074
7088
|
},
|
|
7075
7089
|
"api": {
|
|
7076
7090
|
"props": {
|
|
7091
|
+
"compactContentInsetBlockStartSize": {
|
|
7092
|
+
"type": "string",
|
|
7093
|
+
"required": false
|
|
7094
|
+
},
|
|
7077
7095
|
"contentInset": {
|
|
7078
7096
|
"type": "ShellPageContentInset",
|
|
7079
7097
|
"required": false
|
|
7080
7098
|
},
|
|
7099
|
+
"contentInsetBlockStart": {
|
|
7100
|
+
"type": "ShellPageContentInset",
|
|
7101
|
+
"required": false
|
|
7102
|
+
},
|
|
7103
|
+
"contentInsetBlockStartSize": {
|
|
7104
|
+
"type": "string",
|
|
7105
|
+
"required": false
|
|
7106
|
+
},
|
|
7081
7107
|
"contentSurface": {
|
|
7082
7108
|
"type": "ShellPageContentSurface",
|
|
7083
7109
|
"required": false
|
|
@@ -7093,6 +7119,10 @@
|
|
|
7093
7119
|
"responsiveMode": {
|
|
7094
7120
|
"type": "ShellResponsiveMode",
|
|
7095
7121
|
"required": false
|
|
7122
|
+
},
|
|
7123
|
+
"scrollCompaction": {
|
|
7124
|
+
"type": "boolean",
|
|
7125
|
+
"required": false
|
|
7096
7126
|
}
|
|
7097
7127
|
},
|
|
7098
7128
|
"events": [],
|
|
@@ -8070,29 +8100,30 @@
|
|
|
8070
8100
|
"component:ds-icon"
|
|
8071
8101
|
],
|
|
8072
8102
|
"accessibility": [
|
|
8073
|
-
"The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a
|
|
8103
|
+
"The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the horizontal scrollport. It defaults to a presentational caption title that does not duplicate the accessible name; application-owned labeled controls supplied through the named header slot replace that fallback. header-leading and header-trailing place actions in the matching compact-bar zones without transferring ownership of the bar's outer or copy padding to the application. Their slot outlets remain mounted so dynamically shown selection and filtering summaries cannot briefly enter the table's outer flow or move its frame.",
|
|
8074
8104
|
"Sorting controls remain buttons inside column headers. Member-row sort uses aria-sort, while independent group order is described by the grouped header control.",
|
|
8075
8105
|
"Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window. When grouping is active with multi-selection, each group section header also exposes a checkbox that selects or clears that group's selectable loaded rows.",
|
|
8076
8106
|
"Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection or action controls.",
|
|
8077
8107
|
"Scrollable table regions become keyboard focusable and named only when overflow exists.",
|
|
8078
8108
|
"Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state.",
|
|
8079
|
-
"An optional result summary footer appears below the table frame when both displayedCount and totalCount are finite, formatting Displaying {displayed} of {total} in text-body-medium secondary."
|
|
8109
|
+
"An optional result summary footer appears below the table frame when both displayedCount and totalCount are finite, formatting Displaying {displayed} of {total} in text-body-medium secondary. The footer slot can replace that copy, while footer-leading and footer-trailing compose actions into the same compact-bar anatomy. Authored footer content can also opt into the 48px footer without controlled counts."
|
|
8080
8110
|
],
|
|
8081
8111
|
"states": [
|
|
8082
|
-
"Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, displayedCount, totalCount, and lazy-loading state are controlled inputs. Events communicate intent and never mutate those inputs.",
|
|
8083
|
-
"Grouping supports one level. The application supplies ordered groups and ordered member rows; group order and member-row sort are independent controls. Group section headers show an emphasized text-body-medium label followed by a rounded sm Tag containing only the numeric count. The Tag uses the group's faint intent surface (neutral when intent is absent) and a small-elevation, button-hugging wrapper; a localized countLabel remains available to assistive technology. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background; the final collapsed section does not duplicate the terminal table edge. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group remains expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it.
|
|
8112
|
+
"Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, displayedCount, totalCount, and lazy-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header and footer slots are composable table-local bars: the component owns their 48px chrome, 8px outer inset, md copy-container padding, balanced text inset, action zones, and sticky placement while the application owns its controls, labels, filtering behavior, and action handling. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
|
|
8113
|
+
"Grouping supports one level. The application supplies ordered groups and ordered member rows; group order and member-row sort are independent controls. Group section headers show an emphasized text-body-medium label followed by a rounded sm Tag containing only the numeric count. The Tag uses the group's faint intent surface (neutral when intent is absent) and a small-elevation, button-hugging wrapper; a localized countLabel remains available to assistive technology. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background; the final collapsed section does not duplicate the terminal table edge. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group remains expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each section header scrolls with its group, pins directly below the column header when reached, and yields when the next section arrives. It also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width.",
|
|
8084
8114
|
"An active member sort toggles only between ascending and descending; activating a different sortable label moves sorting to that key. Applications may still clear the controlled sort state explicitly. The grouped column toggles ascending and descending group order without clearing member sort.",
|
|
8085
8115
|
"Compound headers can expose multiple related labels with independent sort keys. Each label owns only its content-width interaction target while the active direction remains in the column's alignment-aware sort lane.",
|
|
8086
|
-
"Initial loading uses row-shaped skeletons that preserve the standard single-line cell padding, row dividers, column dividers, selection lane, and sticky-lane boundaries. Empty
|
|
8116
|
+
"Initial loading uses row-shaped skeletons that preserve the standard single-line cell padding, row dividers, column dividers, selection lane, and sticky-lane boundaries. Empty, initial error, load-more, retry, loading-more, and terminal bands remain fixed to the visible table width while data columns scroll horizontally beneath them. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states.",
|
|
8087
8117
|
"Lazy loading replaces pagination. The application owns requests, cancellation, cursors, deduplication, appended records, and query identity; loadIdentity resets the component request guard.",
|
|
8088
8118
|
"Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
|
|
8089
8119
|
"Row selection owns the single sticky start lane. One explicitly sized application column can own the sticky end lane, or the start lane when selection is absent. Each sticky boundary owns one fixed divider and a row-clipped directional shadow that paints into the adjacent scrolling columns only while more inline content remains beyond that edge.",
|
|
8090
|
-
"Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Single-track text, selection, tag-only, icon-only, Action, Empty, and Blank cells resolve a 40px base contract while multi-track cells grow downward. Tag cells use the double-inset Tag recipe; the md tag-only recipe is 24px inside 8px padding, while compound tag tracks preserve their peer text alignment. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled inside 8px padding, default to unbordered, and emit row, column, and action identities through dsCellAction. Image cells render a 48px-high 16:9 bordered preview inside 8px outer padding, establishing a 64px row and a 102px column recipe, and fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type and variant hooks keep every cell family independently styleable.",
|
|
8120
|
+
"Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; dual-primary copy keeps both tracks primary unless explicitly colored. Single-track text, selection, tag-only, icon-only, Action, Empty, and Blank cells resolve a 40px base contract while multi-track cells grow downward. Tag cells use the double-inset Tag recipe; the md tag-only recipe is 24px inside 8px padding, while compound tag tracks preserve their peer text alignment. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled inside 8px padding, default to unbordered, and emit row, column, and action identities through dsCellAction. Image cells render a 48px-high 16:9 bordered preview inside 8px outer padding, establishing a 64px row and a 102px column recipe, and fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type and variant hooks keep every cell family independently styleable.",
|
|
8091
8121
|
"The public @ds-mo/ui/table.css export is the authoritative zero-specificity visual recipe. Override its --ds-table-* properties or target its stable element classes for product-specific styling."
|
|
8092
8122
|
],
|
|
8093
8123
|
"responsiveBehavior": [
|
|
8094
8124
|
"The table keeps native semantics at narrow widths and scrolls horizontally instead of transforming into cards.",
|
|
8095
|
-
"stickyHeader follows the active vertical scroll owner: a maxHeight table keeps its native header inside
|
|
8125
|
+
"stickyHeader follows the active vertical scroll owner: a maxHeight, height, or fitViewport table keeps its native header and group sections inside one bounded table scrollport, while a document-flow table retains a semantic native header and renders a sticky control header whose columns follow the body's native inline scroll timeline. Consumers set --ds-table-sticky-header-offset when page chrome occupies an unbounded document scrollport edge. When the 48px table header bar is visible, it sticks at that external offset and the column header stacks immediately below it.",
|
|
8126
|
+
"fitViewport uses viewportInsetBlockStart and viewportInsetBlockEnd to describe compact surrounding chrome and page gutters relative to the nearest vertical scroll owner. Before the table reaches that compact position, its host reserves the eventual height while the visible composition grows and vertical input remains owned by the outer page. Once settled, the internal table viewport becomes the vertical scroll owner. In both bounded and document-flow modes, native row-group headers remain the semantic source while one table-owned visual sticky lane is clamped to the active row group's ending boundary, so each incoming section pushes the previous section away without duplicate overlap.",
|
|
8096
8127
|
"Without maxHeight the table grows the document and automatic lazy loading observes the browser viewport. Horizontal scrolling chains vertical wheel and trackpad movement to the page instead of trapping it.",
|
|
8097
8128
|
"Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space.",
|
|
8098
8129
|
"Prefer the named xs through xl column sizes, which resolve through TokoMo's table-column width tokens; numeric pixel sizes remain an escape hatch for exceptional application-owned widths.",
|
|
@@ -8174,6 +8205,10 @@
|
|
|
8174
8205
|
"type": "string",
|
|
8175
8206
|
"required": false
|
|
8176
8207
|
},
|
|
8208
|
+
"fitViewport": {
|
|
8209
|
+
"type": "boolean",
|
|
8210
|
+
"required": false
|
|
8211
|
+
},
|
|
8177
8212
|
"grouping": {
|
|
8178
8213
|
"type": "TableGroupingState | null",
|
|
8179
8214
|
"required": false
|
|
@@ -8186,6 +8221,10 @@
|
|
|
8186
8221
|
"type": "boolean",
|
|
8187
8222
|
"required": false
|
|
8188
8223
|
},
|
|
8224
|
+
"height": {
|
|
8225
|
+
"type": "string | number | undefined",
|
|
8226
|
+
"required": false
|
|
8227
|
+
},
|
|
8189
8228
|
"lazyLoading": {
|
|
8190
8229
|
"type": "boolean",
|
|
8191
8230
|
"required": false
|
|
@@ -8269,6 +8308,14 @@
|
|
|
8269
8308
|
"totalCount": {
|
|
8270
8309
|
"type": "number | undefined",
|
|
8271
8310
|
"required": false
|
|
8311
|
+
},
|
|
8312
|
+
"viewportInsetBlockEnd": {
|
|
8313
|
+
"type": "string | number",
|
|
8314
|
+
"required": false
|
|
8315
|
+
},
|
|
8316
|
+
"viewportInsetBlockStart": {
|
|
8317
|
+
"type": "string | number",
|
|
8318
|
+
"required": false
|
|
8272
8319
|
}
|
|
8273
8320
|
},
|
|
8274
8321
|
"events": [
|
|
@@ -12,7 +12,7 @@ export declare class DsBarTitle {
|
|
|
12
12
|
dsAction: EventEmitter<DsBarTitleCustomEvent<string>>;
|
|
13
13
|
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
14
14
|
static ɵfac: i0.ɵɵFactoryDeclaration<DsBarTitle, never>;
|
|
15
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsBarTitle, "ds-bar-title", never, { "actions": { "alias": "actions"; "required": false; }; "actionsAriaLabel": { "alias": "actionsAriaLabel"; "required": false; }; "backAriaLabel": { "alias": "backAriaLabel"; "required": false; }; "backLabel": { "alias": "backLabel"; "required": false; }; "breadcrumbAriaLabel": { "alias": "breadcrumbAriaLabel"; "required": false; }; "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; "description": { "alias": "description"; "required": false; }; "heading": { "alias": "heading"; "required": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "sectionsAriaLabel": { "alias": "sectionsAriaLabel"; "required": false; }; "showBack": { "alias": "showBack"; "required": false; }; "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "dsBack": "dsBack"; "dsBreadcrumbSelect": "dsBreadcrumbSelect"; "dsSectionChange": "dsSectionChange"; "dsAction": "dsAction"; }, never, ["*"], true, never>;
|
|
15
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsBarTitle, "ds-bar-title", never, { "actions": { "alias": "actions"; "required": false; }; "actionsAriaLabel": { "alias": "actionsAriaLabel"; "required": false; }; "backAriaLabel": { "alias": "backAriaLabel"; "required": false; }; "backLabel": { "alias": "backLabel"; "required": false; }; "breadcrumbAriaLabel": { "alias": "breadcrumbAriaLabel"; "required": false; }; "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; "description": { "alias": "description"; "required": false; }; "heading": { "alias": "heading"; "required": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "sectionsAriaLabel": { "alias": "sectionsAriaLabel"; "required": false; }; "showBack": { "alias": "showBack"; "required": false; }; "showCompactDivider": { "alias": "showCompactDivider"; "required": false; }; "showDivider": { "alias": "showDivider"; "required": false; }; "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "dsBack": "dsBack"; "dsBreadcrumbSelect": "dsBreadcrumbSelect"; "dsSectionChange": "dsSectionChange"; "dsAction": "dsAction"; }, never, ["*"], true, never>;
|
|
16
16
|
}
|
|
17
17
|
export declare interface DsBarTitle extends Components.DsBarTitle {
|
|
18
18
|
/**
|
|
@@ -21,12 +21,12 @@ let DsBarTitle = class DsBarTitle {
|
|
|
21
21
|
this.el = r.nativeElement;
|
|
22
22
|
}
|
|
23
23
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsBarTitle, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsBarTitle, isStandalone: true, selector: "ds-bar-title", inputs: { actions: "actions", actionsAriaLabel: "actionsAriaLabel", backAriaLabel: "backAriaLabel", backLabel: "backLabel", breadcrumbAriaLabel: "breadcrumbAriaLabel", breadcrumbs: "breadcrumbs", description: "description", heading: "heading", primaryAction: "primaryAction", sections: "sections", sectionsAriaLabel: "sectionsAriaLabel", showBack: "showBack", value: "value", variant: "variant" }, outputs: { dsBack: "dsBack", dsBreadcrumbSelect: "dsBreadcrumbSelect", dsSectionChange: "dsSectionChange", dsAction: "dsAction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsBarTitle, isStandalone: true, selector: "ds-bar-title", inputs: { actions: "actions", actionsAriaLabel: "actionsAriaLabel", backAriaLabel: "backAriaLabel", backLabel: "backLabel", breadcrumbAriaLabel: "breadcrumbAriaLabel", breadcrumbs: "breadcrumbs", description: "description", heading: "heading", primaryAction: "primaryAction", sections: "sections", sectionsAriaLabel: "sectionsAriaLabel", showBack: "showBack", showCompactDivider: "showCompactDivider", showDivider: "showDivider", value: "value", variant: "variant" }, outputs: { dsBack: "dsBack", dsBreadcrumbSelect: "dsBreadcrumbSelect", dsSectionChange: "dsSectionChange", dsAction: "dsAction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25
25
|
};
|
|
26
26
|
DsBarTitle = __decorate([
|
|
27
27
|
ProxyCmp({
|
|
28
28
|
defineCustomElementFn: defineDsBarTitle,
|
|
29
|
-
inputs: ['actions', 'actionsAriaLabel', 'backAriaLabel', 'backLabel', 'breadcrumbAriaLabel', 'breadcrumbs', 'description', 'heading', 'primaryAction', 'sections', 'sectionsAriaLabel', 'showBack', 'value', 'variant']
|
|
29
|
+
inputs: ['actions', 'actionsAriaLabel', 'backAriaLabel', 'backLabel', 'breadcrumbAriaLabel', 'breadcrumbs', 'description', 'heading', 'primaryAction', 'sections', 'sectionsAriaLabel', 'showBack', 'showCompactDivider', 'showDivider', 'value', 'variant']
|
|
30
30
|
})
|
|
31
31
|
], DsBarTitle);
|
|
32
32
|
export { DsBarTitle };
|
|
@@ -37,7 +37,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
37
37
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
38
38
|
template: '<ng-content></ng-content>',
|
|
39
39
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
40
|
-
inputs: ['actions', 'actionsAriaLabel', 'backAriaLabel', 'backLabel', 'breadcrumbAriaLabel', 'breadcrumbs', 'description', { name: 'heading', required: true }, 'primaryAction', 'sections', 'sectionsAriaLabel', 'showBack', 'value', 'variant'],
|
|
40
|
+
inputs: ['actions', 'actionsAriaLabel', 'backAriaLabel', 'backLabel', 'breadcrumbAriaLabel', 'breadcrumbs', 'description', { name: 'heading', required: true }, 'primaryAction', 'sections', 'sectionsAriaLabel', 'showBack', 'showCompactDivider', 'showDivider', 'value', 'variant'],
|
|
41
41
|
outputs: ['dsBack', 'dsBreadcrumbSelect', 'dsSectionChange', 'dsAction'],
|
|
42
42
|
}]
|
|
43
43
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsBack: [{
|
|
@@ -6,7 +6,7 @@ export declare class DsShellPage {
|
|
|
6
6
|
protected el: HTMLDsShellPageElement;
|
|
7
7
|
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
8
8
|
static ɵfac: i0.ɵɵFactoryDeclaration<DsShellPage, never>;
|
|
9
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsShellPage, "ds-shell-page", never, { "contentInset": { "alias": "contentInset"; "required": false; }; "contentSurface": { "alias": "contentSurface"; "required": false; }; "headerCapacity": { "alias": "headerCapacity"; "required": false; }; "headerPresentation": { "alias": "headerPresentation"; "required": false; }; "responsiveMode": { "alias": "responsiveMode"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
9
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsShellPage, "ds-shell-page", never, { "compactContentInsetBlockStartSize": { "alias": "compactContentInsetBlockStartSize"; "required": false; }; "contentInset": { "alias": "contentInset"; "required": false; }; "contentInsetBlockStart": { "alias": "contentInsetBlockStart"; "required": false; }; "contentInsetBlockStartSize": { "alias": "contentInsetBlockStartSize"; "required": false; }; "contentSurface": { "alias": "contentSurface"; "required": false; }; "headerCapacity": { "alias": "headerCapacity"; "required": false; }; "headerPresentation": { "alias": "headerPresentation"; "required": false; }; "responsiveMode": { "alias": "responsiveMode"; "required": false; }; "scrollCompaction": { "alias": "scrollCompaction"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
10
10
|
}
|
|
11
11
|
export declare interface DsShellPage extends Components.DsShellPage {
|
|
12
12
|
}
|
|
@@ -17,12 +17,12 @@ let DsShellPage = class DsShellPage {
|
|
|
17
17
|
this.el = r.nativeElement;
|
|
18
18
|
}
|
|
19
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsShellPage, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsShellPage, isStandalone: true, selector: "ds-shell-page", inputs: { contentInset: "contentInset", contentSurface: "contentSurface", headerCapacity: "headerCapacity", headerPresentation: "headerPresentation", responsiveMode: "responsiveMode" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsShellPage, isStandalone: true, selector: "ds-shell-page", inputs: { compactContentInsetBlockStartSize: "compactContentInsetBlockStartSize", contentInset: "contentInset", contentInsetBlockStart: "contentInsetBlockStart", contentInsetBlockStartSize: "contentInsetBlockStartSize", contentSurface: "contentSurface", headerCapacity: "headerCapacity", headerPresentation: "headerPresentation", responsiveMode: "responsiveMode", scrollCompaction: "scrollCompaction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
21
|
};
|
|
22
22
|
DsShellPage = __decorate([
|
|
23
23
|
ProxyCmp({
|
|
24
24
|
defineCustomElementFn: defineDsShellPage,
|
|
25
|
-
inputs: ['contentInset', 'contentSurface', 'headerCapacity', 'headerPresentation', 'responsiveMode']
|
|
25
|
+
inputs: ['compactContentInsetBlockStartSize', 'contentInset', 'contentInsetBlockStart', 'contentInsetBlockStartSize', 'contentSurface', 'headerCapacity', 'headerPresentation', 'responsiveMode', 'scrollCompaction']
|
|
26
26
|
})
|
|
27
27
|
], DsShellPage);
|
|
28
28
|
export { DsShellPage };
|
|
@@ -33,6 +33,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
33
33
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
34
34
|
template: '<ng-content></ng-content>',
|
|
35
35
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
36
|
-
inputs: ['contentInset', 'contentSurface', 'headerCapacity', 'headerPresentation', 'responsiveMode'],
|
|
36
|
+
inputs: ['compactContentInsetBlockStartSize', 'contentInset', 'contentInsetBlockStart', 'contentInsetBlockStartSize', 'contentSurface', 'headerCapacity', 'headerPresentation', 'responsiveMode', 'scrollCompaction'],
|
|
37
37
|
}]
|
|
38
38
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
|
|
@@ -21,7 +21,7 @@ export declare class DsTable {
|
|
|
21
21
|
dsRowActivate: EventEmitter<DsTableCustomEvent<IDsTableTableRowActivateDetail>>;
|
|
22
22
|
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
23
23
|
static ɵfac: i0.ɵɵFactoryDeclaration<DsTable, never>;
|
|
24
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsTable, "ds-table", never, { "caption": { "alias": "caption"; "required": true; }; "captionVisibility": { "alias": "captionVisibility"; "required": false; }; "collapsedGroupIds": { "alias": "collapsedGroupIds"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "displayedCount": { "alias": "displayedCount"; "required": false; }; "emptyBody": { "alias": "emptyBody"; "required": false; }; "emptyCellLabel": { "alias": "emptyCellLabel"; "required": false; }; "emptyHeading": { "alias": "emptyHeading"; "required": false; }; "endOfResultsLabel": { "alias": "endOfResultsLabel"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorBody": { "alias": "errorBody"; "required": false; }; "errorHeading": { "alias": "errorHeading"; "required": false; }; "grouping": { "alias": "grouping"; "required": false; }; "groups": { "alias": "groups"; "required": false; }; "hasMore": { "alias": "hasMore"; "required": false; }; "lazyLoading": { "alias": "lazyLoading"; "required": false; }; "loadIdentity": { "alias": "loadIdentity"; "required": false; }; "loadMoreError": { "alias": "loadMoreError"; "required": false; }; "loadMoreLabel": { "alias": "loadMoreLabel"; "required": false; }; "loadMoreMode": { "alias": "loadMoreMode"; "required": false; }; "loadMoreThreshold": { "alias": "loadMoreThreshold"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingMore": { "alias": "loadingMore"; "required": false; }; "loadingMoreLabel": { "alias": "loadingMoreLabel"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "resultSummaryLabel": { "alias": "resultSummaryLabel"; "required": false; }; "retryLabel": { "alias": "retryLabel"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rowsLoadedLabel": { "alias": "rowsLoadedLabel"; "required": false; }; "scrollLabel": { "alias": "scrollLabel"; "required": false; }; "selectedRowIds": { "alias": "selectedRowIds"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; }; "sort": { "alias": "sort"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "totalCount": { "alias": "totalCount"; "required": false; }; }, { "dsSortChange": "dsSortChange"; "dsGroupingChange": "dsGroupingChange"; "dsGroupCollapseChange": "dsGroupCollapseChange"; "dsSelectionChange": "dsSelectionChange"; "dsLoadMore": "dsLoadMore"; "dsCellAction": "dsCellAction"; "dsRowActivate": "dsRowActivate"; }, never, ["*"], true, never>;
|
|
24
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsTable, "ds-table", never, { "caption": { "alias": "caption"; "required": true; }; "captionVisibility": { "alias": "captionVisibility"; "required": false; }; "collapsedGroupIds": { "alias": "collapsedGroupIds"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "displayedCount": { "alias": "displayedCount"; "required": false; }; "emptyBody": { "alias": "emptyBody"; "required": false; }; "emptyCellLabel": { "alias": "emptyCellLabel"; "required": false; }; "emptyHeading": { "alias": "emptyHeading"; "required": false; }; "endOfResultsLabel": { "alias": "endOfResultsLabel"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorBody": { "alias": "errorBody"; "required": false; }; "errorHeading": { "alias": "errorHeading"; "required": false; }; "fitViewport": { "alias": "fitViewport"; "required": false; }; "grouping": { "alias": "grouping"; "required": false; }; "groups": { "alias": "groups"; "required": false; }; "hasMore": { "alias": "hasMore"; "required": false; }; "height": { "alias": "height"; "required": false; }; "lazyLoading": { "alias": "lazyLoading"; "required": false; }; "loadIdentity": { "alias": "loadIdentity"; "required": false; }; "loadMoreError": { "alias": "loadMoreError"; "required": false; }; "loadMoreLabel": { "alias": "loadMoreLabel"; "required": false; }; "loadMoreMode": { "alias": "loadMoreMode"; "required": false; }; "loadMoreThreshold": { "alias": "loadMoreThreshold"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingMore": { "alias": "loadingMore"; "required": false; }; "loadingMoreLabel": { "alias": "loadingMoreLabel"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "resultSummaryLabel": { "alias": "resultSummaryLabel"; "required": false; }; "retryLabel": { "alias": "retryLabel"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rowsLoadedLabel": { "alias": "rowsLoadedLabel"; "required": false; }; "scrollLabel": { "alias": "scrollLabel"; "required": false; }; "selectedRowIds": { "alias": "selectedRowIds"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; }; "sort": { "alias": "sort"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "totalCount": { "alias": "totalCount"; "required": false; }; "viewportInsetBlockEnd": { "alias": "viewportInsetBlockEnd"; "required": false; }; "viewportInsetBlockStart": { "alias": "viewportInsetBlockStart"; "required": false; }; }, { "dsSortChange": "dsSortChange"; "dsGroupingChange": "dsGroupingChange"; "dsGroupCollapseChange": "dsGroupCollapseChange"; "dsSelectionChange": "dsSelectionChange"; "dsLoadMore": "dsLoadMore"; "dsCellAction": "dsCellAction"; "dsRowActivate": "dsRowActivate"; }, never, ["*"], true, never>;
|
|
25
25
|
}
|
|
26
26
|
export declare interface DsTable extends Components.DsTable {
|
|
27
27
|
dsSortChange: EventEmitter<DsTableCustomEvent<IDsTableTableSortChangeDetail>>;
|
package/dist/angular/ds-table.js
CHANGED
|
@@ -24,12 +24,12 @@ let DsTable = class DsTable {
|
|
|
24
24
|
this.el = r.nativeElement;
|
|
25
25
|
}
|
|
26
26
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsTable, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsTable, isStandalone: true, selector: "ds-table", inputs: { caption: "caption", captionVisibility: "captionVisibility", collapsedGroupIds: "collapsedGroupIds", columns: "columns", displayedCount: "displayedCount", emptyBody: "emptyBody", emptyCellLabel: "emptyCellLabel", emptyHeading: "emptyHeading", endOfResultsLabel: "endOfResultsLabel", error: "error", errorBody: "errorBody", errorHeading: "errorHeading", grouping: "grouping", groups: "groups", hasMore: "hasMore", lazyLoading: "lazyLoading", loadIdentity: "loadIdentity", loadMoreError: "loadMoreError", loadMoreLabel: "loadMoreLabel", loadMoreMode: "loadMoreMode", loadMoreThreshold: "loadMoreThreshold", loading: "loading", loadingMore: "loadingMore", loadingMoreLabel: "loadingMoreLabel", maxHeight: "maxHeight", resultSummaryLabel: "resultSummaryLabel", retryLabel: "retryLabel", rows: "rows", rowsLoadedLabel: "rowsLoadedLabel", scrollLabel: "scrollLabel", selectedRowIds: "selectedRowIds", selectionMode: "selectionMode", skeletonRows: "skeletonRows", sort: "sort", stickyHeader: "stickyHeader", totalCount: "totalCount" }, outputs: { dsSortChange: "dsSortChange", dsGroupingChange: "dsGroupingChange", dsGroupCollapseChange: "dsGroupCollapseChange", dsSelectionChange: "dsSelectionChange", dsLoadMore: "dsLoadMore", dsCellAction: "dsCellAction", dsRowActivate: "dsRowActivate" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsTable, isStandalone: true, selector: "ds-table", inputs: { caption: "caption", captionVisibility: "captionVisibility", collapsedGroupIds: "collapsedGroupIds", columns: "columns", displayedCount: "displayedCount", emptyBody: "emptyBody", emptyCellLabel: "emptyCellLabel", emptyHeading: "emptyHeading", endOfResultsLabel: "endOfResultsLabel", error: "error", errorBody: "errorBody", errorHeading: "errorHeading", fitViewport: "fitViewport", grouping: "grouping", groups: "groups", hasMore: "hasMore", height: "height", lazyLoading: "lazyLoading", loadIdentity: "loadIdentity", loadMoreError: "loadMoreError", loadMoreLabel: "loadMoreLabel", loadMoreMode: "loadMoreMode", loadMoreThreshold: "loadMoreThreshold", loading: "loading", loadingMore: "loadingMore", loadingMoreLabel: "loadingMoreLabel", maxHeight: "maxHeight", resultSummaryLabel: "resultSummaryLabel", retryLabel: "retryLabel", rows: "rows", rowsLoadedLabel: "rowsLoadedLabel", scrollLabel: "scrollLabel", selectedRowIds: "selectedRowIds", selectionMode: "selectionMode", skeletonRows: "skeletonRows", sort: "sort", stickyHeader: "stickyHeader", totalCount: "totalCount", viewportInsetBlockEnd: "viewportInsetBlockEnd", viewportInsetBlockStart: "viewportInsetBlockStart" }, outputs: { dsSortChange: "dsSortChange", dsGroupingChange: "dsGroupingChange", dsGroupCollapseChange: "dsGroupCollapseChange", dsSelectionChange: "dsSelectionChange", dsLoadMore: "dsLoadMore", dsCellAction: "dsCellAction", dsRowActivate: "dsRowActivate" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
28
28
|
};
|
|
29
29
|
DsTable = __decorate([
|
|
30
30
|
ProxyCmp({
|
|
31
31
|
defineCustomElementFn: defineDsTable,
|
|
32
|
-
inputs: ['caption', 'captionVisibility', 'collapsedGroupIds', 'columns', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'grouping', 'groups', 'hasMore', 'lazyLoading', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'resultSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'totalCount']
|
|
32
|
+
inputs: ['caption', 'captionVisibility', 'collapsedGroupIds', 'columns', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'fitViewport', 'grouping', 'groups', 'hasMore', 'height', 'lazyLoading', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'resultSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'totalCount', 'viewportInsetBlockEnd', 'viewportInsetBlockStart']
|
|
33
33
|
})
|
|
34
34
|
], DsTable);
|
|
35
35
|
export { DsTable };
|
|
@@ -40,7 +40,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
40
40
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
41
41
|
template: '<ng-content></ng-content>',
|
|
42
42
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
43
|
-
inputs: [{ name: 'caption', required: true }, 'captionVisibility', 'collapsedGroupIds', 'columns', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'grouping', 'groups', 'hasMore', 'lazyLoading', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'resultSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'totalCount'],
|
|
43
|
+
inputs: [{ name: 'caption', required: true }, 'captionVisibility', 'collapsedGroupIds', 'columns', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'fitViewport', 'grouping', 'groups', 'hasMore', 'height', 'lazyLoading', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'resultSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'totalCount', 'viewportInsetBlockEnd', 'viewportInsetBlockStart'],
|
|
44
44
|
outputs: ['dsSortChange', 'dsGroupingChange', 'dsGroupCollapseChange', 'dsSelectionChange', 'dsLoadMore', 'dsCellAction', 'dsRowActivate'],
|
|
45
45
|
}]
|
|
46
46
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsSortChange: [{
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p-
|
|
1
|
+
import{A as o,d as s}from"./p-BxR8omPQ.js";const t=o;const m=s;export{t as DsAgentQuestionnaire,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-questionnaire.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as i}from"./p-BRze4tRe.js";import{d
|
|
1
|
+
import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as i}from"./p-BRze4tRe.js";import{d}from"./p-BxR8omPQ.js";import{d as r}from"./p-NQOI5gN1.js";import{d as n}from"./p-CqDJRVT8.js";import{d as m}from"./p-B69Re7HW.js";import{d as c}from"./p-dEouiXJ8.js";import{d as l}from"./p-CnUq7E8S.js";import{d as f}from"./p-DStd98dM.js";import{d as u}from"./p-CKo3OFG1.js";import{d as p}from"./p-D5sIwLjA.js";import{d as b}from"./p-C8U5BsJf.js";import{d as k}from"./p-Ca-I2UnB.js";import{d as h}from"./p-D9FdOR_m.js";import{d as g}from"./p-00or0yGw.js";import{d as y}from"./p-C891ueIx.js";import{d as E}from"./p-Dhx_3_tf.js";import{d as w}from"./p-DyqLVdJp.js";const j=()=>`.sc-ds-agent-response-h{display:block;width:100%;--ds-prose-text-max-inline-size:var(--dimension-panel-width-lg);-webkit-user-select:none;user-select:none}.agent-response.sc-ds-agent-response{display:grid;gap:var(--dimension-space-150);min-width:0;width:100%;-webkit-user-select:none;user-select:none}`;const x=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.messageId="";this.author="";this.showAuthor=true;this.timestamp="";this.parts=[];this.renderMode="parts";this.streaming=false;this.metadataVisibility="always"}renderPart(s){switch(s.type){case"markdown":return t("ds-markdown",{key:s.id,content:s.content,streaming:s.state==="streaming"});case"activity":return t("ds-agent-activity",{key:s.id,items:s.items});case"tool":return t("ds-agent-tool-call",{key:s.id,name:s.name,label:s.label,state:s.state,input:s.input,output:s.output,error:s.error});case"attachments":return t("ds-attachment-list",{key:s.id,items:s.items});case"sources":return t("ds-agent-source-list",{key:s.id,items:s.items});case"questionnaire":return t("ds-agent-questionnaire",{key:s.id,requestId:s.requestId,questions:s.questions,answers:s.answers,status:"answered"})}}render(){return t(a,{key:"a478c74f2609ad1445b867695dc2714d30d1d5a7"},t("ds-message",{key:"fe201531d131f2699a0e014702836b0e62e095a2",messageId:this.messageId,direction:"incoming",author:this.author,showAuthor:this.showAuthor,timestamp:this.timestamp,streaming:this.streaming,metadataVisibility:this.metadataVisibility},t("div",{key:"34d428e08d3f2a58e3e60b18e7cc3133b5defe90",class:"agent-response"},this.renderMode==="composed"?t("slot",null):this.parts.map((s=>this.renderPart(s)))),t("slot",{key:"94c09f5cd1727f3d1aced38f7cd0d7365005e899",name:"footer",slot:"footer"}),t("slot",{key:"1dc0f5d4d202377dfd3e4a8f396a4fbf29c61f12",name:"metadata-actions",slot:"metadata-actions"}),t("slot",{key:"ab5df79a72f189c4c02567d0fd2fa9cc4c44b703",name:"actions",slot:"actions"})))}static get style(){return j()}},[262,"ds-agent-response",{messageId:[1,"message-id"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],parts:[16],renderMode:[1,"render-mode"],streaming:[4],metadataVisibility:[1,"metadata-visibility"]}]);function q(){if(typeof customElements==="undefined"){return}const s=["ds-agent-response","ds-agent-activity","ds-agent-questionnaire","ds-agent-source-list","ds-agent-tool-call","ds-attachment-list","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-code-block","ds-icon","ds-loader","ds-markdown","ds-message","ds-radio","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-agent-response":if(!customElements.get(o(s))){customElements.define(o(s),x)}break;case"ds-agent-activity":if(!customElements.get(o(s))){i()}break;case"ds-agent-questionnaire":if(!customElements.get(o(s))){d()}break;case"ds-agent-source-list":if(!customElements.get(o(s))){r()}break;case"ds-agent-tool-call":if(!customElements.get(o(s))){n()}break;case"ds-attachment-list":if(!customElements.get(o(s))){m()}break;case"ds-badge":if(!customElements.get(o(s))){c()}break;case"ds-button-filled":if(!customElements.get(o(s))){l()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){f()}break;case"ds-checkbox":if(!customElements.get(o(s))){u()}break;case"ds-code-block":if(!customElements.get(o(s))){p()}break;case"ds-icon":if(!customElements.get(o(s))){b()}break;case"ds-loader":if(!customElements.get(o(s))){k()}break;case"ds-markdown":if(!customElements.get(o(s))){h()}break;case"ds-message":if(!customElements.get(o(s))){g()}break;case"ds-radio":if(!customElements.get(o(s))){y()}break;case"ds-text":if(!customElements.get(o(s))){E()}break;case"ds-tooltip":if(!customElements.get(o(s))){w()}break}}))}q();const v=x;const I=q;export{v as DsAgentResponse,I as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-response.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as n,H as e,c as r,h as a,a as s,t as o}from"./index.js";import{d as i}from"./p-dEouiXJ8.js";import{d}from"./p-DStd98dM.js";import{d as t}from"./p-C8U5BsJf.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as b}from"./p-Dhx_3_tf.js";import{d as l}from"./p-BH_lVRgp.js";import{a as h,T as g}from"./p-CXduurfd.js";const u=()=>`@media (forced-colors: active){.sc-ds-banner:root,.sc-ds-banner-h,.ds-forced-colors-scope.sc-ds-banner{--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--lg.sc-ds-banner,.ds-control--lg.sc-ds-banner-h,.ds-control--md.sc-ds-banner-h,.ds-control--md.sc-ds-banner,.ds-control--sm.sc-ds-banner-h,.ds-control--sm.sc-ds-banner,.ds-control--xs.sc-ds-banner-h,.ds-control--xs.sc-ds-banner{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-banner-h,.ds-control--lg.sc-ds-banner{--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-banner-h,.ds-control--md.sc-ds-banner{--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-banner-h,.ds-control--sm.sc-ds-banner{--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-banner-h,.ds-control--xs.sc-ds-banner{--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-banner{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-banner{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-banner{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-banner,.ds-chrome-header__trailing.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-banner{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-banner{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-banner{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-banner{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-banner,.ds-chrome-header__description.sc-ds-banner{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-banner{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-banner .ds-chrome-header__description.sc-ds-banner{flex:1 1 var(--dimension-card-width-xs)}.sc-ds-banner-h{display:grid;overflow:hidden;min-width:0;grid-template-rows:0fr;transition:grid-template-rows var(--effect-animation-duration-short-3) var(--_banner-motion-easing);--ds-banner-background:var(--color-background-faint-neutral);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary);--_banner-motion-easing:var(--effect-animation-easing-ease-in-out, ease)}.banner--open.sc-ds-banner-h{grid-template-rows:1fr;--_banner-motion-easing:var(--effect-animation-easing-ease-out, ease-out)}.banner--closing.sc-ds-banner-h{--_banner-motion-easing:var(--effect-animation-easing-ease-in, ease-in)}.banner--hidden.sc-ds-banner-h{display:none}.banner-overflow.sc-ds-banner{min-height:0;overflow:visible}.banner-surface.sc-ds-banner{display:flex;position:relative;width:100%;padding-inline-end:calc(var(--dimension-size-400) + var(--dimension-space-200));color:var(--ds-banner-description);background-color:var(--ds-banner-background);border-bottom:var(--dimension-stroke-width-012) solid var(--ds-banner-border);transform:translateY(-100%);transition:transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing)}.banner--open.sc-ds-banner-h .banner-surface.sc-ds-banner{transform:translateY(0)}.banner-copy.sc-ds-banner{flex-basis:var(--dimension-card-width-sm)}.banner--orientation-horizontal.sc-ds-banner-h .banner-surface.sc-ds-banner{flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h .banner-copy.sc-ds-banner{flex-basis:100%}.banner-copy-flow.sc-ds-banner{box-sizing:border-box;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));color:var(--ds-banner-description)}.banner-heading.sc-ds-banner{display:inline-block;width:auto;max-width:100%;margin-inline-end:var(--dimension-space-100);vertical-align:baseline;color:var(--ds-banner-heading)}.banner-description.sc-ds-banner{color:var(--ds-banner-description)}.banner-actions.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;flex-wrap:nowrap;min-width:0;gap:var(--dimension-space-100)}.banner-actions.sc-ds-banner slot.sc-ds-banner{display:contents}.banner-actions.sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions .sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions.sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3),.banner-actions .sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3){display:none}.banner-actions--empty.sc-ds-banner{display:none}.banner-trailing.sc-ds-banner{align-self:flex-start;flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h:not(.banner--has-actions) .banner-trailing.sc-ds-banner{display:contents}.banner--orientation-vertical.banner--has-actions.sc-ds-banner-h .banner-trailing.sc-ds-banner{margin-inline:var(--dimension-space-100) auto;padding-block-end:var(--dimension-space-100);box-sizing:border-box}.banner--orientation-vertical.sc-ds-banner-h .banner-description.sc-ds-banner{display:block}.banner--orientation-vertical.sc-ds-banner-h .banner-heading.sc-ds-banner+.banner-description.sc-ds-banner{margin-block-start:var(--dimension-space-050)}.banner-close.sc-ds-banner{flex:0 0 auto}.banner-dismiss.sc-ds-banner{position:absolute;inset-block-start:var(--dimension-space-100);inset-inline-end:var(--dimension-space-100)}.banner--intent-neutral.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-neutral)}.banner--intent-brand.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-brand)}.banner--intent-positive.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-positive)}.banner--intent-warning.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-warning)}.banner--intent-caution.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-caution)}.banner--intent-negative.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-negative)}.banner--contrast-faint.sc-ds-banner-h{--ds-banner-background:var(--ds-banner-faint-background);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary)}.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-neutral);--ds-banner-heading:var(--color-foreground-on-medium-background-primary);--ds-banner-description:var(--color-foreground-on-medium-background-secondary);--ds-banner-border:var(--color-border-on-medium-background-tertiary)}.banner--intent-brand.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-brand)}.banner--intent-positive.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-positive)}.banner--intent-warning.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-warning)}.banner--intent-caution.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-caution)}.banner--intent-negative.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-negative)}.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-neutral);--ds-banner-heading:var(--color-foreground-on-strong-background-primary);--ds-banner-description:var(--color-foreground-on-strong-background-secondary);--ds-banner-border:var(--color-border-on-strong-background-tertiary)}.banner--intent-brand.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-brand)}.banner--intent-positive.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-positive)}.banner--intent-warning.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-warning)}.banner--intent-caution.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-caution)}.banner--intent-negative.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-negative)}.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-neutral);--ds-banner-heading:var(--color-foreground-on-bold-background-primary);--ds-banner-description:var(--color-foreground-on-bold-background-secondary);--ds-banner-border:var(--color-border-on-bold-background-tertiary)}.banner--intent-brand.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-brand)}.banner--intent-positive.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-positive)}.banner--intent-warning.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-warning)}.banner--intent-caution.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-caution)}.banner--intent-negative.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-negative)}@media (prefers-reduced-motion: reduce){.sc-ds-banner-h,.banner-surface.sc-ds-banner{transition:none}}@media (forced-colors: active){.banner-surface.sc-ds-banner{color:var(--ds-forced-color-content);background-color:var(--ds-forced-color-surface);border-bottom-color:var(--ds-forced-color-content)}.banner-heading.sc-ds-banner,.banner-description.sc-ds-banner{color:var(--ds-forced-color-content)}}`;const m=n(class n extends e{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClose=r(this,"dsClose");this.dsAfterClose=r(this,"dsAfterClose");this.heading="";this.intent="neutral";this.contrast="faint";this.orientation="horizontal";this.open=true;this.dismissLabel="Dismiss banner";this.announcement="none";this.rendered=false;this.phase="closed";this.hasActions=false;this.loaded=false;this.transitionTimer=null;this.openFrame=null;this.closePending=false}componentWillLoad(){this.rendered=this.open}componentDidLoad(){this.loaded=true;this.updateActionsPresence();if(this.open)this.startOpen()}disconnectedCallback(){this.clearTransitionWork()}onOpenChange(n){if(!this.loaded)return;if(n)this.startOpen();else this.startClose()}get closeMotionMs(){return h(g.motionShort3,g.animationDurationShort3)}clearTransitionWork(){if(this.transitionTimer)clearTimeout(this.transitionTimer);if(this.openFrame!==null)cancelAnimationFrame(this.openFrame);this.transitionTimer=null;this.openFrame=null}startOpen(){this.clearTransitionWork();this.closePending=false;this.rendered=true;this.phase="closed";this.openFrame=requestAnimationFrame((()=>{this.openFrame=null;if(this.open)this.phase="open"}))}startClose(){this.clearTransitionWork();if(!this.rendered||this.phase==="closed"){this.rendered=false;return}this.closePending=true;this.phase="closing";const n=this.closeMotionMs;if(n<=0){this.finishClose();return}this.transitionTimer=setTimeout((()=>{this.transitionTimer=null;this.finishClose()}),n)}finishClose(){if(this.open||!this.closePending)return;this.closePending=false;this.rendered=false;this.phase="closed";this.dsAfterClose.emit()}updateActionsPresence(n){const e=n?n.assignedElements().filter((n=>n.tagName==="DS-BUTTON-UNFILLED")):Array.from(this.el.querySelectorAll('ds-button-unfilled[slot="actions"]'));this.hasActions=e.length>0}requestClose(n){if(!this.open||this.phase==="closing")return;this.dsClose.emit(n.detail)}get role(){if(this.announcement==="polite")return"status";if(this.announcement==="assertive")return"alert";return undefined}get ariaLive(){return this.announcement==="none"?undefined:this.announcement}render(){const n=this.phase==="closing";const e={banner:true,"banner--open":this.phase==="open","banner--closing":n,"banner--hidden":!this.rendered,"banner--has-actions":this.hasActions,[`banner--orientation-${this.orientation}`]:true,[`banner--intent-${this.intent}`]:true,[`banner--contrast-${this.contrast}`]:true};return a(s,{key:"804b90a941a8963cef638db6811faf399f479ff7",class:e},this.rendered&&a("div",{key:"a613bfd482e12f7d707d3ea1732d4f3e7cf57350",class:"banner-overflow"},a("section",{key:"9f98ebdae3487938ae354087b01323c27dd438f8",class:"banner-surface ds-chrome-header ds-chrome-header--wrapping",role:this.role,"aria-live":this.ariaLive,"aria-atomic":this.announcement==="none"?undefined:"true","aria-hidden":n?"true":undefined,inert:n?true:undefined,"data-phase":this.phase},a("div",{key:"9f65def287a9a199fa923a81c7186e6435c404ec",class:"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md"},a("ds-text",{key:"b8cfa1e68b160eea4e2b7d8bf0c4ec6ef8066e75",class:"banner-copy-flow",as:"div",variant:"text-body-medium",color:"inherit"},this.heading&&a("ds-text",{key:"5fa61195f23d298727ff5f96e368ff24d6ed19a2",class:"banner-heading",as:"span",variant:"text-title-small",color:"inherit"},this.heading),a("span",{key:"fe5443ce3204552de06dfcefb799ff184c536a05",class:"banner-description"},this.description))),a("div",{key:"728a07a6968e81b6987875671d9f29e312f59304",class:"banner-trailing ds-chrome-header__trailing"},a("div",{key:"60bcb027ab50ce018d0794c3bbedb5a305e48939",class:{"banner-actions":true,"banner-actions--empty":!this.hasActions}},a("slot",{key:"d0b423ddfeac2a9b385a3f6e68fb597c168a0c44",name:"actions",onSlotchange:n=>this.updateActionsPresence(n.currentTarget)})),a("div",{key:"0a494df161ea1b794f444255bd4a64a8169588c7",class:"banner-dismiss"},a("ds-tooltip",{key:"740fa8199363dc7e34c2ab2db01d8dc96d0b24e2",label:this.dismissLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{key:"cf407d5e08a5e5bacfe53c4c42129adc01f6bd76",class:"banner-close",variant:"icon",icon:"Cross",size:"md",type:"button",background:this.contrast,"aria-label":this.dismissLabel,hasBorder:false,activeFill:false,onDsClick:n=>this.requestClose(n)})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return u()}},[262,"ds-banner",{description:[1],heading:[1],intent:[513],contrast:[513],orientation:[513],open:[516],dismissLabel:[1,"dismiss-label"],announcement:[1],rendered:[32],phase:[32],hasActions:[32]},undefined,{open:[{onOpenChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const n=["ds-banner","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];n.forEach((n=>{switch(n){case"ds-banner":if(!customElements.get(o(n))){customElements.define(o(n),m)}break;case"ds-badge":if(!customElements.get(o(n))){i()}break;case"ds-button-unfilled":if(!customElements.get(o(n))){d()}break;case"ds-icon":if(!customElements.get(o(n))){t()}break;case"ds-loader":if(!customElements.get(o(n))){c()}break;case"ds-text":if(!customElements.get(o(n))){b()}break;case"ds-tooltip":if(!customElements.get(o(n))){l()}break}}))}f();const p=m;const v=f;export{p as DsBanner,v as defineCustomElement};
|
|
1
|
+
import{p as n,H as e,c as r,h as a,a as s,t as o}from"./index.js";import{d as i}from"./p-dEouiXJ8.js";import{d}from"./p-DStd98dM.js";import{d as t}from"./p-C8U5BsJf.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as b}from"./p-Dhx_3_tf.js";import{d as l}from"./p-DyqLVdJp.js";import{a as h,T as u}from"./p-CXduurfd.js";const g=()=>`@media (forced-colors: active){.sc-ds-banner:root,.sc-ds-banner-h,.ds-forced-colors-scope.sc-ds-banner{--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--lg.sc-ds-banner,.ds-control--lg.sc-ds-banner-h,.ds-control--md.sc-ds-banner-h,.ds-control--md.sc-ds-banner,.ds-control--sm.sc-ds-banner-h,.ds-control--sm.sc-ds-banner,.ds-control--xs.sc-ds-banner-h,.ds-control--xs.sc-ds-banner{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-banner-h,.ds-control--lg.sc-ds-banner{--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-banner-h,.ds-control--md.sc-ds-banner{--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-banner-h,.ds-control--sm.sc-ds-banner{--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-banner-h,.ds-control--xs.sc-ds-banner{--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-banner{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-banner{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-banner{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-banner,.ds-chrome-header__trailing.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-banner{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-banner{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-banner{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-banner{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-banner,.ds-chrome-header__description.sc-ds-banner{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-banner{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-banner .ds-chrome-header__description.sc-ds-banner{flex:1 1 var(--dimension-card-width-xs)}.sc-ds-banner-h{display:grid;overflow:hidden;min-width:0;grid-template-rows:0fr;transition:grid-template-rows var(--effect-animation-duration-short-3) var(--_banner-motion-easing);--ds-banner-background:var(--color-background-faint-neutral);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary);--_banner-motion-easing:var(--effect-animation-easing-ease-in-out, ease)}.banner--open.sc-ds-banner-h{grid-template-rows:1fr;--_banner-motion-easing:var(--effect-animation-easing-ease-out, ease-out)}.banner--closing.sc-ds-banner-h{--_banner-motion-easing:var(--effect-animation-easing-ease-in, ease-in)}.banner--hidden.sc-ds-banner-h{display:none}.banner-overflow.sc-ds-banner{min-height:0;overflow:visible}.banner-surface.sc-ds-banner{display:flex;position:relative;width:100%;padding-inline-end:calc(var(--dimension-size-400) + var(--dimension-space-200));color:var(--ds-banner-description);background-color:var(--ds-banner-background);border-bottom:var(--dimension-stroke-width-012) solid var(--ds-banner-border);transform:translateY(-100%);transition:transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing)}.banner--open.sc-ds-banner-h .banner-surface.sc-ds-banner{transform:translateY(0)}.banner-copy.sc-ds-banner{flex-basis:var(--dimension-card-width-sm)}.banner--orientation-horizontal.sc-ds-banner-h .banner-surface.sc-ds-banner{flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h .banner-copy.sc-ds-banner{flex-basis:100%}.banner-copy-flow.sc-ds-banner{box-sizing:border-box;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));color:var(--ds-banner-description)}.banner-heading.sc-ds-banner{display:inline-block;width:auto;max-width:100%;margin-inline-end:var(--dimension-space-100);vertical-align:baseline;color:var(--ds-banner-heading)}.banner-description.sc-ds-banner{color:var(--ds-banner-description)}.banner-actions.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;flex-wrap:nowrap;min-width:0;gap:var(--dimension-space-100)}.banner-actions.sc-ds-banner slot.sc-ds-banner{display:contents}.banner-actions.sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions .sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions.sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3),.banner-actions .sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3){display:none}.banner-actions--empty.sc-ds-banner{display:none}.banner-trailing.sc-ds-banner{align-self:flex-start;flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h:not(.banner--has-actions) .banner-trailing.sc-ds-banner{display:contents}.banner--orientation-vertical.banner--has-actions.sc-ds-banner-h .banner-trailing.sc-ds-banner{margin-inline:var(--dimension-space-100) auto;padding-block-end:var(--dimension-space-100);box-sizing:border-box}.banner--orientation-vertical.sc-ds-banner-h .banner-description.sc-ds-banner{display:block}.banner--orientation-vertical.sc-ds-banner-h .banner-heading.sc-ds-banner+.banner-description.sc-ds-banner{margin-block-start:var(--dimension-space-050)}.banner-close.sc-ds-banner{flex:0 0 auto}.banner-dismiss.sc-ds-banner{position:absolute;inset-block-start:var(--dimension-space-100);inset-inline-end:var(--dimension-space-100)}.banner--intent-neutral.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-neutral)}.banner--intent-brand.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-brand)}.banner--intent-positive.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-positive)}.banner--intent-warning.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-warning)}.banner--intent-caution.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-caution)}.banner--intent-negative.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-negative)}.banner--contrast-faint.sc-ds-banner-h{--ds-banner-background:var(--ds-banner-faint-background);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary)}.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-neutral);--ds-banner-heading:var(--color-foreground-on-medium-background-primary);--ds-banner-description:var(--color-foreground-on-medium-background-secondary);--ds-banner-border:var(--color-border-on-medium-background-tertiary)}.banner--intent-brand.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-brand)}.banner--intent-positive.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-positive)}.banner--intent-warning.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-warning)}.banner--intent-caution.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-caution)}.banner--intent-negative.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-negative)}.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-neutral);--ds-banner-heading:var(--color-foreground-on-strong-background-primary);--ds-banner-description:var(--color-foreground-on-strong-background-secondary);--ds-banner-border:var(--color-border-on-strong-background-tertiary)}.banner--intent-brand.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-brand)}.banner--intent-positive.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-positive)}.banner--intent-warning.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-warning)}.banner--intent-caution.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-caution)}.banner--intent-negative.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-negative)}.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-neutral);--ds-banner-heading:var(--color-foreground-on-bold-background-primary);--ds-banner-description:var(--color-foreground-on-bold-background-secondary);--ds-banner-border:var(--color-border-on-bold-background-tertiary)}.banner--intent-brand.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-brand)}.banner--intent-positive.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-positive)}.banner--intent-warning.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-warning)}.banner--intent-caution.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-caution)}.banner--intent-negative.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-negative)}@media (prefers-reduced-motion: reduce){.sc-ds-banner-h,.banner-surface.sc-ds-banner{transition:none}}@media (forced-colors: active){.banner-surface.sc-ds-banner{color:var(--ds-forced-color-content);background-color:var(--ds-forced-color-surface);border-bottom-color:var(--ds-forced-color-content)}.banner-heading.sc-ds-banner,.banner-description.sc-ds-banner{color:var(--ds-forced-color-content)}}`;const m=n(class n extends e{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClose=r(this,"dsClose");this.dsAfterClose=r(this,"dsAfterClose");this.heading="";this.intent="neutral";this.contrast="faint";this.orientation="horizontal";this.open=true;this.dismissLabel="Dismiss banner";this.announcement="none";this.rendered=false;this.phase="closed";this.hasActions=false;this.loaded=false;this.transitionTimer=null;this.openFrame=null;this.closePending=false}componentWillLoad(){this.rendered=this.open}componentDidLoad(){this.loaded=true;this.updateActionsPresence();if(this.open)this.startOpen()}disconnectedCallback(){this.clearTransitionWork()}onOpenChange(n){if(!this.loaded)return;if(n)this.startOpen();else this.startClose()}get closeMotionMs(){return h(u.motionShort3,u.animationDurationShort3)}clearTransitionWork(){if(this.transitionTimer)clearTimeout(this.transitionTimer);if(this.openFrame!==null)cancelAnimationFrame(this.openFrame);this.transitionTimer=null;this.openFrame=null}startOpen(){this.clearTransitionWork();this.closePending=false;this.rendered=true;this.phase="closed";this.openFrame=requestAnimationFrame((()=>{this.openFrame=null;if(this.open)this.phase="open"}))}startClose(){this.clearTransitionWork();if(!this.rendered||this.phase==="closed"){this.rendered=false;return}this.closePending=true;this.phase="closing";const n=this.closeMotionMs;if(n<=0){this.finishClose();return}this.transitionTimer=setTimeout((()=>{this.transitionTimer=null;this.finishClose()}),n)}finishClose(){if(this.open||!this.closePending)return;this.closePending=false;this.rendered=false;this.phase="closed";this.dsAfterClose.emit()}updateActionsPresence(n){const e=n?n.assignedElements().filter((n=>n.tagName==="DS-BUTTON-UNFILLED")):Array.from(this.el.querySelectorAll('ds-button-unfilled[slot="actions"]'));this.hasActions=e.length>0}requestClose(n){if(!this.open||this.phase==="closing")return;this.dsClose.emit(n.detail)}get role(){if(this.announcement==="polite")return"status";if(this.announcement==="assertive")return"alert";return undefined}get ariaLive(){return this.announcement==="none"?undefined:this.announcement}render(){const n=this.phase==="closing";const e={banner:true,"banner--open":this.phase==="open","banner--closing":n,"banner--hidden":!this.rendered,"banner--has-actions":this.hasActions,[`banner--orientation-${this.orientation}`]:true,[`banner--intent-${this.intent}`]:true,[`banner--contrast-${this.contrast}`]:true};return a(s,{key:"804b90a941a8963cef638db6811faf399f479ff7",class:e},this.rendered&&a("div",{key:"a613bfd482e12f7d707d3ea1732d4f3e7cf57350",class:"banner-overflow"},a("section",{key:"9f98ebdae3487938ae354087b01323c27dd438f8",class:"banner-surface ds-chrome-header ds-chrome-header--wrapping",role:this.role,"aria-live":this.ariaLive,"aria-atomic":this.announcement==="none"?undefined:"true","aria-hidden":n?"true":undefined,inert:n?true:undefined,"data-phase":this.phase},a("div",{key:"9f65def287a9a199fa923a81c7186e6435c404ec",class:"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md"},a("ds-text",{key:"b8cfa1e68b160eea4e2b7d8bf0c4ec6ef8066e75",class:"banner-copy-flow",as:"div",variant:"text-body-medium",color:"inherit"},this.heading&&a("ds-text",{key:"5fa61195f23d298727ff5f96e368ff24d6ed19a2",class:"banner-heading",as:"span",variant:"text-title-small",color:"inherit"},this.heading),a("span",{key:"fe5443ce3204552de06dfcefb799ff184c536a05",class:"banner-description"},this.description))),a("div",{key:"728a07a6968e81b6987875671d9f29e312f59304",class:"banner-trailing ds-chrome-header__trailing"},a("div",{key:"60bcb027ab50ce018d0794c3bbedb5a305e48939",class:{"banner-actions":true,"banner-actions--empty":!this.hasActions}},a("slot",{key:"d0b423ddfeac2a9b385a3f6e68fb597c168a0c44",name:"actions",onSlotchange:n=>this.updateActionsPresence(n.currentTarget)})),a("div",{key:"0a494df161ea1b794f444255bd4a64a8169588c7",class:"banner-dismiss"},a("ds-tooltip",{key:"740fa8199363dc7e34c2ab2db01d8dc96d0b24e2",label:this.dismissLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{key:"cf407d5e08a5e5bacfe53c4c42129adc01f6bd76",class:"banner-close",variant:"icon",icon:"Cross",size:"md",type:"button",background:this.contrast,"aria-label":this.dismissLabel,hasBorder:false,activeFill:false,onDsClick:n=>this.requestClose(n)})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return g()}},[262,"ds-banner",{description:[1],heading:[1],intent:[513],contrast:[513],orientation:[513],open:[516],dismissLabel:[1,"dismiss-label"],announcement:[1],rendered:[32],phase:[32],hasActions:[32]},undefined,{open:[{onOpenChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const n=["ds-banner","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];n.forEach((n=>{switch(n){case"ds-banner":if(!customElements.get(o(n))){customElements.define(o(n),m)}break;case"ds-badge":if(!customElements.get(o(n))){i()}break;case"ds-button-unfilled":if(!customElements.get(o(n))){d()}break;case"ds-icon":if(!customElements.get(o(n))){t()}break;case"ds-loader":if(!customElements.get(o(n))){c()}break;case"ds-text":if(!customElements.get(o(n))){b()}break;case"ds-tooltip":if(!customElements.get(o(n))){l()}break}}))}f();const p=m;const v=f;export{p as DsBanner,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-banner.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as
|
|
1
|
+
import{B as o,d as s}from"./p-BPbE-Kbl.js";const t=o;const p=s;export{t as DsBarNav,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as o,d as s}from"./p-
|
|
1
|
+
import{B as o,d as s}from"./p-BMAZWEDa.js";const t=o;const a=s;export{t as DsBarTitle,a as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-title.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as o,c as i,h as e,a as r,t}from"./index.js";import{d as a}from"./p-dEouiXJ8.js";import{d
|
|
1
|
+
import{p as s,H as o,c as i,h as e,a as r,t}from"./index.js";import{d as a}from"./p-dEouiXJ8.js";import{d}from"./p-CnUq7E8S.js";import{d as n}from"./p-DStd98dM.js";import{d as l}from"./p-C8U5BsJf.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as m}from"./p-CMbcRN92.js";import{d as b}from"./p-B94M62Tx.js";import{d as h}from"./p-m5CSrx_s.js";import{d as f}from"./p-CdKz-QT2.js";import{d as w}from"./p-GWUTrIlk.js";import{d as p}from"./p-D4j0deyd.js";import{d as u}from"./p-Dhx_3_tf.js";import{d as k}from"./p-DyqLVdJp.js";const g=()=>`.ds-control--lg.sc-ds-bar-workflow,.ds-control--lg.sc-ds-bar-workflow-h,.ds-control--md.sc-ds-bar-workflow-h,.ds-control--md.sc-ds-bar-workflow,.ds-control--sm.sc-ds-bar-workflow-h,.ds-control--sm.sc-ds-bar-workflow,.ds-control--xs.sc-ds-bar-workflow-h,.ds-control--xs.sc-ds-bar-workflow{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-workflow-h,.ds-control--lg.sc-ds-bar-workflow{--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-workflow-h,.ds-control--md.sc-ds-bar-workflow{--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-workflow-h,.ds-control--sm.sc-ds-bar-workflow{--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-workflow-h,.ds-control--xs.sc-ds-bar-workflow{--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-space--sm.sc-ds-bar-workflow-h,.ds-chrome-space--sm.sc-ds-bar-workflow{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-workflow-h,.ds-chrome-space--md.sc-ds-bar-workflow{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-workflow-h,.ds-chrome-space--lg.sc-ds-bar-workflow{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-workflow-h,.ds-chrome-row.sc-ds-bar-workflow,.ds-chrome-column.sc-ds-bar-workflow-h,.ds-chrome-column.sc-ds-bar-workflow,.ds-chrome-grid.sc-ds-bar-workflow-h,.ds-chrome-grid.sc-ds-bar-workflow{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-bar-workflow-h,.ds-chrome-row.sc-ds-bar-workflow{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-workflow-h,.ds-chrome-column.sc-ds-bar-workflow{flex-direction:column}.ds-chrome-grid.sc-ds-bar-workflow-h,.ds-chrome-grid.sc-ds-bar-workflow{display:grid;align-items:center}.sc-ds-bar-workflow-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-bold-brand)}.bar-workflow.sc-ds-bar-workflow{justify-content:space-between;height:var(--dimension-size-600);min-width:0;background:var(--color-background-bold-brand)}.bar-workflow__identity.sc-ds-bar-workflow{display:flex;flex:1 1 auto;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-400);min-width:0}.bar-workflow__heading.sc-ds-bar-workflow{display:inline-flex;flex:1 1 auto;align-items:center;width:auto;min-width:0;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;user-select:none}.bar-workflow__actions.sc-ds-bar-workflow{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}`;const v=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsExit=i(this,"dsExit");this.dsStepChange=i(this,"dsStepChange");this.dsSubmit=i(this,"dsSubmit");this.steps=[];this.value="";this.exitLabel="Exit";this.exitAriaLabel="Exit workflow";this.previousLabel="Previous step";this.nextLabel="Next step";this.submitAction={label:"Save",type:"submit"};this.isNextInactive=false;this.responsiveMode="desktop";this.handlePrevious=()=>{if(this.previousStep&&!this.previousStep.isInactive){this.dsStepChange.emit(this.previousStep.id)}};this.handleNext=()=>{if(this.nextStep&&!this.isNextInactive&&!this.nextStep.isInactive){this.dsStepChange.emit(this.nextStep.id)}}}get currentIndex(){const s=this.steps.findIndex((s=>s.id===this.value));return s>=0?s:0}get previousStep(){return this.steps[this.currentIndex-1]??null}get nextStep(){return this.steps[this.currentIndex+1]??null}get isLastStep(){return this.steps.length<=1||this.currentIndex===this.steps.length-1}get resolvedHeading(){if(this.steps.length<=1)return this.heading;return`${this.heading} · ${this.currentIndex+1}/${this.steps.length}`}renderSubmit(s){const o=this.submitAction;return e("ds-tooltip",{slot:s,label:o.label,side:"bottom",size:"sm"},e("ds-button-filled",{class:"bar-workflow__submit",variant:"icon",icon:"Check",label:o.label,"aria-label":o.label,intent:"brand",contrast:"faint",background:"bold",size:"md",type:o.type??"submit",isInactive:o.isInactive,isLoading:o.isLoading,onDsClick:s=>this.dsSubmit.emit(s.detail)}))}renderMobile(){return e("ds-mobile-header",{class:"bar-workflow__mobile",heading:this.resolvedHeading,tone:"brand"},e("ds-tooltip",{slot:"leading",label:this.exitLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{class:"bar-workflow__exit",variant:"icon",icon:"Cross","aria-label":this.exitAriaLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,onDsClick:s=>this.dsExit.emit(s.detail)})),this.previousStep?e("ds-tooltip",{slot:"trailing",label:this.previousLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{class:"bar-workflow__previous",variant:"icon",icon:"ChevronLeft","aria-label":this.previousLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,isInactive:this.previousStep.isInactive,onDsClick:this.handlePrevious})):null,this.isLastStep?this.renderSubmit("trailing"):e("ds-tooltip",{slot:"trailing",label:this.nextLabel,side:"bottom",size:"sm"},e("ds-button-filled",{class:"bar-workflow__next",variant:"icon",icon:"ChevronRight",label:this.nextLabel,"aria-label":this.nextLabel,intent:"brand",contrast:"faint",background:"bold",size:"md",type:"button",isInactive:this.isNextInactive||this.nextStep?.isInactive,onDsClick:this.handleNext})))}renderDesktop(){return e("div",{class:"bar-workflow ds-chrome-row ds-chrome-space--md"},e("div",{class:"bar-workflow__identity"},e("ds-tooltip",{label:this.exitLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{class:"bar-workflow__exit",variant:"icon",icon:"Cross","aria-label":this.exitAriaLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,onDsClick:s=>this.dsExit.emit(s.detail)})),e("ds-text",{class:"bar-workflow__heading ds-control--md",variant:"text-title-small",emphasis:true,color:"on-bold",as:"h1",lineTruncation:1},this.resolvedHeading)),e("div",{class:"bar-workflow__actions"},this.previousStep?e("ds-tooltip",{label:this.previousLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{class:"bar-workflow__previous",variant:"icon",icon:"ChevronLeft","aria-label":this.previousLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,isInactive:this.previousStep.isInactive,onDsClick:this.handlePrevious})):null,this.isLastStep?this.renderSubmit():e("ds-tooltip",{label:this.nextLabel,side:"bottom",size:"sm"},e("ds-button-filled",{class:"bar-workflow__next",variant:"icon",icon:"ChevronRight",label:this.nextLabel,"aria-label":this.nextLabel,intent:"brand",contrast:"faint",background:"bold",size:"md",type:"button",isInactive:this.isNextInactive||this.nextStep?.isInactive,onDsClick:this.handleNext}))))}render(){return e(r,{key:"ac5bff0ff87b2e30479f9ae01f9227b77e3714b1"},this.responsiveMode==="mobile"?this.renderMobile():this.renderDesktop())}static get style(){return g()}},[2,"ds-bar-workflow",{heading:[1],steps:[16],value:[1],exitLabel:[1,"exit-label"],exitAriaLabel:[1,"exit-aria-label"],previousLabel:[1,"previous-label"],nextLabel:[1,"next-label"],submitAction:[16],isNextInactive:[4,"is-next-inactive"],responsiveMode:[513,"responsive-mode"]}]);function x(){if(typeof customElements==="undefined"){return}const s=["ds-bar-workflow","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-header","ds-mobile-section-switcher","ds-swatch-picker","ds-switch","ds-tab-group","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-workflow":if(!customElements.get(t(s))){customElements.define(t(s),v)}break;case"ds-badge":if(!customElements.get(t(s))){a()}break;case"ds-button-filled":if(!customElements.get(t(s))){d()}break;case"ds-button-unfilled":if(!customElements.get(t(s))){n()}break;case"ds-icon":if(!customElements.get(t(s))){l()}break;case"ds-loader":if(!customElements.get(t(s))){c()}break;case"ds-menu":if(!customElements.get(t(s))){m()}break;case"ds-mobile-header":if(!customElements.get(t(s))){b()}break;case"ds-mobile-section-switcher":if(!customElements.get(t(s))){h()}break;case"ds-swatch-picker":if(!customElements.get(t(s))){f()}break;case"ds-switch":if(!customElements.get(t(s))){w()}break;case"ds-tab-group":if(!customElements.get(t(s))){p()}break;case"ds-text":if(!customElements.get(t(s))){u()}break;case"ds-tooltip":if(!customElements.get(t(s))){k()}break}}))}x();const _=v;const z=x;export{_ as DsBarWorkflow,z as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-workflow.js.map
|