@spectrum-web-components/dialog 0.32.0 → 0.32.1-overlay.41

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.
Files changed (19) hide show
  1. package/custom-elements.json +99 -29
  2. package/package.json +10 -10
  3. package/src/Dialog.dev.js +0 -1
  4. package/src/Dialog.dev.js.map +2 -2
  5. package/src/Dialog.js +2 -2
  6. package/src/Dialog.js.map +2 -2
  7. package/src/DialogBase.d.ts +2 -1
  8. package/src/DialogBase.dev.js +17 -8
  9. package/src/DialogBase.dev.js.map +2 -2
  10. package/src/DialogBase.js +7 -5
  11. package/src/DialogBase.js.map +2 -2
  12. package/stories/dialog-base.stories.js +31 -25
  13. package/stories/dialog-base.stories.js.map +2 -2
  14. package/stories/dialog-wrapper.stories.js +2 -2
  15. package/stories/dialog-wrapper.stories.js.map +2 -2
  16. package/test/dialog-base.test.js +9 -22
  17. package/test/dialog-base.test.js.map +2 -2
  18. package/test/dialog-wrapper.test.js +30 -42
  19. package/test/dialog-wrapper.test.js.map +2 -2
package/custom-elements.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "sp-dialog-base.js",
7
+ "path": "sp-dialog-base.ts",
8
8
  "declarations": [],
9
9
  "exports": [
10
10
  {
@@ -19,7 +19,7 @@
19
19
  },
20
20
  {
21
21
  "kind": "javascript-module",
22
- "path": "sp-dialog-wrapper.js",
22
+ "path": "sp-dialog-wrapper.ts",
23
23
  "declarations": [],
24
24
  "exports": [
25
25
  {
@@ -34,7 +34,7 @@
34
34
  },
35
35
  {
36
36
  "kind": "javascript-module",
37
- "path": "sp-dialog.js",
37
+ "path": "sp-dialog.ts",
38
38
  "declarations": [],
39
39
  "exports": [
40
40
  {
@@ -49,7 +49,7 @@
49
49
  },
50
50
  {
51
51
  "kind": "javascript-module",
52
- "path": "src/Dialog.js",
52
+ "path": "src/Dialog.ts",
53
53
  "declarations": [
54
54
  {
55
55
  "kind": "class",
@@ -395,14 +395,14 @@
395
395
  "name": "Dialog",
396
396
  "declaration": {
397
397
  "name": "Dialog",
398
- "module": "src/Dialog.js"
398
+ "module": "src/Dialog.ts"
399
399
  }
400
400
  }
401
401
  ]
402
402
  },
403
403
  {
404
404
  "kind": "javascript-module",
405
- "path": "src/DialogBase.js",
405
+ "path": "src/DialogBase.ts",
406
406
  "declarations": [
407
407
  {
408
408
  "kind": "class",
@@ -564,6 +564,24 @@
564
564
  }
565
565
  }
566
566
  },
567
+ {
568
+ "kind": "method",
569
+ "name": "handleTransitionEvent",
570
+ "privacy": "private",
571
+ "return": {
572
+ "type": {
573
+ "text": "void"
574
+ }
575
+ },
576
+ "parameters": [
577
+ {
578
+ "name": "event",
579
+ "type": {
580
+ "text": "TransitionEvent"
581
+ }
582
+ }
583
+ ]
584
+ },
567
585
  {
568
586
  "kind": "method",
569
587
  "name": "handleUnderlayTransitionend",
@@ -590,7 +608,15 @@
590
608
  "type": {
591
609
  "text": "void"
592
610
  }
593
- }
611
+ },
612
+ "parameters": [
613
+ {
614
+ "name": "event",
615
+ "type": {
616
+ "text": "TransitionEvent"
617
+ }
618
+ }
619
+ ]
594
620
  },
595
621
  {
596
622
  "kind": "method",
@@ -621,6 +647,11 @@
621
647
  "text": "Event"
622
648
  },
623
649
  "description": "Announces that the dialog has been closed."
650
+ },
651
+ {
652
+ "type": {
653
+ "text": "TransitionEvent"
654
+ }
624
655
  }
625
656
  ],
626
657
  "attributes": [
@@ -685,14 +716,14 @@
685
716
  "name": "DialogBase",
686
717
  "declaration": {
687
718
  "name": "DialogBase",
688
- "module": "src/DialogBase.js"
719
+ "module": "src/DialogBase.ts"
689
720
  }
690
721
  }
691
722
  ]
