@spectrum-web-components/dialog 0.8.4-express.12 → 0.9.0

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 (7) hide show
  1. package/custom-elements.json +44 -0
  2. package/package.json +12 -12
  3. package/src/DialogWrapper.d.ts +14 -0
  4. package/src/DialogWrapper.js +39 -6
  5. package/src/DialogWrapper.js.map +1 -1
  6. package/stories/dialog.stories.js +13 -33
  7. package/stories/dialog.stories.js.map +1 -1
package/custom-elements.json CHANGED
@@ -421,6 +421,19 @@
421
421
  "default": "false",
422
422
  "attribute": "responsive"
423
423
  },
424
+ {
425
+ "kind": "field",
426
+ "name": "transitionPromise",
427
+ "privacy": "private"
428
+ },
429
+ {
430
+ "kind": "field",
431
+ "name": "resolveTransitionPromise",
432
+ "type": {
433
+ "text": "() => void"
434
+ },
435
+ "privacy": "private"
436
+ },
424
437
  {
425
438
  "kind": "field",
426
439
  "name": "underlay",
@@ -498,6 +511,37 @@
498
511
  "text": "void"
499
512
  }
500
513
  }
514
+ },
515
+ {
516
+ "kind": "method",
517
+ "name": "handleUnderlayTransitionend",
518
+ "privacy": "protected",
519
+ "return": {
520
+ "type": {
521
+ "text": "void"
522
+ }
523
+ }
524
+ },
525
+ {
526
+ "kind": "method",
527
+ "name": "handleModalTransitionend",
528
+ "privacy": "protected",
529
+ "return": {
530
+ "type": {
531
+ "text": "void"
532
+ }
533
+ }
534
+ },
535
+ {
536
+ "kind": "method",
537
+ "name": "getUpdateComplete",
538
+ "privacy": "protected",
539
+ "return": {
540
+ "type": {
541
+ "text": "Promise<boolean>"
542
+ }
543
+ },
544
+ "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."
501
545
  }
502
546
  ],
503
547
  "events": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/dialog",
3
- "version": "0.8.4-express.12+27420d682",
3
+ "version": "0.9.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -46,26 +46,26 @@
46
46
  "lit-html"
47
47
  ],
48
48
  "dependencies": {
49
- "@spectrum-web-components/action-button": "^0.7.4-express.12+27420d682",
49
+ "@spectrum-web-components/action-button": "^0.7.3",
50
50
  "@spectrum-web-components/base": "^0.5.1",
51
- "@spectrum-web-components/button": "^0.16.4-express.12+27420d682",
52
- "@spectrum-web-components/button-group": "^0.8.3-express.12+27420d682",
53
- "@spectrum-web-components/divider": "^0.4.3-express.12+27420d682",
54
- "@spectrum-web-components/icon": "^0.11.3-express.12+27420d682",
55
- "@spectrum-web-components/icons-ui": "^0.8.3-express.12+27420d682",
56
- "@spectrum-web-components/icons-workflow": "^0.8.3-express.12+27420d682",
57
- "@spectrum-web-components/modal": "^0.5.3-express.12+27420d682",
51
+ "@spectrum-web-components/button": "^0.16.3",
52
+ "@spectrum-web-components/button-group": "^0.8.2",
53
+ "@spectrum-web-components/divider": "^0.4.2",
54
+ "@spectrum-web-components/icon": "^0.11.2",
55
+ "@spectrum-web-components/icons-ui": "^0.8.2",
56
+ "@spectrum-web-components/icons-workflow": "^0.8.2",
57
+ "@spectrum-web-components/modal": "^0.6.0",
58
58
  "@spectrum-web-components/shared": "^0.13.3",
59
- "@spectrum-web-components/underlay": "^0.8.3-express.12+27420d682",
59
+ "@spectrum-web-components/underlay": "^0.8.2",
60
60
  "tslib": "^2.0.0"
61
61
  },
