diff --git a/src/components/calcite-block/resources.ts b/src/components/calcite-block/resources.ts
index 786d4d63d8f..d8996476be4 100644
--- a/src/components/calcite-block/resources.ts
+++ b/src/components/calcite-block/resources.ts
@@ -15,7 +15,8 @@ export const CSS = {
export const TEXT = {
collapse: "Collapse",
- expand: "Expand"
+ expand: "Expand",
+ loading: "Loading"
};
export const SLOTS = {
diff --git a/src/components/calcite-button/calcite-button.tsx b/src/components/calcite-button/calcite-button.tsx
index 052ba6fc786..76074754e4e 100644
--- a/src/components/calcite-button/calcite-button.tsx
+++ b/src/components/calcite-button/calcite-button.tsx
@@ -1,5 +1,5 @@
import { Component, Element, h, Host, Method, Prop, Build, State, VNode } from "@stencil/core";
-import { CSS } from "./resources";
+import { CSS, TEXT } from "./resources";
import { getElementDir } from "../../utils/dom";
@Component({
@@ -49,6 +49,9 @@ export class CalciteButton {
/** optionally pass an icon to display at the start of a button - accepts calcite ui icon names */
@Prop({ reflect: true }) iconStart?: string;
+ /** string to override English loading text */
+ @Prop() intlLoading?: string = TEXT.loading;
+
/** optionally specify alignment of button elements. */
@Prop({ reflect: true }) alignment?:
| "start"
@@ -106,7 +109,7 @@ export class CalciteButton {
const loader = (
-
+
);
diff --git a/src/components/calcite-button/resources.ts b/src/components/calcite-button/resources.ts
index b15372fca18..342df8c1d99 100644
--- a/src/components/calcite-button/resources.ts
+++ b/src/components/calcite-button/resources.ts
@@ -5,3 +5,7 @@ export const CSS = {
iconStart: "icon--start",
iconEnd: "icon--end"
};
+
+export const TEXT = {
+ loading: "Loading"
+};
diff --git a/src/components/calcite-card/calcite-card.tsx b/src/components/calcite-card/calcite-card.tsx
index af63cea2595..e3767c5c0a0 100644
--- a/src/components/calcite-card/calcite-card.tsx
+++ b/src/components/calcite-card/calcite-card.tsx
@@ -48,6 +48,9 @@ export class CalciteCard {
/** The theme of the card.*/
@Prop({ reflect: true }) theme: "light" | "dark";
+ /** string to override English loading text */
+ @Prop() intlLoading?: string = TEXT.loading;
+
/** string to override English select text for checkbox when selectable is true */
@Prop({ reflect: false }) intlSelect: string = TEXT.select;
@@ -76,7 +79,7 @@ export class CalciteCard {
{this.loading ? (
-
+
) : null}
@@ -104,11 +107,11 @@ export class CalciteCard {
//
//--------------------------------------------------------------------------
- private cardSelectClick() {
+ private cardSelectClick = (): void => {
this.selectCard();
- }
+ };
- private cardSelectKeyDown(e): void {
+ private cardSelectKeyDown = (e: KeyboardEvent): void => {
switch (getKey(e.key)) {
case " ":
case "Enter":
@@ -116,7 +119,7 @@ export class CalciteCard {
e.preventDefault();
break;
}
- }
+ };
private selectCard() {
this.selected = !this.selected;
@@ -139,8 +142,8 @@ export class CalciteCard {