@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/CalendarPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPart.js","sourceRoot":"","sources":["../src/CalendarPart.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,YAAY,MAAM,4DAA4D,CAAC;AACtF,OAAO,YAAY,MAAM,4DAA4D,CAAC;AACtF,OAAO,oBAAoB,MAAM,oEAAoE,CAAC;AACtG,OAAO,OAAO,MAAM,uDAAuD,CAAC;AAC5E,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD;;;;;;;;;GASG;AAEH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,iBAAiB;IAS3C,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IACvC,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IACvC,CAAC;IAED;;;OAGG;IACH,IAAI,UAAU;QACb,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAEhH,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC;YAC1D,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,CAAC;aAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC;YACjE,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,CAAC;QAED,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,IAAI,UAAU;QACb,OAAO,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IACpD,CAAC;IAED;;;OAGG;IACH,IAAI,aAAa;QAChB,OAAO,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACzF,CAAC;IAED;;;;OAIG;IACH,mBAAmB,CAAC,SAAiB;QACpC,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QAC3C,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QAE3C,IAAI,SAAS,GAAG,GAAG,EAAE,CAAC;YACrB,SAAS,GAAG,GAAG,CAAC;QACjB,CAAC;QACD,IAAI,SAAS,GAAG,GAAG,EAAE,CAAC;YACrB,SAAS,GAAG,GAAG,CAAC;QACjB,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5B,CAAC;IAED;;;;;;OAMG;IACH,wBAAwB,CAAC,MAAc,EAAE,IAAY,EAAE,YAAsB;QAC5E,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;QAC7E,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC;IACpD,CAAC;IAED,oBAAoB,CAAC,OAAoB;QACxC,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,oBAAoB,CAAE,CAAC;QACjE,OAAO,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC/B,CAAC;CACD,CAAA;AAzEA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACR;AAPd,YAAY;IADjB,aAAa,EAAE;GACV,YAAY,CAgFjB;AAED,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport modifyDateBy from \"@ui5/webcomponents-localization/dist/dates/modifyDateBy.js\";\nimport getTodayUTCTimestamp from \"@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js\";\nimport UI5Date from \"@ui5/webcomponents-localization/dist/dates/UI5Date.js\";\nimport DateComponentBase from \"./DateComponentBase.js\";\n\n/**\n * @class\n *\n * Abstract base class for Calendar, DayPicker, MonthPicker and YearPicker that adds support for:\n *  - common properties (timestamp, selectedDates): declarations and methods that operate on them\n *  - other common code\n * @constructor\n * @extends DateComponentBase\n * @public\n */\n@customElement()\nclass CalendarPart extends DateComponentBase {\n\t/**\n\t * The timestamp of the currently focused date. Set this property to move the component's focus to a certain date.\n\t * **Node:** Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch.\n\t * @protected\n\t */\n\t@property({ type: Number })\n\ttimestamp?: number;\n\n\tget _minTimestamp() {\n\t\treturn this._minDate.valueOf() / 1000;\n\t}\n\n\tget _maxTimestamp() {\n\t\treturn this._maxDate.valueOf() / 1000;\n\t}\n\n\t/**\n\t * Returns the effective timestamp to be used by the respective calendar part\n\t * @protected\n\t */\n\tget _timestamp() {\n\t\tlet timestamp = this.timestamp !== undefined ? this.timestamp : getTodayUTCTimestamp(this._primaryCalendarType);\n\n\t\tif (this._maxTimestamp && this._maxTimestamp < timestamp) {\n\t\t\ttimestamp = this._maxTimestamp;\n\t\t} else if (this._minTimestamp && this._minTimestamp > timestamp) {\n\t\t\ttimestamp = this._minTimestamp;\n\t\t}\n\n\t\treturn timestamp;\n\t}\n\n\tget _localDate() {\n\t\treturn UI5Date.getInstance(this._timestamp * 1000);\n\t}\n\n\t/**\n\t * Returns a CalendarDate instance, representing the _timestamp getter - this date is central to all components' rendering logic\n\t * @protected\n\t */\n\tget _calendarDate() {\n\t\treturn CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);\n\t}\n\n\t/**\n\t * Change a timestamp and enforce limits\n\t * @param timestamp\n\t * @protected\n\t */\n\t_safelySetTimestamp(timestamp: number) {\n\t\tconst min = this._minDate.valueOf() / 1000;\n\t\tconst max = this._maxDate.valueOf() / 1000;\n\n\t\tif (timestamp < min) {\n\t\t\ttimestamp = min;\n\t\t}\n\t\tif (timestamp > max) {\n\t\t\ttimestamp = max;\n\t\t}\n\n\t\tthis.timestamp = timestamp;\n\t}\n\n\t/**\n\t * Modify a timestamp by a certain amount of days/months/years and enforce limits\n\t * @param amount\n\t * @param unit\n\t * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)\n\t * @protected\n\t */\n\t_safelyModifyTimestampBy(amount: number, unit: string, preserveDate?: boolean) {\n\t\tconst newDate = modifyDateBy(this._calendarDate, amount, unit, preserveDate);\n\t\tthis._safelySetTimestamp(newDate.valueOf() / 1000);\n\t}\n\n\t_getTimestampFromDom(domNode: HTMLElement) {\n\t\tconst oMonthDomRef = domNode.getAttribute(\"data-sap-timestamp\")!;\n\t\treturn parseInt(oMonthDomRef);\n\t}\n}\n\nexport default CalendarPart;\n"]}

