@spectrum-web-components/card 1.11.2 → 1.11.3-next.20260216102310
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 +9 -9
- package/src/Card.d.ts +6 -6
- package/src/Card.dev.js +6 -4
- package/src/Card.dev.js.map +2 -2
- package/src/Card.js +1 -1
- package/src/Card.js.map +3 -3
- package/src/card-overrides.css.d.ts +1 -1
- package/src/card.css.d.ts +1 -1
- package/src/spectrum-card.css.d.ts +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/card",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.3-next.20260216102310",
|
|
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.11.
|
|
68
|
-
"@spectrum-web-components/base": "1.11.
|
|
69
|
-
"@spectrum-web-components/checkbox": "1.11.
|
|
70
|
-
"@spectrum-web-components/divider": "1.11.
|
|
71
|
-
"@spectrum-web-components/icons-workflow": "1.11.
|
|
72
|
-
"@spectrum-web-components/popover": "1.11.
|
|
73
|
-
"@spectrum-web-components/shared": "1.11.
|
|
74
|
-
"@spectrum-web-components/styles": "1.11.
|
|
67
|
+
"@spectrum-web-components/asset": "1.11.3-next.20260216102310",
|
|
68
|
+
"@spectrum-web-components/base": "1.11.3-next.20260216102310",
|
|
69
|
+
"@spectrum-web-components/checkbox": "1.11.3-next.20260216102310",
|
|
70
|
+
"@spectrum-web-components/divider": "1.11.3-next.20260216102310",
|
|
71
|
+
"@spectrum-web-components/icons-workflow": "1.11.3-next.20260216102310",
|
|
72
|
+
"@spectrum-web-components/popover": "1.11.3-next.20260216102310",
|
|
73
|
+
"@spectrum-web-components/shared": "1.11.3-next.20260216102310",
|
|
74
|
+
"@spectrum-web-components/styles": "1.11.3-next.20260216102310"
|
|
75
75
|
},
|
|
76
76
|
"types": "./src/index.d.ts",
|
|
77
77
|
"customElements": "custom-elements.json",
|
package/src/Card.d.ts
CHANGED
|
@@ -9,20 +9,20 @@
|
|
|
9
9
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
|
-
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
13
12
|
import '@spectrum-web-components/asset/sp-asset.js';
|
|
13
|
+
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
14
14
|
import '@spectrum-web-components/checkbox/sp-checkbox.js';
|
|
15
|
-
import '@spectrum-web-components/popover/sp-popover.js';
|
|
16
15
|
import '@spectrum-web-components/divider/sp-divider.js';
|
|
16
|
+
import '@spectrum-web-components/popover/sp-popover.js';
|
|
17
17
|
declare const Card_base: typeof SpectrumElement & {
|
|
18
|
-
new (...args: any[]): import("@spectrum-web-components/
|
|
19
|
-
prototype: import("@spectrum-web-components/
|
|
18
|
+
new (...args: any[]): import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
|
|
19
|
+
prototype: import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
|
|
20
20
|
} & {
|
|
21
21
|
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
22
22
|
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
23
23
|
} & import("@spectrum-web-components/core/shared/base/sizedMixin.js").SizedElementConstructor & {
|
|
24
|
-
new (...args: any[]): import("@spectrum-web-components/shared
|
|
25
|
-
prototype: import("@spectrum-web-components/shared
|
|
24
|
+
new (...args: any[]): import("@spectrum-web-components/shared").LikeAnchorInterface;
|
|
25
|
+
prototype: import("@spectrum-web-components/shared").LikeAnchorInterface;
|
|
26
26
|
};
|
|
27
27
|
/**
|
|
28
28
|
* @element sp-card
|
package/src/Card.dev.js
CHANGED
|
@@ -9,24 +9,24 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
9
9
|
if (kind && result) __defProp(target, key, result);
|
|
10
10
|
return result;
|
|
11
11
|
};
|
|
12
|
+
import "@spectrum-web-components/asset/sp-asset.js";
|
|
12
13
|
import {
|
|
13
14
|
html,
|
|
14
15
|
nothing,
|
|
15
16
|
SizedMixin,
|
|
16
17
|
SpectrumElement
|
|
17
18
|
} from "@spectrum-web-components/base";
|
|
18
|
-
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
19
19
|
import {
|
|
20
20
|
property,
|
|
21
21
|
query
|
|
22
22
|
} from "@spectrum-web-components/base/src/decorators.js";
|
|
23
|
+
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
23
24
|
import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
|
|
24
|
-
import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
|
|
25
25
|
import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
|
|
26
|
-
import "@spectrum-web-components/
|
|
26
|
+
import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
|
|
27
27
|
import "@spectrum-web-components/checkbox/sp-checkbox.js";
|
|
28
|
-
import "@spectrum-web-components/popover/sp-popover.js";
|
|
29
28
|
import "@spectrum-web-components/divider/sp-divider.js";
|
|
29
|
+
import "@spectrum-web-components/popover/sp-popover.js";
|
|
30
30
|
import cardStyles from "./card.css.js";
|
|
31
31
|
export class Card extends LikeAnchor(
|
|
32
32
|
SizedMixin(
|
|
@@ -100,9 +100,11 @@ export class Card extends LikeAnchor(
|
|
|
100
100
|
event.preventDefault();
|
|
101
101
|
break;
|
|
102
102
|
}
|
|
103
|
+
break;
|
|
103
104
|
case "Enter":
|
|
104
105
|
case "NumpadEnter":
|
|
105
106
|
this.click();
|
|
107
|
+
break;
|
|
106
108
|
}
|
|
107
109
|
}
|
|
108
110
|
handleSelectedChange(event) {
|
package/src/Card.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Card.ts"],
|
|
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": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP
|
|
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 '@spectrum-web-components/asset/sp-asset.js';\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\n\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport type { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox.js';\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.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 break;\n\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\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 P=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var i=(p,n,e,s)=>{for(var a=s>1?void 0:s?E(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&&P(n,e,a),a};import"@spectrum-web-components/asset/sp-asset.js";import{html as t,nothing as r,SizedMixin as S,SpectrumElement as $}from"@spectrum-web-components/base";import{property as o,query as A}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as u}from"@spectrum-web-components/base/src/directives.js";import{FocusVisiblePolyfillMixin as L}from"@spectrum-web-components/shared/src/focus-visible.js";import{LikeAnchor as T}from"@spectrum-web-components/shared/src/like-anchor.js";import{ObserveSlotPresence as x}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import"@spectrum-web-components/checkbox/sp-checkbox.js";import"@spectrum-web-components/divider/sp-divider.js";import"@spectrum-web-components/popover/sp-popover.js";import R from"./card.css.js";export class Card extends T(S(x(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[R]}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}break;case"Enter":case"NumpadEnter":this.click();break}}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),k=y>10||w>10;f<200&&!k&&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>
|
package/src/Card.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Card.ts"],
|
|
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": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,
|
|
6
|
-
"names": ["html", "nothing", "SizedMixin", "SpectrumElement", "
|
|
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 '@spectrum-web-components/asset/sp-asset.js';\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\n\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport type { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox.js';\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.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 break;\n\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\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
|
+
"names": ["html", "nothing", "SizedMixin", "SpectrumElement", "property", "query", "ifDefined", "FocusVisiblePolyfillMixin", "LikeAnchor", "ObserveSlotPresence", "cardStyles", "event", "selected", "_a", "code", "el", "startTime", "startX", "startY", "handleEnd", "endEvent", "endTime", "endX", "endY", "timeDelta", "moveX", "moveY", "moved", "images", "roleForWrapper", "changes", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const styles: import("
|
|
1
|
+
declare const styles: import("lit").CSSResult;
|
|
2
2
|
export default styles;
|
package/src/card.css.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const styles: import("
|
|
1
|
+
declare const styles: import("lit").CSSResult;
|
|
2
2
|
export default styles;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const styles: import("
|
|
1
|
+
declare const styles: import("lit").CSSResult;
|
|
2
2
|
export default styles;
|