@ui5/webcomponents 0.0.0-6895c16dd → 0.0.0-69dbc5a15

package/dist/Card.js

@@ -1,342 +1,102 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Card_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import CardTemplate from "./generated/templates/CardTemplate.lit.js";
-import Icon from "./Icon.js";
-
-import {
-	ARIA_ROLEDESCRIPTION_CARD,
-	AVATAR_TOOLTIP,
-	ARIA_LABEL_CARD_CONTENT,
-	ARIA_ROLEDESCRIPTION_CARD_HEADER,
-	ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER,
-} from "./generated/i18n/i18n-defaults.js";
-
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import CardTemplate from "./CardTemplate.js";
+import { ARIA_ROLEDESCRIPTION_CARD, ARIA_LABEL_CARD_CONTENT, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import cardCss from "./generated/themes/Card.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-card",
-	languageAware: true,
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
-
-		/**
-		 * Defines the content of the <code>ui5-card</code>.
-		 * @type {HTMLElement[]}
-		 * @slot content
-		 * @public
-		 */
-		"default": {
-			propertyName: "content",
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the visual representation in the header of the card.
-		 * Supports images and icons.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * SAP-icons font provides numerous options. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		avatar: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines an action, displayed in the right most part of the header.
-		 * <br><br>
-		 * <b>Note:</b> If set, the <code>status</code> text will not be displayed,
-		 * you can either have <code>action</code>, or <code>status</code>.
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 * @since 1.0.0-rc.8
-		 */
-		action: {
-			type: HTMLElement,
-		},
-	},
-	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
-
-		/**
-		 * Defines the title displayed in the <code>ui5-card</code> header.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		heading: {
-			type: String,
-		},
-
-		/**
-		 * Defines the subheading displayed in the <code>ui5-card</code> header.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		subheading: {
-			type: String,
-		},
-
-		/**
-		 * Defines the status displayed in the <code>ui5-card</code> header.
-		 * <br><br>
-		 * <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed,
-		 * you can either have <code>action</code>, or <code>status</code>.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		status: {
-			type: String,
-		},
-
-		/**
-		 * Defines if the <code>ui5-card</code> header would be interactive,
-		 * e.g gets hover effect, gets focused and <code>headerPress</code> event is fired, when it is pressed.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		headerInteractive: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the aria-label attribute for the <code>ui5-card</code>
-		 *
-		 * @type {String}
-		 * @since 1.0.0-rc.9
-		 * @private
-		 * @defaultvalue ""
-		 */
-		ariaLabel: {
-			type: String,
-		},
-
-		/**
-		 * Receives id(or many ids) of the elements that label the <code>ui5-card</code>
-		 *
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: "",
-		},
-
-		_headerActive: {
-			type: Boolean,
-			noAttribute: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
-
-		/**
-		 * Fired when the <code>ui5-card</code> header is activated
-		 * by mouse/tap or by using the Enter or Space key.
-		 * <br><br>
-		 * <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
-		 * @event sap.ui.webcomponents.main.Card#header-click
-		 * @public
-		 * @since 0.10.0
-		 */
-		"header-click": {},
-	},
-};
-
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-card</code> is a component that represents information in the form of a
+ * The `ui5-card` is a component that represents information in the form of a
  * tile with separate header and content areas.
- * The content area of a <code>ui5-card</code> can be arbitrary HTML content.
- * The header can be used through several properties, such as: <code>heading</code>, <code>subheading</code>, <code>status</code>
- * and two slots: <code>avatar</code> and <code>action</code>.
+ * The content area of a `ui5-card` can be arbitrary HTML content.
+ * The header can be used through slot `header`. For which there is a `ui5-card-header` component to achieve the card look and feel.
  *