692
723
  },
693
724
  {
694
725
  "kind": "javascript-module",
695
- "path": "src/DialogWrapper.js",
726
+ "path": "src/DialogWrapper.ts",
696
727
  "declarations": [
697
728
  {
698
729
  "kind": "class",
@@ -826,7 +857,7 @@
826
857
  "readonly": true,
827
858
  "inheritedFrom": {
828
859
  "name": "DialogBase",
829
- "module": "src/DialogBase.js"
860
+ "module": "src/DialogBase.ts"
830
861
  }
831
862
  },
832
863
  {
@@ -870,7 +901,7 @@
870
901
  },
871
902
  "inheritedFrom": {
872
903
  "name": "DialogBase",
873
- "module": "src/DialogBase.js"
904
+ "module": "src/DialogBase.ts"
874
905
  }
875
906
  },
876
907
  {
@@ -885,7 +916,7 @@
885
916
  "reflects": true,
886
917
  "inheritedFrom": {
887
918
  "name": "DialogBase",
888
- "module": "src/DialogBase.js"
919
+ "module": "src/DialogBase.ts"
889
920
  }
890
921
  },
891
922
  {
@@ -900,7 +931,7 @@
900
931
  "reflects": true,
901
932
  "inheritedFrom": {
902
933
  "name": "DialogBase",
903
- "module": "src/DialogBase.js"
934
+ "module": "src/DialogBase.ts"
904
935
  }
905
936
  },
906
937
  {
@@ -914,7 +945,7 @@
914
945
  "reflects": true,
915
946
  "inheritedFrom": {
916
947
  "name": "DialogBase",
917
- "module": "src/DialogBase.js"
948
+ "module": "src/DialogBase.ts"
918
949
  }
919
950
  },
920
951
  {
@@ -929,7 +960,7 @@
929
960
  "attribute": "responsive",
930
961
  "inheritedFrom": {
931
962
  "name": "DialogBase",
932
- "module": "src/DialogBase.js"
963
+ "module": "src/DialogBase.ts"
933
964
  }
934
965
  },
935
966
  {
@@ -938,7 +969,7 @@
938
969
  "privacy": "private",
939
970
  "inheritedFrom": {
940
971
  "name": "DialogBase",
941
- "module": "src/DialogBase.js"
972
+ "module": "src/DialogBase.ts"
942
973
  }
943
974
  },
944
975
  {
@@ -947,7 +978,7 @@
947
978
  "privacy": "private",
948
979
  "inheritedFrom": {
949
980
  "name": "DialogBase",
950
- "module": "src/DialogBase.js"
981
+ "module": "src/DialogBase.ts"
951
982
  }
952
983
  },
953
984
  {
@@ -961,7 +992,7 @@
961
992
  "attribute": "underlay",
962
993
  "inheritedFrom": {
963
994
  "name": "DialogBase",
964
- "module": "src/DialogBase.js"
995
+ "module": "src/DialogBase.ts"
965
996
  }
966
997
  },
967
998
  {
@@ -975,7 +1006,7 @@
975
1006
  },
976
1007
  "inheritedFrom": {
977
1008
  "name": "DialogBase",
978
- "module": "src/DialogBase.js"
1009
+ "module": "src/DialogBase.ts"
979
1010
  }
980
1011
  },