62
62
  "devDependencies": {
63
- "@spectrum-css/dialog": "^5.0.1"
63
+ "@spectrum-css/dialog": "^5.0.0"
64
64
  },
65
65
  "types": "./src/index.d.ts",
66
66
  "customElements": "custom-elements.json",
67
67
  "sideEffects": [
68
68
  "./sp-*.js"
69
69
  ],
70
- "gitHead": "27420d682bb3b3f679875e1f4148c10df0bd738c"
70
+ "gitHead": "f23b15ec952d7450272a8275524c905e028b4ddc"
71
71
  }
package/src/DialogWrapper.d.ts CHANGED
@@ -28,6 +28,8 @@ export declare class DialogWrapper extends DialogWrapper_base {
28
28
  secondaryLabel: string;
29
29
  headline: string;
30
30
  responsive: boolean;
31
+ private transitionPromise;
32
+ private resolveTransitionPromise;
31
33
  underlay: boolean;
32
34
  private dialog;
33
35
  focus(): void;
@@ -36,7 +38,19 @@ export declare class DialogWrapper extends DialogWrapper_base {
36
38
  private clickCancel;
37
39
  private clickConfirm;
38
40
  close(): void;
41
+ protected handleUnderlayTransitionend(): void;
42
+ protected handleModalTransitionend(): void;
43
+ protected update(changes: PropertyValues<this>): void;
39
44
  protected render(): TemplateResult;
40
45
  protected updated(changes: PropertyValues<this>): void;
46
+ /**
47
+ * Bind the open/close transition into the update complete lifecycle so
48
+ * that the overlay system can wait for it to be "visibly ready" before
49
+ * attempting to throw focus into the content contained herein. Not
50
+ * waiting for this can cause small amounts of page scroll to happen
51
+ * while opening the Tray when focusable content is included: e.g. Menu
52
+ * elements whose selected Menu Item is not the first Menu Item.
53
+ */
54
+ protected getUpdateComplete(): Promise<boolean>;
41
55
  }
42
56
  export {};
package/src/DialogWrapper.js CHANGED
@@ -16,7 +16,8 @@ import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
16
16
  import '@spectrum-web-components/underlay/sp-underlay.js';
17
17
  import '@spectrum-web-components/button/sp-button.js';
18
18
  import '../sp-dialog.js';
19
- import styles from '@spectrum-web-components/modal/src/modal.css.js';
19
+ import modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js';
20
+ import modalStyles from '@spectrum-web-components/modal/src/modal.css.js';
20
21
  import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';
21
22
  import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';
22
23
  /**
@@ -43,10 +44,11 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
43
44
  this.secondaryLabel = '';
44
45
  this.headline = '';
45
46
  this.responsive = false;
47
+ this.transitionPromise = Promise.resolve();
46
48
  this.underlay = false;
47
49
  }
48
50
  static get styles() {
49
- return [styles];
51
+ return [modalWrapperStyles, modalStyles];
50
52
  }
51
53
  focus() {
52
54
  if (this.shadowRoot) {
@@ -97,6 +99,22 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
97
99
  bubbles: true,
98
100
  }));
99
101
  }
102
+ handleUnderlayTransitionend() {
103
+ if (!this.open) {
104
+ this.resolveTransitionPromise();
105
+ }
106
+ }
107
+ handleModalTransitionend() {
108
+ if (this.open || !this.underlay) {
109
+ this.resolveTransitionPromise();
110
+ }
111
+ }
112
+ update(changes) {
113
+ if (changes.has('open') && changes.get('open') !== undefined) {
114
+ this.transitionPromise = new Promise((res) => (this.resolveTransitionPromise = res));
115
+ }
116
+ super.update(changes);
117
+ }
100
118
  render() {
101
119
  return html `
102
120
  ${this.underlay
@@ -104,10 +122,14 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
104
122
  <sp-underlay
105
123
  ?open=${this.open}
106
124
  @click=${this.dismiss}
125
+ @transitionend=${this.handleUnderlayTransitionend}
107
126
  ></sp-underlay>
108
127
  `
109
128
  : html ``}
110
- <div class="modal ${this.mode}">
129
+ <div
130
+ class="modal ${this.mode}"
131
+ @transitionend=${this.handleModalTransitionend}
132
+ >
111
133
  <sp-dialog
112
134
  ?dismissable=${this.dismissable}
113
135
  ?no-divider=${this.noDivider}
@@ -143,7 +165,6 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
143
165
  ? html `
144
166
  <sp-button
145
167
  variant="primary"
146
- treatment="outline"
147
168
  slot="button"
148
169
  @click=${this.clickSecondary}
149
170
  >
@@ -155,7 +176,6 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
155
176
  ? html `
156
177
  <sp-button
157
178
  variant="secondary"
158
- treatment="outline"
159
179
  slot="button"
160
180
  @click=${this.clickCancel}
161
181
  >
@@ -166,7 +186,7 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
166
186
  ${this.confirmLabel
167
187
  ? html `
168
188
  <sp-button
169
- variant="accent"
189
+ variant="cta"
170
190
  slot="button"
171
191
  @click=${this.clickConfirm}
172
192
  >
@@ -185,6 +205,19 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
185
205
  });
186
206
  }
187
207
  }
208
+ /**
209
+ * Bind the open/close transition into the update complete lifecycle so
210
+ * that the overlay system can wait for it to be "visibly ready" before
211
+ * attempting to throw focus into the content contained herein. Not
212
+ * waiting for this can cause small amounts of page scroll to happen
213
+ * while opening the Tray when focusable content is included: e.g. Menu
214
+ * elements whose selected Menu Item is not the first Menu Item.
215
+ */
216
+ async getUpdateComplete() {
217
+ const complete = (await super.getUpdateComplete());
218
+ await this.transitionPromise;
219
+ return complete;
220
+ }
188
221
  }
