@ui5/webcomponents 0.0.0-d849bec2c → 0.0.0-dc3ccac50

package/dist/CalendarDate.js

@@ -0,0 +1,45 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+* @public
+*/
+const metadata = {
+	tag: "ui5-date",
+	properties: /** @lends  sap.ui.webcomponents.main.CalendarDate.prototype */ {
+
+		/**
+		 * The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the component
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		value: {
+			type: String,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-date</code> component defines a calendar date to be used inside <code>ui5-calendar</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.CalendarDate
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-date
+ * @implements sap.ui.webcomponents.main.ICalendarDate
+ * @public
+ */
+class CalendarDate extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+}
+
+CalendarDate.define();
+
+export default CalendarDate;

package/dist/CalendarHeader.js

@@ -1,42 +1,84 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js";
-import Button from "./Button.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import Icon from "./Icon.js";
-import ButtonDesign from "./types/ButtonDesign.js";
 import CalendarHeaderTemplate from "./generated/templates/CalendarHeaderTemplate.lit.js";
+import {
+	CALENDAR_HEADER_NEXT_BUTTON,
+	CALENDAR_HEADER_PREVIOUS_BUTTON,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/CalendarHeader.css.js";
 
 const metadata = {
 	tag: "ui5-calendar-header",
+	languageAware: true,
 	properties: {
-		monthText: {
-			type: String,
+		/**
+		 * Already normalized by Calendar
+		 * @type {Integer}
+		 * @public
+		 */
+		timestamp: {
+			type: Integer,
 		},
-		yearText: {
-			type: String,
+
+		/**
+		 * Already normalized by Calendar
+		 * @type {CalendarType}
+		 * @public
+		 */
+		primaryCalendarType: {
+			type: CalendarType,
 		},
-		_btnPrev: {
-			type: Object,
+
+		/**
+		 * Already normalized by Calendar
+		 * @sience 1.0.0-rc.16
+		 * @defaultvalue undefined
+		 * @type {CalendarType}
+		 * @public
+		 */
+		secondaryCalendarType: {
+			type: CalendarType,
 		},
-		_btnNext: {
+
+		/**
+		 * Stores information for month button for secondary calendar type
+		 * @type {Object}
+		 * @private
+		*/
+		buttonTextForSecondaryCalendarType: {
 			type: Object,
 		},
-		_btn1: {
-			type: Object,
+
+		isNextButtonDisabled: {
+			type: Boolean,
 		},
-		_btn2: {
-			type: Object,
+
+		isPrevButtonDisabled: {
+			type: Boolean,
 		},
-		_isNextButtonDisabled: {
+
+		isMonthButtonHidden: {
 			type: Boolean,
 		},
-		_isPrevButtonDisabled: {
+
+		_monthButtonText: {
+			type: String,
+		},
+
+		_yearButtonText: {
+			type: String,
+		},
+
+		isYearButtonHidden: {
 			type: Boolean,
 		},
 	},
@@ -65,71 +107,100 @@ class CalendarHeader extends UI5Element {
 		return styles;
 	}
 
-	constructor() {
-		super();
-		this._btnPrev = {};
-		this._btnPrev.icon = "slim-arrow-left";
-
-		this._btnNext = {};
-		this._btnNext.icon = "slim-arrow-right";
+	static get dependencies() {
+		return [Icon];
+	}
 
-		this._btn1 = {};
-		this._btn1.type = ButtonDesign.Transparent;
+	static async onDefine() {
+		CalendarHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
 
-		this._btn2 = {};
-		this._btn2.type = ButtonDesign.Transparent;
+	constructor() {
+		super();
 	}
 
 	onBeforeRendering() {
-		this._btn1.text = this.monthText;
-		this._btn2.text = this.yearText;
-		this._btnPrev.classes = "ui5-calheader-arrowbtn";
-		this._btnNext.classes = "ui5-calheader-arrowbtn";
+		this._prevButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
+		this._nextButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
 
-		if (this._isNextButtonDisabled) {
-			this._btnNext.classes += " ui5-calheader-arrowbtn-disabled";
-		}
-
-		if (this._isPrevButtonDisabled) {
-			this._btnPrev.classes += " ui5-calheader-arrowbtn-disabled";
+		if (this.hasSecondaryCalendarType) {
+			this._secondMonthButtonText = this.buttonTextForSecondaryCalendarType.monthButtonText;
+			this._secondYearButtonText = this.buttonTextForSecondaryCalendarType.yearButtonText;
 		}
 	}
 
-	_handlePrevPress(event) {
+	onPrevButtonClick(event) {
 		this.fireEvent("previous-press", event);
 	}
 
-	_handleNextPress(event) {
+	onNextButtonClick(event) {
 		this.fireEvent("next-press", event);
 	}
 
-	_showMonthPicker(event) {
+	onMonthButtonClick(event) {
 		this.fireEvent("show-month-press", event);
 	}
 
-	_showYearPicker(event) {
+	onMonthButtonKeyDown(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
+
+		if (isEnter(event)) {
+			this.fireEvent("show-month-press", event);
+		}
+	}
+
+	onMonthButtonKeyUp(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+			this.fireEvent("show-month-press", event);
+		}
+	}
+
+	onYearButtonClick(event) {
 		this.fireEvent("show-year-press", event);
 	}
 
-	_onkeydown(event) {
-		if (isSpace(event) || isEnter(event)) {
-			const showPickerButton = event.target.getAttribute("data-sap-show-picker");
+	onYearButtonKeyDown(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
 
-			if (showPickerButton) {
-				this[`_show${showPickerButton}Picker`]();
-			}
+		if (isEnter(event)) {
+			this.fireEvent("show-year-press", event);
 		}
 	}
 
-	get rtl() {
-		return getRTL() ? "rtl" : undefined;
+	onYearButtonKeyUp(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+			this.fireEvent("show-year-press", event);
+		}
 	}
 
-	static async onDefine() {
-		await Promise.all([
-			await Button.define(),
-			await Icon.define(),
-		]);
+	get hasSecondaryCalendarType() {
+		return !!this.secondaryCalendarType;
+	}
+
+	get classes() {
+		return {
+			prevButton: {
+				"ui5-calheader-arrowbtn": true,
+				"ui5-calheader-arrowbtn-disabled": this.isPrevButtonDisabled,
+			},
+			nextButton: {
+				"ui5-calheader-arrowbtn": true,
+				"ui5-calheader-arrowbtn-disabled": this.isNextButtonDisabled,
+			},
+		};
+	}
+
+	get accInfo() {
+		return {
+			ariaLabelMonthButton: this.hasSecondaryCalendarType
+				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.info}` : `${this._monthButtonText}`,
+		};
 	}
 }
 

package/dist/CalendarPart.js

@@ -0,0 +1,111 @@
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
+import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
+import DateComponentBase from "./DateComponentBase.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	properties: /** @lends  sap.ui.webcomponents.main.CalendarPart.prototype */ {
+		/**
+		 * The timestamp of the currently focused date. Set this property to move the component's focus to a certain date.
+		 * <b>Node:</b> Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch.
+		 * @type {Integer}
+		 * @protected
+		 */
+		timestamp: {
+			type: Integer,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * Abstract base class for Calendar, DayPicker, MonthPicker and YearPicker that adds support for:
+ *  - common properties (timestamp, selectedDates): declarations and methods that operate on them
+ *  - other common code
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.CalendarPart
+ * @extends DateComponentBase
+ * @public
+ */
+class CalendarPart extends DateComponentBase {
+	static get metadata() {
+		return metadata;
+	}
+
+	get _minTimestamp() {
+		return this._minDate.valueOf() / 1000;
+	}
+
+	get _maxTimestamp() {
+		return this._maxDate.valueOf() / 1000;
+	}
+
+	/**
+	 * Returns the effective timestamp to be used by the respective calendar part
+	 * @protected
+	 */
+	get _timestamp() {
+		let timestamp = this.timestamp !== undefined ? this.timestamp : getTodayUTCTimestamp(this._primaryCalendarType);
+		if (timestamp < this._minTimestamp || timestamp > this._maxTimestamp) {
+			timestamp = this._minTimestamp;
+		}
+		return timestamp;
+	}
+
+	get _localDate() {
+		return new Date(this._timestamp * 1000);
+	}
+
+	/**
+	 * Returns a CalendarDate instance, representing the _timestamp getter - this date is central to all components' rendering logic
+	 * @protected
+	 */
+	get _calendarDate() {
+		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
+	}
+
+	/**
+	 * Change a timestamp and enforce limits
+	 *
+	 * @param timestamp
+	 * @protected
+	 */
+	_safelySetTimestamp(timestamp) {
+		const min = this._minDate.valueOf() / 1000;
+		const max = this._maxDate.valueOf() / 1000;
+
+		if (timestamp < min) {
+			timestamp = min;
+		}
+		if (timestamp > max) {
+			timestamp = max;
+		}
+
+		this.timestamp = timestamp;
+	}
+
+	/**
+	 * Modify a timestamp by a certain amount of days/months/years and enforce limits
+	 * @param amount
+	 * @param unit
+	 * @protected
+	 */
+	_safelyModifyTimestampBy(amount, unit) {
+		const newDate = modifyDateBy(this._calendarDate, amount, unit);
+		this._safelySetTimestamp(newDate.valueOf() / 1000);
+	}
+
+	_getTimestampFromDom(domNode) {
+		const oMonthDomRef = domNode.getAttribute("data-sap-timestamp");
+		return parseInt(oMonthDomRef);
+	}
+}
+
+export default CalendarPart;

package/dist/Card.js

@@ -1,17 +1,13 @@
 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 { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.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,
-	AVATAR_TOOLTIP,
 	ARIA_LABEL_CARD_CONTENT,
-	ARIA_ROLEDESCRIPTION_CARD_HEADER,
-	ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -22,13 +18,14 @@ import cardCss from "./generated/themes/Card.css.js";
  */
 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>.
+		 * Defines the content of the component.
 		 * @type {HTMLElement[]}
-		 * @slot
+		 * @slot content
 		 * @public
 		 */
 		"default": {
@@ -37,80 +34,48 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the visual representation in the header of the card.
-		 * Supports images and icons.
+		 * Defines the header of the component.
 		 * <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>.
+		 * <b>Note:</b> Use <code>ui5-card-header</code> for the intended design.
 		 * @type {HTMLElement[]}
-		 * @slot
+		 * @since 1.0.0-rc.15
+		 * @slot content
 		 * @public
 		 */
-		avatar: {
+		header: {
 			type: HTMLElement,
 		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
 		/**
-		 * Defines the title displayed in the <code>ui5-card</code> header.
-		 * @type {string}
+		 * 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
 		 */
-		heading: {
+		accessibleName: {
 			type: String,
 		},
 
 		/**
-		 * Defines the subheading displayed in the <code>ui5-card</code> header.
-		 * @type {string}
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {String}
 		 * @defaultvalue ""
 		 * @public
+		 * @since 1.0.0-rc.16
 		 */
-		subheading: {
+		accessibleNameRef: {
 			type: String,
 		},
-
-		/**
-		 * Defines the status displayed in the <code>ui5-card</code> header.
-		 * @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,
-		},
-
-		_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": {},
 	},
 };
 
@@ -121,17 +86,19 @@ const metadata = {
  * The <code>ui5-card</code> 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 a slot:
- * <code>avatar</code>.
+ * 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.
  *
- * <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.
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <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.
  *
  * <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>)
  *
  * @constructor
  * @author SAP SE
@@ -139,14 +106,9 @@ const metadata = {
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-card
  * @public
+ * @appenddocs CardHeader
  */
 class Card extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -165,107 +127,31 @@ class Card extends UI5Element {
 
 	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,
-			},
+			"ui5-card-root": true,
+			"ui5-card--nocontent": !this.content.length,
 		};
 	}
 
-	get icon() {
-		return !!this.avatar && this.avatar.startsWith("sap-icon://");
-	}
-
-	get image() {
-		return !!this.avatar && !this.icon;
+	get _hasHeader() {
+		return !!this.header.length;
 	}
 
-	get ariaHeaderRole() {
-		return this.headerInteractive ? "button" : "heading";
+	get _getAriaLabel() {
+		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
+			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+		return Card.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}
 
-	get ariaLevel() {
-		return this.headerInteractive ? undefined : "3";
+	get _ariaCardContentLabel() {
+		return Card.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
 	}
 
-	get hasHeader() {
-		return !!(this.heading || this.subheading || this.status || this.avatar);
-	}
-
-	get rtl() {
-		return getRTL() ? "rtl" : undefined;
-	}
-
-	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 hasAvatar() {
-		return !!this.avatar.length;
+	static get dependencies() {
+		return [Icon];
 	}
 
 	static async onDefine() {
-		await Promise.all([
-			Icon.define(),
-			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");
-		}
+		Card.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }