@ui5/webcomponents 0.0.0-306572ffa → 0.0.0-3236d56be

package/src/Button.js

@@ -1,9 +1,17 @@
 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 { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
+import {
+	isPhone,
+	isTablet,
+	isCombi,
+	isDesktop,
+	isSafari,
+} from "@ui5/webcomponents-base/dist/Device.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -12,6 +20,7 @@ import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPH
 
 // Styles
 import buttonCss from "./generated/themes/Button.css.js";
+import buttonIECss from "./generated/themes/Button.ie11.css.js";
 
 let isGlobalHandlerAttached = false;
 let activeButton = null;
@@ -25,10 +34,19 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 
 		/**
-		 * Defines the <code>ui5-button</code> design.
+		 * Defines the component design.
+		 *
 		 * <br><br>
-		 * <b>Note:</b> Available options are "Default", "Emphasized", "Positive",
-		 * "Negative", and "Transparent".
+		 * <b>The available values are:</b>
+		 *
+		 * <ul>
+		 * <li><code>Default</code></li>
+		 * <li><code>Emphasized</code></li>
+		 * <li><code>Positive</code></li>
+		 * <li><code>Negative</code></li>
+		 * <li><code>Transparent</code></li>
+		 * <li><code>Attention</code></li>
+		 * </ul>
 		 *
 		 * @type {ButtonDesign}
 		 * @defaultvalue "Default"
@@ -40,9 +58,8 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-button</code> is disabled
-		 * (default is set to <code>false</code>).
-		 * A disabled <code>ui5-button</code> can't be pressed or
+		 * Defines whether the component is disabled.
+		 * A disabled component can't be pressed or
 		 * focused, and it is not in the tab chain.
 		 *
 		 * @type {boolean}
@@ -54,12 +71,10 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the icon to be displayed as graphical element within the <code>ui5-button</code>.
+		 * Defines the icon to be displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 * Example:
-		 * <br>
-		 * <pre>ui5-button icon="palette"</pre>
 		 *
 		 * See all the available icons in 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>.
 		 *
@@ -72,7 +87,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the icon should be displayed after the <code>ui5-button</code> text.
+		 * Defines whether the icon should be displayed after the component text.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -83,23 +98,10 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the size of the icon inside the <code>ui5-button</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @public
-		 * @since 1.0.0-rc.8
-		 */
-		iconSize: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * When set to <code>true</code>, the <code>ui5-button</code> will
+		 * When set to <code>true</code>, the component will
 		 * automatically submit the nearest form element upon <code>press</code>.
 		 * <br><br>
-		 * <b>Important:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
+		 * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
 		 *
 		 * @type {boolean}
@@ -111,7 +113,20 @@ const metadata = {
 		},
 
 		/**
-		 * Used to switch the active state (pressed or not) of the <code>ui5-button</code>.
+		 * Defines the tooltip of the component.
+		 * <br>
+		 * <b>Note:</b> We recommend setting tooltip to icon-only components.
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.2.0
+		 */
+		tooltip: {
+			type: String,
+		},
+
+		/**
+		 * Used to switch the active state (pressed or not) of the component.
 		 * @private
 		 */
 		active: {
@@ -143,53 +158,74 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the button
-		 * @type {String}
+		 * Defines the accessible aria name of the component.
+		 *
+		 * @type {string}
 		 * @defaultvalue: ""
-		 * @private
-		 * @since 1.0.0-rc.7
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the button
-		 * @type {String}
+		 * Receives id(or many ids) of the elements that label the component.
+		 *
+		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.7
+		 * @public
+		 * @since 1.1.0
 		 */
-		ariaLabelledby: {
+		 accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
 
 		/**
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * An object of strings that defines several additional accessibility attribute values
+		 * for customization depending on the use case.
+		 *
+		 * It supports the following fields:
+		 *
+		 * <ul>
+		 * 		<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
+		 *			<ul>
+		 *				<li><code>true</code></li>
+		 *				<li><code>false</code></li>
+		 *			</ul>
+		 * 		</li>
+		 * 		<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:
+		 * 			<ul>
+		 *				<li><code>Dialog</code></li>
+		 *				<li><code>Grid</code></li>
+		 *				<li><code>ListBox</code></li>
+		 *				<li><code>Menu</code></li>
+		 *				<li><code>Tree</code></li>
+		 * 			</ul>
+		 * 		</li>
+		 * 		<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
+		 * </ul>
+		 * @type {object}
+		 * @public
+		 * @since 1.2.0
 		 */
-		ariaExpanded: {
-			type: String,
+		accessibilityAttributes: {
+			type: Object,
 		},
 
 		/**
 		 * Indicates if the element if focusable
 		 * @private
 		 */
-		nonFocusable: {
+		nonInteractive: {
 			type: Boolean,
 		},
 
 		_iconSettings: {
 			type: Object,
 		},
-		_buttonAccInfo: {
-			type: Object,
-		},
 
 		/**
 		 * Defines the tabIndex of the component.
@@ -200,13 +236,21 @@ const metadata = {
 			defaultValue: "0",
 			noAttribute: true,
 		},
+
+		/**
+		 * @since 1.0.0-rc.13
+		 * @private
+		 */
+		_isTouch: {
+			type: Boolean,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-button</code>.
+		 * Defines the text of the component.
 		 * <br><br>
-		 * <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
 		 * @type {Node[]}
 		 * @slot
@@ -219,7 +263,7 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-button</code> is activated either with a
+		 * Fired when the component is activated either with a
 		 * mouse/tap or by using the Enter or Space key.
 		 * <br><br>
 		 * <b>Note:</b> The event will not be fired if the <code>disabled</code>
@@ -227,6 +271,7 @@ const metadata = {
 		 *
 		 * @event
 		 * @public
+		 * @native
 		 */
 		click: {},
 	},
@@ -255,6 +300,15 @@ const metadata = {
  * its style to provide visual feedback to the user that it is pressed or hovered over with
  * the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.
  *
+ * <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.
+ * <br>
+ * The <code>ui5-button</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>button - Used to style the native button element</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Button";</code>
@@ -264,6 +318,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.Button
  * @extends UI5Element
  * @tagname ui5-button
+ * @implements sap.ui.webcomponents.main.IButton
  * @public
  */
 class Button extends UI5Element {
@@ -272,7 +327,7 @@ class Button extends UI5Element {
 	}
 
 	static get styles() {
-		return buttonCss;
+		return [buttonCss, isLegacyBrowser() && buttonIECss];
 	}
 
 	static get render() {
@@ -302,7 +357,21 @@ class Button extends UI5Element {
 			isGlobalHandlerAttached = true;
 		}
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._ontouchstart = {
+			handleEvent(event) {
+				event.isMarked = "button";
+				if (this.nonInteractive) {
+					return;
+				}
+
+				this.active = true;
+			},
+			passive: true,
+		};
+	}
+
+	onEnterDOM() {
+		this._isTouch = (isPhone() || isTablet()) && !isCombi();
 	}
 
 	onBeforeRendering() {
@@ -316,19 +385,38 @@ class Button extends UI5Element {
 	}
 
 	_onclick(event) {
+		if (this.nonInteractive) {
+			return;
+		}
 		event.isMarked = "button";
 		const FormSupport = getFeature("FormSupport");
-		if (FormSupport) {
+		if (FormSupport && this.submits) {
 			FormSupport.triggerFormSubmit(this);
 		}
+
+		if (isSafari()) {
+			this.getDomRef().focus();
+		}
 	}
 
 	_onmousedown(event) {
+		if (this.nonInteractive || this._isTouch) {
+			return;
+		}
+
 		event.isMarked = "button";
 		this.active = true;
 		activeButton = this; // eslint-disable-line
 	}
 
+	_ontouchend(event) {
+		this.active = false;
+
+		if (activeButton) {
+			activeButton.active = false;
+		}
+	}
+
 	_onmouseup(event) {
 		event.isMarked = "button";
 	}
@@ -348,13 +436,24 @@ class Button extends UI5Element {
 	}
 
 	_onfocusout(_event) {
+		if (this.nonInteractive) {
+			return;
+		}
 		this.active = false;
-		this.focused = false;
+		if (isDesktop()) {
+			this.focused = false;
+		}
 	}
 
 	_onfocusin(event) {
+		if (this.nonInteractive) {
+			return;
+		}
+
 		event.isMarked = "button";
-		this.focused = true;
+		if (isDesktop()) {
+			this.focused = true;
+		}
 	}
 
 	get hasButtonType() {
@@ -362,20 +461,10 @@ class Button extends UI5Element {
 	}
 
 	get isIconOnly() {
-		return !Array.from(this.childNodes).filter(node => node.nodeType !== Node.COMMENT_NODE).length;
-	}
-
-	get accInfo() {
-		return {
-			"ariaExpanded": this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded),
-			"ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls,
-			"ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup,
-			"title": this._buttonAccInfo && this._buttonAccInfo.title,
-		};
-	}
-
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
+		return !Array.from(this.childNodes).filter(node => {
+			return node.nodeType !== Node.COMMENT_NODE
+			&& (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0);
+		}).length;
 	}
 
 	static typeTextMappings() {
@@ -387,7 +476,7 @@ class Button extends UI5Element {
 	}
 
 	get buttonTypeText() {
-		return this.i18nBundle.getText(Button.typeTextMappings()[this.design]);
+		return Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);
 	}
 
 	get tabIndexValue() {
@@ -397,20 +486,19 @@ class Button extends UI5Element {
 			return tabindex;
 		}
 
-		return this.nonFocusable ? "-1" : this._tabIndex;
+		return this.nonInteractive ? "-1" : this._tabIndex;
 	}
 
-	get styles() {
-		return {
-			icon: {
-				width: this.iconSize,
-				height: this.iconSize,
-			},
-		};
+	get showIconTooltip() {
+		return this.iconOnly && !this.tooltip;
+	}
+
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Button.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/Calendar.hbs

@@ -1,57 +1,69 @@
-<div class="{{classes.main}}" style="{{styles.main}}">
-
-	<ui5-calendar-header
-		id="{{_id}}-head"
-		month-text="{{_header.monthText}}"
-		year-text="{{_header.yearText}}"
-		.primaryCalendarType="{{_oMonth.primaryCalendarType}}"
-		@ui5-previous-press="{{_header.onPressPrevious}}"
-		@ui5-next-press="{{_header.onPressNext}}"
-		@ui5-show-month-press="{{_header.onBtn1Press}}"
-		@ui5-show-year-press="{{_header.onBtn2Press}}"
-		._isNextButtonDisabled="{{_header._isNextButtonDisabled}}"
-		._isPrevButtonDisabled="{{_header._isPrevButtonDisabled}}"
-	></ui5-calendar-header>
-
-	<div id="{{_id}}-content">
+<div
+	class="ui5-cal-root"
+	@keydown={{_onkeydown}}
+>
+	<div id="{{_id}}-content" class="ui5-cal-content">
 		<ui5-daypicker
 			id="{{_id}}-daypicker"
-			class="{{classes.dayPicker}}"
-			format-pattern="{{_oMonth.formatPattern}}"
-			.selectedDates="{{_oMonth.selectedDates}}"
-			._hidden="{{_oMonth._hidden}}"
-			.primaryCalendarType="{{_oMonth.primaryCalendarType}}"
-			.minDate="{{_oMonth.minDate}}"
-			.maxDate="{{_oMonth.maxDate}}"
-			timestamp="{{_oMonth.timestamp}}"
-			@ui5-change="{{_oMonth.onSelectedDatesChange}}"
-			@ui5-navigate="{{_oMonth.onNavigate}}"
+			?hidden="{{_isDayPickerHidden}}"
+			format-pattern="{{_formatPattern}}"
+			.selectedDates="{{_selectedDatesTimestamps}}"
+			._hidden="{{_isDayPickerHidden}}"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{secondaryCalendarType}}"
+			.selectionMode="{{selectionMode}}"
+			.minDate="{{minDate}}"
+			.maxDate="{{maxDate}}"
+			timestamp="{{_timestamp}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"
+			@ui5-change="{{onSelectedDatesChange}}"
+			@ui5-navigate="{{onNavigate}}"
 		></ui5-daypicker>
 
 		<ui5-monthpicker
 			id="{{_id}}-MP"
-			class="{{classes.monthPicker}}"
-			format-pattern="{{_oMonth.formatPattern}}"
-			._hidden="{{_monthPicker._hidden}}"
-			.primaryCalendarType="{{_oMonth.primaryCalendarType}}"
-			.minDate="{{_oMonth.minDate}}"
-			.maxDate="{{_oMonth.maxDate}}"
-			timestamp="{{_monthPicker.timestamp}}"
-			@ui5-change="{{_monthPicker.onSelectedMonthChange}}"
+			?hidden="{{_isMonthPickerHidden}}"
+			format-pattern="{{_formatPattern}}"
+			.selectedDates="{{_selectedDatesTimestamps}}"
+			._hidden="{{_isMonthPickerHidden}}"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.minDate="{{minDate}}"
+			.maxDate="{{maxDate}}"
+			timestamp="{{_timestamp}}"
+			@ui5-change="{{onSelectedMonthChange}}"
+			@ui5-navigate="{{onNavigate}}"
 		></ui5-monthpicker>
 
 		<ui5-yearpicker
 			id="{{_id}}-YP"
-			class="{{classes.yearPicker}}"
-			format-pattern="{{_oMonth.formatPattern}}"
-			._hidden="{{_yearPicker._hidden}}"
-			.primaryCalendarType="{{_oMonth.primaryCalendarType}}"
-			.minDate="{{_oMonth.minDate}}"
-			.maxDate="{{_oMonth.maxDate}}"
-			timestamp="{{_yearPicker.timestamp}}"
-			._selectedYear="{{_yearPicker._selectedYear}}"
-			@ui5-change="{{_yearPicker.onSelectedYearChange}}"
+			?hidden="{{_isYearPickerHidden}}"
+			format-pattern="{{_formatPattern}}"
+			.selectedDates="{{_selectedDatesTimestamps}}"
+			._hidden="{{_isYearPickerHidden}}"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.minDate="{{minDate}}"
+			.maxDate="{{maxDate}}"
+			timestamp="{{_timestamp}}"
+			@ui5-change="{{onSelectedYearChange}}"
+			@ui5-navigate="{{onNavigate}}"
 		></ui5-yearpicker>
 	</div>
+
+	{{! Positioned above the content due to flex-direction:column-reverse, but physically here for tab order to work}}
+	<ui5-calendar-header
+			id="{{_id}}-head"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{secondaryCalendarType}}"
+			.buttonTextForSecondaryCalendarType="{{secondaryCalendarTypeButtonText}}"
+			timestamp="{{_timestamp}}"
+			.isPrevButtonDisabled="{{_previousButtonDisabled}}"
+			.isNextButtonDisabled="{{_nextButtonDisabled}}"
+			.isMonthButtonHidden="{{_isHeaderMonthButtonHidden}}"
+			._monthButtonText="{{_headerMonthButtonText}}"
+			._yearButtonText="{{_headerYearButtonText}}"
+			@ui5-previous-press="{{onHeaderPreviousPress}}"
+			@ui5-next-press="{{onHeaderNextPress}}"
+			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+	></ui5-calendar-header>
 </div>