189
222
  __decorate([
190
223
  property({ type: Boolean, reflect: true })
package/src/DialogWrapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DialogWrapper.js","sourceRoot":"","sources":["DialogWrapper.ts"],"names":[],"mappings":"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","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 {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/underlay/sp-underlay.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nimport '../sp-dialog.js';\nimport styles 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-wrapper\n *\n * @slot - content for the dialog\n * @fires secondary - Announces that the \"secondary\" button has been clicked.\n * @fires cancel - Announces that the \"cancel\" button has been clicked.\n * @fires confirm - Announces that the \"confirm\" button has been clicked.\n * @fires close - Announces that the dialog has been closed.\n */\nexport class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public error = false;\n\n @property({ attribute: 'cancel-label' })\n public cancelLabel = '';\n\n @property({ attribute: 'confirm-label' })\n public confirmLabel = '';\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n @property()\n public footer = '';\n\n @property()\n public hero = '';\n\n @property({ attribute: 'hero-label' })\n public heroLabel = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'no-divider' })\n public noDivider = 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 @property({ type: String, reflect: true })\n public size?: 's' | 'm' | 'l';\n\n @property({ attribute: 'secondary-label' })\n public secondaryLabel = '';\n\n @property()\n public headline = '';\n\n @property({ type: Boolean })\n public responsive = false;\n\n @property({ type: Boolean })\n public underlay = false;\n\n @query('sp-dialog')\n private dialog!: Dialog;\n\n public focus(): void {\n if (this.shadowRoot) {\n const firstFocusable = firstFocusableIn(this.shadowRoot);\n if (firstFocusable) {\n if (firstFocusable.updateComplete) {\n firstFocusable.updateComplete.then(() =>\n firstFocusable.focus()\n );\n /* c8 ignore next 3 */\n } else {\n firstFocusable.focus();\n }\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 dismiss(): void {\n if (!this.dismissable) {\n return;\n }\n this.close();\n }\n\n private clickSecondary(): void {\n this.dispatchEvent(\n new Event('secondary', {\n bubbles: true,\n })\n );\n }\n\n private clickCancel(): void {\n this.dispatchEvent(\n new Event('cancel', {\n bubbles: true,\n })\n );\n }\n\n private clickConfirm(): void {\n this.dispatchEvent(\n new Event('confirm', {\n bubbles: true,\n })\n );\n }\n\n public close(): void {\n this.open = false;\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n })\n );\n }\n\n protected render(): TemplateResult {\n return html`\n ${this.underlay\n ? html`\n <sp-underlay\n ?open=${this.open}\n @click=${this.dismiss}\n ></sp-underlay>\n `\n : html``}\n <div class=\"modal ${this.mode}\">\n <sp-dialog\n ?dismissable=${this.dismissable}\n ?no-divider=${this.noDivider}\n ?error=${this.error}\n mode=${ifDefined(this.mode ? this.mode : undefined)}\n size=${ifDefined(this.size ? this.size : undefined)}\n @close=${this.close}\n >\n ${this.hero\n ? html`\n <img\n src=\"${this.hero}\"\n slot=\"hero\"\n aria-hidden=${ifDefined(\n this.heroLabel ? undefined : 'true'\n )}\n alt=${ifDefined(\n this.heroLabel\n ? this.heroLabel\n : undefined\n )}\n />\n `\n : html``}\n ${this.headline\n ? html`\n <h2 slot=\"heading\">${this.headline}</h2>\n `\n : html``}\n <slot></slot>\n ${this.footer\n ? html`\n <div slot=\"footer\">${this.footer}</div>\n `\n : html``}\n ${this.secondaryLabel\n ? html`\n <sp-button\n variant=\"primary\"\n treatment=\"outline\"\n slot=\"button\"\n @click=${this.clickSecondary}\n >\n ${this.secondaryLabel}\n </sp-button>\n `\n : html``}\n ${this.cancelLabel\n ? html`\n <sp-button\n variant=\"secondary\"\n treatment=\"outline\"\n slot=\"button\"\n @click=${this.clickCancel}\n >\n ${this.cancelLabel}\n </sp-button>\n `\n : html``}\n ${this.confirmLabel\n ? html`\n <sp-button\n variant=\"accent\"\n slot=\"button\"\n @click=${this.clickConfirm}\n >\n ${this.confirmLabel}\n </sp-button>\n `\n : html``}\n </sp-dialog>\n </div>\n `;\n }\n\n protected updated(changes: PropertyValues<this>): void {\n if (changes.has('open') && this.open) {\n this.dialog.updateComplete.then(() => {\n this.dialog.shouldManageTabOrderForScrolling();\n });\n }\n }\n}\n"]}
1
+ {"version":3,"file":"DialogWrapper.js","sourceRoot":"","sources":["DialogWrapper.ts"],"names":[],"mappings":"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","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 {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.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-wrapper\n *\n * @slot - content for the dialog\n * @fires secondary - Announces that the \"secondary\" button has been clicked.\n * @fires cancel - Announces that the \"cancel\" button has been clicked.\n * @fires confirm - Announces that the \"confirm\" button has been clicked.\n * @fires close - Announces that the dialog has been closed.\n */\nexport class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static get styles(): CSSResultArray {\n return [modalWrapperStyles, modalStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public error = false;\n\n @property({ attribute: 'cancel-label' })\n public cancelLabel = '';\n\n @property({ attribute: 'confirm-label' })\n public confirmLabel = '';\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n @property()\n public footer = '';\n\n @property()\n public hero = '';\n\n @property({ attribute: 'hero-label' })\n public heroLabel = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'no-divider' })\n public noDivider = 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 @property({ type: String, reflect: true })\n public size?: 's' | 'm' | 'l';\n\n @property({ attribute: 'secondary-label' })\n public secondaryLabel = '';\n\n @property()\n public headline = '';\n\n @property({ type: Boolean })\n public responsive = false;\n\n private transitionPromise = Promise.resolve();\n\n private resolveTransitionPromise!: () => void;\n\n @property({ type: Boolean })\n public underlay = false;\n\n @query('sp-dialog')\n private dialog!: Dialog;\n\n public focus(): void {\n if (this.shadowRoot) {\n const firstFocusable = firstFocusableIn(this.shadowRoot);\n if (firstFocusable) {\n if (firstFocusable.updateComplete) {\n firstFocusable.updateComplete.then(() =>\n firstFocusable.focus()\n );\n /* c8 ignore next 3 */\n } else {\n firstFocusable.focus();\n }\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 dismiss(): void {\n if (!this.dismissable) {\n return;\n }\n this.close();\n }\n\n private clickSecondary(): void {\n this.dispatchEvent(\n new Event('secondary', {\n bubbles: true,\n })\n );\n }\n\n private clickCancel(): void {\n this.dispatchEvent(\n new Event('cancel', {\n bubbles: true,\n })\n );\n }\n\n private clickConfirm(): void {\n this.dispatchEvent(\n new Event('confirm', {\n bubbles: true,\n })\n );\n }\n\n public close(): void {\n this.open = false;\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n })\n );\n }\n\n protected handleUnderlayTransitionend(): void {\n if (!this.open) {\n this.resolveTransitionPromise();\n }\n }\n\n protected handleModalTransitionend(): void {\n if (this.open || !this.underlay) {\n this.resolveTransitionPromise();\n }\n }\n\n protected update(changes: PropertyValues<this>): void {\n if (changes.has('open') && changes.get('open') !== undefined) {\n this.transitionPromise = new Promise(\n (res) => (this.resolveTransitionPromise = res)\n );\n }\n super.update(changes);\n }\n\n protected 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 >\n <sp-dialog\n ?dismissable=${this.dismissable}\n ?no-divider=${this.noDivider}\n ?error=${this.error}\n mode=${ifDefined(this.mode ? this.mode : undefined)}\n size=${ifDefined(this.size ? this.size : undefined)}\n @close=${this.close}\n >\n ${this.hero\n ? html`\n <img\n src=\"${this.hero}\"\n slot=\"hero\"\n aria-hidden=${ifDefined(\n this.heroLabel ? undefined : 'true'\n )}\n alt=${ifDefined(\n this.heroLabel\n ? this.heroLabel\n : undefined\n )}\n />\n `\n : html``}\n ${this.headline\n ? html`\n <h2 slot=\"heading\">${this.headline}</h2>\n `\n : html``}\n <slot></slot>\n ${this.footer\n ? html`\n <div slot=\"footer\">${this.footer}</div>\n `\n : html``}\n ${this.secondaryLabel\n ? html`\n <sp-button\n variant=\"primary\"\n slot=\"button\"\n @click=${this.clickSecondary}\n >\n ${this.secondaryLabel}\n </sp-button>\n `\n : html``}\n ${this.cancelLabel\n ? html`\n <sp-button\n variant=\"secondary\"\n slot=\"button\"\n @click=${this.clickCancel}\n >\n ${this.cancelLabel}\n </sp-button>\n `\n : html``}\n ${this.confirmLabel\n ? html`\n <sp-button\n variant=\"cta\"\n slot=\"button\"\n @click=${this.clickConfirm}\n >\n ${this.confirmLabel}\n </sp-button>\n `\n : html``}\n </sp-dialog>\n </div>\n `;\n }\n\n protected updated(changes: PropertyValues<this>): void {\n if (changes.has('open') && this.open) {\n this.dialog.updateComplete.then(() => {\n this.dialog.shouldManageTabOrderForScrolling();\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 async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.transitionPromise;\n return complete;\n }\n}\n"]}
package/stories/dialog.stories.js CHANGED
@@ -132,10 +132,8 @@ export const alertConfirmation = () => {
132
132
  <h2 slot="heading">Enable Smart Filters?</h2>
133
133
  Smart filters are nondestructive and will preserve your original
134
134
  images.
135
- <sp-button variant="secondary" treatment="outline" slot="button">
136
- Cancel
137
- </sp-button>
138
- <sp-button variant="accent" slot="button">Enable</sp-button>
135
+ <sp-button variant="secondary" slot="button">Cancel</sp-button>
136
+ <sp-button variant="cta" slot="button">Enable</sp-button>
139
137
  </sp-dialog>
140
138
  `;
141
139
  };
@@ -145,12 +143,8 @@ export const alertInformation = () => {
145
143
  <h2 slot="heading">Enable Smart Filters?</h2>
146
144
  Smart filters are nondestructive and will preserve your original
147
145
  images.
148
- <sp-button variant="secondary" treatment="outline" slot="button">
149
- Cancel
150
- </sp-button>
151
- <sp-button variant="primary" treatment="outline" slot="button">
152
- Enable
153
- </sp-button>
146
+ <sp-button variant="secondary" slot="button">Cancel</sp-button>
147
+ <sp-button variant="primary" slot="button">Enable</sp-button>
154
148
  </sp-dialog>
155
149
  `;
156
150
  };
