@ds-mo/ui 13.6.0 → 13.7.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 +2 -2
- package/dist/agent.json +109 -371
- package/dist/angular/ds-card-chart.d.ts +18 -0
- package/dist/angular/{ds-card-data-viz.js → ds-card-chart.js} +10 -10
- package/dist/angular/ds-chart.d.ts +19 -0
- package/dist/angular/{ds-chart-donut.js → ds-chart.js} +15 -15
- package/dist/angular/ds-tooltip-chart.d.ts +12 -0
- package/dist/angular/{ds-chart-line.js → ds-tooltip-chart.js} +12 -12
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +3 -5
- package/dist/angular/proxies.d.ts +3 -5
- package/dist/angular/proxies.js +3 -5
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-banner.js.map +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-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/{ds-chart-line.d.ts → ds-card-chart.d.ts} +4 -4
- package/dist/components/ds-card-chart.js +2 -0
- package/dist/components/ds-card-chart.js.map +1 -0
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-setting.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/{ds-chart-bar.d.ts → ds-chart.d.ts} +4 -4
- package/dist/components/ds-chart.js +2 -0
- package/dist/components/ds-chart.js.map +1 -0
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-modal.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-toast.js.map +1 -1
- package/dist/components/{ds-card-data-viz.d.ts → ds-tooltip-chart.d.ts} +4 -4
- package/dist/components/ds-tooltip-chart.js +2 -0
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/{p-IYy-jODg.js → p-1Zbh1MRy.js} +2 -2
- package/dist/components/{p-wOOAzVMC.js → p-BVsLc3t5.js} +2 -2
- package/dist/components/p-BZCUFHYa.js +2 -0
- package/dist/components/{p-D0bM3cKj.js.map → p-BZCUFHYa.js.map} +1 -1
- package/dist/components/{p-BBtjABBS.js → p-BjiRqLtB.js} +2 -2
- package/dist/components/p-Bk1A9jLm.js +2 -0
- package/dist/components/p-Bk1A9jLm.js.map +1 -0
- package/dist/components/{p-Bsfpxto1.js → p-BsBw-w1q.js} +2 -2
- package/dist/components/p-ByfXC1wu.js +2 -0
- package/dist/components/{p-1S9AW2MA.js.map → p-ByfXC1wu.js.map} +1 -1
- package/dist/components/{p-B6RrZQqw.js → p-C-ENnZzq.js} +2 -2
- package/dist/components/{p-BPyymeuR.js → p-C2U48kDH.js} +2 -2
- package/dist/components/{p-CKRJX0Y0.js → p-C7mCjS2t.js} +2 -2
- package/dist/components/{p-6B411hQA.js → p-CL8XL1eh.js} +2 -2
- package/dist/components/{p-DfvDNcoq.js → p-CMZVPEZ_.js} +2 -2
- package/dist/components/{p-BtuYufL3.js → p-CWL61nKt.js} +2 -2
- package/dist/components/p-CWL61nKt.js.map +1 -0
- package/dist/components/p-CWLrXsDQ.js +2 -0
- package/dist/components/{p-D2cjoj2r.js.map → p-CWLrXsDQ.js.map} +1 -1
- package/dist/components/{p-Di81y9Q2.js → p-CX7QIytv.js} +2 -2
- package/dist/components/p-CXduurfd.js +2 -0
- package/dist/components/p-CXduurfd.js.map +1 -0
- package/dist/components/p-CbAfTqlb.js +2 -0
- package/dist/components/{p-CuJ3J6OJ.js.map → p-CbAfTqlb.js.map} +1 -1
- package/dist/components/{p-DVuxzrCC.js → p-CfTThRNX.js} +2 -2
- package/dist/components/{p-BmNpPyzf.js → p-CkLffZGn.js} +2 -2
- package/dist/components/{p-B4_0Ys4w.js → p-CkyXU1YX.js} +2 -2
- package/dist/components/{p-iCjUWcp7.js → p-CywKWfgD.js} +2 -2
- package/dist/components/{p-BR_oMaas.js → p-D3UKwTEo.js} +2 -2
- package/dist/components/{p-Bl6A5AJq.js → p-D7z9bJ6n.js} +2 -2
- package/dist/components/{p-DaqFuVKZ.js → p-DAftUxvL.js} +2 -2
- package/dist/components/{p-BFfHIu6y.js → p-DQ94PkZA.js} +2 -2
- package/dist/components/{p-B-kRByho.js → p-DSpq7xQF.js} +2 -2
- package/dist/components/{p-og48Kh2i.js → p-DzM3TcyQ.js} +2 -2
- package/dist/components/p-GbTasczF.js +2 -0
- package/dist/components/{p-Ca6s5fLR.js → p-Mmr9b1bB.js} +2 -2
- package/dist/components/p-UH2AGfR0.js +2 -0
- package/dist/components/{p-DX4c3kZ1.js.map → p-UH2AGfR0.js.map} +1 -1
- package/dist/components/{p-CxgMUvqg.js → p-Z2zfShlF.js} +2 -2
- package/dist/components/{p-Bmo4T96l.js → p-_mClULFL.js} +2 -2
- package/dist/components/{p-Bb4f5SuF.js → p-jf1zCsuw.js} +2 -2
- package/dist/components/{p-Eep5mxtv.js → p-oiR4IoH1.js} +2 -2
- package/dist/components/{p-DHF5cLzr.js → p-u2OZHaLY.js} +2 -2
- package/dist/docs/components.json +180 -662
- package/dist/lib/utils/chart-grammar.d.ts +359 -0
- package/dist/lib/utils/index.d.ts +2 -0
- package/dist/lib/utils/index.js +504 -0
- package/dist/lib/utils/index.js.map +4 -4
- package/dist/lib/utils/token-defaults.d.ts +3 -0
- package/dist/mcp-data/registry/banner.json +2 -2
- package/dist/mcp-data/registry/card-chart.json +238 -0
- package/dist/mcp-data/registry/card-overview.json +2 -2
- package/dist/mcp-data/registry/card-setting.json +2 -2
- package/dist/mcp-data/registry/chart-legend.json +11 -18
- package/dist/mcp-data/registry/chart.json +258 -0
- package/dist/mcp-data/registry/mobile-bar-nav.json +3 -3
- package/dist/mcp-data/registry/registry.json +108 -376
- package/dist/mcp-data/registry/tooltip-chart.json +253 -0
- package/dist/mcp-data/registry/tooltip.json +2 -2
- package/dist/react/components.d.ts +3 -5
- package/dist/react/components.js +3 -5
- package/dist/react/ds-card-chart.d.ts +12 -0
- package/dist/react/ds-card-chart.js +12 -0
- package/dist/react/ds-chart.d.ts +12 -0
- package/dist/react/ds-chart.js +12 -0
- package/dist/react/{ds-chart-bar.d.ts → ds-tooltip-chart.d.ts} +3 -3
- package/dist/react/ds-tooltip-chart.js +12 -0
- package/dist/types/components/{CardDataViz/CardDataViz.d.ts → CardChart/CardChart.d.ts} +9 -13
- package/dist/types/components/CardChart/index.d.ts +2 -0
- package/dist/types/components/Chart/Chart.d.ts +66 -0
- package/dist/types/components/Chart/index.d.ts +2 -0
- package/dist/types/components/ChartLegend/ChartLegend.d.ts +1 -1
- package/dist/types/components/{TooltipDataViz/TooltipDataViz.d.ts → TooltipChart/TooltipChart.d.ts} +15 -6
- package/dist/types/components/TooltipChart/index.d.ts +2 -0
- package/dist/types/components.d.ts +129 -294
- package/dist/types/utils/chart-grammar.d.ts +360 -0
- package/dist/types/utils/chart-scene.d.ts +128 -0
- package/dist/types/utils/chart-theme.d.ts +27 -0
- package/dist/types/utils/chart-types.d.ts +0 -13
- package/dist/types/utils/index.d.ts +2 -0
- package/dist/types/utils/token-defaults.d.ts +3 -0
- package/package.json +1 -1
- package/dist/angular/ds-card-data-viz.d.ts +0 -18
- package/dist/angular/ds-chart-bar.d.ts +0 -12
- package/dist/angular/ds-chart-bar.js +0 -38
- package/dist/angular/ds-chart-donut.d.ts +0 -19
- package/dist/angular/ds-chart-line.d.ts +0 -12
- package/dist/angular/ds-tooltip-data-viz.d.ts +0 -12
- package/dist/angular/ds-tooltip-data-viz.js +0 -38
- package/dist/components/ds-card-data-viz.js +0 -2
- package/dist/components/ds-card-data-viz.js.map +0 -1
- package/dist/components/ds-chart-bar.js +0 -2
- package/dist/components/ds-chart-bar.js.map +0 -1
- package/dist/components/ds-chart-donut.d.ts +0 -11
- package/dist/components/ds-chart-donut.js +0 -2
- package/dist/components/ds-chart-donut.js.map +0 -1
- package/dist/components/ds-chart-line.js +0 -2
- package/dist/components/ds-chart-line.js.map +0 -1
- package/dist/components/ds-tooltip-data-viz.d.ts +0 -11
- package/dist/components/ds-tooltip-data-viz.js +0 -2
- package/dist/components/p-1S9AW2MA.js +0 -2
- package/dist/components/p-B6Vuayt6.js +0 -2
- package/dist/components/p-B6Vuayt6.js.map +0 -1
- package/dist/components/p-BBpASejH.js +0 -2
- package/dist/components/p-BBpASejH.js.map +0 -1
- package/dist/components/p-BtuYufL3.js.map +0 -1
- package/dist/components/p-BybqPD8K.js +0 -2
- package/dist/components/p-BybqPD8K.js.map +0 -1
- package/dist/components/p-C4uYvyq6.js +0 -2
- package/dist/components/p-C4uYvyq6.js.map +0 -1
- package/dist/components/p-CbjFUpOj.js +0 -2
- package/dist/components/p-CbjFUpOj.js.map +0 -1
- package/dist/components/p-CrCGIx8s.js +0 -2
- package/dist/components/p-CrCGIx8s.js.map +0 -1
- package/dist/components/p-CuJ3J6OJ.js +0 -2
- package/dist/components/p-D0bM3cKj.js +0 -2
- package/dist/components/p-D2cjoj2r.js +0 -2
- package/dist/components/p-DX4c3kZ1.js +0 -2
- package/dist/components/p-DXewjzkM.js +0 -2
- package/dist/components/p-DXewjzkM.js.map +0 -1
- package/dist/components/p-yhj1lIPx.js +0 -2
- package/dist/mcp-data/registry/card-data-viz.json +0 -241
- package/dist/mcp-data/registry/chart-bar.json +0 -245
- package/dist/mcp-data/registry/chart-donut.json +0 -344
- package/dist/mcp-data/registry/chart-line.json +0 -223
- package/dist/mcp-data/registry/tooltip-data-viz.json +0 -224
- package/dist/react/ds-card-data-viz.d.ts +0 -12
- package/dist/react/ds-card-data-viz.js +0 -12
- package/dist/react/ds-chart-bar.js +0 -12
- package/dist/react/ds-chart-donut.d.ts +0 -12
- package/dist/react/ds-chart-donut.js +0 -12
- package/dist/react/ds-chart-line.d.ts +0 -9
- package/dist/react/ds-chart-line.js +0 -12
- package/dist/react/ds-tooltip-data-viz.d.ts +0 -9
- package/dist/react/ds-tooltip-data-viz.js +0 -12
- package/dist/types/components/CardDataViz/index.d.ts +0 -2
- package/dist/types/components/ChartBar/ChartBar.d.ts +0 -31
- package/dist/types/components/ChartBar/index.d.ts +0 -3
- package/dist/types/components/ChartDonut/ChartDonut.d.ts +0 -72
- package/dist/types/components/ChartDonut/index.d.ts +0 -2
- package/dist/types/components/ChartLine/ChartLine.d.ts +0 -23
- package/dist/types/components/ChartLine/index.d.ts +0 -2
- package/dist/types/components/TooltipDataViz/index.d.ts +0 -2
- /package/dist/components/{ds-tooltip-data-viz.js.map → ds-tooltip-chart.js.map} +0 -0
- /package/dist/components/{p-IYy-jODg.js.map → p-1Zbh1MRy.js.map} +0 -0
- /package/dist/components/{p-wOOAzVMC.js.map → p-BVsLc3t5.js.map} +0 -0
- /package/dist/components/{p-BBtjABBS.js.map → p-BjiRqLtB.js.map} +0 -0
- /package/dist/components/{p-Bsfpxto1.js.map → p-BsBw-w1q.js.map} +0 -0
- /package/dist/components/{p-B6RrZQqw.js.map → p-C-ENnZzq.js.map} +0 -0
- /package/dist/components/{p-BPyymeuR.js.map → p-C2U48kDH.js.map} +0 -0
- /package/dist/components/{p-CKRJX0Y0.js.map → p-C7mCjS2t.js.map} +0 -0
- /package/dist/components/{p-6B411hQA.js.map → p-CL8XL1eh.js.map} +0 -0
- /package/dist/components/{p-DfvDNcoq.js.map → p-CMZVPEZ_.js.map} +0 -0
- /package/dist/components/{p-Di81y9Q2.js.map → p-CX7QIytv.js.map} +0 -0
- /package/dist/components/{p-DVuxzrCC.js.map → p-CfTThRNX.js.map} +0 -0
- /package/dist/components/{p-BmNpPyzf.js.map → p-CkLffZGn.js.map} +0 -0
- /package/dist/components/{p-B4_0Ys4w.js.map → p-CkyXU1YX.js.map} +0 -0
- /package/dist/components/{p-iCjUWcp7.js.map → p-CywKWfgD.js.map} +0 -0
- /package/dist/components/{p-BR_oMaas.js.map → p-D3UKwTEo.js.map} +0 -0
- /package/dist/components/{p-Bl6A5AJq.js.map → p-D7z9bJ6n.js.map} +0 -0
- /package/dist/components/{p-DaqFuVKZ.js.map → p-DAftUxvL.js.map} +0 -0
- /package/dist/components/{p-BFfHIu6y.js.map → p-DQ94PkZA.js.map} +0 -0
- /package/dist/components/{p-B-kRByho.js.map → p-DSpq7xQF.js.map} +0 -0
- /package/dist/components/{p-og48Kh2i.js.map → p-DzM3TcyQ.js.map} +0 -0
- /package/dist/components/{p-yhj1lIPx.js.map → p-GbTasczF.js.map} +0 -0
- /package/dist/components/{p-Ca6s5fLR.js.map → p-Mmr9b1bB.js.map} +0 -0
- /package/dist/components/{p-CxgMUvqg.js.map → p-Z2zfShlF.js.map} +0 -0
- /package/dist/components/{p-Bmo4T96l.js.map → p-_mClULFL.js.map} +0 -0
- /package/dist/components/{p-Bb4f5SuF.js.map → p-jf1zCsuw.js.map} +0 -0
- /package/dist/components/{p-Eep5mxtv.js.map → p-oiR4IoH1.js.map} +0 -0
- /package/dist/components/{p-DHF5cLzr.js.map → p-u2OZHaLY.js.map} +0 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
|
|
2
|
+
import type { Components } from '@ds-mo/ui/components';
|
|
3
|
+
import type { DsCardChartCustomEvent } from '@ds-mo/ui/components';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class DsCardChart {
|
|
6
|
+
protected z: NgZone;
|
|
7
|
+
protected el: HTMLDsCardChartElement;
|
|
8
|
+
dsFilterClick: EventEmitter<DsCardChartCustomEvent<void>>;
|
|
9
|
+
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
10
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DsCardChart, never>;
|
|
11
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsCardChart, "ds-card-chart", never, { "cardWidth": { "alias": "cardWidth"; "required": false; }; "filterLabel": { "alias": "filterLabel"; "required": false; }; "heading": { "alias": "heading"; "required": true; }; "showFilter": { "alias": "showFilter"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "dsFilterClick": "dsFilterClick"; }, never, ["*"], true, never>;
|
|
12
|
+
}
|
|
13
|
+
export declare interface DsCardChart extends Components.DsCardChart {
|
|
14
|
+
/**
|
|
15
|
+
* Emits when the standard header filter control is activated.
|
|
16
|
+
*/
|
|
17
|
+
dsFilterClick: EventEmitter<DsCardChartCustomEvent<void>>;
|
|
18
|
+
}
|
|
@@ -8,29 +8,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
8
8
|
/* auto-generated angular directive proxies */
|
|
9
9
|
import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
|
|
10
10
|
import { ProxyCmp } from './angular-component-lib/utils.js';
|
|
11
|
-
import { defineCustomElement as
|
|
11
|
+
import { defineCustomElement as defineDsCardChart } from '@ds-mo/ui/components/ds-card-chart.js';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
|
-
let
|
|
13
|
+
let DsCardChart = class DsCardChart {
|
|
14
14
|
constructor(c, r, z) {
|
|
15
15
|
this.z = z;
|
|
16
16
|
this.dsFilterClick = new EventEmitter();
|
|
17
17
|
c.detach();
|
|
18
18
|
this.el = r.nativeElement;
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type:
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type:
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsCardChart, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsCardChart, isStandalone: true, selector: "ds-card-chart", inputs: { cardWidth: "cardWidth", filterLabel: "filterLabel", heading: "heading", showFilter: "showFilter", variant: "variant" }, outputs: { dsFilterClick: "dsFilterClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
DsCardChart = __decorate([
|
|
24
24
|
ProxyCmp({
|
|
25
|
-
defineCustomElementFn:
|
|
25
|
+
defineCustomElementFn: defineDsCardChart,
|
|
26
26
|
inputs: ['cardWidth', 'filterLabel', 'heading', 'showFilter', 'variant']
|
|
27
27
|
})
|
|
28
|
-
],
|
|
29
|
-
export {
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type:
|
|
28
|
+
], DsCardChart);
|
|
29
|
+
export { DsCardChart };
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsCardChart, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
32
|
args: [{
|
|
33
|
-
selector: 'ds-card-
|
|
33
|
+
selector: 'ds-card-chart',
|
|
34
34
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
35
35
|
template: '<ng-content></ng-content>',
|
|
36
36
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
|
|
2
|
+
import type { Components } from '@ds-mo/ui/components';
|
|
3
|
+
import type { DsChartCustomEvent } from '@ds-mo/ui/components';
|
|
4
|
+
import type { ChartFocusChangeDetail as IDsChartChartFocusChangeDetail } from '@ds-mo/ui/components';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export declare class DsChart {
|
|
7
|
+
protected z: NgZone;
|
|
8
|
+
protected el: HTMLDsChartElement;
|
|
9
|
+
dsChartFocusChange: EventEmitter<DsChartCustomEvent<IDsChartChartFocusChangeDetail>>;
|
|
10
|
+
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
11
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DsChart, never>;
|
|
12
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsChart, "ds-chart", never, { "aspectRatio": { "alias": "aspectRatio"; "required": false; }; "definition": { "alias": "definition"; "required": true; }; "description": { "alias": "description"; "required": false; }; "height": { "alias": "height"; "required": false; }; "label": { "alias": "label"; "required": true; }; "locale": { "alias": "locale"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsChartFocusChange": "dsChartFocusChange"; }, never, ["*"], true, never>;
|
|
13
|
+
}
|
|
14
|
+
export declare interface DsChart extends Components.DsChart {
|
|
15
|
+
/**
|
|
16
|
+
* Fires whenever pointer or keyboard focus resolves to semantic chart points.
|
|
17
|
+
*/
|
|
18
|
+
dsChartFocusChange: EventEmitter<DsChartCustomEvent<IDsChartChartFocusChangeDetail>>;
|
|
19
|
+
}
|
|
@@ -8,35 +8,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
8
8
|
/* auto-generated angular directive proxies */
|
|
9
9
|
import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
|
|
10
10
|
import { ProxyCmp } from './angular-component-lib/utils.js';
|
|
11
|
-
import { defineCustomElement as
|
|
11
|
+
import { defineCustomElement as defineDsChart } from '@ds-mo/ui/components/ds-chart.js';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
|
-
let
|
|
13
|
+
let DsChart = class DsChart {
|
|
14
14
|
constructor(c, r, z) {
|
|
15
15
|
this.z = z;
|
|
16
|
-
this.
|
|
16
|
+
this.dsChartFocusChange = new EventEmitter();
|
|
17
17
|
c.detach();
|
|
18
18
|
this.el = r.nativeElement;
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type:
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type:
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsChart, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsChart, isStandalone: true, selector: "ds-chart", inputs: { aspectRatio: "aspectRatio", definition: "definition", description: "description", height: "height", label: "label", locale: "locale", width: "width" }, outputs: { dsChartFocusChange: "dsChartFocusChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
DsChart = __decorate([
|
|
24
24
|
ProxyCmp({
|
|
25
|
-
defineCustomElementFn:
|
|
26
|
-
inputs: ['
|
|
25
|
+
defineCustomElementFn: defineDsChart,
|
|
26
|
+
inputs: ['aspectRatio', 'definition', 'description', 'height', 'label', 'locale', 'width']
|
|
27
27
|
})
|
|
28
|
-
],
|
|
29
|
-
export {
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type:
|
|
28
|
+
], DsChart);
|
|
29
|
+
export { DsChart };
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsChart, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
32
|
args: [{
|
|
33
|
-
selector: 'ds-chart
|
|
33
|
+
selector: 'ds-chart',
|
|
34
34
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
35
35
|
template: '<ng-content></ng-content>',
|
|
36
36
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
37
|
-
inputs: ['
|
|
38
|
-
outputs: ['
|
|
37
|
+
inputs: ['aspectRatio', { name: 'definition', required: true }, 'description', 'height', { name: 'label', required: true }, 'locale', 'width'],
|
|
38
|
+
outputs: ['dsChartFocusChange'],
|
|
39
39
|
}]
|
|
40
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: {
|
|
40
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsChartFocusChange: [{
|
|
41
41
|
type: Output
|
|
42
42
|
}] } });
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
|
|
2
|
+
import type { Components } from '@ds-mo/ui/components';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class DsTooltipChart {
|
|
5
|
+
protected z: NgZone;
|
|
6
|
+
protected el: HTMLDsTooltipChartElement;
|
|
7
|
+
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DsTooltipChart, never>;
|
|
9
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsTooltipChart, "ds-tooltip-chart", never, { "delay": { "alias": "delay"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "items": { "alias": "items"; "required": false; }; "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
10
|
+
}
|
|
11
|
+
export declare interface DsTooltipChart extends Components.DsTooltipChart {
|
|
12
|
+
}
|
|
@@ -8,31 +8,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
8
8
|
/* auto-generated angular directive proxies */
|
|
9
9
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
10
10
|
import { ProxyCmp } from './angular-component-lib/utils.js';
|
|
11
|
-
import { defineCustomElement as
|
|
11
|
+
import { defineCustomElement as defineDsTooltipChart } from '@ds-mo/ui/components/ds-tooltip-chart.js';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
|
-
let
|
|
13
|
+
let DsTooltipChart = class DsTooltipChart {
|
|
14
14
|
constructor(c, r, z) {
|
|
15
15
|
this.z = z;
|
|
16
16
|
c.detach();
|
|
17
17
|
this.el = r.nativeElement;
|
|
18
18
|
}
|
|
19
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type:
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type:
|
|
19
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsTooltipChart, 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: DsTooltipChart, isStandalone: true, selector: "ds-tooltip-chart", inputs: { delay: "delay", heading: "heading", items: "items", label: "label", value: "value", x: "x", y: "y" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
21
|
};
|
|
22
|
-
|
|
22
|
+
DsTooltipChart = __decorate([
|
|
23
23
|
ProxyCmp({
|
|
24
|
-
defineCustomElementFn:
|
|
25
|
-
inputs: ['
|
|
24
|
+
defineCustomElementFn: defineDsTooltipChart,
|
|
25
|
+
inputs: ['delay', 'heading', 'items', 'label', 'value', 'x', 'y']
|
|
26
26
|
})
|
|
27
|
-
],
|
|
28
|
-
export {
|
|
29
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type:
|
|
27
|
+
], DsTooltipChart);
|
|
28
|
+
export { DsTooltipChart };
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsTooltipChart, decorators: [{
|
|
30
30
|
type: Component,
|
|
31
31
|
args: [{
|
|
32
|
-
selector: 'ds-chart
|
|
32
|
+
selector: 'ds-tooltip-chart',
|
|
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: ['
|
|
36
|
+
inputs: ['delay', 'heading', 'items', 'label', 'value', 'x', 'y'],
|
|
37
37
|
}]
|
|
38
38
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
|
package/dist/angular/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import * as d from './proxies';
|
|
2
|
-
export declare const DIRECTIVES: (typeof d.DsAgentActivity | typeof d.DsAgentResponse | typeof d.DsAgentSourceList | typeof d.DsAgentToolCall | typeof d.DsAttachmentList | typeof d.DsAvatar | typeof d.DsBadge | typeof d.DsBanner | typeof d.DsBarNav | typeof d.DsBarTitle | typeof d.DsBarWorkflow | typeof d.DsBreadcrumb | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.
|
|
2
|
+
export declare const DIRECTIVES: (typeof d.DsAgentActivity | typeof d.DsAgentResponse | typeof d.DsAgentSourceList | typeof d.DsAgentToolCall | typeof d.DsAttachmentList | typeof d.DsAvatar | typeof d.DsBadge | typeof d.DsBanner | typeof d.DsBarNav | typeof d.DsBarTitle | typeof d.DsBarWorkflow | typeof d.DsBreadcrumb | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.DsCardChart | typeof d.DsCardOverview | typeof d.DsCardSetting | typeof d.DsChartLegend | typeof d.DsChart | typeof d.DsCheckbox | typeof d.DsChip | typeof d.DsCodeBlock | typeof d.DsConversationListItem | typeof d.DsConversationListSection | typeof d.DsConversationList | typeof d.DsDivider | typeof d.DsEmptyState | typeof d.DsField | typeof d.DsIcon | typeof d.DsInput | typeof d.DsLoader | typeof d.DsMarkdown | typeof d.DsMenu | typeof d.DsMessageActions | typeof d.DsMessageBubble | typeof d.DsMessageComposer | typeof d.DsMessageScroller | typeof d.DsMessage | typeof d.DsMobileBarNav | typeof d.DsMobileHeader | typeof d.DsMobileSectionSwitcher | typeof d.DsMobileSheetNav | typeof d.DsModal | typeof d.DsPanelNav | typeof d.DsPanelSubNav | typeof d.DsPanelToolHeader | typeof d.DsPanelToolSearch | typeof d.DsPanelTools | typeof d.DsRadio | typeof d.DsScrollOverlay | typeof d.DsSelect | typeof d.DsShellApp | typeof d.DsShellPage | typeof d.DsShellTools | typeof d.DsSkeleton | typeof d.DsSlider | typeof d.DsSwatchPicker | typeof d.DsSwitch | typeof d.DsTabGroup | typeof d.DsTag | typeof d.DsText | typeof d.DsToast | typeof d.DsTooltipChart | typeof d.DsTooltip | typeof d.DsTypingIndicator)[];
|
package/dist/angular/index.js
CHANGED
|
@@ -14,13 +14,11 @@ export const DIRECTIVES = [
|
|
|
14
14
|
d.DsBreadcrumb,
|
|
15
15
|
d.DsButtonFilled,
|
|
16
16
|
d.DsButtonUnfilled,
|
|
17
|
-
d.
|
|
17
|
+
d.DsCardChart,
|
|
18
18
|
d.DsCardOverview,
|
|
19
19
|
d.DsCardSetting,
|
|
20
|
-
d.
|
|
21
|
-
d.DsChartDonut,
|
|
20
|
+
d.DsChart,
|
|
22
21
|
d.DsChartLegend,
|
|
23
|
-
d.DsChartLine,
|
|
24
22
|
d.DsCheckbox,
|
|
25
23
|
d.DsChip,
|
|
26
24
|
d.DsCodeBlock,
|
|
@@ -65,6 +63,6 @@ export const DIRECTIVES = [
|
|
|
65
63
|
d.DsText,
|
|
66
64
|
d.DsToast,
|
|
67
65
|
d.DsTooltip,
|
|
68
|
-
d.
|
|
66
|
+
d.DsTooltipChart,
|
|
69
67
|
d.DsTypingIndicator
|
|
70
68
|
];
|
|
@@ -16,13 +16,11 @@ export { DsBarWorkflow } from './ds-bar-workflow';
|
|
|
16
16
|
export { DsBreadcrumb } from './ds-breadcrumb';
|
|
17
17
|
export { DsButtonFilled } from './ds-button-filled';
|
|
18
18
|
export { DsButtonUnfilled } from './ds-button-unfilled';
|
|
19
|
-
export {
|
|
19
|
+
export { DsCardChart } from './ds-card-chart';
|
|
20
20
|
export { DsCardOverview } from './ds-card-overview';
|
|
21
21
|
export { DsCardSetting } from './ds-card-setting';
|
|
22
|
-
export {
|
|
23
|
-
export { DsChartDonut } from './ds-chart-donut';
|
|
22
|
+
export { DsChart } from './ds-chart';
|
|
24
23
|
export { DsChartLegend } from './ds-chart-legend';
|
|
25
|
-
export { DsChartLine } from './ds-chart-line';
|
|
26
24
|
export { DsCheckbox } from './ds-checkbox';
|
|
27
25
|
export { DsChip } from './ds-chip';
|
|
28
26
|
export { DsCodeBlock } from './ds-code-block';
|
|
@@ -67,5 +65,5 @@ export { DsTag } from './ds-tag';
|
|
|
67
65
|
export { DsText } from './ds-text';
|
|
68
66
|
export { DsToast } from './ds-toast';
|
|
69
67
|
export { DsTooltip } from './ds-tooltip';
|
|
70
|
-
export {
|
|
68
|
+
export { DsTooltipChart } from './ds-tooltip-chart';
|
|
71
69
|
export { DsTypingIndicator } from './ds-typing-indicator';
|
package/dist/angular/proxies.js
CHANGED
|
@@ -17,13 +17,11 @@ export { DsBarWorkflow } from './ds-bar-workflow.js';
|
|
|
17
17
|
export { DsBreadcrumb } from './ds-breadcrumb.js';
|
|
18
18
|
export { DsButtonFilled } from './ds-button-filled.js';
|
|
19
19
|
export { DsButtonUnfilled } from './ds-button-unfilled.js';
|
|
20
|
-
export {
|
|
20
|
+
export { DsCardChart } from './ds-card-chart.js';
|
|
21
21
|
export { DsCardOverview } from './ds-card-overview.js';
|
|
22
22
|
export { DsCardSetting } from './ds-card-setting.js';
|
|
23
|
-
export {
|
|
24
|
-
export { DsChartDonut } from './ds-chart-donut.js';
|
|
23
|
+
export { DsChart } from './ds-chart.js';
|
|
25
24
|
export { DsChartLegend } from './ds-chart-legend.js';
|
|
26
|
-
export { DsChartLine } from './ds-chart-line.js';
|
|
27
25
|
export { DsCheckbox } from './ds-checkbox.js';
|
|
28
26
|
export { DsChip } from './ds-chip.js';
|
|
29
27
|
export { DsCodeBlock } from './ds-code-block.js';
|
|
@@ -68,5 +66,5 @@ export { DsTag } from './ds-tag.js';
|
|
|
68
66
|
export { DsText } from './ds-text.js';
|
|
69
67
|
export { DsToast } from './ds-toast.js';
|
|
70
68
|
export { DsTooltip } from './ds-tooltip.js';
|
|
71
|
-
export {
|
|
69
|
+
export { DsTooltipChart } from './ds-tooltip-chart.js';
|
|
72
70
|
export { DsTypingIndicator } from './ds-typing-indicator.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as
|
|
1
|
+
import{A as s,d as o}from"./p-BVsLc3t5.js";const t=s;const c=o;export{t as DsAgentActivity,c as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-activity.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-
|
|
1
|
+
import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as i}from"./p-BVsLc3t5.js";import{d as r}from"./p-CkLffZGn.js";import{d as n}from"./p-CMZVPEZ_.js";import{d as c}from"./p-_mClULFL.js";import{d as m}from"./p-1Zbh1MRy.js";import{d}from"./p-D3UKwTEo.js";import{d as l}from"./p-BZCUFHYa.js";import{d as f}from"./p-BAfG3M8z.js";import{d as p}from"./p-Ca-I2UnB.js";import{d as u}from"./p-DSpq7xQF.js";import{d as b}from"./p-C7mCjS2t.js";import{d as h}from"./p-jf1zCsuw.js";import{d as k}from"./p-CWLrXsDQ.js";const g=()=>`.sc-ds-agent-response-h{display:block;width:100%;-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 y=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.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})}}render(){return t(a,{key:"c7551bd12577f2431256ee794c64ffcba1e0ca87"},t("ds-message",{key:"7569c0a349650237847f55b57dec2f5173e175f2",messageId:this.messageId,direction:"incoming",author:this.author,showAuthor:this.showAuthor,timestamp:this.timestamp,streaming:this.streaming,metadataVisibility:this.metadataVisibility},t("div",{key:"9549b493eb3b28cbf60bea5dc0379792b250d13e",class:"agent-response"},this.parts.map((s=>this.renderPart(s)))),t("slot",{key:"b63bb15358d2bf3624425879eae439a36468cff0",name:"footer",slot:"footer"}),t("slot",{key:"0fe4d89d7eee01100b1f02817a579ccf3a634a79",name:"metadata-actions",slot:"metadata-actions"}),t("slot",{key:"c46527c6b558329375c2367584c451880af4f8e9",name:"actions",slot:"actions"})))}static get style(){return g()}},[262,"ds-agent-response",{messageId:[1,"message-id"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],parts:[16],streaming:[4],metadataVisibility:[1,"metadata-visibility"]}]);function E(){if(typeof customElements==="undefined"){return}const s=["ds-agent-response","ds-agent-activity","ds-agent-source-list","ds-agent-tool-call","ds-attachment-list","ds-badge","ds-button-unfilled","ds-code-block","ds-icon","ds-loader","ds-markdown","ds-message","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-agent-response":if(!customElements.get(o(s))){customElements.define(o(s),y)}break;case"ds-agent-activity":if(!customElements.get(o(s))){i()}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))){c()}break;case"ds-badge":if(!customElements.get(o(s))){m()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){d()}break;case"ds-code-block":if(!customElements.get(o(s))){l()}break;case"ds-icon":if(!customElements.get(o(s))){f()}break;case"ds-loader":if(!customElements.get(o(s))){p()}break;case"ds-markdown":if(!customElements.get(o(s))){u()}break;case"ds-message":if(!customElements.get(o(s))){b()}break;case"ds-text":if(!customElements.get(o(s))){h()}break;case"ds-tooltip":if(!customElements.get(o(s))){k()}break}}))}E();const w=y;const j=E;export{w as DsAgentResponse,j as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-response.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p-
|
|
1
|
+
import{A as o,d as s}from"./p-CkLffZGn.js";const t=o;const f=s;export{t as DsAgentSourceList,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-source-list.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p-
|
|
1
|
+
import{A as o,d as s}from"./p-CMZVPEZ_.js";const t=o;const p=s;export{t as DsAgentToolCall,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-tool-call.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p-
|
|
1
|
+
import{A as o,d as s}from"./p-_mClULFL.js";const t=o;const m=s;export{t as DsAttachmentList,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-attachment-list.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-1Zbh1MRy.js";const t=o;const p=s;export{t as DsBadge,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-badge.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-IYy-jODg.js";import{d}from"./p-BR_oMaas.js";import{d as t}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as b}from"./p-Bb4f5SuF.js";import{d as l}from"./p-D2cjoj2r.js";import{a as h}from"./p-B6Vuayt6.js";import{T as u}from"./p-C4uYvyq6.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.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};
|
|
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-1Zbh1MRy.js";import{d}from"./p-D3UKwTEo.js";import{d as t}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as b}from"./p-jf1zCsuw.js";import{d as l}from"./p-CWLrXsDQ.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 +1 @@
|
|
|
1
|
-
{"version":3,"names":["bannerCss","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","intent","contrast","orientation","open","dismissLabel","announcement","rendered","phase","hasActions","loaded","transitionTimer","openFrame","closePending","componentWillLoad","componentDidLoad","updateActionsPresence","startOpen","disconnectedCallback","clearTransitionWork","onOpenChange","isOpen","startClose","closeMotionMs","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","clearTimeout","cancelAnimationFrame","requestAnimationFrame","duration","finishClose","setTimeout","dsAfterClose","emit","slot","actions","assignedElements","filter","element","tagName","Array","from","el","querySelectorAll","length","requestClose","event","dsClose","detail","role","undefined","ariaLive","render","closing","hostClass","banner","h","Host","key","class","inert","as","variant","color","description","name","onSlotchange","currentTarget","label","side","size","icon","type","background","hasBorder","activeFill","onDsClick"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n display: grid;\n overflow: hidden;\n min-width: 0;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--effect-animation-duration-short-3)\n var(--_banner-motion-easing);\n\n --ds-banner-background: var(--color-background-faint-neutral);\n --ds-banner-heading: var(--color-foreground-primary);\n --ds-banner-description: var(--color-foreground-secondary);\n --ds-banner-border: var(--color-border-tertiary);\n --_banner-motion-easing: var(--effect-animation-easing-ease-in-out, ease);\n}\n\n:host(.banner--open) {\n grid-template-rows: 1fr;\n --_banner-motion-easing: var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.banner--closing) {\n --_banner-motion-easing: var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.banner--hidden) {\n display: none;\n}\n\n.banner-overflow {\n min-height: 0;\n overflow: visible;\n}\n\n.banner-surface {\n display: flex;\n position: relative;\n width: 100%;\n padding-inline-end: calc(var(--dimension-size-400) + var(--dimension-space-200));\n color: var(--ds-banner-description);\n background-color: var(--ds-banner-background);\n border-bottom: var(--dimension-stroke-width-012) solid var(--ds-banner-border);\n transform: translateY(-100%);\n transition: transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing);\n}\n\n:host(.banner--open) .banner-surface {\n transform: translateY(0);\n}\n\n.banner-copy {\n flex-basis: var(--dimension-card-width-sm);\n}\n\n:host(.banner--orientation-horizontal) .banner-surface {\n flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical) .banner-copy {\n flex-basis: 100%;\n}\n\n.banner-copy-flow {\n box-sizing: border-box;\n min-width: 0;\n padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--ds-banner-description);\n}\n\n.banner-heading {\n display: inline-block;\n width: auto;\n max-width: 100%;\n margin-inline-end: var(--dimension-space-100);\n vertical-align: baseline;\n color: var(--ds-banner-heading);\n}\n\n.banner-description {\n color: var(--ds-banner-description);\n}\n\n.banner-actions {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n flex-wrap: nowrap;\n min-width: 0;\n gap: var(--dimension-space-100);\n}\n\n.banner-actions slot {\n display: contents;\n}\n\n.banner-actions ::slotted(:not(ds-button-unfilled)),\n.banner-actions ::slotted(ds-button-unfilled:nth-of-type(n + 3)) {\n display: none;\n}\n\n.banner-actions--empty {\n display: none;\n}\n\n.banner-trailing {\n align-self: flex-start;\n flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical.banner--has-actions) .banner-trailing {\n margin-inline: var(--dimension-space-100) auto;\n padding-block-end: var(--dimension-space-100);\n box-sizing: border-box;\n}\n\n:host(.banner--orientation-vertical) .banner-description {\n display: block;\n}\n\n:host(.banner--orientation-vertical) .banner-heading + .banner-description {\n margin-block-start: var(--dimension-space-050);\n}\n\n.banner-close {\n flex: 0 0 auto;\n}\n\n.banner-dismiss {\n position: absolute;\n inset-block-start: var(--dimension-space-100);\n inset-inline-end: var(--dimension-space-100);\n}\n\n:host(.banner--intent-neutral) {\n --ds-banner-faint-background: var(--color-background-faint-neutral);\n}\n\n:host(.banner--intent-brand) {\n --ds-banner-faint-background: var(--color-background-faint-brand);\n}\n\n:host(.banner--intent-positive) {\n --ds-banner-faint-background: var(--color-background-faint-positive);\n}\n\n:host(.banner--intent-warning) {\n --ds-banner-faint-background: var(--color-background-faint-warning);\n}\n\n:host(.banner--intent-caution) {\n --ds-banner-faint-background: var(--color-background-faint-caution);\n}\n\n:host(.banner--intent-negative) {\n --ds-banner-faint-background: var(--color-background-faint-negative);\n}\n\n:host(.banner--contrast-faint) {\n --ds-banner-background: var(--ds-banner-faint-background);\n --ds-banner-heading: var(--color-foreground-primary);\n --ds-banner-description: var(--color-foreground-secondary);\n --ds-banner-border: var(--color-border-tertiary);\n}\n\n:host(.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-neutral);\n --ds-banner-heading: var(--color-foreground-on-medium-background-primary);\n --ds-banner-description: var(--color-foreground-on-medium-background-secondary);\n --ds-banner-border: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-brand); }\n:host(.banner--intent-positive.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-positive); }\n:host(.banner--intent-warning.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-warning); }\n:host(.banner--intent-caution.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-caution); }\n:host(.banner--intent-negative.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-negative); }\n\n:host(.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-neutral);\n --ds-banner-heading: var(--color-foreground-on-strong-background-primary);\n --ds-banner-description: var(--color-foreground-on-strong-background-secondary);\n --ds-banner-border: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-brand); }\n:host(.banner--intent-positive.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-positive); }\n:host(.banner--intent-warning.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-warning); }\n:host(.banner--intent-caution.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-caution); }\n:host(.banner--intent-negative.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-negative); }\n\n:host(.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-neutral);\n --ds-banner-heading: var(--color-foreground-on-bold-background-primary);\n --ds-banner-description: var(--color-foreground-on-bold-background-secondary);\n --ds-banner-border: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-brand); }\n:host(.banner--intent-positive.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-positive); }\n:host(.banner--intent-warning.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-warning); }\n:host(.banner--intent-caution.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-caution); }\n:host(.banner--intent-negative.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-negative); }\n\n@media (prefers-reduced-motion: reduce) {\n :host,\n .banner-surface {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n .banner-surface {\n color: var(--ds-forced-color-content);\n background-color: var(--ds-forced-color-surface);\n border-bottom-color: var(--ds-forced-color-content);\n }\n\n .banner-heading,\n .banner-description {\n color: var(--ds-forced-color-content);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent =\n | 'neutral'\n | 'brand'\n | 'positive'\n | 'warning'\n | 'caution'\n | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n tag: 'ds-banner',\n styleUrl: 'Banner.css',\n scoped: true,\n})\nexport class Banner {\n @Element() el!: HTMLElement;\n\n /** Required explanatory copy. */\n @Prop() description!: string;\n /** Optional visual heading rendered before the description. */\n @Prop() heading: string = '';\n /** Semantic color family. */\n @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n /** Surface fill weight. */\n @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n /** Copy and action-lane arrangement, selected by the application. */\n @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n @Prop({ reflect: true }) open: boolean = true;\n /** Localized accessible label for the close control. */\n @Prop() dismissLabel: string = 'Dismiss banner';\n /** Live-region urgency, independent of visual intent. */\n @Prop() announcement: BannerAnnouncement = 'none';\n\n /** Emitted when the close control requests dismissal. The application controls open. */\n @Event() dsClose!: EventEmitter<MouseEvent>;\n /** Emitted once after controlled exit motion and layout collapse complete. */\n @Event() dsAfterClose!: EventEmitter<void>;\n\n @State() private rendered = false;\n @State() private phase: BannerPhase = 'closed';\n @State() private hasActions = false;\n\n private loaded = false;\n private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n private openFrame: number | null = null;\n private closePending = false;\n\n componentWillLoad() {\n this.rendered = this.open;\n }\n\n componentDidLoad() {\n this.loaded = true;\n this.updateActionsPresence();\n if (this.open) this.startOpen();\n }\n\n disconnectedCallback() {\n this.clearTransitionWork();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (!this.loaded) return;\n if (isOpen) this.startOpen();\n else this.startClose();\n }\n\n private get closeMotionMs(): number {\n return resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort3,\n TOKEN_DEFAULTS.animationDurationShort3,\n );\n }\n\n private clearTransitionWork() {\n if (this.transitionTimer) clearTimeout(this.transitionTimer);\n if (this.openFrame !== null) cancelAnimationFrame(this.openFrame);\n this.transitionTimer = null;\n this.openFrame = null;\n }\n\n private startOpen() {\n this.clearTransitionWork();\n this.closePending = false;\n this.rendered = true;\n this.phase = 'closed';\n this.openFrame = requestAnimationFrame(() => {\n this.openFrame = null;\n if (this.open) this.phase = 'open';\n });\n }\n\n private startClose() {\n this.clearTransitionWork();\n if (!this.rendered || this.phase === 'closed') {\n this.rendered = false;\n return;\n }\n\n this.closePending = true;\n this.phase = 'closing';\n const duration = this.closeMotionMs;\n if (duration <= 0) {\n this.finishClose();\n return;\n }\n this.transitionTimer = setTimeout(() => {\n this.transitionTimer = null;\n this.finishClose();\n }, duration);\n }\n\n private finishClose() {\n if (this.open || !this.closePending) return;\n this.closePending = false;\n this.rendered = false;\n this.phase = 'closed';\n this.dsAfterClose.emit();\n }\n\n private updateActionsPresence(slot?: HTMLSlotElement) {\n const actions = slot\n ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n this.hasActions = actions.length > 0;\n }\n\n private requestClose(event: CustomEvent<MouseEvent>) {\n if (!this.open || this.phase === 'closing') return;\n this.dsClose.emit(event.detail);\n }\n\n private get role(): 'status' | 'alert' | undefined {\n if (this.announcement === 'polite') return 'status';\n if (this.announcement === 'assertive') return 'alert';\n return undefined;\n }\n\n private get ariaLive(): 'polite' | 'assertive' | undefined {\n return this.announcement === 'none' ? undefined : this.announcement;\n }\n\n render() {\n const closing = this.phase === 'closing';\n const hostClass = {\n banner: true,\n 'banner--open': this.phase === 'open',\n 'banner--closing': closing,\n 'banner--hidden': !this.rendered,\n 'banner--has-actions': this.hasActions,\n [`banner--orientation-${this.orientation}`]: true,\n [`banner--intent-${this.intent}`]: true,\n [`banner--contrast-${this.contrast}`]: true,\n };\n\n return (\n <Host class={hostClass}>\n {this.rendered && (\n <div class=\"banner-overflow\">\n <section\n class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n role={this.role}\n aria-live={this.ariaLive}\n aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n aria-hidden={closing ? 'true' : undefined}\n inert={closing ? true : undefined}\n data-phase={this.phase}\n >\n {/* eslint-disable-next-line local/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n <ds-text\n class=\"banner-copy-flow\"\n as=\"div\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n >\n {this.heading && (\n <ds-text\n class=\"banner-heading\"\n as=\"span\"\n variant=\"text-title-small\"\n color=\"inherit\"\n >\n {this.heading}\n </ds-text>\n )}\n <span class=\"banner-description\">{this.description}</span>\n </ds-text>\n </div>\n <div class=\"banner-trailing ds-chrome-header__trailing\">\n <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n <slot\n name=\"actions\"\n onSlotchange={(event: Event) =>\n this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n }\n />\n </div>\n <div class=\"banner-dismiss\">\n <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n class=\"banner-close\"\n variant=\"icon\"\n icon=\"Cross\"\n size=\"md\"\n type=\"button\"\n background={this.contrast}\n aria-label={this.dismissLabel}\n hasBorder={false}\n activeFill={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n />\n </ds-tooltip>\n </div>\n </div>\n </section>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["bannerCss","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","intent","contrast","orientation","open","dismissLabel","announcement","rendered","phase","hasActions","loaded","transitionTimer","openFrame","closePending","componentWillLoad","componentDidLoad","updateActionsPresence","startOpen","disconnectedCallback","clearTransitionWork","onOpenChange","isOpen","startClose","closeMotionMs","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","clearTimeout","cancelAnimationFrame","requestAnimationFrame","duration","finishClose","setTimeout","dsAfterClose","emit","slot","actions","assignedElements","filter","element","tagName","Array","from","el","querySelectorAll","length","requestClose","event","dsClose","detail","role","undefined","ariaLive","render","closing","hostClass","banner","h","Host","key","class","inert","as","variant","color","description","name","onSlotchange","currentTarget","label","side","size","icon","type","background","hasBorder","activeFill","onDsClick"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n display: grid;\n overflow: hidden;\n min-width: 0;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--effect-animation-duration-short-3)\n var(--_banner-motion-easing);\n\n --ds-banner-background: var(--color-background-faint-neutral);\n --ds-banner-heading: var(--color-foreground-primary);\n --ds-banner-description: var(--color-foreground-secondary);\n --ds-banner-border: var(--color-border-tertiary);\n --_banner-motion-easing: var(--effect-animation-easing-ease-in-out, ease);\n}\n\n:host(.banner--open) {\n grid-template-rows: 1fr;\n --_banner-motion-easing: var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.banner--closing) {\n --_banner-motion-easing: var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.banner--hidden) {\n display: none;\n}\n\n.banner-overflow {\n min-height: 0;\n overflow: visible;\n}\n\n.banner-surface {\n display: flex;\n position: relative;\n width: 100%;\n padding-inline-end: calc(var(--dimension-size-400) + var(--dimension-space-200));\n color: var(--ds-banner-description);\n background-color: var(--ds-banner-background);\n border-bottom: var(--dimension-stroke-width-012) solid var(--ds-banner-border);\n transform: translateY(-100%);\n transition: transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing);\n}\n\n:host(.banner--open) .banner-surface {\n transform: translateY(0);\n}\n\n.banner-copy {\n flex-basis: var(--dimension-card-width-sm);\n}\n\n:host(.banner--orientation-horizontal) .banner-surface {\n flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical) .banner-copy {\n flex-basis: 100%;\n}\n\n.banner-copy-flow {\n box-sizing: border-box;\n min-width: 0;\n padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--ds-banner-description);\n}\n\n.banner-heading {\n display: inline-block;\n width: auto;\n max-width: 100%;\n margin-inline-end: var(--dimension-space-100);\n vertical-align: baseline;\n color: var(--ds-banner-heading);\n}\n\n.banner-description {\n color: var(--ds-banner-description);\n}\n\n.banner-actions {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n flex-wrap: nowrap;\n min-width: 0;\n gap: var(--dimension-space-100);\n}\n\n.banner-actions slot {\n display: contents;\n}\n\n.banner-actions ::slotted(:not(ds-button-unfilled)),\n.banner-actions ::slotted(ds-button-unfilled:nth-of-type(n + 3)) {\n display: none;\n}\n\n.banner-actions--empty {\n display: none;\n}\n\n.banner-trailing {\n align-self: flex-start;\n flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical:not(.banner--has-actions)) .banner-trailing {\n display: contents;\n}\n\n:host(.banner--orientation-vertical.banner--has-actions) .banner-trailing {\n margin-inline: var(--dimension-space-100) auto;\n padding-block-end: var(--dimension-space-100);\n box-sizing: border-box;\n}\n\n:host(.banner--orientation-vertical) .banner-description {\n display: block;\n}\n\n:host(.banner--orientation-vertical) .banner-heading + .banner-description {\n margin-block-start: var(--dimension-space-050);\n}\n\n.banner-close {\n flex: 0 0 auto;\n}\n\n.banner-dismiss {\n position: absolute;\n inset-block-start: var(--dimension-space-100);\n inset-inline-end: var(--dimension-space-100);\n}\n\n:host(.banner--intent-neutral) {\n --ds-banner-faint-background: var(--color-background-faint-neutral);\n}\n\n:host(.banner--intent-brand) {\n --ds-banner-faint-background: var(--color-background-faint-brand);\n}\n\n:host(.banner--intent-positive) {\n --ds-banner-faint-background: var(--color-background-faint-positive);\n}\n\n:host(.banner--intent-warning) {\n --ds-banner-faint-background: var(--color-background-faint-warning);\n}\n\n:host(.banner--intent-caution) {\n --ds-banner-faint-background: var(--color-background-faint-caution);\n}\n\n:host(.banner--intent-negative) {\n --ds-banner-faint-background: var(--color-background-faint-negative);\n}\n\n:host(.banner--contrast-faint) {\n --ds-banner-background: var(--ds-banner-faint-background);\n --ds-banner-heading: var(--color-foreground-primary);\n --ds-banner-description: var(--color-foreground-secondary);\n --ds-banner-border: var(--color-border-tertiary);\n}\n\n:host(.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-neutral);\n --ds-banner-heading: var(--color-foreground-on-medium-background-primary);\n --ds-banner-description: var(--color-foreground-on-medium-background-secondary);\n --ds-banner-border: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-brand); }\n:host(.banner--intent-positive.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-positive); }\n:host(.banner--intent-warning.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-warning); }\n:host(.banner--intent-caution.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-caution); }\n:host(.banner--intent-negative.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-negative); }\n\n:host(.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-neutral);\n --ds-banner-heading: var(--color-foreground-on-strong-background-primary);\n --ds-banner-description: var(--color-foreground-on-strong-background-secondary);\n --ds-banner-border: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-brand); }\n:host(.banner--intent-positive.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-positive); }\n:host(.banner--intent-warning.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-warning); }\n:host(.banner--intent-caution.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-caution); }\n:host(.banner--intent-negative.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-negative); }\n\n:host(.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-neutral);\n --ds-banner-heading: var(--color-foreground-on-bold-background-primary);\n --ds-banner-description: var(--color-foreground-on-bold-background-secondary);\n --ds-banner-border: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-brand); }\n:host(.banner--intent-positive.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-positive); }\n:host(.banner--intent-warning.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-warning); }\n:host(.banner--intent-caution.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-caution); }\n:host(.banner--intent-negative.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-negative); }\n\n@media (prefers-reduced-motion: reduce) {\n :host,\n .banner-surface {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n .banner-surface {\n color: var(--ds-forced-color-content);\n background-color: var(--ds-forced-color-surface);\n border-bottom-color: var(--ds-forced-color-content);\n }\n\n .banner-heading,\n .banner-description {\n color: var(--ds-forced-color-content);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent =\n | 'neutral'\n | 'brand'\n | 'positive'\n | 'warning'\n | 'caution'\n | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n tag: 'ds-banner',\n styleUrl: 'Banner.css',\n scoped: true,\n})\nexport class Banner {\n @Element() el!: HTMLElement;\n\n /** Required explanatory copy. */\n @Prop() description!: string;\n /** Optional visual heading rendered before the description. */\n @Prop() heading: string = '';\n /** Semantic color family. */\n @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n /** Surface fill weight. */\n @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n /** Copy and action-lane arrangement, selected by the application. */\n @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n @Prop({ reflect: true }) open: boolean = true;\n /** Localized accessible label for the close control. */\n @Prop() dismissLabel: string = 'Dismiss banner';\n /** Live-region urgency, independent of visual intent. */\n @Prop() announcement: BannerAnnouncement = 'none';\n\n /** Emitted when the close control requests dismissal. The application controls open. */\n @Event() dsClose!: EventEmitter<MouseEvent>;\n /** Emitted once after controlled exit motion and layout collapse complete. */\n @Event() dsAfterClose!: EventEmitter<void>;\n\n @State() private rendered = false;\n @State() private phase: BannerPhase = 'closed';\n @State() private hasActions = false;\n\n private loaded = false;\n private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n private openFrame: number | null = null;\n private closePending = false;\n\n componentWillLoad() {\n this.rendered = this.open;\n }\n\n componentDidLoad() {\n this.loaded = true;\n this.updateActionsPresence();\n if (this.open) this.startOpen();\n }\n\n disconnectedCallback() {\n this.clearTransitionWork();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (!this.loaded) return;\n if (isOpen) this.startOpen();\n else this.startClose();\n }\n\n private get closeMotionMs(): number {\n return resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort3,\n TOKEN_DEFAULTS.animationDurationShort3,\n );\n }\n\n private clearTransitionWork() {\n if (this.transitionTimer) clearTimeout(this.transitionTimer);\n if (this.openFrame !== null) cancelAnimationFrame(this.openFrame);\n this.transitionTimer = null;\n this.openFrame = null;\n }\n\n private startOpen() {\n this.clearTransitionWork();\n this.closePending = false;\n this.rendered = true;\n this.phase = 'closed';\n this.openFrame = requestAnimationFrame(() => {\n this.openFrame = null;\n if (this.open) this.phase = 'open';\n });\n }\n\n private startClose() {\n this.clearTransitionWork();\n if (!this.rendered || this.phase === 'closed') {\n this.rendered = false;\n return;\n }\n\n this.closePending = true;\n this.phase = 'closing';\n const duration = this.closeMotionMs;\n if (duration <= 0) {\n this.finishClose();\n return;\n }\n this.transitionTimer = setTimeout(() => {\n this.transitionTimer = null;\n this.finishClose();\n }, duration);\n }\n\n private finishClose() {\n if (this.open || !this.closePending) return;\n this.closePending = false;\n this.rendered = false;\n this.phase = 'closed';\n this.dsAfterClose.emit();\n }\n\n private updateActionsPresence(slot?: HTMLSlotElement) {\n const actions = slot\n ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n this.hasActions = actions.length > 0;\n }\n\n private requestClose(event: CustomEvent<MouseEvent>) {\n if (!this.open || this.phase === 'closing') return;\n this.dsClose.emit(event.detail);\n }\n\n private get role(): 'status' | 'alert' | undefined {\n if (this.announcement === 'polite') return 'status';\n if (this.announcement === 'assertive') return 'alert';\n return undefined;\n }\n\n private get ariaLive(): 'polite' | 'assertive' | undefined {\n return this.announcement === 'none' ? undefined : this.announcement;\n }\n\n render() {\n const closing = this.phase === 'closing';\n const hostClass = {\n banner: true,\n 'banner--open': this.phase === 'open',\n 'banner--closing': closing,\n 'banner--hidden': !this.rendered,\n 'banner--has-actions': this.hasActions,\n [`banner--orientation-${this.orientation}`]: true,\n [`banner--intent-${this.intent}`]: true,\n [`banner--contrast-${this.contrast}`]: true,\n };\n\n return (\n <Host class={hostClass}>\n {this.rendered && (\n <div class=\"banner-overflow\">\n <section\n class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n role={this.role}\n aria-live={this.ariaLive}\n aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n aria-hidden={closing ? 'true' : undefined}\n inert={closing ? true : undefined}\n data-phase={this.phase}\n >\n {/* eslint-disable-next-line local/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n <ds-text\n class=\"banner-copy-flow\"\n as=\"div\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n >\n {this.heading && (\n <ds-text\n class=\"banner-heading\"\n as=\"span\"\n variant=\"text-title-small\"\n color=\"inherit\"\n >\n {this.heading}\n </ds-text>\n )}\n <span class=\"banner-description\">{this.description}</span>\n </ds-text>\n </div>\n <div class=\"banner-trailing ds-chrome-header__trailing\">\n <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n <slot\n name=\"actions\"\n onSlotchange={(event: Event) =>\n this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n }\n />\n </div>\n <div class=\"banner-dismiss\">\n <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n class=\"banner-close\"\n variant=\"icon\"\n icon=\"Cross\"\n size=\"md\"\n type=\"button\"\n background={this.contrast}\n aria-label={this.dismissLabel}\n hasBorder={false}\n activeFill={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n />\n </ds-tooltip>\n </div>\n </div>\n </section>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as o,d as s}from"./p-
|
|
1
|
+
import{B as o,d as s}from"./p-CywKWfgD.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-D7z9bJ6n.js";const t=o;const n=s;export{t as DsBarTitle,n 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-
|
|
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-1Zbh1MRy.js";import{d as n}from"./p-DQ94PkZA.js";import{d}from"./p-D3UKwTEo.js";import{d as l}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as m}from"./p-ByfXC1wu.js";import{d as b}from"./p-CbAfTqlb.js";import{d as h}from"./p-CkyXU1YX.js";import{d as w}from"./p-CfTThRNX.js";import{d as f}from"./p-u2OZHaLY.js";import{d as p}from"./p-jf1zCsuw.js";import{d as k}from"./p-CWLrXsDQ.js";const u=()=>`.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 g=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:"95172ca41cc7b71b2865cf2f0fc9975c36473f09"},this.responsiveMode==="mobile"?this.renderMobile():this.renderDesktop())}static get style(){return u()}},[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 v(){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-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-workflow":if(!customElements.get(t(s))){customElements.define(t(s),g)}break;case"ds-badge":if(!customElements.get(t(s))){a()}break;case"ds-button-filled":if(!customElements.get(t(s))){n()}break;case"ds-button-unfilled":if(!customElements.get(t(s))){d()}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))){w()}break;case"ds-switch":if(!customElements.get(t(s))){f()}break;case"ds-text":if(!customElements.get(t(s))){p()}break;case"ds-tooltip":if(!customElements.get(t(s))){k()}break}}))}v();const x=g;const _=v;export{x as DsBarWorkflow,_ as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-workflow.js.map
|