@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/src/Card.js CHANGED
@@ -1,156 +1,150 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { __decorate } from "tslib";
13
- import { html, SizedMixin, SpectrumElement, } from '@spectrum-web-components/base';
14
- import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
15
- import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
16
- import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
17
- import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
18
- import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
19
- import '@spectrum-web-components/asset/sp-asset.js';
20
- import '@spectrum-web-components/checkbox/sp-checkbox.js';
21
- import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
22
- import cardStyles from './card.css.js';
23
- import headingStyles from '@spectrum-web-components/styles/heading.js';
24
- import detailStyles from '@spectrum-web-components/styles/detail.js';
25
- /**
26
- * @element sp-card
27
- *
28
- * @fires change - Announces a change in the `selected` property of a card
29
- * @slot preview - This is the preview image for Gallery Cards
30
- * @slot cover-photo - This is the cover photo for Default and Quiet Cards
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
- '[slot="cover-photo"]',
39
- '[slot="preview"]',
32
+ '[slot="cover-photo"]',
33
+ '[slot="preview"]'
40
34
  ]), {
41
- validSizes: ['s', 'm'],
35
+ validSizes: ["s", "m"]
42
36
  })) {
43
- constructor() {
44
- super(...arguments);
45
- this.variant = 'standard';
46
- this._selected = false;
47
- this.heading = '';
48
- this.horizontal = false;
49
- this.focused = false;
50
- this.toggles = false;
51
- this.value = '';
52
- this.subheading = '';
53
- this.handleFocusin = (event) => {
54
- this.focused = true;
55
- const target = event.composedPath()[0];
56
- if (target !== this) {
57
- this.removeEventListener('keydown', this.handleKeydown);
58
- return;
59
- }
60
- this.addEventListener('keydown', this.handleKeydown);
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
- static get styles() {
64
- return [headingStyles, detailStyles, cardStyles];
65
- }
66
- get selected() {
67
- return this._selected;
68
- }
69
- set selected(selected) {
70
- if (selected === this.selected)
71
- return;
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
- handleKeydown(event) {
93
- const { code } = event;
94
- switch (code) {
95
- case 'Space':
96
- this.toggleSelected();
97
- if (this.toggles) {
98
- event.preventDefault();
99
- break;
100
- }
101
- case 'Enter':
102
- case 'NumpadEnter':
103
- this.click();
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
- handleSelectedChange(event) {
107
- event.stopPropagation();
108
- this.selected = event.target.checked;
109
- this.announceChange();
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
- toggleSelected() {
112
- if (!this.toggles) {
113
- this.dispatchEvent(new Event('click', {
114
- bubbles: true,
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
- announceChange() {
123
- const applyDefault = this.dispatchEvent(new Event('change', {
124
- cancelable: true,
125
- bubbles: true,
126
- composed: true,
127
- }));
128
- if (!applyDefault) {
129
- this.selected = !this.selected;
130
- }
131
- }
132
- stopPropagationOnHref(event) {
133
- if (this.href) {
134
- event.stopPropagation();
135
- }
136
- }
137
- handlePointerdown(event) {
138
- const path = event.composedPath();
139
- const hasAnchor = path.some((el) => el.localName === 'a');
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
- get renderPreviewImage() {
163
- return html `
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
- get renderCoverImage() {
170
- return html `
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
- get images() {
177
- const images = [];
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
- get renderSubtitleAndDescription() {
194
- return html `
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
- render() {
202
- return html `
194
+ }
195
+ render() {
196
+ return html`
203
197
  <div class="body">
204
198
  <div class="header">
205
199
  ${this.renderHeading}
206
- ${this.variant === 'gallery'
207
- ? this.renderSubtitleAndDescription
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 !== 'gallery'
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
- ? this.renderAnchor({
230
- id: 'like-anchor',
231
- labelledby: 'heading',
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
- : html ``}
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
- firstUpdated(changes) {
268
- super.firstUpdated(changes);
269
- this.addEventListener('pointerdown', this.handlePointerdown);
270
- this.addEventListener('focusin', this.handleFocusin);
271
- this.shadowRoot.addEventListener('focusin', this.handleFocusin);
272
- this.addEventListener('focusout', this.handleFocusout);
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
- __decorate([
276
- property()
277
- ], Card.prototype, "asset", void 0);
278
- __decorate([
279
- property({ reflect: true })
280
- ], Card.prototype, "variant", void 0);
281
- __decorate([
282
- property({ type: Boolean, reflect: true })
283
- ], Card.prototype, "selected", null);
284
- __decorate([
285
- property()
286
- ], Card.prototype, "heading", void 0);
287
- __decorate([
288
- property({ type: Boolean, reflect: true })
289
- ], Card.prototype, "horizontal", void 0);
290
- __decorate([
291
- query('#like-anchor')
292
- ], Card.prototype, "likeAnchor", void 0);
293
- __decorate([
294
- property({ type: Boolean, reflect: true })
295
- ], Card.prototype, "focused", void 0);
296
- __decorate([
297
- property({ type: Boolean, reflect: true })
298
- ], Card.prototype, "toggles", void 0);
299
- __decorate([
300
- property()
301
- ], Card.prototype, "value", void 0);
302
- __decorate([
303
- property()
304
- ], Card.prototype, "subheading", void 0);
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": ";;;;;;;;;;;AAYA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAcO,aAAM,aAAa,WACtB,WACI,oBAAoB,0BAA0B,eAAe,GAAG;AAAA,EAC5D;AAAA,EACA;AACJ,CAAC,GACD;AAAA,EACI,YAAY,CAAC,KAAK,GAAG;AACzB,CACJ,CACJ,EAAE;AAAA,EAVK;AAAA;AAmBI,mBAA4C;AAY3C,qBAAY;AAGb,mBAAU;AAGV,sBAAa;AAMb,mBAAU;AAGV,mBAAU;AAGV,iBAAQ;AAGR,sBAAa;AAcZ,yBAAgB,CAAC,UAAuB;AAC5C,WAAK,UAAU;AACf,YAAM,SAAS,MAAM,aAAa,EAAE;AACpC,UAAI,WAAW,MAAM;AACjB,aAAK,oBAAoB,WAAW,KAAK,aAAa;AACtD;AAAA,MACJ;AACA,WAAK,iBAAiB,WAAW,KAAK,aAAa;AAAA,IACvD;AAAA;AAAA,aA/D2B,SAAyB;AAChD,WAAO,CAAC,eAAe,cAAc,UAAU;AAAA,EACnD;AAAA,MASI,WAAoB;AACpB,WAAO,KAAK;AAAA,EAChB;AAAA,MACI,SAAS,UAAmB;AAC5B,QAAI,aAAa,KAAK;AAAU;AAChC,SAAK,YAAY;AACjB,SAAK,cAAc,YAAY,CAAC,KAAK,SAAS;AAAA,EAClD;AAAA,MAyBc,gBAAyB;AACnC,WAAO,KAAK,uBAAuB,sBAAsB;AAAA,EAC7D;AAAA,MAEc,aAAsB;AAChC,WAAO,KAAK,uBAAuB,kBAAkB;AAAA,EACzD;AAAA,EAEgB,QAAc;AA/GlC;AAgHQ,eAAK,eAAL,mBAAiB;AAAA,EACrB;AAAA,EAYQ,eAAe,OAAoB;AACvC,SAAK,UAAU;AACf,UAAM,SAAS,MAAM,aAAa,EAAE;AACpC,QAAI,WAAW,MAAM;AACjB,WAAK,oBAAoB,WAAW,KAAK,aAAa;AAAA,IAC1D;AAAA,EACJ;AAAA,EAEQ,cAAc,OAA4B;AAC9C,UAAM,EAAE,SAAS;AACjB,YAAQ;AAAA,WACC;AACD,aAAK,eAAe;AACpB,YAAI,KAAK,SAAS;AACd,gBAAM,eAAe;AACrB;AAAA,QACJ;AAAA,WACC;AAAA,WACA;AACD,aAAK,MAAM;AAAA;AAAA,EAEvB;AAAA,EAEQ,qBAAqB,OAA2C;AACpE,UAAM,gBAAgB;AACtB,SAAK,WAAW,MAAM,OAAO;AAC7B,SAAK,eAAe;AAAA,EACxB;AAAA,EAEO,iBAAuB;AAC1B,QAAI,CAAC,KAAK,SAAS;AACf,WAAK,cACD,IAAI,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC,CACL;AACA;AAAA,IACJ;AACA,SAAK,WAAW,CAAC,KAAK;AACtB,SAAK,eAAe;AAAA,EACxB;AAAA,EAEQ,iBAAuB;AAC3B,UAAM,eAAe,KAAK,cACtB,IAAI,MAAM,UAAU;AAAA,MAChB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,UAAU;AAAA,IACd,CAAC,CACL;AACA,QAAI,CAAC,cAAc;AACf,WAAK,WAAW,CAAC,KAAK;AAAA,IAC1B;AAAA,EACJ;AAAA,EAEQ,sBAAsB,OAAoB;AAC9C,QAAI,KAAK,MAAM;AACX,YAAM,gBAAgB;AAAA,IAC1B;AAAA,EACJ;AAAA,EAEQ,kBAAkB,OAAoB;AAC1C,UAAM,OAAO,MAAM,aAAa;AAChC,UAAM,YAAY,KAAK,KACnB,CAAC,OAAQ,GAAmB,cAAc,GAC9C;AACA,QAAI;AAAW;AACf,UAAM,QAAQ,CAAC,IAAI,KAAK;AACxB,UAAM,YAAY,MAAY;AAC1B,YAAM,MAAM,CAAC,IAAI,KAAK;AACtB,UAAI,MAAM,QAAQ,KAAK;AACnB,aAAK,MAAM;AAAA,MACf;AACA,WAAK,oBAAoB,aAAa,SAAS;AAAA,IACnD;AACA,SAAK,iBAAiB,aAAa,SAAS;AAAA,EAChD;AAAA,MAEc,gBAAgC;AAC1C,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,uCAKwB,KAAK;AAAA;AAAA;AAAA,EAGxC;AAAA,MAEc,qBAAqC;AAC/C,WAAO;AAAA,6CAC8B,UAAU,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,EAI7D;AAAA,MAEc,mBAAmC;AAC7C,WAAO;AAAA,iDACkC,UAAU,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,EAIjE;AAAA,MAEc,SAA2B;AACrC,UAAM,SAA2B,CAAC;AAClC,QAAI,KAAK;AAAY,aAAO,KAAK,KAAK,kBAAkB;AACxD,QAAI,KAAK;AAAe,aAAO,KAAK,KAAK,gBAAgB;AACzD,WAAO;AAAA,EACX;AAAA,EAEQ,cAAgC;AACpC,QAAI,KAAK,YAAY;AACjB,aAAO,KAAK;AAAA,IAChB;AACA,QAAI,KAAK,YAAY,YAAY;AAC7B,aAAO,CAAC,KAAK,kBAAkB;AAAA,IACnC;AACA,WAAO,KAAK;AAAA,EAChB;AAAA,MAEY,+BAA+C;AACvD,WAAO;AAAA;AAAA,0CAE2B,KAAK;AAAA;AAAA;AAAA;AAAA,EAI3C;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA,sBAGO,KAAK;AAAA,sBACL,KAAK,YAAY,YACb,KAAK,+BACL;AAAA,sBACJ,KAAK,YAAY,WAAW,KAAK,SAAS,MACtC;AAAA;AAAA;AAAA,iDAGuB,KAAK;AAAA;AAAA;AAAA;AAAA,8BAK5B;AAAA;AAAA,kBAER,KAAK,YAAY,YACb;AAAA;AAAA,gCAEU,KAAK;AAAA;AAAA,0BAGf;AAAA;AAAA,cAER,KAAK,OACD,KAAK,aAAa;AAAA,MACd,IAAI;AAAA,MACJ,YAAY;AAAA,IAChB,CAAC,IACD;AAAA,cACJ,KAAK,YAAY,aACb;AAAA;AAAA,sBAGA;AAAA,cACJ,KAAK,YAAY;AAAA,cACjB,KAAK,UACD;AAAA;AAAA;AAAA,yCAGuB,KAAK;AAAA;AAAA;AAAA;AAAA,wCAIN,KAAK;AAAA,yCACJ,KAAK;AAAA;AAAA;AAAA;AAAA,sBAK5B;AAAA,cACJ,KAAK,YAAY,WAAW,KAAK,SAAS,MACtC;AAAA;AAAA;AAAA,yCAGuB,KAAK;AAAA;AAAA;AAAA;AAAA,sBAK5B;AAAA;AAAA,EAEd;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,iBAAiB,eAAe,KAAK,iBAAiB;AAC3D,SAAK,iBAAiB,WAAW,KAAK,aAAa;AACnD,SAAK,WAAW,iBAAiB,WAAW,KAAK,aAAa;AAC9D,SAAK,iBAAiB,YAAY,KAAK,cAAc;AAAA,EACzD;AACJ;AA1QW;AAAA,EADP,AAAC,SAAS;AAAA,GACH,AAhBJ,KAgBI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GACpB,AAnBJ,KAmBI;AAGH;AAAA,EADJ,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACtC,AAtBD,KAsBC;AAYG;AAAA,EADP,AAAC,SAAS;AAAA,GACH,AAlCJ,KAkCI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACnC,AArCJ,KAqCI;AAGC;AAAA,EADR,AAAC,MAAM,cAAc;AAAA,GACb,AAxCL,KAwCK;AAGD;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACnC,AA3CJ,KA2CI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACnC,AA9CJ,KA8CI;AAGA;AAAA,EADP,AAAC,SAAS;AAAA,GACH,AAjDJ,KAiDI;AAGA;AAAA,EADP,AAAC,SAAS;AAAA,GACH,AApDJ,KAoDI;",
6
+ "names": []
7
+ }