@spectrum-web-components/dialog 0.38.0 → 0.39.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.
- package/custom-elements.json +2 -112
- package/package.json +12 -11
- package/src/Dialog.d.ts +3 -17
- package/src/Dialog.dev.js +16 -134
- package/src/Dialog.dev.js.map +2 -2
- package/src/Dialog.js +13 -19
- package/src/Dialog.js.map +3 -3
- package/stories/dialog-base.stories.js +2 -9
- package/stories/dialog-base.stories.js.map +2 -2
- package/stories/index.js +30 -1
- package/stories/index.js.map +2 -2
- package/stories/helpers.js +0 -24
- package/stories/helpers.js.map +0 -7
package/custom-elements.json
CHANGED
|
@@ -85,14 +85,6 @@
|
|
|
85
85
|
"text": "CloseButton | undefined"
|
|
86
86
|
}
|
|
87
87
|
},
|
|
88
|
-
{
|
|
89
|
-
"kind": "field",
|
|
90
|
-
"name": "contentElement",
|
|
91
|
-
"type": {
|
|
92
|
-
"text": "HTMLDivElement"
|
|
93
|
-
},
|
|
94
|
-
"privacy": "private"
|
|
95
|
-
},
|
|
96
88
|
{
|
|
97
89
|
"kind": "field",
|
|
98
90
|
"name": "error",
|
|
@@ -193,26 +185,6 @@
|
|
|
193
185
|
}
|
|
194
186
|
}
|
|
195
187
|
},
|
|
196
|
-
{
|
|
197
|
-
"kind": "method",
|
|
198
|
-
"name": "renderHeading",
|
|
199
|
-
"privacy": "protected",
|
|
200
|
-
"return": {
|
|
201
|
-
"type": {
|
|
202
|
-
"text": "TemplateResult"
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
},
|
|
206
|
-
{
|
|
207
|
-
"kind": "method",
|
|
208
|
-
"name": "renderContent",
|
|
209
|
-
"privacy": "protected",
|
|
210
|
-
"return": {
|
|
211
|
-
"type": {
|
|
212
|
-
"text": "TemplateResult"
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
},
|
|
216
188
|
{
|
|
217
189
|
"kind": "method",
|
|
218
190
|
"name": "renderFooter",
|
|
@@ -242,84 +214,6 @@
|
|
|
242
214
|
"text": "TemplateResult"
|
|
243
215
|
}
|
|
244
216
|
}
|
|
245
|
-
},
|
|
246
|
-
{
|
|
247
|
-
"kind": "field",
|
|
248
|
-
"name": "shouldManageTabOrderForScrolling",
|
|
249
|
-
"privacy": "public"
|
|
250
|
-
},
|
|
251
|
-
{
|
|
252
|
-
"kind": "field",
|
|
253
|
-
"name": "instanceCount",
|
|
254
|
-
"type": {
|
|
255
|
-
"text": "number"
|
|
256
|
-
},
|
|
257
|
-
"static": true,
|
|
258
|
-
"default": "0"
|
|
259
|
-
},
|
|
260
|
-
{
|
|
261
|
-
"kind": "field",
|
|
262
|
-
"name": "labelledbyId",
|
|
263
|
-
"privacy": "private",
|
|
264
|
-
"default": "`sp-dialog-label-${Dialog.instanceCount++}`"
|
|
265
|
-
},
|
|
266
|
-
{
|
|
267
|
-
"kind": "field",
|
|
268
|
-
"name": "conditionLabelledby",
|
|
269
|
-
"type": {
|
|
270
|
-
"text": "() => void | undefined"
|
|
271
|
-
},
|
|
272
|
-
"privacy": "private"
|
|
273
|
-
},
|
|
274
|
-
{
|
|
275
|
-
"kind": "field",
|
|
276
|
-
"name": "conditionDescribedby",
|
|
277
|
-
"type": {
|
|
278
|
-
"text": "() => void | undefined"
|
|
279
|
-
},
|
|
280
|
-
"privacy": "private"
|
|
281
|
-
},
|
|
282
|
-
{
|
|
283
|
-
"kind": "method",
|
|
284
|
-
"name": "onHeadingSlotchange",
|
|
285
|
-
"privacy": "private",
|
|
286
|
-
"return": {
|
|
287
|
-
"type": {
|
|
288
|
-
"text": "void"
|
|
289
|
-
}
|
|
290
|
-
},
|
|
291
|
-
"parameters": [
|
|
292
|
-
{
|
|
293
|
-
"name": "{\n target,\n }",
|
|
294
|
-
"type": {
|
|
295
|
-
"text": "Event & { target: HTMLSlotElement }"
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
]
|
|
299
|
-
},
|
|
300
|
-
{
|
|
301
|
-
"kind": "field",
|
|
302
|
-
"name": "describedbyId",
|
|
303
|
-
"privacy": "private",
|
|
304
|
-
"default": "`sp-dialog-description-${Dialog.instanceCount++}`"
|
|
305
|
-
},
|
|
306
|
-
{
|
|
307
|
-
"kind": "method",
|
|
308
|
-
"name": "onContentSlotChange",
|
|
309
|
-
"privacy": "protected",
|
|
310
|
-
"return": {
|
|
311
|
-
"type": {
|
|
312
|
-
"text": "void"
|
|
313
|
-
}
|
|
314
|
-
},
|
|
315
|
-
"parameters": [
|
|
316
|
-
{
|
|
317
|
-
"name": "{\n target,\n }",
|
|
318
|
-
"type": {
|
|
319
|
-
"text": "Event & { target: HTMLSlotElement }"
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
]
|
|
323
217
|
}
|
|
324
218
|
],
|
|
325
219
|
"events": [
|
|
@@ -372,18 +266,14 @@
|
|
|
372
266
|
}
|
|
373
267
|
],
|
|
374
268
|
"mixins": [
|
|
375
|
-
{
|
|
376
|
-
"name": "FocusVisiblePolyfillMixin",
|
|
377
|
-
"package": "@spectrum-web-components/shared"
|
|
378
|
-
},
|
|
379
269
|
{
|
|
380
270
|
"name": "ObserveSlotPresence",
|
|
381
271
|
"package": "@spectrum-web-components/shared"
|
|
382
272
|
}
|
|
383
273
|
],
|
|
384
274
|
"superclass": {
|
|
385
|
-
"name": "
|
|
386
|
-
"package": "@spectrum-web-components/
|
|
275
|
+
"name": "AlertDialog",
|
|
276
|
+
"package": "@spectrum-web-components/alert-dialog/src/AlertDialog.js"
|
|
387
277
|
},
|
|
388
278
|
"tagName": "sp-dialog",
|
|
389
279
|
"customElement": true
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/dialog",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.39.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -73,17 +73,18 @@
|
|
|
73
73
|
"lit-html"
|
|
74
74
|
],
|
|
75
75
|
"dependencies": {
|
|
76
|
-
"@spectrum-web-components/
|
|
77
|
-
"@spectrum-web-components/
|
|
78
|
-
"@spectrum-web-components/button
|
|
79
|
-
"@spectrum-web-components/
|
|
80
|
-
"@spectrum-web-components/
|
|
81
|
-
"@spectrum-web-components/
|
|
82
|
-
"@spectrum-web-components/
|
|
83
|
-
"@spectrum-web-components/
|
|
76
|
+
"@spectrum-web-components/alert-dialog": "^0.39.0",
|
|
77
|
+
"@spectrum-web-components/base": "^0.39.0",
|
|
78
|
+
"@spectrum-web-components/button": "^0.39.0",
|
|
79
|
+
"@spectrum-web-components/button-group": "^0.39.0",
|
|
80
|
+
"@spectrum-web-components/divider": "^0.39.0",
|
|
81
|
+
"@spectrum-web-components/icons-workflow": "^0.39.0",
|
|
82
|
+
"@spectrum-web-components/modal": "^0.39.0",
|
|
83
|
+
"@spectrum-web-components/shared": "^0.39.0",
|
|
84
|
+
"@spectrum-web-components/underlay": "^0.39.0"
|
|
84
85
|
},
|
|
85
86
|
"devDependencies": {
|
|
86
|
-
"@spectrum-css/dialog": "^6.0.
|
|
87
|
+
"@spectrum-css/dialog": "^6.0.68"
|
|
87
88
|
},
|
|
88
89
|
"types": "./src/index.d.ts",
|
|
89
90
|
"customElements": "custom-elements.json",
|
|
@@ -91,5 +92,5 @@
|
|
|
91
92
|
"./sp-*.js",
|
|
92
93
|
"./**/*.dev.js"
|
|
93
94
|
],
|
|
94
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "2acc8390ef0ac6cc940958d4da705c9859155c0d"
|
|
95
96
|
}
|
package/src/Dialog.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { CSSResultArray, PropertyValues,
|
|
1
|
+
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import '@spectrum-web-components/divider/sp-divider.js';
|
|
3
3
|
import '@spectrum-web-components/button/sp-close-button.js';
|
|
4
4
|
import '@spectrum-web-components/button-group/sp-button-group.js';
|
|
5
5
|
import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
|
|
6
6
|
import type { CloseButton } from '@spectrum-web-components/button';
|
|
7
|
-
|
|
7
|
+
import { AlertDialog } from '@spectrum-web-components/alert-dialog/src/AlertDialog.js';
|
|
8
|
+
declare const Dialog_base: typeof AlertDialog & {
|
|
8
9
|
new (...args: any[]): import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
|
|
9
10
|
prototype: import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
|
|
10
11
|
};
|
|
@@ -21,7 +22,6 @@ declare const Dialog_base: typeof SpectrumElement & {
|
|
|
21
22
|
export declare class Dialog extends Dialog_base {
|
|
22
23
|
static get styles(): CSSResultArray;
|
|
23
24
|
closeButton?: CloseButton;
|
|
24
|
-
private contentElement;
|
|
25
25
|
error: boolean;
|
|
26
26
|
dismissable: boolean;
|
|
27
27
|
protected get hasFooter(): boolean;
|
|
@@ -32,25 +32,11 @@ export declare class Dialog extends Dialog_base {
|
|
|
32
32
|
size?: 's' | 'm' | 'l';
|
|
33
33
|
close(): void;
|
|
34
34
|
protected renderHero(): TemplateResult;
|
|
35
|
-
protected renderHeading(): TemplateResult;
|
|
36
|
-
protected renderContent(): TemplateResult;
|
|
37
35
|
protected renderFooter(): TemplateResult;
|
|
38
36
|
protected renderButtons(): TemplateResult;
|
|
39
37
|
protected renderDismiss(): TemplateResult;
|
|
40
38
|
protected render(): TemplateResult;
|
|
41
|
-
shouldManageTabOrderForScrolling: () => void;
|
|
42
39
|
protected shouldUpdate(changes: PropertyValues): boolean;
|
|
43
40
|
protected firstUpdated(changes: PropertyValues): void;
|
|
44
|
-
static instanceCount: number;
|
|
45
|
-
private labelledbyId;
|
|
46
|
-
private conditionLabelledby?;
|
|
47
|
-
private conditionDescribedby?;
|
|
48
|
-
private onHeadingSlotchange;
|
|
49
|
-
private describedbyId;
|
|
50
|
-
protected onContentSlotChange({ target, }: Event & {
|
|
51
|
-
target: HTMLSlotElement;
|
|
52
|
-
}): void;
|
|
53
|
-
connectedCallback(): void;
|
|
54
|
-
disconnectedCallback(): void;
|
|
55
41
|
}
|
|
56
42
|
export {};
|
package/src/Dialog.dev.js
CHANGED
|
@@ -12,61 +12,30 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
12
12
|
};
|
|
13
13
|
import {
|
|
14
14
|
html,
|
|
15
|
-
nothing
|
|
16
|
-
SpectrumElement
|
|
15
|
+
nothing
|
|
17
16
|
} from "@spectrum-web-components/base";
|
|
18
17
|
import {
|
|
19
18
|
property,
|
|
20
19
|
query
|
|
21
20
|
} from "@spectrum-web-components/base/src/decorators.js";
|
|
22
|
-
import { classMap } from "@spectrum-web-components/base/src/directives.js";
|
|
23
|
-
import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
|
|
24
21
|
import "@spectrum-web-components/divider/sp-divider.js";
|
|
25
22
|
import "@spectrum-web-components/button/sp-close-button.js";
|
|
26
23
|
import "@spectrum-web-components/button-group/sp-button-group.js";
|
|
27
24
|
import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
|
|
28
|
-
import {
|
|
29
|
-
FocusVisiblePolyfillMixin,
|
|
30
|
-
ObserveSlotPresence
|
|
31
|
-
} from "@spectrum-web-components/shared";
|
|
25
|
+
import { ObserveSlotPresence } from "@spectrum-web-components/shared";
|
|
32
26
|
import styles from "./dialog.css.js";
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
} else {
|
|
41
|
-
const id = idBase + `-${appliedIds++}`;
|
|
42
|
-
el.id = id;
|
|
43
|
-
ids.push(id);
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
return ids;
|
|
47
|
-
}
|
|
48
|
-
const _Dialog = class _Dialog extends FocusVisiblePolyfillMixin(
|
|
49
|
-
ObserveSlotPresence(SpectrumElement, [
|
|
50
|
-
'[slot="hero"]',
|
|
51
|
-
'[slot="footer"]',
|
|
52
|
-
'[slot="button"]'
|
|
53
|
-
])
|
|
54
|
-
) {
|
|
27
|
+
import { AlertDialog } from "@spectrum-web-components/alert-dialog/src/AlertDialog.js";
|
|
28
|
+
import { classMap } from "@spectrum-web-components/base/src/directives.js";
|
|
29
|
+
export class Dialog extends ObserveSlotPresence(AlertDialog, [
|
|
30
|
+
'[slot="hero"]',
|
|
31
|
+
'[slot="footer"]',
|
|
32
|
+
'[slot="button"]'
|
|
33
|
+
]) {
|
|
55
34
|
constructor() {
|
|
56
35
|
super(...arguments);
|
|
57
36
|
this.error = false;
|
|
58
37
|
this.dismissable = false;
|
|
59
38
|
this.noDivider = false;
|
|
60
|
-
this.shouldManageTabOrderForScrolling = () => {
|
|
61
|
-
const { offsetHeight, scrollHeight } = this.contentElement;
|
|
62
|
-
if (offsetHeight < scrollHeight) {
|
|
63
|
-
this.contentElement.tabIndex = 0;
|
|
64
|
-
} else {
|
|
65
|
-
this.contentElement.removeAttribute("tabindex");
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
this.labelledbyId = `sp-dialog-label-${_Dialog.instanceCount++}`;
|
|
69
|
-
this.describedbyId = `sp-dialog-description-${_Dialog.instanceCount++}`;
|
|
70
39
|
}
|
|
71
40
|
static get styles() {
|
|
72
41
|
return [styles];
|
|
@@ -95,18 +64,6 @@ const _Dialog = class _Dialog extends FocusVisiblePolyfillMixin(
|
|
|
95
64
|
<slot name="hero"></slot>
|
|
96
65
|
`;
|
|
97
66
|
}
|
|
98
|
-
renderHeading() {
|
|
99
|
-
return html`
|
|
100
|
-
<slot name="heading" @slotchange=${this.onHeadingSlotchange}></slot>
|
|
101
|
-
`;
|
|
102
|
-
}
|
|
103
|
-
renderContent() {
|
|
104
|
-
return html`
|
|
105
|
-
<div class="content">
|
|
106
|
-
<slot @slotchange=${this.onContentSlotChange}></slot>
|
|
107
|
-
</div>
|
|
108
|
-
`;
|
|
109
|
-
}
|
|
110
67
|
renderFooter() {
|
|
111
68
|
return html`
|
|
112
69
|
<div class="footer">
|
|
@@ -166,98 +123,23 @@ const _Dialog = class _Dialog extends FocusVisiblePolyfillMixin(
|
|
|
166
123
|
super.firstUpdated(changes);
|
|
167
124
|
this.setAttribute("role", "dialog");
|
|
168
125
|
}
|
|
169
|
-
|
|
170
|
-
target
|
|
171
|
-
}) {
|
|
172
|
-
if (this.conditionLabelledby) {
|
|
173
|
-
this.conditionLabelledby();
|
|
174
|
-
delete this.conditionLabelledby;
|
|
175
|
-
}
|
|
176
|
-
const ids = gatherAppliedIdsFromSlottedChildren(
|
|
177
|
-
target,
|
|
178
|
-
this.labelledbyId
|
|
179
|
-
);
|
|
180
|
-
if (ids.length) {
|
|
181
|
-
this.conditionLabelledby = conditionAttributeWithId(
|
|
182
|
-
this,
|
|
183
|
-
"aria-labelledby",
|
|
184
|
-
ids
|
|
185
|
-
);
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
onContentSlotChange({
|
|
189
|
-
target
|
|
190
|
-
}) {
|
|
191
|
-
requestAnimationFrame(() => {
|
|
192
|
-
this.shouldManageTabOrderForScrolling();
|
|
193
|
-
});
|
|
194
|
-
if (this.conditionDescribedby) {
|
|
195
|
-
this.conditionDescribedby();
|
|
196
|
-
delete this.conditionDescribedby;
|
|
197
|
-
}
|
|
198
|
-
const ids = gatherAppliedIdsFromSlottedChildren(
|
|
199
|
-
target,
|
|
200
|
-
this.describedbyId
|
|
201
|
-
);
|
|
202
|
-
if (ids.length && ids.length < 4) {
|
|
203
|
-
this.conditionDescribedby = conditionAttributeWithId(
|
|
204
|
-
this,
|
|
205
|
-
"aria-describedby",
|
|
206
|
-
ids
|
|
207
|
-
);
|
|
208
|
-
} else if (!ids.length) {
|
|
209
|
-
const idProvided = !!this.id;
|
|
210
|
-
if (!idProvided)
|
|
211
|
-
this.id = this.describedbyId;
|
|
212
|
-
const conditionDescribedby = conditionAttributeWithId(
|
|
213
|
-
this,
|
|
214
|
-
"aria-describedby",
|
|
215
|
-
this.id
|
|
216
|
-
);
|
|
217
|
-
this.conditionDescribedby = () => {
|
|
218
|
-
conditionDescribedby();
|
|
219
|
-
if (!idProvided) {
|
|
220
|
-
this.removeAttribute("id");
|
|
221
|
-
}
|
|
222
|
-
};
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
connectedCallback() {
|
|
226
|
-
super.connectedCallback();
|
|
227
|
-
window.addEventListener(
|
|
228
|
-
"resize",
|
|
229
|
-
this.shouldManageTabOrderForScrolling
|
|
230
|
-
);
|
|
231
|
-
}
|
|
232
|
-
disconnectedCallback() {
|
|
233
|
-
window.removeEventListener(
|
|
234
|
-
"resize",
|
|
235
|
-
this.shouldManageTabOrderForScrolling
|
|
236
|
-
);
|
|
237
|
-
super.disconnectedCallback();
|
|
238
|
-
}
|
|
239
|
-
};
|
|
240
|
-
_Dialog.instanceCount = 0;
|
|
126
|
+
}
|
|
241
127
|
__decorateClass([
|
|
242
128
|
query(".close-button")
|
|
243
|
-
],
|
|
244
|
-
__decorateClass([
|
|
245
|
-
query(".content")
|
|
246
|
-
], _Dialog.prototype, "contentElement", 2);
|
|
129
|
+
], Dialog.prototype, "closeButton", 2);
|
|
247
130
|
__decorateClass([
|
|
248
131
|
property({ type: Boolean, reflect: true })
|
|
249
|
-
],
|
|
132
|
+
], Dialog.prototype, "error", 2);
|
|
250
133
|
__decorateClass([
|
|
251
134
|
property({ type: Boolean, reflect: true })
|
|
252
|
-
],
|
|
135
|
+
], Dialog.prototype, "dismissable", 2);
|
|
253
136
|
__decorateClass([
|
|
254
137
|
property({ type: Boolean, reflect: true, attribute: "no-divider" })
|
|
255
|
-
],
|
|
138
|
+
], Dialog.prototype, "noDivider", 2);
|
|
256
139
|
__decorateClass([
|
|
257
140
|
property({ type: String, reflect: true })
|
|
258
|
-
],
|
|
141
|
+
], Dialog.prototype, "mode", 2);
|
|
259
142
|
__decorateClass([
|
|
260
143
|
property({ type: String, reflect: true })
|
|
261
|
-
],
|
|
262
|
-
export let Dialog = _Dialog;
|
|
144
|
+
], Dialog.prototype, "size", 2);
|
|
263
145
|
//# sourceMappingURL=Dialog.dev.js.map
|
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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.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 { ObserveSlotPresence } from '@spectrum-web-components/shared';\n\nimport styles from './dialog.css.js';\nimport type { CloseButton } from '@spectrum-web-components/button';\nimport { AlertDialog } from '@spectrum-web-components/alert-dialog/src/AlertDialog.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\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 ObserveSlotPresence(AlertDialog, [\n '[slot=\"hero\"]',\n '[slot=\"footer\"]',\n '[slot=\"button\"]',\n]) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @query('.close-button')\n closeButton?: CloseButton;\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 /* c8 ignore next 3 */\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 renderFooter(): TemplateResult {\n return html`\n <div class=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n\n protected override 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 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Dialog.js
CHANGED
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=(u,s,e,n)=>{for(var t=n>1?void 0:n?c(s,e):s,p=u.length-1,d;p>=0;p--)(d=u[p])&&(t=(n?d(s,e,t):d(t))||t);return n&&t&&a(s,e,t),t};import{html as o,nothing as l}from"@spectrum-web-components/base";import{property as i,query as m}from"@spectrum-web-components/base/src/decorators.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{ObserveSlotPresence as b}from"@spectrum-web-components/shared";import h from"./dialog.css.js";import{AlertDialog as f}from"@spectrum-web-components/alert-dialog/src/AlertDialog.js";import{classMap as v}from"@spectrum-web-components/base/src/directives.js";export class Dialog extends b(f,['[slot="hero"]','[slot="footer"]','[slot="button"]']){constructor(){super(...arguments);this.error=!1;this.dismissable=!1;this.noDivider=!1}static get styles(){return[h]}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 o`
|
|
2
2
|
<slot name="hero"></slot>
|
|
3
|
-
`}
|
|
4
|
-
<slot name="heading" @slotchange=${this.onHeadingSlotchange}></slot>
|
|
5
|
-
`}renderContent(){return i`
|
|
6
|
-
<div class="content">
|
|
7
|
-
<slot @slotchange=${this.onContentSlotChange}></slot>
|
|
8
|
-
</div>
|
|
9
|
-
`}renderFooter(){return i`
|
|
3
|
+
`}renderFooter(){return o`
|
|
10
4
|
<div class="footer">
|
|
11
5
|
<slot name="footer"></slot>
|
|
12
6
|
</div>
|
|
13
|
-
`}renderButtons(){const e={"button-group":!0,"button-group--noFooter":!this.hasFooter};return
|
|
14
|
-
<sp-button-group class=${
|
|
7
|
+
`}renderButtons(){const e={"button-group":!0,"button-group--noFooter":!this.hasFooter};return o`
|
|
8
|
+
<sp-button-group class=${v(e)}>
|
|
15
9
|
<slot name="button"></slot>
|
|
16
10
|
</sp-button-group>
|
|
17
|
-
`}renderDismiss(){return
|
|
11
|
+
`}renderDismiss(){return o`
|
|
18
12
|
<sp-close-button
|
|
19
13
|
class="close-button"
|
|
20
14
|
label="Close"
|
|
@@ -22,19 +16,19 @@
|
|
|
22
16
|
size="m"
|
|
23
17
|
@click=${this.close}
|
|
24
18
|
></sp-close-button>
|
|
25
|
-
`}render(){return
|
|
19
|
+
`}render(){return o`
|
|
26
20
|
<div class="grid">
|
|
27
21
|
${this.renderHero()} ${this.renderHeading()}
|
|
28
|
-
${this.error?
|
|
22
|
+
${this.error?o`
|
|
29
23
|
<sp-icon-alert class="type-icon"></sp-icon-alert>
|
|
30
|
-
`:
|
|
31
|
-
${this.noDivider?
|
|
24
|
+
`:l}
|
|
25
|
+
${this.noDivider?l:o`
|
|
32
26
|
<sp-divider size="m" class="divider"></sp-divider>
|
|
33
27
|
`}
|
|
34
28
|
${this.renderContent()}
|
|
35
|
-
${this.hasFooter?this.renderFooter():
|
|
36
|
-
${this.hasButtons?this.renderButtons():
|
|
37
|
-
${this.dismissable?this.renderDismiss():
|
|
29
|
+
${this.hasFooter?this.renderFooter():l}
|
|
30
|
+
${this.hasButtons?this.renderButtons():l}
|
|
31
|
+
${this.dismissable?this.renderDismiss():l}
|
|
38
32
|
</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")}
|
|
33
|
+
`}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")}}r([m(".close-button")],Dialog.prototype,"closeButton",2),r([i({type:Boolean,reflect:!0})],Dialog.prototype,"error",2),r([i({type:Boolean,reflect:!0})],Dialog.prototype,"dismissable",2),r([i({type:Boolean,reflect:!0,attribute:"no-divider"})],Dialog.prototype,"noDivider",2),r([i({type:String,reflect:!0})],Dialog.prototype,"mode",2),r([i({type:String,reflect:!0})],Dialog.prototype,"size",2);
|
|
40
34
|
//# 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
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,
|
|
6
|
-
"names": ["html", "nothing", "
|
|
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 TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.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 { ObserveSlotPresence } from '@spectrum-web-components/shared';\n\nimport styles from './dialog.css.js';\nimport type { CloseButton } from '@spectrum-web-components/button';\nimport { AlertDialog } from '@spectrum-web-components/alert-dialog/src/AlertDialog.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\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 ObserveSlotPresence(AlertDialog, [\n '[slot=\"hero\"]',\n '[slot=\"footer\"]',\n '[slot=\"button\"]',\n]) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @query('.close-button')\n closeButton?: CloseButton;\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 /* c8 ignore next 3 */\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 renderFooter(): TemplateResult {\n return html`\n <div class=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n\n protected override 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 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"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,MAGG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,MAAO,iDACP,MAAO,qDACP,MAAO,2DACP,MAAO,iEACP,OAAS,uBAAAC,MAA2B,kCAEpC,OAAOC,MAAY,kBAEnB,OAAS,eAAAC,MAAmB,2DAC5B,OAAS,YAAAC,MAAgB,kDAYlB,aAAM,eAAeH,EAAoBE,EAAa,CACzD,gBACA,kBACA,iBACJ,CAAC,CAAE,CAJI,kCAaH,KAAO,MAAQ,GAGf,KAAO,YAAc,GAgBrB,KAAO,UAAY,GA3BnB,WAA2B,QAAyB,CAChD,MAAO,CAACD,CAAM,CAClB,CAWA,IAAc,WAAqB,CAC/B,OAAO,KAAK,uBAAuB,iBAAiB,CACxD,CAEA,IAAc,YAAsB,CAChC,OAAO,KAAK,uBAAuB,iBAAiB,CACxD,CAGA,IAAc,SAAmB,CAC7B,OAAO,KAAK,uBAAuB,eAAe,CACtD,CAWO,OAAc,CACjB,KAAK,cACD,IAAI,MAAM,QAAS,CACf,QAAS,GACT,SAAU,GACV,WAAY,EAChB,CAAC,CACL,CACJ,CAEU,YAA6B,CACnC,OAAOL;AAAA;AAAA,SAGX,CAEU,cAA+B,CACrC,OAAOA;AAAA;AAAA;AAAA;AAAA,SAKX,CAEmB,eAAgC,CAC/C,MAAMQ,EAAU,CACZ,eAAgB,GAChB,yBAA0B,CAAC,KAAK,SACpC,EACA,OAAOR;AAAA,qCACsBO,EAASC,CAAO,CAAC;AAAA;AAAA;AAAA,SAIlD,CAEU,eAAgC,CACtC,OAAOR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMU,KAAK,KAAK;AAAA;AAAA,SAG/B,CAEmB,QAAyB,CACxC,OAAOA;AAAA;AAAA,kBAEG,KAAK,WAAW,CAAC,IAAI,KAAK,cAAc,CAAC;AAAA,kBACzC,KAAK,MACDA;AAAA;AAAA,wBAGAC,CAAO;AAAA,kBACX,KAAK,UACDA,EACAD;AAAA;AAAA,uBAEC;AAAA,kBACL,KAAK,cAAc,CAAC;AAAA,kBACpB,KAAK,UAAY,KAAK,aAAa,EAAIC,CAAO;AAAA,kBAC9C,KAAK,WAAa,KAAK,cAAc,EAAIA,CAAO;AAAA,kBAChD,KAAK,YAAc,KAAK,cAAc,EAAIA,CAAO;AAAA;AAAA,SAG/D,CAEmB,aAAaQ,EAAkC,CAC9D,OAAIA,EAAQ,IAAI,MAAM,GAAO,KAAK,OAC9B,KAAK,YAAc,IAEnBA,EAAQ,IAAI,aAAa,GAAK,KAAK,cACnC,KAAK,YAAc,CAAC,KAAK,MAEtB,MAAM,aAAaA,CAAO,CACrC,CAEmB,aAAaA,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,OAAQ,QAAQ,CACtC,CACJ,CAlHIC,EAAA,CADCP,EAAM,eAAe,GATb,OAUT,2BAGOO,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAZjC,OAaF,qBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAfjC,OAgBF,2BAgBAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,YAAa,CAAC,GA/B1D,OAgCF,yBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAlChC,OAmCF,oBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GArChC,OAsCF",
|
|
6
|
+
"names": ["html", "nothing", "property", "query", "ObserveSlotPresence", "styles", "AlertDialog", "classMap", "classes", "changes", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -7,7 +7,7 @@ import "@spectrum-web-components/overlay/sp-overlay.js";
|
|
|
7
7
|
import "@spectrum-web-components/checkbox/sp-checkbox.js";
|
|
8
8
|
import { alertDestructive } from "./dialog.stories.js";
|
|
9
9
|
import { portrait } from "./images.js";
|
|
10
|
-
import "./
|
|
10
|
+
import { disabledButtonDecorator } from "./index.js";
|
|
11
11
|
export default {
|
|
12
12
|
title: "Dialog Base",
|
|
13
13
|
component: "sp-dialog-base",
|
|
@@ -90,14 +90,7 @@ export const disabledButton = () => {
|
|
|
90
90
|
</sp-dialog-base>
|
|
91
91
|
`;
|
|
92
92
|
};
|
|
93
|
-
disabledButton.decorators = [
|
|
94
|
-
(story) => {
|
|
95
|
-
return html`
|
|
96
|
-
${story()}
|
|
97
|
-
<countdown-complete-watcher></countdown-complete-watcher>
|
|
98
|
-
`;
|
|
99
|
-
}
|
|
100
|
-
];
|
|
93
|
+
disabledButton.decorators = [disabledButtonDecorator];
|
|
101
94
|
export const notAgain = () => html`
|
|
102
95
|
<sp-dialog-base
|
|
103
96
|
underlay
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["dialog-base.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/dialog/sp-dialog-base.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport { alertDestructive } from './dialog.stories.js';\nimport { portrait } from './images.js';\nimport './
|
|
5
|
-
"mappings": ";AAWA,SAAS,YAA4B;AACrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/dialog/sp-dialog-base.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport { alertDestructive } from './dialog.stories.js';\nimport { portrait } from './images.js';\nimport { disabledButtonDecorator } from './index.js';\n\nexport default {\n title: 'Dialog Base',\n component: 'sp-dialog-base',\n decorators: [\n (story: () => TemplateResult): TemplateResult => {\n return html`\n <sp-button variant=\"primary\" id=\"trigger\">\n Toggle Dialog\n </sp-button>\n <sp-overlay type=\"modal\" trigger=\"trigger@click\" open>\n ${story()}\n </sp-overlay>\n `;\n },\n ],\n};\n\nexport const Slotted = (): TemplateResult => html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'sp-button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n >\n ${alertDestructive()}\n </sp-dialog-base>\n`;\n\nexport const disabledButton = (): TemplateResult => {\n return html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'sp-button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n @sp-opened=${({ target }: Event & { target: HTMLElement }) => {\n let count = 5;\n const timer = setInterval(() => {\n count -= 1;\n if (!count) {\n (\n document.querySelector(\n '#changing-header'\n ) as HTMLElement\n ).textContent =\n 'The button in this dialog is now enabled';\n (\n document.querySelector(\n '#changing-button'\n ) as HTMLButtonElement\n ).disabled = false;\n clearInterval(timer);\n target.dispatchEvent(new Event('countdown-complete'));\n }\n (\n document.querySelector('.time') as HTMLElement\n ).textContent = count.toString();\n }, 1000);\n }}\n @close=${() => {\n (\n document.querySelector('#changing-header') as HTMLElement\n ).textContent = 'The button in this dialog is disabled';\n (\n document.querySelector(\n '#changing-button'\n ) as HTMLButtonElement\n ).disabled = true;\n (document.querySelector('.time') as HTMLElement).textContent =\n '5';\n }}\n >\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\" id=\"changing-header\">\n The button in this dialog is disabled\n </h2>\n <p>\n After about\n <span class=\"time\">5</span>\n seconds the button with be enabled.\n </p>\n <sp-button disabled slot=\"button\" id=\"changing-button\">\n Ok\n </sp-button>\n </sp-dialog>\n </sp-dialog-base>\n `;\n};\n\ndisabledButton.decorators = [disabledButtonDecorator];\n\nexport const notAgain = (): TemplateResult => html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'sp-button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n >\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">A thing is about to happen</h2>\n <p>Something that might happen a lot is about to happen.</p>\n <p>\n The click events for the \"OK\" button are bound to the story not\n to the components in specific.\n </p>\n <sp-button variant=\"secondary\" treatment=\"fill\" slot=\"button\">\n Ok\n </sp-button>\n <sp-checkbox slot=\"footer\">Don't show me this again</sp-checkbox>\n </sp-dialog>\n </sp-dialog-base>\n`;\n\nexport const moreCustom = (): TemplateResult => html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'sp-button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n >\n <div style=\"display: flex;\">\n <div\n style=\"\n display: grid;\n place-content: center;\n grid-template-columns: calc(100% - 40px);\n grid-template-rows: calc(100% - 40px);\n \"\n >\n <img\n src=${portrait}\n alt=\"\"\n style=\"\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-placement: center;\n \"\n />\n </div>\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">Look at that image</h2>\n <p>\n Its position has been customized beyond the language of\n Spectrum. Be careful with all this power. There's no\n \"mobile\" default for delivering content like this.\n </p>\n <sp-button variant=\"accent\" treatment=\"outline\" slot=\"button\">\n Ok\n </sp-button>\n </sp-dialog>\n </div>\n </sp-dialog-base>\n`;\n\nexport const fullyCustom = (): TemplateResult => html`\n <sp-dialog-base\n underlay\n @click=${(event: Event) => {\n if ((event.target as HTMLElement).localName === 'button') {\n (event.target as HTMLElement).dispatchEvent(\n new Event('close', { bubbles: true, composed: true })\n );\n }\n }}\n >\n <div id=\"fully-custom-dialog\">\n <style>\n #fully-custom-dialog {\n margin: 1em;\n }\n </style>\n <h2>Custom headline</h2>\n <p>\n The click events for the \"Done\" button are bound to the story\n not to the components in specific.\n </p>\n <p>\n This is a demonstration of what is possible with\n <sp-dialog-base>, only, and should not be seen as an\n endorsement for fully custom dialog UIs.\n </p>\n <p>Fully open content area, for whatever DOM you would like.</p>\n <button>Done</button>\n </div>\n </sp-dialog-base>\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/stories/index.js
CHANGED
|
@@ -5,12 +5,14 @@ function nextFrame() {
|
|
|
5
5
|
}
|
|
6
6
|
class OverlayTriggerReady extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
8
|
-
super();
|
|
8
|
+
super(...arguments);
|
|
9
9
|
this.handleTriggerOpened = async () => {
|
|
10
10
|
await nextFrame();
|
|
11
11
|
this.ready(true);
|
|
12
12
|
};
|
|
13
13
|
this.readyPromise = Promise.resolve(false);
|
|
14
|
+
}
|
|
15
|
+
connectedCallback() {
|
|
14
16
|
this.readyPromise = new Promise((res) => {
|
|
15
17
|
this.ready = res;
|
|
16
18
|
this.setup();
|
|
@@ -35,4 +37,31 @@ export const overlayTriggerDecorator = (story) => {
|
|
|
35
37
|
<overlay-trigger-ready></overlay-trigger-ready>
|
|
36
38
|
`;
|
|
37
39
|
};
|
|
40
|
+
class CountdownWatcher extends HTMLElement {
|
|
41
|
+
constructor() {
|
|
42
|
+
super(...arguments);
|
|
43
|
+
this.readyPromise = Promise.resolve(false);
|
|
44
|
+
}
|
|
45
|
+
connectedCallback() {
|
|
46
|
+
this.previousElementSibling.addEventListener(
|
|
47
|
+
"countdown-complete",
|
|
48
|
+
() => {
|
|
49
|
+
this.ready(true);
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
this.readyPromise = new Promise((res) => {
|
|
53
|
+
this.ready = res;
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
get updateComplete() {
|
|
57
|
+
return this.readyPromise;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
customElements.define("countdown-complete-watcher", CountdownWatcher);
|
|
61
|
+
export const disabledButtonDecorator = (story) => {
|
|
62
|
+
return html`
|
|
63
|
+
${story()}
|
|
64
|
+
<countdown-complete-watcher></countdown-complete-watcher>
|
|
65
|
+
`;
|
|
66
|
+
};
|
|
38
67
|
//# sourceMappingURL=index.js.map
|
package/stories/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass OverlayTriggerReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n
|
|
5
|
-
"mappings": ";AAYA,SAAS,YAA4B;AAErC,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEA,MAAM,4BAA4B,YAAY;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass OverlayTriggerReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n connectedCallback(): void {\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n await nextFrame();\n\n const overlay = document.querySelector(\n `overlay-trigger[open]`\n ) as HTMLElement;\n overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n await nextFrame();\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('overlay-trigger-ready', OverlayTriggerReady);\n\nexport const overlayTriggerDecorator = (\n story: () => TemplateResult\n): TemplateResult => {\n return html`\n ${story()}\n <overlay-trigger-ready></overlay-trigger-ready>\n `;\n};\n\nclass CountdownWatcher extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n connectedCallback(): void {\n (this.previousElementSibling as HTMLElement).addEventListener(\n 'countdown-complete',\n () => {\n this.ready(true);\n }\n );\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n });\n }\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('countdown-complete-watcher', CountdownWatcher);\n\nexport const disabledButtonDecorator = (\n story: () => TemplateResult\n): TemplateResult => {\n return html`\n ${story()}\n <countdown-complete-watcher></countdown-complete-watcher>\n `;\n};\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,YAA4B;AAErC,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEA,MAAM,4BAA4B,YAAY;AAAA,EAA9C;AAAA;AAoBI,+BAAsB,YAA2B;AAC7C,YAAM,UAAU;AAEhB,WAAK,MAAM,IAAI;AAAA,IACnB;AAEA,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AAAA;AAAA,EAvB9D,oBAA0B;AACtB,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AACb,WAAK,MAAM;AAAA,IACf,CAAC;AAAA,EACL;AAAA,EAEA,MAAM,QAAuB;AACzB,UAAM,UAAU;AAChB,UAAM,UAAU;AAEhB,UAAM,UAAU,SAAS;AAAA,MACrB;AAAA,IACJ;AACA,YAAQ,iBAAiB,aAAa,KAAK,mBAAmB;AAAA,EAClE;AAAA,EAUA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,yBAAyB,mBAAmB;AAE3D,aAAM,0BAA0B,CACnC,UACiB;AACjB,SAAO;AAAA,UACD,MAAM,CAAC;AAAA;AAAA;AAGjB;AAEA,MAAM,yBAAyB,YAAY;AAAA,EAA3C;AAAA;AAcI,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AAAA;AAAA,EAX9D,oBAA0B;AACtB,IAAC,KAAK,uBAAuC;AAAA,MACzC;AAAA,MACA,MAAM;AACF,aAAK,MAAM,IAAI;AAAA,MACnB;AAAA,IACJ;AACA,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AAAA,IACjB,CAAC;AAAA,EACL;AAAA,EAGA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,8BAA8B,gBAAgB;AAE7D,aAAM,0BAA0B,CACnC,UACiB;AACjB,SAAO;AAAA,UACD,MAAM,CAAC;AAAA;AAAA;AAGjB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/stories/helpers.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
export class CountdownWatcher extends HTMLElement {
|
|
3
|
-
constructor() {
|
|
4
|
-
super();
|
|
5
|
-
this.readyPromise = Promise.resolve(false);
|
|
6
|
-
this.readyPromise = new Promise((res) => {
|
|
7
|
-
this.ready = res;
|
|
8
|
-
this.setup();
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
setup() {
|
|
12
|
-
this.previousElementSibling.addEventListener(
|
|
13
|
-
"countdown-complete",
|
|
14
|
-
() => {
|
|
15
|
-
this.ready(true);
|
|
16
|
-
}
|
|
17
|
-
);
|
|
18
|
-
}
|
|
19
|
-
get updateComplete() {
|
|
20
|
-
return this.readyPromise;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
customElements.define("countdown-complete-watcher", CountdownWatcher);
|
|
24
|
-
//# sourceMappingURL=helpers.js.map
|
package/stories/helpers.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["helpers.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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\nexport class CountdownWatcher extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n setup(): void {\n (this.previousElementSibling as HTMLElement).addEventListener(\n 'countdown-complete',\n () => {\n this.ready(true);\n }\n );\n }\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('countdown-complete-watcher', CountdownWatcher);\n"],
|
|
5
|
-
"mappings": ";AAYO,aAAM,yBAAyB,YAAY;AAAA,EAG9C,cAAc;AACV,UAAM;AAgBV,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AAf1D,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AACb,WAAK,MAAM;AAAA,IACf,CAAC;AAAA,EACL;AAAA,EAEA,QAAc;AACV,IAAC,KAAK,uBAAuC;AAAA,MACzC;AAAA,MACA,MAAM;AACF,aAAK,MAAM,IAAI;AAAA,MACnB;AAAA,IACJ;AAAA,EACJ;AAAA,EAIA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,8BAA8B,gBAAgB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|