981
1012
  {
@@ -988,7 +1019,7 @@
988
1019
  "default": "false",
989
1020
  "inheritedFrom": {
990
1021
  "name": "DialogBase",
991
- "module": "src/DialogBase.js"
1022
+ "module": "src/DialogBase.ts"
992
1023
  }
993
1024
  },
994
1025
  {
@@ -1002,7 +1033,7 @@
1002
1033
  },
1003
1034
  "inheritedFrom": {
1004
1035
  "name": "DialogBase",
1005
- "module": "src/DialogBase.js"
1036
+ "module": "src/DialogBase.ts"
1006
1037
  }
1007
1038
  },
1008
1039
  {
@@ -1016,7 +1047,7 @@
1016
1047
  },
1017
1048
  "inheritedFrom": {
1018
1049
  "name": "DialogBase",
1019
- "module": "src/DialogBase.js"
1050
+ "module": "src/DialogBase.ts"
1020
1051
  }
1021
1052
  },
1022
1053
  {
@@ -1038,7 +1069,7 @@
1038
1069
  ],
1039
1070
  "inheritedFrom": {
1040
1071
  "name": "DialogBase",
1041
- "module": "src/DialogBase.js"
1072
+ "module": "src/DialogBase.ts"
1042
1073
  }
1043
1074
  },
1044
1075
  {
@@ -1052,7 +1083,7 @@
1052
1083
  },
1053
1084
  "inheritedFrom": {
1054
1085
  "name": "DialogBase",
1055
- "module": "src/DialogBase.js"
1086
+ "module": "src/DialogBase.ts"
1056
1087
  }
1057
1088
  },
1058
1089
  {
@@ -1066,7 +1097,29 @@
1066
1097
  },
1067
1098
  "inheritedFrom": {
1068
1099
  "name": "DialogBase",
1069
- "module": "src/DialogBase.js"
1100
+ "module": "src/DialogBase.ts"
1101
+ }
1102
+ },
1103
+ {
1104
+ "kind": "method",
1105
+ "name": "handleTransitionEvent",
1106
+ "privacy": "private",
1107
+ "return": {
1108
+ "type": {
1109
+ "text": "void"
1110
+ }
1111
+ },
1112
+ "parameters": [
1113
+ {
1114
+ "name": "event",
1115
+ "type": {
1116
+ "text": "TransitionEvent"
1117
+ }
1118
+ }
1119
+ ],
1120
+ "inheritedFrom": {
1121
+ "name": "DialogBase",
1122
+ "module": "src/DialogBase.ts"
1070
1123
  }
1071
1124
  },
1072
1125
  {
@@ -1088,7 +1141,7 @@
1088
1141
  ],
1089
1142
  "inheritedFrom": {
1090
1143
  "name": "DialogBase",
1091
- "module": "src/DialogBase.js"
1144
+ "module": "src/DialogBase.ts"
1092
1145
  }
1093
1146
  },
1094
1147
  {
@@ -1100,9 +1153,17 @@
1100
1153
  "text": "void"
1101
1154
  }
1102
1155
  },
1156
+ "parameters": [
1157
+ {
1158
+ "name": "event",
1159
+ "type": {
1160
+ "text": "TransitionEvent"
1161
+ }
1162
+ }
1163
+ ],
1103
1164
  "inheritedFrom": {
1104
1165
  "name": "DialogBase",
1105
- "module": "src/DialogBase.js"
1166
+ "module": "src/DialogBase.ts"
1106
1167
  }
1107
1168
  },
1108
1169
  {
@@ -1117,7 +1178,7 @@
1117
1178
  "description": "Bind the open/close transition into the update complete lifecycle so\nthat the overlay system can wait for it to be \"visibly ready\" before\nattempting to throw focus into the content contained herein. Not\nwaiting for this can cause small amounts of page scroll to happen\nwhile opening the Tray when focusable content is included: e.g. Menu\nelements whose selected Menu Item is not the first Menu Item.",
1118
1179
  "inheritedFrom": {
1119
1180
  "name": "DialogBase",
1120
- "module": "src/DialogBase.js"
1181
+ "module": "src/DialogBase.ts"
1121
1182
  }
1122
1183
  }
