@ui5/webcomponents 0.0.0-934b4df24 → 0.0.0-b053ad005

package/src/ComboBoxFilters.js

@@ -0,0 +1,40 @@
+const escapeReg = /[[\]{}()*+?.\\^$|]/g;
+
+const escapeRegExp = str => {
+	return str.replace(escapeReg, "\\$&");
+};
+
+const StartsWith = (value, items) => {
+	return items.filter(item => {
+		const lowerText = item.text.toLowerCase();
+
+		return lowerText.startsWith(value.toLowerCase());
+	});
+};
+
+const StartsWithPerTerm = (value, items) => {
+	const reg = new RegExp(`(^|\\s)${escapeRegExp(value.toLowerCase())}.*`, "g");
+
+	return items.filter(item => {
+		reg.lastIndex = 0;
+
+		return reg.test(item.text.toLowerCase());
+	});
+};
+
+const Contains = (value, items) => {
+	return items.filter(item => {
+		const lowerText = item.text.toLowerCase();
+
+		return lowerText.includes(value.toLowerCase());
+	});
+};
+
+const None = (_, items) => items;
+
+export {
+	StartsWithPerTerm,
+	StartsWith,
+	Contains,
+	None,
+};

package/src/ComboBoxGroupItem.js

@@ -0,0 +1,70 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-cb-group-item",
+	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+		/**
+		 * Indicates whether the input is focssed
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	},
+	events: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-combobox-group-item</code> is type of suggestion item,
+ * that can be used to split the <code>ui5-combobox</code> suggestions into groups.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ComboBoxGroupItem
+ * @extends UI5Element
+ * @tagname ui5-cb-group-item
+ * @public
+ * @implements sap.ui.webcomponents.main.IComboBoxItem
+ * @since 1.0.0-rc.15
+ */
+class ComboBoxGroupItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			GroupHeaderListItem,
+		];
+	}
+
+	/**
+	 * Used to avoid tag name checks
+	 * @protected
+	 */
+	get isGroupItem() {
+		return true;
+	}
+}
+
+ComboBoxGroupItem.define();
+
+export default ComboBoxGroupItem;

package/src/ComboBoxItem.js

@@ -0,0 +1,49 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-cb-item",
+	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxItem.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: { type: String },
+		/**
+		 * Defines the additional text of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.11
+		 * @public
+		 */
+		additionalText: { type: String },
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-cb-item</code> represents the item for a <code>ui5-combobox</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ComboBoxItem
+ * @extends UI5Element
+ * @tagname ui5-cb-item
+ * @implements sap.ui.webcomponents.main.IComboBoxItem
+ * @public
+ */
+class ComboBoxItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+}
+
+ComboBoxItem.define();
+
+export default ComboBoxItem;

package/src/ComboBoxPopover.hbs

