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

package/src/SuggestionGroupItem.js

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

package/src/SuggestionItem.js

@@ -0,0 +1,146 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import SuggestionListItem from "./SuggestionListItem.js";
+import ListItemType from "./types/ListItemType.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-suggestion-item",
+	properties: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+
+		/**
+		 * Defines the visual indication and behavior of the item.
+		 * Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>.
+		 * <br><br>
+		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
+		 * while when <code>Inactive</code> or <code>Detail</code> - will not.
+		 *
+		 * @type {ListItemType}
+		 * @defaultvalue "Active"
+		 * @public
+		 * @since 1.0.0-rc.8
+		*/
+		type: {
+			type: ListItemType,
+			defaultValue: ListItemType.Active,
+		},
+
+		/**
+		 * Defines the description displayed right under the item text, if such is present.
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 */
+		description: {
+			type: String,
+		},
+
+		/**
+		 * Defines the <code>icon</code> source URI.
+		 * <br><br>
+		 * <b>Note:</b>
+		 * SAP-icons font provides numerous built-in icons. 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>.
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		icon: {
+			type: String,
+		},
+
+		/**
+		 * Defines whether the <code>icon</code> should be displayed in the beginning of the item or in the end.
+		 * <br><br>
+		 * <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		iconEnd: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the <code>image</code> source URI.
+		 * <br><br>
+		 * <b>Note:</b> The <code>image</code> would be displayed in the beginning of the item.
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		image: {
+			type: String,
+		},
+
+		/**
+		 * Defines the <code>additionalText</code>, displayed in the end of the item.
+		 * @type {string}
+		 * @since 1.0.0-rc.15
+		 * @public
+		 */
+		additionalText: {
+			type: String,
+		},
+
+		/**
+		 * Defines the state of the <code>additionalText</code>.
+		 * <br><br>
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
+		 * @type {ValueState}
+		 * @defaultvalue "None"
+		 * @since 1.0.0-rc.15
+		 * @public
+		 */
+		additionalTextState: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
+	},
+	slots: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	},
+	events: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-suggestion-item</code> represents the suggestion item of the <code>ui5-input</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.SuggestionItem
+ * @extends UI5Element
+ * @tagname ui5-suggestion-item
+ * @implements sap.ui.webcomponents.main.IInputSuggestionItem
+ * @public
+ */
+class SuggestionItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			SuggestionListItem,
+		];
+	}
+}
+
+SuggestionItem.define();
+
+export default SuggestionItem;

package/src/SuggestionListItem.hbs