- * <h3>Keyboard handling</h3>
- * In case you enable <code>headerInteractive</code> property, you can press the <code>ui5-card</code> header by Space and Enter keys.
+ * Note: We recommend the usage of `ui5-card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
  *
- * <h3>ES6 Module Import</h3>
+ * ### ES6 Module Import
  *
- * <code>import "@ui5/webcomponents/dist/Card";</code>
+ * `import "@ui5/webcomponents/dist/Card.js";`
  *
+ * `import "@ui5/webcomponents/dist/CardHeader.js";` (for `ui5-card-header`)
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.Card
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-card
+ * @extends UI5Element
  * @public
+ * @csspart root - Used to style the root DOM element of the card component
+ * @csspart content - Used to style the content of the card
  */
-class Card extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return CardTemplate;
-	}
-
-	static get styles() {
-		return cardCss;
-	}
-
-	get classes() {
-		return {
-			main: {
-				"ui5-card-root": true,
-				"ui5-card--nocontent": !this.content.length,
-			},
-			header: {
-				"ui5-card-header": true,
-				"ui5-card-header--interactive": this.headerInteractive,
-				"ui5-card-header--active": this.headerInteractive && this._headerActive,
-			},
-		};
-	}
-
-	get icon() {
-		return !!this.avatar && this.avatar.startsWith("sap-icon://");
-	}
-
-	get image() {
-		return !!this.avatar && !this.icon;
-	}
-
-	get ariaHeaderRole() {
-		return this.headerInteractive ? "button" : "heading";
-	}
-
-	get ariaLevel() {
-		return this.headerInteractive ? undefined : "3";
-	}
-
-	get hasHeader() {
-		return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar);
-	}
-
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
-
-	get ariaCardRoleDescription() {
-		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
-	}
-
-	get ariaCardHeaderRoleDescription() {
-		return this.headerInteractive ? this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
-	}
-
-	get ariaCardAvatarLabel() {
-		return this.i18nBundle.getText(AVATAR_TOOLTIP);
-	}
-
-	get ariaCardContentLabel() {
-		return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
-	}
-
-	get ariaLabelledByHeader() {
-		const labels = [];
-
-		if (this.subheading) {
-			labels.push(`${this._id}-subheading`);
-		}
-
-		if (this.status) {
-			labels.push(`${this._id}-status`);
-		}
-
-		if (this.hasAvatar) {
-			labels.push(`${this._id}-avatar`);
-		}
-
-		return labels.length !== 0 ? labels.join(" ") : undefined;
-	}
-
-	get ariaLabelledByCard() {
-		return this.heading ? `${this._id}-heading ${this._id}-desc` : `${this._id}-desc`;
-	}
-
-	get hasAvatar() {
-		return !!this.avatar.length;
-	}
-
-	get hasAction() {
-		return !!this.action.length;
-	}
-
-	static get dependencies() {
-		return [Icon];
-	}
-
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
-	}
-
-	_headerClick() {
-		if (this.headerInteractive) {
-			this.fireEvent("header-click");
-		}
-	}
-
-	_headerKeydown(event) {
-		if (!this.headerInteractive) {
-			return;
-		}
-
-		const enter = isEnter(event);
-		const space = isSpace(event);
-
-		this._headerActive = enter || space;
-
-		if (enter) {
-			this.fireEvent("header-click");
-			return;
-		}
-
-		if (space) {
-			event.preventDefault();
-		}
-	}
-
-	_headerKeyup(event) {
-		if (!this.headerInteractive) {
-			return;
-		}
-
-		const space = isSpace(event);
-
-		this._headerActive = false;
-
-		if (space) {
-			this.fireEvent("header-click");
-		}
-	}
-}
-
+let Card = Card_1 = class Card extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines if a loading indicator would be displayed over the card.
+         * @default false
+         * @public
+         * @since 2.1.0
+         */
+        this.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
+         */
+        this.loadingDelay = 1000;
+    }
+    get _hasHeader() {
+        return !!this.header.length;
+    }
+    get _getAriaLabel() {
+        const effectiveAriaLabelText = getEffectiveAriaLabelText(this), effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+        return Card_1.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
+    }
+    get _ariaCardContentLabel() {
+        return Card_1.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
+    }
+};
+__decorate([
+    property()
+], Card.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], Card.prototype, "accessibleNameRef", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], Card.prototype, "content", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true })
+], Card.prototype, "header", void 0);
+__decorate([
+    property({ type: Boolean })
+], Card.prototype, "loading", void 0);
+__decorate([
+    property({ type: Number })
+], Card.prototype, "loadingDelay", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Card, "i18nBundle", void 0);
+Card = Card_1 = __decorate([
+    customElement({
+        tag: "ui5-card",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: CardTemplate,
+        styles: cardCss,
+    })
+], Card);
 Card.define();
-
 export default Card;
+//# sourceMappingURL=Card.js.map

package/dist/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,+DAA+D,CAAC;AAC1G,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EACN,yBAAyB,EACzB,uBAAuB,GACvB,MAAM,mCAAmC,CAAC;AAG3C,SAAS;AACT,OAAO,OAAO,MAAM,gCAAgC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAQH,IAAM,IAAI,YAAV,MAAM,IAAK,SAAQ,UAAU;IAA7B;;QAsCC;;;;;WAKG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;;;;WAKG;QAEH,iBAAY,GAAG,IAAI,CAAC;IAkBrB,CAAC;IAbA,IAAI,UAAU;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,IAAI,aAAa;QAChB,MAAM,sBAAsB,GAAG,yBAAyB,CAAC,IAAI,CAAC,EAC7D,kBAAkB,GAAG,sBAAsB,CAAC,CAAC,CAAC,IAAI,sBAAsB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACjF,OAAO,MAAI,CAAC,UAAU,CAAC,OAAO,CAAC,yBAAyB,CAAC,GAAG,kBAAkB,CAAC;IAChF,CAAC;IAED,IAAI,qBAAqB;QACxB,OAAO,MAAI,CAAC,UAAU,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACzD,CAAC;CACD,CAAA;AA9DA;IADC,QAAQ,EAAE;4CACa;AASxB;IADC,QAAQ,EAAE;+CACgB;AAO3B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qCAChB;AAU7B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;oCAChC;AAS3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAShB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACP;AAGb;IADN,IAAI,CAAC,oBAAoB,CAAC;8BACG;AAzDzB,IAAI;IAPT,aAAa,CAAC;QACd,GAAG,EAAE,UAAU;QACf,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,YAAY;QACtB,MAAM,EAAE,OAAO;KACf,CAAC;GACI,IAAI,CAwET;AAED,IAAI,CAAC,MAAM,EAAE,CAAC;AAEd,eAAe,IAAI,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport CardTemplate from \"./CardTemplate.js\";\n\nimport {\n\tARIA_ROLEDESCRIPTION_CARD,\n\tARIA_LABEL_CARD_CONTENT,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type CardHeader from \"./CardHeader.js\";\n\n// Styles\nimport cardCss from \"./generated/themes/Card.css.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-card` is a component that represents information in the form of a\n * tile with separate header and content areas.\n * The content area of a `ui5-card` can be arbitrary HTML content.\n * The header can be used through slot `header`. For which there is a `ui5-card-header` component to achieve the card look and feel.\n *\n * Note: We recommend the usage of `ui5-card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Card.js\";`\n *\n * `import \"@ui5/webcomponents/dist/CardHeader.js\";` (for `ui5-card-header`)\n * @constructor\n * @extends UI5Element\n * @public\n * @csspart root - Used to style the root DOM element of the card component\n * @csspart content - Used to style the content of the card\n */\n@customElement({\n\ttag: \"ui5-card\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: CardTemplate,\n\tstyles: cardCss,\n})\nclass Card extends UI5Element {\n\t/**\n\t * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.\n\t *\n\t * **Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.16\n\t*/\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines the IDs of the elements that label the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.16\n\t*/\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the content of the component.\n\t * @public\n\t*/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the header of the component.\n\t *\n\t * **Note:** Use `ui5-card-header` for the intended design.\n\t * @since 1.0.0-rc.15\n\t * @public\n\t*/\n\t@slot({ type: HTMLElement, invalidateOnChildChange: true })\n\theader!: Array<CardHeader>;\n\n\t/**\n\t * Defines if a loading indicator would be displayed over the card.\n\t * @default false\n\t * @public\n\t * @since 2.1.0\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the loading indicator will show up for this card.\n\t * @default 1000\n\t * @public\n\t * @since 2.1.0\n\t */\n\t@property({ type: Number })\n\tloadingDelay = 1000;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tget _hasHeader() {\n\t\treturn !!this.header.length;\n\t}\n\n\tget _getAriaLabel() {\n\t\tconst effectiveAriaLabelText = getEffectiveAriaLabelText(this),\n\t\t\teffectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : \"\";\n\t\treturn Card.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;\n\t}\n\n\tget _ariaCardContentLabel() {\n\t\treturn Card.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);\n\t}\n}\n\nCard.define();\n\nexport default Card;\n"]}