package/dist/CalendarTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Calendar from "./Calendar.js";
+export default function CalendarTemplate(this: Calendar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/CalendarTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import DayPicker from "./DayPicker.js";
+import MonthPicker from "./MonthPicker.js";
+import YearPicker from "./YearPicker.js";
+import YearRangePicker from "./YearRangePicker.js";
+import CalendarHeaderTemplate from "./CalendarHeaderTemplate.js";
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
+export default function CalendarTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-cal-root", onKeyDown: this._onkeydown, children: [_jsx("div", { class: "ui5-calheader", exportparts: "calendar-header-arrow-button, calendar-header-middle-button", children: CalendarHeaderTemplate.call(this) }), _jsxs("div", { id: `${this._id}-content`, class: "ui5-cal-content", children: [_jsx(DayPicker, { id: `${this._id}-daypicker`, hidden: this._isDayPickerHidden, formatPattern: this._formatPattern, selectedDates: this._selectedDatesTimestamps, specialCalendarDates: this._specialCalendarDates, disabledDates: this._disabledDates, _hidden: this._isDayPickerHidden, primaryCalendarType: this._primaryCalendarType, secondaryCalendarType: this._secondaryCalendarType, selectionMode: this.selectionMode, minDate: this.minDate, maxDate: this.maxDate, calendarWeekNumbering: this.calendarWeekNumbering, timestamp: this._timestamp, hideWeekNumbers: this.hideWeekNumbers, onChange: this.onSelectedDatesChange, onNavigate: this.onNavigate, exportparts: "day-cell, day-cell-selected, day-cell-selected-between" }), _jsx(MonthPicker, { id: `${this._id}-MP`, hidden: this._isMonthPickerHidden, formatPattern: this._formatPattern, selectedDates: this._selectedDatesTimestamps, _hidden: this._isMonthPickerHidden, primaryCalendarType: this._primaryCalendarType, secondaryCalendarType: this._secondaryCalendarType, selectionMode: this.selectionMode, minDate: this.minDate, maxDate: this.maxDate, timestamp: this._timestamp, onChange: this.onSelectedMonthChange, onNavigate: this.onNavigate, exportparts: "month-cell, month-cell-selected, month-cell-selected-between, month-picker-root" }), _jsx(YearPicker, { id: `${this._id}-YP`, hidden: this._isYearPickerHidden, formatPattern: this._formatPattern, selectedDates: this._selectedDatesTimestamps, _hidden: this._isYearPickerHidden, primaryCalendarType: this._primaryCalendarType, secondaryCalendarType: this._secondaryCalendarType, selectionMode: this.selectionMode, minDate: this.minDate, maxDate: this.maxDate, timestamp: this._timestamp, _currentYearRange: this._currentYearRange, onChange: this.onSelectedYearChange, onNavigate: this.onNavigate, exportparts: "year-cell, year-cell-selected, year-cell-selected-between, year-picker-root" }), _jsx(YearRangePicker, { id: `${this._id}-YRP`, hidden: this._isYearRangePickerHidden, formatPattern: this._formatPattern, selectedDates: this._selectedDatesTimestamps, _showRangeSelection: this.selectionMode === CalendarSelectionMode.Range, _hidden: this._isYearRangePickerHidden, primaryCalendarType: this._primaryCalendarType, secondaryCalendarType: this._secondaryCalendarType, minDate: this.minDate, maxDate: this.maxDate, timestamp: this._timestamp, _currentYearRange: this._currentYearRange, onChange: this.onSelectedYearRangeChange, onNavigate: this.onNavigate, exportparts: "year-range-cell, year-range-cell-selected, year-range-cell-selected-between, year-range-picker-root" })] })] }), _jsx("div", { "onui5-calendar-legend-selection-change": this._onCalendarLegendSelectionChange, "onui5-calendar-legend-focus-out": this._onLegendFocusOut, children: _jsx("slot", { name: "calendarLegend" }) })] }));
+}
+//# sourceMappingURL=CalendarTemplate.js.map