@@ -0,0 +1,33 @@
+{{>include "./StandardListItem.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div class="ui5-li-text-wrapper">
+		{{#if hasTitle}}
+			<span part="title" class="ui5-li-title"><slot></slot></span>
+		{{/if}}
+		{{#if hasDescription}}
+			<div class="ui5-li-description-info-wrapper">
+				<span part="description" class="ui5-li-desc">
+					{{#if richDescription.length}}
+						<slot name="richDescription"></slot>
+					{{else}}
+						{{description}}
+					{{/if}}
+				</span>
+
+				{{#if additionalText}}
+					<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+				{{/if}}
+			</div>
+		{{/if}}
+		{{#unless typeActive}}
+			<span class="ui5-hidden-text">{{type}}</span>
+		{{/unless}}
+	</div>
+	{{#unless hasDescription}}
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		{{/if}}
+	{{/unless}}
+{{/inline}}
+

package/src/SuggestionListItem.js

@@ -0,0 +1,76 @@
+import StandardListItem from "./StandardListItem.js";
+import SuggestionListItemTemplate from "./generated/templates/SuggestionListItemTemplate.lit.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-li-suggestion-item",
+	managedSlots: true,
+	slots: /** @lends sap.ui.webcomponents.main.SuggestionListItem.prototype */ {
+		/**
+		 * Defines a description that can contain HTML.
+		 * <b>Note:</b> If not specified, the <code>description</code> property will be used.
+		 * <br>
+		 * @type {HTMLElement}
+		 * @since 1.0.0-rc.8
+		 * @slot
+		 * @public
+		 */
+		richDescription: {
+			type: HTMLElement,
+		},
+		"default": {
+			propertyName: "titleText",
+		},
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-li-suggestion-item</code> represents the suggestion item in the <code>ui5-input</code>
+ * suggestion popover.
+ *
+ * <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-li-suggestion-item</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title - Used to style the title of the suggestion list item</li>
+ * <li>description - Used to style the description of the suggestion list item</li>
+ * <li>info - Used to style the info of the suggestion list item</li>
+ * </ul>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.SuggestionListItem
+ * @extends StandardListItem
+ * @tagname ui5-li-suggestion-item
+ */
+class SuggestionListItem extends StandardListItem {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get template() {
+		return SuggestionListItemTemplate;
+	}
+
+	onBeforeRendering(...params) {
+		super.onBeforeRendering(...params);
+		this.hasTitle = !!this.titleText.length;
+	}
+
+	get effectiveTitle() {
+		return this.titleText.filter(node => node.nodeType !== Node.COMMENT_NODE).map(el => el.textContent).join("");
+	}
+
+	get hasDescription() {
+		return this.richDescription.length || this.description;
+	}
+}
+
+SuggestionListItem.define();
+
+export default SuggestionListItem;

package/src/Switch.hbs

@@ -0,0 +1,50 @@
+<div
+	class="ui5-switch-root {{classes.main}}"
+	role="checkbox"
+	aria-checked="{{checked}}"
+	aria-disabled="{{ariaDisabled}}"
+	aria-labelledby="{{_id}}-hiddenText"
+	@click="{{_onclick}}"
+	@keyup="{{_onkeyup}}"
+	@keydown="{{_onkeydown}}"
+	tabindex="{{tabIndex}}"
+	dir="{{effectiveDir}}"
+>
+	<div class="ui5-switch-inner">
+		<div class="ui5-switch-track" part="slider">
+			<div class="ui5-switch-slider">
+				{{#if graphical}}
+					<span class="ui5-switch-text ui5-switch-text--on">
+						<ui5-icon name="accept" dir="ltr" class="ui5-switch-icon-on"></ui5-icon>
+					</span>
+					<span class="ui5-switch-text ui5-switch-text--off">
+						<ui5-icon name="decline" class="ui5-switch-icon-off"></ui5-icon>
+					</span>
+				{{else}}
+					{{#if hasNoLabel}}
+						<span class="ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon" part="text-on">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-on" ></ui5-icon>
+						</span>
+						<span class="ui5-switch-text ui5-switch-text--off switch-no-label-icon" part="text-off">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-off" ></ui5-icon>
+						</span>
+					{{else}}
+						<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
+						<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{/if}}
+				{{/if}}
+
+				<span class="ui5-switch-handle" part="handle">
+					{{!-- this icon is used in the sap_horizon_exp theme --}}
+					<ui5-icon
+						name="{{sapNextIcon}}"
+						class="ui5-switch-handle-icon"
+					></ui5-icon>
+				</span>
+			</div>
+		</div>
+	</div>
+
+	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
+	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{hiddenText}}</span>
+</div>

package/src/Switch.js

@@ -0,0 +1,261 @@
+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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import Icon from "./Icon.js";
+import SwitchDesign from "./types/SwitchDesign.js";
+
+import {
+	SWITCH_ON,
+	SWITCH_OFF,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Template
+import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
+
+// Styles
+import switchCss from "./generated/themes/Switch.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-switch",
+	languageAware: true,
+	properties: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
+
+		/**
+		 * Defines the component design.
+		 * <br><br>
+		 * <b>Note:</b> If <code>Graphical</code> type is set,
+		 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
+		 *
+		 * @public
+		 * @type {SwitchDesign}
+		 * @defaultValue "Textual"
+		 */
+		design: {
+			type: SwitchDesign,
+			defaultValue: SwitchDesign.Textual,
+		},
+
+		/**
+		 * Defines if the component is checked.
+		 * <br><br>
+		 * <b>Note:</b> The property can be changed with user interaction,
+		 * either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		checked: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the component is disabled.
+		 * <br><br>
+		 * <b>Note:</b> A disabled component is noninteractive.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		disabled: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the text, displayed when the component is checked.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
+		 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		textOn: {
+			type: String,
+		},
+
+		/**
+		 * Defines the text, displayed when the component is not checked.
+		 * <br><br>
+		 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
+		 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		textOff: {
+			type: String,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
+
+		/**
+		 * Fired when the component checked state changes.
+		 *
+		 * @public
+		 * @event
+		 */
+		change: {},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-switch</code> component is used for changing between binary states.
+ * <br>
+ * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties,
+ * but texts longer than 3 letters will be cutted off.
+ * <br>
+ * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style="width: 200px"></code>), and set widths, depending on the texts they would use.
+ * <br>
+ * Note: the component would not automatically stretch to fit the whole text width.
+ *
+ * <h3>Keyboard Handling</h3>
+ * The state can be changed by pressing the 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.
+ * <br>
+ * The <code>ui5-switch</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>slider - Used to style the track, where the handle is being slid</li>
+ * <li>text-on - Used to style the <code>textOn</code> property text</li>
+ * <li>text-off - Used to style the <code>textOff</code> property text</li>
+ * <li>handle - Used to style the handle of the switch</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Switch";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Switch
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-switch
+ * @public
+ * @since 0.8.0
+ */
+class Switch extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get styles() {
+		return switchCss;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return SwitchTemplate;
+	}
+
+	get sapNextIcon() {
+		return this.checked ? "accept" : "less";
+	}
+
+	_onclick(event) {
+		this.toggle();
+	}
+
+	_onkeydown(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
+
+		if (isEnter(event)) {
+			this.toggle();
+		}
+	}
+
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			this.toggle();
+		}
+	}
+
+	toggle() {
+		if (!this.disabled) {
+			this.checked = !this.checked;
+			this.fireEvent("change");
+			// Angular two way data binding;
+			this.fireEvent("value-changed");
+		}
+	}
+
+	get graphical() {
+		return this.design === SwitchDesign.Graphical;
+	}
+
+	get hasNoLabel() {
+		return !(this.graphical || this.textOn || this.textOff);
+	}
+
+	get _textOn() {
+		return this.graphical ? "" : this.textOn;
+	}
+
+	get _textOff() {
+		return this.graphical ? "" : this.textOff;
+	}
+
+	get tabIndex() {
+		return this.disabled ? undefined : "0";
+	}
+
+	get classes() {
+		const hasLabel = this.graphical || this.textOn || this.textOff;
+
+		return {
+			main: {
+				"ui5-switch-desktop": isDesktop(),
+				"ui5-switch--disabled": this.disabled,
+				"ui5-switch--checked": this.checked,
+				"ui5-switch--semantic": this.graphical,
+				"ui5-switch--no-label": !hasLabel,
+			},
+		};
+	}
+
+	get ariaDisabled() {
+		return this.disabled ? "true" : undefined;
+	}
+
+	get accessibilityOnText() {
+		return this._textOn || Switch.i18nBundle.getText(SWITCH_ON);
+	}
+
+	get accessibilityOffText() {
+		return this._textOff || Switch.i18nBundle.getText(SWITCH_OFF);
+	}
+
+	get hiddenText() {
+		return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
+	}
+
+	static get dependencies() {
+		return [Icon];
+	}
+
+	static async onDefine() {
+		Switch.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+}
+
+Switch.define();
+
+export default Switch;

package/src/Tab.hbs

@@ -0,0 +1,3 @@
+<div id="{{_id}}" class="ui5-tab-root">
+	<slot></slot>
+</div>