@ui5/webcomponents 0.0.0-d849bec2c → 0.0.0-dc3ccac50

package/src/MessageStrip.js

@@ -0,0 +1,226 @@
+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 "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/information.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import MessageStripDesign from "./types/MessageStripDesign.js";
+import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
+import Icon from "./Icon.js";
+import Button from "./Button.js";
+import { MESSAGE_STRIP_CLOSE_BUTTON } from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import messageStripCss from "./generated/themes/MessageStrip.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-messagestrip",
+	languageAware: true,
+	properties: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
+
+		/**
+		 * Defines the component type.
+		 * <br><br>
+		 * <b>Note:</b> Available options are <code>"Information"</code>, <code>"Positive"</code>, <code>"Negative"</code>,
+		 * and <code>"Warning"</code>.
+		 *
+		 * @type {MessageStripDesign}
+		 * @defaultvalue "Information"
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		design: {
+			type: MessageStripDesign,
+			defaultValue: MessageStripDesign.Information,
+		},
+
+		/**
+		 * Defines whether the MessageStrip will show an icon in the beginning.
+		 * You can directly provide an icon with the <code>icon</code> slot. Otherwise, the default icon for the type will be used.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		hideIcon: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the MessageStrip renders close button.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		hideCloseButton: {
+			type: Boolean,
+		},
+	},
+	managedSlots: true,
+	slots: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 * <br><br>
+		 * <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
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+
+		/**
+		 * Defines the content to be displayed as graphical element within the component.
+		 * <br><br>
+		 * <b>Note:</b> If no icon is given, the default icon for the component type will be used.
+		 * The SAP-icons font provides numerous options.
+		 * <br><br>
+		 *
+		 * 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>.
+		 *
+		 * @type {sap.ui.webcomponents.main.IIcon}
+		 * @slot
+		 * @public
+		 */
+		"icon": {
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
+
+		/**
+		 * Fired when the close button is pressed either with a
+		 * click/tap or by using the Enter or Space key.
+		 *
+		 * @event
+		 * @public
+		 */
+		close: {},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-messagestrip</code> component enables the embedding of app-related messages.
+ * It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative.
+ * Each message can have a Close button, so that it can be removed from the UI, if needed.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-messagestrip</code> component, you can define whether it displays
+ * an icon in the beginning and a close button. Moreover, its size and background
+ * can be controlled with CSS.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/MessageStrip";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.MessageStrip
+ * @extends UI5Element
+ * @tagname ui5-messagestrip
+ * @public
+ * @since 0.9.0
+ */
+class MessageStrip extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return MessageStripTemplate;
+	}
+
+	static get styles() {
+		return messageStripCss;
+	}
+
+	constructor() {
+		super();
+	}
+
+	_closeClick() {
+		this.fireEvent("close", {});
+	}
+
+	static get dependencies() {
+		return [
+			Icon,
+			Button,
+		];
+	}
+
+	static async onDefine() {
+		MessageStrip.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
+	static designClassesMappings() {
+		return {
+			"Information": "ui5-messagestrip-root--info",
+			"Positive": "ui5-messagestrip-root--positive",
+			"Negative": "ui5-messagestrip-root--negative",
+			"Warning": "ui5-messagestrip-root--warning",
+		};
+	}
+
+	static iconMappings() {
+		return {
+			"Information": "information",
+			"Positive": "sys-enter-2",
+			"Negative": "error",
+			"Warning": "alert",
+		};
+	}
+
+	get hiddenText() {
+		return `Message Strip ${this.design} ${this.hideCloseButton ? "" : "closable"}`;
+	}
+
+	get _closeButtonText() {
+		return MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);
+	}
+
+	get classes() {
+		return {
+			root: {
+				"ui5-messagestrip-root": true,
+				"ui5-messagestrip-root-hide-icon": this.hideIcon,
+				"ui5-messagestrip-root-hide-close-button": this.hideCloseButton,
+				[this.designClasses]: true,
+			},
+		};
+	}
+
+	get iconProvided() {
+		return this.icon.length > 0;
+	}
+
+	get standardIconName() {
+		return MessageStrip.iconMappings()[this.design];
+	}
+
+	get designClasses() {
+		return MessageStrip.designClassesMappings()[this.design];
+	}
+}
+
+MessageStrip.define();
+
+export default MessageStrip;