package/dist/CalendarTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarTemplate.js","sourceRoot":"","sources":["../src/CalendarTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,eAAe,MAAM,sBAAsB,CAAC;AACnD,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AACjE,OAAO,qBAAqB,MAAM,kCAAkC,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,OAAO,CACN,8BACC,eACC,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAI,CAAC,UAAU,aAE1B,cAAK,KAAK,EAAC,eAAe,EAAC,WAAW,EAAC,6DAA6D,YACjG,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC9B,EACN,eAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EAAE,KAAK,EAAC,iBAAiB,aACtD,KAAC,SAAS,IACT,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,YAAY,EAC3B,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,aAAa,EAAE,IAAI,CAAC,wBAAwB,EAC5C,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,EAChD,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,mBAAmB,EAAE,IAAI,CAAC,oBAAoB,EAC9C,qBAAqB,EAAE,IAAI,CAAC,sBAAsB,EAClD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EACpC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAC,wDAAwD,GACnE,EAEF,KAAC,WAAW,IACX,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,KAAK,EACpB,MAAM,EAAE,IAAI,CAAC,oBAAoB,EACjC,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,aAAa,EAAE,IAAI,CAAC,wBAAwB,EAC5C,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,mBAAmB,EAAE,IAAI,CAAC,oBAAoB,EAC9C,qBAAqB,EAAE,IAAI,CAAC,sBAAsB,EAClD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EACpC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAC,iFAAiF,GAC5F,EAEF,KAAC,UAAU,IACV,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,KAAK,EACpB,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAChC,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,aAAa,EAAE,IAAI,CAAC,wBAAwB,EAC5C,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,mBAAmB,EAAE,IAAI,CAAC,oBAAoB,EAC9C,qBAAqB,EAAE,IAAI,CAAC,sBAAsB,EAClD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,iBAAiB,EAAI,IAAI,CAAC,iBAAiB,EAC3C,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAC,6EAA6E,GACxF,EAEF,KAAC,eAAe,IACf,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,MAAM,EACrB,MAAM,EAAE,IAAI,CAAC,wBAAwB,EACrC,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,aAAa,EAAE,IAAI,CAAC,wBAAwB,EAC5C,mBAAmB,EAAE,IAAI,CAAC,aAAa,KAAK,qBAAqB,CAAC,KAAK,EACvE,OAAO,EAAE,IAAI,CAAC,wBAAwB,EACtC,mBAAmB,EAAE,IAAI,CAAC,oBAAoB,EAC9C,qBAAqB,EAAE,IAAI,CAAC,sBAAsB,EAClD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,iBAAiB,EAAI,IAAI,CAAC,iBAAiB,EAC3C,QAAQ,EAAE,IAAI,CAAC,yBAAyB,EACxC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAC,qGAAqG,GAChH,IACG,IACD,EAEN,wDACyC,IAAI,CAAC,gCAAgC,qCAC5C,IAAI,CAAC,iBAAiB,YAEvD,eAAM,IAAI,EAAC,gBAAgB,GAAQ,GAC9B,IACJ,CAAC,CAAC;AACP,CAAC","sourcesContent":["import type Calendar from \"./Calendar.js\";\nimport DayPicker from \"./DayPicker.js\";\nimport MonthPicker from \"./MonthPicker.js\";\nimport YearPicker from \"./YearPicker.js\";\nimport YearRangePicker from \"./YearRangePicker.js\";\nimport CalendarHeaderTemplate from \"./CalendarHeaderTemplate.js\";\nimport CalendarSelectionMode from \"./types/CalendarSelectionMode.js\";\n\nexport default function CalendarTemplate(this: Calendar) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-cal-root\"\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t>\n\t\t\t\t<div class=\"ui5-calheader\" exportparts=\"calendar-header-arrow-button, calendar-header-middle-button\">\n\t\t\t\t\t{ CalendarHeaderTemplate.call(this) }\n\t\t\t\t</div>\n\t\t\t\t<div id={`${this._id}-content`} class=\"ui5-cal-content\">\n\t\t\t\t\t<DayPicker\n\t\t\t\t\t\tid={`${this._id}-daypicker`}\n\t\t\t\t\t\thidden={this._isDayPickerHidden}\n\t\t\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\t\t\tselectedDates={this._selectedDatesTimestamps}\n\t\t\t\t\t\tspecialCalendarDates={this._specialCalendarDates}\n\t\t\t\t\t\tdisabledDates={this._disabledDates}\n\t\t\t\t\t\t_hidden={this._isDayPickerHidden}\n\t\t\t\t\t\tprimaryCalendarType={this._primaryCalendarType}\n\t\t\t\t\t\tsecondaryCalendarType={this._secondaryCalendarType}\n\t\t\t\t\t\tselectionMode={this.selectionMode}\n\t\t\t\t\t\tminDate={this.minDate}\n\t\t\t\t\t\tmaxDate={this.maxDate}\n\t\t\t\t\t\tcalendarWeekNumbering={this.calendarWeekNumbering}\n\t\t\t\t\t\ttimestamp={this._timestamp}\n\t\t\t\t\t\thideWeekNumbers={this.hideWeekNumbers}\n\t\t\t\t\t\tonChange={this.onSelectedDatesChange}\n\t\t\t\t\t\tonNavigate={this.onNavigate}\n\t\t\t\t\t\texportparts=\"day-cell, day-cell-selected, day-cell-selected-between\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MonthPicker\n\t\t\t\t\t\tid={`${this._id}-MP`}\n\t\t\t\t\t\thidden={this._isMonthPickerHidden}\n\t\t\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\t\t\tselectedDates={this._selectedDatesTimestamps}\n\t\t\t\t\t\t_hidden={this._isMonthPickerHidden}\n\t\t\t\t\t\tprimaryCalendarType={this._primaryCalendarType}\n\t\t\t\t\t\tsecondaryCalendarType={this._secondaryCalendarType}\n\t\t\t\t\t\tselectionMode={this.selectionMode}\n\t\t\t\t\t\tminDate={this.minDate}\n\t\t\t\t\t\tmaxDate={this.maxDate}\n\t\t\t\t\t\ttimestamp={this._timestamp}\n\t\t\t\t\t\tonChange={this.onSelectedMonthChange}\n\t\t\t\t\t\tonNavigate={this.onNavigate}\n\t\t\t\t\t\texportparts=\"month-cell, month-cell-selected, month-cell-selected-between, month-picker-root\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<YearPicker\n\t\t\t\t\t\tid={`${this._id}-YP`}\n\t\t\t\t\t\thidden={this._isYearPickerHidden}\n\t\t\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\t\t\tselectedDates={this._selectedDatesTimestamps}\n\t\t\t\t\t\t_hidden={this._isYearPickerHidden}\n\t\t\t\t\t\tprimaryCalendarType={this._primaryCalendarType}\n\t\t\t\t\t\tsecondaryCalendarType={this._secondaryCalendarType}\n\t\t\t\t\t\tselectionMode={this.selectionMode}\n\t\t\t\t\t\tminDate={this.minDate}\n\t\t\t\t\t\tmaxDate={this.maxDate}\n\t\t\t\t\t\ttimestamp={this._timestamp}\n\t\t\t\t\t\t_currentYearRange = {this._currentYearRange}\n\t\t\t\t\t\tonChange={this.onSelectedYearChange}\n\t\t\t\t\t\tonNavigate={this.onNavigate}\n\t\t\t\t\t\texportparts=\"year-cell, year-cell-selected, year-cell-selected-between, year-picker-root\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<YearRangePicker\n\t\t\t\t\t\tid={`${this._id}-YRP`}\n\t\t\t\t\t\thidden={this._isYearRangePickerHidden}\n\t\t\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\t\t\tselectedDates={this._selectedDatesTimestamps}\n\t\t\t\t\t\t_showRangeSelection={this.selectionMode === CalendarSelectionMode.Range}\n\t\t\t\t\t\t_hidden={this._isYearRangePickerHidden}\n\t\t\t\t\t\tprimaryCalendarType={this._primaryCalendarType}\n\t\t\t\t\t\tsecondaryCalendarType={this._secondaryCalendarType}\n\t\t\t\t\t\tminDate={this.minDate}\n\t\t\t\t\t\tmaxDate={this.maxDate}\n\t\t\t\t\t\ttimestamp={this._timestamp}\n\t\t\t\t\t\t_currentYearRange = {this._currentYearRange}\n\t\t\t\t\t\tonChange={this.onSelectedYearRangeChange}\n\t\t\t\t\t\tonNavigate={this.onNavigate}\n\t\t\t\t\t\texportparts=\"year-range-cell, year-range-cell-selected, year-range-cell-selected-between, year-range-picker-root\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tonui5-calendar-legend-selection-change={this._onCalendarLegendSelectionChange}\n\t\t\t\tonui5-calendar-legend-focus-out={this._onLegendFocusOut}\n\t\t\t>\n\t\t\t\t<slot name=\"calendarLegend\"></slot>\n\t\t\t</div>\n\t\t</>);\n}\n"]}

