@ds-mo/ui 12.4.0 → 12.4.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/.build-stamp +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +6 -1
- package/dist/angular/ds-toast.d.ts +1 -1
- package/dist/angular/ds-toast.js +3 -3
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-shell-tools.js.map +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-toast.js.map +1 -1
- package/dist/docs/components.json +30 -1
- package/dist/mcp-data/registry/registry.json +5 -0
- package/dist/mcp-data/registry/shell-tools.json +2 -2
- package/dist/mcp-data/registry/toast.json +21 -2
- package/dist/types/components/Toast/Toast.d.ts +2 -0
- package/dist/types/components.d.ts +11 -0
- package/package.json +1 -1
package/dist/.build-stamp
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1784862378719
|
package/dist/agent-patterns.json
CHANGED
package/dist/agent.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"package": "@ds-mo/ui",
|
|
4
|
-
"packageVersion": "12.4.
|
|
4
|
+
"packageVersion": "12.4.1",
|
|
5
5
|
"kind": "components",
|
|
6
6
|
"entries": [
|
|
7
7
|
{
|
|
@@ -8681,6 +8681,7 @@
|
|
|
8681
8681
|
],
|
|
8682
8682
|
"responsiveBehavior": [
|
|
8683
8683
|
"The global stack stays at the viewport bottom-end with token-based inset and never exceeds the available viewport width.",
|
|
8684
|
+
"Set avoid-mobile-shell-bar when the application uses the persistent shell bottom bar. Below 768px the global stack clears the complete safe-area-aware bar container by 16px; tablet and desktop positioning remain unchanged.",
|
|
8684
8685
|
"Anchored toasts flip on their placement axis and clamp to viewport padding when the preferred side does not fit.",
|
|
8685
8686
|
"The owner does not create separate mobile and desktop managers; one queue preserves ordering across responsive layouts.",
|
|
8686
8687
|
"Pointer swipe remains optional input. Close and action controls retain keyboard access through the notification region."
|
|
@@ -8716,6 +8717,10 @@
|
|
|
8716
8717
|
},
|
|
8717
8718
|
"api": {
|
|
8718
8719
|
"props": {
|
|
8720
|
+
"avoidMobileShellBar": {
|
|
8721
|
+
"type": "boolean",
|
|
8722
|
+
"required": false
|
|
8723
|
+
},
|
|
8719
8724
|
"closeLabel": {
|
|
8720
8725
|
"type": "string",
|
|
8721
8726
|
"required": false
|
|
@@ -13,7 +13,7 @@ export declare class DsToast {
|
|
|
13
13
|
dsToastAction: EventEmitter<DsToastCustomEvent<IDsToastToastActionEventDetail<unknown>>>;
|
|
14
14
|
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
15
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<DsToast, never>;
|
|
16
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsToast, "ds-toast", never, { "closeLabel": { "alias": "closeLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; "manager": { "alias": "manager"; "required": false; }; "swipeDirections": { "alias": "swipeDirections"; "required": false; }; "timeout": { "alias": "timeout"; "required": false; }; }, { "dsToastClose": "dsToastClose"; "dsToastRemove": "dsToastRemove"; "dsToastAction": "dsToastAction"; }, never, ["*"], true, never>;
|
|
16
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsToast, "ds-toast", never, { "avoidMobileShellBar": { "alias": "avoidMobileShellBar"; "required": false; }; "closeLabel": { "alias": "closeLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; "manager": { "alias": "manager"; "required": false; }; "swipeDirections": { "alias": "swipeDirections"; "required": false; }; "timeout": { "alias": "timeout"; "required": false; }; }, { "dsToastClose": "dsToastClose"; "dsToastRemove": "dsToastRemove"; "dsToastAction": "dsToastAction"; }, never, ["*"], true, never>;
|
|
17
17
|
}
|
|
18
18
|
export declare interface DsToast extends Components.DsToast {
|
|
19
19
|
dsToastClose: EventEmitter<DsToastCustomEvent<IDsToastToastCloseEventDetail>>;
|
package/dist/angular/ds-toast.js
CHANGED
|
@@ -20,12 +20,12 @@ let DsToast = class DsToast {
|
|
|
20
20
|
this.el = r.nativeElement;
|
|
21
21
|
}
|
|
22
22
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DsToast, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DsToast, isStandalone: true, selector: "ds-toast", inputs: { closeLabel: "closeLabel", label: "label", limit: "limit", manager: "manager", swipeDirections: "swipeDirections", timeout: "timeout" }, outputs: { dsToastClose: "dsToastClose", dsToastRemove: "dsToastRemove", dsToastAction: "dsToastAction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DsToast, isStandalone: true, selector: "ds-toast", inputs: { avoidMobileShellBar: "avoidMobileShellBar", closeLabel: "closeLabel", label: "label", limit: "limit", manager: "manager", swipeDirections: "swipeDirections", timeout: "timeout" }, outputs: { dsToastClose: "dsToastClose", dsToastRemove: "dsToastRemove", dsToastAction: "dsToastAction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
24
|
};
|
|
25
25
|
DsToast = __decorate([
|
|
26
26
|
ProxyCmp({
|
|
27
27
|
defineCustomElementFn: defineDsToast,
|
|
28
|
-
inputs: ['closeLabel', 'label', 'limit', 'manager', 'swipeDirections', 'timeout']
|
|
28
|
+
inputs: ['avoidMobileShellBar', 'closeLabel', 'label', 'limit', 'manager', 'swipeDirections', 'timeout']
|
|
29
29
|
})
|
|
30
30
|
], DsToast);
|
|
31
31
|
export { DsToast };
|
|
@@ -36,7 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
36
36
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
37
37
|
template: '<ng-content></ng-content>',
|
|
38
38
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
39
|
-
inputs: ['closeLabel', 'label', 'limit', 'manager', 'swipeDirections', 'timeout'],
|
|
39
|
+
inputs: ['avoidMobileShellBar', 'closeLabel', 'label', 'limit', 'manager', 'swipeDirections', 'timeout'],
|
|
40
40
|
outputs: ['dsToastClose', 'dsToastRemove', 'dsToastAction'],
|
|
41
41
|
}]
|
|
42
42
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsToastClose: [{
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,c as t,h as o,a as i,t as l}from"./index.js";import{p as a,r,a as n,b as h,c as d,d as c}from"./p-CgHTNfC1.js";import{i as m,r as u}from"./p-BrusnEYP.js";import{d as b}from"./p-CH6cNXXF.js";import{d as f}from"./p-CoYFJD-w.js";import{d as p}from"./p-BAfG3M8z.js";import{d as g}from"./p-Cpr3K41-.js";import{d as v}from"./p-CtD24EyI.js";import{d as _}from"./p-PZ6R_nGI.js";import{d as k}from"./p-BwGnhInj.js";import{d as w}from"./p-BPS9VExm.js";const y=()=>`.sc-ds-shell-tools-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.shell-tools__desktop.sc-ds-shell-tools,.shell-tools__desktop.sc-ds-shell-tools ds-panel-tools.sc-ds-shell-tools,.shell-tools__mobile.sc-ds-shell-tools{display:block;min-width:0;min-height:0;height:100%}.shell-tools__mobile.sc-ds-shell-tools{display:grid;grid-template-rows:auto auto minmax(0, 1fr);background:var(--color-background-primary)}.shell-tools__inbox-nav.sc-ds-shell-tools{padding:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background:var(--color-background-primary)}.shell-tools__mobile-body.sc-ds-shell-tools,.shell-tools__view.sc-ds-shell-tools{min-width:0;min-height:0;height:100%}.shell-tools__mobile-body.sc-ds-shell-tools{overflow:hidden}.shell-tools__view.sc-ds-shell-tools{overflow:auto;overscroll-behavior:contain}.shell-tools__view[hidden].sc-ds-shell-tools{display:none}.shell-tools__view.sc-ds-shell-tools-s>*,.shell-tools__view .sc-ds-shell-tools-s>*{min-height:0}`;const C=["search","agents","messages","stacks","activity","help"];const j=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.responsiveMode="desktop";this.open=false;this.activeTool="";this.presentation="drawer";this.fullscreenHeaderMode="shared";this.items=[];this.itemsJson="";this.headers={};this.headersJson="";this.storageKey="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.inboxLabel="Inbox";this.inboxNavigationLabel="Inbox sections";this.panelToolsEl=null;this.selectInboxTool=s=>{const e=s.detail;if(!m(e)||e===this.mobileActiveTool)return;this.open=true;this.activeTool=e;this.dsToolChange.emit({id:e,selected:true})};this.handlePanelToolChange=s=>{this.activeTool=s.detail.id;this.open=s.detail.selected};this.handlePanelPresentationChange=s=>{this.presentation=s.detail.presentation};this.handleMobileHeaderAction=(s,e)=>{e.stopPropagation();this.dsHeaderAction.emit({tool:s,id:e.detail.id})}}get resolvedItems(){return a(this.items,this.itemsJson)}get availableInboxTools(){return this.resolvedItems.filter((s=>!s.isInactive&&m(s.id))).map((s=>s.id))}get mobileActiveTool(){if(!m(this.activeTool))return this.activeTool;return u(this.activeTool,this.availableInboxTools)}componentWillLoad(){this.reconcileAvailability()}handleItemsChange(){this.reconcileAvailability()}reconcileAvailability(){const s=r(this.resolvedItems,this.open,this.activeTool);this.open=s.open;this.activeTool=s.activeTool}resolvedHeaders(){if(Object.keys(this.headers).length)return this.headers;if(!this.headersJson.trim())return{};try{const s=JSON.parse(this.headersJson);return s&&typeof s==="object"&&!Array.isArray(s)?s:{}}catch{return{}}}activeHeader(s){return this.resolvedHeaders()[s]??{}}activateMobileTool(s){const e=this.resolvedItems.find((e=>e.id===s));if(!e||e.isInactive)return;const t=n(this.open,this.activeTool,s);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:s,selected:t.selected})}async activateTool(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.activateTool(s));return}this.activateMobileTool(s)}async closeDrawer(){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.closeDrawer());return}if(!this.open)return;const s=this.activeTool;this.open=false;if(s)this.dsToolChange.emit({id:s,selected:false})}async focusHeaderAction(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.focusHeaderAction(s));return}const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}renderForwardedSlots(){return h.flatMap((s=>[o("slot",{name:s,slot:s}),o("slot",{name:`${s}-view`,slot:`${s}-view`})]))}renderDesktop(){return o("div",{class:"shell-tools__desktop"},o("ds-panel-tools",{open:this.open,activeTool:this.activeTool,presentation:this.presentation,fullscreenHeaderMode:this.fullscreenHeaderMode,items:this.resolvedItems,headers:this.resolvedHeaders(),storageKey:this.storageKey,toolsLabel:this.toolsLabel,toolShortcutsLabel:this.toolShortcutsLabel,ref:s=>{this.panelToolsEl=s},onDsToolChange:this.handlePanelToolChange,onDsPresentationChange:this.handlePanelPresentationChange},this.renderForwardedSlots()))}renderMobileHeader(s){const e=this.activeHeader(s);const t=e.title?.trim();const i=m(s)?e.showBack&&t?t:this.inboxLabel:t||d[s];const l=e.actions??[];return o("ds-panel-tool-header",{class:"shell-tools__mobile-header",heading:i,showBack:e.showBack??false,backIcon:e.backIcon||"ChevronLeft",backAriaLabel:e.backAriaLabel||"Back",showMenu:false,ref:s=>{const e=s;if(e)e.actions=l},onDsBack:()=>this.dsHeaderBack.emit({tool:s}),onDsAction:e=>this.handleMobileHeaderAction(s,e)})}renderMobile(){const s=this.mobileActiveTool;const e=this.availableInboxTools.map((s=>({id:s,label:d[s]})));return o("div",{class:"shell-tools__mobile","aria-hidden":this.open&&s?undefined:"true",inert:this.open&&s?undefined:true},s?this.renderMobileHeader(s):null,s&&m(s)&&e.length?o("div",{class:"shell-tools__inbox-nav"},o("ds-tab-group",{tabs:e,value:s,"aria-label":this.inboxNavigationLabel,onDsChange:this.selectInboxTool})):null,o("div",{class:"shell-tools__mobile-body"},C.map((e=>{const t=this.open&&e===s;return o("div",{class:{"shell-tools__view":true,"shell-tools__view--active":t},hidden:!t,"aria-hidden":t?undefined:"true",inert:t?undefined:true},o("slot",{name:`${e}-view`},o("slot",{name:e})))}))))}render(){return o(i,{key:"
|
|
1
|
+
import{p as s,H as e,c as t,h as o,a as i,t as l}from"./index.js";import{p as a,r,a as n,b as h,c as d,d as c}from"./p-CgHTNfC1.js";import{i as m,r as u}from"./p-BrusnEYP.js";import{d as b}from"./p-CH6cNXXF.js";import{d as f}from"./p-CoYFJD-w.js";import{d as p}from"./p-BAfG3M8z.js";import{d as g}from"./p-Cpr3K41-.js";import{d as v}from"./p-CtD24EyI.js";import{d as _}from"./p-PZ6R_nGI.js";import{d as k}from"./p-BwGnhInj.js";import{d as w}from"./p-BPS9VExm.js";const y=()=>`.sc-ds-shell-tools-h{display:block;min-width:0;min-height:0;height:100%;background:transparent}[responsive-mode='mobile'].sc-ds-shell-tools-h{width:100%;background:var(--color-background-primary)}.shell-tools__desktop.sc-ds-shell-tools,.shell-tools__desktop.sc-ds-shell-tools ds-panel-tools.sc-ds-shell-tools,.shell-tools__mobile.sc-ds-shell-tools{display:block;min-width:0;min-height:0;height:100%}.shell-tools__mobile.sc-ds-shell-tools{display:grid;grid-template-rows:auto auto minmax(0, 1fr);background:var(--color-background-primary)}.shell-tools__inbox-nav.sc-ds-shell-tools{padding:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background:var(--color-background-primary)}.shell-tools__mobile-body.sc-ds-shell-tools,.shell-tools__view.sc-ds-shell-tools{min-width:0;min-height:0;height:100%}.shell-tools__mobile-body.sc-ds-shell-tools{overflow:hidden}.shell-tools__view.sc-ds-shell-tools{overflow:auto;overscroll-behavior:contain}.shell-tools__view[hidden].sc-ds-shell-tools{display:none}.shell-tools__view.sc-ds-shell-tools-s>*,.shell-tools__view .sc-ds-shell-tools-s>*{min-height:0}`;const C=["search","agents","messages","stacks","activity","help"];const j=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.responsiveMode="desktop";this.open=false;this.activeTool="";this.presentation="drawer";this.fullscreenHeaderMode="shared";this.items=[];this.itemsJson="";this.headers={};this.headersJson="";this.storageKey="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.inboxLabel="Inbox";this.inboxNavigationLabel="Inbox sections";this.panelToolsEl=null;this.selectInboxTool=s=>{const e=s.detail;if(!m(e)||e===this.mobileActiveTool)return;this.open=true;this.activeTool=e;this.dsToolChange.emit({id:e,selected:true})};this.handlePanelToolChange=s=>{this.activeTool=s.detail.id;this.open=s.detail.selected};this.handlePanelPresentationChange=s=>{this.presentation=s.detail.presentation};this.handleMobileHeaderAction=(s,e)=>{e.stopPropagation();this.dsHeaderAction.emit({tool:s,id:e.detail.id})}}get resolvedItems(){return a(this.items,this.itemsJson)}get availableInboxTools(){return this.resolvedItems.filter((s=>!s.isInactive&&m(s.id))).map((s=>s.id))}get mobileActiveTool(){if(!m(this.activeTool))return this.activeTool;return u(this.activeTool,this.availableInboxTools)}componentWillLoad(){this.reconcileAvailability()}handleItemsChange(){this.reconcileAvailability()}reconcileAvailability(){const s=r(this.resolvedItems,this.open,this.activeTool);this.open=s.open;this.activeTool=s.activeTool}resolvedHeaders(){if(Object.keys(this.headers).length)return this.headers;if(!this.headersJson.trim())return{};try{const s=JSON.parse(this.headersJson);return s&&typeof s==="object"&&!Array.isArray(s)?s:{}}catch{return{}}}activeHeader(s){return this.resolvedHeaders()[s]??{}}activateMobileTool(s){const e=this.resolvedItems.find((e=>e.id===s));if(!e||e.isInactive)return;const t=n(this.open,this.activeTool,s);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:s,selected:t.selected})}async activateTool(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.activateTool(s));return}this.activateMobileTool(s)}async closeDrawer(){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.closeDrawer());return}if(!this.open)return;const s=this.activeTool;this.open=false;if(s)this.dsToolChange.emit({id:s,selected:false})}async focusHeaderAction(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.focusHeaderAction(s));return}const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}renderForwardedSlots(){return h.flatMap((s=>[o("slot",{name:s,slot:s}),o("slot",{name:`${s}-view`,slot:`${s}-view`})]))}renderDesktop(){return o("div",{class:"shell-tools__desktop"},o("ds-panel-tools",{open:this.open,activeTool:this.activeTool,presentation:this.presentation,fullscreenHeaderMode:this.fullscreenHeaderMode,items:this.resolvedItems,headers:this.resolvedHeaders(),storageKey:this.storageKey,toolsLabel:this.toolsLabel,toolShortcutsLabel:this.toolShortcutsLabel,ref:s=>{this.panelToolsEl=s},onDsToolChange:this.handlePanelToolChange,onDsPresentationChange:this.handlePanelPresentationChange},this.renderForwardedSlots()))}renderMobileHeader(s){const e=this.activeHeader(s);const t=e.title?.trim();const i=m(s)?e.showBack&&t?t:this.inboxLabel:t||d[s];const l=(e.actions??[]).filter((s=>s.id!=="fullscreen"));return o("ds-panel-tool-header",{class:"shell-tools__mobile-header",heading:i,showBack:e.showBack??false,backIcon:e.backIcon||"ChevronLeft",backAriaLabel:e.backAriaLabel||"Back",showMenu:false,ref:s=>{const e=s;if(e)e.actions=l},onDsBack:()=>this.dsHeaderBack.emit({tool:s}),onDsAction:e=>this.handleMobileHeaderAction(s,e)})}renderMobile(){const s=this.mobileActiveTool;const e=this.availableInboxTools.map((s=>({id:s,label:d[s]})));return o("div",{class:"shell-tools__mobile","aria-hidden":this.open&&s?undefined:"true",inert:this.open&&s?undefined:true},s?this.renderMobileHeader(s):null,s&&m(s)&&e.length?o("div",{class:"shell-tools__inbox-nav"},o("ds-tab-group",{tabs:e,value:s,"aria-label":this.inboxNavigationLabel,onDsChange:this.selectInboxTool})):null,o("div",{class:"shell-tools__mobile-body"},C.map((e=>{const t=this.open&&e===s;return o("div",{class:{"shell-tools__view":true,"shell-tools__view--active":t},hidden:!t,"aria-hidden":t?undefined:"true",inert:t?undefined:true},o("slot",{name:`${e}-view`},o("slot",{name:e})))}))))}render(){const s=this.responsiveMode==="mobile";return o(i,{key:"c6ede759c0a0404bc87aa34b25a80d4963afcb5e",role:s?this.presentation==="fullscreen"?"dialog":"complementary":undefined,"aria-modal":s&&this.presentation==="fullscreen"?"true":undefined,"aria-label":s?this.toolsLabel:undefined},s?this.renderMobile():this.renderDesktop())}get el(){return this}static get watchers(){return{items:[{handleItemsChange:0}],itemsJson:[{handleItemsChange:0}]}}static get style(){return y()}},[262,"ds-shell-tools",{responsiveMode:[513,"responsive-mode"],open:[1540],activeTool:[1537,"active-tool"],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],items:[16],itemsJson:[1,"items-json"],headers:[16],headersJson:[1,"headers-json"],storageKey:[1,"storage-key"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],inboxLabel:[1,"inbox-label"],inboxNavigationLabel:[1,"inbox-navigation-label"],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},undefined,{items:[{handleItemsChange:0}],itemsJson:[{handleItemsChange:0}]}]);function x(){if(typeof customElements==="undefined"){return}const s=["ds-shell-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-panel-tools","ds-tab-group","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-shell-tools":if(!customElements.get(l(s))){customElements.define(l(s),j)}break;case"ds-badge":if(!customElements.get(l(s))){b()}break;case"ds-button-unfilled":if(!customElements.get(l(s))){f()}break;case"ds-icon":if(!customElements.get(l(s))){p()}break;case"ds-loader":if(!customElements.get(l(s))){g()}break;case"ds-panel-tool-header":if(!customElements.get(l(s))){v()}break;case"ds-panel-tools":if(!customElements.get(l(s))){c()}break;case"ds-tab-group":if(!customElements.get(l(s))){_()}break;case"ds-text":if(!customElements.get(l(s))){k()}break;case"ds-tooltip":if(!customElements.get(l(s))){w()}break}}))}x();const E=j;const I=x;export{E as DsShellTools,I as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-shell-tools.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["shellToolsCss","MOBILE_VIEW_ORDER","ShellTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","responsiveMode","open","activeTool","presentation","fullscreenHeaderMode","items","itemsJson","headers","headersJson","storageKey","toolsLabel","toolShortcutsLabel","inboxLabel","inboxNavigationLabel","panelToolsEl","selectInboxTool","event","id","detail","isShellInboxTool","mobileActiveTool","dsToolChange","emit","selected","handlePanelToolChange","handlePanelPresentationChange","handleMobileHeaderAction","tool","stopPropagation","dsHeaderAction","resolvedItems","parsePanelToolsItems","availableInboxTools","filter","item","isInactive","map","resolveAvailableInboxTool","componentWillLoad","reconcileAvailability","handleItemsChange","next","reconcilePanelToolsAvailability","resolvedHeaders","Object","keys","length","trim","parsed","JSON","parse","Array","isArray","activeHeader","activateMobileTool","find","entry","resolvePanelToolActivation","activateTool","closeDrawer","focusHeaderAction","action","el","querySelector","CSS","escape","setFocus","renderForwardedSlots","PANEL_TOOLS_TOOL_IDS","flatMap","h","name","slot","renderDesktop","class","ref","element","onDsToolChange","onDsPresentationChange","renderMobileHeader","header","configuredTitle","title","showBack","PANEL_TOOLS_LABELS","actions","heading","backIcon","backAriaLabel","showMenu","toolHeader","onDsBack","dsHeaderBack","onDsAction","renderMobile","inboxTabs","label","undefined","inert","tabs","value","onDsChange","active","hidden","render","Host","key","role"],"sources":["src/wc/components/ShellTools/ShellTools.css?tag=ds-shell-tools&encapsulation=scoped","src/wc/components/ShellTools/ShellTools.tsx"],"sourcesContent":[":host {\n display: block;\n min-width: 0;\n min-height: 0;\n height: 100%;\n background: var(--color-background-primary);\n}\n\n.shell-tools__desktop,\n.shell-tools__desktop ds-panel-tools,\n.shell-tools__mobile {\n display: block;\n min-width: 0;\n min-height: 0;\n height: 100%;\n}\n\n.shell-tools__mobile {\n display: grid;\n grid-template-rows: auto auto minmax(0, 1fr);\n background: var(--color-background-primary);\n}\n\n.shell-tools__inbox-nav {\n padding: var(--dimension-space-100);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n background: var(--color-background-primary);\n}\n\n.shell-tools__mobile-body,\n.shell-tools__view {\n min-width: 0;\n min-height: 0;\n height: 100%;\n}\n\n.shell-tools__mobile-body {\n overflow: hidden;\n}\n\n.shell-tools__view {\n overflow: auto;\n overscroll-behavior: contain;\n}\n\n.shell-tools__view[hidden] {\n display: none;\n}\n\n.shell-tools__view ::slotted(*) {\n min-height: 0;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport {\n PANEL_TOOLS_LABELS,\n PANEL_TOOLS_TOOL_IDS,\n type PanelToolsHeaderAction,\n type PanelToolsHeaderConfig,\n type PanelToolsHeaders,\n type PanelToolsItem,\n type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n parsePanelToolsItems,\n reconcilePanelToolsAvailability,\n resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n isShellInboxTool,\n resolveAvailableInboxTool,\n type ShellInboxToolId,\n type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\nconst MOBILE_VIEW_ORDER: PanelToolsToolId[] = [\n 'search',\n 'agents',\n 'messages',\n 'stacks',\n 'activity',\n 'help',\n];\n\n@Component({\n tag: 'ds-shell-tools',\n styleUrl: 'ShellTools.css',\n scoped: true,\n})\nexport class ShellTools {\n @Element() el!: HTMLElement;\n\n /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n @Prop({ attribute: 'responsive-mode', reflect: true })\n responsiveMode: ShellResponsiveMode = 'desktop';\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n activeTool: PanelToolsToolId | '' = '';\n @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n @Prop() items: PanelToolsItem[] = [];\n @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n @Prop() headers: PanelToolsHeaders = {};\n @Prop({ attribute: 'headers-json' }) headersJson: string = '';\n @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n @Prop() toolsLabel: string = 'Tools';\n @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n @Prop() inboxLabel: string = 'Inbox';\n @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n id: PanelToolsToolId;\n selected: boolean;\n }>;\n @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n presentation: 'drawer' | 'fullscreen';\n }>;\n @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n tool: PanelToolsToolId;\n }>;\n @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n tool: PanelToolsToolId;\n id: string;\n }>;\n\n private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n private get resolvedItems(): PanelToolsItem[] {\n return parsePanelToolsItems(this.items, this.itemsJson);\n }\n\n private get availableInboxTools(): ShellInboxToolId[] {\n return this.resolvedItems\n .filter(item => !item.isInactive && isShellInboxTool(item.id))\n .map(item => item.id as ShellInboxToolId);\n }\n\n private get mobileActiveTool(): PanelToolsToolId | '' {\n if (!isShellInboxTool(this.activeTool)) return this.activeTool;\n return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n }\n\n componentWillLoad() {\n this.reconcileAvailability();\n }\n\n @Watch('items')\n @Watch('itemsJson')\n handleItemsChange() {\n this.reconcileAvailability();\n }\n\n private reconcileAvailability() {\n const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n this.open = next.open;\n this.activeTool = next.activeTool;\n }\n\n private resolvedHeaders(): PanelToolsHeaders {\n if (Object.keys(this.headers).length) return this.headers;\n if (!this.headersJson.trim()) return {};\n try {\n const parsed = JSON.parse(this.headersJson);\n return parsed && typeof parsed === 'object' && !Array.isArray(parsed)\n ? (parsed as PanelToolsHeaders)\n : {};\n } catch {\n return {};\n }\n }\n\n private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n return this.resolvedHeaders()[tool] ?? {};\n }\n\n private activateMobileTool(id: PanelToolsToolId) {\n const item = this.resolvedItems.find(entry => entry.id === id);\n if (!item || item.isInactive) return;\n const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n this.open = next.open;\n this.activeTool = next.activeTool;\n this.dsToolChange.emit({ id, selected: next.selected });\n }\n\n private selectInboxTool = (event: CustomEvent<string>) => {\n const id = event.detail;\n if (!isShellInboxTool(id) || id === this.mobileActiveTool) return;\n this.open = true;\n this.activeTool = id;\n this.dsToolChange.emit({ id, selected: true });\n };\n\n private handlePanelToolChange = (\n event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n ) => {\n this.activeTool = event.detail.id;\n this.open = event.detail.selected;\n };\n\n private handlePanelPresentationChange = (\n event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n ) => {\n this.presentation = event.detail.presentation;\n };\n\n private handleMobileHeaderAction = (\n tool: PanelToolsToolId,\n event: CustomEvent<{ id: string }>\n ) => {\n event.stopPropagation();\n this.dsHeaderAction.emit({ tool, id: event.detail.id });\n };\n\n /** Match PanelTools' imperative activation contract in every responsive mode. */\n @Method()\n async activateTool(id: PanelToolsToolId) {\n if (this.responsiveMode !== 'mobile') {\n await this.panelToolsEl?.activateTool(id);\n return;\n }\n this.activateMobileTool(id);\n }\n\n /** Close the active global tool surface. */\n @Method()\n async closeDrawer() {\n if (this.responsiveMode !== 'mobile') {\n await this.panelToolsEl?.closeDrawer();\n return;\n }\n if (!this.open) return;\n const id = this.activeTool;\n this.open = false;\n if (id) this.dsToolChange.emit({ id, selected: false });\n }\n\n /** Focus an application-owned action in the visible shared tool header. */\n @Method()\n async focusHeaderAction(id: string) {\n if (this.responsiveMode !== 'mobile') {\n await this.panelToolsEl?.focusHeaderAction(id);\n return;\n }\n const action = this.el.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n | (HTMLElement & { setFocus?: () => Promise<void> })\n | null;\n await action?.setFocus?.();\n }\n\n private renderForwardedSlots() {\n return PANEL_TOOLS_TOOL_IDS.flatMap(id => [\n <slot name={id} slot={id} />,\n <slot name={`${id}-view`} slot={`${id}-view`} />,\n ]);\n }\n\n private renderDesktop() {\n return (\n <div class=\"shell-tools__desktop\">\n <ds-panel-tools\n open={this.open}\n activeTool={this.activeTool}\n presentation={this.presentation}\n fullscreenHeaderMode={this.fullscreenHeaderMode}\n items={this.resolvedItems}\n headers={this.resolvedHeaders()}\n storageKey={this.storageKey}\n toolsLabel={this.toolsLabel}\n toolShortcutsLabel={this.toolShortcutsLabel}\n ref={element => {\n this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n }}\n onDsToolChange={this.handlePanelToolChange}\n onDsPresentationChange={this.handlePanelPresentationChange}\n >\n {this.renderForwardedSlots()}\n </ds-panel-tools>\n </div>\n );\n }\n\n private renderMobileHeader(tool: PanelToolsToolId) {\n const header = this.activeHeader(tool);\n const configuredTitle = header.title?.trim();\n const title = isShellInboxTool(tool)\n ? header.showBack && configuredTitle\n ? configuredTitle\n : this.inboxLabel\n : configuredTitle || PANEL_TOOLS_LABELS[tool];\n const actions = header.actions ?? [];\n\n return (\n <ds-panel-tool-header\n class=\"shell-tools__mobile-header\"\n heading={title}\n showBack={header.showBack ?? false}\n backIcon={header.backIcon || 'ChevronLeft'}\n backAriaLabel={header.backAriaLabel || 'Back'}\n showMenu={false}\n ref={element => {\n const toolHeader = element as\n | (HTMLDsPanelToolHeaderElement & { actions: PanelToolsHeaderAction[] })\n | undefined;\n if (toolHeader) toolHeader.actions = actions;\n }}\n onDsBack={() => this.dsHeaderBack.emit({ tool })}\n onDsAction={(event: CustomEvent<{ id: string }>) =>\n this.handleMobileHeaderAction(tool, event)}\n />\n );\n }\n\n private renderMobile() {\n const tool = this.mobileActiveTool;\n const inboxTabs = this.availableInboxTools.map(id => ({\n id,\n label: PANEL_TOOLS_LABELS[id],\n }));\n\n return (\n <div\n class=\"shell-tools__mobile\"\n aria-hidden={this.open && tool ? undefined : 'true'}\n inert={this.open && tool ? undefined : true}\n >\n {tool ? this.renderMobileHeader(tool) : null}\n {tool && isShellInboxTool(tool) && inboxTabs.length ? (\n <div class=\"shell-tools__inbox-nav\">\n <ds-tab-group\n tabs={inboxTabs}\n value={tool}\n aria-label={this.inboxNavigationLabel}\n onDsChange={this.selectInboxTool}\n />\n </div>\n ) : null}\n <div class=\"shell-tools__mobile-body\">\n {MOBILE_VIEW_ORDER.map(id => {\n const active = this.open && id === tool;\n return (\n <div\n class={{\n 'shell-tools__view': true,\n 'shell-tools__view--active': active,\n }}\n hidden={!active}\n aria-hidden={active ? undefined : 'true'}\n inert={active ? undefined : true}\n >\n <slot name={`${id}-view`}>\n <slot name={id} />\n </slot>\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <Host\n role={this.presentation === 'fullscreen' ? 'dialog' : 'complementary'}\n aria-modal={this.presentation === 'fullscreen' ? 'true' : undefined}\n aria-label={this.toolsLabel}\n >\n {this.responsiveMode === 'mobile' ? this.renderMobile() : this.renderDesktop()}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["shellToolsCss","MOBILE_VIEW_ORDER","ShellTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","responsiveMode","open","activeTool","presentation","fullscreenHeaderMode","items","itemsJson","headers","headersJson","storageKey","toolsLabel","toolShortcutsLabel","inboxLabel","inboxNavigationLabel","panelToolsEl","selectInboxTool","event","id","detail","isShellInboxTool","mobileActiveTool","dsToolChange","emit","selected","handlePanelToolChange","handlePanelPresentationChange","handleMobileHeaderAction","tool","stopPropagation","dsHeaderAction","resolvedItems","parsePanelToolsItems","availableInboxTools","filter","item","isInactive","map","resolveAvailableInboxTool","componentWillLoad","reconcileAvailability","handleItemsChange","next","reconcilePanelToolsAvailability","resolvedHeaders","Object","keys","length","trim","parsed","JSON","parse","Array","isArray","activeHeader","activateMobileTool","find","entry","resolvePanelToolActivation","activateTool","closeDrawer","focusHeaderAction","action","el","querySelector","CSS","escape","setFocus","renderForwardedSlots","PANEL_TOOLS_TOOL_IDS","flatMap","h","name","slot","renderDesktop","class","ref","element","onDsToolChange","onDsPresentationChange","renderMobileHeader","header","configuredTitle","title","showBack","PANEL_TOOLS_LABELS","actions","heading","backIcon","backAriaLabel","showMenu","toolHeader","onDsBack","dsHeaderBack","onDsAction","renderMobile","inboxTabs","label","undefined","inert","tabs","value","onDsChange","active","hidden","render","mobile","Host","key","role"],"sources":["src/wc/components/ShellTools/ShellTools.css?tag=ds-shell-tools&encapsulation=scoped","src/wc/components/ShellTools/ShellTools.tsx"],"sourcesContent":[":host {\n display: block;\n min-width: 0;\n min-height: 0;\n height: 100%;\n background: transparent;\n}\n\n:host([responsive-mode='mobile']) {\n width: 100%;\n background: var(--color-background-primary);\n}\n\n.shell-tools__desktop,\n.shell-tools__desktop ds-panel-tools,\n.shell-tools__mobile {\n display: block;\n min-width: 0;\n min-height: 0;\n height: 100%;\n}\n\n.shell-tools__mobile {\n display: grid;\n grid-template-rows: auto auto minmax(0, 1fr);\n background: var(--color-background-primary);\n}\n\n.shell-tools__inbox-nav {\n padding: var(--dimension-space-100);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n background: var(--color-background-primary);\n}\n\n.shell-tools__mobile-body,\n.shell-tools__view {\n min-width: 0;\n min-height: 0;\n height: 100%;\n}\n\n.shell-tools__mobile-body {\n overflow: hidden;\n}\n\n.shell-tools__view {\n overflow: auto;\n overscroll-behavior: contain;\n}\n\n.shell-tools__view[hidden] {\n display: none;\n}\n\n.shell-tools__view ::slotted(*) {\n min-height: 0;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport {\n PANEL_TOOLS_LABELS,\n PANEL_TOOLS_TOOL_IDS,\n type PanelToolsHeaderAction,\n type PanelToolsHeaderConfig,\n type PanelToolsHeaders,\n type PanelToolsItem,\n type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n parsePanelToolsItems,\n reconcilePanelToolsAvailability,\n resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n isShellInboxTool,\n resolveAvailableInboxTool,\n type ShellInboxToolId,\n type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\nconst MOBILE_VIEW_ORDER: PanelToolsToolId[] = [\n 'search',\n 'agents',\n 'messages',\n 'stacks',\n 'activity',\n 'help',\n];\n\n@Component({\n tag: 'ds-shell-tools',\n styleUrl: 'ShellTools.css',\n scoped: true,\n})\nexport class ShellTools {\n @Element() el!: HTMLElement;\n\n /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n @Prop({ attribute: 'responsive-mode', reflect: true })\n responsiveMode: ShellResponsiveMode = 'desktop';\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n activeTool: PanelToolsToolId | '' = '';\n @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n @Prop() items: PanelToolsItem[] = [];\n @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n @Prop() headers: PanelToolsHeaders = {};\n @Prop({ attribute: 'headers-json' }) headersJson: string = '';\n @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n @Prop() toolsLabel: string = 'Tools';\n @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n @Prop() inboxLabel: string = 'Inbox';\n @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n id: PanelToolsToolId;\n selected: boolean;\n }>;\n @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n presentation: 'drawer' | 'fullscreen';\n }>;\n @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n tool: PanelToolsToolId;\n }>;\n @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n tool: PanelToolsToolId;\n id: string;\n }>;\n\n private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n private get resolvedItems(): PanelToolsItem[] {\n return parsePanelToolsItems(this.items, this.itemsJson);\n }\n\n private get availableInboxTools(): ShellInboxToolId[] {\n return this.resolvedItems\n .filter(item => !item.isInactive && isShellInboxTool(item.id))\n .map(item => item.id as ShellInboxToolId);\n }\n\n private get mobileActiveTool(): PanelToolsToolId | '' {\n if (!isShellInboxTool(this.activeTool)) return this.activeTool;\n return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n }\n\n componentWillLoad() {\n this.reconcileAvailability();\n }\n\n @Watch('items')\n @Watch('itemsJson')\n handleItemsChange() {\n this.reconcileAvailability();\n }\n\n private reconcileAvailability() {\n const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n this.open = next.open;\n this.activeTool = next.activeTool;\n }\n\n private resolvedHeaders(): PanelToolsHeaders {\n if (Object.keys(this.headers).length) return this.headers;\n if (!this.headersJson.trim()) return {};\n try {\n const parsed = JSON.parse(this.headersJson);\n return parsed && typeof parsed === 'object' && !Array.isArray(parsed)\n ? (parsed as PanelToolsHeaders)\n : {};\n } catch {\n return {};\n }\n }\n\n private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n return this.resolvedHeaders()[tool] ?? {};\n }\n\n private activateMobileTool(id: PanelToolsToolId) {\n const item = this.resolvedItems.find(entry => entry.id === id);\n if (!item || item.isInactive) return;\n const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n this.open = next.open;\n this.activeTool = next.activeTool;\n this.dsToolChange.emit({ id, selected: next.selected });\n }\n\n private selectInboxTool = (event: CustomEvent<string>) => {\n const id = event.detail;\n if (!isShellInboxTool(id) || id === this.mobileActiveTool) return;\n this.open = true;\n this.activeTool = id;\n this.dsToolChange.emit({ id, selected: true });\n };\n\n private handlePanelToolChange = (\n event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n ) => {\n this.activeTool = event.detail.id;\n this.open = event.detail.selected;\n };\n\n private handlePanelPresentationChange = (\n event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n ) => {\n this.presentation = event.detail.presentation;\n };\n\n private handleMobileHeaderAction = (\n tool: PanelToolsToolId,\n event: CustomEvent<{ id: string }>\n ) => {\n event.stopPropagation();\n this.dsHeaderAction.emit({ tool, id: event.detail.id });\n };\n\n /** Match PanelTools' imperative activation contract in every responsive mode. */\n @Method()\n async activateTool(id: PanelToolsToolId) {\n if (this.responsiveMode !== 'mobile') {\n await this.panelToolsEl?.activateTool(id);\n return;\n }\n this.activateMobileTool(id);\n }\n\n /** Close the active global tool surface. */\n @Method()\n async closeDrawer() {\n if (this.responsiveMode !== 'mobile') {\n await this.panelToolsEl?.closeDrawer();\n return;\n }\n if (!this.open) return;\n const id = this.activeTool;\n this.open = false;\n if (id) this.dsToolChange.emit({ id, selected: false });\n }\n\n /** Focus an application-owned action in the visible shared tool header. */\n @Method()\n async focusHeaderAction(id: string) {\n if (this.responsiveMode !== 'mobile') {\n await this.panelToolsEl?.focusHeaderAction(id);\n return;\n }\n const action = this.el.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n | (HTMLElement & { setFocus?: () => Promise<void> })\n | null;\n await action?.setFocus?.();\n }\n\n private renderForwardedSlots() {\n return PANEL_TOOLS_TOOL_IDS.flatMap(id => [\n <slot name={id} slot={id} />,\n <slot name={`${id}-view`} slot={`${id}-view`} />,\n ]);\n }\n\n private renderDesktop() {\n return (\n <div class=\"shell-tools__desktop\">\n <ds-panel-tools\n open={this.open}\n activeTool={this.activeTool}\n presentation={this.presentation}\n fullscreenHeaderMode={this.fullscreenHeaderMode}\n items={this.resolvedItems}\n headers={this.resolvedHeaders()}\n storageKey={this.storageKey}\n toolsLabel={this.toolsLabel}\n toolShortcutsLabel={this.toolShortcutsLabel}\n ref={element => {\n this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n }}\n onDsToolChange={this.handlePanelToolChange}\n onDsPresentationChange={this.handlePanelPresentationChange}\n >\n {this.renderForwardedSlots()}\n </ds-panel-tools>\n </div>\n );\n }\n\n private renderMobileHeader(tool: PanelToolsToolId) {\n const header = this.activeHeader(tool);\n const configuredTitle = header.title?.trim();\n const title = isShellInboxTool(tool)\n ? header.showBack && configuredTitle\n ? configuredTitle\n : this.inboxLabel\n : configuredTitle || PANEL_TOOLS_LABELS[tool];\n const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n\n return (\n <ds-panel-tool-header\n class=\"shell-tools__mobile-header\"\n heading={title}\n showBack={header.showBack ?? false}\n backIcon={header.backIcon || 'ChevronLeft'}\n backAriaLabel={header.backAriaLabel || 'Back'}\n showMenu={false}\n ref={element => {\n const toolHeader = element as\n | (HTMLDsPanelToolHeaderElement & { actions: PanelToolsHeaderAction[] })\n | undefined;\n if (toolHeader) toolHeader.actions = actions;\n }}\n onDsBack={() => this.dsHeaderBack.emit({ tool })}\n onDsAction={(event: CustomEvent<{ id: string }>) =>\n this.handleMobileHeaderAction(tool, event)}\n />\n );\n }\n\n private renderMobile() {\n const tool = this.mobileActiveTool;\n const inboxTabs = this.availableInboxTools.map(id => ({\n id,\n label: PANEL_TOOLS_LABELS[id],\n }));\n\n return (\n <div\n class=\"shell-tools__mobile\"\n aria-hidden={this.open && tool ? undefined : 'true'}\n inert={this.open && tool ? undefined : true}\n >\n {tool ? this.renderMobileHeader(tool) : null}\n {tool && isShellInboxTool(tool) && inboxTabs.length ? (\n <div class=\"shell-tools__inbox-nav\">\n <ds-tab-group\n tabs={inboxTabs}\n value={tool}\n aria-label={this.inboxNavigationLabel}\n onDsChange={this.selectInboxTool}\n />\n </div>\n ) : null}\n <div class=\"shell-tools__mobile-body\">\n {MOBILE_VIEW_ORDER.map(id => {\n const active = this.open && id === tool;\n return (\n <div\n class={{\n 'shell-tools__view': true,\n 'shell-tools__view--active': active,\n }}\n hidden={!active}\n aria-hidden={active ? undefined : 'true'}\n inert={active ? undefined : true}\n >\n <slot name={`${id}-view`}>\n <slot name={id} />\n </slot>\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n\n render() {\n const mobile = this.responsiveMode === 'mobile';\n return (\n <Host\n role={\n mobile\n ? this.presentation === 'fullscreen'\n ? 'dialog'\n : 'complementary'\n : undefined\n }\n aria-modal={mobile && this.presentation === 'fullscreen' ? 'true' : undefined}\n aria-label={mobile ? this.toolsLabel : undefined}\n >\n {mobile ? this.renderMobile() : this.renderDesktop()}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as s,c as i,h as e,a as n,t as o}from"./index.js";import{c as a}from"./p-B8C_yfLQ.js";import{d as r}from"./p-CH6cNXXF.js";import{d as h}from"./p-CoYFJD-w.js";import{d as c}from"./p-BAfG3M8z.js";import{d}from"./p-Cpr3K41-.js";import{d as l}from"./p-BwGnhInj.js";import{T as f}from"./p-C_0Q8Cnp.js";import{r as u,a as m}from"./p-B6Vuayt6.js";import{r as p}from"./p-BJMRBHKW.js";function g(t,s){const i=typeof t==="function"?t(s):t;return typeof i==="string"?{description:i}:i}class v{constructor(){this.records=[];this.listeners=new Set;this.nextId=0}add(t){const s=t.id||`ds-toast-${++this.nextId}`;const i=this.records.findIndex((t=>t.id===s));if(!t.title?.trim()&&!t.description?.trim()){console.warn(`[ds-toast] Toast "${s}" should provide a title or description.`)}if(i>=0){const e=this.records[i];const n={...e,...t,id:s,priority:t.priority??e.priority,transitionStatus:"active",closeReason:undefined,updateKey:e.updateKey+1,timerKey:e.timerKey+1};this.records=[n,...this.records.filter(((t,s)=>s!==i))];this.emit();return s}const e={...t,id:s,priority:t.priority??"low",transitionStatus:"starting",updateKey:0,timerKey:0};this.records=[e,...this.records];this.emit();return s}update(t,s){const i=this.records.findIndex((s=>s.id===t));if(i<0)return;const e=this.records[i];const n=Object.prototype.hasOwnProperty.call(s,"timeout")||e.type==="loading"&&s.type!==undefined&&s.type!=="loading";const o={...e,...s,id:t,priority:s.priority??e.priority,updateKey:e.updateKey+1,timerKey:n?e.timerKey+1:e.timerKey};this.records=this.records.map(((t,s)=>s===i?o:t));this.emit()}close(t,s="programmatic"){const i=this.records.findIndex((s=>s.id===t));if(i<0||this.records[i].transitionStatus==="ending")return;const e={...this.records[i],transitionStatus:"ending",closeReason:s};this.records=this.records.map(((t,s)=>s===i?e:t));this.emit();e.onClose?.({id:t,reason:s,toast:e})}closeAll(t="programmatic"){for(const s of[...this.records])this.close(s.id,t)}async promise(t,s){const i=g(s.loading,undefined);const e=this.add({...i,type:i.type??"loading",timeout:0});try{const i=await t;const n=g(s.success,i);this.update(e,{...n,type:n.type??"success",timeout:n.timeout});return i}catch(t){const i=g(s.error,t);this.update(e,{...i,type:i.type??"error",timeout:i.timeout});throw t}}subscribe(t){this.listeners.add(t);t(this.getSnapshot());return()=>{this.listeners.delete(t)}}getSnapshot(){return this.records.map((t=>({...t})))}activate(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="starting")return;this.records=this.records.map((s=>s.id===t?{...s,transitionStatus:"active"}:s));this.emit()}remove(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="ending")return null;const i=s.closeReason??"programmatic";this.records=this.records.filter((s=>s.id!==t));this.emit();const e={id:t,reason:i,toast:s};return e}notifyRemove(t){const{toast:s}=t;s.onRemove?.(t)}emit(){const t=this.getSnapshot();for(const s of this.listeners)s(t)}}function w(){return new v}const y=Symbol.for("@ds-mo/ui/default-toast-manager");const b=globalThis;const x=b[y];const M=x??w();if(!x)b[y]=M;const T=()=>`.sc-ds-toast-h{display:contents}.toast-region.sc-ds-toast{position:fixed;inset:0;z-index:var(--dimension-z-index-floating);pointer-events:none;outline:none}.toast-viewport.sc-ds-toast{position:absolute;right:var(--dimension-space-200);bottom:var(--dimension-space-200);display:grid;width:min( var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)) )}.toast-positioner.sc-ds-toast{grid-area:1 / 1;align-self:end;justify-self:center;width:100%;pointer-events:auto;transform:translateY( calc(-1 * var(--toast-index) * var(--dimension-space-100)) );transition:transform var(--effect-motion-short-3), width var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner.sc-ds-toast{width:calc( 100% - 2 * var(--toast-index) * var(--dimension-space-100) )}.toast-viewport[data-expanded].sc-ds-toast .toast-positioner.sc-ds-toast{transform:translateY(calc(-1 * var(--toast-offset-y)))}.toast-positioner[data-limited].sc-ds-toast{visibility:hidden;pointer-events:none}.toast-positioner--anchored.sc-ds-toast{position:fixed;width:min( var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)) );transform:none}.toast-positioner--anchored[data-positioned='false'].sc-ds-toast{visibility:hidden}.toast-surface.sc-ds-toast{position:relative;display:block;box-sizing:border-box;width:100%;height:var(--toast-height, auto);padding:var(--dimension-space-200);overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);transform:translate( var(--toast-swipe-movement-x), var(--toast-swipe-movement-y) );animation:toast-enter var(--effect-motion-short-2) both}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{animation:toast-exit var(--effect-motion-short-3) both}.toast-surface--swiping.sc-ds-toast{transition:none;user-select:none}.toast-content.sc-ds-toast{display:flex;flex-direction:column;min-width:0;padding-inline-end:var(--dimension-size-500);transition:opacity var(--effect-motion-short-3)}.toast-copy.sc-ds-toast{display:flex;flex-direction:column;min-width:0;min-height:var(--typography-lineheight-md);margin-block:calc(-1 * var(--dimension-space-025));gap:var(--dimension-space-050)}.toast-title.sc-ds-toast,.toast-description.sc-ds-toast{min-width:0}.toast-action.sc-ds-toast{align-self:start;margin-top:calc( var(--dimension-space-200) + var(--dimension-space-025) )}.toast-close.sc-ds-toast{position:absolute;top:var(--dimension-space-100);right:var(--dimension-space-100);transition:opacity var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-content.sc-ds-toast,.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-close.sc-ds-toast{opacity:0}.toast-assertive-announcer.sc-ds-toast{position:absolute;width:var(--dimension-size-100);height:var(--dimension-size-100);padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}@keyframes toast-enter{from{opacity:0;transform:translateY(var(--dimension-space-100))}to{opacity:1;transform:translateY(0)}}@keyframes toast-exit{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.toast-positioner.sc-ds-toast,.toast-surface.sc-ds-toast,.toast-content.sc-ds-toast,.toast-close.sc-ds-toast,.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{transition:none;animation:none}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{opacity:0}}`;const A=40;const k=10;const C="__global-stack__";const P='button,a,input,textarea,select,[role="button"],[data-ds-toast-swipe-ignore]';const S=new WeakMap;const F=new Set;let E=null;let j=0;const z=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsToastClose=i(this,"dsToastClose");this.dsToastRemove=i(this,"dsToastRemove");this.dsToastAction=i(this,"dsToastAction");this.manager=M;this.limit=3;this.timeout=f.animationDelayLong2;this.label="Notifications";this.closeLabel="Close notification";this.swipeDirections=["down","right"];this.records=[];this.expanded=false;this.keyboardActive=false;this.swipe=null;this.layoutVersion=0;this.instanceId=++j;this.domIds=new Map;this.timers=new Map;this.closeWatchdogs=new Map;this.closeFrames=new Map;this.closeEvents=new Set;this.activationFrames=new Map;this.pauseReasons=new Set;this.hoveredIds=new Set;this.heights=new Map;this.measuredUpdateKeys=new Map;this.anchoredPositions=new Map;this.dismissedSwipeDirections=new Map;this.observedElements=new Set;this.pendingRemovals=[];this.unsubscribe=null;this.attachedManager=null;this.previousFocus=null;this.resizeObserver=null;this.mutationObserver=null;this.layoutFrame=null;this.activeSwipe=null;this.nextDomId=0;this.connected=false;this.pendingHoverLeave=false;this.handleWindowBlur=()=>this.pauseTimers("window");this.handleWindowFocus=()=>this.resumeTimers("window");this.handleVisibilityChange=()=>{if(document.hidden)this.pauseTimers("document");else this.resumeTimers("document")};this.handleFocusIn=()=>{const t=document.activeElement;if(!(t instanceof s)||!t.matches(":focus-visible"))return;E=this;this.keyboardActive=true;this.expanded=true;this.pauseTimers("focus")};this.handleFocusOut=t=>{const s=t.relatedTarget;if(s instanceof Node&&this.el.contains(s))return;if(!this.keyboardActive)return;this.keyboardActive=false;this.expanded=this.hoveredIds.size>0;this.resumeTimers("focus")};this.handleDocumentKeyDown=t=>{if(t.key!=="F6")return;const s=Array.from(F).filter((t=>t.activeRecords.length>0));const i=E&&E.activeRecords.length?E:s[s.length-1];if(i!==this)return;t.preventDefault();if(!this.el.contains(document.activeElement)){this.previousFocus=document.activeElement}this.keyboardActive=true;this.regionElement?.focus()};this.handleRegionKeyDown=t=>{if(t.key==="Escape"){const s=t.target;const i=s.closest(".toast-positioner");const e=i?.dataset["toastId"]??this.activeRecords[0]?.id;if(e){t.preventDefault();this.manager.close(e,"escape")}return}if(t.key==="Tab"&&t.shiftKey&&t.target===this.regionElement){t.preventDefault();this.restorePreviousFocus()}};this.handleWindowResize=()=>{this.heights.clear();this.measuredUpdateKeys.clear();this.layoutVersion+=1;this.scheduleLayout()};this.scheduleLayout=()=>{if(this.layoutFrame!==null)return;this.layoutFrame=requestAnimationFrame((()=>{this.layoutFrame=null;this.measureLayout()}))}}connectedCallback(){this.connect()}componentDidLoad(){this.connect()}connect(){if(this.connected)return;this.connected=true;this.resizeObserver??(this.resizeObserver=new ResizeObserver((()=>this.scheduleLayout())));this.mutationObserver??(this.mutationObserver=new MutationObserver((()=>this.scheduleLayout())));this.mutationObserver.observe(document.body,{childList:true,subtree:true});if(!this.unsubscribe)this.attachManager(this.manager);window.addEventListener("blur",this.handleWindowBlur);window.addEventListener("focus",this.handleWindowFocus);window.addEventListener("resize",this.handleWindowResize);window.addEventListener("scroll",this.scheduleLayout,true);document.addEventListener("keydown",this.handleDocumentKeyDown);document.addEventListener("visibilitychange",this.handleVisibilityChange);F.add(this);if(!E)E=this}componentDidRender(){this.syncObservedElements();this.flushPendingRemovals();this.scheduleLayout()}disconnectedCallback(){this.connected=false;this.flushPendingRemovals();this.detachManager();this.resetManagerState();this.resizeObserver?.disconnect();this.resizeObserver=null;this.mutationObserver?.disconnect();this.mutationObserver=null;this.observedElements.clear();if(this.layoutFrame!==null)cancelAnimationFrame(this.layoutFrame);this.layoutFrame=null;window.removeEventListener("blur",this.handleWindowBlur);window.removeEventListener("focus",this.handleWindowFocus);window.removeEventListener("resize",this.handleWindowResize);window.removeEventListener("scroll",this.scheduleLayout,true);document.removeEventListener("keydown",this.handleDocumentKeyDown);document.removeEventListener("visibilitychange",this.handleVisibilityChange);F.delete(this);if(E===this){const t=Array.from(F);E=t[t.length-1]??null}}onManagerChange(t){this.detachManager();this.resetManagerState();if(this.connected)this.attachManager(t)}onTimeoutChange(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}this.timers.clear();this.syncTimers()}attachManager(t){const s=S.get(t);if(s&&s!==this){console.warn("[ds-toast] A manager can control only one connected ds-toast instance.");return}S.set(t,this);this.attachedManager=t;this.unsubscribe=t.subscribe((t=>{this.records=t;this.syncLifecycle(t);this.scheduleLayout()}))}detachManager(){this.unsubscribe?.();this.unsubscribe=null;if(this.attachedManager&&S.get(this.attachedManager)===this){S.delete(this.attachedManager)}this.attachedManager=null}resetManagerState(){this.flushPendingRemovals();if(this.el.contains(document.activeElement))this.restorePreviousFocus();this.clearAllTimers();for(const t of this.activationFrames.values())cancelAnimationFrame(t);for(const t of this.closeFrames.values())cancelAnimationFrame(t);this.activationFrames.clear();this.closeFrames.clear();this.closeEvents.clear();this.pauseReasons.clear();this.hoveredIds.clear();this.pendingHoverLeave=false;this.heights.clear();this.measuredUpdateKeys.clear();this.anchoredPositions.clear();this.dismissedSwipeDirections.clear();this.domIds.clear();this.activeSwipe=null;this.swipe=null;this.expanded=false;this.keyboardActive=false;this.records=[];this.resizeObserver?.disconnect();this.observedElements.clear()}syncObservedElements(){const t=new Set(this.el.querySelectorAll(".toast-positioner"));for(const s of this.records){if(!s.positioner)continue;const i=this.resolveAnchor(s.positioner.anchor);if(i)t.add(i)}for(const s of this.observedElements){if(!t.has(s)){this.resizeObserver?.unobserve(s);this.observedElements.delete(s)}}for(const s of t){if(this.observedElements.has(s))continue;this.resizeObserver?.observe(s);this.observedElements.add(s)}}flushPendingRemovals(){for(const t of this.pendingRemovals.splice(0)){t.manager.notifyRemove(t.context);this.dsToastRemove.emit({id:t.context.id,toast:t.context.toast})}}syncLifecycle(t){const s=new Set(t.map((t=>t.id)));for(const t of this.hoveredIds){if(t!==C&&!s.has(t))this.hoveredIds.delete(t)}const i=t.some((t=>t.transitionStatus==="ending"));if(this.pendingHoverLeave&&!i&&!this.hoveredIds.size){this.pendingHoverLeave=false;this.expanded=false;this.resumeTimers("hover")}else if(!this.hoveredIds.size&&!this.pendingHoverLeave){this.resumeTimers("hover")}for(const[t,i]of this.timers){if(s.has(t))continue;if(i.handle)clearTimeout(i.handle);this.timers.delete(t)}for(const[t,i]of this.closeWatchdogs){if(s.has(t))continue;clearTimeout(i);this.closeWatchdogs.delete(t)}for(const[t,i]of this.activationFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.activationFrames.delete(t)}for(const[t,i]of this.closeFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.closeFrames.delete(t)}for(const t of this.domIds.keys()){if(s.has(t))continue;this.closeEvents.delete(t);this.domIds.delete(t);this.heights.delete(t);this.measuredUpdateKeys.delete(t);this.anchoredPositions.delete(t);this.dismissedSwipeDirections.delete(t)}for(const s of t){this.ensureDomId(s.id);if(s.transitionStatus==="starting"&&!this.activationFrames.has(s.id)){const t=this.attachedManager;const i=requestAnimationFrame((()=>{this.activationFrames.delete(s.id);t?.activate(s.id)}));this.activationFrames.set(s.id,i)}if(s.transitionStatus==="ending"){this.clearToastTimer(s.id);this.beginRemoval(s)}else{const t=this.closeWatchdogs.get(s.id);if(t)clearTimeout(t);this.closeWatchdogs.delete(s.id);const i=this.closeFrames.get(s.id);if(i)cancelAnimationFrame(i);this.closeFrames.delete(s.id);this.closeEvents.delete(s.id)}}this.syncTimers()}syncTimers(){const t=new Set;for(const s of this.records){if(s.transitionStatus!=="active")continue;t.add(s.id);const i=this.resolveToastTimeout(s);if(i<=0){this.clearToastTimer(s.id);continue}const e=this.timers.get(s.id);if(!e||e.timerKey!==s.timerKey){this.clearToastTimer(s.id);this.timers.set(s.id,{timerKey:s.timerKey,remaining:i,startedAt:0,handle:null})}if(!this.isPaused)this.startToastTimer(s.id)}for(const s of this.timers.keys()){if(!t.has(s))this.clearToastTimer(s)}}resolveToastTimeout(t){const s=t.timeout??this.timeout;if(typeof s==="number")return Math.max(0,s);return u(s,f.animationDelayLong2)}startToastTimer(t){const s=this.timers.get(t);if(!s||s.handle||s.remaining<=0)return;s.startedAt=Date.now();s.handle=setTimeout((()=>{s.handle=null;s.remaining=0;this.manager.close(t,"timeout")}),s.remaining)}pauseTimers(t){const s=this.isPaused;this.pauseReasons.add(t);if(s)return;const i=Date.now();for(const t of this.timers.values()){if(!t.handle)continue;clearTimeout(t.handle);t.handle=null;t.remaining=Math.max(0,t.remaining-(i-t.startedAt))}}resumeTimers(t){this.pauseReasons.delete(t);if(this.isPaused)return;for(const t of this.timers.keys())this.startToastTimer(t)}get isPaused(){return this.pauseReasons.size>0}clearToastTimer(t){const s=this.timers.get(t);if(s?.handle)clearTimeout(s.handle);this.timers.delete(t)}clearAllTimers(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}for(const t of this.closeWatchdogs.values())clearTimeout(t);this.timers.clear();this.closeWatchdogs.clear()}beginRemoval(t){if(!this.closeEvents.has(t.id)){this.closeEvents.add(t.id);this.dsToastClose.emit({id:t.id,reason:t.closeReason??"programmatic",toast:t});this.moveFocusAfterClose(t.id)}if(this.closeWatchdogs.has(t.id)||this.closeFrames.has(t.id))return;const s=m(f.motionShort3,f.animationDurationShort3);if(s<=0){queueMicrotask((()=>this.completeRemoval(t)));return}const i=requestAnimationFrame((()=>{this.closeFrames.delete(t.id);const i=this.records.find((s=>s.id===t.id));if(!i||i.transitionStatus!=="ending")return;this.closeWatchdogs.set(t.id,setTimeout((()=>this.completeRemoval(i)),s))}));this.closeFrames.set(t.id,i)}completeRemoval(t){const s=this.records.find((s=>s.id===t.id));if(!s||s.transitionStatus!=="ending")return;const i=this.closeWatchdogs.get(t.id);if(i)clearTimeout(i);this.closeWatchdogs.delete(t.id);const e=this.closeFrames.get(t.id);if(e)cancelAnimationFrame(e);this.closeFrames.delete(t.id);const n=this.attachedManager;const o=n?.remove(t.id);if(n&&o)this.pendingRemovals.push({manager:n,context:o})}handleAnimationComplete(t){if(t.transitionStatus==="ending")this.completeRemoval(t)}bindAnimationCancel(t,s){if(!t||t.dataset["cancelBound"]==="true")return;t.dataset["cancelBound"]="true";t.addEventListener("animationcancel",(()=>{const t=this.records.find((t=>t.id===s));if(t)this.handleAnimationComplete(t)}))}handlePointerEnter(t){E=this;this.pendingHoverLeave=false;this.hoveredIds.add(t);this.expanded=true;this.pauseTimers("hover")}handlePointerLeave(t){this.hoveredIds.delete(t);if(this.hoveredIds.size)return;if(this.records.some((t=>t.transitionStatus==="ending"))){this.pendingHoverLeave=true;return}this.expanded=false;this.resumeTimers("hover")}get regionElement(){return this.el.querySelector(".toast-region")}restorePreviousFocus(){this.previousFocus?.focus?.();this.previousFocus=null;this.keyboardActive=false}moveFocusAfterClose(t){const s=document.activeElement;const i=this.positionerElement(t);if(!s||!i?.contains(s))return;requestAnimationFrame((()=>{const s=this.activeRecords.find((s=>s.id!==t));const i=s?this.positionerElement(s.id)?.querySelector("ds-button-unfilled"):null;if(i?.setFocus)void i.setFocus();else if(s)this.regionElement?.focus();else this.restorePreviousFocus()}))}handleAction(t,s){const i={id:t.id,toast:t,originalEvent:s.detail};this.dsToastAction.emit(i);t.action?.onAction?.({id:t.id,data:t.data,manager:this.manager,originalEvent:s.detail})}handlePointerDown(t,s){if(s.button!==0)return;const i=s.target;if(i.closest(P))return;const e=s.currentTarget;e.setPointerCapture(s.pointerId);this.activeSwipe={id:t.id,pointerId:s.pointerId,pointerType:s.pointerType,startX:s.clientX,startY:s.clientY,maxDistance:0,cancelled:false,axis:null};this.swipe={id:t.id,x:0,y:0};if(s.pointerType==="touch")this.pauseTimers("swipe")}handlePointerMove(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId||s.cancelled)return;const i=t.clientX-s.startX;const e=t.clientY-s.startY;if(!s.axis&&Math.max(Math.abs(i),Math.abs(e))>1){s.axis=Math.abs(i)>=Math.abs(e)?"x":"y"}if(!s.axis)return;const n=s.axis==="x";const o=n?i>=0?"right":"left":e>=0?"down":"up";const a=this.swipeDirections.includes(o);const r=n?Math.abs(i):Math.abs(e);const h=a?r:Math.sqrt(r);const c=(n?i:e)<0?-h:h;const d=n?c:0;const l=n?0:c;if(s.maxDistance-h>=k){s.cancelled=true;this.cancelSwipe();return}s.maxDistance=Math.max(s.maxDistance,h);if(r>1)t.preventDefault();this.swipe={id:s.id,x:d,y:l,direction:a?o:undefined}}handlePointerUp(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId)return;const i=this.swipe;const e=i?Math.max(Math.abs(i.x),Math.abs(i.y)):0;const n=!s.cancelled&&!!i?.direction&&e>=A;const o=s.id;const a=s.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(a)this.resumeTimers("swipe");if(n&&i.direction){this.dismissedSwipeDirections.set(o,i.direction);this.manager.close(o,"swipe")}}handlePointerCancel(t){if(this.activeSwipe?.pointerId!==t.pointerId)return;this.cancelSwipe()}cancelSwipe(){const t=this.activeSwipe?.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(t)this.resumeTimers("swipe")}get touchAction(){const t=this.swipeDirections.includes("left")||this.swipeDirections.includes("right");const s=this.swipeDirections.includes("up")||this.swipeDirections.includes("down");if(t&&s)return"none";if(t)return"pan-y";if(s)return"pan-x";return"auto"}measureNaturalHeight(t,s){const i=t.querySelector(".toast-surface");if(!i)return 0;const e=t.style.width;const n=t.style.transition;const o=i.style.height;if(s){t.style.transition="none";t.style.width="100%"}i.style.height="auto";const a=i.getBoundingClientRect().height;i.style.height=o;if(s){t.style.width=e;t.getBoundingClientRect();t.style.transition=n}return a}measureLayout(){let t=false;for(const s of this.records){const i=this.positionerElement(s.id);if(!i)continue;let e=this.heights.get(s.id)??0;const n=e<=0||this.measuredUpdateKeys.get(s.id)!==s.updateKey;if(n){e=this.measureNaturalHeight(i,!s.positioner);if(e>0){if(this.heights.get(s.id)!==e)t=true;this.heights.set(s.id,e);this.measuredUpdateKeys.set(s.id,s.updateKey)}}if(!s.positioner)continue;const o=this.resolveAnchor(s.positioner.anchor);if(!o||e<=0){if(this.anchoredPositions.delete(s.id))t=true;continue}const r=i.getBoundingClientRect();const h=p(s.positioner.sideOffset,f.space050);const c=p(s.positioner.alignOffset,0);const d=a({anchorRect:o.getBoundingClientRect(),popupWidth:r.width,popupHeight:e,side:s.positioner.side??"top",align:s.positioner.align??"center",sideOffsetPx:h,alignOffsetPx:c,viewportPadPx:p(undefined,f.space200),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});const l=this.anchoredPositions.get(s.id);if(!l||l.x!==d.x||l.y!==d.y||l.side!==d.resolvedSide){this.anchoredPositions.set(s.id,{x:d.x,y:d.y,side:d.resolvedSide});t=true}}if(t)this.layoutVersion+=1}resolveAnchor(t){return typeof t==="string"?document.getElementById(t):t}positionerElement(t){return Array.from(this.el.querySelectorAll(".toast-positioner")).find((s=>s.dataset["toastId"]===t))??null}ensureDomId(t){const s=this.domIds.get(t);if(s)return s;const i=++this.nextDomId;this.domIds.set(t,i);return i}get activeRecords(){return this.records.filter((t=>t.transitionStatus!=="ending"))}globalLayout(){const t=this.records.filter((t=>!t.positioner));let s=0;let i=0;const e=p(undefined,f.space200);const n=new Map;t.forEach(((t,o)=>{if(t.transitionStatus==="ending"){n.set(t.id,{index:o,offset:s,limited:false});return}const a=i>=Math.max(1,this.limit);n.set(t.id,{index:i,offset:s,limited:a});s+=(this.heights.get(t.id)??0)+e;i+=1}));return n}renderToast(t,s){const i=this.ensureDomId(t.id);const n=`ds-toast-${this.instanceId}-${i}-title`;const o=`ds-toast-${this.instanceId}-${i}-description`;const a=this.swipe?.id===t.id?this.swipe:null;const r=a?.direction??this.dismissedSwipeDirections.get(t.id);const h=!!t.positioner;const c=this.anchoredPositions.get(t.id);const d=t.priority==="high"&&!this.keyboardActive;const l=this.keyboardActive&&!s.limited?0:-1;const f=this.heights.get(t.id);return e("div",{ref:s=>this.bindAnimationCancel(s,t.id),class:{"toast-positioner":true,"toast-positioner--anchored":h,"toast-positioner--ending":t.transitionStatus==="ending"},"data-toast-id":t.id,"data-behind":!h&&s.index>0?"":undefined,"data-limited":s.limited?"":undefined,"data-positioned":h?String(!!c):undefined,"data-side":c?.side,inert:s.limited?true:undefined,"aria-hidden":s.limited?"true":undefined,style:{"--toast-index":String(s.index),"--toast-offset-y":`${s.offset}px`,"--toast-height":f?`${f}px`:undefined,zIndex:String(this.records.length-s.index),left:c?`${c.x}px`:undefined,top:c?`${c.y}px`:undefined},onAnimationEnd:()=>this.handleAnimationComplete(t)},e("div",{class:{"toast-surface":true,"toast-surface--swiping":!!a},role:t.priority==="high"?"alertdialog":"dialog","aria-modal":"false","aria-labelledby":t.title?n:t.description?o:undefined,"aria-describedby":t.title&&t.description?o:undefined,"aria-hidden":d?"true":undefined,"data-type":t.type,"data-priority":t.priority,"data-transition-status":t.transitionStatus,"data-swiping":a?"":undefined,"data-swipe-direction":r,style:{"--toast-swipe-movement-x":`${a?.x??0}px`,"--toast-swipe-movement-y":`${a?.y??0}px`,touchAction:this.touchAction},onPointerDown:s=>this.handlePointerDown(t,s),onPointerMove:t=>this.handlePointerMove(t),onPointerUp:t=>this.handlePointerUp(t),onPointerCancel:t=>this.handlePointerCancel(t),onPointerEnter:h?()=>this.handlePointerEnter(t.id):undefined,onPointerLeave:h?()=>this.handlePointerLeave(t.id):undefined},e("div",{class:"toast-content"},e("div",{class:"toast-copy"},t.title&&e("ds-text",{class:"toast-title",as:"div",variant:"text-title-small",color:"primary",textId:n},t.title),t.description&&e("ds-text",{class:"toast-description",as:"div",variant:"text-body-medium",color:"secondary",textId:o},t.description)),t.action&&e("ds-button-unfilled",{class:"toast-action",variant:"label",size:"md",type:"button",label:t.action.label,"aria-label":t.action.ariaLabel,hasBorder:true,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:s=>this.handleAction(t,s)})),e("ds-button-unfilled",{class:"toast-close",variant:"icon",size:"md",type:"button",icon:"Cross","aria-label":this.closeLabel,hasBorder:false,activeFill:false,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:()=>this.manager.close(t.id,"close-button")})))}render(){const t=this.globalLayout();const s=this.records.filter((t=>!t.positioner));const i=this.records.filter((t=>!!t.positioner));const o=this.records.filter((s=>s.priority==="high"&&s.transitionStatus!=="ending"&&!t.get(s.id)?.limited));return e(n,{key:"0d25a616830b94b833230aa0794bc73245fd000d"},e("section",{key:"305e969af12d9e173e9fed882fe84b5957a4b09a",class:"toast-region",role:"region","aria-label":this.label,"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text",tabIndex:-1,onFocusin:this.handleFocusIn,onFocusout:t=>this.handleFocusOut(t),onKeyDown:t=>this.handleRegionKeyDown(t)},e("div",{key:"629115f8a17fbd24cd0176bb1f3c526b60f4bf7e",class:"toast-viewport","data-expanded":this.expanded?"":undefined,onPointerEnter:()=>this.handlePointerEnter(C),onPointerLeave:()=>this.handlePointerLeave(C)},s.map((s=>this.renderToast(s,t.get(s.id)??{index:0,offset:0,limited:false})))),e("div",{key:"ff4eccae442d2ff2ea4005942193020b5fa628f1",class:"toast-anchored-layer"},i.map((t=>this.renderToast(t,{index:0,offset:0,limited:false})))),e("div",{key:"56e35eaa67b996616730c7be110ba3483206cc91",class:"toast-assertive-announcer"},o.map((t=>e("div",{role:"alert","aria-atomic":"true"},[t.title,t.description].filter(Boolean).join(". ")))))))}get el(){return this}static get watchers(){return{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}}static get style(){return T()}},[2,"ds-toast",{manager:[16],limit:[2],timeout:[8],label:[1],closeLabel:[1,"close-label"],swipeDirections:[16],records:[32],expanded:[32],keyboardActive:[32],swipe:[32],layoutVersion:[32]},undefined,{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}]);function D(){if(typeof customElements==="undefined"){return}const t=["ds-toast","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-toast":if(!customElements.get(o(t))){customElements.define(o(t),z)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){h()}break;case"ds-icon":if(!customElements.get(o(t))){c()}break;case"ds-loader":if(!customElements.get(o(t))){d()}break;case"ds-text":if(!customElements.get(o(t))){l()}break}}))}D();const R=z;const $=D;export{R as DsToast,$ as defineCustomElement};
|
|
1
|
+
import{p as t,H as s,c as i,h as e,a as n,t as o}from"./index.js";import{c as a}from"./p-B8C_yfLQ.js";import{d as r}from"./p-CH6cNXXF.js";import{d as h}from"./p-CoYFJD-w.js";import{d as c}from"./p-BAfG3M8z.js";import{d}from"./p-Cpr3K41-.js";import{d as l}from"./p-BwGnhInj.js";import{T as f}from"./p-C_0Q8Cnp.js";import{r as u,a as m}from"./p-B6Vuayt6.js";import{r as p}from"./p-BJMRBHKW.js";function v(t,s){const i=typeof t==="function"?t(s):t;return typeof i==="string"?{description:i}:i}class g{constructor(){this.records=[];this.listeners=new Set;this.nextId=0}add(t){const s=t.id||`ds-toast-${++this.nextId}`;const i=this.records.findIndex((t=>t.id===s));if(!t.title?.trim()&&!t.description?.trim()){console.warn(`[ds-toast] Toast "${s}" should provide a title or description.`)}if(i>=0){const e=this.records[i];const n={...e,...t,id:s,priority:t.priority??e.priority,transitionStatus:"active",closeReason:undefined,updateKey:e.updateKey+1,timerKey:e.timerKey+1};this.records=[n,...this.records.filter(((t,s)=>s!==i))];this.emit();return s}const e={...t,id:s,priority:t.priority??"low",transitionStatus:"starting",updateKey:0,timerKey:0};this.records=[e,...this.records];this.emit();return s}update(t,s){const i=this.records.findIndex((s=>s.id===t));if(i<0)return;const e=this.records[i];const n=Object.prototype.hasOwnProperty.call(s,"timeout")||e.type==="loading"&&s.type!==undefined&&s.type!=="loading";const o={...e,...s,id:t,priority:s.priority??e.priority,updateKey:e.updateKey+1,timerKey:n?e.timerKey+1:e.timerKey};this.records=this.records.map(((t,s)=>s===i?o:t));this.emit()}close(t,s="programmatic"){const i=this.records.findIndex((s=>s.id===t));if(i<0||this.records[i].transitionStatus==="ending")return;const e={...this.records[i],transitionStatus:"ending",closeReason:s};this.records=this.records.map(((t,s)=>s===i?e:t));this.emit();e.onClose?.({id:t,reason:s,toast:e})}closeAll(t="programmatic"){for(const s of[...this.records])this.close(s.id,t)}async promise(t,s){const i=v(s.loading,undefined);const e=this.add({...i,type:i.type??"loading",timeout:0});try{const i=await t;const n=v(s.success,i);this.update(e,{...n,type:n.type??"success",timeout:n.timeout});return i}catch(t){const i=v(s.error,t);this.update(e,{...i,type:i.type??"error",timeout:i.timeout});throw t}}subscribe(t){this.listeners.add(t);t(this.getSnapshot());return()=>{this.listeners.delete(t)}}getSnapshot(){return this.records.map((t=>({...t})))}activate(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="starting")return;this.records=this.records.map((s=>s.id===t?{...s,transitionStatus:"active"}:s));this.emit()}remove(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="ending")return null;const i=s.closeReason??"programmatic";this.records=this.records.filter((s=>s.id!==t));this.emit();const e={id:t,reason:i,toast:s};return e}notifyRemove(t){const{toast:s}=t;s.onRemove?.(t)}emit(){const t=this.getSnapshot();for(const s of this.listeners)s(t)}}function w(){return new g}const y=Symbol.for("@ds-mo/ui/default-toast-manager");const b=globalThis;const x=b[y];const M=x??w();if(!x)b[y]=M;const T=()=>`.sc-ds-toast-h{display:contents}.toast-region.sc-ds-toast{position:fixed;inset:0;z-index:var(--dimension-z-index-floating);pointer-events:none;outline:none}.toast-viewport.sc-ds-toast{position:absolute;right:var(--dimension-space-200);bottom:var(--dimension-space-200);display:grid;width:min( var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)) )}@media (max-width: 767px){[avoid-mobile-shell-bar].sc-ds-toast-h .toast-viewport.sc-ds-toast{bottom:calc( var(--dimension-space-200) + var(--dimension-stroke-width-012) + var(--dimension-space-050) + var(--dimension-size-600) + max(var(--dimension-space-050), env(safe-area-inset-bottom)) )}}.toast-positioner.sc-ds-toast{grid-area:1 / 1;align-self:end;justify-self:center;width:100%;pointer-events:auto;transform:translateY( calc(-1 * var(--toast-index) * var(--dimension-space-100)) );transition:transform var(--effect-motion-short-3), width var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner.sc-ds-toast{width:calc( 100% - 2 * var(--toast-index) * var(--dimension-space-100) )}.toast-viewport[data-expanded].sc-ds-toast .toast-positioner.sc-ds-toast{transform:translateY(calc(-1 * var(--toast-offset-y)))}.toast-positioner[data-limited].sc-ds-toast{visibility:hidden;pointer-events:none}.toast-positioner--anchored.sc-ds-toast{position:fixed;width:min( var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)) );transform:none}.toast-positioner--anchored[data-positioned='false'].sc-ds-toast{visibility:hidden}.toast-surface.sc-ds-toast{position:relative;display:block;box-sizing:border-box;width:100%;height:var(--toast-height, auto);padding:var(--dimension-space-200);overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);transform:translate( var(--toast-swipe-movement-x), var(--toast-swipe-movement-y) );animation:toast-enter var(--effect-motion-short-2) both}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{animation:toast-exit var(--effect-motion-short-3) both}.toast-surface--swiping.sc-ds-toast{transition:none;user-select:none}.toast-content.sc-ds-toast{display:flex;flex-direction:column;min-width:0;padding-inline-end:var(--dimension-size-500);transition:opacity var(--effect-motion-short-3)}.toast-copy.sc-ds-toast{display:flex;flex-direction:column;min-width:0;min-height:var(--typography-lineheight-md);margin-block:calc(-1 * var(--dimension-space-025));gap:var(--dimension-space-050)}.toast-title.sc-ds-toast,.toast-description.sc-ds-toast{min-width:0}.toast-action.sc-ds-toast{align-self:start;margin-top:calc( var(--dimension-space-200) + var(--dimension-space-025) )}.toast-close.sc-ds-toast{position:absolute;top:var(--dimension-space-100);right:var(--dimension-space-100);transition:opacity var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-content.sc-ds-toast,.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-close.sc-ds-toast{opacity:0}.toast-assertive-announcer.sc-ds-toast{position:absolute;width:var(--dimension-size-100);height:var(--dimension-size-100);padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}@keyframes toast-enter{from{opacity:0;transform:translateY(var(--dimension-space-100))}to{opacity:1;transform:translateY(0)}}@keyframes toast-exit{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.toast-positioner.sc-ds-toast,.toast-surface.sc-ds-toast,.toast-content.sc-ds-toast,.toast-close.sc-ds-toast,.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{transition:none;animation:none}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{opacity:0}}`;const A=40;const k=10;const C="__global-stack__";const P='button,a,input,textarea,select,[role="button"],[data-ds-toast-swipe-ignore]';const S=new WeakMap;const F=new Set;let E=null;let z=0;const j=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsToastClose=i(this,"dsToastClose");this.dsToastRemove=i(this,"dsToastRemove");this.dsToastAction=i(this,"dsToastAction");this.manager=M;this.limit=3;this.timeout=f.animationDelayLong2;this.label="Notifications";this.closeLabel="Close notification";this.avoidMobileShellBar=false;this.swipeDirections=["down","right"];this.records=[];this.expanded=false;this.keyboardActive=false;this.swipe=null;this.layoutVersion=0;this.instanceId=++z;this.domIds=new Map;this.timers=new Map;this.closeWatchdogs=new Map;this.closeFrames=new Map;this.closeEvents=new Set;this.activationFrames=new Map;this.pauseReasons=new Set;this.hoveredIds=new Set;this.heights=new Map;this.measuredUpdateKeys=new Map;this.anchoredPositions=new Map;this.dismissedSwipeDirections=new Map;this.observedElements=new Set;this.pendingRemovals=[];this.unsubscribe=null;this.attachedManager=null;this.previousFocus=null;this.resizeObserver=null;this.mutationObserver=null;this.layoutFrame=null;this.activeSwipe=null;this.nextDomId=0;this.connected=false;this.pendingHoverLeave=false;this.handleWindowBlur=()=>this.pauseTimers("window");this.handleWindowFocus=()=>this.resumeTimers("window");this.handleVisibilityChange=()=>{if(document.hidden)this.pauseTimers("document");else this.resumeTimers("document")};this.handleFocusIn=()=>{const t=document.activeElement;if(!(t instanceof s)||!t.matches(":focus-visible"))return;E=this;this.keyboardActive=true;this.expanded=true;this.pauseTimers("focus")};this.handleFocusOut=t=>{const s=t.relatedTarget;if(s instanceof Node&&this.el.contains(s))return;if(!this.keyboardActive)return;this.keyboardActive=false;this.expanded=this.hoveredIds.size>0;this.resumeTimers("focus")};this.handleDocumentKeyDown=t=>{if(t.key!=="F6")return;const s=Array.from(F).filter((t=>t.activeRecords.length>0));const i=E&&E.activeRecords.length?E:s[s.length-1];if(i!==this)return;t.preventDefault();if(!this.el.contains(document.activeElement)){this.previousFocus=document.activeElement}this.keyboardActive=true;this.regionElement?.focus()};this.handleRegionKeyDown=t=>{if(t.key==="Escape"){const s=t.target;const i=s.closest(".toast-positioner");const e=i?.dataset["toastId"]??this.activeRecords[0]?.id;if(e){t.preventDefault();this.manager.close(e,"escape")}return}if(t.key==="Tab"&&t.shiftKey&&t.target===this.regionElement){t.preventDefault();this.restorePreviousFocus()}};this.handleWindowResize=()=>{this.heights.clear();this.measuredUpdateKeys.clear();this.layoutVersion+=1;this.scheduleLayout()};this.scheduleLayout=()=>{if(this.layoutFrame!==null)return;this.layoutFrame=requestAnimationFrame((()=>{this.layoutFrame=null;this.measureLayout()}))}}connectedCallback(){this.connect()}componentDidLoad(){this.connect()}connect(){if(this.connected)return;this.connected=true;this.resizeObserver??(this.resizeObserver=new ResizeObserver((()=>this.scheduleLayout())));this.mutationObserver??(this.mutationObserver=new MutationObserver((()=>this.scheduleLayout())));this.mutationObserver.observe(document.body,{childList:true,subtree:true});if(!this.unsubscribe)this.attachManager(this.manager);window.addEventListener("blur",this.handleWindowBlur);window.addEventListener("focus",this.handleWindowFocus);window.addEventListener("resize",this.handleWindowResize);window.addEventListener("scroll",this.scheduleLayout,true);document.addEventListener("keydown",this.handleDocumentKeyDown);document.addEventListener("visibilitychange",this.handleVisibilityChange);F.add(this);if(!E)E=this}componentDidRender(){this.syncObservedElements();this.flushPendingRemovals();this.scheduleLayout()}disconnectedCallback(){this.connected=false;this.flushPendingRemovals();this.detachManager();this.resetManagerState();this.resizeObserver?.disconnect();this.resizeObserver=null;this.mutationObserver?.disconnect();this.mutationObserver=null;this.observedElements.clear();if(this.layoutFrame!==null)cancelAnimationFrame(this.layoutFrame);this.layoutFrame=null;window.removeEventListener("blur",this.handleWindowBlur);window.removeEventListener("focus",this.handleWindowFocus);window.removeEventListener("resize",this.handleWindowResize);window.removeEventListener("scroll",this.scheduleLayout,true);document.removeEventListener("keydown",this.handleDocumentKeyDown);document.removeEventListener("visibilitychange",this.handleVisibilityChange);F.delete(this);if(E===this){const t=Array.from(F);E=t[t.length-1]??null}}onManagerChange(t){this.detachManager();this.resetManagerState();if(this.connected)this.attachManager(t)}onTimeoutChange(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}this.timers.clear();this.syncTimers()}attachManager(t){const s=S.get(t);if(s&&s!==this){console.warn("[ds-toast] A manager can control only one connected ds-toast instance.");return}S.set(t,this);this.attachedManager=t;this.unsubscribe=t.subscribe((t=>{this.records=t;this.syncLifecycle(t);this.scheduleLayout()}))}detachManager(){this.unsubscribe?.();this.unsubscribe=null;if(this.attachedManager&&S.get(this.attachedManager)===this){S.delete(this.attachedManager)}this.attachedManager=null}resetManagerState(){this.flushPendingRemovals();if(this.el.contains(document.activeElement))this.restorePreviousFocus();this.clearAllTimers();for(const t of this.activationFrames.values())cancelAnimationFrame(t);for(const t of this.closeFrames.values())cancelAnimationFrame(t);this.activationFrames.clear();this.closeFrames.clear();this.closeEvents.clear();this.pauseReasons.clear();this.hoveredIds.clear();this.pendingHoverLeave=false;this.heights.clear();this.measuredUpdateKeys.clear();this.anchoredPositions.clear();this.dismissedSwipeDirections.clear();this.domIds.clear();this.activeSwipe=null;this.swipe=null;this.expanded=false;this.keyboardActive=false;this.records=[];this.resizeObserver?.disconnect();this.observedElements.clear()}syncObservedElements(){const t=new Set(this.el.querySelectorAll(".toast-positioner"));for(const s of this.records){if(!s.positioner)continue;const i=this.resolveAnchor(s.positioner.anchor);if(i)t.add(i)}for(const s of this.observedElements){if(!t.has(s)){this.resizeObserver?.unobserve(s);this.observedElements.delete(s)}}for(const s of t){if(this.observedElements.has(s))continue;this.resizeObserver?.observe(s);this.observedElements.add(s)}}flushPendingRemovals(){for(const t of this.pendingRemovals.splice(0)){t.manager.notifyRemove(t.context);this.dsToastRemove.emit({id:t.context.id,toast:t.context.toast})}}syncLifecycle(t){const s=new Set(t.map((t=>t.id)));for(const t of this.hoveredIds){if(t!==C&&!s.has(t))this.hoveredIds.delete(t)}const i=t.some((t=>t.transitionStatus==="ending"));if(this.pendingHoverLeave&&!i&&!this.hoveredIds.size){this.pendingHoverLeave=false;this.expanded=false;this.resumeTimers("hover")}else if(!this.hoveredIds.size&&!this.pendingHoverLeave){this.resumeTimers("hover")}for(const[t,i]of this.timers){if(s.has(t))continue;if(i.handle)clearTimeout(i.handle);this.timers.delete(t)}for(const[t,i]of this.closeWatchdogs){if(s.has(t))continue;clearTimeout(i);this.closeWatchdogs.delete(t)}for(const[t,i]of this.activationFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.activationFrames.delete(t)}for(const[t,i]of this.closeFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.closeFrames.delete(t)}for(const t of this.domIds.keys()){if(s.has(t))continue;this.closeEvents.delete(t);this.domIds.delete(t);this.heights.delete(t);this.measuredUpdateKeys.delete(t);this.anchoredPositions.delete(t);this.dismissedSwipeDirections.delete(t)}for(const s of t){this.ensureDomId(s.id);if(s.transitionStatus==="starting"&&!this.activationFrames.has(s.id)){const t=this.attachedManager;const i=requestAnimationFrame((()=>{this.activationFrames.delete(s.id);t?.activate(s.id)}));this.activationFrames.set(s.id,i)}if(s.transitionStatus==="ending"){this.clearToastTimer(s.id);this.beginRemoval(s)}else{const t=this.closeWatchdogs.get(s.id);if(t)clearTimeout(t);this.closeWatchdogs.delete(s.id);const i=this.closeFrames.get(s.id);if(i)cancelAnimationFrame(i);this.closeFrames.delete(s.id);this.closeEvents.delete(s.id)}}this.syncTimers()}syncTimers(){const t=new Set;for(const s of this.records){if(s.transitionStatus!=="active")continue;t.add(s.id);const i=this.resolveToastTimeout(s);if(i<=0){this.clearToastTimer(s.id);continue}const e=this.timers.get(s.id);if(!e||e.timerKey!==s.timerKey){this.clearToastTimer(s.id);this.timers.set(s.id,{timerKey:s.timerKey,remaining:i,startedAt:0,handle:null})}if(!this.isPaused)this.startToastTimer(s.id)}for(const s of this.timers.keys()){if(!t.has(s))this.clearToastTimer(s)}}resolveToastTimeout(t){const s=t.timeout??this.timeout;if(typeof s==="number")return Math.max(0,s);return u(s,f.animationDelayLong2)}startToastTimer(t){const s=this.timers.get(t);if(!s||s.handle||s.remaining<=0)return;s.startedAt=Date.now();s.handle=setTimeout((()=>{s.handle=null;s.remaining=0;this.manager.close(t,"timeout")}),s.remaining)}pauseTimers(t){const s=this.isPaused;this.pauseReasons.add(t);if(s)return;const i=Date.now();for(const t of this.timers.values()){if(!t.handle)continue;clearTimeout(t.handle);t.handle=null;t.remaining=Math.max(0,t.remaining-(i-t.startedAt))}}resumeTimers(t){this.pauseReasons.delete(t);if(this.isPaused)return;for(const t of this.timers.keys())this.startToastTimer(t)}get isPaused(){return this.pauseReasons.size>0}clearToastTimer(t){const s=this.timers.get(t);if(s?.handle)clearTimeout(s.handle);this.timers.delete(t)}clearAllTimers(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}for(const t of this.closeWatchdogs.values())clearTimeout(t);this.timers.clear();this.closeWatchdogs.clear()}beginRemoval(t){if(!this.closeEvents.has(t.id)){this.closeEvents.add(t.id);this.dsToastClose.emit({id:t.id,reason:t.closeReason??"programmatic",toast:t});this.moveFocusAfterClose(t.id)}if(this.closeWatchdogs.has(t.id)||this.closeFrames.has(t.id))return;const s=m(f.motionShort3,f.animationDurationShort3);if(s<=0){queueMicrotask((()=>this.completeRemoval(t)));return}const i=requestAnimationFrame((()=>{this.closeFrames.delete(t.id);const i=this.records.find((s=>s.id===t.id));if(!i||i.transitionStatus!=="ending")return;this.closeWatchdogs.set(t.id,setTimeout((()=>this.completeRemoval(i)),s))}));this.closeFrames.set(t.id,i)}completeRemoval(t){const s=this.records.find((s=>s.id===t.id));if(!s||s.transitionStatus!=="ending")return;const i=this.closeWatchdogs.get(t.id);if(i)clearTimeout(i);this.closeWatchdogs.delete(t.id);const e=this.closeFrames.get(t.id);if(e)cancelAnimationFrame(e);this.closeFrames.delete(t.id);const n=this.attachedManager;const o=n?.remove(t.id);if(n&&o)this.pendingRemovals.push({manager:n,context:o})}handleAnimationComplete(t){if(t.transitionStatus==="ending")this.completeRemoval(t)}bindAnimationCancel(t,s){if(!t||t.dataset["cancelBound"]==="true")return;t.dataset["cancelBound"]="true";t.addEventListener("animationcancel",(()=>{const t=this.records.find((t=>t.id===s));if(t)this.handleAnimationComplete(t)}))}handlePointerEnter(t){E=this;this.pendingHoverLeave=false;this.hoveredIds.add(t);this.expanded=true;this.pauseTimers("hover")}handlePointerLeave(t){this.hoveredIds.delete(t);if(this.hoveredIds.size)return;if(this.records.some((t=>t.transitionStatus==="ending"))){this.pendingHoverLeave=true;return}this.expanded=false;this.resumeTimers("hover")}get regionElement(){return this.el.querySelector(".toast-region")}restorePreviousFocus(){this.previousFocus?.focus?.();this.previousFocus=null;this.keyboardActive=false}moveFocusAfterClose(t){const s=document.activeElement;const i=this.positionerElement(t);if(!s||!i?.contains(s))return;requestAnimationFrame((()=>{const s=this.activeRecords.find((s=>s.id!==t));const i=s?this.positionerElement(s.id)?.querySelector("ds-button-unfilled"):null;if(i?.setFocus)void i.setFocus();else if(s)this.regionElement?.focus();else this.restorePreviousFocus()}))}handleAction(t,s){const i={id:t.id,toast:t,originalEvent:s.detail};this.dsToastAction.emit(i);t.action?.onAction?.({id:t.id,data:t.data,manager:this.manager,originalEvent:s.detail})}handlePointerDown(t,s){if(s.button!==0)return;const i=s.target;if(i.closest(P))return;const e=s.currentTarget;e.setPointerCapture(s.pointerId);this.activeSwipe={id:t.id,pointerId:s.pointerId,pointerType:s.pointerType,startX:s.clientX,startY:s.clientY,maxDistance:0,cancelled:false,axis:null};this.swipe={id:t.id,x:0,y:0};if(s.pointerType==="touch")this.pauseTimers("swipe")}handlePointerMove(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId||s.cancelled)return;const i=t.clientX-s.startX;const e=t.clientY-s.startY;if(!s.axis&&Math.max(Math.abs(i),Math.abs(e))>1){s.axis=Math.abs(i)>=Math.abs(e)?"x":"y"}if(!s.axis)return;const n=s.axis==="x";const o=n?i>=0?"right":"left":e>=0?"down":"up";const a=this.swipeDirections.includes(o);const r=n?Math.abs(i):Math.abs(e);const h=a?r:Math.sqrt(r);const c=(n?i:e)<0?-h:h;const d=n?c:0;const l=n?0:c;if(s.maxDistance-h>=k){s.cancelled=true;this.cancelSwipe();return}s.maxDistance=Math.max(s.maxDistance,h);if(r>1)t.preventDefault();this.swipe={id:s.id,x:d,y:l,direction:a?o:undefined}}handlePointerUp(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId)return;const i=this.swipe;const e=i?Math.max(Math.abs(i.x),Math.abs(i.y)):0;const n=!s.cancelled&&!!i?.direction&&e>=A;const o=s.id;const a=s.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(a)this.resumeTimers("swipe");if(n&&i.direction){this.dismissedSwipeDirections.set(o,i.direction);this.manager.close(o,"swipe")}}handlePointerCancel(t){if(this.activeSwipe?.pointerId!==t.pointerId)return;this.cancelSwipe()}cancelSwipe(){const t=this.activeSwipe?.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(t)this.resumeTimers("swipe")}get touchAction(){const t=this.swipeDirections.includes("left")||this.swipeDirections.includes("right");const s=this.swipeDirections.includes("up")||this.swipeDirections.includes("down");if(t&&s)return"none";if(t)return"pan-y";if(s)return"pan-x";return"auto"}measureNaturalHeight(t,s){const i=t.querySelector(".toast-surface");if(!i)return 0;const e=t.style.width;const n=t.style.transition;const o=i.style.height;if(s){t.style.transition="none";t.style.width="100%"}i.style.height="auto";const a=i.getBoundingClientRect().height;i.style.height=o;if(s){t.style.width=e;t.getBoundingClientRect();t.style.transition=n}return a}measureLayout(){let t=false;for(const s of this.records){const i=this.positionerElement(s.id);if(!i)continue;let e=this.heights.get(s.id)??0;const n=e<=0||this.measuredUpdateKeys.get(s.id)!==s.updateKey;if(n){e=this.measureNaturalHeight(i,!s.positioner);if(e>0){if(this.heights.get(s.id)!==e)t=true;this.heights.set(s.id,e);this.measuredUpdateKeys.set(s.id,s.updateKey)}}if(!s.positioner)continue;const o=this.resolveAnchor(s.positioner.anchor);if(!o||e<=0){if(this.anchoredPositions.delete(s.id))t=true;continue}const r=i.getBoundingClientRect();const h=p(s.positioner.sideOffset,f.space050);const c=p(s.positioner.alignOffset,0);const d=a({anchorRect:o.getBoundingClientRect(),popupWidth:r.width,popupHeight:e,side:s.positioner.side??"top",align:s.positioner.align??"center",sideOffsetPx:h,alignOffsetPx:c,viewportPadPx:p(undefined,f.space200),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});const l=this.anchoredPositions.get(s.id);if(!l||l.x!==d.x||l.y!==d.y||l.side!==d.resolvedSide){this.anchoredPositions.set(s.id,{x:d.x,y:d.y,side:d.resolvedSide});t=true}}if(t)this.layoutVersion+=1}resolveAnchor(t){return typeof t==="string"?document.getElementById(t):t}positionerElement(t){return Array.from(this.el.querySelectorAll(".toast-positioner")).find((s=>s.dataset["toastId"]===t))??null}ensureDomId(t){const s=this.domIds.get(t);if(s)return s;const i=++this.nextDomId;this.domIds.set(t,i);return i}get activeRecords(){return this.records.filter((t=>t.transitionStatus!=="ending"))}globalLayout(){const t=this.records.filter((t=>!t.positioner));let s=0;let i=0;const e=p(undefined,f.space200);const n=new Map;t.forEach(((t,o)=>{if(t.transitionStatus==="ending"){n.set(t.id,{index:o,offset:s,limited:false});return}const a=i>=Math.max(1,this.limit);n.set(t.id,{index:i,offset:s,limited:a});s+=(this.heights.get(t.id)??0)+e;i+=1}));return n}renderToast(t,s){const i=this.ensureDomId(t.id);const n=`ds-toast-${this.instanceId}-${i}-title`;const o=`ds-toast-${this.instanceId}-${i}-description`;const a=this.swipe?.id===t.id?this.swipe:null;const r=a?.direction??this.dismissedSwipeDirections.get(t.id);const h=!!t.positioner;const c=this.anchoredPositions.get(t.id);const d=t.priority==="high"&&!this.keyboardActive;const l=this.keyboardActive&&!s.limited?0:-1;const f=this.heights.get(t.id);return e("div",{ref:s=>this.bindAnimationCancel(s,t.id),class:{"toast-positioner":true,"toast-positioner--anchored":h,"toast-positioner--ending":t.transitionStatus==="ending"},"data-toast-id":t.id,"data-behind":!h&&s.index>0?"":undefined,"data-limited":s.limited?"":undefined,"data-positioned":h?String(!!c):undefined,"data-side":c?.side,inert:s.limited?true:undefined,"aria-hidden":s.limited?"true":undefined,style:{"--toast-index":String(s.index),"--toast-offset-y":`${s.offset}px`,"--toast-height":f?`${f}px`:undefined,zIndex:String(this.records.length-s.index),left:c?`${c.x}px`:undefined,top:c?`${c.y}px`:undefined},onAnimationEnd:()=>this.handleAnimationComplete(t)},e("div",{class:{"toast-surface":true,"toast-surface--swiping":!!a},role:t.priority==="high"?"alertdialog":"dialog","aria-modal":"false","aria-labelledby":t.title?n:t.description?o:undefined,"aria-describedby":t.title&&t.description?o:undefined,"aria-hidden":d?"true":undefined,"data-type":t.type,"data-priority":t.priority,"data-transition-status":t.transitionStatus,"data-swiping":a?"":undefined,"data-swipe-direction":r,style:{"--toast-swipe-movement-x":`${a?.x??0}px`,"--toast-swipe-movement-y":`${a?.y??0}px`,touchAction:this.touchAction},onPointerDown:s=>this.handlePointerDown(t,s),onPointerMove:t=>this.handlePointerMove(t),onPointerUp:t=>this.handlePointerUp(t),onPointerCancel:t=>this.handlePointerCancel(t),onPointerEnter:h?()=>this.handlePointerEnter(t.id):undefined,onPointerLeave:h?()=>this.handlePointerLeave(t.id):undefined},e("div",{class:"toast-content"},e("div",{class:"toast-copy"},t.title&&e("ds-text",{class:"toast-title",as:"div",variant:"text-title-small",color:"primary",textId:n},t.title),t.description&&e("ds-text",{class:"toast-description",as:"div",variant:"text-body-medium",color:"secondary",textId:o},t.description)),t.action&&e("ds-button-unfilled",{class:"toast-action",variant:"label",size:"md",type:"button",label:t.action.label,"aria-label":t.action.ariaLabel,hasBorder:true,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:s=>this.handleAction(t,s)})),e("ds-button-unfilled",{class:"toast-close",variant:"icon",size:"md",type:"button",icon:"Cross","aria-label":this.closeLabel,hasBorder:false,activeFill:false,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:()=>this.manager.close(t.id,"close-button")})))}render(){const t=this.globalLayout();const s=this.records.filter((t=>!t.positioner));const i=this.records.filter((t=>!!t.positioner));const o=this.records.filter((s=>s.priority==="high"&&s.transitionStatus!=="ending"&&!t.get(s.id)?.limited));return e(n,{key:"d9209fec5c216fdfc0bf6c09fd5a80ed49940e2c"},e("section",{key:"116f5c8a2a540637e87b9cab4b76809b24c84f4c",class:"toast-region",role:"region","aria-label":this.label,"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text",tabIndex:-1,onFocusin:this.handleFocusIn,onFocusout:t=>this.handleFocusOut(t),onKeyDown:t=>this.handleRegionKeyDown(t)},e("div",{key:"d7d6f616961582c215dfa113d59f88178f560900",class:"toast-viewport","data-expanded":this.expanded?"":undefined,onPointerEnter:()=>this.handlePointerEnter(C),onPointerLeave:()=>this.handlePointerLeave(C)},s.map((s=>this.renderToast(s,t.get(s.id)??{index:0,offset:0,limited:false})))),e("div",{key:"4038593953997142e70921d01c413f474fe17c86",class:"toast-anchored-layer"},i.map((t=>this.renderToast(t,{index:0,offset:0,limited:false})))),e("div",{key:"862fd7b7da5b5221ad4da746e66da0e2f7bed900",class:"toast-assertive-announcer"},o.map((t=>e("div",{role:"alert","aria-atomic":"true"},[t.title,t.description].filter(Boolean).join(". ")))))))}get el(){return this}static get watchers(){return{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}}static get style(){return T()}},[2,"ds-toast",{manager:[16],limit:[2],timeout:[8],label:[1],closeLabel:[1,"close-label"],avoidMobileShellBar:[516,"avoid-mobile-shell-bar"],swipeDirections:[16],records:[32],expanded:[32],keyboardActive:[32],swipe:[32],layoutVersion:[32]},undefined,{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}]);function D(){if(typeof customElements==="undefined"){return}const t=["ds-toast","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-toast":if(!customElements.get(o(t))){customElements.define(o(t),j)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){h()}break;case"ds-icon":if(!customElements.get(o(t))){c()}break;case"ds-loader":if(!customElements.get(o(t))){d()}break;case"ds-text":if(!customElements.get(o(t))){l()}break}}))}D();const R=j;const $=D;export{R as DsToast,$ as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-toast.js.map
|