@spectrum-web-components/dialog 0.11.2 → 0.11.4
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 +24 -2
- package/package.json +5 -5
- package/src/Dialog.dev.js +3 -2
- package/src/Dialog.dev.js.map +2 -2
- package/src/Dialog.js +7 -7
- package/src/Dialog.js.map +3 -3
- package/src/DialogBase.d.ts +2 -1
- package/src/DialogBase.dev.js +13 -11
- package/src/DialogBase.dev.js.map +2 -2
- package/src/DialogBase.js +2 -2
- package/src/DialogBase.js.map +2 -2
- package/test/dialog-base.test-vrt.js.map +2 -2
- package/test/dialog-base.test.js +0 -14
- package/test/dialog-base.test.js.map +2 -2
- package/test/dialog-wrapper.test-vrt.js.map +2 -2
- package/test/dialog-wrapper.test.js +1 -1
- package/test/dialog-wrapper.test.js.map +2 -2
- package/test/dialog.test-vrt.js.map +2 -2
- package/test/dialog.test.js +24 -1
- package/test/dialog.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -489,10 +489,19 @@
|
|
|
489
489
|
"privacy": "public",
|
|
490
490
|
"return": {
|
|
491
491
|
"type": {
|
|
492
|
-
"text": "void"
|
|
492
|
+
"text": "Promise<void>"
|
|
493
493
|
}
|
|
494
494
|
}
|
|
495
495
|
},
|
|
496
|
+
{
|
|
497
|
+
"kind": "field",
|
|
498
|
+
"name": "animating",
|
|
499
|
+
"type": {
|
|
500
|
+
"text": "boolean"
|
|
501
|
+
},
|
|
502
|
+
"privacy": "private",
|
|
503
|
+
"default": "false"
|
|
504
|
+
},
|
|
496
505
|
{
|
|
497
506
|
"kind": "method",
|
|
498
507
|
"name": "overlayWillCloseCallback",
|
|
@@ -947,7 +956,7 @@
|
|
|
947
956
|
"privacy": "public",
|
|
948
957
|
"return": {
|
|
949
958
|
"type": {
|
|
950
|
-
"text": "void"
|
|
959
|
+
"text": "Promise<void>"
|
|
951
960
|
}
|
|
952
961
|
},
|
|
953
962
|
"inheritedFrom": {
|
|
@@ -955,6 +964,19 @@
|
|
|
955
964
|
"module": "src/DialogBase.js"
|
|
956
965
|
}
|
|
957
966
|
},
|
|
967
|
+
{
|
|
968
|
+
"kind": "field",
|
|
969
|
+
"name": "animating",
|
|
970
|
+
"type": {
|
|
971
|
+
"text": "boolean"
|
|
972
|
+
},
|
|
973
|
+
"privacy": "private",
|
|
974
|
+
"default": "false",
|
|
975
|
+
"inheritedFrom": {
|
|
976
|
+
"name": "DialogBase",
|
|
977
|
+
"module": "src/DialogBase.js"
|
|
978
|
+
}
|
|
979
|
+
},
|
|
958
980
|
{
|
|
959
981
|
"kind": "method",
|
|
960
982
|
"name": "overlayWillCloseCallback",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/dialog",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -74,12 +74,12 @@
|
|
|
74
74
|
],
|
|
75
75
|
"dependencies": {
|
|
76
76
|
"@spectrum-web-components/base": "^0.7.0",
|
|
77
|
-
"@spectrum-web-components/button": "^0.19.
|
|
77
|
+
"@spectrum-web-components/button": "^0.19.4",
|
|
78
78
|
"@spectrum-web-components/button-group": "^0.9.0",
|
|
79
79
|
"@spectrum-web-components/divider": "^0.5.1",
|
|
80
|
-
"@spectrum-web-components/icons-workflow": "^0.9.
|
|
80
|
+
"@spectrum-web-components/icons-workflow": "^0.9.1",
|
|
81
81
|
"@spectrum-web-components/modal": "^0.7.1",
|
|
82
|
-
"@spectrum-web-components/shared": "^0.15.
|
|
82
|
+
"@spectrum-web-components/shared": "^0.15.1",
|
|
83
83
|
"@spectrum-web-components/underlay": "^0.9.0",
|
|
84
84
|
"tslib": "^2.0.0"
|
|
85
85
|
},
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"./sp-*.js",
|
|
93
93
|
"./**/*.dev.js"
|
|
94
94
|
],
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "96da2eef637c5d50dd04a75d40a46353116787b4"
|
|
96
96
|
}
|
package/src/Dialog.dev.js
CHANGED
|
@@ -30,14 +30,15 @@ import {
|
|
|
30
30
|
ObserveSlotPresence
|
|
31
31
|
} from "@spectrum-web-components/shared";
|
|
32
32
|
import styles from "./dialog.css.js";
|
|
33
|
+
let appliedIds = 0;
|
|
33
34
|
function gatherAppliedIdsFromSlottedChildren(slot, idBase) {
|
|
34
35
|
const assignedElements = slot.assignedElements();
|
|
35
36
|
const ids = [];
|
|
36
|
-
assignedElements.forEach((el
|
|
37
|
+
assignedElements.forEach((el) => {
|
|
37
38
|
if (el.id) {
|
|
38
39
|
ids.push(el.id);
|
|
39
40
|
} else {
|
|
40
|
-
const id = idBase + `-${
|
|
41
|
+
const id = idBase + `-${appliedIds++}`;
|
|
41
42
|
el.id = id;
|
|
42
43
|
ids.push(id);
|
|
43
44
|
}
|
package/src/Dialog.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Dialog.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 {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\n\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport '@spectrum-web-components/button/sp-close-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n} from '@spectrum-web-components/shared';\n\nimport styles from './dialog.css.js';\nimport type { CloseButton } from '@spectrum-web-components/button';\n\nfunction gatherAppliedIdsFromSlottedChildren(\n slot: HTMLSlotElement,\n idBase: string\n): string[] {\n const assignedElements = slot.assignedElements();\n const ids: string[] = [];\n assignedElements.forEach((el
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,gBAAgB;AACzB,SAAS,gCAAgC;AAEzC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,OAAO,YAAY;AAGnB,SAAS,oCACL,MACA,QACQ;AACR,QAAM,mBAAmB,KAAK,iBAAiB;AAC/C,QAAM,MAAgB,CAAC;AACvB,mBAAiB,QAAQ,CAAC,
|
|
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 {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\n\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport '@spectrum-web-components/button/sp-close-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n} from '@spectrum-web-components/shared';\n\nimport styles from './dialog.css.js';\nimport type { CloseButton } from '@spectrum-web-components/button';\n\nlet appliedIds = 0;\n\nfunction gatherAppliedIdsFromSlottedChildren(\n slot: HTMLSlotElement,\n idBase: string\n): string[] {\n const assignedElements = slot.assignedElements();\n const ids: string[] = [];\n assignedElements.forEach((el) => {\n if (el.id) {\n ids.push(el.id);\n } else {\n const id = idBase + `-${appliedIds++}`;\n el.id = id;\n ids.push(id);\n }\n });\n return ids;\n}\n\n/**\n * @element sp-dialog\n *\n * @slot hero - Accepts a hero image to display at the top of the dialog\n * @slot heading - Acts as the heading of the dialog. This should be an actual heading tag `<h1-6 />`\n * @slot - Content not addressed to a specific slot will be interpreted as the main content of the dialog\n * @slot footer - Content addressed to the `footer` will be placed below the main content and to the side of any `[slot='button']` content\n * @slot button - Button elements addressed to this slot may be placed below the content when not delivered in a fullscreen mode\n * @fires close - Announces that the dialog has been closed.\n */\nexport class Dialog extends FocusVisiblePolyfillMixin(\n ObserveSlotPresence(SpectrumElement, [\n '[slot=\"hero\"]',\n '[slot=\"footer\"]',\n '[slot=\"button\"]',\n ])\n) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @query('.close-button')\n closeButton?: CloseButton;\n\n @query('.content')\n private contentElement!: HTMLDivElement;\n\n @property({ type: Boolean, reflect: true })\n public error = false;\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n protected get hasFooter(): boolean {\n return this.getSlotContentPresence('[slot=\"footer\"]');\n }\n\n protected get hasButtons(): boolean {\n return this.getSlotContentPresence('[slot=\"button\"]');\n }\n\n protected get hasHero(): boolean {\n return this.getSlotContentPresence('[slot=\"hero\"]');\n }\n\n @property({ type: Boolean, reflect: true, attribute: 'no-divider' })\n public noDivider = false;\n\n @property({ type: String, reflect: true })\n public mode?: 'fullscreen' | 'fullscreenTakeover';\n\n @property({ type: String, reflect: true })\n public size?: 's' | 'm' | 'l';\n\n public close(): void {\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n protected renderHero(): TemplateResult {\n return html`\n <slot name=\"hero\"></slot>\n `;\n }\n\n protected renderHeading(): TemplateResult {\n return html`\n <slot name=\"heading\" @slotchange=${this.onHeadingSlotchange}></slot>\n `;\n }\n\n protected renderContent(): TemplateResult {\n return html`\n <div class=\"content\">\n <slot @slotchange=${this.onContentSlotChange}></slot>\n </div>\n `;\n }\n\n protected renderFooter(): TemplateResult {\n return html`\n <div class=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n\n protected renderButtons(): TemplateResult {\n const classes = {\n 'button-group': true,\n 'button-group--noFooter': !this.hasFooter,\n };\n return html`\n <sp-button-group class=${classMap(classes)}>\n <slot name=\"button\"></slot>\n </sp-button-group>\n `;\n }\n\n protected renderDismiss(): TemplateResult {\n return html`\n <sp-close-button\n class=\"close-button\"\n label=\"Close\"\n quiet\n size=\"m\"\n @click=${this.close}\n ></sp-close-button>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div class=\"grid\">\n ${this.renderHero()} ${this.renderHeading()}\n ${this.error\n ? html`\n <sp-icon-alert class=\"type-icon\"></sp-icon-alert>\n `\n : nothing}\n ${this.noDivider\n ? nothing\n : html`\n <sp-divider size=\"m\" class=\"divider\"></sp-divider>\n `}\n ${this.renderContent()}\n ${this.hasFooter ? this.renderFooter() : nothing}\n ${this.hasButtons ? this.renderButtons() : nothing}\n ${this.dismissable ? this.renderDismiss() : nothing}\n </div>\n `;\n }\n\n public shouldManageTabOrderForScrolling = (): void => {\n const { offsetHeight, scrollHeight } = this.contentElement;\n if (offsetHeight < scrollHeight) {\n this.contentElement.tabIndex = 0;\n } else {\n this.contentElement.removeAttribute('tabindex');\n }\n };\n\n protected override shouldUpdate(changes: PropertyValues): boolean {\n if (changes.has('mode') && !!this.mode) {\n this.dismissable = false;\n }\n if (changes.has('dismissable') && this.dismissable) {\n this.dismissable = !this.mode;\n }\n return super.shouldUpdate(changes);\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'dialog');\n }\n\n static instanceCount = 0;\n private labelledbyId = `sp-dialog-label-${Dialog.instanceCount++}`;\n private conditionLabelledby?: () => void;\n private conditionDescribedby?: () => void;\n\n private onHeadingSlotchange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (this.conditionLabelledby) {\n this.conditionLabelledby();\n delete this.conditionLabelledby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.labelledbyId\n );\n if (ids.length) {\n this.conditionLabelledby = conditionAttributeWithId(\n this,\n 'aria-labelledby',\n ids\n );\n }\n }\n\n private describedbyId = `sp-dialog-description-${Dialog.instanceCount++}`;\n\n protected onContentSlotChange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (this.conditionDescribedby) {\n this.conditionDescribedby();\n delete this.conditionDescribedby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.describedbyId\n );\n if (ids.length && ids.length < 4) {\n this.conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n ids\n );\n } else if (!ids.length) {\n const idProvided = !!this.id;\n if (!idProvided) this.id = this.describedbyId;\n const conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n this.id\n );\n this.conditionDescribedby = () => {\n conditionDescribedby();\n if (!idProvided) {\n this.removeAttribute('id');\n }\n };\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.tabIndex = 0;\n window.addEventListener(\n 'resize',\n this.shouldManageTabOrderForScrolling\n );\n }\n\n public override disconnectedCallback(): void {\n window.removeEventListener(\n 'resize',\n this.shouldManageTabOrderForScrolling\n );\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Dialog.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var r=(c,n,e,t)=>{for(var o=t>1?void 0:t?v(n,e):n,i=c.length-1,b;i>=0;i--)(b=c[i])&&(o=(t?b(n,e,o):b(o))||o);return t&&o&&m(n,e,o),o};import{html as s,nothing as l,SpectrumElement as f}from"@spectrum-web-components/base";import{property as d,query as u}from"@spectrum-web-components/base/src/decorators.js";import{classMap as g}from"@spectrum-web-components/base/src/directives.js";import{conditionAttributeWithId as p}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";import"@spectrum-web-components/divider/sp-divider.js";import"@spectrum-web-components/button/sp-close-button.js";import"@spectrum-web-components/button-group/sp-button-group.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import{FocusVisiblePolyfillMixin as y,ObserveSlotPresence as C}from"@spectrum-web-components/shared";import S from"./dialog.css.js";let E=0;function h(c,n){const e=c.assignedElements(),t=[];return e.forEach(o=>{if(o.id)t.push(o.id);else{const i=n+`-${E++}`;o.id=i,t.push(i)}}),t}const a=class extends y(C(f,['[slot="hero"]','[slot="footer"]','[slot="button"]'])){constructor(){super(...arguments);this.error=!1;this.dismissable=!1;this.noDivider=!1;this.shouldManageTabOrderForScrolling=()=>{const{offsetHeight:e,scrollHeight:t}=this.contentElement;e<t?this.contentElement.tabIndex=0:this.contentElement.removeAttribute("tabindex")};this.labelledbyId=`sp-dialog-label-${a.instanceCount++}`;this.describedbyId=`sp-dialog-description-${a.instanceCount++}`}static get styles(){return[S]}get hasFooter(){return this.getSlotContentPresence('[slot="footer"]')}get hasButtons(){return this.getSlotContentPresence('[slot="button"]')}get hasHero(){return this.getSlotContentPresence('[slot="hero"]')}close(){this.dispatchEvent(new Event("close",{bubbles:!0,composed:!0,cancelable:!0}))}renderHero(){return s`
|
|
2
2
|
<slot name="hero"></slot>
|
|
3
3
|
`}renderHeading(){return s`
|
|
4
4
|
<slot name="heading" @slotchange=${this.onHeadingSlotchange}></slot>
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
${this.renderHero()} ${this.renderHeading()}
|
|
28
28
|
${this.error?s`
|
|
29
29
|
<sp-icon-alert class="type-icon"></sp-icon-alert>
|
|
30
|
-
`:
|
|
31
|
-
${this.noDivider?
|
|
30
|
+
`:l}
|
|
31
|
+
${this.noDivider?l:s`
|
|
32
32
|
<sp-divider size="m" class="divider"></sp-divider>
|
|
33
33
|
`}
|
|
34
34
|
${this.renderContent()}
|
|
35
|
-
${this.hasFooter?this.renderFooter():
|
|
36
|
-
${this.hasButtons?this.renderButtons():
|
|
37
|
-
${this.dismissable?this.renderDismiss():
|
|
35
|
+
${this.hasFooter?this.renderFooter():l}
|
|
36
|
+
${this.hasButtons?this.renderButtons():l}
|
|
37
|
+
${this.dismissable?this.renderDismiss():l}
|
|
38
38
|
</div>
|
|
39
|
-
`}shouldUpdate(e){return e.has("mode")&&!!this.mode&&(this.dismissable=!1),e.has("dismissable")&&this.dismissable&&(this.dismissable=!this.mode),super.shouldUpdate(e)}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","dialog")}onHeadingSlotchange({target:e}){this.conditionLabelledby&&(this.conditionLabelledby(),delete this.conditionLabelledby);const t=h(e,this.labelledbyId);t.length&&(this.conditionLabelledby=
|
|
39
|
+
`}shouldUpdate(e){return e.has("mode")&&!!this.mode&&(this.dismissable=!1),e.has("dismissable")&&this.dismissable&&(this.dismissable=!this.mode),super.shouldUpdate(e)}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","dialog")}onHeadingSlotchange({target:e}){this.conditionLabelledby&&(this.conditionLabelledby(),delete this.conditionLabelledby);const t=h(e,this.labelledbyId);t.length&&(this.conditionLabelledby=p(this,"aria-labelledby",t))}onContentSlotChange({target:e}){this.conditionDescribedby&&(this.conditionDescribedby(),delete this.conditionDescribedby);const t=h(e,this.describedbyId);if(t.length&&t.length<4)this.conditionDescribedby=p(this,"aria-describedby",t);else if(!t.length){const o=!!this.id;o||(this.id=this.describedbyId);const i=p(this,"aria-describedby",this.id);this.conditionDescribedby=()=>{i(),o||this.removeAttribute("id")}}}connectedCallback(){super.connectedCallback(),this.tabIndex=0,window.addEventListener("resize",this.shouldManageTabOrderForScrolling)}disconnectedCallback(){window.removeEventListener("resize",this.shouldManageTabOrderForScrolling),super.disconnectedCallback()}};export let Dialog=a;Dialog.instanceCount=0,r([u(".close-button")],Dialog.prototype,"closeButton",2),r([u(".content")],Dialog.prototype,"contentElement",2),r([d({type:Boolean,reflect:!0})],Dialog.prototype,"error",2),r([d({type:Boolean,reflect:!0})],Dialog.prototype,"dismissable",2),r([d({type:Boolean,reflect:!0,attribute:"no-divider"})],Dialog.prototype,"noDivider",2),r([d({type:String,reflect:!0})],Dialog.prototype,"mode",2),r([d({type:String,reflect:!0})],Dialog.prototype,"size",2);
|
|
40
40
|
//# sourceMappingURL=Dialog.js.map
|
package/src/Dialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Dialog.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 {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\n\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport '@spectrum-web-components/button/sp-close-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n} from '@spectrum-web-components/shared';\n\nimport styles from './dialog.css.js';\nimport type { CloseButton } from '@spectrum-web-components/button';\n\nfunction gatherAppliedIdsFromSlottedChildren(\n slot: HTMLSlotElement,\n idBase: string\n): string[] {\n const assignedElements = slot.assignedElements();\n const ids: string[] = [];\n assignedElements.forEach((el
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,4BAAAC,MAAgC,mEAEzC,MAAO,iDACP,MAAO,qDACP,MAAO,2DACP,MAAO,iEACP,OACI,6BAAAC,EACA,uBAAAC,MACG,kCAEP,OAAOC,MAAY,kBAGnB,SAASC,EACLC,EACAC,EACQ,CACR,MAAMC,EAAmBF,EAAK,iBAAiB,EACzCG,EAAgB,CAAC,EACvB,OAAAD,EAAiB,
|
|
6
|
-
"names": ["html", "nothing", "SpectrumElement", "property", "query", "classMap", "conditionAttributeWithId", "FocusVisiblePolyfillMixin", "ObserveSlotPresence", "styles", "gatherAppliedIdsFromSlottedChildren", "slot", "idBase", "assignedElements", "ids", "el", "
|
|
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 {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\n\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport '@spectrum-web-components/button/sp-close-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n} from '@spectrum-web-components/shared';\n\nimport styles from './dialog.css.js';\nimport type { CloseButton } from '@spectrum-web-components/button';\n\nlet appliedIds = 0;\n\nfunction gatherAppliedIdsFromSlottedChildren(\n slot: HTMLSlotElement,\n idBase: string\n): string[] {\n const assignedElements = slot.assignedElements();\n const ids: string[] = [];\n assignedElements.forEach((el) => {\n if (el.id) {\n ids.push(el.id);\n } else {\n const id = idBase + `-${appliedIds++}`;\n el.id = id;\n ids.push(id);\n }\n });\n return ids;\n}\n\n/**\n * @element sp-dialog\n *\n * @slot hero - Accepts a hero image to display at the top of the dialog\n * @slot heading - Acts as the heading of the dialog. This should be an actual heading tag `<h1-6 />`\n * @slot - Content not addressed to a specific slot will be interpreted as the main content of the dialog\n * @slot footer - Content addressed to the `footer` will be placed below the main content and to the side of any `[slot='button']` content\n * @slot button - Button elements addressed to this slot may be placed below the content when not delivered in a fullscreen mode\n * @fires close - Announces that the dialog has been closed.\n */\nexport class Dialog extends FocusVisiblePolyfillMixin(\n ObserveSlotPresence(SpectrumElement, [\n '[slot=\"hero\"]',\n '[slot=\"footer\"]',\n '[slot=\"button\"]',\n ])\n) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @query('.close-button')\n closeButton?: CloseButton;\n\n @query('.content')\n private contentElement!: HTMLDivElement;\n\n @property({ type: Boolean, reflect: true })\n public error = false;\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n protected get hasFooter(): boolean {\n return this.getSlotContentPresence('[slot=\"footer\"]');\n }\n\n protected get hasButtons(): boolean {\n return this.getSlotContentPresence('[slot=\"button\"]');\n }\n\n protected get hasHero(): boolean {\n return this.getSlotContentPresence('[slot=\"hero\"]');\n }\n\n @property({ type: Boolean, reflect: true, attribute: 'no-divider' })\n public noDivider = false;\n\n @property({ type: String, reflect: true })\n public mode?: 'fullscreen' | 'fullscreenTakeover';\n\n @property({ type: String, reflect: true })\n public size?: 's' | 'm' | 'l';\n\n public close(): void {\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n protected renderHero(): TemplateResult {\n return html`\n <slot name=\"hero\"></slot>\n `;\n }\n\n protected renderHeading(): TemplateResult {\n return html`\n <slot name=\"heading\" @slotchange=${this.onHeadingSlotchange}></slot>\n `;\n }\n\n protected renderContent(): TemplateResult {\n return html`\n <div class=\"content\">\n <slot @slotchange=${this.onContentSlotChange}></slot>\n </div>\n `;\n }\n\n protected renderFooter(): TemplateResult {\n return html`\n <div class=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n\n protected renderButtons(): TemplateResult {\n const classes = {\n 'button-group': true,\n 'button-group--noFooter': !this.hasFooter,\n };\n return html`\n <sp-button-group class=${classMap(classes)}>\n <slot name=\"button\"></slot>\n </sp-button-group>\n `;\n }\n\n protected renderDismiss(): TemplateResult {\n return html`\n <sp-close-button\n class=\"close-button\"\n label=\"Close\"\n quiet\n size=\"m\"\n @click=${this.close}\n ></sp-close-button>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div class=\"grid\">\n ${this.renderHero()} ${this.renderHeading()}\n ${this.error\n ? html`\n <sp-icon-alert class=\"type-icon\"></sp-icon-alert>\n `\n : nothing}\n ${this.noDivider\n ? nothing\n : html`\n <sp-divider size=\"m\" class=\"divider\"></sp-divider>\n `}\n ${this.renderContent()}\n ${this.hasFooter ? this.renderFooter() : nothing}\n ${this.hasButtons ? this.renderButtons() : nothing}\n ${this.dismissable ? this.renderDismiss() : nothing}\n </div>\n `;\n }\n\n public shouldManageTabOrderForScrolling = (): void => {\n const { offsetHeight, scrollHeight } = this.contentElement;\n if (offsetHeight < scrollHeight) {\n this.contentElement.tabIndex = 0;\n } else {\n this.contentElement.removeAttribute('tabindex');\n }\n };\n\n protected override shouldUpdate(changes: PropertyValues): boolean {\n if (changes.has('mode') && !!this.mode) {\n this.dismissable = false;\n }\n if (changes.has('dismissable') && this.dismissable) {\n this.dismissable = !this.mode;\n }\n return super.shouldUpdate(changes);\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'dialog');\n }\n\n static instanceCount = 0;\n private labelledbyId = `sp-dialog-label-${Dialog.instanceCount++}`;\n private conditionLabelledby?: () => void;\n private conditionDescribedby?: () => void;\n\n private onHeadingSlotchange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (this.conditionLabelledby) {\n this.conditionLabelledby();\n delete this.conditionLabelledby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.labelledbyId\n );\n if (ids.length) {\n this.conditionLabelledby = conditionAttributeWithId(\n this,\n 'aria-labelledby',\n ids\n );\n }\n }\n\n private describedbyId = `sp-dialog-description-${Dialog.instanceCount++}`;\n\n protected onContentSlotChange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (this.conditionDescribedby) {\n this.conditionDescribedby();\n delete this.conditionDescribedby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.describedbyId\n );\n if (ids.length && ids.length < 4) {\n this.conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n ids\n );\n } else if (!ids.length) {\n const idProvided = !!this.id;\n if (!idProvided) this.id = this.describedbyId;\n const conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n this.id\n );\n this.conditionDescribedby = () => {\n conditionDescribedby();\n if (!idProvided) {\n this.removeAttribute('id');\n }\n };\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.tabIndex = 0;\n window.addEventListener(\n 'resize',\n this.shouldManageTabOrderForScrolling\n );\n }\n\n public override disconnectedCallback(): void {\n window.removeEventListener(\n 'resize',\n this.shouldManageTabOrderForScrolling\n );\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "nothing", "SpectrumElement", "property", "query", "classMap", "conditionAttributeWithId", "FocusVisiblePolyfillMixin", "ObserveSlotPresence", "styles", "appliedIds", "gatherAppliedIdsFromSlottedChildren", "slot", "idBase", "assignedElements", "ids", "el", "id", "_Dialog", "offsetHeight", "scrollHeight", "classes", "changes", "target", "idProvided", "conditionDescribedby", "__decorateClass"]
|
|
7
7
|
}
|
package/src/DialogBase.d.ts
CHANGED
|
@@ -23,7 +23,8 @@ export declare class DialogBase extends DialogBase_base {
|
|
|
23
23
|
private resolveTransitionPromise;
|
|
24
24
|
underlay: boolean;
|
|
25
25
|
protected get dialog(): Dialog;
|
|
26
|
-
focus(): void
|
|
26
|
+
focus(): Promise<void>;
|
|
27
|
+
private animating;
|
|
27
28
|
overlayWillCloseCallback(): boolean;
|
|
28
29
|
private dismiss;
|
|
29
30
|
protected handleClose(event: Event): void;
|
package/src/DialogBase.dev.js
CHANGED
|
@@ -33,6 +33,7 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
|
|
|
33
33
|
return;
|
|
34
34
|
};
|
|
35
35
|
this.underlay = false;
|
|
36
|
+
this.animating = false;
|
|
36
37
|
}
|
|
37
38
|
static get styles() {
|
|
38
39
|
return [modalWrapperStyles, modalStyles];
|
|
@@ -50,17 +51,14 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
|
|
|
50
51
|
}
|
|
51
52
|
return dialog || this;
|
|
52
53
|
}
|
|
53
|
-
focus() {
|
|
54
|
+
async focus() {
|
|
54
55
|
if (this.shadowRoot) {
|
|
55
56
|
const firstFocusable = firstFocusableIn(this.dialog);
|
|
56
57
|
if (firstFocusable) {
|
|
57
58
|
if (firstFocusable.updateComplete) {
|
|
58
|
-
firstFocusable.updateComplete
|
|
59
|
-
() => firstFocusable.focus()
|
|
60
|
-
);
|
|
61
|
-
} else {
|
|
62
|
-
firstFocusable.focus();
|
|
59
|
+
await firstFocusable.updateComplete;
|
|
63
60
|
}
|
|
61
|
+
firstFocusable.focus();
|
|
64
62
|
this.removeAttribute("tabindex");
|
|
65
63
|
} else {
|
|
66
64
|
this.dialog.focus();
|
|
@@ -71,7 +69,7 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
|
|
|
71
69
|
}
|
|
72
70
|
overlayWillCloseCallback() {
|
|
73
71
|
if (!this.open)
|
|
74
|
-
return
|
|
72
|
+
return this.animating;
|
|
75
73
|
this.close();
|
|
76
74
|
return true;
|
|
77
75
|
}
|
|
@@ -97,8 +95,8 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
|
|
|
97
95
|
}
|
|
98
96
|
handleUnderlayTransitionend(event) {
|
|
99
97
|
if (!this.open && event.propertyName === "visibility") {
|
|
100
|
-
this.dispatchClosed();
|
|
101
98
|
this.resolveTransitionPromise();
|
|
99
|
+
this.dispatchClosed();
|
|
102
100
|
}
|
|
103
101
|
}
|
|
104
102
|
handleModalTransitionend() {
|
|
@@ -111,9 +109,13 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
|
|
|
111
109
|
}
|
|
112
110
|
update(changes) {
|
|
113
111
|
if (changes.has("open") && changes.get("open") !== void 0) {
|
|
114
|
-
this.
|
|
115
|
-
|
|
116
|
-
|
|
112
|
+
this.animating = true;
|
|
113
|
+
this.transitionPromise = new Promise((res) => {
|
|
114
|
+
this.resolveTransitionPromise = () => {
|
|
115
|
+
this.animating = false;
|
|
116
|
+
res();
|
|
117
|
+
};
|
|
118
|
+
});
|
|
117
119
|
}
|
|
118
120
|
super.update(changes);
|
|
119
121
|
}
|
|
@@ -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 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\nimport '../sp-dialog.dev.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 focus(): void {\n if (this.shadowRoot) {\n const firstFocusable = firstFocusableIn(this.dialog);\n if (firstFocusable) {\n if (firstFocusable.updateComplete) {\n firstFocusable.updateComplete
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO;AACP,OAAO;AAEP,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;AAAA;AAAA,
|
|
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 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\nimport '../sp-dialog.dev.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 this.removeAttribute('tabindex');\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 protected handleUnderlayTransitionend(event: TransitionEvent): void {\n if (!this.open && event.propertyName === 'visibility') {\n this.resolveTransitionPromise();\n this.dispatchClosed();\n }\n }\n\n protected handleModalTransitionend(): void {\n if (this.open || !this.underlay) {\n this.resolveTransitionPromise();\n if (!this.open) {\n this.dispatchClosed();\n }\n }\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 }\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 @click=${this.dismiss}\n @transitionend=${this.handleUnderlayTransitionend}\n ></sp-underlay>\n `\n : html``}\n <div\n class=\"modal ${this.mode}\"\n @transitionend=${this.handleModalTransitionend}\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 } else {\n this.tabIndex = 0;\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 u=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var o=(a,s,e,i)=>{for(var t=i>1?void 0:i?u(s,e):s,n=a.length-1,d;n>=0;n--)(d=a[n])&&(t=(i?d(s,e,t):d(t))||t);return i&&t&&p(s,e,t),t};import{html as l,SpectrumElement as c}from"@spectrum-web-components/base";import{property as r}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"../sp-dialog.js";import m from"@spectrum-web-components/modal/src/modal-wrapper.css.js";import h from"@spectrum-web-components/modal/src/modal.css.js";import{FocusVisiblePolyfillMixin as f}from"@spectrum-web-components/shared";import{firstFocusableIn as v}from"@spectrum-web-components/shared/src/first-focusable-in.js";export class DialogBase extends f(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,h]}get dialog(){return this.shadowRoot.querySelector("slot").assignedElements()[0]||this}async focus(){if(this.shadowRoot){const e=v(this.dialog);e?(e.updateComplete&&await e.updateComplete,e.focus(),this.removeAttribute("tabindex")):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}))}handleUnderlayTransitionend(e){!this.open&&e.propertyName==="visibility"&&(this.resolveTransitionPromise(),this.dispatchClosed())}handleModalTransitionend(){(this.open||!this.underlay)&&(this.resolveTransitionPromise(),this.open||this.dispatchClosed())}update(e){e.has("open")&&e.get("open")!==void 0&&(this.animating=!0,this.transitionPromise=new Promise(i=>{this.resolveTransitionPromise=()=>{this.animating=!1,i()}})),super.update(e)}renderDialog(){return l`
|
|
2
2
|
<slot></slot>
|
|
3
3
|
`}render(){return l`
|
|
4
4
|
${this.underlay?l`
|
|
@@ -15,5 +15,5 @@
|
|
|
15
15
|
>
|
|
16
16
|
${this.renderDialog()}
|
|
17
17
|
</div>
|
|
18
|
-
`}updated(e){e.has("open")&&(this.open?"updateComplete"in this.dialog&&"shouldManageTabOrderForScrolling"in this.dialog&&this.dialog.updateComplete.then(()=>{this.dialog.shouldManageTabOrderForScrolling()}):this.tabIndex=0)}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.transitionPromise,e}}
|
|
18
|
+
`}updated(e){e.has("open")&&(this.open?"updateComplete"in this.dialog&&"shouldManageTabOrderForScrolling"in this.dialog&&this.dialog.updateComplete.then(()=>{this.dialog.shouldManageTabOrderForScrolling()}):this.tabIndex=0)}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.transitionPromise,e}}o([r({type:Boolean,reflect:!0})],DialogBase.prototype,"dismissable",2),o([r({type:Boolean,reflect:!0})],DialogBase.prototype,"open",2),o([r({type:String,reflect:!0})],DialogBase.prototype,"mode",2),o([r({type:Boolean})],DialogBase.prototype,"responsive",2),o([r({type:Boolean})],DialogBase.prototype,"underlay",2);
|
|
19
19
|
//# 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 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\nimport '../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 focus(): void {\n if (this.shadowRoot) {\n const firstFocusable = firstFocusableIn(this.dialog);\n if (firstFocusable) {\n if (firstFocusable.updateComplete) {\n firstFocusable.updateComplete
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,MAAO,mDACP,MAAO,+CAEP,MAAO,kBACP,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,
|
|
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 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\nimport '../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 this.removeAttribute('tabindex');\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 protected handleUnderlayTransitionend(event: TransitionEvent): void {\n if (!this.open && event.propertyName === 'visibility') {\n this.resolveTransitionPromise();\n this.dispatchClosed();\n }\n }\n\n protected handleModalTransitionend(): void {\n if (this.open || !this.underlay) {\n this.resolveTransitionPromise();\n if (!this.open) {\n this.dispatchClosed();\n }\n }\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 }\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 @click=${this.dismiss}\n @transitionend=${this.handleUnderlayTransitionend}\n ></sp-underlay>\n `\n : html``}\n <div\n class=\"modal ${this.mode}\"\n @transitionend=${this.handleModalTransitionend}\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 } else {\n this.tabIndex = 0;\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": ["html", "SpectrumElement", "property", "modalWrapperStyles", "modalStyles", "FocusVisiblePolyfillMixin", "firstFocusableIn", "firstFocusable", "event", "changes", "res", "complete", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["dialog-base.test-vrt.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 * as stories from '../stories/dialog-base.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('DialogBaseStories', stories);\n"],
|
|
5
|
-
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;
|
|
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 * as stories from '../stories/dialog-base.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('DialogBaseStories', stories as unknown as TestsType);\n"],
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,qBAAqB,OAA+B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/dialog-base.test.js
CHANGED
|
@@ -12,7 +12,6 @@ import "@spectrum-web-components/theme/src/themes.js";
|
|
|
12
12
|
import "@spectrum-web-components/dialog/sp-dialog-base.js";
|
|
13
13
|
import "@spectrum-web-components/overlay/overlay-trigger.js";
|
|
14
14
|
import { alertDestructive } from "../stories/dialog.stories.js";
|
|
15
|
-
import { sendMouse } from "../../../test/plugins/browser.js";
|
|
16
15
|
async function styledFixture(story) {
|
|
17
16
|
const test = await fixture(html`
|
|
18
17
|
<sp-theme theme="spectrum" scale="medium" color="dark">
|
|
@@ -28,16 +27,6 @@ const overlayTrigger = (story) => html`
|
|
|
28
27
|
</overlay-trigger>
|
|
29
28
|
`;
|
|
30
29
|
describe("dialog base", () => {
|
|
31
|
-
beforeEach(async () => {
|
|
32
|
-
await sendMouse({
|
|
33
|
-
steps: [
|
|
34
|
-
{
|
|
35
|
-
type: "move",
|
|
36
|
-
position: [0, 0]
|
|
37
|
-
}
|
|
38
|
-
]
|
|
39
|
-
});
|
|
40
|
-
});
|
|
41
30
|
it("does not close by default with interacting with buttons", async () => {
|
|
42
31
|
var _a, _b, _c, _d, _e;
|
|
43
32
|
const el = await styledFixture(
|
|
@@ -85,9 +74,6 @@ describe("dialog base", () => {
|
|
|
85
74
|
});
|
|
86
75
|
it("does not close by default with interacting with buttons when recycled", async () => {
|
|
87
76
|
var _a, _b, _c, _d;
|
|
88
|
-
if (/Firefox/.test(window.navigator.userAgent)) {
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
77
|
const el = await styledFixture(
|
|
92
78
|
overlayTrigger(
|
|
93
79
|
() => html`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["dialog-base.test.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 {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/dialog/sp-dialog-base.js';\nimport { Theme } from '@spectrum-web-components/theme';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { alertDestructive } from '../stories/dialog.stories.js';\nimport { Button } from '@spectrum-web-components/button/src/Button.js';\nimport { DialogBase } from '@spectrum-web-components/dialog';\
|
|
5
|
-
"mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAGP,OAAO;AACP,OAAO;AACP,OAAO;AAGP,OAAO;AACP,SAAS,wBAAwB;
|
|
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 {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/dialog/sp-dialog-base.js';\nimport { Theme } from '@spectrum-web-components/theme';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { alertDestructive } from '../stories/dialog.stories.js';\nimport { Button } from '@spectrum-web-components/button/src/Button.js';\nimport { DialogBase } from '@spectrum-web-components/dialog';\n\nasync function styledFixture<T extends Element>(\n story: TemplateResult\n): Promise<T> {\n const test = await fixture<Theme>(html`\n <sp-theme theme=\"spectrum\" scale=\"medium\" color=\"dark\">\n ${story}\n </sp-theme>\n `);\n return test.children[0] as T;\n}\n\nconst overlayTrigger = (story: () => TemplateResult): TemplateResult => html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\" variant=\"primary\">Toggle Dialog</sp-button>\n ${story()}\n </overlay-trigger>\n`;\n\ndescribe('dialog base', () => {\n it('does not close by default with interacting with buttons', async () => {\n const el = await styledFixture<OverlayTrigger>(\n overlayTrigger(\n () => html`\n <sp-dialog-base underlay slot=\"click-content\">\n ${alertDestructive()}\n </sp-dialog-base>\n `\n )\n );\n await elementUpdated(el);\n\n const dialog = el.querySelector('sp-dialog-base') as DialogBase;\n await elementUpdated(dialog);\n const secondaryButton = el.querySelector(\n '[variant=\"secondary\"]'\n ) as Button;\n const negativeButton = el.querySelector(\n '[variant=\"negative\"]'\n ) as Button;\n\n expect(el.open).to.be.undefined;\n expect(dialog.open).to.be.false;\n expect(dialog.parentElement?.localName).to.equal('overlay-trigger');\n await nextFrame();\n const opened = oneEvent(el, 'sp-opened');\n el.open = 'click';\n await opened;\n await nextFrame();\n\n expect(dialog.open).to.be.true;\n expect(el.open).to.be.equal('click');\n expect(dialog.parentElement?.localName).to.equal('active-overlay');\n\n secondaryButton.click();\n\n expect(el.open).to.be.equal('click');\n expect(dialog.parentElement?.localName).to.equal('active-overlay');\n\n negativeButton.click();\n\n expect(el.open).to.be.equal('click');\n expect(dialog.parentElement?.localName).to.equal('active-overlay');\n const closed = oneEvent(el, 'sp-closed');\n el.open = undefined;\n await closed;\n await elementUpdated(el);\n\n expect(dialog.open).to.be.false;\n expect(el.open).to.be.undefined;\n expect(dialog.parentElement?.localName).to.equal('overlay-trigger');\n });\n it('does not close by default with interacting with buttons when recycled', async () => {\n const el = await styledFixture<OverlayTrigger>(\n overlayTrigger(\n () => html`\n <sp-dialog-base underlay slot=\"click-content\">\n ${alertDestructive()}\n </sp-dialog-base>\n `\n )\n );\n await elementUpdated(el);\n\n const dialog = el.querySelector('sp-dialog-base') as DialogBase;\n await elementUpdated(dialog);\n const secondaryButton = el.querySelector(\n '[variant=\"secondary\"]'\n ) as Button;\n const negativeButton = el.querySelector(\n '[variant=\"negative\"]'\n ) as Button;\n\n expect(el.open).to.be.undefined;\n expect(dialog.open).to.be.false;\n expect(dialog.parentElement?.localName).to.equal('overlay-trigger');\n await nextFrame();\n const opened = oneEvent(el, 'sp-opened');\n el.open = 'click';\n await opened;\n await nextFrame();\n\n expect(dialog.open).to.be.true;\n expect(el.open).to.be.equal('click');\n expect(dialog.parentElement?.localName).to.equal('active-overlay');\n\n secondaryButton.click();\n\n expect(el.open).to.be.equal('click');\n expect(dialog.parentElement?.localName).to.equal('active-overlay');\n\n negativeButton.click();\n\n expect(el.open).to.be.equal('click');\n expect(dialog.parentElement?.localName).to.equal('active-overlay');\n const closed = oneEvent(el, 'sp-closed');\n dialog.open = false;\n await closed;\n await elementUpdated(el);\n\n expect(dialog.open).to.be.false;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["dialog-wrapper.test-vrt.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 * as stories from '../stories/dialog-wrapper.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('DialogWrapperStories', stories);\n"],
|
|
5
|
-
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;
|
|
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 * as stories from '../stories/dialog-wrapper.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('DialogWrapperStories', stories as unknown as TestsType);\n"],
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,wBAAwB,OAA+B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -72,7 +72,7 @@ describe("Dialog Wrapper", () => {
|
|
|
72
72
|
expect(el.open).to.be.false;
|
|
73
73
|
expect(closeSpy.callCount).to.equal(1);
|
|
74
74
|
});
|
|
75
|
-
|
|
75
|
+
it("opens and closes when element is recycled", async () => {
|
|
76
76
|
const closeSpy = spy();
|
|
77
77
|
const test = await styledFixture(longContent());
|
|
78
78
|
const el = test.querySelector("sp-dialog-wrapper");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["dialog-wrapper.test.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 elementUpdated,\n expect,\n fixture,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { spy } from 'sinon';\n\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport { Dialog, DialogWrapper } from '@spectrum-web-components/dialog';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport { Button } from '@spectrum-web-components/button';\nimport { Underlay } from '@spectrum-web-components/underlay';\nimport {\n longContent,\n wrapperButtons,\n wrapperButtonsUnderlay,\n wrapperDismissable,\n wrapperDismissableUnderlayError,\n wrapperFullscreen,\n wrapperLabeledHero,\n} from '../stories/dialog-wrapper.stories.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { Theme } from '@spectrum-web-components/theme';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nasync function styledFixture<T extends Element>(\n story: TemplateResult\n): Promise<T> {\n const test = await fixture<Theme>(html`\n <sp-theme theme=\"classic\" scale=\"medium\" color=\"dark\">\n ${story}\n </sp-theme>\n `);\n return test.children[0] as T;\n}\n\ndescribe('Dialog Wrapper', () => {\n testForLitDevWarnings(\n async () => await styledFixture<DialogWrapper>(wrapperDismissable())\n );\n it('loads wrapped dialog accessibly', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperDismissable());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads labeled hero dialog accessibly', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperLabeledHero());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads fullscreen wrapped dialog accessibly', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperFullscreen());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n xit('loads with underlay and no headline accessibly', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperButtonsUnderlay());\n await elementUpdated(el);\n el.headline = '';\n await elementUpdated(el);\n await expect(el).to.be.accessible();\n });\n it('opens and closes', async () => {\n const closeSpy = spy();\n const test = await styledFixture<OverlayTrigger>(longContent());\n const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper;\n el.addEventListener('close', () => closeSpy());\n\n await elementUpdated(el);\n\n const opened = oneEvent(test, 'sp-opened');\n test.open = 'click';\n await opened;\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(test, 'sp-closed');\n test.open = undefined;\n await closed;\n await nextFrame();\n\n expect(el.open).to.be.false;\n expect(closeSpy.callCount).to.equal(1);\n });\n xit('opens and closes when element is recycled', async () => {\n // Skip while there is an `sp-dialog-base` recyling issue in Chromium and Firefox,\n // this test passes outside of the testing context and in Safari...\n const closeSpy = spy();\n const test = await styledFixture<OverlayTrigger>(longContent());\n const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper;\n el.addEventListener('close', () => closeSpy());\n\n await elementUpdated(el);\n\n const opened = oneEvent(test, 'sp-opened');\n test.open = 'click';\n await opened;\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(test, 'sp-closed');\n test.open = undefined;\n await closed;\n await nextFrame();\n\n expect(el.open).to.be.false;\n expect(closeSpy.callCount).to.equal(1);\n });\n it('dismisses via clicking the underlay when [dismissable]', async () => {\n const test = await styledFixture<DialogWrapper>(\n wrapperDismissableUnderlayError()\n );\n const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper;\n await elementUpdated(el);\n expect(el.open).to.be.true;\n el.dismissable = true;\n const underlay = el.shadowRoot.querySelector('sp-underlay') as Underlay;\n underlay.click();\n await elementUpdated(el);\n expect(el.open).to.be.false;\n });\n it('does not dismiss via clicking the underlay :not([dismissable])', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperButtonsUnderlay());\n await elementUpdated(el);\n expect(el.open).to.be.true;\n const underlay = el.shadowRoot.querySelector('sp-underlay') as Underlay;\n underlay.click();\n await elementUpdated(el);\n expect(el.open).to.be.true;\n });\n it('dismisses', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperDismissable());\n\n await elementUpdated(el);\n expect(el.open).to.be.true;\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const dialog = root.querySelector('sp-dialog') as Dialog;\n const dialogRoot = dialog.shadowRoot ? dialog.shadowRoot : dialog;\n const dismissButton = dialogRoot.querySelector(\n '.close-button'\n ) as HTMLButtonElement;\n dismissButton.click();\n\n await elementUpdated(el);\n expect(el.open).to.be.false;\n });\n it('manages entry focus - dismissable', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperDismissable());\n\n await elementUpdated(el);\n expect(el.open).to.be.true;\n expect(document.activeElement !== el, 'no focused').to.be.true;\n\n const dialog = el.shadowRoot.querySelector('sp-dialog') as Dialog;\n const dialogRoot = dialog.shadowRoot ? dialog.shadowRoot : dialog;\n const dismissButton = dialogRoot.querySelector(\n '.close-button'\n ) as ActionButton;\n\n el.focus();\n await elementUpdated(el);\n expect(\n document.activeElement === el,\n `focused generally, ${document.activeElement}`\n ).to.be.true;\n expect(\n (dismissButton.getRootNode() as Document).activeElement !==\n dismissButton,\n `does not focus specifically, ${\n (dismissButton.getRootNode() as Document).activeElement\n }`\n ).to.be.true;\n\n dismissButton.click();\n await elementUpdated(el);\n expect(el.open).to.be.false;\n });\n it('manages entry focus - buttons', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperButtons());\n\n await elementUpdated(el);\n expect(el.open).to.be.true;\n expect(document.activeElement !== el, 'no focused').to.be.true;\n\n const button = el.shadowRoot.querySelector('sp-button') as Button;\n\n el.focus();\n await elementUpdated(el);\n expect(\n document.activeElement === el,\n `focused generally, ${document.activeElement}`\n ).to.be.true;\n expect(\n (button.getRootNode() as Document).activeElement === button,\n `focused specifically, ${\n (button.getRootNode() as Document).activeElement?.outerHTML\n }`\n ).to.be.true;\n });\n it('dispatches `confirm`, `cancel` and `secondary`', async () => {\n const confirmSpy = spy();\n const cancelSpy = spy();\n const secondarySpy = spy();\n const handleConfirm = (): void => confirmSpy();\n const handleCancel = (): void => cancelSpy();\n const handleSecondary = (): void => secondarySpy();\n const el = await styledFixture<DialogWrapper>(wrapperButtons());\n el.addEventListener('confirm', handleConfirm);\n el.addEventListener('cancel', handleCancel);\n el.addEventListener('secondary', handleSecondary);\n\n await elementUpdated(el);\n expect(confirmSpy.called).to.be.false;\n expect(cancelSpy.called).to.be.false;\n expect(secondarySpy.called).to.be.false;\n\n const accentButton = el.shadowRoot.querySelector(\n '[variant=\"accent\"]'\n ) as Button;\n const primaryButton = el.shadowRoot.querySelector(\n '[variant=\"primary\"]'\n ) as Button;\n const secondaryButton = el.shadowRoot.querySelector(\n '[variant=\"secondary\"]'\n ) as Button;\n\n accentButton.click();\n\n await elementUpdated(el);\n expect(confirmSpy.called, 'dispatched `confirm`').to.be.true;\n expect(secondarySpy.called).to.be.false;\n expect(cancelSpy.called).to.be.false;\n\n primaryButton.click();\n\n await elementUpdated(el);\n expect(confirmSpy.callCount).to.equal(1);\n expect(secondarySpy.called, 'dispatched `cancel`').to.be.true;\n expect(cancelSpy.called).to.be.false;\n\n secondaryButton.click();\n\n await elementUpdated(el);\n expect(confirmSpy.callCount).to.equal(1);\n expect(secondarySpy.callCount).to.equal(1);\n expect(cancelSpy.called, 'dispatched `secondary`').to.be.true;\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,WAAW;AAEpB,OAAO;AACP,OAAO;AACP,OAAO;AAKP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,SAAS,YAA4B;AAErC,SAAS,6BAA6B;AAEtC,eAAe,cACX,OACU;AACV,QAAM,OAAO,MAAM,QAAe;AAAA;AAAA,cAExB;AAAA;AAAA,KAET;AACD,SAAO,KAAK,SAAS;AACzB;AAEA,SAAS,kBAAkB,MAAM;AAC7B;AAAA,IACI,YAAY,MAAM,cAA6B,mBAAmB,CAAC;AAAA,EACvE;AACA,KAAG,mCAAmC,YAAY;AAC9C,UAAM,KAAK,MAAM,cAA6B,mBAAmB,CAAC;AAElE,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,wCAAwC,YAAY;AACnD,UAAM,KAAK,MAAM,cAA6B,mBAAmB,CAAC;AAElE,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,8CAA8C,YAAY;AACzD,UAAM,KAAK,MAAM,cAA6B,kBAAkB,CAAC;AAEjE,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,MAAI,kDAAkD,YAAY;AAC9D,UAAM,KAAK,MAAM,cAA6B,uBAAuB,CAAC;AACtE,UAAM,eAAe,EAAE;AACvB,OAAG,WAAW;AACd,UAAM,eAAe,EAAE;AACvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,oBAAoB,YAAY;AAC/B,UAAM,WAAW,IAAI;AACrB,UAAM,OAAO,MAAM,cAA8B,YAAY,CAAC;AAC9D,UAAM,KAAK,KAAK,cAAc,mBAAmB;AACjD,OAAG,iBAAiB,SAAS,MAAM,SAAS,CAAC;AAE7C,UAAM,eAAe,EAAE;AAEvB,UAAM,SAAS,SAAS,MAAM,WAAW;AACzC,SAAK,OAAO;AACZ,UAAM;AAEN,WAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AAEtB,UAAM,SAAS,SAAS,MAAM,WAAW;AACzC,SAAK,OAAO;AACZ,UAAM;AACN,UAAM,UAAU;AAEhB,WAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AACtB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AAAA,EACzC,CAAC;AACD,
|
|
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 elementUpdated,\n expect,\n fixture,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { spy } from 'sinon';\n\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport { Dialog, DialogWrapper } from '@spectrum-web-components/dialog';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport { Button } from '@spectrum-web-components/button';\nimport { Underlay } from '@spectrum-web-components/underlay';\nimport {\n longContent,\n wrapperButtons,\n wrapperButtonsUnderlay,\n wrapperDismissable,\n wrapperDismissableUnderlayError,\n wrapperFullscreen,\n wrapperLabeledHero,\n} from '../stories/dialog-wrapper.stories.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { Theme } from '@spectrum-web-components/theme';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nasync function styledFixture<T extends Element>(\n story: TemplateResult\n): Promise<T> {\n const test = await fixture<Theme>(html`\n <sp-theme theme=\"classic\" scale=\"medium\" color=\"dark\">\n ${story}\n </sp-theme>\n `);\n return test.children[0] as T;\n}\n\ndescribe('Dialog Wrapper', () => {\n testForLitDevWarnings(\n async () => await styledFixture<DialogWrapper>(wrapperDismissable())\n );\n it('loads wrapped dialog accessibly', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperDismissable());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads labeled hero dialog accessibly', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperLabeledHero());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads fullscreen wrapped dialog accessibly', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperFullscreen());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n xit('loads with underlay and no headline accessibly', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperButtonsUnderlay());\n await elementUpdated(el);\n el.headline = '';\n await elementUpdated(el);\n await expect(el).to.be.accessible();\n });\n it('opens and closes', async () => {\n const closeSpy = spy();\n const test = await styledFixture<OverlayTrigger>(longContent());\n const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper;\n el.addEventListener('close', () => closeSpy());\n\n await elementUpdated(el);\n\n const opened = oneEvent(test, 'sp-opened');\n test.open = 'click';\n await opened;\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(test, 'sp-closed');\n test.open = undefined;\n await closed;\n await nextFrame();\n\n expect(el.open).to.be.false;\n expect(closeSpy.callCount).to.equal(1);\n });\n it('opens and closes when element is recycled', async () => {\n const closeSpy = spy();\n const test = await styledFixture<OverlayTrigger>(longContent());\n const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper;\n el.addEventListener('close', () => closeSpy());\n\n await elementUpdated(el);\n\n const opened = oneEvent(test, 'sp-opened');\n test.open = 'click';\n await opened;\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(test, 'sp-closed');\n test.open = undefined;\n await closed;\n await nextFrame();\n\n expect(el.open).to.be.false;\n expect(closeSpy.callCount).to.equal(1);\n });\n it('dismisses via clicking the underlay when [dismissable]', async () => {\n const test = await styledFixture<DialogWrapper>(\n wrapperDismissableUnderlayError()\n );\n const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper;\n await elementUpdated(el);\n expect(el.open).to.be.true;\n el.dismissable = true;\n const underlay = el.shadowRoot.querySelector('sp-underlay') as Underlay;\n underlay.click();\n await elementUpdated(el);\n expect(el.open).to.be.false;\n });\n it('does not dismiss via clicking the underlay :not([dismissable])', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperButtonsUnderlay());\n await elementUpdated(el);\n expect(el.open).to.be.true;\n const underlay = el.shadowRoot.querySelector('sp-underlay') as Underlay;\n underlay.click();\n await elementUpdated(el);\n expect(el.open).to.be.true;\n });\n it('dismisses', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperDismissable());\n\n await elementUpdated(el);\n expect(el.open).to.be.true;\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const dialog = root.querySelector('sp-dialog') as Dialog;\n const dialogRoot = dialog.shadowRoot ? dialog.shadowRoot : dialog;\n const dismissButton = dialogRoot.querySelector(\n '.close-button'\n ) as HTMLButtonElement;\n dismissButton.click();\n\n await elementUpdated(el);\n expect(el.open).to.be.false;\n });\n it('manages entry focus - dismissable', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperDismissable());\n\n await elementUpdated(el);\n expect(el.open).to.be.true;\n expect(document.activeElement !== el, 'no focused').to.be.true;\n\n const dialog = el.shadowRoot.querySelector('sp-dialog') as Dialog;\n const dialogRoot = dialog.shadowRoot ? dialog.shadowRoot : dialog;\n const dismissButton = dialogRoot.querySelector(\n '.close-button'\n ) as ActionButton;\n\n el.focus();\n await elementUpdated(el);\n expect(\n document.activeElement === el,\n `focused generally, ${document.activeElement}`\n ).to.be.true;\n expect(\n (dismissButton.getRootNode() as Document).activeElement !==\n dismissButton,\n `does not focus specifically, ${\n (dismissButton.getRootNode() as Document).activeElement\n }`\n ).to.be.true;\n\n dismissButton.click();\n await elementUpdated(el);\n expect(el.open).to.be.false;\n });\n it('manages entry focus - buttons', async () => {\n const el = await styledFixture<DialogWrapper>(wrapperButtons());\n\n await elementUpdated(el);\n expect(el.open).to.be.true;\n expect(document.activeElement !== el, 'no focused').to.be.true;\n\n const button = el.shadowRoot.querySelector('sp-button') as Button;\n\n el.focus();\n await elementUpdated(el);\n expect(\n document.activeElement === el,\n `focused generally, ${document.activeElement}`\n ).to.be.true;\n expect(\n (button.getRootNode() as Document).activeElement === button,\n `focused specifically, ${\n (button.getRootNode() as Document).activeElement?.outerHTML\n }`\n ).to.be.true;\n });\n it('dispatches `confirm`, `cancel` and `secondary`', async () => {\n const confirmSpy = spy();\n const cancelSpy = spy();\n const secondarySpy = spy();\n const handleConfirm = (): void => confirmSpy();\n const handleCancel = (): void => cancelSpy();\n const handleSecondary = (): void => secondarySpy();\n const el = await styledFixture<DialogWrapper>(wrapperButtons());\n el.addEventListener('confirm', handleConfirm);\n el.addEventListener('cancel', handleCancel);\n el.addEventListener('secondary', handleSecondary);\n\n await elementUpdated(el);\n expect(confirmSpy.called).to.be.false;\n expect(cancelSpy.called).to.be.false;\n expect(secondarySpy.called).to.be.false;\n\n const accentButton = el.shadowRoot.querySelector(\n '[variant=\"accent\"]'\n ) as Button;\n const primaryButton = el.shadowRoot.querySelector(\n '[variant=\"primary\"]'\n ) as Button;\n const secondaryButton = el.shadowRoot.querySelector(\n '[variant=\"secondary\"]'\n ) as Button;\n\n accentButton.click();\n\n await elementUpdated(el);\n expect(confirmSpy.called, 'dispatched `confirm`').to.be.true;\n expect(secondarySpy.called).to.be.false;\n expect(cancelSpy.called).to.be.false;\n\n primaryButton.click();\n\n await elementUpdated(el);\n expect(confirmSpy.callCount).to.equal(1);\n expect(secondarySpy.called, 'dispatched `cancel`').to.be.true;\n expect(cancelSpy.called).to.be.false;\n\n secondaryButton.click();\n\n await elementUpdated(el);\n expect(confirmSpy.callCount).to.equal(1);\n expect(secondarySpy.callCount).to.equal(1);\n expect(cancelSpy.called, 'dispatched `secondary`').to.be.true;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["dialog.test-vrt.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 * as stories from '../stories/dialog.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('DialogStories', stories);\n"],
|
|
5
|
-
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;
|
|
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 * as stories from '../stories/dialog.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('DialogStories', stories as unknown as TestsType);\n"],
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,iBAAiB,OAA+B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/dialog.test.js
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
elementUpdated,
|
|
4
|
+
expect,
|
|
5
|
+
fixture,
|
|
6
|
+
html,
|
|
7
|
+
nextFrame
|
|
8
|
+
} from "@open-wc/testing";
|
|
3
9
|
import "@spectrum-web-components/dialog/sp-dialog.js";
|
|
4
10
|
import { Dialog } from "@spectrum-web-components/dialog";
|
|
5
11
|
import {
|
|
@@ -37,6 +43,23 @@ describe("Dialog", () => {
|
|
|
37
43
|
await elementUpdated(el);
|
|
38
44
|
await expect(el).to.be.accessible();
|
|
39
45
|
});
|
|
46
|
+
it("does not recycle applied content ids", async () => {
|
|
47
|
+
const el = await fixture(html`
|
|
48
|
+
<sp-dialog size="s">
|
|
49
|
+
<h2 slot="heading">Disclaimer</h2>
|
|
50
|
+
<p>Initial paragraph.</p>
|
|
51
|
+
</sp-dialog>
|
|
52
|
+
`);
|
|
53
|
+
await elementUpdated(el);
|
|
54
|
+
await expect(el).to.be.accessible();
|
|
55
|
+
const paragraph = document.createElement("p");
|
|
56
|
+
paragraph.textContent = "Added paragraph.";
|
|
57
|
+
const target = el.querySelector("p");
|
|
58
|
+
target.insertAdjacentElement("beforebegin", paragraph);
|
|
59
|
+
await nextFrame();
|
|
60
|
+
await elementUpdated(el);
|
|
61
|
+
await expect(el).to.be.accessible();
|
|
62
|
+
});
|
|
40
63
|
it("closes", async () => {
|
|
41
64
|
const closeSpy = spy();
|
|
42
65
|
const el = await fixture(dismissable());
|
package/test/dialog.test.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["dialog.test.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 {
|
|
5
|
-
"mappings": ";AAYA,
|
|
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 elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n} from '@open-wc/testing';\nimport { TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport { Dialog } from '@spectrum-web-components/dialog';\nimport {\n alertError,\n dismissable,\n fullscreen,\n small,\n} from '../stories/dialog.stories.js';\nimport { spy } from 'sinon';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('Dialog', () => {\n testForLitDevWarnings(async () => await fixture<Dialog>(small()));\n it('loads `[size=small]` dialog accessibly', async () => {\n const el = await fixture<Dialog>(small());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads `[size=alert]` dialog accessibly', async () => {\n const el = await fixture<Dialog>(alertError());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads `[dismissable]` dialog accessibly', async () => {\n const el = await fixture<Dialog>(dismissable());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads `[mode=fullscreen]` dialog accessibly', async () => {\n const el = await fixture<Dialog>(fullscreen());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads dialog without footer accessibly', async () => {\n const el = await fixture<Dialog>(small());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('does not recycle applied content ids', async () => {\n const el = await fixture<Dialog>(html`\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">Disclaimer</h2>\n <p>Initial paragraph.</p>\n </sp-dialog>\n `);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n const paragraph = document.createElement('p');\n paragraph.textContent = 'Added paragraph.';\n\n const target = el.querySelector('p') as HTMLParagraphElement;\n target.insertAdjacentElement('beforebegin', paragraph);\n\n // Slotchange time exists outside of the standard update lifecycle\n await nextFrame();\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('closes', async () => {\n const closeSpy = spy();\n const el = await fixture<Dialog>(dismissable());\n el.addEventListener('close', () => closeSpy());\n await elementUpdated(el);\n\n const closeButton = (\n el.shadowRoot\n ? el.shadowRoot.querySelector('.close-button')\n : el.querySelector('.close-button ')\n ) as HTMLElement;\n\n closeButton.click();\n\n await elementUpdated(el);\n expect(closeSpy.calledOnce).to.be.true;\n });\n it('allows hero override', async () => {\n class Override extends Dialog {\n protected override get hasHero(): boolean {\n return true;\n }\n protected override renderHero(): TemplateResult {\n return html`\n <div id=\"hero-container\"></div>\n `;\n }\n }\n\n customElements.define('hero-dialog', Override);\n\n const el = await fixture<Override>(\n html`\n <hero-dialog></hero-dialog>\n `\n );\n\n const container = el.shadowRoot.querySelector('#hero-container');\n expect(container).to.not.be.null;\n });\n it('allows heading override', async () => {\n class Override extends Dialog {\n protected override renderHeading(): TemplateResult {\n return html`\n <h2 id=\"heading-container\">Test</h2>\n `;\n }\n }\n\n customElements.define('heading-dialog', Override);\n\n const el = await fixture<Override>(\n html`\n <heading-dialog></heading-dialog>\n `\n );\n\n const container = el.shadowRoot.querySelector('#heading-container');\n expect(container).to.not.be.null;\n });\n it('allows content override', async () => {\n class Override extends Dialog {\n protected override renderContent(): TemplateResult {\n return html`\n <p id=\"content-container\">Test</p>\n `;\n }\n }\n\n customElements.define('content-dialog', Override);\n\n const el = await fixture<Override>(\n html`\n <content-dialog></content-dialog>\n `\n );\n\n const container = el.shadowRoot.querySelector('#content-container');\n expect(container).to.not.be.null;\n });\n it('allows footer override', async () => {\n class Override extends Dialog {\n protected override get hasFooter(): boolean {\n return true;\n }\n protected override renderFooter(): TemplateResult {\n return html`\n <p id=\"footer-container\">Test</p>\n `;\n }\n }\n\n customElements.define('footer-dialog', Override);\n\n const el = await fixture<Override>(\n html`\n <footer-dialog></footer-dialog>\n `\n );\n\n const container = el.shadowRoot.querySelector('#footer-container');\n expect(container).to.not.be.null;\n });\n it('allows button override', async () => {\n class Override extends Dialog {\n protected override get hasButtons(): boolean {\n return true;\n }\n protected override renderButtons(): TemplateResult {\n return html`\n <p id=\"button-container\">Test</p>\n `;\n }\n }\n\n customElements.define('button-dialog', Override);\n\n const el = await fixture<Override>(\n html`\n <button-dialog></button-dialog>\n `\n );\n\n const container = el.shadowRoot.querySelector('#button-container');\n expect(container).to.not.be.null;\n });\n it('allows dismiss override', async () => {\n class Override extends Dialog {\n protected override renderDismiss(): TemplateResult {\n return html`\n <p id=\"dismiss-container\">Test</p>\n `;\n }\n }\n\n customElements.define('dismiss-dialog', Override);\n\n const el = await fixture<Override>(\n html`\n <dismiss-dialog dismissable></dismiss-dialog>\n `\n );\n\n const container = el.shadowRoot.querySelector('#dismiss-container');\n expect(container).to.not.be.null;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|