package/dist/Card.d.ts

@@ -0,0 +1,76 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type CardHeader from "./CardHeader.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * 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 `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.
+ *
+ * Note: We recommend the usage of `ui5-card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Card.js";`
+ *
+ * `import "@ui5/webcomponents/dist/CardHeader.js";` (for `ui5-card-header`)
+ * @constructor
+ * @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
+ */
+declare class Card extends UI5Element {
+    /**
+     * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
+     *
+     * **Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.
+     * @default undefined
+     * @public
+     * @since 1.0.0-rc.16
+    */
+    accessibleName?: string;
+    /**
+     * Defines the IDs of the elements that label the component.
+     * @default undefined
+     * @public
+     * @since 1.0.0-rc.16
+    */
+    accessibleNameRef?: string;
+    /**
+     * Defines the content of the component.
+     * @public
+    */
+    content: DefaultSlot<HTMLElement>;
+    /**
+     * Defines the header of the component.
+     *
+     * **Note:** Use `ui5-card-header` for the intended design.
+     * @since 1.0.0-rc.15
+     * @public
+    */
+    header: Slot<CardHeader>;
+    /**
+     * Defines if a loading indicator would be displayed over the card.
+     * @default false
+     * @public
+     * @since 2.1.0
+     */
+    loading: boolean;
+    /**
+     * Defines the delay in milliseconds, after which the loading indicator will show up for this card.
+     * @default 1000
+     * @public
+     * @since 2.1.0
+     */
+    loadingDelay: number;
+    static i18nBundle: I18nBundle;
+    get _hasHeader(): boolean;
+    get _getAriaLabel(): string;
+    get _ariaCardContentLabel(): string;
+}
+export default Card;