@@ -160,9 +154,7 @@ export const alertDestructive = () => {
160
154
  <h2 slot="heading">Enable Smart Filters?</h2>
161
155
  Smart filters are nondestructive and will preserve your original
162
156
  images.
163
- <sp-button variant="secondary" treatment="outline" slot="button">
164
- Cancel
165
- </sp-button>
157
+ <sp-button variant="secondary" slot="button">Cancel</sp-button>
166
158
  <sp-button variant="negative" slot="button">Enable</sp-button>
167
159
  </sp-dialog>
168
160
  `;
@@ -173,12 +165,8 @@ export const alertError = () => {
173
165
  <h2 slot="heading">Enable Smart Filters?</h2>
174
166
  Smart filters are nondestructive and will preserve your original
175
167
  images.
176
- <sp-button variant="secondary" treatment="outline" slot="button">
177
- Cancel
178
- </sp-button>
179
- <sp-button variant="primary" treatment="outline" slot="button">
180
- Enable
181
- </sp-button>
168
+ <sp-button variant="secondary" slot="button">Cancel</sp-button>
169
+ <sp-button variant="primary" slot="button">Enable</sp-button>
182
170
  </sp-dialog>
183
171
  `;
184
172
  };
@@ -188,12 +176,8 @@ export const alertErrorWithLongTitle = () => {
188
176
  <h2 slot="heading">Unable to Share Project to Behance Community</h2>
189
177
  Smart filters are nondestructive and will preserve your original
190
178
  images.
191
- <sp-button variant="secondary" treatment="outline" slot="button">
192
- Cancel
193
- </sp-button>
194
- <sp-button variant="primary" treatment="outline" slot="button">
195
- Enable
196
- </sp-button>
179
+ <sp-button variant="secondary" slot="button">Cancel</sp-button>
180
+ <sp-button variant="primary" slot="button">Enable</sp-button>
197
181
  </sp-dialog>
198
182
  `;
199
183
  };
@@ -330,10 +314,8 @@ export const fullscreen = () => {
330
314
  <div slot="footer">
331
315
  Anything in the footer is sticky and aligned right.
332
316
  </div>
333
- <sp-button variant="secondary" treatment="outline" slot="button">
334
- Cancel
335
- </sp-button>
336
- <sp-button variant="accent" slot="button">Enable</sp-button>
317
+ <sp-button variant="secondary" slot="button">Cancel</sp-button>
318
+ <sp-button variant="cta" slot="button">Enable</sp-button>
337
319
  </sp-dialog>
338
320
  `;
339
321
  };
