@spectrum-web-components/card 0.10.13 → 0.10.14-devmode.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/package.json +26 -13
- package/sp-card.dev.js +3 -0
- package/sp-card.dev.js.map +7 -0
- package/sp-card.js +3 -14
- package/sp-card.js.map +7 -1
- package/src/Card.dev.js +285 -0
- package/src/Card.dev.js.map +7 -0
- package/src/Card.js +219 -239
- package/src/Card.js.map +7 -1
- package/src/card.css.dev.js +238 -0
- package/src/card.css.dev.js.map +7 -0
- package/src/card.css.js +3 -14
- package/src/card.css.js.map +7 -1
- package/src/index.dev.js +2 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -13
- package/src/index.js.map +7 -1
- package/src/spectrum-card.css.dev.js +236 -0
- package/src/spectrum-card.css.dev.js.map +7 -0
- package/src/spectrum-card.css.js +3 -14
- package/src/spectrum-card.css.js.map +7 -1
- package/stories/card.stories.js +68 -79
- package/stories/card.stories.js.map +7 -1
- package/stories/images.js +3 -14
- package/stories/images.js.map +7 -1
- package/test/benchmark/test-basic.js +5 -16
- package/test/benchmark/test-basic.js.map +7 -1
- package/test/card.test-vrt.js +4 -15
- package/test/card.test-vrt.js.map +7 -1
- package/test/card.test.js +225 -234
- package/test/card.test.js.map +7 -1
package/src/Card.js
CHANGED
|
@@ -1,156 +1,150 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
* @slot heading - HTML content to be listed as the heading
|
|
32
|
-
* @slot subheading - HTML content to be listed as the subheading
|
|
33
|
-
* @slot description - A description of the card
|
|
34
|
-
* @slot actions - an `sp-action-menu` element outlining actions to take on the represened object
|
|
35
|
-
* @slot footer - Footer text
|
|
36
|
-
*/
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
+
if (decorator = decorators[i])
|
|
7
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
+
if (kind && result)
|
|
9
|
+
__defProp(target, key, result);
|
|
10
|
+
return result;
|
|
11
|
+
};
|
|
12
|
+
import {
|
|
13
|
+
html,
|
|
14
|
+
SizedMixin,
|
|
15
|
+
SpectrumElement
|
|
16
|
+
} from "@spectrum-web-components/base";
|
|
17
|
+
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
18
|
+
import {
|
|
19
|
+
property,
|
|
20
|
+
query
|
|
21
|
+
} from "@spectrum-web-components/base/src/decorators.js";
|
|
22
|
+
import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
|
|
23
|
+
import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
|
|
24
|
+
import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
|
|
25
|
+
import "@spectrum-web-components/asset/sp-asset.js";
|
|
26
|
+
import "@spectrum-web-components/checkbox/sp-checkbox.js";
|
|
27
|
+
import "@spectrum-web-components/quick-actions/sp-quick-actions.js";
|
|
28
|
+
import cardStyles from "./card.css.js";
|
|
29
|
+
import headingStyles from "@spectrum-web-components/styles/heading.js";
|
|
30
|
+
import detailStyles from "@spectrum-web-components/styles/detail.js";
|
|
37
31
|
export class Card extends LikeAnchor(SizedMixin(ObserveSlotPresence(FocusVisiblePolyfillMixin(SpectrumElement), [
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
'[slot="cover-photo"]',
|
|
33
|
+
'[slot="preview"]'
|
|
40
34
|
]), {
|
|
41
|
-
|
|
35
|
+
validSizes: ["s", "m"]
|
|
42
36
|
})) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
37
|
+
constructor() {
|
|
38
|
+
super(...arguments);
|
|
39
|
+
this.variant = "standard";
|
|
40
|
+
this._selected = false;
|
|
41
|
+
this.heading = "";
|
|
42
|
+
this.horizontal = false;
|
|
43
|
+
this.focused = false;
|
|
44
|
+
this.toggles = false;
|
|
45
|
+
this.value = "";
|
|
46
|
+
this.subheading = "";
|
|
47
|
+
this.handleFocusin = (event) => {
|
|
48
|
+
this.focused = true;
|
|
49
|
+
const target = event.composedPath()[0];
|
|
50
|
+
if (target !== this) {
|
|
51
|
+
this.removeEventListener("keydown", this.handleKeydown);
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
this.addEventListener("keydown", this.handleKeydown);
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
static get styles() {
|
|
58
|
+
return [headingStyles, detailStyles, cardStyles];
|
|
59
|
+
}
|
|
60
|
+
get selected() {
|
|
61
|
+
return this._selected;
|
|
62
|
+
}
|
|
63
|
+
set selected(selected) {
|
|
64
|
+
if (selected === this.selected)
|
|
65
|
+
return;
|
|
66
|
+
this._selected = selected;
|
|
67
|
+
this.requestUpdate("selected", !this._selected);
|
|
68
|
+
}
|
|
69
|
+
get hasCoverPhoto() {
|
|
70
|
+
return this.getSlotContentPresence('[slot="cover-photo"]');
|
|
71
|
+
}
|
|
72
|
+
get hasPreview() {
|
|
73
|
+
return this.getSlotContentPresence('[slot="preview"]');
|
|
74
|
+
}
|
|
75
|
+
click() {
|
|
76
|
+
var _a;
|
|
77
|
+
(_a = this.likeAnchor) == null ? void 0 : _a.click();
|
|
78
|
+
}
|
|
79
|
+
handleFocusout(event) {
|
|
80
|
+
this.focused = false;
|
|
81
|
+
const target = event.composedPath()[0];
|
|
82
|
+
if (target === this) {
|
|
83
|
+
this.removeEventListener("keydown", this.handleKeydown);
|
|
62
84
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
this._selected = selected;
|
|
73
|
-
this.requestUpdate('selected', !this._selected);
|
|
74
|
-
}
|
|
75
|
-
get hasCoverPhoto() {
|
|
76
|
-
return this.getSlotContentPresence('[slot="cover-photo"]');
|
|
77
|
-
}
|
|
78
|
-
get hasPreview() {
|
|
79
|
-
return this.getSlotContentPresence('[slot="preview"]');
|
|
80
|
-
}
|
|
81
|
-
click() {
|
|
82
|
-
var _a;
|
|
83
|
-
(_a = this.likeAnchor) === null || _a === void 0 ? void 0 : _a.click();
|
|
84
|
-
}
|
|
85
|
-
handleFocusout(event) {
|
|
86
|
-
this.focused = false;
|
|
87
|
-
const target = event.composedPath()[0];
|
|
88
|
-
if (target === this) {
|
|
89
|
-
this.removeEventListener('keydown', this.handleKeydown);
|
|
85
|
+
}
|
|
86
|
+
handleKeydown(event) {
|
|
87
|
+
const { code } = event;
|
|
88
|
+
switch (code) {
|
|
89
|
+
case "Space":
|
|
90
|
+
this.toggleSelected();
|
|
91
|
+
if (this.toggles) {
|
|
92
|
+
event.preventDefault();
|
|
93
|
+
break;
|
|
90
94
|
}
|
|
95
|
+
case "Enter":
|
|
96
|
+
case "NumpadEnter":
|
|
97
|
+
this.click();
|
|
91
98
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
99
|
+
}
|
|
100
|
+
handleSelectedChange(event) {
|
|
101
|
+
event.stopPropagation();
|
|
102
|
+
this.selected = event.target.checked;
|
|
103
|
+
this.announceChange();
|
|
104
|
+
}
|
|
105
|
+
toggleSelected() {
|
|
106
|
+
if (!this.toggles) {
|
|
107
|
+
this.dispatchEvent(new Event("click", {
|
|
108
|
+
bubbles: true,
|
|
109
|
+
composed: true
|
|
110
|
+
}));
|
|
111
|
+
return;
|
|
105
112
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
113
|
+
this.selected = !this.selected;
|
|
114
|
+
this.announceChange();
|
|
115
|
+
}
|
|
116
|
+
announceChange() {
|
|
117
|
+
const applyDefault = this.dispatchEvent(new Event("change", {
|
|
118
|
+
cancelable: true,
|
|
119
|
+
bubbles: true,
|
|
120
|
+
composed: true
|
|
121
|
+
}));
|
|
122
|
+
if (!applyDefault) {
|
|
123
|
+
this.selected = !this.selected;
|
|
110
124
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
composed: true,
|
|
116
|
-
}));
|
|
117
|
-
return;
|
|
118
|
-
}
|
|
119
|
-
this.selected = !this.selected;
|
|
120
|
-
this.announceChange();
|
|
125
|
+
}
|
|
126
|
+
stopPropagationOnHref(event) {
|
|
127
|
+
if (this.href) {
|
|
128
|
+
event.stopPropagation();
|
|
121
129
|
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if (hasAnchor)
|
|
141
|
-
return;
|
|
142
|
-
const start = +new Date();
|
|
143
|
-
const handleEnd = () => {
|
|
144
|
-
const end = +new Date();
|
|
145
|
-
if (end - start < 200) {
|
|
146
|
-
this.click();
|
|
147
|
-
}
|
|
148
|
-
this.removeEventListener('pointerup', handleEnd);
|
|
149
|
-
};
|
|
150
|
-
this.addEventListener('pointerup', handleEnd);
|
|
151
|
-
}
|
|
152
|
-
get renderHeading() {
|
|
153
|
-
return html `
|
|
130
|
+
}
|
|
131
|
+
handlePointerdown(event) {
|
|
132
|
+
const path = event.composedPath();
|
|
133
|
+
const hasAnchor = path.some((el) => el.localName === "a");
|
|
134
|
+
if (hasAnchor)
|
|
135
|
+
return;
|
|
136
|
+
const start = +new Date();
|
|
137
|
+
const handleEnd = () => {
|
|
138
|
+
const end = +new Date();
|
|
139
|
+
if (end - start < 200) {
|
|
140
|
+
this.click();
|
|
141
|
+
}
|
|
142
|
+
this.removeEventListener("pointerup", handleEnd);
|
|
143
|
+
};
|
|
144
|
+
this.addEventListener("pointerup", handleEnd);
|
|
145
|
+
}
|
|
146
|
+
get renderHeading() {
|
|
147
|
+
return html`
|
|
154
148
|
<div
|
|
155
149
|
class="title spectrum-Heading spectrum-Heading--sizeXS"
|
|
156
150
|
id="heading"
|
|
@@ -158,87 +152,76 @@ export class Card extends LikeAnchor(SizedMixin(ObserveSlotPresence(FocusVisible
|
|
|
158
152
|
<slot name="heading">${this.heading}</slot>
|
|
159
153
|
</div>
|
|
160
154
|
`;
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
155
|
+
}
|
|
156
|
+
get renderPreviewImage() {
|
|
157
|
+
return html`
|
|
164
158
|
<sp-asset id="preview" variant=${ifDefined(this.asset)}>
|
|
165
159
|
<slot name="preview"></slot>
|
|
166
160
|
</sp-asset>
|
|
167
161
|
`;
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
162
|
+
}
|
|
163
|
+
get renderCoverImage() {
|
|
164
|
+
return html`
|
|
171
165
|
<sp-asset id="cover-photo" variant=${ifDefined(this.asset)}>
|
|
172
166
|
<slot name="cover-photo"></slot>
|
|
173
167
|
</sp-asset>
|
|
174
168
|
`;
|
|
169
|
+
}
|
|
170
|
+
get images() {
|
|
171
|
+
const images = [];
|
|
172
|
+
if (this.hasPreview)
|
|
173
|
+
images.push(this.renderPreviewImage);
|
|
174
|
+
if (this.hasCoverPhoto)
|
|
175
|
+
images.push(this.renderCoverImage);
|
|
176
|
+
return images;
|
|
177
|
+
}
|
|
178
|
+
renderImage() {
|
|
179
|
+
if (this.horizontal) {
|
|
180
|
+
return this.images;
|
|
175
181
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
if (this.hasPreview)
|
|
179
|
-
images.push(this.renderPreviewImage);
|
|
180
|
-
if (this.hasCoverPhoto)
|
|
181
|
-
images.push(this.renderCoverImage);
|
|
182
|
-
return images;
|
|
183
|
-
}
|
|
184
|
-
renderImage() {
|
|
185
|
-
if (this.horizontal) {
|
|
186
|
-
return this.images;
|
|
187
|
-
}
|
|
188
|
-
if (this.variant !== 'standard') {
|
|
189
|
-
return [this.renderPreviewImage];
|
|
190
|
-
}
|
|
191
|
-
return this.images;
|
|
182
|
+
if (this.variant !== "standard") {
|
|
183
|
+
return [this.renderPreviewImage];
|
|
192
184
|
}
|
|
193
|
-
|
|
194
|
-
|
|
185
|
+
return this.images;
|
|
186
|
+
}
|
|
187
|
+
get renderSubtitleAndDescription() {
|
|
188
|
+
return html`
|
|
195
189
|
<div class="subtitle spectrum-Detail spectrum-Detail--sizeS">
|
|
196
190
|
<slot name="subheading">${this.subheading}</slot>
|
|
197
191
|
</div>
|
|
198
192
|
<slot name="description"></slot>
|
|
199
193
|
`;
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
194
|
+
}
|
|
195
|
+
render() {
|
|
196
|
+
return html`
|
|
203
197
|
<div class="body">
|
|
204
198
|
<div class="header">
|
|
205
199
|
${this.renderHeading}
|
|
206
|
-
${this.variant ===
|
|
207
|
-
|
|
208
|
-
: html ``}
|
|
209
|
-
${this.variant !== 'quiet' || this.size !== 's'
|
|
210
|
-
? html `
|
|
200
|
+
${this.variant === "gallery" ? this.renderSubtitleAndDescription : html``}
|
|
201
|
+
${this.variant !== "quiet" || this.size !== "s" ? html`
|
|
211
202
|
<div
|
|
212
203
|
class="action-button"
|
|
213
204
|
@pointerdown=${this.stopPropagationOnHref}
|
|
214
205
|
>
|
|
215
206
|
<slot name="actions"></slot>
|
|
216
207
|
</div>
|
|
217
|
-
`
|
|
218
|
-
: html ``}
|
|
208
|
+
` : html``}
|
|
219
209
|
</div>
|
|
220
|
-
${this.variant !==
|
|
221
|
-
? html `
|
|
210
|
+
${this.variant !== "gallery" ? html`
|
|
222
211
|
<div class="content">
|
|
223
212
|
${this.renderSubtitleAndDescription}
|
|
224
213
|
</div>
|
|
225
|
-
`
|
|
226
|
-
: html ``}
|
|
214
|
+
` : html``}
|
|
227
215
|
</div>
|
|
228
|
-
${this.href
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
: html ``}
|
|
234
|
-
${this.variant === 'standard'
|
|
235
|
-
? html `
|
|
216
|
+
${this.href ? this.renderAnchor({
|
|
217
|
+
id: "like-anchor",
|
|
218
|
+
labelledby: "heading"
|
|
219
|
+
}) : html``}
|
|
220
|
+
${this.variant === "standard" ? html`
|
|
236
221
|
<slot name="footer"></slot>
|
|
237
|
-
`
|
|
238
|
-
: html ``}
|
|
222
|
+
` : html``}
|
|
239
223
|
${this.renderImage()}
|
|
240
|
-
${this.toggles
|
|
241
|
-
? html `
|
|
224
|
+
${this.toggles ? html`
|
|
242
225
|
<sp-quick-actions
|
|
243
226
|
class="quick-actions"
|
|
244
227
|
@pointerdown=${this.stopPropagationOnHref}
|
|
@@ -250,56 +233,53 @@ export class Card extends LikeAnchor(SizedMixin(ObserveSlotPresence(FocusVisible
|
|
|
250
233
|
tabindex="-1"
|
|
251
234
|
></sp-checkbox>
|
|
252
235
|
</sp-quick-actions>
|
|
253
|
-
`
|
|
254
|
-
|
|
255
|
-
${this.variant === 'quiet' && this.size === 's'
|
|
256
|
-
? html `
|
|
236
|
+
` : html``}
|
|
237
|
+
${this.variant === "quiet" && this.size === "s" ? html`
|
|
257
238
|
<sp-quick-actions
|
|
258
239
|
class="spectrum-QuickActions actions"
|
|
259
240
|
@pointerdown=${this.stopPropagationOnHref}
|
|
260
241
|
>
|
|
261
242
|
<slot name="actions"></slot>
|
|
262
243
|
</sp-quick-actions>
|
|
263
|
-
`
|
|
264
|
-
: html ``}
|
|
244
|
+
` : html``}
|
|
265
245
|
`;
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
246
|
+
}
|
|
247
|
+
firstUpdated(changes) {
|
|
248
|
+
super.firstUpdated(changes);
|
|
249
|
+
this.addEventListener("pointerdown", this.handlePointerdown);
|
|
250
|
+
this.addEventListener("focusin", this.handleFocusin);
|
|
251
|
+
this.shadowRoot.addEventListener("focusin", this.handleFocusin);
|
|
252
|
+
this.addEventListener("focusout", this.handleFocusout);
|
|
253
|
+
}
|
|
274
254
|
}
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
], Card.prototype, "asset",
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
], Card.prototype, "variant",
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
], Card.prototype, "selected",
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
], Card.prototype, "heading",
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
], Card.prototype, "horizontal",
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
], Card.prototype, "likeAnchor",
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
], Card.prototype, "focused",
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
], Card.prototype, "toggles",
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
], Card.prototype, "value",
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
], Card.prototype, "subheading",
|
|
305
|
-
//# sourceMappingURL=Card.js.map
|
|
255
|
+
__decorateClass([
|
|
256
|
+
property()
|
|
257
|
+
], Card.prototype, "asset", 2);
|
|
258
|
+
__decorateClass([
|
|
259
|
+
property({ reflect: true })
|
|
260
|
+
], Card.prototype, "variant", 2);
|
|
261
|
+
__decorateClass([
|
|
262
|
+
property({ type: Boolean, reflect: true })
|
|
263
|
+
], Card.prototype, "selected", 1);
|
|
264
|
+
__decorateClass([
|
|
265
|
+
property()
|
|
266
|
+
], Card.prototype, "heading", 2);
|
|
267
|
+
__decorateClass([
|
|
268
|
+
property({ type: Boolean, reflect: true })
|
|
269
|
+
], Card.prototype, "horizontal", 2);
|
|
270
|
+
__decorateClass([
|
|
271
|
+
query("#like-anchor")
|
|
272
|
+
], Card.prototype, "likeAnchor", 2);
|
|
273
|
+
__decorateClass([
|
|
274
|
+
property({ type: Boolean, reflect: true })
|
|
275
|
+
], Card.prototype, "focused", 2);
|
|
276
|
+
__decorateClass([
|
|
277
|
+
property({ type: Boolean, reflect: true })
|
|
278
|
+
], Card.prototype, "toggles", 2);
|
|
279
|
+
__decorateClass([
|
|
280
|
+
property()
|
|
281
|
+
], Card.prototype, "value", 2);
|
|
282
|
+
__decorateClass([
|
|
283
|
+
property()
|
|
284
|
+
], Card.prototype, "subheading", 2);
|
|
285
|
+
//# sourceMappingURL=Card.js.map
|
package/src/Card.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["Card.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 SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport '@spectrum-web-components/asset/sp-asset.js';\n\nimport { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport '@spectrum-web-components/quick-actions/sp-quick-actions.js';\nimport cardStyles from './card.css.js';\nimport headingStyles from '@spectrum-web-components/styles/heading.js';\nimport detailStyles from '@spectrum-web-components/styles/detail.js';\n\n/**\n * @element sp-card\n *\n * @fires change - Announces a change in the `selected` property of a card\n * @slot preview - This is the preview image for Gallery Cards\n * @slot cover-photo - This is the cover photo for Default and Quiet Cards\n * @slot heading - HTML content to be listed as the heading\n * @slot subheading - HTML content to be listed as the subheading\n * @slot description - A description of the card\n * @slot actions - an `sp-action-menu` element outlining actions to take on the represened object\n * @slot footer - Footer text\n */\nexport class Card extends LikeAnchor(\n SizedMixin(\n ObserveSlotPresence(FocusVisiblePolyfillMixin(SpectrumElement), [\n '[slot=\"cover-photo\"]',\n '[slot=\"preview\"]',\n ]),\n {\n validSizes: ['s', 'm'],\n }\n )\n) {\n public static override get styles(): CSSResultArray {\n return [headingStyles, detailStyles, cardStyles];\n }\n\n @property()\n public asset?: 'file' | 'folder';\n\n @property({ reflect: true })\n public variant: 'standard' | 'gallery' | 'quiet' = 'standard';\n\n @property({ type: Boolean, reflect: true })\n get selected(): boolean {\n return this._selected;\n }\n set selected(selected: boolean) {\n if (selected === this.selected) return;\n this._selected = selected;\n this.requestUpdate('selected', !this._selected);\n }\n\n private _selected = false;\n\n @property()\n public heading = '';\n\n @property({ type: Boolean, reflect: true })\n public horizontal = false;\n\n @query('#like-anchor')\n private likeAnchor?: HTMLAnchorElement;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: Boolean, reflect: true })\n public toggles = false;\n\n @property()\n public value = '';\n\n @property()\n public subheading = '';\n\n protected get hasCoverPhoto(): boolean {\n return this.getSlotContentPresence('[slot=\"cover-photo\"]');\n }\n\n protected get hasPreview(): boolean {\n return this.getSlotContentPresence('[slot=\"preview\"]');\n }\n\n public override click(): void {\n this.likeAnchor?.click();\n }\n\n private handleFocusin = (event: Event): void => {\n this.focused = true;\n const target = event.composedPath()[0];\n if (target !== this) {\n this.removeEventListener('keydown', this.handleKeydown);\n return;\n }\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleFocusout(event: Event): void {\n this.focused = false;\n const target = event.composedPath()[0];\n if (target === this) {\n this.removeEventListener('keydown', this.handleKeydown);\n }\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.toggleSelected();\n if (this.toggles) {\n event.preventDefault();\n break;\n }\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n }\n }\n\n private handleSelectedChange(event: Event & { target: Checkbox }): void {\n event.stopPropagation();\n this.selected = event.target.checked;\n this.announceChange();\n }\n\n public toggleSelected(): void {\n if (!this.toggles) {\n this.dispatchEvent(\n new Event('click', {\n bubbles: true,\n composed: true,\n })\n );\n return;\n }\n this.selected = !this.selected;\n this.announceChange();\n }\n\n private announceChange(): void {\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n this.selected = !this.selected;\n }\n }\n\n private stopPropagationOnHref(event: Event): void {\n if (this.href) {\n event.stopPropagation();\n }\n }\n\n private handlePointerdown(event: Event): void {\n const path = event.composedPath();\n const hasAnchor = path.some(\n (el) => (el as HTMLElement).localName === 'a'\n );\n if (hasAnchor) return;\n const start = +new Date();\n const handleEnd = (): void => {\n const end = +new Date();\n if (end - start < 200) {\n this.click();\n }\n this.removeEventListener('pointerup', handleEnd);\n };\n this.addEventListener('pointerup', handleEnd);\n }\n\n protected get renderHeading(): TemplateResult {\n return html`\n <div\n class=\"title spectrum-Heading spectrum-Heading--sizeXS\"\n id=\"heading\"\n >\n <slot name=\"heading\">${this.heading}</slot>\n </div>\n `;\n }\n\n protected get renderPreviewImage(): TemplateResult {\n return html`\n <sp-asset id=\"preview\" variant=${ifDefined(this.asset)}>\n <slot name=\"preview\"></slot>\n </sp-asset>\n `;\n }\n\n protected get renderCoverImage(): TemplateResult {\n return html`\n <sp-asset id=\"cover-photo\" variant=${ifDefined(this.asset)}>\n <slot name=\"cover-photo\"></slot>\n </sp-asset>\n `;\n }\n\n protected get images(): TemplateResult[] {\n const images: TemplateResult[] = [];\n if (this.hasPreview) images.push(this.renderPreviewImage);\n if (this.hasCoverPhoto) images.push(this.renderCoverImage);\n return images;\n }\n\n private renderImage(): TemplateResult[] {\n if (this.horizontal) {\n return this.images;\n }\n if (this.variant !== 'standard') {\n return [this.renderPreviewImage];\n }\n return this.images;\n }\n\n private get renderSubtitleAndDescription(): TemplateResult {\n return html`\n <div class=\"subtitle spectrum-Detail spectrum-Detail--sizeS\">\n <slot name=\"subheading\">${this.subheading}</slot>\n </div>\n <slot name=\"description\"></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div class=\"body\">\n <div class=\"header\">\n ${this.renderHeading}\n ${this.variant === 'gallery'\n ? this.renderSubtitleAndDescription\n : html``}\n ${this.variant !== 'quiet' || this.size !== 's'\n ? html`\n <div\n class=\"action-button\"\n @pointerdown=${this.stopPropagationOnHref}\n >\n <slot name=\"actions\"></slot>\n </div>\n `\n : html``}\n </div>\n ${this.variant !== 'gallery'\n ? html`\n <div class=\"content\">\n ${this.renderSubtitleAndDescription}\n </div>\n `\n : html``}\n </div>\n ${this.href\n ? this.renderAnchor({\n id: 'like-anchor',\n labelledby: 'heading',\n })\n : html``}\n ${this.variant === 'standard'\n ? html`\n <slot name=\"footer\"></slot>\n `\n : html``}\n ${this.renderImage()}\n ${this.toggles\n ? html`\n <sp-quick-actions\n class=\"quick-actions\"\n @pointerdown=${this.stopPropagationOnHref}\n >\n <sp-checkbox\n class=\"checkbox\"\n @change=${this.handleSelectedChange}\n ?checked=${this.selected}\n tabindex=\"-1\"\n ></sp-checkbox>\n </sp-quick-actions>\n `\n : html``}\n ${this.variant === 'quiet' && this.size === 's'\n ? html`\n <sp-quick-actions\n class=\"spectrum-QuickActions actions\"\n @pointerdown=${this.stopPropagationOnHref}\n >\n <slot name=\"actions\"></slot>\n </sp-quick-actions>\n `\n : html``}\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('pointerdown', this.handlePointerdown);\n this.addEventListener('focusin', this.handleFocusin);\n this.shadowRoot.addEventListener('focusin', this.handleFocusin);\n this.addEventListener('focusout', this.handleFocusout);\n }\n}\n"]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["Card.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport '@spectrum-web-components/asset/sp-asset.js';\n\nimport { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport '@spectrum-web-components/quick-actions/sp-quick-actions.js';\nimport cardStyles from './card.css.js';\nimport headingStyles from '@spectrum-web-components/styles/heading.js';\nimport detailStyles from '@spectrum-web-components/styles/detail.js';\n\n/**\n * @element sp-card\n *\n * @fires change - Announces a change in the `selected` property of a card\n * @slot preview - This is the preview image for Gallery Cards\n * @slot cover-photo - This is the cover photo for Default and Quiet Cards\n * @slot heading - HTML content to be listed as the heading\n * @slot subheading - HTML content to be listed as the subheading\n * @slot description - A description of the card\n * @slot actions - an `sp-action-menu` element outlining actions to take on the represened object\n * @slot footer - Footer text\n */\nexport class Card extends LikeAnchor(\n SizedMixin(\n ObserveSlotPresence(FocusVisiblePolyfillMixin(SpectrumElement), [\n '[slot=\"cover-photo\"]',\n '[slot=\"preview\"]',\n ]),\n {\n validSizes: ['s', 'm'],\n }\n )\n) {\n public static override get styles(): CSSResultArray {\n return [headingStyles, detailStyles, cardStyles];\n }\n\n @property()\n public asset?: 'file' | 'folder';\n\n @property({ reflect: true })\n public variant: 'standard' | 'gallery' | 'quiet' = 'standard';\n\n @property({ type: Boolean, reflect: true })\n get selected(): boolean {\n return this._selected;\n }\n set selected(selected: boolean) {\n if (selected === this.selected) return;\n this._selected = selected;\n this.requestUpdate('selected', !this._selected);\n }\n\n private _selected = false;\n\n @property()\n public heading = '';\n\n @property({ type: Boolean, reflect: true })\n public horizontal = false;\n\n @query('#like-anchor')\n private likeAnchor?: HTMLAnchorElement;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: Boolean, reflect: true })\n public toggles = false;\n\n @property()\n public value = '';\n\n @property()\n public subheading = '';\n\n protected get hasCoverPhoto(): boolean {\n return this.getSlotContentPresence('[slot=\"cover-photo\"]');\n }\n\n protected get hasPreview(): boolean {\n return this.getSlotContentPresence('[slot=\"preview\"]');\n }\n\n public override click(): void {\n this.likeAnchor?.click();\n }\n\n private handleFocusin = (event: Event): void => {\n this.focused = true;\n const target = event.composedPath()[0];\n if (target !== this) {\n this.removeEventListener('keydown', this.handleKeydown);\n return;\n }\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleFocusout(event: Event): void {\n this.focused = false;\n const target = event.composedPath()[0];\n if (target === this) {\n this.removeEventListener('keydown', this.handleKeydown);\n }\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.toggleSelected();\n if (this.toggles) {\n event.preventDefault();\n break;\n }\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n }\n }\n\n private handleSelectedChange(event: Event & { target: Checkbox }): void {\n event.stopPropagation();\n this.selected = event.target.checked;\n this.announceChange();\n }\n\n public toggleSelected(): void {\n if (!this.toggles) {\n this.dispatchEvent(\n new Event('click', {\n bubbles: true,\n composed: true,\n })\n );\n return;\n }\n this.selected = !this.selected;\n this.announceChange();\n }\n\n private announceChange(): void {\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n this.selected = !this.selected;\n }\n }\n\n private stopPropagationOnHref(event: Event): void {\n if (this.href) {\n event.stopPropagation();\n }\n }\n\n private handlePointerdown(event: Event): void {\n const path = event.composedPath();\n const hasAnchor = path.some(\n (el) => (el as HTMLElement).localName === 'a'\n );\n if (hasAnchor) return;\n const start = +new Date();\n const handleEnd = (): void => {\n const end = +new Date();\n if (end - start < 200) {\n this.click();\n }\n this.removeEventListener('pointerup', handleEnd);\n };\n this.addEventListener('pointerup', handleEnd);\n }\n\n protected get renderHeading(): TemplateResult {\n return html`\n <div\n class=\"title spectrum-Heading spectrum-Heading--sizeXS\"\n id=\"heading\"\n >\n <slot name=\"heading\">${this.heading}</slot>\n </div>\n `;\n }\n\n protected get renderPreviewImage(): TemplateResult {\n return html`\n <sp-asset id=\"preview\" variant=${ifDefined(this.asset)}>\n <slot name=\"preview\"></slot>\n </sp-asset>\n `;\n }\n\n protected get renderCoverImage(): TemplateResult {\n return html`\n <sp-asset id=\"cover-photo\" variant=${ifDefined(this.asset)}>\n <slot name=\"cover-photo\"></slot>\n </sp-asset>\n `;\n }\n\n protected get images(): TemplateResult[] {\n const images: TemplateResult[] = [];\n if (this.hasPreview) images.push(this.renderPreviewImage);\n if (this.hasCoverPhoto) images.push(this.renderCoverImage);\n return images;\n }\n\n private renderImage(): TemplateResult[] {\n if (this.horizontal) {\n return this.images;\n }\n if (this.variant !== 'standard') {\n return [this.renderPreviewImage];\n }\n return this.images;\n }\n\n private get renderSubtitleAndDescription(): TemplateResult {\n return html`\n <div class=\"subtitle spectrum-Detail spectrum-Detail--sizeS\">\n <slot name=\"subheading\">${this.subheading}</slot>\n </div>\n <slot name=\"description\"></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div class=\"body\">\n <div class=\"header\">\n ${this.renderHeading}\n ${this.variant === 'gallery'\n ? this.renderSubtitleAndDescription\n : html``}\n ${this.variant !== 'quiet' || this.size !== 's'\n ? html`\n <div\n class=\"action-button\"\n @pointerdown=${this.stopPropagationOnHref}\n >\n <slot name=\"actions\"></slot>\n </div>\n `\n : html``}\n </div>\n ${this.variant !== 'gallery'\n ? html`\n <div class=\"content\">\n ${this.renderSubtitleAndDescription}\n </div>\n `\n : html``}\n </div>\n ${this.href\n ? this.renderAnchor({\n id: 'like-anchor',\n labelledby: 'heading',\n })\n : html``}\n ${this.variant === 'standard'\n ? html`\n <slot name=\"footer\"></slot>\n `\n : html``}\n ${this.renderImage()}\n ${this.toggles\n ? html`\n <sp-quick-actions\n class=\"quick-actions\"\n @pointerdown=${this.stopPropagationOnHref}\n >\n <sp-checkbox\n class=\"checkbox\"\n @change=${this.handleSelectedChange}\n ?checked=${this.selected}\n tabindex=\"-1\"\n ></sp-checkbox>\n </sp-quick-actions>\n `\n : html``}\n ${this.variant === 'quiet' && this.size === 's'\n ? html`\n <sp-quick-actions\n class=\"spectrum-QuickActions actions\"\n @pointerdown=${this.stopPropagationOnHref}\n >\n <slot name=\"actions\"></slot>\n </sp-quick-actions>\n `\n : html``}\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('pointerdown', this.handlePointerdown);\n this.addEventListener('focusin', this.handleFocusin);\n this.shadowRoot.addEventListener('focusin', this.handleFocusin);\n this.addEventListener('focusout', this.handleFocusout);\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|