package/dist/Card.js

@@ -1,160 +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 { getI18nBundle } 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 {
-	ARIA_ROLEDESCRIPTION_CARD,
-	ARIA_LABEL_CARD_CONTENT,
-} 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-strict.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 component.
-		 * @type {HTMLElement[]}
-		 * @slot content
-		 * @public
-		 */
-		"default": {
-			propertyName: "content",
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the header of the component.
-		 * <br><br>
-		 * <b>Note:</b> Use <code>ui5-card-header</code> for the intended design.
-		 * @type {HTMLElement[]}
-		 * @since 1.0.0-rc.15
-		 * @slot content
-		 * @public
-		 */
-		header: {
-			type: HTMLElement,
-		},
-	},
-	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
-
-		/**
-		 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
-		 * <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.
-		 *
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 * @since 1.0.0-rc.16
-		 */
-		accessibleName: {
-			type: String,
-		},
-
-		/**
-		 * Defines the IDs of the elements that label the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 * @since 1.0.0-rc.16
-		 */
-		accessibleNameRef: {
-			type: String,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
-
-	},
-};
-
 /**
  * @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 slot <code>header</code>. For which there is a <code>ui5-card-header</code> component to achieve the card look and fill.
- *
- * Note: We recommend the usage of <code>ui5-card-header</code> for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
+ * 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>CSS Shadow Parts</h3>
+ * Note: We recommend the usage of `ui5-card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
  *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * ### ES6 Module Import
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/Card";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/CardHeader.js";</code> (for <code>ui5-card-header</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
- * @appenddocs CardHeader
+ * @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 {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return CardTemplate;
-	}
-
-	static get styles() {
-		return cardCss;
-	}
-
-	get classes() {
-		return {
-			"ui5-card-root": true,
-			"ui5-card--nocontent": !this.content.length,
-		};
-	}
-
-	get _hasHeader() {
-		return !!this.header.length;
-	}
-
-	get _getAriaLabel() {
-		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
-			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
-		return Card.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
-	}
-
-	get _ariaCardContentLabel() {
-		return Card.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
-	}
-
-	static get dependencies() {
-		return [Icon];
-	}
-
-	static async onDefine() {
-		Card.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-}
-
+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;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,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;qCACV;AAUnC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;oCACjC;AAS1B;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 type { Slot, DefaultSlot } 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-strict.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!: DefaultSlot<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!: Slot<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,90 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } 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: Slot<HTMLElement>;
+    /**
+     * Defines an action, displayed in the right most part of the header.
+     * @public
+    */
+    action: Slot<HTMLElement>;
+    static i18nBundle: I18nBundle;
+    onEnterDOM(): void;
+    get _root(): HTMLElement;
+    get ariaRoleDescription(): string;
+    get ariaRoleFocusableElement(): "button" | "group";
+    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;