1123
1184
  ],
@@ -1153,6 +1214,15 @@
1153
1214
  "name": "DialogBase",
1154
1215
  "module": "src/DialogBase.ts"
1155
1216
  }
1217
+ },
1218
+ {
1219
+ "type": {
1220
+ "text": "TransitionEvent"
1221
+ },
1222
+ "inheritedFrom": {
1223
+ "name": "DialogBase",
1224
+ "module": "src/DialogBase.ts"
1225
+ }
1156
1226
  }
1157
1227
  ],
1158
1228
  "attributes": [
@@ -1317,7 +1387,7 @@
1317
1387
  "name": "DialogWrapper",
1318
1388
  "declaration": {
1319
1389
  "name": "DialogWrapper",
1320
- "module": "src/DialogWrapper.js"
1390
+ "module": "src/DialogWrapper.ts"
1321
1391
  }
1322
1392
  }
1323
1393
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/dialog",
3
- "version": "0.32.0",
3
+ "version": "0.32.1-overlay.41+ea2752a5d",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -73,14 +73,14 @@
73
73
  "lit-html"
74
74
  ],
75
75
  "dependencies": {
76
- "@spectrum-web-components/base": "^0.32.0",
77
- "@spectrum-web-components/button": "^0.32.0",
78
- "@spectrum-web-components/button-group": "^0.32.0",
79
- "@spectrum-web-components/divider": "^0.32.0",
80
- "@spectrum-web-components/icons-workflow": "^0.32.0",
81
- "@spectrum-web-components/modal": "^0.32.0",
82
- "@spectrum-web-components/shared": "^0.32.0",
83
- "@spectrum-web-components/underlay": "^0.32.0"
76
+ "@spectrum-web-components/base": "^0.32.1-overlay.41+ea2752a5d",
77
+ "@spectrum-web-components/button": "^0.32.1-overlay.41+ea2752a5d",
78
+ "@spectrum-web-components/button-group": "^0.32.1-overlay.41+ea2752a5d",
79
+ "@spectrum-web-components/divider": "^0.32.1-overlay.41+ea2752a5d",
80
+ "@spectrum-web-components/icons-workflow": "^0.32.1-overlay.41+ea2752a5d",
81
+ "@spectrum-web-components/modal": "^0.32.1-overlay.41+ea2752a5d",
82
+ "@spectrum-web-components/shared": "^0.32.1-overlay.41+ea2752a5d",
83
+ "@spectrum-web-components/underlay": "^0.32.1-overlay.41+ea2752a5d"
84
84
  },
85
85
  "devDependencies": {
86
86
  "@spectrum-css/dialog": "^6.0.48"
@@ -91,5 +91,5 @@
91
91
  "./sp-*.js",
92
92
  "./**/*.dev.js"
93
93
  ],
94
- "gitHead": "c5f67662ac54d0e37debaf7cbd7c2df60e8b294e"
94
+ "gitHead": "ea2752a5dab7c3fc9f9d68148e74af23c63e2cfd"
95
95
  }
package/src/Dialog.dev.js CHANGED
@@ -220,7 +220,6 @@ const _Dialog = class extends FocusVisiblePolyfillMixin(
220
220
  }
