@ds-mo/ui 13.5.0 → 13.6.1
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 +9 -2
- package/dist/agent.json +171 -8
- package/dist/angular/ds-banner.d.ts +23 -0
- package/dist/angular/ds-banner.js +45 -0
- package/dist/angular/ds-modal.d.ts +1 -1
- package/dist/angular/ds-modal.js +3 -3
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -0
- package/dist/angular/proxies.d.ts +1 -0
- package/dist/angular/proxies.js +1 -0
- package/dist/components/ds-agent-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.d.ts +11 -0
- package/dist/components/ds-banner.js +2 -0
- package/dist/components/ds-banner.js.map +1 -0
- 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-card-data-viz.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-setting.js.map +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-line.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-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-actions.js.map +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-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-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-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-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/{p-BN9FZESH.js → p-1S9AW2MA.js} +2 -2
- package/dist/components/{p-D4bVE7e4.js → p-6B411hQA.js} +2 -2
- package/dist/components/{p-D5PN6zdD.js → p-B-kRByho.js} +2 -2
- package/dist/components/{p-CmUGA_q4.js → p-B4_0Ys4w.js} +2 -2
- package/dist/components/{p-BApNi_xA.js → p-B6RrZQqw.js} +2 -2
- package/dist/components/{p-CQ4vAZ9j.js → p-BBtjABBS.js} +2 -2
- package/dist/components/{p-CmMfRM1s.js → p-BFfHIu6y.js} +2 -2
- package/dist/components/{p-CBiAsFAZ.js → p-BPyymeuR.js} +2 -2
- package/dist/components/{p-Bgh0uG51.js → p-BR_oMaas.js} +2 -2
- package/dist/components/{p-w2kKeG_h.js → p-Bb4f5SuF.js} +2 -2
- package/dist/components/p-Bl6A5AJq.js +2 -0
- package/dist/components/{p-CIgag7g2.js.map → p-Bl6A5AJq.js.map} +1 -1
- package/dist/components/{p-B5snQKiP.js → p-BmNpPyzf.js} +2 -2
- package/dist/components/{p-CWItD0gL.js → p-Bmo4T96l.js} +2 -2
- package/dist/components/{p-DHAuidt1.js → p-Bsfpxto1.js} +2 -2
- package/dist/components/{p-BxEOlO5k.js → p-CKRJX0Y0.js} +2 -2
- package/dist/components/{p-1moOgMI-.js → p-Ca6s5fLR.js} +2 -2
- package/dist/components/{p-RT1mts9U.js → p-CbjFUpOj.js} +2 -2
- package/dist/components/{p-CqOswTy8.js → p-CuJ3J6OJ.js} +2 -2
- package/dist/components/{p-BQTJ7ePr.js → p-CxgMUvqg.js} +2 -2
- package/dist/components/{p-a6cnCKWk.js → p-CzraIk34.js} +2 -2
- package/dist/components/p-CzraIk34.js.map +1 -0
- package/dist/components/{p-CWKrq35a.js → p-D0bM3cKj.js} +2 -2
- package/dist/components/{p-UtfErnpX.js → p-D2cjoj2r.js} +2 -2
- package/dist/components/{p-CGwVooB6.js → p-DHF5cLzr.js} +2 -2
- package/dist/components/{p-BgjtMMye.js → p-DVuxzrCC.js} +2 -2
- package/dist/components/p-DX4c3kZ1.js +2 -0
- package/dist/components/p-DX4c3kZ1.js.map +1 -0
- package/dist/components/p-DaqFuVKZ.js +2 -0
- package/dist/components/p-DaqFuVKZ.js.map +1 -0
- package/dist/components/{p-DXGKfXTh.js → p-DfvDNcoq.js} +2 -2
- package/dist/components/p-Di81y9Q2.js +2 -0
- package/dist/components/{p-C_3mZMFK.js → p-Eep5mxtv.js} +2 -2
- package/dist/components/{p-DoNdiEly.js → p-IYy-jODg.js} +2 -2
- package/dist/components/{p-DtV263qO.js → p-iCjUWcp7.js} +2 -2
- package/dist/components/{p-BgASe-BH.js → p-og48Kh2i.js} +2 -2
- package/dist/components/{p-BSocHH2X.js → p-wOOAzVMC.js} +2 -2
- package/dist/docs/components.json +436 -1
- package/dist/mcp-data/registry/banner.json +333 -0
- package/dist/mcp-data/registry/bar-title.json +3 -3
- package/dist/mcp-data/registry/message-actions.json +2 -1
- package/dist/mcp-data/registry/mobile-bar-nav.json +3 -3
- package/dist/mcp-data/registry/modal.json +25 -5
- package/dist/mcp-data/registry/panel-tool-header.json +3 -3
- package/dist/mcp-data/registry/panel-tools.json +3 -2
- package/dist/mcp-data/registry/registry.json +173 -7
- package/dist/mcp-data/registry/shell-app.json +6 -2
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-banner.d.ts +13 -0
- package/dist/react/ds-banner.js +15 -0
- package/dist/types/components/Banner/Banner.d.ts +50 -0
- package/dist/types/components/Modal/Modal.d.ts +4 -0
- package/dist/types/components/PanelTools/PanelTools.d.ts +7 -0
- package/dist/types/components.d.ts +138 -0
- package/package.json +1 -1
- package/dist/components/p-4scN0Mgn.js +0 -2
- package/dist/components/p-B3PdrMP0.js +0 -2
- package/dist/components/p-B3PdrMP0.js.map +0 -1
- package/dist/components/p-CIgag7g2.js +0 -2
- package/dist/components/p-CUSz0JFa.js +0 -2
- package/dist/components/p-CUSz0JFa.js.map +0 -1
- package/dist/components/p-a6cnCKWk.js.map +0 -1
- /package/dist/components/{p-BN9FZESH.js.map → p-1S9AW2MA.js.map} +0 -0
- /package/dist/components/{p-D4bVE7e4.js.map → p-6B411hQA.js.map} +0 -0
- /package/dist/components/{p-D5PN6zdD.js.map → p-B-kRByho.js.map} +0 -0
- /package/dist/components/{p-CmUGA_q4.js.map → p-B4_0Ys4w.js.map} +0 -0
- /package/dist/components/{p-BApNi_xA.js.map → p-B6RrZQqw.js.map} +0 -0
- /package/dist/components/{p-CQ4vAZ9j.js.map → p-BBtjABBS.js.map} +0 -0
- /package/dist/components/{p-CmMfRM1s.js.map → p-BFfHIu6y.js.map} +0 -0
- /package/dist/components/{p-CBiAsFAZ.js.map → p-BPyymeuR.js.map} +0 -0
- /package/dist/components/{p-Bgh0uG51.js.map → p-BR_oMaas.js.map} +0 -0
- /package/dist/components/{p-w2kKeG_h.js.map → p-Bb4f5SuF.js.map} +0 -0
- /package/dist/components/{p-B5snQKiP.js.map → p-BmNpPyzf.js.map} +0 -0
- /package/dist/components/{p-CWItD0gL.js.map → p-Bmo4T96l.js.map} +0 -0
- /package/dist/components/{p-DHAuidt1.js.map → p-Bsfpxto1.js.map} +0 -0
- /package/dist/components/{p-BxEOlO5k.js.map → p-CKRJX0Y0.js.map} +0 -0
- /package/dist/components/{p-1moOgMI-.js.map → p-Ca6s5fLR.js.map} +0 -0
- /package/dist/components/{p-RT1mts9U.js.map → p-CbjFUpOj.js.map} +0 -0
- /package/dist/components/{p-CqOswTy8.js.map → p-CuJ3J6OJ.js.map} +0 -0
- /package/dist/components/{p-BQTJ7ePr.js.map → p-CxgMUvqg.js.map} +0 -0
- /package/dist/components/{p-CWKrq35a.js.map → p-D0bM3cKj.js.map} +0 -0
- /package/dist/components/{p-UtfErnpX.js.map → p-D2cjoj2r.js.map} +0 -0
- /package/dist/components/{p-CGwVooB6.js.map → p-DHF5cLzr.js.map} +0 -0
- /package/dist/components/{p-BgjtMMye.js.map → p-DVuxzrCC.js.map} +0 -0
- /package/dist/components/{p-DXGKfXTh.js.map → p-DfvDNcoq.js.map} +0 -0
- /package/dist/components/{p-4scN0Mgn.js.map → p-Di81y9Q2.js.map} +0 -0
- /package/dist/components/{p-C_3mZMFK.js.map → p-Eep5mxtv.js.map} +0 -0
- /package/dist/components/{p-DoNdiEly.js.map → p-IYy-jODg.js.map} +0 -0
- /package/dist/components/{p-DtV263qO.js.map → p-iCjUWcp7.js.map} +0 -0
- /package/dist/components/{p-BgASe-BH.js.map → p-og48Kh2i.js.map} +0 -0
- /package/dist/components/{p-BSocHH2X.js.map → p-wOOAzVMC.js.map} +0 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { createComponent } from './react-runtime.js';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { DsBanner as DsBannerElement, defineCustomElement as defineDsBanner } from "@ds-mo/ui/dist/components/ds-banner.js";
|
|
5
|
+
export const DsBanner = /*@__PURE__*/ createComponent({
|
|
6
|
+
tagName: 'ds-banner',
|
|
7
|
+
elementClass: DsBannerElement,
|
|
8
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
9
|
+
react: React,
|
|
10
|
+
events: {
|
|
11
|
+
onDsClose: 'dsClose',
|
|
12
|
+
onDsAfterClose: 'dsAfterClose'
|
|
13
|
+
},
|
|
14
|
+
defineCustomElement: defineDsBanner
|
|
15
|
+
});
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
export type BannerIntent = 'neutral' | 'brand' | 'positive' | 'warning' | 'caution' | 'negative';
|
|
3
|
+
export type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';
|
|
4
|
+
export type BannerAnnouncement = 'none' | 'polite' | 'assertive';
|
|
5
|
+
export type BannerOrientation = 'horizontal' | 'vertical';
|
|
6
|
+
export declare class Banner {
|
|
7
|
+
el: HTMLElement;
|
|
8
|
+
/** Required explanatory copy. */
|
|
9
|
+
description: string;
|
|
10
|
+
/** Optional visual heading rendered before the description. */
|
|
11
|
+
heading: string;
|
|
12
|
+
/** Semantic color family. */
|
|
13
|
+
intent: BannerIntent;
|
|
14
|
+
/** Surface fill weight. */
|
|
15
|
+
contrast: BannerContrast;
|
|
16
|
+
/** Copy and action-lane arrangement, selected by the application. */
|
|
17
|
+
orientation: BannerOrientation;
|
|
18
|
+
/** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */
|
|
19
|
+
open: boolean;
|
|
20
|
+
/** Localized accessible label for the close control. */
|
|
21
|
+
dismissLabel: string;
|
|
22
|
+
/** Live-region urgency, independent of visual intent. */
|
|
23
|
+
announcement: BannerAnnouncement;
|
|
24
|
+
/** Emitted when the close control requests dismissal. The application controls open. */
|
|
25
|
+
dsClose: EventEmitter<MouseEvent>;
|
|
26
|
+
/** Emitted once after controlled exit motion and layout collapse complete. */
|
|
27
|
+
dsAfterClose: EventEmitter<void>;
|
|
28
|
+
private rendered;
|
|
29
|
+
private phase;
|
|
30
|
+
private hasActions;
|
|
31
|
+
private loaded;
|
|
32
|
+
private transitionTimer;
|
|
33
|
+
private openFrame;
|
|
34
|
+
private closePending;
|
|
35
|
+
componentWillLoad(): void;
|
|
36
|
+
componentDidLoad(): void;
|
|
37
|
+
disconnectedCallback(): void;
|
|
38
|
+
onOpenChange(isOpen: boolean): void;
|
|
39
|
+
private get closeMotionMs();
|
|
40
|
+
private clearTransitionWork;
|
|
41
|
+
private startOpen;
|
|
42
|
+
private startClose;
|
|
43
|
+
private finishClose;
|
|
44
|
+
private updateActionsPresence;
|
|
45
|
+
private requestClose;
|
|
46
|
+
private get role();
|
|
47
|
+
private get ariaLive();
|
|
48
|
+
render(): any;
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=Banner.d.ts.map
|
|
@@ -9,6 +9,8 @@ export declare class Modal {
|
|
|
9
9
|
el: HTMLElement;
|
|
10
10
|
open: boolean;
|
|
11
11
|
heading: string;
|
|
12
|
+
/** Optional supporting copy shown below the heading. */
|
|
13
|
+
description: string;
|
|
12
14
|
closeAriaLabel: string;
|
|
13
15
|
modalWidth: ModalWidth | string;
|
|
14
16
|
/** Optional id reference for explanatory content in the default slot. */
|
|
@@ -20,6 +22,7 @@ export declare class Modal {
|
|
|
20
22
|
/** Emitted after exit motion completes, the top layer closes, and focus is restored. */
|
|
21
23
|
dsAfterClose: EventEmitter<void>;
|
|
22
24
|
private titleId;
|
|
25
|
+
private descriptionId;
|
|
23
26
|
private dialogEl;
|
|
24
27
|
private previousFocus;
|
|
25
28
|
private closeTimer;
|
|
@@ -34,6 +37,7 @@ export declare class Modal {
|
|
|
34
37
|
private handleBackdropPointerDown;
|
|
35
38
|
private handleKeyDown;
|
|
36
39
|
private get resolvedWidth();
|
|
40
|
+
private get describedBy();
|
|
37
41
|
private get closeAnimationMs();
|
|
38
42
|
private finishClose;
|
|
39
43
|
render(): any;
|
|
@@ -56,6 +56,7 @@ export declare class PanelTools {
|
|
|
56
56
|
private presentationMotionSuppressed;
|
|
57
57
|
private rovingIndex;
|
|
58
58
|
private fullViewToolIds;
|
|
59
|
+
private railBodyScrollable;
|
|
59
60
|
private motionEnableGeneration;
|
|
60
61
|
private presentationMotionGeneration;
|
|
61
62
|
private transitionGeneration;
|
|
@@ -64,6 +65,8 @@ export declare class PanelTools {
|
|
|
64
65
|
private ignoreReplacementTerminal;
|
|
65
66
|
private focusBeforeFullscreen;
|
|
66
67
|
private fullViewObserver;
|
|
68
|
+
private railBodyEl?;
|
|
69
|
+
private railBodyObserver?;
|
|
67
70
|
private get railItems();
|
|
68
71
|
private get orderedRailItems();
|
|
69
72
|
disconnectedCallback(): void;
|
|
@@ -77,6 +80,10 @@ export declare class PanelTools {
|
|
|
77
80
|
activeToolChanged(): void;
|
|
78
81
|
storageKeyChanged(): void;
|
|
79
82
|
componentDidLoad(): void;
|
|
83
|
+
componentDidRender(): void;
|
|
84
|
+
private connectRailBodyObserver;
|
|
85
|
+
private disconnectRailBodyObserver;
|
|
86
|
+
private updateRailBodyScrollable;
|
|
80
87
|
itemsChanged(): void;
|
|
81
88
|
private restoreLastActiveTool;
|
|
82
89
|
private persistLastActiveTool;
|
|
@@ -9,6 +9,7 @@ import { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, Conv
|
|
|
9
9
|
import { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
|
|
10
10
|
import { AvatarSize } from "./components/Avatar/Avatar";
|
|
11
11
|
import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
|
|
12
|
+
import { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } from "./components/Banner/Banner";
|
|
12
13
|
import { NavChromeStyle } from "./shell/nav-chrome";
|
|
13
14
|
import { BarNavTab } from "./components/BarNav/bar-nav-types";
|
|
14
15
|
import { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
|
|
@@ -65,6 +66,7 @@ export { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, Conv
|
|
|
65
66
|
export { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
|
|
66
67
|
export { AvatarSize } from "./components/Avatar/Avatar";
|
|
67
68
|
export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
|
|
69
|
+
export { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } from "./components/Banner/Banner";
|
|
68
70
|
export { NavChromeStyle } from "./shell/nav-chrome";
|
|
69
71
|
export { BarNavTab } from "./components/BarNav/bar-nav-types";
|
|
70
72
|
export { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
|
|
@@ -269,6 +271,47 @@ export namespace Components {
|
|
|
269
271
|
*/
|
|
270
272
|
"variant": BadgeVariant;
|
|
271
273
|
}
|
|
274
|
+
interface DsBanner {
|
|
275
|
+
/**
|
|
276
|
+
* Live-region urgency, independent of visual intent.
|
|
277
|
+
* @default 'none'
|
|
278
|
+
*/
|
|
279
|
+
"announcement": BannerAnnouncement;
|
|
280
|
+
/**
|
|
281
|
+
* Surface fill weight.
|
|
282
|
+
* @default 'faint'
|
|
283
|
+
*/
|
|
284
|
+
"contrast": BannerContrast;
|
|
285
|
+
/**
|
|
286
|
+
* Required explanatory copy.
|
|
287
|
+
*/
|
|
288
|
+
"description": string;
|
|
289
|
+
/**
|
|
290
|
+
* Localized accessible label for the close control.
|
|
291
|
+
* @default 'Dismiss banner'
|
|
292
|
+
*/
|
|
293
|
+
"dismissLabel": string;
|
|
294
|
+
/**
|
|
295
|
+
* Optional visual heading rendered before the description.
|
|
296
|
+
* @default ''
|
|
297
|
+
*/
|
|
298
|
+
"heading": string;
|
|
299
|
+
/**
|
|
300
|
+
* Semantic color family.
|
|
301
|
+
* @default 'neutral'
|
|
302
|
+
*/
|
|
303
|
+
"intent": BannerIntent;
|
|
304
|
+
/**
|
|
305
|
+
* Controlled visibility. Keep the element mounted until dsAfterClose when unmounting.
|
|
306
|
+
* @default true
|
|
307
|
+
*/
|
|
308
|
+
"open": boolean;
|
|
309
|
+
/**
|
|
310
|
+
* Copy and action-lane arrangement, selected by the application.
|
|
311
|
+
* @default 'horizontal'
|
|
312
|
+
*/
|
|
313
|
+
"orientation": BannerOrientation;
|
|
314
|
+
}
|
|
272
315
|
interface DsBarNav {
|
|
273
316
|
/**
|
|
274
317
|
* Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
|
|
@@ -1584,6 +1627,11 @@ export namespace Components {
|
|
|
1584
1627
|
* @default 'Close'
|
|
1585
1628
|
*/
|
|
1586
1629
|
"closeAriaLabel": string;
|
|
1630
|
+
/**
|
|
1631
|
+
* Optional supporting copy shown below the heading.
|
|
1632
|
+
* @default ''
|
|
1633
|
+
*/
|
|
1634
|
+
"description": string;
|
|
1587
1635
|
"heading": string;
|
|
1588
1636
|
/**
|
|
1589
1637
|
* @default 'md'
|
|
@@ -2719,6 +2767,10 @@ export namespace Components {
|
|
|
2719
2767
|
"label": string;
|
|
2720
2768
|
}
|
|
2721
2769
|
}
|
|
2770
|
+
export interface DsBannerCustomEvent<T> extends CustomEvent<T> {
|
|
2771
|
+
detail: T;
|
|
2772
|
+
target: HTMLDsBannerElement;
|
|
2773
|
+
}
|
|
2722
2774
|
export interface DsBarNavCustomEvent<T> extends CustomEvent<T> {
|
|
2723
2775
|
detail: T;
|
|
2724
2776
|
target: HTMLDsBarNavElement;
|
|
@@ -2922,6 +2974,24 @@ declare global {
|
|
|
2922
2974
|
prototype: HTMLDsBadgeElement;
|
|
2923
2975
|
new (): HTMLDsBadgeElement;
|
|
2924
2976
|
};
|
|
2977
|
+
interface HTMLDsBannerElementEventMap {
|
|
2978
|
+
"dsClose": MouseEvent;
|
|
2979
|
+
"dsAfterClose": void;
|
|
2980
|
+
}
|
|
2981
|
+
interface HTMLDsBannerElement extends Components.DsBanner, HTMLStencilElement {
|
|
2982
|
+
addEventListener<K extends keyof HTMLDsBannerElementEventMap>(type: K, listener: (this: HTMLDsBannerElement, ev: DsBannerCustomEvent<HTMLDsBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
2983
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
2984
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
2985
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
2986
|
+
removeEventListener<K extends keyof HTMLDsBannerElementEventMap>(type: K, listener: (this: HTMLDsBannerElement, ev: DsBannerCustomEvent<HTMLDsBannerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
2987
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
2988
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
2989
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
2990
|
+
}
|
|
2991
|
+
var HTMLDsBannerElement: {
|
|
2992
|
+
prototype: HTMLDsBannerElement;
|
|
2993
|
+
new (): HTMLDsBannerElement;
|
|
2994
|
+
};
|
|
2925
2995
|
interface HTMLDsBarNavElementEventMap {
|
|
2926
2996
|
"dsTabChange": string;
|
|
2927
2997
|
}
|
|
@@ -3834,6 +3904,7 @@ declare global {
|
|
|
3834
3904
|
"ds-attachment-list": HTMLDsAttachmentListElement;
|
|
3835
3905
|
"ds-avatar": HTMLDsAvatarElement;
|
|
3836
3906
|
"ds-badge": HTMLDsBadgeElement;
|
|
3907
|
+
"ds-banner": HTMLDsBannerElement;
|
|
3837
3908
|
"ds-bar-nav": HTMLDsBarNavElement;
|
|
3838
3909
|
"ds-bar-title": HTMLDsBarTitleElement;
|
|
3839
3910
|
"ds-bar-workflow": HTMLDsBarWorkflowElement;
|
|
@@ -4049,6 +4120,55 @@ declare namespace LocalJSX {
|
|
|
4049
4120
|
*/
|
|
4050
4121
|
"variant"?: BadgeVariant;
|
|
4051
4122
|
}
|
|
4123
|
+
interface DsBanner {
|
|
4124
|
+
/**
|
|
4125
|
+
* Live-region urgency, independent of visual intent.
|
|
4126
|
+
* @default 'none'
|
|
4127
|
+
*/
|
|
4128
|
+
"announcement"?: BannerAnnouncement;
|
|
4129
|
+
/**
|
|
4130
|
+
* Surface fill weight.
|
|
4131
|
+
* @default 'faint'
|
|
4132
|
+
*/
|
|
4133
|
+
"contrast"?: BannerContrast;
|
|
4134
|
+
/**
|
|
4135
|
+
* Required explanatory copy.
|
|
4136
|
+
*/
|
|
4137
|
+
"description": string;
|
|
4138
|
+
/**
|
|
4139
|
+
* Localized accessible label for the close control.
|
|
4140
|
+
* @default 'Dismiss banner'
|
|
4141
|
+
*/
|
|
4142
|
+
"dismissLabel"?: string;
|
|
4143
|
+
/**
|
|
4144
|
+
* Optional visual heading rendered before the description.
|
|
4145
|
+
* @default ''
|
|
4146
|
+
*/
|
|
4147
|
+
"heading"?: string;
|
|
4148
|
+
/**
|
|
4149
|
+
* Semantic color family.
|
|
4150
|
+
* @default 'neutral'
|
|
4151
|
+
*/
|
|
4152
|
+
"intent"?: BannerIntent;
|
|
4153
|
+
/**
|
|
4154
|
+
* Emitted once after controlled exit motion and layout collapse complete.
|
|
4155
|
+
*/
|
|
4156
|
+
"onDsAfterClose"?: (event: DsBannerCustomEvent<void>) => void;
|
|
4157
|
+
/**
|
|
4158
|
+
* Emitted when the close control requests dismissal. The application controls open.
|
|
4159
|
+
*/
|
|
4160
|
+
"onDsClose"?: (event: DsBannerCustomEvent<MouseEvent>) => void;
|
|
4161
|
+
/**
|
|
4162
|
+
* Controlled visibility. Keep the element mounted until dsAfterClose when unmounting.
|
|
4163
|
+
* @default true
|
|
4164
|
+
*/
|
|
4165
|
+
"open"?: boolean;
|
|
4166
|
+
/**
|
|
4167
|
+
* Copy and action-lane arrangement, selected by the application.
|
|
4168
|
+
* @default 'horizontal'
|
|
4169
|
+
*/
|
|
4170
|
+
"orientation"?: BannerOrientation;
|
|
4171
|
+
}
|
|
4052
4172
|
interface DsBarNav {
|
|
4053
4173
|
/**
|
|
4054
4174
|
* Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
|
|
@@ -5467,6 +5587,11 @@ declare namespace LocalJSX {
|
|
|
5467
5587
|
* @default 'Close'
|
|
5468
5588
|
*/
|
|
5469
5589
|
"closeAriaLabel"?: string;
|
|
5590
|
+
/**
|
|
5591
|
+
* Optional supporting copy shown below the heading.
|
|
5592
|
+
* @default ''
|
|
5593
|
+
*/
|
|
5594
|
+
"description"?: string;
|
|
5470
5595
|
"heading": string;
|
|
5471
5596
|
/**
|
|
5472
5597
|
* @default 'md'
|
|
@@ -6766,6 +6891,16 @@ declare namespace LocalJSX {
|
|
|
6766
6891
|
"gradientBackground": boolean;
|
|
6767
6892
|
"label": string | undefined;
|
|
6768
6893
|
}
|
|
6894
|
+
interface DsBannerAttributes {
|
|
6895
|
+
"description": string;
|
|
6896
|
+
"heading": string;
|
|
6897
|
+
"intent": BannerIntent;
|
|
6898
|
+
"contrast": BannerContrast;
|
|
6899
|
+
"orientation": BannerOrientation;
|
|
6900
|
+
"open": boolean;
|
|
6901
|
+
"dismissLabel": string;
|
|
6902
|
+
"announcement": BannerAnnouncement;
|
|
6903
|
+
}
|
|
6769
6904
|
interface DsBarNavAttributes {
|
|
6770
6905
|
"navStyle": NavChromeStyle;
|
|
6771
6906
|
"value": string;
|
|
@@ -7093,6 +7228,7 @@ declare namespace LocalJSX {
|
|
|
7093
7228
|
interface DsModalAttributes {
|
|
7094
7229
|
"open": boolean;
|
|
7095
7230
|
"heading": string;
|
|
7231
|
+
"description": string;
|
|
7096
7232
|
"closeAriaLabel": string;
|
|
7097
7233
|
"modalWidth": ModalWidth | string;
|
|
7098
7234
|
"ariaDescribedby": string | undefined;
|
|
@@ -7358,6 +7494,7 @@ declare namespace LocalJSX {
|
|
|
7358
7494
|
"ds-attachment-list": Omit<DsAttachmentList, keyof DsAttachmentListAttributes> & { [K in keyof DsAttachmentList & keyof DsAttachmentListAttributes]?: DsAttachmentList[K] } & { [K in keyof DsAttachmentList & keyof DsAttachmentListAttributes as `attr:${K}`]?: DsAttachmentListAttributes[K] } & { [K in keyof DsAttachmentList & keyof DsAttachmentListAttributes as `prop:${K}`]?: DsAttachmentList[K] };
|
|
7359
7495
|
"ds-avatar": Omit<DsAvatar, keyof DsAvatarAttributes> & { [K in keyof DsAvatar & keyof DsAvatarAttributes]?: DsAvatar[K] } & { [K in keyof DsAvatar & keyof DsAvatarAttributes as `attr:${K}`]?: DsAvatarAttributes[K] } & { [K in keyof DsAvatar & keyof DsAvatarAttributes as `prop:${K}`]?: DsAvatar[K] };
|
|
7360
7496
|
"ds-badge": Omit<DsBadge, keyof DsBadgeAttributes> & { [K in keyof DsBadge & keyof DsBadgeAttributes]?: DsBadge[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `attr:${K}`]?: DsBadgeAttributes[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `prop:${K}`]?: DsBadge[K] };
|
|
7497
|
+
"ds-banner": Omit<DsBanner, keyof DsBannerAttributes> & { [K in keyof DsBanner & keyof DsBannerAttributes]?: DsBanner[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `attr:${K}`]?: DsBannerAttributes[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `prop:${K}`]?: DsBanner[K] } & OneOf<"description", DsBanner["description"], DsBannerAttributes["description"]>;
|
|
7361
7498
|
"ds-bar-nav": Omit<DsBarNav, keyof DsBarNavAttributes> & { [K in keyof DsBarNav & keyof DsBarNavAttributes]?: DsBarNav[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `attr:${K}`]?: DsBarNavAttributes[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `prop:${K}`]?: DsBarNav[K] };
|
|
7362
7499
|
"ds-bar-title": Omit<DsBarTitle, keyof DsBarTitleAttributes> & { [K in keyof DsBarTitle & keyof DsBarTitleAttributes]?: DsBarTitle[K] } & { [K in keyof DsBarTitle & keyof DsBarTitleAttributes as `attr:${K}`]?: DsBarTitleAttributes[K] } & { [K in keyof DsBarTitle & keyof DsBarTitleAttributes as `prop:${K}`]?: DsBarTitle[K] } & OneOf<"heading", DsBarTitle["heading"], DsBarTitleAttributes["heading"]>;
|
|
7363
7500
|
"ds-bar-workflow": Omit<DsBarWorkflow, keyof DsBarWorkflowAttributes> & { [K in keyof DsBarWorkflow & keyof DsBarWorkflowAttributes]?: DsBarWorkflow[K] } & { [K in keyof DsBarWorkflow & keyof DsBarWorkflowAttributes as `attr:${K}`]?: DsBarWorkflowAttributes[K] } & { [K in keyof DsBarWorkflow & keyof DsBarWorkflowAttributes as `prop:${K}`]?: DsBarWorkflow[K] } & OneOf<"heading", DsBarWorkflow["heading"], DsBarWorkflowAttributes["heading"]>;
|
|
@@ -7430,6 +7567,7 @@ declare module "@stencil/core" {
|
|
|
7430
7567
|
"ds-attachment-list": LocalJSX.IntrinsicElements["ds-attachment-list"] & JSXBase.HTMLAttributes<HTMLDsAttachmentListElement>;
|
|
7431
7568
|
"ds-avatar": LocalJSX.IntrinsicElements["ds-avatar"] & JSXBase.HTMLAttributes<HTMLDsAvatarElement>;
|
|
7432
7569
|
"ds-badge": LocalJSX.IntrinsicElements["ds-badge"] & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
|
|
7570
|
+
"ds-banner": LocalJSX.IntrinsicElements["ds-banner"] & JSXBase.HTMLAttributes<HTMLDsBannerElement>;
|
|
7433
7571
|
"ds-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;
|
|
7434
7572
|
"ds-bar-title": LocalJSX.IntrinsicElements["ds-bar-title"] & JSXBase.HTMLAttributes<HTMLDsBarTitleElement>;
|
|
7435
7573
|
"ds-bar-workflow": LocalJSX.IntrinsicElements["ds-bar-workflow"] & JSXBase.HTMLAttributes<HTMLDsBarWorkflowElement>;
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as e,H as t,h as s,a,t as c}from"./index.js";import{d as i}from"./p-BAfG3M8z.js";import{d}from"./p-w2kKeG_h.js";const n=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.sc-ds-empty-state-h,.empty-state.sc-ds-empty-state,.empty-state__text.sc-ds-empty-state{box-sizing:border-box}.empty-state.sc-ds-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--dimension-space-100);height:100%;width:100%;text-align:center}.empty-state__icon.sc-ds-empty-state{flex:0 0 auto}.empty-state__text.sc-ds-empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--dimension-space-050);width:100%}`;const o=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.body=""}render(){const e=Boolean(this.heading?.trim());const t=e&&Boolean(this.icon);return s(a,{key:"4b704391ddac87840c5b8b255ce1cc18301b09d5"},s("div",{key:"38c526f14a3d6d82b57bffd1629235d7810eb7c2",class:"empty-state"},t&&s("ds-icon",{key:"287f5ece1ee60e28a16504b7afd4ca30b419996e",class:"empty-state__icon",name:this.icon,size:"xl",color:"primary"}),s("div",{key:"303b970c26e43ef6bc86def5509979d1d32ca3fe",class:"empty-state__text"},e&&s("ds-text",{key:"e247bfacbd3f0c51588c713122fde0a21846ee9b",class:"empty-state__title",as:"div",variant:"text-title-small",color:"primary",align:"center"},this.heading),this.body&&s("ds-text",{key:"eea57e18abba91e439bd0cb9d5a6805fcd410548",class:"empty-state__body",as:"p",variant:"text-body-medium",color:"secondary",align:"center"},this.body))))}static get style(){return n()}},[2,"ds-empty-state",{icon:[1],heading:[1],body:[1]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-empty-state","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-empty-state":if(!customElements.get(c(e))){customElements.define(c(e),o)}break;case"ds-icon":if(!customElements.get(c(e))){i()}break;case"ds-text":if(!customElements.get(c(e))){d()}break}}))}m();export{o as E,m as d};
|
|
2
|
-
//# sourceMappingURL=p-4scN0Mgn.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as e,H as s,c as o,h as a,a as d,t as n}from"./index.js";import{d as l}from"./p-DoNdiEly.js";import{d as i}from"./p-Bgh0uG51.js";import{d as r}from"./p-BAfG3M8z.js";import{d as t}from"./p-Ca-I2UnB.js";import{d as c}from"./p-w2kKeG_h.js";import{d as h}from"./p-UtfErnpX.js";const p=()=>`.ds-control--lg.sc-ds-panel-tool-header,.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header,.ds-control--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header,.ds-control--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--lg.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-chrome-space--sm.sc-ds-panel-tool-header{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-header-h,.ds-chrome-space--md.sc-ds-panel-tool-header{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-header-h,.ds-chrome-space--lg.sc-ds-panel-tool-header{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-header-h,.ds-chrome-row.sc-ds-panel-tool-header,.ds-chrome-column.sc-ds-panel-tool-header-h,.ds-chrome-column.sc-ds-panel-tool-header,.ds-chrome-grid.sc-ds-panel-tool-header-h,.ds-chrome-grid.sc-ds-panel-tool-header{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-header-h,.ds-chrome-row.sc-ds-panel-tool-header{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-header-h,.ds-chrome-column.sc-ds-panel-tool-header{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-header-h,.ds-chrome-grid.sc-ds-panel-tool-header{display:grid;align-items:center}.sc-ds-panel-tool-header-h{display:block;flex:0 0 auto;box-sizing:border-box}.panel-tool-header.sc-ds-panel-tool-header{height:var(--dimension-size-600);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);color:var(--color-foreground-primary);-webkit-user-select:none;user-select:none}.panel-tool-header__leading.sc-ds-panel-tool-header,.panel-tool-header__trailing.sc-ds-panel-tool-header{display:flex;align-items:center;min-width:0}.panel-tool-header__leading.sc-ds-panel-tool-header:empty,.panel-tool-header__trailing.sc-ds-panel-tool-header:empty{display:none}.panel-tool-header__leading.sc-ds-panel-tool-header{flex:0 0 auto}.panel-tool-header__trailing.sc-ds-panel-tool-header{flex:0 0 auto;gap:var(--dimension-space-050);justify-content:flex-end}ds-text.panel-tool-header__heading.sc-ds-panel-tool-header{display:inline-flex;flex:1 1 0;align-items:center;width:auto;min-width:0;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;text-align:left;-webkit-user-select:none;user-select:none}`;const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsBack=o(this,"dsBack");this.dsMenuToggle=o(this,"dsMenuToggle");this.dsAction=o(this,"dsAction");this.heading="";this.showBack=false;this.backIcon="ChevronLeft";this.backAriaLabel="Back";this.showMenu=true;this.menuAriaLabel="More options";this.menuTriggerId="";this.menuExpanded=false;this.actions=[]}async focusMenuTrigger(){const e=this.el.querySelector('ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id="menu"]');await(e?.setFocus?.())}render(){const e=this.actions.length>0;const s=e?this.actions:this.showMenu?[{id:"menu",icon:"Ellipses",ariaLabel:this.menuAriaLabel,triggerId:this.menuTriggerId,controls:this.menuControls,expanded:this.menuExpanded,haspopup:"menu"}]:[];return a(d,{key:"b431a602e3706af8fcec89215fd1004e180a92b5"},a("header",{key:"d4db46e2bc03d189524e0f2f5cfa418b81366f30",class:"panel-tool-header ds-chrome-row ds-chrome-space--md"},a("div",{key:"4b14a4cd7b5138b8f01cf5f1bf844b612f0027af",class:"panel-tool-header__leading"},this.showBack?a("ds-tooltip",{label:this.backAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{class:"panel-tool-header__back",variant:"icon",icon:this.backIcon,size:"md","aria-label":this.backAriaLabel,activeFill:false,hasBorder:false,onDsClick:e=>this.dsBack.emit(e.detail)})):null),a("ds-text",{key:"80ae342a37c7dee25da8918ec1a231ebfbe10c65",class:"panel-tool-header__heading ds-control--md",as:"h2",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.heading),a("div",{key:"6b6103f69efdacc7c4dbe287bd97b741385e5ce6",class:"panel-tool-header__trailing"},s.map((s=>a("ds-tooltip",{key:s.id,label:s.ariaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:s.triggerId||undefined,"data-header-action-id":s.id,class:{"panel-tool-header__action":true,"panel-tool-header__menu":s.id==="menu"},variant:"icon",icon:s.icon,size:"md","aria-label":s.ariaLabel,haspopup:s.haspopup,controls:s.controls,expanded:s.expanded,pressed:s.pressed,isActive:!!s.expanded,isInactive:s.isInactive,activeFill:false,hasBorder:false,onDsClick:o=>{if(!e&&s.id==="menu")this.dsMenuToggle.emit(o.detail);this.dsAction.emit({id:s.id,originalEvent:o.detail})}})))))))}get el(){return this}static get style(){return p()}},[2,"ds-panel-tool-header",{heading:[1],showBack:[4,"show-back"],backIcon:[1,"back-icon"],backAriaLabel:[1,"back-aria-label"],showMenu:[4,"show-menu"],menuAriaLabel:[1,"menu-aria-label"],menuTriggerId:[1,"menu-trigger-id"],menuControls:[1,"menu-controls"],menuExpanded:[4,"menu-expanded"],actions:[16],focusMenuTrigger:[64]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-header","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-header":if(!customElements.get(n(e))){customElements.define(n(e),m)}break;case"ds-badge":if(!customElements.get(n(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){i()}break;case"ds-icon":if(!customElements.get(n(e))){r()}break;case"ds-loader":if(!customElements.get(n(e))){t()}break;case"ds-text":if(!customElements.get(n(e))){c()}break;case"ds-tooltip":if(!customElements.get(n(e))){h()}break}}))}g();export{m as P,g as d};
|
|
2
|
-
//# sourceMappingURL=p-B3PdrMP0.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["panelToolHeaderCss","PanelToolHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","showBack","backIcon","backAriaLabel","showMenu","menuAriaLabel","menuTriggerId","menuExpanded","actions","focusMenuTrigger","trigger","el","querySelector","setFocus","render","authoredActions","length","id","icon","ariaLabel","triggerId","controls","menuControls","expanded","haspopup","h","Host","key","class","label","side","size","variant","activeFill","hasBorder","onDsClick","event","dsBack","emit","detail","as","emphasis","color","lineTruncation","map","action","undefined","pressed","isActive","isInactive","dsMenuToggle","dsAction","originalEvent"],"sources":["src/wc/components/PanelToolHeader/PanelToolHeader.css?tag=ds-panel-tool-header&encapsulation=scoped","src/wc/components/PanelToolHeader/PanelToolHeader.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n\n:host {\n display: block;\n flex: 0 0 auto;\n box-sizing: border-box;\n}\n\n.panel-tool-header {\n height: var(--dimension-size-600);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n color: var(--color-foreground-primary);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.panel-tool-header__leading,\n.panel-tool-header__trailing {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n display: none;\n}\n\n.panel-tool-header__leading {\n flex: 0 0 auto;\n}\n\n.panel-tool-header__trailing {\n flex: 0 0 auto;\n gap: var(--dimension-space-050);\n justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n display: inline-flex;\n flex: 1 1 0;\n align-items: center;\n width: auto;\n min-width: 0;\n height: var(--ds-control-height);\n padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n box-sizing: border-box;\n text-align: left;\n -webkit-user-select: none;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type { PanelToolsHeaderAction } from '../PanelTools/panel-tools-types';\n\n@Component({\n tag: 'ds-panel-tool-header',\n styleUrl: 'PanelToolHeader.css',\n scoped: true,\n})\nexport class PanelToolHeader {\n @Element() el!: HTMLElement;\n\n /** Visible heading for the active tool view. */\n @Prop() heading: string = '';\n /** Show the leading Back action. */\n @Prop() showBack: boolean = false;\n /** Canonical icon for the leading navigation or dismiss action. */\n @Prop() backIcon: string = 'ChevronLeft';\n /** Accessible name for the leading navigation or dismiss action. */\n @Prop() backAriaLabel: string = 'Back';\n /** Show the trailing options-menu trigger. */\n @Prop() showMenu: boolean = true;\n /** Accessible name for the options-menu trigger. */\n @Prop() menuAriaLabel: string = 'More options';\n /** Stable id placed on the menu trigger host for ds-menu anchoring. */\n @Prop() menuTriggerId: string = '';\n /** Id of the menu controlled by the trigger. */\n @Prop() menuControls: string | undefined;\n /** Whether the controlled menu is open. */\n @Prop() menuExpanded: boolean = false;\n /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */\n @Prop() actions: PanelToolsHeaderAction[] = [];\n\n @Event() dsBack!: EventEmitter<MouseEvent>;\n @Event() dsMenuToggle!: EventEmitter<MouseEvent>;\n @Event() dsAction!: EventEmitter<{ id: string; originalEvent: MouseEvent }>;\n\n @Method()\n async focusMenuTrigger() {\n const trigger = this.el.querySelector(\n 'ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id=\"menu\"]'\n ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n await trigger?.setFocus?.();\n }\n\n render() {\n const authoredActions = this.actions.length > 0;\n const actions: PanelToolsHeaderAction[] = authoredActions\n ? this.actions\n : this.showMenu\n ? [\n {\n id: 'menu',\n icon: 'Ellipses',\n ariaLabel: this.menuAriaLabel,\n triggerId: this.menuTriggerId,\n controls: this.menuControls,\n expanded: this.menuExpanded,\n haspopup: 'menu',\n },\n ]\n : [];\n\n return (\n <Host>\n <header class=\"panel-tool-header ds-chrome-row ds-chrome-space--md\">\n <div class=\"panel-tool-header__leading\">\n {this.showBack ? (\n <ds-tooltip label={this.backAriaLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n class=\"panel-tool-header__back\"\n variant=\"icon\"\n icon={this.backIcon}\n size=\"md\"\n aria-label={this.backAriaLabel}\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n />\n </ds-tooltip>\n ) : null}\n </div>\n <ds-text\n class=\"panel-tool-header__heading ds-control--md\"\n as=\"h2\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n lineTruncation={1}\n >\n {this.heading}\n </ds-text>\n <div class=\"panel-tool-header__trailing\">\n {actions.map(action => (\n <ds-tooltip key={action.id} label={action.ariaLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n id={action.triggerId || undefined}\n data-header-action-id={action.id}\n class={{\n 'panel-tool-header__action': true,\n 'panel-tool-header__menu': action.id === 'menu',\n }}\n variant=\"icon\"\n icon={action.icon}\n size=\"md\"\n aria-label={action.ariaLabel}\n haspopup={action.haspopup}\n controls={action.controls}\n expanded={action.expanded}\n pressed={action.pressed}\n isActive={!!action.expanded}\n isInactive={action.isInactive}\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => {\n if (!authoredActions && action.id === 'menu')\n this.dsMenuToggle.emit(event.detail);\n this.dsAction.emit({ id: action.id, originalEvent: event.detail });\n }}\n />\n </ds-tooltip>\n ))}\n </div>\n </header>\n </Host>\n );\n }\n}\n"],"mappings":"0RAAA,MAAMA,EAAqB,IAAM,m+H,MCQpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,mJASUC,KAAAC,QAAkB,GAElBD,KAAAE,SAAoB,MAEpBF,KAAAG,SAAmB,cAEnBH,KAAAI,cAAwB,OAExBJ,KAAAK,SAAoB,KAEpBL,KAAAM,cAAwB,eAExBN,KAAAO,cAAwB,GAIxBP,KAAAQ,aAAwB,MAExBR,KAAAS,QAAoC,EAgG7C,CAzFC,sBAAMC,GACJ,MAAMC,EAAUX,KAAKY,GAAGC,cACtB,sGAEIF,GAASG,a,CAGjB,MAAAC,GACE,MAAMC,EAAkBhB,KAAKS,QAAQQ,OAAS,EAC9C,MAAMR,EAAoCO,EACtChB,KAAKS,QACLT,KAAKK,SACL,CACE,CACEa,GAAI,OACJC,KAAM,WACNC,UAAWpB,KAAKM,cAChBe,UAAWrB,KAAKO,cAChBe,SAAUtB,KAAKuB,aACfC,SAAUxB,KAAKQ,aACfiB,SAAU,SAGd,GAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,uDACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8BACR7B,KAAKE,SACJwB,EAAA,cAAYI,MAAO9B,KAAKI,cAAe2B,KAAK,SAASC,KAAK,MACxDN,EAAA,sBACEG,MAAM,0BACNI,QAAQ,OACRd,KAAMnB,KAAKG,SACX6B,KAAK,KAAI,aACGhC,KAAKI,cACjB8B,WAAY,MACZC,UAAW,MACXC,UAAYC,GAAmCrC,KAAKsC,OAAOC,KAAKF,EAAMG,WAGxE,MAENd,EAAA,WAAAE,IAAA,2CACEC,MAAM,4CACNY,GAAG,KACHR,QAAQ,mBACRS,SAAQ,KACRC,MAAM,UACNC,eAAgB,GAEf5C,KAAKC,SAERyB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACRpB,EAAQoC,KAAIC,GACXpB,EAAA,cAAYE,IAAKkB,EAAO5B,GAAIY,MAAOgB,EAAO1B,UAAWW,KAAK,SAASC,KAAK,MACtEN,EAAA,sBACER,GAAI4B,EAAOzB,WAAa0B,UAAS,wBACVD,EAAO5B,GAC9BW,MAAO,CACL,4BAA6B,KAC7B,0BAA2BiB,EAAO5B,KAAO,QAE3Ce,QAAQ,OACRd,KAAM2B,EAAO3B,KACba,KAAK,KAAI,aACGc,EAAO1B,UACnBK,SAAUqB,EAAOrB,SACjBH,SAAUwB,EAAOxB,SACjBE,SAAUsB,EAAOtB,SACjBwB,QAASF,EAAOE,QAChBC,WAAYH,EAAOtB,SACnB0B,WAAYJ,EAAOI,WACnBhB,WAAY,MACZC,UAAW,MACXC,UAAYC,IACV,IAAKrB,GAAmB8B,EAAO5B,KAAO,OACpClB,KAAKmD,aAAaZ,KAAKF,EAAMG,QAC/BxC,KAAKoD,SAASb,KAAK,CAAErB,GAAI4B,EAAO5B,GAAImC,cAAehB,EAAMG,QAAS,S","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as t,H as i,c as e,h as s,a as r,t as n}from"./index.js";import{d as o}from"./p-DoNdiEly.js";import{d as a}from"./p-CBiAsFAZ.js";import{d as c}from"./p-CmMfRM1s.js";import{d}from"./p-Bgh0uG51.js";import{d as l}from"./p-BAfG3M8z.js";import{d as h}from"./p-Ca-I2UnB.js";import{d as b}from"./p-BN9FZESH.js";import{d as u}from"./p-BgjtMMye.js";import{d as f}from"./p-CGwVooB6.js";import{d as m}from"./p-w2kKeG_h.js";import{d as v}from"./p-UtfErnpX.js";function g(t){return"type"in t&&t.type==="divider"}const p=()=>`.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-bar-title-h,.ds-chrome-space--sm.sc-ds-bar-title{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-title-h,.ds-chrome-space--md.sc-ds-bar-title{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-title-h,.ds-chrome-space--lg.sc-ds-bar-title{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-title-h,.ds-chrome-row.sc-ds-bar-title,.ds-chrome-column.sc-ds-bar-title-h,.ds-chrome-column.sc-ds-bar-title,.ds-chrome-grid.sc-ds-bar-title-h,.ds-chrome-grid.sc-ds-bar-title{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-title-h,.ds-chrome-row.sc-ds-bar-title{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-title-h,.ds-chrome-column.sc-ds-bar-title{flex-direction:column}.ds-chrome-grid.sc-ds-bar-title-h,.ds-chrome-grid.sc-ds-bar-title{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-title-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-title-h,.ds-focus-ring.sc-ds-bar-title,.ds-focus-ring-inset.sc-ds-bar-title-h,.ds-focus-ring-inset.sc-ds-bar-title{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-title-h:focus-visible,.ds-focus-ring.sc-ds-bar-title:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-bar-title-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-bar-title-h,.ds-interaction-fill.sc-ds-bar-title{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before,.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before{z-index:1}.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-bar-title-h,.ds-interaction-fill--bordered.sc-ds-bar-title{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-bar-title-h,.ds-interaction-fill--selected.sc-ds-bar-title{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-bar-title-h>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill.sc-ds-bar-title>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill__content.sc-ds-bar-title{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-bar-title-h,.ds-interaction-fill--on-faint.sc-ds-bar-title{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-bar-title-h,.ds-interaction-fill--on-medium.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-bar-title-h,.ds-interaction-fill--on-bold.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-bar-title-h,.ds-interaction-fill--on-strong.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-bar-title-h,.ds-interaction-fill--on-translucent.sc-ds-bar-title{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-bar-title-h,.ds-interaction-fill--on-inverted.sc-ds-bar-title{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-bar-title-h,.ds-interaction-fill--on-media.sc-ds-bar-title{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-bar-title-h,.ds-interaction-fill--on-always-dark.sc-ds-bar-title{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-bar-title-h,.ds-interaction-fill--on-navigation.sc-ds-bar-title{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-bar-title-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-primary)}[data-shell-page-syncing].sc-ds-bar-title-h{visibility:hidden}.bar-title.sc-ds-bar-title{position:relative;min-width:0;box-sizing:border-box;background:var(--color-background-primary)}.bar-title.sc-ds-bar-title::after{content:'';position:absolute;inset:auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.bar-title__inner.sc-ds-bar-title{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--dimension-space-100);padding:var(--dimension-space-400);box-sizing:border-box}.bar-title__row.sc-ds-bar-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);min-width:0}.bar-title-host--expanded.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{gap:var(--dimension-space-400)}.bar-title__leading.sc-ds-bar-title{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--dimension-space-100);min-width:0}.bar-title__title-row.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0;min-height:var(--dimension-size-400)}.bar-title__identity.sc-ds-bar-title{display:flex;flex:0 1 auto;align-items:center;gap:var(--dimension-space-050);min-width:0}.bar-title__back.sc-ds-bar-title,.bar-title__section-chevron.sc-ds-bar-title{flex:0 0 auto}.bar-title__breadcrumb.sc-ds-bar-title{display:block;width:100%;min-width:0}.bar-title__heading.sc-ds-bar-title{display:block;width:auto;min-width:0;user-select:none}.bar-title__divider.sc-ds-bar-title{width:var(--dimension-stroke-width-012);height:var(--dimension-size-250);margin-inline-start:var(--dimension-space-100);flex:0 0 var(--dimension-stroke-width-012);background:var(--color-border-tertiary)}.bar-title__section-selector.sc-ds-bar-title{display:flex;flex:0 1 auto;min-width:0;max-width:var(--dimension-panel-width-sm)}.bar-title__section-trigger.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-half);display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:0;max-width:100%;padding-inline:var(--ds-control-padding-inline);border:none;border-radius:var(--ds-control-radius);box-sizing:border-box;background:transparent;color:var(--color-foreground-secondary);cursor:default;font-family:inherit;user-select:none}.bar-title__section-trigger--expanded.sc-ds-bar-title{color:var(--color-foreground-primary)}.bar-title__section-trigger--expanded.sc-ds-bar-title::after,.bar-title__section-trigger--expanded.sc-ds-bar-title:hover::after{background:var(--ds-interaction-pressed)}.bar-title__section-label.sc-ds-bar-title{min-width:0;padding-inline:var(--ds-control-label-inset)}.bar-title__actions.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto}.bar-title__description.sc-ds-bar-title{display:block;min-width:0;max-width:100%}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title{height:var(--dimension-size-600)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title::after{inset-inline:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__inner.sc-ds-bar-title{flex:1 1 auto;height:100%;min-width:0;padding:0;gap:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{height:100%;align-items:center}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__identity.sc-ds-bar-title{height:var(--dimension-size-400)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__divider.sc-ds-bar-title{margin-inline-start:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__heading.sc-ds-bar-title{display:inline-flex;flex:1 1 auto;align-items:center;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box}`;let _=0;const k=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsBack=e(this,"dsBack");this.dsBreadcrumbSelect=e(this,"dsBreadcrumbSelect");this.dsSectionChange=e(this,"dsSectionChange");this.dsAction=e(this,"dsAction");this.description="";this.showBack=false;this.backAriaLabel="Back";this.backLabel="Back";this.breadcrumbs=[];this.breadcrumbAriaLabel="Breadcrumb";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.primaryAction=null;this.actions=[];this.actionsAriaLabel="More page actions";this.variant="expanded";this.sectionMenuOpen=false;this.actionMenuOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=_++;this.sectionMenuTriggerId=`bar-title-section-trigger-${this.instanceId}`;this.sectionMenuId=`bar-title-section-menu-${this.instanceId}`;this.actionMenuTriggerId=`bar-title-action-trigger-${this.instanceId}`;this.actionMenuId=`bar-title-action-menu-${this.instanceId}`;this.sectionTriggerEl=null;this.actionTriggerEl=null;this.toggleSectionMenu=t=>{this.sectionMenuInitialFocusVisible=t.detail===0;this.actionMenuOpen=false;this.sectionMenuOpen=!this.sectionMenuOpen};this.closeSectionMenu=()=>{this.sectionMenuOpen=false};this.handleSectionSelect=t=>{const i=String(t.detail?.value??"");const e=this.selectableSections.find((t=>t.id===i));if(!e||e.isInactive)return;this.closeSectionMenu();this.dsSectionChange.emit(i);requestAnimationFrame((()=>this.sectionTriggerEl?.focus()))};this.toggleActionMenu=t=>{this.actionMenuInitialFocusVisible=t.detail===0;this.sectionMenuOpen=false;this.actionMenuOpen=!this.actionMenuOpen};this.closeActionMenu=()=>{this.actionMenuOpen=false};this.handleActionSelect=t=>{const i=String(t.detail?.value??"");const e=this.primaryCollapsed&&this.primaryAction?.id===i;const s=this.selectableActions.find((t=>t.id===i));if(!e&&!s)return;if(e&&(this.primaryAction?.isInactive||this.primaryAction?.isLoading)||s?.isInactive){return}this.closeActionMenu();this.dsAction.emit(i);requestAnimationFrame((()=>void this.actionTriggerEl?.setFocus?.()))};this.handleBreadcrumbSelect=t=>{if(this.breadcrumbs.length===0){this.dsBack.emit(t.detail.originalEvent);return}const i=this.dsBreadcrumbSelect.emit(t.detail);if(i.defaultPrevented)t.preventDefault()}}componentWillLoad(){if(this.el.closest("ds-shell-page")){this.el.setAttribute("data-shell-page-syncing","")}}handleSectionsChange(){if(!this.hasSectionSelector)this.closeSectionMenu()}handleActionsChange(){if(!this.showActionMenuTrigger)this.closeActionMenu()}get compact(){return this.variant!=="expanded"}get expandedBreadcrumbItems(){if(this.breadcrumbs.length>0)return this.breadcrumbs;if(!this.showBack)return[];return[{id:"back",label:this.backLabel,ariaLabel:this.backAriaLabel}]}get backTooltipLabel(){return"Go back"}get primaryCollapsed(){return this.variant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return this.sections.filter((t=>!g(t)))}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return this.selectableSections.some((t=>t.id===this.value))?this.value:this.selectableSections[0]?.id??""}get selectedSectionLabel(){return this.selectableSections.find((t=>t.id===this.effectiveValue))?.label??""}get sectionTriggerAriaLabel(){return`${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`}groupsFromItems(t,i){const e=[];let s=[];const r=()=>{if(s.length>0)e.push({items:s});s=[]};for(const e of t){if(g(e)){r()}else{s.push(i(e))}}r();return e}get sectionMenuSections(){return this.groupsFromItems(this.sections,(t=>({label:t.label,value:t.id,isSelected:t.id===this.effectiveValue,isInactive:t.isInactive})))}get selectableActions(){return this.actions.filter((t=>!g(t)))}get showActionMenuTrigger(){return this.selectableActions.length>0||this.primaryCollapsed&&this.primaryAction!==null}actionMenuItem(t){const i=t;return{label:t.label,value:t.id,isInactive:t.isInactive||i.isLoading,isDestructive:t.isDestructive||i.intent==="negative"}}get actionMenuSections(){const t=this.groupsFromItems(this.actions,(t=>this.actionMenuItem(t)));if(!this.primaryCollapsed||!this.primaryAction)return t;return[{items:[this.actionMenuItem(this.primaryAction)]},...t]}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[s("div",{class:"bar-title__divider","aria-hidden":"true"}),s("div",{class:"bar-title__section-selector"},s("button",{ref:t=>{this.sectionTriggerEl=t??null},id:this.sectionMenuTriggerId,class:{"bar-title__section-trigger":true,"bar-title__section-trigger--expanded":this.sectionMenuOpen,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.sectionMenuId,"aria-expanded":String(this.sectionMenuOpen),"aria-label":this.sectionTriggerAriaLabel,onClick:this.toggleSectionMenu},s("ds-text",{class:"bar-title__section-label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.selectedSectionLabel),s("ds-icon",{class:"bar-title__section-chevron ds-interaction-fill__content",name:"ChevronUpDown",size:"md",color:"inherit","aria-hidden":"true"})))]}renderActions(){const t=this.primaryAction;if(!t&&!this.showActionMenuTrigger)return null;return s("div",{class:"bar-title__actions"},t&&!this.primaryCollapsed?s("ds-button-filled",{class:"bar-title__primary-action",variant:t.icon?"icon-label":"label",icon:t.icon??"",label:t.label,intent:t.intent??"brand",contrast:t.contrast??"bold",size:"md",type:t.type??"button",isInactive:t.isInactive,isLoading:t.isLoading,onDsClick:()=>this.dsAction.emit(t.id)}):null,this.showActionMenuTrigger?s("ds-tooltip",{label:"Page options",side:"bottom",size:"sm"},s("ds-button-unfilled",{ref:t=>{this.actionTriggerEl=t??null},id:this.actionMenuTriggerId,class:"bar-title__more-actions",variant:"icon",icon:"Ellipses","aria-label":this.actionsAriaLabel,size:"md",activeFill:!this.compact,hasBorder:t!==null&&!this.primaryCollapsed,haspopup:"menu",controls:this.actionMenuId,expanded:this.actionMenuOpen,onDsClick:t=>this.toggleActionMenu(t.detail)})):null)}renderBreadcrumb(){const t=this.expandedBreadcrumbItems;if(t.length===0)return null;return s("ds-breadcrumb",{class:"bar-title__breadcrumb",items:t,ariaLabel:this.breadcrumbAriaLabel,onDsSelect:this.handleBreadcrumbSelect})}renderBack(){if(!this.showBack)return null;return s("ds-tooltip",{label:this.backTooltipLabel,side:"bottom",size:"sm"},s("ds-button-unfilled",{class:"bar-title__back",variant:"icon",icon:"ChevronLeft","aria-label":this.backAriaLabel,size:"md",activeFill:false,hasBorder:false,onDsClick:t=>this.dsBack.emit(t.detail)}))}render(){const t=this.compact;return s(r,{key:"b3e31d877fc214a569147328b4c2b6b6f2737aaa",class:{"bar-title-host--compact":t,"bar-title-host--expanded":this.variant==="expanded","bar-title-host--constrained":this.variant==="constrained","bar-title-host--has-description":!!this.description,"bar-title-host--has-back":this.showBack,"bar-title-host--has-breadcrumb":!t&&this.expandedBreadcrumbItems.length>0}},s("div",{key:"636587723c16ee822c6ea7f7447af9c328b8e96e",class:{"bar-title":true,"ds-chrome-row":t,"ds-chrome-space--md":t}},s("div",{key:"11be2019fe4f0a7ad00decc54717be727c9685af",class:"bar-title__inner"},!t?this.renderBreadcrumb():null,s("div",{key:"b71007568fb009f0e1d64d8a0a8905376864f69d",class:"bar-title__row"},s("div",{key:"64c88036bb723cee7de0b4d4057b761b9265be88",class:"bar-title__leading"},s("div",{key:"91446412dd910a8906a98ca8fc9ae13a5ac185f8",class:"bar-title__title-row","data-shell-page-header-anchor":true},s("div",{key:"3d40604834817225660c01e1f6c195aba9e596a3",class:"bar-title__identity"},t?this.renderBack():null,s("ds-text",{key:"b1dabcd3cd58f0bf74bfa63f0739b98812ae7e62",class:"bar-title__heading ds-control--md",variant:t?"text-title-small":"text-title-medium",emphasis:true,color:"primary",as:"h1",lineTruncation:1},this.heading)),this.renderSectionSelector()),this.description&&!t?s("ds-text",{class:"bar-title__description",variant:"text-body-small",color:"secondary",lineTruncation:2,wrap:"wrap",as:"p"},this.description):null),this.renderActions()))),this.hasSectionSelector?s("ds-menu",{id:this.sectionMenuId,class:"bar-title__section-menu",anchorId:this.sectionMenuTriggerId,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsSelect:this.handleSectionSelect}):null,this.showActionMenuTrigger?s("ds-menu",{id:this.actionMenuId,class:"bar-title__action-menu",anchorId:this.actionMenuTriggerId,align:"end",menuLabel:this.actionsAriaLabel,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,sections:this.actionMenuSections,onDsClose:this.closeActionMenu,onDsSelect:this.handleActionSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}}static get style(){return p()}},[2,"ds-bar-title",{heading:[1],description:[1],showBack:[4,"show-back"],backAriaLabel:[1,"back-aria-label"],backLabel:[1,"back-label"],breadcrumbs:[16],breadcrumbAriaLabel:[1,"breadcrumb-aria-label"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],primaryAction:[16],actions:[16],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],sectionMenuOpen:[32],actionMenuOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}]);function x(){if(typeof customElements==="undefined"){return}const t=["ds-bar-title","ds-badge","ds-breadcrumb","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-text","ds-tooltip"];t.forEach((t=>{switch(t){case"ds-bar-title":if(!customElements.get(n(t))){customElements.define(n(t),k)}break;case"ds-badge":if(!customElements.get(n(t))){o()}break;case"ds-breadcrumb":if(!customElements.get(n(t))){a()}break;case"ds-button-filled":if(!customElements.get(n(t))){c()}break;case"ds-button-unfilled":if(!customElements.get(n(t))){d()}break;case"ds-icon":if(!customElements.get(n(t))){l()}break;case"ds-loader":if(!customElements.get(n(t))){h()}break;case"ds-menu":if(!customElements.get(n(t))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(t))){u()}break;case"ds-switch":if(!customElements.get(n(t))){f()}break;case"ds-text":if(!customElements.get(n(t))){m()}break;case"ds-tooltip":if(!customElements.get(n(t))){v()}break}}))}x();export{k as B,x as d};
|
|
2
|
-
//# sourceMappingURL=p-CIgag7g2.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as s,H as e,c as t,h as o,a as n,t as i}from"./index.js";import{p as a}from"./p-B6Vuayt6.js";import{d as l}from"./p-DoNdiEly.js";import{d as r}from"./p-Bgh0uG51.js";import{d}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as h}from"./p-B3PdrMP0.js";import{d as p}from"./p-w2kKeG_h.js";import{d as f}from"./p-UtfErnpX.js";const u=["search","agents","messages","stacks","activity","help"];const m={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const g={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"/"};const v=[{id:"search",icon:"MagnifyingGlass",label:m.search,railPlacement:"header",order:0,shortcutKey:g.search,mobileDestination:"search"},{id:"agents",icon:"AI",label:m.agents,order:1,shortcutKey:g.agents,mobileDestination:"agents"},{id:"messages",icon:"MessageBubbleStack",label:m.messages,order:2,shortcutKey:g.messages,mobileDestination:"inbox"},{id:"stacks",icon:"ViewMenu",label:m.stacks,order:3,shortcutKey:g.stacks,mobileDestination:"inbox"},{id:"activity",icon:"Bell",label:m.activity,order:4,shortcutKey:g.activity,mobileDestination:"inbox"},{id:"help",icon:"CircleQuestion",label:m.help,railPlacement:"footer",order:5,shortcutKey:g.help,mobileDestination:"help"}];function b(s){const e=new Map;for(const t of s){if(t.id.trim()&&!e.has(t.id))e.set(t.id,t)}const t={header:0,body:1,footer:2};return Array.from(e.values()).sort(((s,e)=>{const o=_(s);const n=_(e);const i=t[o]-t[n];if(i!==0)return i;const a=u.findIndex((e=>e===s.id));const l=u.findIndex((s=>s===e.id));const r=s.order??(a<0?Number.MAX_SAFE_INTEGER:a);const d=e.order??(l<0?Number.MAX_SAFE_INTEGER:l);return r-d}))}function w(s){return typeof s==="string"&&s.trim().length>0}function _(s){if(s.railPlacement)return s.railPlacement;if(s.id==="search")return"header";if(s.id==="help")return"footer";return"body"}function y(s,e,t){if(!t||s.some((s=>s.id===t))){return{open:e,activeTool:t,removedTool:""}}return{open:false,activeTool:"",removedTool:t}}function x(s){const e=s.transitionProperty.split(",").map((s=>s.trim()));const t=s.transitionDuration.split(",").map((s=>a(s.trim(),0)));const o=s.transitionDelay.split(",").map((s=>a(s.trim(),0)));return e.reduce(((s,e,n)=>{if(e!=="all"&&e!=="max-width")return s;const i=t[n%t.length]??0;const a=o[n%o.length]??0;return Math.max(s,i+a,0)}),0)}function k(s,e){return!s&&e==="idle"}function T(s,e,t){if(t==="closing")return s<=.5;if(t==="opening")return e>0&&s>=e-.5;return true}function A(s,e,t){if(s&&e===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const C=()=>`.ds-control--lg.sc-ds-panel-tools,.ds-control--lg.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools,.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools,.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tools-h,.ds-control--lg.sc-ds-panel-tools{--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-panel-tools-h,.ds-control--md.sc-ds-panel-tools{--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-panel-tools-h,.ds-control--sm.sc-ds-panel-tools{--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-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--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-panel-tools-h,.ds-chrome-space--sm.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tools-h,.ds-chrome-space--md.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tools-h,.ds-chrome-space--lg.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tools-h,.ds-chrome-row.sc-ds-panel-tools,.ds-chrome-column.sc-ds-panel-tools-h,.ds-chrome-column.sc-ds-panel-tools,.ds-chrome-grid.sc-ds-panel-tools-h,.ds-chrome-grid.sc-ds-panel-tools{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-panel-tools-h,.ds-chrome-row.sc-ds-panel-tools{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tools-h,.ds-chrome-column.sc-ds-panel-tools{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tools-h,.ds-chrome-grid.sc-ds-panel-tools{display:grid;align-items:center}.ds-scrollbar-hidden.sc-ds-panel-tools-h,.ds-scrollbar-hidden.sc-ds-panel-tools{scrollbar-width:none}.ds-scrollbar-hidden.sc-ds-panel-tools-h::-webkit-scrollbar,.ds-scrollbar-hidden.sc-ds-panel-tools::-webkit-scrollbar{display:none}.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in-out, ease)}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:transparent}.panel-tools__full-views.sc-ds-panel-tools,.panel-tools__full-view.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:hidden}.panel-tools__full-view.sc-ds-panel-tools{height:100%}.panel-tools__full-view.sc-ds-panel-tools{display:none}.panel-tools__full-view--active.sc-ds-panel-tools{display:block}[presentation='fullscreen'].sc-ds-panel-tools-h{height:100vh;inset:0;position:fixed;width:100vw;z-index:var(--dimension-z-index-modal)}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{display:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:100vw;transition:none;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer--visible.sc-ds-panel-tools{border-left:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools{background-color:transparent;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h:not(.panel-tools--fullscreen) .panel-tools__drawer-surface.sc-ds-panel-tools,.panel-tools--fullscreen.sc-ds-panel-tools-h:not([presentation='fullscreen']) .panel-tools__drawer-surface.sc-ds-panel-tools{visibility:hidden}.panel-tools--presentation-snap.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:transparent}.panel-tools__rail-header.sc-ds-panel-tools{justify-content:center;height:var(--dimension-size-600);flex-shrink:0;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.panel-tools__rail-actions.sc-ds-panel-tools{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-tools__rail-footer.sc-ds-panel-tools{justify-content:center;flex-shrink:0;margin-top:auto}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ds-control-height);flex-shrink:0}@media (prefers-reduced-motion: reduce){.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}}`;const z=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.presentation="drawer";this.fullscreenHeaderMode="shared";this.activeTool="";this.items=[];this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.headers={};this.storageKey="";this.motion="idle";this.drawerSurfaceRetained=false;this.readyForMotion=false;this.presentationMotionSuppressed=false;this.rovingIndex=0;this.fullViewToolIds=[];this.motionEnableGeneration=0;this.presentationMotionGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.focusBeforeFullscreen=null;this.fullViewObserver=null;this.handleComposedHeaderAction=s=>{const e=s.detail;if(!this.activeTool||!e?.id)return;s.stopPropagation();this.dsHeaderAction.emit({tool:this.activeTool,id:e.id})};this.handleTransitionEnd=s=>{const e=this.el.querySelector(".panel-tools__drawer");if(s.target!==e)return;if(s.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}if(s.type==="transitioncancel")return;if(e&&!this.drawerTransitionAtTerminal(e,this.motion))return;this.finishDrawerTransition()};this.handleToolChange=s=>{const e=A(this.open,this.activeTool,s);this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:s,selected:e.selected})};this.handleRailKeyDown=(s,e)=>{const t=this.orderedRailItems;if(!t.length)return;if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleToolChange(t[e].id);return}if(s.key==="ArrowDown"){if(e>=t.length-1)return;s.preventDefault();this.focusRailAt(e+1);return}if(s.key==="ArrowUp"){if(e<=0)return;s.preventDefault();this.focusRailAt(e-1)}}}get railItems(){return this.items??[]}get orderedRailItems(){return b(this.railItems)}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.el.removeEventListener("transitioncancel",this.handleTransitionEnd);this.el.removeEventListener("dsAction",this.handleComposedHeaderAction);this.clearTransitionCompletion();this.motionEnableGeneration+=1;this.fullViewObserver?.disconnect();this.fullViewObserver=null}presentationChanged(s,t){if(s===t)return;if(this.el.getAttribute("presentation")!==s){this.el.setAttribute("presentation",s)}const o=++this.presentationMotionGeneration;this.presentationMotionSuppressed=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.presentationMotionGeneration)return;this.presentationMotionSuppressed=false}))}));if(s==="fullscreen"){this.focusBeforeFullscreen=document.activeElement instanceof e?document.activeElement:null;this.open=true}else if(t==="fullscreen"){const s=this.focusBeforeFullscreen;const e=this.activeHeader().actions?.[0]?.id;requestAnimationFrame((async()=>{if(s?.isConnected){s.focus({preventScroll:true})}const t=s?document.activeElement===s||s.contains(document.activeElement):false;if(!t&&e)await this.focusHeaderAction(e);this.focusBeforeFullscreen=null}))}this.dsPresentationChange.emit({presentation:s})}handleFullscreenEscape(s){if(this.presentation!=="fullscreen"||s.key!=="Escape")return;s.preventDefault();s.stopPropagation();this.presentation="drawer"}deferMotionEnable(){if(this.readyForMotion)return;const s=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd);this.el.addEventListener("transitioncancel",this.handleTransitionEnd);this.el.addEventListener("dsAction",this.handleComposedHeaderAction)}componentWillLoad(){this.restoreLastActiveTool();this.drawerSurfaceRetained=this.open}openChanged(s,e){if(s)this.drawerSurfaceRetained=true;if(this.readyForMotion&&e!==undefined&&e!==s){this.startDrawerTransition(s?"opening":"closing")}else if(!s){this.drawerSurfaceRetained=false}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable();this.syncFullViewTools();this.fullViewObserver=new MutationObserver((()=>this.syncFullViewTools()));this.fullViewObserver.observe(this.el,{childList:true,attributes:true,attributeFilter:["slot"]})}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const s=localStorage.getItem(this.storageKey);if(w(s))this.activeTool=s}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const s=y(this.railItems,this.open,this.activeTool);if(!s.removedTool)return;this.clearPersistedTool();this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:s.removedTool,selected:false})}startDrawerTransition(s){const e=this.el.querySelector(".panel-tools__drawer");if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=s;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:s});const t=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(t!==this.transitionGeneration||this.motion!==s)return;if(!e){this.finishDrawerTransition();return}if(this.drawerTransitionAtTerminal(e,s)){this.finishDrawerTransition();return}const o=x(getComputedStyle(e));if(o<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),o)}))}))}drawerTransitionAtTerminal(s,e){const t=s.getBoundingClientRect().width;const o=s.querySelector(".panel-tools__drawer-surface");const n=o?.getBoundingClientRect().width??0;return T(t,n,e)}finishDrawerTransition(){const s=this.motion;const e=s!=="idle";this.clearTransitionCompletion();if(!e)return;this.ignoreReplacementTerminal=false;this.motion="idle";if(s==="closing"&&!this.open){this.drawerSurfaceRetained=false}this.dsChromeTransitionEnd.emit({source:"panel-tools"})}clearTransitionCompletion(){this.transitionGeneration+=1;if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}isRailSelected(s){return this.open&&this.activeTool===s}isDrawerPresent(){return this.open||this.drawerSurfaceRetained}isViewActive(s){return this.isDrawerPresent()&&this.activeTool===s}hasFullView(s){return this.fullViewToolIds.includes(s)}syncFullViewTools(){const s=this.orderedRailItems.map((s=>s.id));const e=s.filter((s=>Boolean(this.el.querySelector(`[slot="${s}-view"]`))));if(e.join("|")!==this.fullViewToolIds.join("|"))this.fullViewToolIds=e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";const s=this.railItems.find((s=>s.id===this.activeTool));return s?.label??m[this.activeTool]??this.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(){if(!this.activeTool)return{};return this.resolvedHeaders()[this.activeTool]??{}}async activateTool(s){const e=this.railItems.find((e=>e.id===s));if(!e||e.isInactive)return;this.handleToolChange(s)}async closeDrawer(){if(!this.open)return;const s=this.activeTool;this.open=false;if(s){this.dsToolChange.emit({id:s,selected:false})}}async focusHeaderAction(s){const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}focusRailAt(s){const e=this.orderedRailItems;if(!e.length)return;const t=Math.max(0,Math.min(s,e.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(s,e){const t=s.ariaLabel??s.label??m[s.id]??s.id;return o("ds-tooltip",{key:s.id,label:t,shortcutKey:s.shortcutKey??g[s.id],side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:s.icon,isActive:this.isRailSelected(s.id),activeFill:false,hasBorder:false,pressScale:false,dot:s.dot??false,isInactive:s.isInactive,focusTabIndex:e===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(s.id),onFocusin:()=>{this.rovingIndex=e},onKeyDown:s=>this.handleRailKeyDown(s,e),onDsClick:()=>this.handleToolChange(s.id)}))}render(){const s=this.headerLabel();const e=this.activeHeader();const t=e.title?.trim()||s;const i=e.actions??[];const a=this.orderedRailItems;const l=a.filter((s=>_(s)==="header"));const r=a.filter((s=>_(s)==="body"));const d=a.filter((s=>_(s)==="footer"));const c=l.length;const h=c+r.length;const p=this.isDrawerPresent();const f=k(this.open,this.motion);const u=Boolean(p&&this.activeTool&&this.hasFullView(this.activeTool));const m=a.map((s=>s.id));return o(n,{key:"dd809d0cc10ff00c93624b0e3eaa51b70b9f9c51",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":f,"panel-tools--fullscreen":this.presentation==="fullscreen","panel-tools--presentation-snap":this.presentationMotionSuppressed},role:this.presentation==="fullscreen"?"dialog":"complementary","aria-modal":this.presentation==="fullscreen"?"true":undefined,"aria-label":this.toolsLabel},o("div",{key:"8e0008db8a33971773df96fffae2b5540a1d607b",class:"panel-tools__layout"},o("nav",{key:"3f455acbb1888e612c02a4b2713f60fe5323b3c4",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},l.length?o("div",{class:"panel-tools__rail-header ds-chrome-row ds-chrome-space--md"},l.map(((s,e)=>this.renderRailAction(s,e)))):null,o("div",{key:"c3a30de8b20afb9fa5bf4383d5d8afb489a53894",class:"panel-tools__rail-body ds-chrome-column ds-chrome-space--md ds-scrollbar-hidden"},o("div",{key:"ce9771834280720d2ce451fdc5ee7eab318e73a6",class:"panel-tools__rail-actions"},r.map(((s,e)=>this.renderRailAction(s,c+e))))),d.length?o("div",{class:"panel-tools__rail-footer ds-chrome-row ds-chrome-space--md"},d.map(((s,e)=>this.renderRailAction(s,h+e)))):null),o("div",{key:"9e665d65da3989eeb6139882d360473cabb75ae5",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":p},"aria-hidden":p?null:"true",inert:p?undefined:true},o("div",{key:"bd11a5d904198b7c6c037c15b01a3befabe3414e",class:"panel-tools__drawer-surface"},this.presentation!=="fullscreen"||this.fullscreenHeaderMode==="shared"?o("ds-panel-tool-header",{class:"panel-tools__header",heading:t,showBack:e.showBack??false,backIcon:e.backIcon||"ChevronLeft",backAriaLabel:e.backAriaLabel||"Back",showMenu:false,ref:s=>{const e=s;if(e)e.actions=i},onDsBack:()=>{if(this.activeTool)this.dsHeaderBack.emit({tool:this.activeTool})}}):null,o("div",{key:"321166c776ed14d9cb0add9eaefa3c414df19d52",class:"panel-tools__body",hidden:u},m.map((s=>{const e=this.isViewActive(s);return o("div",{class:{"panel-tools__view":true,"panel-tools__view--active":e},hidden:!e},o("slot",{name:s}))}))),o("div",{key:"12fa4ae95974660986d4d961ea0cfd69f0d1cbe9",class:"panel-tools__full-views",hidden:!u},m.map((s=>o("div",{class:{"panel-tools__full-view":true,"panel-tools__full-view--active":this.isViewActive(s)&&this.hasFullView(s)},hidden:!(this.isViewActive(s)&&this.hasFullView(s))},o("slot",{name:`${s}-view`})))))))))}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}}static get style(){return C()}},[262,"ds-panel-tools",{open:[1540],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],activeTool:[1537,"active-tool"],items:[16],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],headers:[16],storageKey:[1,"storage-key"],motion:[32],drawerSurfaceRetained:[32],readyForMotion:[32],presentationMotionSuppressed:[32],rovingIndex:[32],fullViewToolIds:[32],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},[[10,"keydown","handleFullscreenEscape"]],{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}]);function S(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tools":if(!customElements.get(i(s))){customElements.define(i(s),z)}break;case"ds-badge":if(!customElements.get(i(s))){l()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){r()}break;case"ds-icon":if(!customElements.get(i(s))){d()}break;case"ds-loader":if(!customElements.get(i(s))){c()}break;case"ds-panel-tool-header":if(!customElements.get(i(s))){h()}break;case"ds-text":if(!customElements.get(i(s))){p()}break;case"ds-tooltip":if(!customElements.get(i(s))){f()}break}}))}S();export{z as P,m as a,A as b,v as c,S as d,b as o,y as r};
|
|
2
|
-
//# sourceMappingURL=p-CUSz0JFa.js.map
|