package/dist/CardHeader.d.ts

@@ -0,0 +1,89 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-card-header` is a component, meant to be used as a header of the `ui5-card` component.
+ * It displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `additionalText`
+ * and two slots: `avatar` and `action`.
+ *
+ * ### Keyboard handling
+ * In case you enable `interactive` property, you can press the `ui5-card-header` by Space and Enter keys.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/CardHeader";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.0.0-rc.15
+ * @csspart root - Used to style the root DOM element of the CardHeader
+ * @csspart title - Used to style the title of the CardHeader
+ * @csspart subtitle - Used to style the subtitle of the CardHeader
+ * @csspart additional-text - Used to style the additional text of the CardHeader
+ */
+declare class CardHeader extends UI5Element {
+    eventDetails: {
+        click: void;
+    };
+    /**
+     * Defines the title text.
+     * @default undefined
+     * @public
+    */
+    titleText?: string;
+    /**
+     * Defines the subtitle text.
+     * @default undefined
+     * @public
+    */
+    subtitleText?: string;
+    /**
+     * Defines the additional text.
+     * @default undefined
+     * @public
+    */
+    additionalText?: string;
+    /**
+     * Defines if the component would be interactive,
+     * e.g gets hover effect and `click` event is fired, when pressed.
+     * @default false
+     * @public
+    */
+    interactive: boolean;
+    /**
+     * Define the `aria-level` attribute of the component
+     *
+     * **Note: ** If the interactive property is set, `aria-level` attribute is not rendered at all.
+     * @private
+     * @default 3
+    */
+    _ariaLevel: number;
+    _headerActive: boolean;
+    /**
+     * Defines an avatar image, displayed in the left most part of the header.
+     * @public
+    */
+    avatar: Array<HTMLElement>;
+    /**
+     * Defines an action, displayed in the right most part of the header.
+     * @public
+    */
+    action: Array<HTMLElement>;
+    static i18nBundle: I18nBundle;
+    onEnterDOM(): void;
+    get _root(): HTMLElement;
+    get ariaRoleDescription(): string;
+    get ariaRoleFocusableElement(): "button" | undefined;
+    get ariaCardAvatarLabel(): string;
+    get ariaLabelledBy(): string | undefined;
+    get hasAvatar(): boolean;
+    get hasAction(): boolean;
+    _actionsFocusin(): void;
+    _actionsFocusout(): void;
+    _click(e: MouseEvent): void;
+    _keydown(e: KeyboardEvent): void;
+    _keyup(e: KeyboardEvent): void;
+}
+export default CardHeader;