221
221
  connectedCallback() {
222
222
  super.connectedCallback();
223
- this.tabIndex = 0;
224
223
  window.addEventListener(
225
224
  "resize",
226
225
  this.shouldManageTabOrderForScrolling
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\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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",
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 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 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`
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,p;i>=0;i--)(p=c[i])&&(o=(t?p(n,e,o):p(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 b}from"@spectrum-web-components/base/src/decorators.js";import{classMap as g}from"@spectrum-web-components/base/src/directives.js";import{conditionAttributeWithId as u}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>
@@ -36,5 +36,5 @@
36
36
  ${this.hasButtons?this.renderButtons():l}
37
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=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);
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=u(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=u(this,"aria-describedby",t);else if(!t.length){const o=!!this.id;o||(this.id=this.describedbyId);const i=u(this,"aria-describedby",this.id);this.conditionDescribedby=()=>{i(),o||this.removeAttribute("id")}}}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.shouldManageTabOrderForScrolling)}disconnectedCallback(){window.removeEventListener("resize",this.shouldManageTabOrderForScrolling),super.disconnectedCallback()}};export let Dialog=a;Dialog.instanceCount=0,r([b(".close-button")],Dialog.prototype,"closeButton",2),r([b(".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\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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",
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 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": ["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
@@ -30,8 +30,9 @@ export declare class DialogBase extends DialogBase_base {
30
30
  protected handleClose(event: Event): void;
31
31
  close(): void;
32
32
  private dispatchClosed;
33
+ private handleTransitionEvent;
33
34
  protected handleUnderlayTransitionend(event: TransitionEvent): void;
34
- protected handleModalTransitionend(): void;
35
+ protected handleModalTransitionend(event: TransitionEvent): void;
35
36
  protected update(changes: PropertyValues<this>): void;
36
37
  protected renderDialog(): TemplateResult;
37
38
  protected render(): TemplateResult;
package/src/DialogBase.dev.js CHANGED
@@ -59,7 +59,6 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
59
59
  await firstFocusable.updateComplete;
60
60
  }
61
61
  firstFocusable.focus();
62
- this.removeAttribute("tabindex");
63
62
  } else {
64
63
  this.dialog.focus();
65
64
  }
@@ -93,18 +92,25 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
93
92
  })
94
93
  );
95
94
  }
95
+ handleTransitionEvent(event) {
96
+ this.dispatchEvent(
97
+ new TransitionEvent(event.type, {
98
+ bubbles: true,
99
+ composed: true,
100
+ propertyName: event.propertyName
101
+ })
102
+ );
103
+ }
96
104
  handleUnderlayTransitionend(event) {
97
105
  if (!this.open && event.propertyName === "visibility") {
98
106
  this.resolveTransitionPromise();
99
- this.dispatchClosed();
100
107
  }
108
+ this.handleTransitionEvent(event);
101
109
  }
102
- handleModalTransitionend() {
110
+ handleModalTransitionend(event) {
103
111
  if (this.open || !this.underlay) {
104
112
  this.resolveTransitionPromise();
105
- if (!this.open) {
106
- this.dispatchClosed();
107
- }
113
+ this.handleTransitionEvent(event);
108
114
  }
109
115
  }
110
116
  update(changes) {
@@ -116,6 +122,9 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
116
122
  res();
117
123
  };
118
124
  });
125
+ if (!this.open) {
126
+ this.dispatchClosed();
127
+ }
119
128
  }
120
129
  super.update(changes);
121
130
  }
@@ -130,11 +139,13 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
130
139
  <sp-underlay
131
140
  ?open=${this.open}
132
141
  @click=${this.dismiss}
142
+ @transitionrun=${this.handleTransitionEvent}
133
143
  @transitionend=${this.handleUnderlayTransitionend}
134
144
  ></sp-underlay>
135
145
  ` : html``}
136
146
  <div
137
147
  class="modal ${this.mode}"
148
+ @transitionrun=${this.handleTransitionEvent}
138
149
  @transitionend=${this.handleModalTransitionend}
139
150
  @close=${this.handleClose}
140
151
  >
@@ -150,8 +161,6 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
150
161
  this.dialog.shouldManageTabOrderForScrolling();
151
162
  });
152
163
  }
153
- } else {
154
- this.tabIndex = 0;
155
164
  }
156
165
  }
157
166
  }