diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs
index 7d226115b16e..4a85d6e821e4 100644
--- a/packages/main/src/Card.hbs
+++ b/packages/main/src/Card.hbs
@@ -3,12 +3,21 @@
role="region"
aria-label="{{_getAriaLabel}}"
part="root">
- {{#if _hasHeader}}
-
diff --git a/packages/main/src/Card.ts b/packages/main/src/Card.ts
index 02bc650e163b..3e33b577d49f 100644
--- a/packages/main/src/Card.ts
+++ b/packages/main/src/Card.ts
@@ -8,6 +8,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
import CardTemplate from "./generated/templates/CardTemplate.lit.js";
import Icon from "./Icon.js";
+import BusyIndicator from "./BusyIndicator.js";
+
import {
ARIA_ROLEDESCRIPTION_CARD,
ARIA_LABEL_CARD_CONTENT,
@@ -45,7 +47,7 @@ import cardCss from "./generated/themes/Card.css.js";
renderer: litRender,
template: CardTemplate,
styles: cardCss,
- dependencies: [Icon],
+ dependencies: [Icon, BusyIndicator],
})
class Card extends UI5Element {
/**
@@ -85,6 +87,24 @@ class Card extends UI5Element {
@slot({ type: HTMLElement, invalidateOnChildChange: true })
header!: Array;
+ /**
+ * Defines if a loading indicator would be displayed over the card.
+ * @default false
+ * @public
+ * @since 2.1.0
+ */
+ @property({ type: Boolean })
+ loading = false;
+
+ /**
+ * Defines the delay in milliseconds, after which the loading indicator will show up for this card.
+ * @default 1000
+ * @public
+ * @since 2.1.0
+ */
+ @property({ type: Number })
+ loadingDelay = 1000;
+
static i18nBundle: I18nBundle;
get classes() {
diff --git a/packages/main/src/themes/Card.css b/packages/main/src/themes/Card.css
index 38d1dc0f5f07..700770c003c2 100644
--- a/packages/main/src/themes/Card.css
+++ b/packages/main/src/themes/Card.css
@@ -19,6 +19,17 @@
box-sizing: border-box;
}
+.ui5-card-busy-indicator {
+ width: 100%;
+ height: 100%;
+ border-radius: var(--_ui5_card_border-radius);
+}
+
+.ui5-card-inner {
+ width: 100%;
+ height: 100%;
+}
+
.ui5-card-root.ui5-card--interactive:hover {
box-shadow: var(--_ui5_card_hover_box_shadow);
}
diff --git a/packages/main/test/pages/Card.html b/packages/main/test/pages/Card.html
index d86b1a5610f3..e37e6db56e8c 100644
--- a/packages/main/test/pages/Card.html
+++ b/packages/main/test/pages/Card.html
@@ -331,13 +331,30 @@
I am the content
+
+
+
+ Content Button
+
+
+
diff --git a/packages/main/test/specs/Card.spec.js b/packages/main/test/specs/Card.spec.js
index 9092a32468c0..87a973cd10cd 100644
--- a/packages/main/test/specs/Card.spec.js
+++ b/packages/main/test/specs/Card.spec.js
@@ -96,6 +96,14 @@ describe("Card general interaction", () => {
await cardHeaderTitle.setAttribute("aria-level", 4);
assert.strictEqual(await cardHeader.shadow$(".ui5-card-header .ui5-card-header-title").getAttribute("aria-level"), "4");
});
+
+ it("tests loading", async () => {
+ const card = await browser.$("#loadingCard");
+ const busyIndicator = card.shadow$("ui5-busy-indicator");
+
+ assert.ok(await busyIndicator.hasAttribute("active"), "The busy indicator is active.");
+ assert.strictEqual(await busyIndicator.getAttribute("delay"), "500", "The delay is correct.");
+ });
});
describe("CardHeader", () => {