@@ -470,10 +452,8 @@ export const fullscreenTakeover = () => {
470
452
  <div slot="footer">
471
453
  Anything in the footer is sticky and aligned right.
472
454
  </div>
473
- <sp-button variant="secondary" treatment="outline" slot="button">
474
- Cancel
475
- </sp-button>
476
- <sp-button variant="accent" slot="button">Enable</sp-button>
455
+ <sp-button variant="secondary" slot="button">Cancel</sp-button>
456
+ <sp-button variant="cta" slot="button">Enable</sp-button>
477
457
  </sp-dialog>
478
458
  `;
479
459
  };
package/stories/dialog.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.stories.js","sourceRoot":"","sources":["dialog.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,8CAA8C,CAAC;AAEtD,eAAe;IACX,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,WAAW;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAmB,EAAE;IACvC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAmB,EAAE;IAC5C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAmB,EAAE;IAC1C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAmB,EAAE;IACrC,OAAO,IAAI,CAAA;;4DAE6C,SAAS;;;;;;;;;;;;;;KAchE,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAmB,EAAE;IAClD,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAmB,EAAE;IACjD,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAmB,EAAE;IACjD,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAmB,EAAE;IACxD,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyIV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAmB,EAAE;IACnD,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyIV,CAAC;AACN,CAAC,CAAC","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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-dialog.js';\nimport { landscape } from './images.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nexport default {\n title: 'Dialog',\n component: 'sp-dialog',\n};\n\nexport const small = (): TemplateResult => {\n return html`\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const medium = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const large = (): TemplateResult => {\n return html`\n <sp-dialog size=\"l\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const dismissable = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const noDivider = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const hero = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <div slot=\"hero\" style=\"background-image: url(${landscape})\"></div>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const alertConfirmation = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertInformation = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"primary\" treatment=\"outline\" slot=\"button\">\n Enable\n </sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertDestructive = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"negative\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertError = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\" error>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"primary\" treatment=\"outline\" slot=\"button\">\n Enable\n </sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertErrorWithLongTitle = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\" error>\n <h2 slot=\"heading\">Unable to Share Project to Behance Community</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"primary\" treatment=\"outline\" slot=\"button\">\n Enable\n </sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreen = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreen\" dismissable>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreenTakeover = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreenTakeover\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n"]}
1
+ {"version":3,"file":"dialog.stories.js","sourceRoot":"","sources":["dialog.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,8CAA8C,CAAC;AAEtD,eAAe;IACX,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,WAAW;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAmB,EAAE;IACvC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAmB,EAAE;IAC5C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAmB,EAAE;IAC1C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAmB,EAAE;IACrC,OAAO,IAAI,CAAA;;4DAE6C,SAAS;;;;;;;;;;;;;;KAchE,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAmB,EAAE;IAClD,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAmB,EAAE;IACjD,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAmB,EAAE;IACjD,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAmB,EAAE;IACxD,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuIV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAmB,EAAE;IACnD,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuIV,CAAC;AACN,CAAC,CAAC","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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-dialog.js';\nimport { landscape } from './images.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nexport default {\n title: 'Dialog',\n component: 'sp-dialog',\n};\n\nexport const small = (): TemplateResult => {\n return html`\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const medium = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const large = (): TemplateResult => {\n return html`\n <sp-dialog size=\"l\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const dismissable = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const noDivider = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const hero = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <div slot=\"hero\" style=\"background-image: url(${landscape})\"></div>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const alertConfirmation = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"cta\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertInformation = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"primary\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertDestructive = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"negative\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertError = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\" error>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"primary\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertErrorWithLongTitle = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\" error>\n <h2 slot=\"heading\">Unable to Share Project to Behance Community</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"primary\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreen = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreen\" dismissable>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"cta\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreenTakeover = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreenTakeover\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"cta\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n"]}