@spectrum-web-components/dialog 1.0.1 → 1.0.3
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/custom-elements.json +22 -0
- package/package.json +6 -6
- package/src/DialogBase.d.ts +1 -0
- package/src/DialogBase.dev.js +19 -3
- package/src/DialogBase.dev.js.map +2 -2
- package/src/DialogBase.js +3 -3
- package/src/DialogBase.js.map +3 -3
- package/stories/dialog-base.stories.js +53 -19
- package/stories/dialog-base.stories.js.map +2 -2
- package/stories/index.js +11 -0
- package/stories/index.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -529,6 +529,15 @@
|
|
|
529
529
|
}
|
|
530
530
|
]
|
|
531
531
|
},
|
|
532
|
+
{
|
|
533
|
+
"kind": "field",
|
|
534
|
+
"name": "hasTransitionDuration",
|
|
535
|
+
"type": {
|
|
536
|
+
"text": "boolean"
|
|
537
|
+
},
|
|
538
|
+
"privacy": "private",
|
|
539
|
+
"readonly": true
|
|
540
|
+
},
|
|
532
541
|
{
|
|
533
542
|
"kind": "method",
|
|
534
543
|
"name": "renderDialog",
|
|
@@ -1092,6 +1101,19 @@
|
|
|
1092
1101
|
"module": "src/DialogBase.js"
|
|
1093
1102
|
}
|
|
1094
1103
|
},
|
|
1104
|
+
{
|
|
1105
|
+
"kind": "field",
|
|
1106
|
+
"name": "hasTransitionDuration",
|
|
1107
|
+
"type": {
|
|
1108
|
+
"text": "boolean"
|
|
1109
|
+
},
|
|
1110
|
+
"privacy": "private",
|
|
1111
|
+
"readonly": true,
|
|
1112
|
+
"inheritedFrom": {
|
|
1113
|
+
"name": "DialogBase",
|
|
1114
|
+
"module": "src/DialogBase.js"
|
|
1115
|
+
}
|
|
1116
|
+
},
|
|
1095
1117
|
{
|
|
1096
1118
|
"kind": "method",
|
|
1097
1119
|
"name": "getUpdateComplete",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/dialog",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -74,12 +74,12 @@
|
|
|
74
74
|
"lit-html"
|
|
75
75
|
],
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@spectrum-web-components/alert-dialog": "^1.0.
|
|
77
|
+
"@spectrum-web-components/alert-dialog": "^1.0.3",
|
|
78
78
|
"@spectrum-web-components/base": "^1.0.1",
|
|
79
|
-
"@spectrum-web-components/button": "^1.0.
|
|
80
|
-
"@spectrum-web-components/button-group": "^1.0.
|
|
79
|
+
"@spectrum-web-components/button": "^1.0.3",
|
|
80
|
+
"@spectrum-web-components/button-group": "^1.0.3",
|
|
81
81
|
"@spectrum-web-components/divider": "^1.0.1",
|
|
82
|
-
"@spectrum-web-components/icons-workflow": "^1.0.
|
|
82
|
+
"@spectrum-web-components/icons-workflow": "^1.0.3",
|
|
83
83
|
"@spectrum-web-components/modal": "^1.0.1",
|
|
84
84
|
"@spectrum-web-components/shared": "^1.0.1",
|
|
85
85
|
"@spectrum-web-components/underlay": "^1.0.1"
|
|
@@ -93,5 +93,5 @@
|
|
|
93
93
|
"./sp-*.js",
|
|
94
94
|
"./**/*.dev.js"
|
|
95
95
|
],
|
|
96
|
-
"gitHead": "
|
|
96
|
+
"gitHead": "f102bde98b9dca7ef2ad602dc31ce986560891ad"
|
|
97
97
|
}
|
package/src/DialogBase.d.ts
CHANGED
|
@@ -33,6 +33,7 @@ export declare class DialogBase extends DialogBase_base {
|
|
|
33
33
|
private handleTransitionEvent;
|
|
34
34
|
protected handleUnderlayTransitionend(event: TransitionEvent): void;
|
|
35
35
|
protected handleModalTransitionend(event: TransitionEvent): void;
|
|
36
|
+
private get hasTransitionDuration();
|
|
36
37
|
protected update(changes: PropertyValues<this>): void;
|
|
37
38
|
protected renderDialog(): TemplateResult;
|
|
38
39
|
protected render(): TemplateResult;
|
package/src/DialogBase.dev.js
CHANGED
|
@@ -112,18 +112,34 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
|
|
|
112
112
|
}
|
|
113
113
|
this.handleTransitionEvent(event);
|
|
114
114
|
}
|
|
115
|
+
get hasTransitionDuration() {
|
|
116
|
+
const modal = this.shadowRoot.querySelector(".modal");
|
|
117
|
+
const modalTransitionDurations = window.getComputedStyle(modal).transitionDuration;
|
|
118
|
+
for (const duration of modalTransitionDurations.split(","))
|
|
119
|
+
if (parseFloat(duration) > 0) return true;
|
|
120
|
+
const underlay = this.shadowRoot.querySelector(
|
|
121
|
+
"sp-underlay"
|
|
122
|
+
);
|
|
123
|
+
if (underlay) {
|
|
124
|
+
const underlayTransitionDurations = window.getComputedStyle(underlay).transitionDuration;
|
|
125
|
+
for (const duration of underlayTransitionDurations.split(","))
|
|
126
|
+
if (parseFloat(duration) > 0) return true;
|
|
127
|
+
}
|
|
128
|
+
return false;
|
|
129
|
+
}
|
|
115
130
|
update(changes) {
|
|
116
131
|
if (changes.has("open") && changes.get("open") !== void 0) {
|
|
132
|
+
const hasTransitionDuration = this.hasTransitionDuration;
|
|
117
133
|
this.animating = true;
|
|
118
134
|
this.transitionPromise = new Promise((res) => {
|
|
119
135
|
this.resolveTransitionPromise = () => {
|
|
120
136
|
this.animating = false;
|
|
137
|
+
if (!this.open && hasTransitionDuration)
|
|
138
|
+
this.dispatchClosed();
|
|
121
139
|
res();
|
|
122
140
|
};
|
|
123
141
|
});
|
|
124
|
-
if (!this.open)
|
|
125
|
-
this.dispatchClosed();
|
|
126
|
-
}
|
|
142
|
+
if (!this.open && !hasTransitionDuration) this.dispatchClosed();
|
|
127
143
|
}
|
|
128
144
|
super.update(changes);
|
|
129
145
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["DialogBase.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/underlay/sp-underlay.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js';\nimport modalStyles from '@spectrum-web-components/modal/src/modal.css.js';\nimport { Dialog } from './Dialog.dev.js'\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\n\n/**\n * @element sp-dialog-base\n *\n * @slot - A Dialog element to display.\n * @fires close - Announces that the dialog has been closed.\n */\nexport class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [modalWrapperStyles, modalStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: String, reflect: true })\n public mode?: 'fullscreen' | 'fullscreenTakeover';\n\n /**\n * When set to true, fills screens smaller than 350px high and 400px wide with the full dialog.\n */\n @property({ type: Boolean })\n public responsive = false;\n\n private transitionPromise = Promise.resolve();\n\n private resolveTransitionPromise = (): void => {\n return;\n };\n\n @property({ type: Boolean })\n public underlay = false;\n\n protected get dialog(): Dialog {\n const dialog = (\n this.shadowRoot.querySelector('slot') as HTMLSlotElement\n ).assignedElements()[0] as Dialog;\n if (window.__swc.DEBUG) {\n if (!dialog) {\n window.__swc.warn(\n this,\n `<${this.localName}> expects to be provided dialog content via its default slot.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/dialog-base/#dialog'\n );\n }\n }\n return dialog || this;\n }\n\n public override async focus(): Promise<void> {\n if (this.shadowRoot) {\n const firstFocusable = firstFocusableIn(this.dialog);\n if (firstFocusable) {\n if ((firstFocusable as SpectrumElement).updateComplete) {\n await firstFocusable.updateComplete;\n }\n firstFocusable.focus();\n } else {\n this.dialog.focus();\n }\n /* c8 ignore next 3 */\n } else {\n super.focus();\n }\n }\n\n private animating = false;\n\n public overlayWillCloseCallback(): boolean {\n if (!this.open) return this.animating;\n this.close();\n return true;\n }\n\n private dismiss(): void {\n if (!this.dismissable) {\n return;\n }\n this.close();\n }\n\n protected handleClose(event: Event): void {\n event.stopPropagation();\n this.close();\n }\n\n public close(): void {\n this.open = false;\n }\n\n private dispatchClosed(): void {\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n })\n );\n }\n\n private handleTransitionEvent(event: TransitionEvent): void {\n this.dispatchEvent(\n new TransitionEvent(event.type, {\n bubbles: true,\n composed: true,\n propertyName: event.propertyName,\n })\n );\n }\n\n protected handleUnderlayTransitionend(event: TransitionEvent): void {\n if (!this.open && event.propertyName === 'visibility') {\n this.resolveTransitionPromise();\n }\n this.handleTransitionEvent(event);\n }\n\n protected handleModalTransitionend(event: TransitionEvent): void {\n if (this.open || !this.underlay) {\n this.resolveTransitionPromise();\n }\n this.handleTransitionEvent(event);\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (changes.has('open') && changes.get('open') !== undefined) {\n this.animating = true;\n this.transitionPromise = new Promise((res) => {\n this.resolveTransitionPromise = () => {\n this.animating = false;\n res();\n };\n });\n if (!this.open)
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO;AACP,OAAO;AAGP,OAAO;AACP,OAAO,wBAAwB;AAC/B,OAAO,iBAAiB;AAExB,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAQ1B,aAAM,mBAAmB,0BAA0B,eAAe,EAAE;AAAA,EAApE;AAAA;AAMH,SAAO,cAAc;AAGrB,SAAO,OAAO;AASd,SAAO,aAAa;AAEpB,SAAQ,oBAAoB,QAAQ,QAAQ;AAE5C,SAAQ,2BAA2B,MAAY;AAC3C;AAAA,IACJ;AAGA,SAAO,WAAW;AAmClB,SAAQ,YAAY;AAAA;AAAA,EA7DpB,WAA2B,SAAyB;AAChD,WAAO,CAAC,oBAAoB,WAAW;AAAA,EAC3C;AAAA,EA0BA,IAAc,SAAiB;AAC3B,UAAM,SACF,KAAK,WAAW,cAAc,MAAM,EACtC,iBAAiB,EAAE,CAAC;AACtB,QAAI,MAAoB;AACpB,UAAI,CAAC,QAAQ;AACT,eAAO,MAAM;AAAA,UACT;AAAA,UACA,IAAI,KAAK,SAAS;AAAA,UAClB;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AACA,WAAO,UAAU;AAAA,EACrB;AAAA,EAEA,MAAsB,QAAuB;AACzC,QAAI,KAAK,YAAY;AACjB,YAAM,iBAAiB,iBAAiB,KAAK,MAAM;AACnD,UAAI,gBAAgB;AAChB,YAAK,eAAmC,gBAAgB;AACpD,gBAAM,eAAe;AAAA,QACzB;AACA,uBAAe,MAAM;AAAA,MACzB,OAAO;AACH,aAAK,OAAO,MAAM;AAAA,MACtB;AAAA,IAEJ,OAAO;AACH,YAAM,MAAM;AAAA,IAChB;AAAA,EACJ;AAAA,EAIO,2BAAoC;AACvC,QAAI,CAAC,KAAK,KAAM,QAAO,KAAK;AAC5B,SAAK,MAAM;AACX,WAAO;AAAA,EACX;AAAA,EAEQ,UAAgB;AACpB,QAAI,CAAC,KAAK,aAAa;AACnB;AAAA,IACJ;AACA,SAAK,MAAM;AAAA,EACf;AAAA,EAEU,YAAY,OAAoB;AACtC,UAAM,gBAAgB;AACtB,SAAK,MAAM;AAAA,EACf;AAAA,EAEO,QAAc;AACjB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEQ,iBAAuB;AAC3B,SAAK;AAAA,MACD,IAAI,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEQ,sBAAsB,OAA8B;AACxD,SAAK;AAAA,MACD,IAAI,gBAAgB,MAAM,MAAM;AAAA,QAC5B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAc,MAAM;AAAA,MACxB,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEU,4BAA4B,OAA8B;AAChE,QAAI,CAAC,KAAK,QAAQ,MAAM,iBAAiB,cAAc;AACnD,WAAK,yBAAyB;AAAA,IAClC;AACA,SAAK,sBAAsB,KAAK;AAAA,EACpC;AAAA,EAEU,yBAAyB,OAA8B;AAC7D,QAAI,KAAK,QAAQ,CAAC,KAAK,UAAU;AAC7B,WAAK,yBAAyB;AAAA,IAClC;AACA,SAAK,sBAAsB,KAAK;AAAA,EACpC;AAAA,EAEmB,OAAO,SAAqC;AAC3D,QAAI,QAAQ,IAAI,MAAM,KAAK,QAAQ,IAAI,MAAM,MAAM,QAAW;AAC1D,WAAK,YAAY;AACjB,WAAK,oBAAoB,IAAI,QAAQ,CAAC,QAAQ;AAC1C,aAAK,2BAA2B,MAAM;AAClC,eAAK,YAAY;AACjB,cAAI;AAAA,QACR;AAAA,MACJ,CAAC;AACD,UAAI,CAAC,KAAK,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/underlay/sp-underlay.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js';\nimport modalStyles from '@spectrum-web-components/modal/src/modal.css.js';\nimport { Dialog } from './Dialog.dev.js'\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\n\n/**\n * @element sp-dialog-base\n *\n * @slot - A Dialog element to display.\n * @fires close - Announces that the dialog has been closed.\n */\nexport class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [modalWrapperStyles, modalStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: String, reflect: true })\n public mode?: 'fullscreen' | 'fullscreenTakeover';\n\n /**\n * When set to true, fills screens smaller than 350px high and 400px wide with the full dialog.\n */\n @property({ type: Boolean })\n public responsive = false;\n\n private transitionPromise = Promise.resolve();\n\n private resolveTransitionPromise = (): void => {\n return;\n };\n\n @property({ type: Boolean })\n public underlay = false;\n\n protected get dialog(): Dialog {\n const dialog = (\n this.shadowRoot.querySelector('slot') as HTMLSlotElement\n ).assignedElements()[0] as Dialog;\n if (window.__swc.DEBUG) {\n if (!dialog) {\n window.__swc.warn(\n this,\n `<${this.localName}> expects to be provided dialog content via its default slot.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/dialog-base/#dialog'\n );\n }\n }\n return dialog || this;\n }\n\n public override async focus(): Promise<void> {\n if (this.shadowRoot) {\n const firstFocusable = firstFocusableIn(this.dialog);\n if (firstFocusable) {\n if ((firstFocusable as SpectrumElement).updateComplete) {\n await firstFocusable.updateComplete;\n }\n firstFocusable.focus();\n } else {\n this.dialog.focus();\n }\n /* c8 ignore next 3 */\n } else {\n super.focus();\n }\n }\n\n private animating = false;\n\n public overlayWillCloseCallback(): boolean {\n if (!this.open) return this.animating;\n this.close();\n return true;\n }\n\n private dismiss(): void {\n if (!this.dismissable) {\n return;\n }\n this.close();\n }\n\n protected handleClose(event: Event): void {\n event.stopPropagation();\n this.close();\n }\n\n public close(): void {\n this.open = false;\n }\n\n private dispatchClosed(): void {\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n })\n );\n }\n\n private handleTransitionEvent(event: TransitionEvent): void {\n this.dispatchEvent(\n new TransitionEvent(event.type, {\n bubbles: true,\n composed: true,\n propertyName: event.propertyName,\n })\n );\n }\n\n protected handleUnderlayTransitionend(event: TransitionEvent): void {\n if (!this.open && event.propertyName === 'visibility') {\n this.resolveTransitionPromise();\n }\n this.handleTransitionEvent(event);\n }\n\n protected handleModalTransitionend(event: TransitionEvent): void {\n if (this.open || !this.underlay) {\n this.resolveTransitionPromise();\n }\n this.handleTransitionEvent(event);\n }\n\n private get hasTransitionDuration(): boolean {\n const modal = this.shadowRoot.querySelector('.modal') as HTMLElement;\n\n const modalTransitionDurations =\n window.getComputedStyle(modal).transitionDuration;\n for (const duration of modalTransitionDurations.split(','))\n if (parseFloat(duration) > 0) return true;\n\n const underlay = this.shadowRoot.querySelector(\n 'sp-underlay'\n ) as HTMLElement;\n\n if (underlay) {\n const underlayTransitionDurations =\n window.getComputedStyle(underlay).transitionDuration;\n for (const duration of underlayTransitionDurations.split(','))\n if (parseFloat(duration) > 0) return true;\n }\n\n return false;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (changes.has('open') && changes.get('open') !== undefined) {\n const hasTransitionDuration = this.hasTransitionDuration;\n this.animating = true;\n this.transitionPromise = new Promise((res) => {\n this.resolveTransitionPromise = () => {\n this.animating = false;\n if (!this.open && hasTransitionDuration)\n this.dispatchClosed();\n res();\n };\n });\n if (!this.open && !hasTransitionDuration) this.dispatchClosed();\n }\n super.update(changes);\n }\n\n protected renderDialog(): TemplateResult {\n return html`\n <slot></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n ${this.underlay\n ? html`\n <sp-underlay\n ?open=${this.open}\n @close=${this.dismiss}\n @transitionrun=${this.handleTransitionEvent}\n @transitionend=${this.handleUnderlayTransitionend}\n @transitioncancel=${this.handleTransitionEvent}\n ></sp-underlay>\n `\n : nothing}\n <div\n class=\"modal ${this.mode}\"\n @transitionrun=${this.handleTransitionEvent}\n @transitionend=${this.handleModalTransitionend}\n @transitioncancel=${this.handleTransitionEvent}\n @close=${this.handleClose}\n >\n ${this.renderDialog()}\n </div>\n `;\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n if (changes.has('open')) {\n if (this.open) {\n if (\n 'updateComplete' in this.dialog &&\n 'shouldManageTabOrderForScrolling' in this.dialog\n ) {\n this.dialog.updateComplete.then(() => {\n this.dialog.shouldManageTabOrderForScrolling();\n });\n }\n }\n }\n }\n\n /**\n * Bind the open/close transition into the update complete lifecycle so\n * that the overlay system can wait for it to be \"visibly ready\" before\n * attempting to throw focus into the content contained herein. Not\n * waiting for this can cause small amounts of page scroll to happen\n * while opening the Tray when focusable content is included: e.g. Menu\n * elements whose selected Menu Item is not the first Menu Item.\n */\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.transitionPromise;\n return complete;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/DialogBase.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var p=Object.defineProperty;var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(l,n,e,i)=>{for(var t=i>1?void 0:i?u(n,e):n,o=l.length-1,r;o>=0;o--)(r=l[o])&&(t=(i?r(n,e,t):r(t))||t);return i&&t&&p(n,e,t),t};import{html as d,nothing as h,SpectrumElement as c}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/underlay/sp-underlay.js";import"@spectrum-web-components/button/sp-button.js";import"@spectrum-web-components/dialog/sp-dialog.js";import m from"@spectrum-web-components/modal/src/modal-wrapper.css.js";import f from"@spectrum-web-components/modal/src/modal.css.js";import{FocusVisiblePolyfillMixin as v}from"@spectrum-web-components/shared";import{firstFocusableIn as y}from"@spectrum-web-components/shared/src/first-focusable-in.js";export class DialogBase extends v(c){constructor(){super(...arguments);this.dismissable=!1;this.open=!1;this.responsive=!1;this.transitionPromise=Promise.resolve();this.resolveTransitionPromise=()=>{};this.underlay=!1;this.animating=!1}static get styles(){return[m,f]}get dialog(){return this.shadowRoot.querySelector("slot").assignedElements()[0]||this}async focus(){if(this.shadowRoot){const e=y(this.dialog);e?(e.updateComplete&&await e.updateComplete,e.focus()):this.dialog.focus()}else super.focus()}overlayWillCloseCallback(){return this.open?(this.close(),!0):this.animating}dismiss(){this.dismissable&&this.close()}handleClose(e){e.stopPropagation(),this.close()}close(){this.open=!1}dispatchClosed(){this.dispatchEvent(new Event("close",{bubbles:!0}))}handleTransitionEvent(e){this.dispatchEvent(new TransitionEvent(e.type,{bubbles:!0,composed:!0,propertyName:e.propertyName}))}handleUnderlayTransitionend(e){!this.open&&e.propertyName==="visibility"&&this.resolveTransitionPromise(),this.handleTransitionEvent(e)}handleModalTransitionend(e){(this.open||!this.underlay)&&this.resolveTransitionPromise(),this.handleTransitionEvent(e)}get hasTransitionDuration(){const e=this.shadowRoot.querySelector(".modal"),i=window.getComputedStyle(e).transitionDuration;for(const o of i.split(","))if(parseFloat(o)>0)return!0;const t=this.shadowRoot.querySelector("sp-underlay");if(t){const o=window.getComputedStyle(t).transitionDuration;for(const r of o.split(","))if(parseFloat(r)>0)return!0}return!1}update(e){if(e.has("open")&&e.get("open")!==void 0){const i=this.hasTransitionDuration;this.animating=!0,this.transitionPromise=new Promise(t=>{this.resolveTransitionPromise=()=>{this.animating=!1,!this.open&&i&&this.dispatchClosed(),t()}}),!this.open&&!i&&this.dispatchClosed()}super.update(e)}renderDialog(){return d`
|
|
2
2
|
<slot></slot>
|
|
3
3
|
`}render(){return d`
|
|
4
4
|
${this.underlay?d`
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
@transitionend=${this.handleUnderlayTransitionend}
|
|
10
10
|
@transitioncancel=${this.handleTransitionEvent}
|
|
11
11
|
></sp-underlay>
|
|
12
|
-
`:
|
|
12
|
+
`:h}
|
|
13
13
|
<div
|
|
14
14
|
class="modal ${this.mode}"
|
|
15
15
|
@transitionrun=${this.handleTransitionEvent}
|
|
@@ -19,5 +19,5 @@
|
|
|
19
19
|
>
|
|
20
20
|
${this.renderDialog()}
|
|
21
21
|
</div>
|
|
22
|
-
`}updated(e){e.has("open")&&this.open&&"updateComplete"in this.dialog&&"shouldManageTabOrderForScrolling"in this.dialog&&this.dialog.updateComplete.then(()=>{this.dialog.shouldManageTabOrderForScrolling()})}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.transitionPromise,e}}
|
|
22
|
+
`}updated(e){e.has("open")&&this.open&&"updateComplete"in this.dialog&&"shouldManageTabOrderForScrolling"in this.dialog&&this.dialog.updateComplete.then(()=>{this.dialog.shouldManageTabOrderForScrolling()})}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.transitionPromise,e}}s([a({type:Boolean,reflect:!0})],DialogBase.prototype,"dismissable",2),s([a({type:Boolean,reflect:!0})],DialogBase.prototype,"open",2),s([a({type:String,reflect:!0})],DialogBase.prototype,"mode",2),s([a({type:Boolean})],DialogBase.prototype,"responsive",2),s([a({type:Boolean})],DialogBase.prototype,"underlay",2);
|
|
23
23
|
//# sourceMappingURL=DialogBase.js.map
|
package/src/DialogBase.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["DialogBase.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/underlay/sp-underlay.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js';\nimport modalStyles from '@spectrum-web-components/modal/src/modal.css.js';\nimport { Dialog } from './Dialog.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\n\n/**\n * @element sp-dialog-base\n *\n * @slot - A Dialog element to display.\n * @fires close - Announces that the dialog has been closed.\n */\nexport class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [modalWrapperStyles, modalStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: String, reflect: true })\n public mode?: 'fullscreen' | 'fullscreenTakeover';\n\n /**\n * When set to true, fills screens smaller than 350px high and 400px wide with the full dialog.\n */\n @property({ type: Boolean })\n public responsive = false;\n\n private transitionPromise = Promise.resolve();\n\n private resolveTransitionPromise = (): void => {\n return;\n };\n\n @property({ type: Boolean })\n public underlay = false;\n\n protected get dialog(): Dialog {\n const dialog = (\n this.shadowRoot.querySelector('slot') as HTMLSlotElement\n ).assignedElements()[0] as Dialog;\n if (window.__swc.DEBUG) {\n if (!dialog) {\n window.__swc.warn(\n this,\n `<${this.localName}> expects to be provided dialog content via its default slot.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/dialog-base/#dialog'\n );\n }\n }\n return dialog || this;\n }\n\n public override async focus(): Promise<void> {\n if (this.shadowRoot) {\n const firstFocusable = firstFocusableIn(this.dialog);\n if (firstFocusable) {\n if ((firstFocusable as SpectrumElement).updateComplete) {\n await firstFocusable.updateComplete;\n }\n firstFocusable.focus();\n } else {\n this.dialog.focus();\n }\n /* c8 ignore next 3 */\n } else {\n super.focus();\n }\n }\n\n private animating = false;\n\n public overlayWillCloseCallback(): boolean {\n if (!this.open) return this.animating;\n this.close();\n return true;\n }\n\n private dismiss(): void {\n if (!this.dismissable) {\n return;\n }\n this.close();\n }\n\n protected handleClose(event: Event): void {\n event.stopPropagation();\n this.close();\n }\n\n public close(): void {\n this.open = false;\n }\n\n private dispatchClosed(): void {\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n })\n );\n }\n\n private handleTransitionEvent(event: TransitionEvent): void {\n this.dispatchEvent(\n new TransitionEvent(event.type, {\n bubbles: true,\n composed: true,\n propertyName: event.propertyName,\n })\n );\n }\n\n protected handleUnderlayTransitionend(event: TransitionEvent): void {\n if (!this.open && event.propertyName === 'visibility') {\n this.resolveTransitionPromise();\n }\n this.handleTransitionEvent(event);\n }\n\n protected handleModalTransitionend(event: TransitionEvent): void {\n if (this.open || !this.underlay) {\n this.resolveTransitionPromise();\n }\n this.handleTransitionEvent(event);\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (changes.has('open') && changes.get('open') !== undefined) {\n this.animating = true;\n this.transitionPromise = new Promise((res) => {\n this.resolveTransitionPromise = () => {\n this.animating = false;\n res();\n };\n });\n if (!this.open)
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,MAAO,mDACP,MAAO,+CAGP,MAAO,+CACP,OAAOC,MAAwB,0DAC/B,OAAOC,MAAiB,kDAExB,OAAS,6BAAAC,MAAiC,kCAC1C,OAAS,oBAAAC,MAAwB,4DAQ1B,aAAM,mBAAmBD,EAA0BJ,CAAe,CAAE,CAApE,kCAMH,KAAO,YAAc,GAGrB,KAAO,KAAO,GASd,KAAO,WAAa,GAEpB,KAAQ,kBAAoB,QAAQ,QAAQ,EAE5C,KAAQ,yBAA2B,IAAY,CAE/C,EAGA,KAAO,SAAW,GAmClB,KAAQ,UAAY,GA7DpB,WAA2B,QAAyB,CAChD,MAAO,CAACE,EAAoBC,CAAW,CAC3C,CA0BA,IAAc,QAAiB,CAa3B,OAXI,KAAK,WAAW,cAAc,MAAM,EACtC,iBAAiB,EAAE,CAAC,GAUL,IACrB,CAEA,MAAsB,OAAuB,CACzC,GAAI,KAAK,WAAY,CACjB,MAAMG,EAAiBD,EAAiB,KAAK,MAAM,EAC/CC,GACKA,EAAmC,gBACpC,MAAMA,EAAe,eAEzBA,EAAe,MAAM,GAErB,KAAK,OAAO,MAAM,CAG1B,MACI,MAAM,MAAM,CAEpB,CAIO,0BAAoC,CACvC,OAAK,KAAK,MACV,KAAK,MAAM,EACJ,IAFgB,KAAK,SAGhC,CAEQ,SAAgB,CACf,KAAK,aAGV,KAAK,MAAM,CACf,CAEU,YAAYC,EAAoB,CACtCA,EAAM,gBAAgB,EACtB,KAAK,MAAM,CACf,CAEO,OAAc,CACjB,KAAK,KAAO,EAChB,CAEQ,gBAAuB,CAC3B,KAAK,cACD,IAAI,MAAM,QAAS,CACf,QAAS,EACb,CAAC,CACL,CACJ,CAEQ,sBAAsBA,EAA8B,CACxD,KAAK,cACD,IAAI,gBAAgBA,EAAM,KAAM,CAC5B,QAAS,GACT,SAAU,GACV,aAAcA,EAAM,YACxB,CAAC,CACL,CACJ,CAEU,4BAA4BA,EAA8B,CAC5D,CAAC,KAAK,MAAQA,EAAM,eAAiB,cACrC,KAAK,yBAAyB,EAElC,KAAK,sBAAsBA,CAAK,CACpC,CAEU,yBAAyBA,EAA8B,EACzD,KAAK,MAAQ,CAAC,KAAK,WACnB,KAAK,yBAAyB,EAElC,KAAK,sBAAsBA,CAAK,CACpC,CAEmB,
|
|
6
|
-
"names": ["html", "nothing", "SpectrumElement", "property", "modalWrapperStyles", "modalStyles", "FocusVisiblePolyfillMixin", "firstFocusableIn", "firstFocusable", "event", "changes", "res", "complete", "__decorateClass"]
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/underlay/sp-underlay.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js';\nimport modalStyles from '@spectrum-web-components/modal/src/modal.css.js';\nimport { Dialog } from './Dialog.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\n\n/**\n * @element sp-dialog-base\n *\n * @slot - A Dialog element to display.\n * @fires close - Announces that the dialog has been closed.\n */\nexport class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [modalWrapperStyles, modalStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: String, reflect: true })\n public mode?: 'fullscreen' | 'fullscreenTakeover';\n\n /**\n * When set to true, fills screens smaller than 350px high and 400px wide with the full dialog.\n */\n @property({ type: Boolean })\n public responsive = false;\n\n private transitionPromise = Promise.resolve();\n\n private resolveTransitionPromise = (): void => {\n return;\n };\n\n @property({ type: Boolean })\n public underlay = false;\n\n protected get dialog(): Dialog {\n const dialog = (\n this.shadowRoot.querySelector('slot') as HTMLSlotElement\n ).assignedElements()[0] as Dialog;\n if (window.__swc.DEBUG) {\n if (!dialog) {\n window.__swc.warn(\n this,\n `<${this.localName}> expects to be provided dialog content via its default slot.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/dialog-base/#dialog'\n );\n }\n }\n return dialog || this;\n }\n\n public override async focus(): Promise<void> {\n if (this.shadowRoot) {\n const firstFocusable = firstFocusableIn(this.dialog);\n if (firstFocusable) {\n if ((firstFocusable as SpectrumElement).updateComplete) {\n await firstFocusable.updateComplete;\n }\n firstFocusable.focus();\n } else {\n this.dialog.focus();\n }\n /* c8 ignore next 3 */\n } else {\n super.focus();\n }\n }\n\n private animating = false;\n\n public overlayWillCloseCallback(): boolean {\n if (!this.open) return this.animating;\n this.close();\n return true;\n }\n\n private dismiss(): void {\n if (!this.dismissable) {\n return;\n }\n this.close();\n }\n\n protected handleClose(event: Event): void {\n event.stopPropagation();\n this.close();\n }\n\n public close(): void {\n this.open = false;\n }\n\n private dispatchClosed(): void {\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n })\n );\n }\n\n private handleTransitionEvent(event: TransitionEvent): void {\n this.dispatchEvent(\n new TransitionEvent(event.type, {\n bubbles: true,\n composed: true,\n propertyName: event.propertyName,\n })\n );\n }\n\n protected handleUnderlayTransitionend(event: TransitionEvent): void {\n if (!this.open && event.propertyName === 'visibility') {\n this.resolveTransitionPromise();\n }\n this.handleTransitionEvent(event);\n }\n\n protected handleModalTransitionend(event: TransitionEvent): void {\n if (this.open || !this.underlay) {\n this.resolveTransitionPromise();\n }\n this.handleTransitionEvent(event);\n }\n\n private get hasTransitionDuration(): boolean {\n const modal = this.shadowRoot.querySelector('.modal') as HTMLElement;\n\n const modalTransitionDurations =\n window.getComputedStyle(modal).transitionDuration;\n for (const duration of modalTransitionDurations.split(','))\n if (parseFloat(duration) > 0) return true;\n\n const underlay = this.shadowRoot.querySelector(\n 'sp-underlay'\n ) as HTMLElement;\n\n if (underlay) {\n const underlayTransitionDurations =\n window.getComputedStyle(underlay).transitionDuration;\n for (const duration of underlayTransitionDurations.split(','))\n if (parseFloat(duration) > 0) return true;\n }\n\n return false;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (changes.has('open') && changes.get('open') !== undefined) {\n const hasTransitionDuration = this.hasTransitionDuration;\n this.animating = true;\n this.transitionPromise = new Promise((res) => {\n this.resolveTransitionPromise = () => {\n this.animating = false;\n if (!this.open && hasTransitionDuration)\n this.dispatchClosed();\n res();\n };\n });\n if (!this.open && !hasTransitionDuration) this.dispatchClosed();\n }\n super.update(changes);\n }\n\n protected renderDialog(): TemplateResult {\n return html`\n <slot></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n ${this.underlay\n ? html`\n <sp-underlay\n ?open=${this.open}\n @close=${this.dismiss}\n @transitionrun=${this.handleTransitionEvent}\n @transitionend=${this.handleUnderlayTransitionend}\n @transitioncancel=${this.handleTransitionEvent}\n ></sp-underlay>\n `\n : nothing}\n <div\n class=\"modal ${this.mode}\"\n @transitionrun=${this.handleTransitionEvent}\n @transitionend=${this.handleModalTransitionend}\n @transitioncancel=${this.handleTransitionEvent}\n @close=${this.handleClose}\n >\n ${this.renderDialog()}\n </div>\n `;\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n if (changes.has('open')) {\n if (this.open) {\n if (\n 'updateComplete' in this.dialog &&\n 'shouldManageTabOrderForScrolling' in this.dialog\n ) {\n this.dialog.updateComplete.then(() => {\n this.dialog.shouldManageTabOrderForScrolling();\n });\n }\n }\n }\n }\n\n /**\n * Bind the open/close transition into the update complete lifecycle so\n * that the overlay system can wait for it to be \"visibly ready\" before\n * attempting to throw focus into the content contained herein. Not\n * waiting for this can cause small amounts of page scroll to happen\n * while opening the Tray when focusable content is included: e.g. Menu\n * elements whose selected Menu Item is not the first Menu Item.\n */\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.transitionPromise;\n return complete;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "nothing", "SpectrumElement", "property", "modalWrapperStyles", "modalStyles", "FocusVisiblePolyfillMixin", "firstFocusableIn", "firstFocusable", "event", "modal", "modalTransitionDurations", "duration", "underlay", "underlayTransitionDurations", "changes", "hasTransitionDuration", "res", "complete", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,30 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { html } from "@spectrum-web-components/base";
|
|
3
|
-
import "@spectrum-web-components/dialog/sp-dialog-base.js";
|
|
4
|
-
import "@spectrum-web-components/dialog/sp-dialog.js";
|
|
5
3
|
import "@spectrum-web-components/button/sp-button.js";
|
|
6
|
-
import "@spectrum-web-components/overlay/sp-overlay.js";
|
|
7
4
|
import "@spectrum-web-components/checkbox/sp-checkbox.js";
|
|
5
|
+
import "@spectrum-web-components/dialog/sp-dialog-base.js";
|
|
6
|
+
import "@spectrum-web-components/dialog/sp-dialog.js";
|
|
7
|
+
import { trigger } from "@spectrum-web-components/overlay";
|
|
8
8
|
import { alertDestructive } from "./dialog.stories.js";
|
|
9
9
|
import { portrait } from "./images.js";
|
|
10
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
disabledButtonWithOverlayDecorator,
|
|
12
|
+
withOverlayDecorator
|
|
13
|
+
} from "./index.js";
|
|
11
14
|
export default {
|
|
12
15
|
title: "Dialog Base",
|
|
13
|
-
component: "sp-dialog-base"
|
|
14
|
-
decorators: [
|
|
15
|
-
(story) => {
|
|
16
|
-
return html`
|
|
17
|
-
<sp-button variant="primary" id="trigger">
|
|
18
|
-
Toggle Dialog
|
|
19
|
-
</sp-button>
|
|
20
|
-
<sp-overlay type="modal" trigger="trigger@click" open>
|
|
21
|
-
${story()}
|
|
22
|
-
</sp-overlay>
|
|
23
|
-
`;
|
|
24
|
-
}
|
|
25
|
-
]
|
|
16
|
+
component: "sp-dialog-base"
|
|
26
17
|
};
|
|
27
|
-
export const
|
|
18
|
+
export const slotted = () => html`
|
|
28
19
|
<sp-dialog-base
|
|
29
20
|
underlay
|
|
30
21
|
@click=${(event) => {
|
|
@@ -38,6 +29,7 @@ export const Slotted = () => html`
|
|
|
38
29
|
${alertDestructive()}
|
|
39
30
|
</sp-dialog-base>
|
|
40
31
|
`;
|
|
32
|
+
slotted.decorators = [withOverlayDecorator];
|
|
41
33
|
export const disabledButton = () => {
|
|
42
34
|
return html`
|
|
43
35
|
<sp-dialog-base
|
|
@@ -90,7 +82,7 @@ export const disabledButton = () => {
|
|
|
90
82
|
</sp-dialog-base>
|
|
91
83
|
`;
|
|
92
84
|
};
|
|
93
|
-
disabledButton.decorators = [
|
|
85
|
+
disabledButton.decorators = [disabledButtonWithOverlayDecorator];
|
|
94
86
|
export const notAgain = () => html`
|
|
95
87
|
<sp-dialog-base
|
|
96
88
|
underlay
|
|
@@ -116,6 +108,7 @@ export const notAgain = () => html`
|
|
|
116
108
|
</sp-dialog>
|
|
117
109
|
</sp-dialog-base>
|
|
118
110
|
`;
|
|
111
|
+
notAgain.decorators = [withOverlayDecorator];
|
|
119
112
|
export const moreCustom = () => html`
|
|
120
113
|
<sp-dialog-base
|
|
121
114
|
underlay
|
|
@@ -161,6 +154,7 @@ export const moreCustom = () => html`
|
|
|
161
154
|
</div>
|
|
162
155
|
</sp-dialog-base>
|
|
163
156
|
`;
|
|
157
|
+
moreCustom.decorators = [withOverlayDecorator];
|
|
164
158
|
export const fullyCustom = () => html`
|
|
165
159
|
<sp-dialog-base
|
|
166
160
|
underlay
|
|
@@ -193,4 +187,44 @@ export const fullyCustom = () => html`
|
|
|
193
187
|
</div>
|
|
194
188
|
</sp-dialog-base>
|
|
195
189
|
`;
|
|
190
|
+
fullyCustom.decorators = [withOverlayDecorator];
|
|
191
|
+
export const lazyLoaded = () => {
|
|
192
|
+
const template = () => html`
|
|
193
|
+
<sp-dialog-base
|
|
194
|
+
underlay
|
|
195
|
+
@click=${(event) => {
|
|
196
|
+
if (event.target.localName === "sp-button") {
|
|
197
|
+
event.target.dispatchEvent(
|
|
198
|
+
new Event("close", { bubbles: true, composed: true })
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
}}
|
|
202
|
+
>
|
|
203
|
+
<sp-dialog size="m">
|
|
204
|
+
<h2 slot="heading">This is a heading</h2>
|
|
205
|
+
<p>
|
|
206
|
+
The click on the "OK" button should close the overlay with
|
|
207
|
+
the correct animation (duration).
|
|
208
|
+
</p>
|
|
209
|
+
<sp-button variant="secondary" treatment="fill" slot="button">
|
|
210
|
+
Ok
|
|
211
|
+
</sp-button>
|
|
212
|
+
</sp-dialog>
|
|
213
|
+
</sp-dialog-base>
|
|
214
|
+
`;
|
|
215
|
+
return html`
|
|
216
|
+
<sp-button
|
|
217
|
+
variant="primary"
|
|
218
|
+
${trigger(template, {
|
|
219
|
+
open: false,
|
|
220
|
+
triggerInteraction: "click"
|
|
221
|
+
})}
|
|
222
|
+
>
|
|
223
|
+
Open dialog
|
|
224
|
+
</sp-button>
|
|
225
|
+
`;
|
|
226
|
+
};
|
|
227
|
+
lazyLoaded.swc_vrt = {
|
|
228
|
+
skip: true
|
|
229
|
+
};
|
|
196
230
|
//# sourceMappingURL=dialog-base.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["dialog-base.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/
|
|
5
|
-
"mappings": ";AAWA,SAAS,YAA4B;AACrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport '@spectrum-web-components/dialog/sp-dialog-base.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport { trigger } from '@spectrum-web-components/overlay';\nimport { alertDestructive } from './dialog.stories.js';\nimport { portrait } from './images.js';\nimport {\n disabledButtonWithOverlayDecorator,\n withOverlayDecorator,\n} from './index.js';\n\nexport default {\n title: 'Dialog Base',\n component: 'sp-dialog-base',\n};\n\nexport const slotted = (): TemplateResult => html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'sp-button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n >\n ${alertDestructive()}\n </sp-dialog-base>\n`;\nslotted.decorators = [withOverlayDecorator];\n\nexport const disabledButton = (): TemplateResult => {\n return html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'sp-button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n @sp-opened=${({ target }: Event & { target: HTMLElement }) => {\n let count = 5;\n const timer = setInterval(() => {\n count -= 1;\n if (!count) {\n (\n document.querySelector(\n '#changing-header'\n ) as HTMLElement\n ).textContent =\n 'The button in this dialog is now enabled';\n (\n document.querySelector(\n '#changing-button'\n ) as HTMLButtonElement\n ).disabled = false;\n clearInterval(timer);\n target.dispatchEvent(new Event('countdown-complete'));\n }\n (\n document.querySelector('.time') as HTMLElement\n ).textContent = count.toString();\n }, 1000);\n }}\n @close=${() => {\n (\n document.querySelector('#changing-header') as HTMLElement\n ).textContent = 'The button in this dialog is disabled';\n (\n document.querySelector(\n '#changing-button'\n ) as HTMLButtonElement\n ).disabled = true;\n (document.querySelector('.time') as HTMLElement).textContent =\n '5';\n }}\n >\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\" id=\"changing-header\">\n The button in this dialog is disabled\n </h2>\n <p>\n After about\n <span class=\"time\">5</span>\n seconds the button with be enabled.\n </p>\n <sp-button disabled slot=\"button\" id=\"changing-button\">\n Ok\n </sp-button>\n </sp-dialog>\n </sp-dialog-base>\n `;\n};\n\ndisabledButton.decorators = [disabledButtonWithOverlayDecorator];\n\nexport const notAgain = (): TemplateResult => html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'sp-button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n >\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">A thing is about to happen</h2>\n <p>Something that might happen a lot is about to happen.</p>\n <p>\n The click events for the \"OK\" button are bound to the story not\n to the components in specific.\n </p>\n <sp-button variant=\"secondary\" treatment=\"fill\" slot=\"button\">\n Ok\n </sp-button>\n <sp-checkbox slot=\"footer\">Don't show me this again</sp-checkbox>\n </sp-dialog>\n </sp-dialog-base>\n`;\nnotAgain.decorators = [withOverlayDecorator];\n\nexport const moreCustom = (): TemplateResult => html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'sp-button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n >\n <div style=\"display: flex;\">\n <div\n style=\"\n display: grid;\n place-content: center;\n grid-template-columns: calc(100% - 40px);\n grid-template-rows: calc(100% - 40px);\n \"\n >\n <img\n src=${portrait}\n alt=\"\"\n style=\"\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-placement: center;\n \"\n />\n </div>\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">Look at that image</h2>\n <p>\n Its position has been customized beyond the language of\n Spectrum. Be careful with all this power. There's no\n \"mobile\" default for delivering content like this.\n </p>\n <sp-button variant=\"accent\" treatment=\"outline\" slot=\"button\">\n Ok\n </sp-button>\n </sp-dialog>\n </div>\n </sp-dialog-base>\n`;\nmoreCustom.decorators = [withOverlayDecorator];\n\nexport const fullyCustom = (): TemplateResult => html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n >\n <div id=\"fully-custom-dialog\">\n <style>\n #fully-custom-dialog {\n margin: 1em;\n }\n </style>\n <h2>Custom headline</h2>\n <p>\n The click events for the \"Done\" button are bound to the story\n not to the components in specific.\n </p>\n <p>\n This is a demonstration of what is possible with\n <sp-dialog-base>, only, and should not be seen as an\n endorsement for fully custom dialog UIs.\n </p>\n <p>Fully open content area, for whatever DOM you would like.</p>\n <button>Done</button>\n </div>\n </sp-dialog-base>\n`;\nfullyCustom.decorators = [withOverlayDecorator];\n\nexport const lazyLoaded = (): TemplateResult => {\n const template = (): TemplateResult => html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'sp-button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n >\n <sp-dialog size=\"m\">\n <h2 slot=\"heading\">This is a heading</h2>\n <p>\n The click on the \"OK\" button should close the overlay with\n the correct animation (duration).\n </p>\n <sp-button variant=\"secondary\" treatment=\"fill\" slot=\"button\">\n Ok\n </sp-button>\n </sp-dialog>\n </sp-dialog-base>\n `;\n\n return html`\n <sp-button\n variant=\"primary\"\n ${trigger(template, {\n open: false,\n triggerInteraction: 'click',\n })}\n >\n Open dialog\n </sp-button>\n `;\n};\n\nlazyLoaded.swc_vrt = {\n skip: true,\n};\n"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,YAA4B;AACrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACf;AAEO,aAAM,UAAU,MAAsB;AAAA;AAAA;AAAA,iBAG5B,CAAC,UAAiB;AACvB,MAAK,MAAM,OAAuB,cAAc,aAAa;AACzD,IAAC,MAAM,OAAuB;AAAA,MAC1B,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,IACxD;AAAA,EACJ;AACJ,CAAC;AAAA;AAAA,UAEC,iBAAiB,CAAC;AAAA;AAAA;AAG5B,QAAQ,aAAa,CAAC,oBAAoB;AAEnC,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAAA,qBAGU,CAAC,UAAiB;AACvB,QAAK,MAAM,OAAuB,cAAc,aAAa;AACzD,MAAC,MAAM,OAAuB;AAAA,QAC1B,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,MACxD;AAAA,IACJ;AAAA,EACJ,CAAC;AAAA,yBACY,CAAC,EAAE,OAAO,MAAuC;AAC1D,QAAI,QAAQ;AACZ,UAAM,QAAQ,YAAY,MAAM;AAC5B,eAAS;AACT,UAAI,CAAC,OAAO;AACR,QACI,SAAS;AAAA,UACL;AAAA,QACJ,EACF,cACE;AACJ,QACI,SAAS;AAAA,UACL;AAAA,QACJ,EACF,WAAW;AACb,sBAAc,KAAK;AACnB,eAAO,cAAc,IAAI,MAAM,oBAAoB,CAAC;AAAA,MACxD;AACA,MACI,SAAS,cAAc,OAAO,EAChC,cAAc,MAAM,SAAS;AAAA,IACnC,GAAG,GAAI;AAAA,EACX,CAAC;AAAA,qBACQ,MAAM;AACX,IACI,SAAS,cAAc,kBAAkB,EAC3C,cAAc;AAChB,IACI,SAAS;AAAA,MACL;AAAA,IACJ,EACF,WAAW;AACb,IAAC,SAAS,cAAc,OAAO,EAAkB,cAC7C;AAAA,EACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBb;AAEA,eAAe,aAAa,CAAC,kCAAkC;AAExD,aAAM,WAAW,MAAsB;AAAA;AAAA;AAAA,iBAG7B,CAAC,UAAiB;AACvB,MAAK,MAAM,OAAuB,cAAc,aAAa;AACzD,IAAC,MAAM,OAAuB;AAAA,MAC1B,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,IACxD;AAAA,EACJ;AACJ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBT,SAAS,aAAa,CAAC,oBAAoB;AAEpC,aAAM,aAAa,MAAsB;AAAA;AAAA;AAAA,iBAG/B,CAAC,UAAiB;AACvB,MAAK,MAAM,OAAuB,cAAc,aAAa;AACzD,IAAC,MAAM,OAAuB;AAAA,MAC1B,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,IACxD;AAAA,EACJ;AACJ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYiB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBlC,WAAW,aAAa,CAAC,oBAAoB;AAEtC,aAAM,cAAc,MAAsB;AAAA;AAAA;AAAA,iBAGhC,CAAC,UAAiB;AACvB,MAAK,MAAM,OAAuB,cAAc,UAAU;AACtD,IAAC,MAAM,OAAuB;AAAA,MAC1B,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,IACxD;AAAA,EACJ;AACJ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBT,YAAY,aAAa,CAAC,oBAAoB;AAEvC,aAAM,aAAa,MAAsB;AAC5C,QAAM,WAAW,MAAsB;AAAA;AAAA;AAAA,qBAGtB,CAAC,UAAiB;AACvB,QAAK,MAAM,OAAuB,cAAc,aAAa;AACzD,MAAC,MAAM,OAAuB;AAAA,QAC1B,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,MACxD;AAAA,IACJ;AAAA,EACJ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeT,SAAO;AAAA;AAAA;AAAA,cAGG,QAAQ,UAAU;AAAA,IAChB,MAAM;AAAA,IACN,oBAAoB;AAAA,EACxB,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAKd;AAEA,WAAW,UAAU;AAAA,EACjB,MAAM;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/stories/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { html } from "@spectrum-web-components/base";
|
|
3
|
+
import "@spectrum-web-components/button/sp-button.js";
|
|
4
|
+
import "@spectrum-web-components/overlay/sp-overlay.js";
|
|
3
5
|
class CountdownWatcher extends HTMLElement {
|
|
4
6
|
constructor() {
|
|
5
7
|
super(...arguments);
|
|
@@ -27,4 +29,13 @@ export const disabledButtonDecorator = (story) => {
|
|
|
27
29
|
<countdown-complete-watcher></countdown-complete-watcher>
|
|
28
30
|
`;
|
|
29
31
|
};
|
|
32
|
+
export const withOverlayDecorator = (story) => {
|
|
33
|
+
return html`
|
|
34
|
+
<sp-button variant="primary" id="trigger">Toggle Dialog</sp-button>
|
|
35
|
+
<sp-overlay type="modal" trigger="trigger@click" open>
|
|
36
|
+
${story()}
|
|
37
|
+
</sp-overlay>
|
|
38
|
+
`;
|
|
39
|
+
};
|
|
40
|
+
export const disabledButtonWithOverlayDecorator = (story) => withOverlayDecorator(() => disabledButtonDecorator(story));
|
|
30
41
|
//# sourceMappingURL=index.js.map
|
package/stories/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nclass CountdownWatcher extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n connectedCallback(): void {\n (this.previousElementSibling as HTMLElement).addEventListener(\n 'countdown-complete',\n () => {\n this.ready(true);\n }\n );\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n });\n }\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('countdown-complete-watcher', CountdownWatcher);\n\nexport const disabledButtonDecorator = (\n story: () => TemplateResult\n): TemplateResult => {\n return html`\n ${story()}\n <countdown-complete-watcher></countdown-complete-watcher>\n `;\n};\n"],
|
|
5
|
-
"mappings": ";AAYA,SAAS,YAA4B;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\n\nclass CountdownWatcher extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n connectedCallback(): void {\n (this.previousElementSibling as HTMLElement).addEventListener(\n 'countdown-complete',\n () => {\n this.ready(true);\n }\n );\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n });\n }\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('countdown-complete-watcher', CountdownWatcher);\n\nexport const disabledButtonDecorator = (\n story: () => TemplateResult\n): TemplateResult => {\n return html`\n ${story()}\n <countdown-complete-watcher></countdown-complete-watcher>\n `;\n};\n\nexport const withOverlayDecorator = (\n story: () => TemplateResult\n): TemplateResult => {\n return html`\n <sp-button variant=\"primary\" id=\"trigger\">Toggle Dialog</sp-button>\n <sp-overlay type=\"modal\" trigger=\"trigger@click\" open>\n ${story()}\n </sp-overlay>\n `;\n};\n\nexport const disabledButtonWithOverlayDecorator = (\n story: () => TemplateResult\n): TemplateResult => withOverlayDecorator(() => disabledButtonDecorator(story));\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,YAA4B;AACrC,OAAO;AACP,OAAO;AAEP,MAAM,yBAAyB,YAAY;AAAA,EAA3C;AAAA;AAcI,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AAAA;AAAA,EAX9D,oBAA0B;AACtB,IAAC,KAAK,uBAAuC;AAAA,MACzC;AAAA,MACA,MAAM;AACF,aAAK,MAAM,IAAI;AAAA,MACnB;AAAA,IACJ;AACA,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AAAA,IACjB,CAAC;AAAA,EACL;AAAA,EAGA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,8BAA8B,gBAAgB;AAE7D,aAAM,0BAA0B,CACnC,UACiB;AACjB,SAAO;AAAA,UACD,MAAM,CAAC;AAAA;AAAA;AAGjB;AAEO,aAAM,uBAAuB,CAChC,UACiB;AACjB,SAAO;AAAA;AAAA;AAAA,cAGG,MAAM,CAAC;AAAA;AAAA;AAGrB;AAEO,aAAM,qCAAqC,CAC9C,UACiB,qBAAqB,MAAM,wBAAwB,KAAK,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|