@@ -0,0 +1,125 @@
+<ui5-responsive-popover
+	class="{{classes.popover}}"
+	hide-arrow
+	content-only-on-desktop
+	_disable-initial-focus
+	placement-type="Bottom"
+	horizontal-align="Stretch"
+	@ui5-after-open={{_afterOpenPopover}}
+	@ui5-after-close={{_afterClosePopover}}
+>
+	<ui5-busy-indicator
+		?active={{loading}}
+		size="Medium"
+		class="ui5-combobox-busy"
+	>
+	</ui5-busy-indicator>
+
+	<div slot="header" class="ui5-responsive-popover-header">
+		<div class="row">
+			<span>{{_headerTitleText}}</span>
+			<ui5-button
+				class="ui5-responsive-popover-close-btn"
+				icon="decline"
+				design="Transparent"
+				@click="{{_closeRespPopover}}"
+			>
+			</ui5-button>
+		</div>
+
+		<div class="row">
+			<div
+				class="input-root-phone"
+				value-state="{{valueState}}"
+			>
+				<input
+					class="ui5-input-inner-phone"
+					.value="{{value}}"
+					inner-input
+					placeholder="{{placeholder}}"
+					value-state="{{valueState}}"
+					@input="{{_input}}"
+					@change="{{_inputChange}}"
+					@keydown="{{_keydown}}"
+					aria-autocomplete="both"
+				/>
+			</div>
+		</div>
+
+		{{#if hasValueStateText}}
+			<div class="row {{classes.popoverValueState}}">
+				{{> valueStateMessage}}
+			</div>
+		{{/if}}
+	</div>
+
+	{{#unless _isPhone}}
+		{{#if hasValueStateText}}
+			<div class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} tabindex="0" style="{{styles.suggestionPopoverHeader}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+				{{> valueStateMessage}}
+			</div>
+		{{/if}}
+	{{/unless}}
+
+	<ui5-list
+		separators="None"
+		@ui5-item-click={{_selectItem}}
+		@ui5-item-focused={{_onItemFocus}}
+		@mousedown={{_itemMousedown}}
+		mode="SingleSelect"
+	>
+		{{#each _filteredItems}}
+			{{#if isGroupItem}}
+				<ui5-li-groupheader ?focused={{this.focused}}>{{ this.text }}</ui5-li-groupheader>
+			{{else}}
+				<ui5-li
+					type="Active"
+					additional-text={{this.additionalText}}
+					group-name={{this.groupName}}
+					._tabIndex={{itemTabIndex}}
+					.mappedItem={{this}}
+					?selected={{this.selected}}
+					?focused={{this.focused}}
+				>
+					{{this.text}}
+				</ui5-li>
+			{{/if}}
+
+		{{/each}}
+	</ui5-list>
+
+	<div slot="footer" class="ui5-responsive-popover-footer">
+		<ui5-button
+			design="Transparent"
+			@click="{{_closeRespPopover}}"
+		>OK</ui5-button>
+	</div>
+</ui5-responsive-popover>
+
+{{#if shouldOpenValueStateMessagePopover}}
+	<ui5-popover
+		skip-registry-update
+		_disable-initial-focus
+		prevent-focus-restore
+		no-padding
+		hide-arrow
+		class="ui5-valuestatemessage-popover"
+		placement-type="Bottom"
+	>
+		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+			{{> valueStateMessage}}
+		</div>
+	</ui5-popover>
+{{/if}}
+
+{{#*inline "valueStateMessage"}}
+	{{#if shouldDisplayDefaultValueStateMessage}}
+		{{valueStateText}}
+	{{else}}
+		{{#each valueStateMessageText}}
+			{{this}}
+		{{/each}}
+	{{/if}}
+{{/inline}}

package/src/CustomListItem.hbs

@@ -0,0 +1,5 @@
+{{>include "./ListItem.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<slot></slot>
+{{/inline}}

package/src/CustomListItem.js

@@ -0,0 +1,99 @@
+import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import ListItem from "./ListItem.js";
+import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
+
+// Styles
+import customListItemCss from "./generated/themes/CustomListItem.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-li-custom",
+	slots: /** @lends sap.ui.webcomponents.main.CustomListItem.prototype */ {
+
+		/**
+		 * Defines the content of the component.
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
+	properties: /** @lends sap.ui.webcomponents.main.CustomListItem.prototype */ {
+		/**
+		 * Defines the text alternative of the component.
+		 * Note: If not provided a default text alternative will be set, if present.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		 accessibleName: {
+			type: String,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * A component to be used as custom list item within the <code>ui5-list</code>
+ * the same way as the standard <code>ui5-li</code>.
+ *
+ * The component accepts arbitrary HTML content to allow full customization.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.CustomListItem
+ * @extends ListItem
+ * @tagname ui5-li-custom
+ * @implements sap.ui.webcomponents.main.IListItem
+ * @public
+ */
+class CustomListItem extends ListItem {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get template() {
+		return CustomListItemTemplate;
+	}
+
+	static get styles() {
+		return [ListItem.styles, customListItemCss];
+	}
+
+	_onkeydown(event) {
+		const isTab = isTabNext(event) || isTabPrevious(event);
+
+		if (!isTab && !this.focused) {
+			return;
+		}
+
+		super._onkeydown(event);
+	}
+
+	_onkeyup(event) {
+		const isTab = isTabNext(event) || isTabPrevious(event);
+
+		if (!isTab && !this.focused) {
+			return;
+		}
+
+		super._onkeyup(event);
+	}
+
+	get classes() {
+		const result = super.classes;
+		result.main["ui5-custom-li-root"] = true;
+		return result;
+	}
+}
+
+CustomListItem.define();
+
+export default CustomListItem;

package/src/DateComponentBase.js

@@ -0,0 +1,170 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import { getMaxCalendarDate, getMinCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	languageAware: true,
+	properties: /** @lends  sap.ui.webcomponents.main.DateComponentBase.prototype */ {
+		/**
+		 * Sets a calendar type used for display.
+		 * If not set, the calendar type of the global configuration is used.
+		 * @type {CalendarType}
+		 * @public
+		 */
+		primaryCalendarType: {
+			type: CalendarType,
+		},
+
+		/**
+		 * Defines the secondary calendar type.
+		 * If not set, the calendar will only show the primary calendar type.
+		 * @type {CalendarType}
+		 * @since 1.0.0-rc.16
+		 * @defaultvalue undefined
+		 * @public
+		 */
+		secondaryCalendarType: {
+			type: CalendarType,
+		},
+
+		/**
+		 * Determines the minimum date available for selection.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		minDate: {
+			type: String,
+		},
+
+		/**
+		 * Determines the maximum date available for selection.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		maxDate: {
+			type: String,
+		},
+
+		/**
+		 * Determines the format, displayed in the input field.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		formatPattern: {
+			type: String,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker)
+ * This includes:
+ *  - "languageAware: true" metadata setting, CLDR fetch and i18n initialization
+ *  - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them
+ *  - additional common methods
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.DateComponentBase
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @public
+ */
+class DateComponentBase extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	constructor() {
+		super();
+	}
+
+	get _primaryCalendarType() {
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
+	}
+
+	get _minDate() {
+		return this.minDate && this.getFormat().parse(this.minDate) ? this._getCalendarDateFromString(this.minDate) : getMinCalendarDate(this._primaryCalendarType);
+	}
+
+	get _maxDate() {
+		return this.maxDate && this.getFormat().parse(this.maxDate) ? this._getCalendarDateFromString(this.maxDate) : getMaxCalendarDate(this._primaryCalendarType);
+	}
+
+	get _formatPattern() {
+		return this.formatPattern || "medium"; // get from config
+	}
+
+	get _isPattern() {
+		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+	}
+
+	_getCalendarDateFromString(value) {
+		const jsDate = this.getFormat().parse(value);
+		if (jsDate) {
+			return CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);
+		}
+	}
+
+	_getTimeStampFromString(value) {
+		const calDate = this._getCalendarDateFromString(value);
+		if (calDate) {
+			return calDate.toUTCJSDate().valueOf();
+		}
+	}
+
+	_getStringFromTimestamp(timestamp) {
+		const localDate = new Date(timestamp);
+		return this.getFormat().format(localDate, true);
+	}
+
+	getFormat() {
+		let dateFormat;
+		if (this._isPattern) {
+			dateFormat = DateFormat.getInstance({
+				pattern: this._formatPattern,
+				calendarType: this._primaryCalendarType,
+			});
+		} else {
+			dateFormat = DateFormat.getInstance({
+				style: this._formatPattern,
+				calendarType: this._primaryCalendarType,
+			});
+		}
+		return dateFormat;
+	}
+
+	static async onDefine() {
+		[DateComponentBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
+		]);
+	}
+}
+
+export default DateComponentBase;

package/src/DatePicker.hbs

@@ -0,0 +1,44 @@
+<div
+		class="ui5-date-picker-root"
+		style="{{styles.main}}"
+>
+	<!-- INPUT -->
+	<ui5-input
+			id="{{_id}}-inner"
+			class="ui5-date-picker-input"
+			placeholder="{{_placeholder}}"
+			type="{{type}}"
+			value="{{value}}"
+			?disabled="{{disabled}}"
+			?required="{{required}}"
+			?readonly="{{readonly}}"
+			value-state="{{valueState}}"
+			data-sap-focus-ref
+			._inputAccInfo ="{{accInfo}}"
+			@ui5-change="{{_onInputChange}}"
+			@ui5-input="{{_onInputInput}}"
+			@ui5-submit="{{_onInputSubmit}}"
+			@keydown="{{_onkeydown}}"
+	>
+
+		{{#if valueStateMessage.length}}
+			<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+		{{/if}}
+
+		{{#unless readonly}}
+			<ui5-icon
+				slot="icon"
+				name="{{openIconName}}"
+				tabindex="-1"
+				accessible-name="{{openIconTitle}}"
+				show-tooltip
+				@click="{{togglePicker}}"
+				input-icon
+				?pressed="{{_isPickerOpen}}"
+				dir="{{effectiveDir}}"
+			></ui5-icon>
+		{{/unless}}
+	</ui5-input>
+
+	<slot name="formSupport"></slot>
+</div>