package/src/MonthPicker.hbs

@@ -0,0 +1,29 @@
+<div
+	class="ui5-mp-root"
+	role="grid"
+	aria-readonly="false"
+	aria-multiselectable="false"
+	@keydown={{_onkeydown}}
+	@keyup={{_onkeyup}}
+	@click={{_selectMonth}}
+	@focusin={{_onfocusin}}
+>
+	{{#each _months}}
+		<div class="ui5-mp-quarter">
+
+			{{#each this}}
+				<div
+					data-sap-timestamp={{this.timestamp}}
+					tabindex={{this._tabIndex}}
+					?data-sap-focus-ref="{{this.focusRef}}"
+					class="{{this.classes}}"
+					role="gridcell"
+					aria-selected="{{this.ariaSelected}}"
+				>
+					{{this.name}}
+				</div>
+			{{/each}}
+
+		</div>
+	{{/each}}
+</div>

package/src/MonthPicker.js

@@ -0,0 +1,299 @@
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import {
+	isEnter,
+	isSpace,
+	isDown,
+	isUp,
+	isLeft,
+	isRight,
+	isHome,
+	isEnd,
+	isHomeCtrl,
+	isEndCtrl,
+	isPageUp,
+	isPageDown,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import CalendarPart from "./CalendarPart.js";
+import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.js";
+import styles from "./generated/themes/MonthPicker.css.js";
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-monthpicker",
+	properties: /** @lends  sap.ui.webcomponents.main.MonthPicker.prototype */ {
+		/**
+		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
+		 * @type {Array}
+		 * @public
+		 */
+		selectedDates: {
+			type: Integer,
+			multiple: true,
+			compareValues: true,
+		},
+
+		_months: {
+			type: Object,
+			multiple: true,
+		},
+
+		_hidden: {
+			type: Boolean,
+			noAttribute: true,
+		},
+	},
+	events: /** @lends  sap.ui.webcomponents.main.MonthPicker.prototype */ {
+		/**
+		 * Fired when the user selects a month (space/enter/click).
+		 * @public
+		 * @event
+		 */
+		change: {},
+		/**
+		 * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
+		 * @since 1.0.0-rc.9
+		 * @public
+		 * @event
+		 */
+		navigate: {},
+	},
+};
+
+const PAGE_SIZE = 12; // Total months on a single page
+const ROW_SIZE = 3; // Months per row (4 rows of 3 months each)
+
+/**
+ * Month picker component.
+ *
+ * @class
+ *
+ * Displays months which can be selected.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.MonthPicker
+ * @extends CalendarPart
+ * @tagname ui5-monthpicker
+ * @public
+ */
+class MonthPicker extends CalendarPart {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get template() {
+		return MonthPickerTemplate;
+	}
+
+	static get styles() {
+		return styles;
+	}
+
+	onBeforeRendering() {
+		this._buildMonths();
+	}
+
+	_buildMonths() {
+		if (this._hidden) {
+			return;
+		}
+
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
+
+		const months = [];
+		const calendarDate = this._calendarDate; // store the value of the expensive getter
+		const minDate = this._minDate; // store the value of the expensive getter
+		const maxDate = this._maxDate; // store the value of the expensive getter
+		const tempDate = new CalendarDate(calendarDate, this._primaryCalendarType);
+		let timestamp;
+
+		/* eslint-disable no-loop-func */
+		for (let i = 0; i < 12; i++) {
+			tempDate.setMonth(i);
+			timestamp = tempDate.valueOf() / 1000;
+
+			const isSelected = this.selectedDates.some(itemTimestamp => {
+				const date = CalendarDate.fromTimestamp(itemTimestamp * 1000, this._primaryCalendarType);
+				return date.getYear() === tempDate.getYear() && date.getMonth() === tempDate.getMonth();
+			});
+			const isFocused = tempDate.getMonth() === calendarDate.getMonth();
+			const isDisabled = this._isOutOfSelectableRange(tempDate, minDate, maxDate);
+
+			const month = {
+				timestamp: timestamp.toString(),
+				focusRef: isFocused,
+				_tabIndex: isFocused ? "0" : "-1",
+				selected: isSelected,
+				ariaSelected: isSelected ? "true" : "false",
+				name: monthsNames[i],
+				disabled: isDisabled,
+				classes: "ui5-mp-item",
+			};
+
+			if (isSelected) {
+				month.classes += " ui5-mp-item--selected";
+			}
+
+			if (isDisabled) {
+				month.classes += " ui5-mp-item--disabled";
+			}
+
+			const quarterIndex = parseInt(i / ROW_SIZE);
+
+			if (months[quarterIndex]) {
+				months[quarterIndex].push(month);
+			} else {
+				months[quarterIndex] = [month];
+			}
+		}
+
+		this._months = months;
+	}
+
+	onAfterRendering() {
+		if (!this._hidden) {
+			this.focus();
+		}
+	}
+
+	_onkeydown(event) {
+		let preventDefault = true;
+
+		if (isEnter(event)) {
+			this._selectMonth(event);
+		} else if (isSpace(event)) {
+			event.preventDefault();
+		} else if (isLeft(event)) {
+			this._modifyTimestampBy(-1);
+		} else if (isRight(event)) {
+			this._modifyTimestampBy(1);
+		} else if (isUp(event)) {
+			this._modifyTimestampBy(-ROW_SIZE);
+		} else if (isDown(event)) {
+			this._modifyTimestampBy(ROW_SIZE);
+		} else if (isPageUp(event)) {
+			this._modifyTimestampBy(-PAGE_SIZE);
+		} else if (isPageDown(event)) {
+			this._modifyTimestampBy(PAGE_SIZE);
+		} else if (isHome(event) || isEnd(event)) {
+			this._onHomeOrEnd(isHome(event));
+		} else if (isHomeCtrl(event)) {
+			this._setTimestamp(parseInt(this._months[0][0].timestamp)); // first month of first row
+		} else if (isEndCtrl(event)) {
+			this._setTimestamp(parseInt(this._months[PAGE_SIZE / ROW_SIZE - 1][ROW_SIZE - 1].timestamp)); // last month of last row
+		} else {
+			preventDefault = false;
+		}
+
+		if (preventDefault) {
+			event.preventDefault();
+		}
+	}
+
+	_onHomeOrEnd(homePressed) {
+		this._months.forEach(row => {
+			const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getMonth() === this._calendarDate.getMonth());
+			if (indexInRow !== -1) { // The current month is on this row
+				const index = homePressed ? 0 : ROW_SIZE - 1; // select the first (if Home) or last (if End) month on the row
+				this._setTimestamp(parseInt(row[index].timestamp));
+			}
+		});
+	}
+
+	/**
+	 * Sets the timestamp to an absolute value
+	 * @param value
+	 * @private
+	 */
+	_setTimestamp(value) {
+		this._safelySetTimestamp(value);
+		this.fireEvent("navigate", { timestamp: this.timestamp });
+	}
+
+	/**
+	 * Modifies timestamp by a given amount of months and, if necessary, loads the prev/next page
+	 * @param amount
+	 * @private
+	 */
+	_modifyTimestampBy(amount) {
+		// Modify the current timestamp
+		this._safelyModifyTimestampBy(amount, "month");
+
+		// Notify the calendar to update its timestamp
+		this.fireEvent("navigate", { timestamp: this.timestamp });
+	}
+
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			this._selectMonth(event);
+		}
+	}
+
+	/**
+	 * User clicked with the mouser or pressed Enter/Space
+	 * @param event
+	 * @private
+	 */
+	_selectMonth(event) {
+		event.preventDefault();
+		if (event.target.className.indexOf("ui5-mp-item") > -1) {
+			const timestamp = this._getTimestampFromDom(event.target);
+			this._safelySetTimestamp(timestamp);
+			this.fireEvent("change", { timestamp: this.timestamp });
+		}
+	}
+
+	/**
+	 * Called from Calendar.js
+	 * @protected
+	 */
+	_hasPreviousPage() {
+		return this._calendarDate.getYear() !== this._minDate.getYear();
+	}
+
+	/**
+	 * Called from Calendar.js
+	 * @protected
+	 */
+	_hasNextPage() {
+		return this._calendarDate.getYear() !== this._maxDate.getYear();
+	}
+
+	/**
+	 * Called by Calendar.js
+	 * User pressed the "<" button in the calendar header (same as PageUp)
+	 * @protected
+	 */
+	_showPreviousPage() {
+		this._modifyTimestampBy(-PAGE_SIZE);
+	}
+
+	/**
+	 * Called by Calendar.js
+	 * User pressed the ">" button in the calendar header (same as PageDown)
+	 * @protected
+	 */
+	_showNextPage() {
+		this._modifyTimestampBy(PAGE_SIZE);
+	}
+
+	_isOutOfSelectableRange(date, minDate, maxDate) {
+		const month = date.getMonth();
+		const year = date.getYear();
+		const minYear = minDate.getYear();
+		const minMonth = minDate.getMonth();
+		const maxYear = maxDate.getYear();
+		const maxMonth = maxDate.getMonth();
+
+		return year < minYear || (year === minYear && month < minMonth) || year > maxYear || (year === maxYear && month > maxMonth);
+	}
+}
+
+MonthPicker.define();
+
+export default MonthPicker;

package/src/MultiComboBox.hbs

@@ -0,0 +1,78 @@
+<div class="ui5-multi-combobox-root"
+>
+	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
+
+	{{#if hasValueState}}
+		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
+	{{/if}}
+
+	<ui5-tokenizer slot="_beginContent"
+		show-more
+		class="ui5-multi-combobox-tokenizer"
+		?disabled="{{disabled}}"
+		@ui5-show-more-items-press="{{_showFilteredItems}}"
+		@ui5-token-delete="{{_tokenDelete}}"
+		@focusout="{{_tokenizerFocusOut}}"
+		@focusin="{{_tokenizerFocusIn}}"
+		@click={{_click}}
+		@keydown="{{_onTokenizerKeydown}}"
+		?expanded="{{_tokenizerExpanded}}"
+	>
+		{{#each items}}
+			{{#if this.selected}}
+				<ui5-token
+					?readonly="{{../readonly}}"
+					class="ui5-multi-combobox-token"
+					data-ui5-id="{{this._id}}"
+					part="token-{{@index}}"
+					text="{{this.text}}"
+				>
+				</ui5-token>
+			{{/if}}
+		{{/each}}
+	</ui5-tokenizer>
+
+	<input id="ui5-multi-combobox-input"
+		.value="{{value}}"
+		inner-input
+		placeholder={{_getPlaceholder}}
+		?disabled={{disabled}}
+		?readonly={{readonly}}
+		value-state="{{valueState}}"
+		@input="{{_inputLiveChange}}"
+		@change={{_inputChange}}
+		@keydown="{{_onkeydown}}"
+		@keyup="{{_onkeyup}}"
+		@click={{_click}}
+		@focusin={{inputFocusIn}}
+		@focusout={{inputFocusOut}}
+		role="combobox"
+		aria-haspopup="listbox"
+		aria-expanded="{{open}}"
+		aria-autocomplete="both"
+		aria-describedby="{{ariaDescribedByText}}"
+		aria-required="{{required}}"
+	/>
+
+	{{#if readonly}}
+		<ui5-icon class="ui5-input-readonly-icon" name="not-editable" @click="{{_readonlyIconClick}}"></ui5-icon>
+	{{/if}}
+
+	{{#if icon}}
+		<slot name="icon"></slot>
+	{{/if}}
+
+	{{#unless readonly}}
+		<ui5-icon name="slim-arrow-down"
+			input-icon
+			slot="icon"
+			tabindex="-1"
+			@click="{{togglePopover}}"
+			@mousedown="{{_onIconMousedown}}"
+			@focusin="{{_forwardFocusToInner}}"
+			?pressed="{{open}}"
+			dir="{{effectiveDir}}"
+			accessible-name="{{_iconAccessibleNameText}}"
+		></ui5-icon>
+	{{/unless}}
+</div>