@spectrum-web-components/card 1.7.0 → 1.8.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/README.md +12 -0
- package/custom-elements.json +2 -0
- package/package.json +9 -9
- package/sp-card.d.ts +11 -0
- package/sp-card.dev.js.map +1 -1
- package/sp-card.js.map +1 -1
- package/src/Card.d.ts +15 -0
- package/src/Card.dev.js +68 -42
- package/src/Card.dev.js.map +2 -2
- package/src/Card.js +51 -46
- package/src/Card.js.map +3 -3
- package/src/card-overrides.css.dev.js.map +1 -1
- package/src/card-overrides.css.js.map +1 -1
- package/src/card.css.dev.js +1 -1
- package/src/card.css.dev.js.map +1 -1
- package/src/card.css.js +1 -1
- package/src/card.css.js.map +1 -1
- package/src/index.d.ts +11 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-card.css.dev.js +1 -1
- package/src/spectrum-card.css.dev.js.map +1 -1
- package/src/spectrum-card.css.js +1 -1
- package/src/spectrum-card.css.js.map +1 -1
package/README.md
CHANGED
|
@@ -232,6 +232,18 @@ When leveraging the `asset` attribute, a card can be declared as representing a
|
|
|
232
232
|
</sp-card>
|
|
233
233
|
```
|
|
234
234
|
|
|
235
|
+
#### Toggles
|
|
236
|
+
|
|
237
|
+
When the `toggles` boolean attribute set to `true`, the card can be toggled between selected and unselected states.
|
|
238
|
+
A checkbox will be rendered on hover, focus within, and when the card is selected.
|
|
239
|
+
|
|
240
|
+
```html
|
|
241
|
+
<sp-card toggles variant="quiet" heading="Card Heading" subheading="JPG Photo">
|
|
242
|
+
<img alt="" slot="preview" src="https://picsum.photos/200/350" />
|
|
243
|
+
<div slot="description">10/15/18</div>
|
|
244
|
+
</sp-card>
|
|
245
|
+
```
|
|
246
|
+
|
|
235
247
|
### Accessibility
|
|
236
248
|
|
|
237
249
|
#### Be concise
|
package/custom-elements.json
CHANGED
|
@@ -142,6 +142,7 @@
|
|
|
142
142
|
},
|
|
143
143
|
"privacy": "public",
|
|
144
144
|
"default": "false",
|
|
145
|
+
"description": "Indicates whether the card can be toggled between selected and unselected states.",
|
|
145
146
|
"attribute": "toggles",
|
|
146
147
|
"reflects": true
|
|
147
148
|
},
|
|
@@ -433,6 +434,7 @@
|
|
|
433
434
|
"text": "boolean"
|
|
434
435
|
},
|
|
435
436
|
"default": "false",
|
|
437
|
+
"description": "Indicates whether the card can be toggled between selected and unselected states.",
|
|
436
438
|
"fieldName": "toggles"
|
|
437
439
|
},
|
|
438
440
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/card",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -64,14 +64,14 @@
|
|
|
64
64
|
"css"
|
|
65
65
|
],
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@spectrum-web-components/asset": "1.
|
|
68
|
-
"@spectrum-web-components/base": "1.
|
|
69
|
-
"@spectrum-web-components/checkbox": "1.
|
|
70
|
-
"@spectrum-web-components/divider": "1.
|
|
71
|
-
"@spectrum-web-components/icons-workflow": "1.
|
|
72
|
-
"@spectrum-web-components/popover": "1.
|
|
73
|
-
"@spectrum-web-components/shared": "1.
|
|
74
|
-
"@spectrum-web-components/styles": "1.
|
|
67
|
+
"@spectrum-web-components/asset": "1.8.0",
|
|
68
|
+
"@spectrum-web-components/base": "1.8.0",
|
|
69
|
+
"@spectrum-web-components/checkbox": "1.8.0",
|
|
70
|
+
"@spectrum-web-components/divider": "1.8.0",
|
|
71
|
+
"@spectrum-web-components/icons-workflow": "1.8.0",
|
|
72
|
+
"@spectrum-web-components/popover": "1.8.0",
|
|
73
|
+
"@spectrum-web-components/shared": "1.8.0",
|
|
74
|
+
"@spectrum-web-components/styles": "1.8.0"
|
|
75
75
|
},
|
|
76
76
|
"types": "./src/index.d.ts",
|
|
77
77
|
"customElements": "custom-elements.json",
|
package/sp-card.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 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
|
+
*/
|
|
1
12
|
import { Card } from './src/Card.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
package/sp-card.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-card.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Card } from './src/Card.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-card', Card);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-card': Card;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAYA,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,cAAc,WAAW,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-card.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-card.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Card } from './src/Card.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-card', Card);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-card': Card;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAYA,OAAS,QAAAA,MAAY,gBACrB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,UAAWD,CAAI",
|
|
6
6
|
"names": ["Card", "defineElement"]
|
|
7
7
|
}
|
package/src/Card.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 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
|
+
*/
|
|
1
12
|
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import '@spectrum-web-components/asset/sp-asset.js';
|
|
3
14
|
import '@spectrum-web-components/checkbox/sp-checkbox.js';
|
|
@@ -36,6 +47,9 @@ export declare class Card extends Card_base {
|
|
|
36
47
|
horizontal: boolean;
|
|
37
48
|
private likeAnchor?;
|
|
38
49
|
focused: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Indicates whether the card can be toggled between selected and unselected states.
|
|
52
|
+
*/
|
|
39
53
|
toggles: boolean;
|
|
40
54
|
value: string;
|
|
41
55
|
subheading: string;
|
|
@@ -63,5 +77,6 @@ export declare class Card extends Card_base {
|
|
|
63
77
|
private get renderSubtitleAndDescription();
|
|
64
78
|
protected render(): TemplateResult;
|
|
65
79
|
protected firstUpdated(changes: PropertyValues): void;
|
|
80
|
+
protected update(changes: PropertyValues): void;
|
|
66
81
|
}
|
|
67
82
|
export {};
|
package/src/Card.dev.js
CHANGED
|
@@ -69,6 +69,9 @@ export class Card extends LikeAnchor(
|
|
|
69
69
|
set selected(selected) {
|
|
70
70
|
if (selected === this.selected) return;
|
|
71
71
|
this._selected = selected;
|
|
72
|
+
if (this.role === "row" && this.toggles) {
|
|
73
|
+
this.setAttribute("aria-selected", String(this.selected));
|
|
74
|
+
}
|
|
72
75
|
this.requestUpdate("selected", !this._selected);
|
|
73
76
|
}
|
|
74
77
|
get hasCoverPhoto() {
|
|
@@ -219,64 +222,87 @@ export class Card extends LikeAnchor(
|
|
|
219
222
|
`;
|
|
220
223
|
}
|
|
221
224
|
render() {
|
|
225
|
+
const roleForWrapper = this.role === "row" ? "gridcell" : void 0;
|
|
222
226
|
return html`
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
<div class="
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
227
|
+
<div class="wrapper" role=${ifDefined(roleForWrapper)}>
|
|
228
|
+
${this.renderImage()}
|
|
229
|
+
<div class="body">
|
|
230
|
+
<div class="header">
|
|
231
|
+
${this.renderHeading}
|
|
232
|
+
${this.variant === "gallery" ? this.renderSubtitleAndDescription : nothing}
|
|
233
|
+
${this.variant !== "quiet" || this.size !== "s" ? html`
|
|
234
|
+
<div
|
|
235
|
+
class="action-button"
|
|
236
|
+
@pointerdown=${this.stopPropagationOnHref}
|
|
237
|
+
>
|
|
238
|
+
<slot name="actions"></slot>
|
|
239
|
+
</div>
|
|
240
|
+
` : nothing}
|
|
241
|
+
</div>
|
|
242
|
+
${this.variant !== "gallery" ? html`
|
|
243
|
+
<div class="content">
|
|
244
|
+
${this.renderSubtitleAndDescription}
|
|
234
245
|
</div>
|
|
235
246
|
` : nothing}
|
|
236
247
|
</div>
|
|
237
|
-
${this.
|
|
238
|
-
<div class="content">
|
|
239
|
-
${this.renderSubtitleAndDescription}
|
|
240
|
-
</div>
|
|
241
|
-
` : nothing}
|
|
242
|
-
</div>
|
|
243
|
-
${this.href ? this.renderAnchor({
|
|
248
|
+
${this.href ? this.renderAnchor({
|
|
244
249
|
id: "like-anchor",
|
|
245
250
|
labelledby: "heading"
|
|
246
251
|
}) : nothing}
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
252
|
+
${this.variant === "standard" ? html`
|
|
253
|
+
<slot name="footer"></slot>
|
|
254
|
+
` : nothing}
|
|
255
|
+
${this.toggles ? html`
|
|
256
|
+
<sp-popover
|
|
257
|
+
class="checkbox-toggle"
|
|
258
|
+
@pointerdown=${this.stopPropagationOnHref}
|
|
259
|
+
>
|
|
260
|
+
<sp-checkbox
|
|
261
|
+
class="checkbox"
|
|
262
|
+
@change=${this.handleSelectedChange}
|
|
263
|
+
.checked=${this.selected}
|
|
264
|
+
>
|
|
265
|
+
<span class="sr-only">
|
|
266
|
+
${this.label || this.heading}
|
|
267
|
+
</span>
|
|
268
|
+
</sp-checkbox>
|
|
269
|
+
</sp-popover>
|
|
270
|
+
` : nothing}
|
|
271
|
+
${this.variant === "quiet" && this.size === "s" ? html`
|
|
272
|
+
<div
|
|
273
|
+
class="spectrum-QuickActions actions"
|
|
274
|
+
@pointerdown=${this.stopPropagationOnHref}
|
|
275
|
+
>
|
|
276
|
+
<slot name="actions"></slot>
|
|
277
|
+
</div>
|
|
278
|
+
` : nothing}
|
|
279
|
+
</div>
|
|
271
280
|
`;
|
|
272
281
|
}
|
|
273
282
|
firstUpdated(changes) {
|
|
274
283
|
super.firstUpdated(changes);
|
|
284
|
+
if (changes.has("label")) {
|
|
285
|
+
if (this.label) {
|
|
286
|
+
this.setAttribute("aria-label", this.label);
|
|
287
|
+
} else {
|
|
288
|
+
this.removeAttribute("aria-label");
|
|
289
|
+
}
|
|
290
|
+
}
|
|
275
291
|
this.addEventListener("pointerdown", this.handlePointerdown);
|
|
276
292
|
this.addEventListener("focusin", this.handleFocusin);
|
|
277
293
|
this.shadowRoot.addEventListener("focusin", this.handleFocusin);
|
|
278
294
|
this.addEventListener("focusout", this.handleFocusout);
|
|
279
295
|
}
|
|
296
|
+
update(changes) {
|
|
297
|
+
super.update(changes);
|
|
298
|
+
if (changes.has("label")) {
|
|
299
|
+
if (this.label) {
|
|
300
|
+
this.setAttribute("aria-label", this.label);
|
|
301
|
+
} else {
|
|
302
|
+
this.removeAttribute("aria-label");
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
280
306
|
}
|
|
281
307
|
__decorateClass([
|
|
282
308
|
property()
|
package/src/Card.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 nothing,\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/popover/sp-popover.js';\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport cardStyles from './card.css.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 noDefaultSize: true,\n }\n )\n) {\n public static override get styles(): CSSResultArray {\n return [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 /**\n * Handles pointer down events on the card element.\n * Implements a click detection system that distinguishes between clicks and drags\n * based on duration and movement distance.\n */\n private handlePointerdown(event: PointerEvent): void {\n const path = event.composedPath();\n const hasAnchor = path.some(\n (el) => (el as HTMLElement).localName === 'a'\n );\n if (hasAnchor) return;\n // Record the time and initial position of the pointerdown event\n const startTime = event.timeStamp;\n const startX = event.clientX;\n const startY = event.clientY;\n\n // Define the handler for when the pointer interaction ends\n const handleEnd = (endEvent: PointerEvent): void => {\n const endTime = endEvent.timeStamp;\n const endX = endEvent.clientX;\n const endY = endEvent.clientY;\n\n // Calculate time duration and movement distance of the pointer\n const timeDelta = endTime - startTime;\n const moveX = Math.abs(endX - startX);\n const moveY = Math.abs(endY - startY);\n\n // Consider the pointer interaction a \"click\" only if:\n // - It was short (under 200ms)\n // - It didn't move significantly (less than 10px in any direction)\n const moved = moveX > 10 || moveY > 10;\n\n if (timeDelta < 200 && !moved) {\n this.click();\n }\n\n this.removeEventListener('pointerup', handleEnd);\n this.removeEventListener('pointercancel', handleEnd);\n };\n\n this.addEventListener('pointerup', handleEnd);\n this.addEventListener('pointercancel', handleEnd);\n }\n\n protected get renderHeading(): TemplateResult {\n return html`\n <div class=\"title\" id=\"heading\">\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 ${this.variant !== 'quiet' && !this.horizontal\n ? html`\n <sp-divider size=\"s\"></sp-divider>\n `\n : nothing}\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 ${this.variant !== 'quiet' && !this.horizontal\n ? html`\n <sp-divider size=\"s\"></sp-divider>\n `\n : nothing}\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\">\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 ${this.renderImage()}\n <div class=\"body\">\n <div class=\"header\">\n ${this.renderHeading}\n ${this.variant === 'gallery'\n ? this.renderSubtitleAndDescription\n : nothing}\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 : nothing}\n </div>\n ${this.variant !== 'gallery'\n ? html`\n <div class=\"content\">\n ${this.renderSubtitleAndDescription}\n </div>\n `\n : nothing}\n </div>\n ${this.href\n ? this.renderAnchor({\n id: 'like-anchor',\n labelledby: 'heading',\n })\n : nothing}\n ${this.variant === 'standard'\n ? html`\n <slot name=\"footer\"></slot>\n `\n : nothing}\n ${this.toggles\n ? html`\n <sp-popover\n class=\"checkbox-toggle\"\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-popover>\n `\n : nothing}\n ${this.variant === 'quiet' && this.size === 's'\n ? html`\n <div\n class=\"spectrum-QuickActions actions\"\n @pointerdown=${this.stopPropagationOnHref}\n >\n <slot name=\"actions\"></slot>\n </div>\n `\n : nothing}\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,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP,SAAS,iBAAiB;AAC1B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,OAAO;AAGP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO,gBAAgB;AAchB,aAAM,aAAa;AAAA,EACtB;AAAA,IACI,oBAAoB,0BAA0B,eAAe,GAAG;AAAA,MAC5D;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,IACD;AAAA,MACI,YAAY,CAAC,KAAK,GAAG;AAAA,MACrB,eAAe;AAAA,IACnB;AAAA,EACJ;AACJ,EAAE;AAAA,EAXK;AAAA;AAoBH,SAAO,UAA4C;
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\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/popover/sp-popover.js';\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport cardStyles from './card.css.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 noDefaultSize: true,\n }\n )\n) {\n public static override get styles(): CSSResultArray {\n return [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 if (this.role === 'row' && this.toggles) {\n this.setAttribute('aria-selected', String(this.selected));\n }\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 /**\n * Indicates whether the card can be toggled between selected and unselected states.\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 /**\n * Handles pointer down events on the card element.\n * Implements a click detection system that distinguishes between clicks and drags\n * based on duration and movement distance.\n */\n private handlePointerdown(event: PointerEvent): void {\n const path = event.composedPath();\n const hasAnchor = path.some(\n (el) => (el as HTMLElement).localName === 'a'\n );\n if (hasAnchor) return;\n // Record the time and initial position of the pointerdown event\n const startTime = event.timeStamp;\n const startX = event.clientX;\n const startY = event.clientY;\n\n // Define the handler for when the pointer interaction ends\n const handleEnd = (endEvent: PointerEvent): void => {\n const endTime = endEvent.timeStamp;\n const endX = endEvent.clientX;\n const endY = endEvent.clientY;\n\n // Calculate time duration and movement distance of the pointer\n const timeDelta = endTime - startTime;\n const moveX = Math.abs(endX - startX);\n const moveY = Math.abs(endY - startY);\n\n // Consider the pointer interaction a \"click\" only if:\n // - It was short (under 200ms)\n // - It didn't move significantly (less than 10px in any direction)\n const moved = moveX > 10 || moveY > 10;\n\n if (timeDelta < 200 && !moved) {\n this.click();\n }\n\n this.removeEventListener('pointerup', handleEnd);\n this.removeEventListener('pointercancel', handleEnd);\n };\n\n this.addEventListener('pointerup', handleEnd);\n this.addEventListener('pointercancel', handleEnd);\n }\n\n protected get renderHeading(): TemplateResult {\n return html`\n <div class=\"title\" id=\"heading\">\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 ${this.variant !== 'quiet' && !this.horizontal\n ? html`\n <sp-divider size=\"s\"></sp-divider>\n `\n : nothing}\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 ${this.variant !== 'quiet' && !this.horizontal\n ? html`\n <sp-divider size=\"s\"></sp-divider>\n `\n : nothing}\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\">\n <slot name=\"subheading\">${this.subheading}</slot>\n </div>\n <slot name=\"description\"></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n /* When rendering the card within a grid,\n where the card has role=\"row\", the row have an\n immediate descendant of role=\"gridcell\", otherwise\n the role for the content wrapper can remain undefined. */\n const roleForWrapper = this.role === 'row' ? 'gridcell' : undefined;\n return html`\n <div class=\"wrapper\" role=${ifDefined(roleForWrapper)}>\n ${this.renderImage()}\n <div class=\"body\">\n <div class=\"header\">\n ${this.renderHeading}\n ${this.variant === 'gallery'\n ? this.renderSubtitleAndDescription\n : nothing}\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 : nothing}\n </div>\n ${this.variant !== 'gallery'\n ? html`\n <div class=\"content\">\n ${this.renderSubtitleAndDescription}\n </div>\n `\n : nothing}\n </div>\n ${this.href\n ? this.renderAnchor({\n id: 'like-anchor',\n labelledby: 'heading',\n })\n : nothing}\n ${this.variant === 'standard'\n ? html`\n <slot name=\"footer\"></slot>\n `\n : nothing}\n ${this.toggles\n ? html`\n <sp-popover\n class=\"checkbox-toggle\"\n @pointerdown=${this.stopPropagationOnHref}\n >\n <sp-checkbox\n class=\"checkbox\"\n @change=${this.handleSelectedChange}\n .checked=${this.selected}\n >\n <span class=\"sr-only\">\n ${this.label || this.heading}\n </span>\n </sp-checkbox>\n </sp-popover>\n `\n : nothing}\n ${this.variant === 'quiet' && this.size === 's'\n ? html`\n <div\n class=\"spectrum-QuickActions actions\"\n @pointerdown=${this.stopPropagationOnHref}\n >\n <slot name=\"actions\"></slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\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 protected override update(changes: PropertyValues): void {\n super.update(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Card.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var E=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var i=(p,n,e,s)=>{for(var a=s>1?void 0:s?k(n,e):n,l=p.length-1,d;l>=0;l--)(d=p[l])&&(a=(s?d(n,e,a):d(a))||a);return s&&a&&E(n,e,a),a};import{html as t,nothing as r,SizedMixin as S,SpectrumElement as $}from"@spectrum-web-components/base";import{ifDefined as u}from"@spectrum-web-components/base/src/directives.js";import{property as o,query as A}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as L}from"@spectrum-web-components/shared/src/focus-visible.js";import{ObserveSlotPresence as T}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import{LikeAnchor as R}from"@spectrum-web-components/shared/src/like-anchor.js";import"@spectrum-web-components/asset/sp-asset.js";import"@spectrum-web-components/checkbox/sp-checkbox.js";import"@spectrum-web-components/popover/sp-popover.js";import"@spectrum-web-components/divider/sp-divider.js";import z from"./card.css.js";export class Card extends R(S(T(L($),['[slot="cover-photo"]','[slot="preview"]']),{validSizes:["s","m"],noDefaultSize:!0})){constructor(){super(...arguments);this.variant="standard";this._selected=!1;this.heading="";this.horizontal=!1;this.focused=!1;this.toggles=!1;this.value="";this.subheading="";this.handleFocusin=e=>{if(this.focused=!0,e.composedPath()[0]!==this){this.removeEventListener("keydown",this.handleKeydown);return}this.addEventListener("keydown",this.handleKeydown)}}static get styles(){return[z]}get selected(){return this._selected}set selected(e){e!==this.selected&&(this._selected=e,this.role==="row"&&this.toggles&&this.setAttribute("aria-selected",String(this.selected)),this.requestUpdate("selected",!this._selected))}get hasCoverPhoto(){return this.getSlotContentPresence('[slot="cover-photo"]')}get hasPreview(){return this.getSlotContentPresence('[slot="preview"]')}click(){var e;(e=this.likeAnchor)==null||e.click()}handleFocusout(e){this.focused=!1,e.composedPath()[0]===this&&this.removeEventListener("keydown",this.handleKeydown)}handleKeydown(e){const{code:s}=e;switch(s){case"Space":if(this.toggleSelected(),this.toggles){e.preventDefault();break}case"Enter":case"NumpadEnter":this.click()}}handleSelectedChange(e){e.stopPropagation(),this.selected=e.target.checked,this.announceChange()}toggleSelected(){if(!this.toggles){this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}));return}this.selected=!this.selected,this.announceChange()}announceChange(){this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(this.selected=!this.selected)}stopPropagationOnHref(e){this.href&&e.stopPropagation()}handlePointerdown(e){if(e.composedPath().some(h=>h.localName==="a"))return;const l=e.timeStamp,d=e.clientX,v=e.clientY,c=h=>{const m=h.timeStamp,g=h.clientX,b=h.clientY,f=m-l,y=Math.abs(g-d),w=Math.abs(b-v),P=y>10||w>10;f<200&&!P&&this.click(),this.removeEventListener("pointerup",c),this.removeEventListener("pointercancel",c)};this.addEventListener("pointerup",c),this.addEventListener("pointercancel",c)}get renderHeading(){return t`
|
|
2
2
|
<div class="title" id="heading">
|
|
3
3
|
<slot name="heading">${this.heading}</slot>
|
|
4
4
|
</div>
|
|
@@ -8,64 +8,69 @@
|
|
|
8
8
|
</sp-asset>
|
|
9
9
|
${this.variant!=="quiet"&&!this.horizontal?t`
|
|
10
10
|
<sp-divider size="s"></sp-divider>
|
|
11
|
-
`:
|
|
11
|
+
`:r}
|
|
12
12
|
`}get renderCoverImage(){return t`
|
|
13
13
|
<sp-asset id="cover-photo" variant=${u(this.asset)}>
|
|
14
14
|
<slot name="cover-photo"></slot>
|
|
15
15
|
</sp-asset>
|
|
16
16
|
${this.variant!=="quiet"&&!this.horizontal?t`
|
|
17
17
|
<sp-divider size="s"></sp-divider>
|
|
18
|
-
`:
|
|
18
|
+
`:r}
|
|
19
19
|
`}get images(){const e=[];return this.hasPreview&&e.push(this.renderPreviewImage),this.hasCoverPhoto&&e.push(this.renderCoverImage),e}renderImage(){return this.horizontal?this.images:this.variant!=="standard"?[this.renderPreviewImage]:this.images}get renderSubtitleAndDescription(){return t`
|
|
20
20
|
<div class="subtitle">
|
|
21
21
|
<slot name="subheading">${this.subheading}</slot>
|
|
22
22
|
</div>
|
|
23
23
|
<slot name="description"></slot>
|
|
24
|
-
`}render(){return t`
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<div class="
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
24
|
+
`}render(){const e=this.role==="row"?"gridcell":void 0;return t`
|
|
25
|
+
<div class="wrapper" role=${u(e)}>
|
|
26
|
+
${this.renderImage()}
|
|
27
|
+
<div class="body">
|
|
28
|
+
<div class="header">
|
|
29
|
+
${this.renderHeading}
|
|
30
|
+
${this.variant==="gallery"?this.renderSubtitleAndDescription:r}
|
|
31
|
+
${this.variant!=="quiet"||this.size!=="s"?t`
|
|
32
|
+
<div
|
|
33
|
+
class="action-button"
|
|
34
|
+
@pointerdown=${this.stopPropagationOnHref}
|
|
35
|
+
>
|
|
36
|
+
<slot name="actions"></slot>
|
|
37
|
+
</div>
|
|
38
|
+
`:r}
|
|
39
|
+
</div>
|
|
40
|
+
${this.variant!=="gallery"?t`
|
|
41
|
+
<div class="content">
|
|
42
|
+
${this.renderSubtitleAndDescription}
|
|
36
43
|
</div>
|
|
37
|
-
`:
|
|
44
|
+
`:r}
|
|
38
45
|
</div>
|
|
39
|
-
${this.
|
|
40
|
-
|
|
41
|
-
|
|
46
|
+
${this.href?this.renderAnchor({id:"like-anchor",labelledby:"heading"}):r}
|
|
47
|
+
${this.variant==="standard"?t`
|
|
48
|
+
<slot name="footer"></slot>
|
|
49
|
+
`:r}
|
|
50
|
+
${this.toggles?t`
|
|
51
|
+
<sp-popover
|
|
52
|
+
class="checkbox-toggle"
|
|
53
|
+
@pointerdown=${this.stopPropagationOnHref}
|
|
54
|
+
>
|
|
55
|
+
<sp-checkbox
|
|
56
|
+
class="checkbox"
|
|
57
|
+
@change=${this.handleSelectedChange}
|
|
58
|
+
.checked=${this.selected}
|
|
59
|
+
>
|
|
60
|
+
<span class="sr-only">
|
|
61
|
+
${this.label||this.heading}
|
|
62
|
+
</span>
|
|
63
|
+
</sp-checkbox>
|
|
64
|
+
</sp-popover>
|
|
65
|
+
`:r}
|
|
66
|
+
${this.variant==="quiet"&&this.size==="s"?t`
|
|
67
|
+
<div
|
|
68
|
+
class="spectrum-QuickActions actions"
|
|
69
|
+
@pointerdown=${this.stopPropagationOnHref}
|
|
70
|
+
>
|
|
71
|
+
<slot name="actions"></slot>
|
|
42
72
|
</div>
|
|
43
|
-
`:
|
|
73
|
+
`:r}
|
|
44
74
|
</div>
|
|
45
|
-
|
|
46
|
-
${this.variant==="standard"?t`
|
|
47
|
-
<slot name="footer"></slot>
|
|
48
|
-
`:o}
|
|
49
|
-
${this.toggles?t`
|
|
50
|
-
<sp-popover
|
|
51
|
-
class="checkbox-toggle"
|
|
52
|
-
@pointerdown=${this.stopPropagationOnHref}
|
|
53
|
-
>
|
|
54
|
-
<sp-checkbox
|
|
55
|
-
class="checkbox"
|
|
56
|
-
@change=${this.handleSelectedChange}
|
|
57
|
-
?checked=${this.selected}
|
|
58
|
-
tabindex="-1"
|
|
59
|
-
></sp-checkbox>
|
|
60
|
-
</sp-popover>
|
|
61
|
-
`:o}
|
|
62
|
-
${this.variant==="quiet"&&this.size==="s"?t`
|
|
63
|
-
<div
|
|
64
|
-
class="spectrum-QuickActions actions"
|
|
65
|
-
@pointerdown=${this.stopPropagationOnHref}
|
|
66
|
-
>
|
|
67
|
-
<slot name="actions"></slot>
|
|
68
|
-
</div>
|
|
69
|
-
`:o}
|
|
70
|
-
`}firstUpdated(e){super.firstUpdated(e),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("focusin",this.handleFocusin),this.shadowRoot.addEventListener("focusin",this.handleFocusin),this.addEventListener("focusout",this.handleFocusout)}}i([r()],Card.prototype,"asset",2),i([r({reflect:!0})],Card.prototype,"variant",2),i([r({type:Boolean,reflect:!0})],Card.prototype,"selected",1),i([r()],Card.prototype,"heading",2),i([r({type:Boolean,reflect:!0})],Card.prototype,"horizontal",2),i([L("#like-anchor")],Card.prototype,"likeAnchor",2),i([r({type:Boolean,reflect:!0})],Card.prototype,"focused",2),i([r({type:Boolean,reflect:!0})],Card.prototype,"toggles",2),i([r()],Card.prototype,"value",2),i([r()],Card.prototype,"subheading",2);
|
|
75
|
+
`}firstUpdated(e){super.firstUpdated(e),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("focusin",this.handleFocusin),this.shadowRoot.addEventListener("focusin",this.handleFocusin),this.addEventListener("focusout",this.handleFocusout)}update(e){super.update(e),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}}i([o()],Card.prototype,"asset",2),i([o({reflect:!0})],Card.prototype,"variant",2),i([o({type:Boolean,reflect:!0})],Card.prototype,"selected",1),i([o()],Card.prototype,"heading",2),i([o({type:Boolean,reflect:!0})],Card.prototype,"horizontal",2),i([A("#like-anchor")],Card.prototype,"likeAnchor",2),i([o({type:Boolean,reflect:!0})],Card.prototype,"focused",2),i([o({type:Boolean,reflect:!0})],Card.prototype,"toggles",2),i([o()],Card.prototype,"value",2),i([o()],Card.prototype,"subheading",2);
|
|
71
76
|
//# sourceMappingURL=Card.js.map
|