@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/src/NotificationOverflowAction.js

@@ -1,91 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-notification-overflow-action",
-	properties: /** @lends  sap.ui.webcomponents.fiori.NotificationOverflowAction.prototype */ {
-		/**
-		 * Defines the text of the <code>ui5-notification-overflow-action</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		text: {
-			type: String,
-		},
-
-		/**
-		 * Defines if the action is disabled.
-		 * <br><br>
-		 * <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the action design.
-		 * <br><br>
-		 * <b>Note:</b> Available options are "Default", "Emphasized", "Positive",
-		 * "Negative", and "Transparent".
-		 *
-		 * @type {ButtonDesign}
-		 * @defaultvalue "Transparent"
-		 * @public
-		 */
-		design: {
-			type: ButtonDesign,
-			defaultValue: ButtonDesign.Transparent,
-		},
-
-		/**
-		 * Defines the <code>icon</code> source URI.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * SAP-icons font provides numerous buil-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}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		icon: {
-			type: String,
-		},
-	},
-	slots: {
-	},
-	events: {
-		click: {},
-	},
-};
-
-/**
- * @class
- * The <code>ui5-notification-overflow-action</code> represents an abstract action,
- * used in the <code>ui5-li-notification</code> and the <code>ui5-li-notification-group</code> items.
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationOverflowAction
- * @extends UI5Element
- * @tagname ui5-notification-overflow-action
- * @public
- */
-class NotificationOverflowAction extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-}
-
-NotificationOverflowAction.define();
-
-export default NotificationOverflowAction;

package/src/ProductSwitch.hbs

@@ -1,3 +0,0 @@
-<div class="ui5-product-switch-root" @focusin={{_onfocusin}}>
-	<slot></slot>
-</div>

package/src/ProductSwitch.js

@@ -1,131 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import ProductSwitchTemplate from "./generated/templates/ProductSwitchTemplate.lit.js";
-
-// Styles
-import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-product-switch",
-	properties: /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */ {
-		/**
-		 * Indicates how many columns are displayed.
-		 * @private
-		 */
-		desktopColumns: {
-			type: Integer,
-		},
-	},
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */ {
-		/**
-		 * Defines the items of the <code>ui5-product-switch</code>.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			propertyName: "items",
-			type: HTMLElement,
-		},
-	},
-};
-
-/**
- * @class
- * <h3 class="comment-api-title">Overview</h3>
- *
- * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>
- * and allows the user to easily switch between products.
- * <br><br>
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code> (for <code>ui5-product-switch-item</code>)
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ProductSwitch
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-product-switch
- * @appenddocs ProductSwitchItem
- * @public
- * @since 1.0.0-rc.5
- */
-class ProductSwitch extends UI5Element {
-	constructor() {
-		super();
-
-		this.initItemNavigation();
-	}
-
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this, { rowSize: 4 });
-		this._itemNavigation.getItemsCallback = () => this.items;
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return ProductSwitchCss;
-	}
-
-	static get template() {
-		return ProductSwitchTemplate;
-	}
-
-	static get ROW_MIN_WIDTH() {
-		return {
-			ONE_COLUMN: 600,
-			THREE_COLUMN: 900,
-		};
-	}
-
-	onEnterDOM() {
-		this._handleResizeBound = this._handleResize.bind(this);
-
-		ResizeHandler.register(document.body, this._handleResizeBound);
-	}
-
-	onExitDOM() {
-		ResizeHandler.deregister(document.body, this._handleResizeBound);
-	}
-
-	onBeforeRendering() {
-		this.desktopColumns = this.items.length > 6 ? 4 : 3;
-	}
-
-	_handleResize() {
-		const documentWidth = document.body.clientWidth;
-
-		if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
-			this._itemNavigation.rowSize = 1;
-		} else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
-			this._itemNavigation.rowSize = 3;
-		} else {
-			this._itemNavigation.rowSize = 4;
-		}
-	}
-
-	_onfocusin(event) {
-		const target = event.target;
-
-		this._itemNavigation.update(target);
-	}
-}
-
-ProductSwitch.define();
-
-export default ProductSwitch;

package/src/ProductSwitchItem.hbs

@@ -1,43 +0,0 @@
-{{#if targetSrc}}
-	<a class="ui5-product-switch-item-root"
-		data-sap-focus-ref
-		@focusout="{{_onfocusout}}"
-		@focusin="{{_onfocusin}}"
-		@mousedown="{{_onmousedown}}"
-		@keydown="{{_onkeydown}}"
-		@keyup="{{_onkeyup}}"
-		tabindex={{_tabIndex}}
-		href="{{targetSrc}}"
-		target="{{target}}">
-		{{> item}}
-	</a>
-{{else}}
-	<div
-		class="ui5-product-switch-item-root"
-		data-sap-focus-ref
-		@focusout="{{_onfocusout}}"
-		@focusin="{{_onfocusin}}"
-		@mousedown="{{_onmousedown}}"
-		@keydown="{{_onkeydown}}"
-		@keyup="{{_onkeyup}}"
-		tabindex={{_tabIndex}}>
-		{{> item}}
-	</div>
-{{/if}}
-
-{{#*inline "item"}}
-	{{#if icon}}
-		<ui5-icon
-			class="ui5-product-switch-item-icon"
-			name="{{icon}}"
-		></ui5-icon>
-	{{/if}}
-	<span class="ui5-product-switch-item-text-content">
-		{{#if heading}}
-			<span class="ui5-product-switch-item-heading">{{heading}}</span>
-		{{/if}}
-		{{#if subtitle}}
-			<span class="ui5-product-switch-item-subtitle">{{subtitle}}</span>
-		{{/if}}
-	</span>
-{{/inline}}

package/src/ProductSwitchItem.js

@@ -1,225 +0,0 @@
-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 Icon from "@ui5/webcomponents/dist/Icon.js";
-
-import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTemplate.lit.js";
-// Styles
-import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-product-switch-item",
-	properties: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
-		/**
-		  * Defines the title of the <code>ui5-product-switch-item</code>.
-		  * @type {string}
-		  * @defaultvalue ""
-		  * @public
-		  */
-		heading: {
-			type: String,
-		},
-
-		/**
-		 * Defines the subtitle of the <code>ui5-product-switch-item</code>.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		subtitle: {
-			type: String,
-		},
-
-		/**
-		 * Defines the icon to be displayed as a graphical element within the <code>ui5-product-switch-item</code>.
-		 * <br><br>
-		 * Example:
-		 * <br>
-		 * <pre>ui5-product-switch-item 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>.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		icon: {
-			type: String,
-		},
-
-		/**
-		 * Defines a target where the <code>targetSrc</code> content must be open.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>_self</code></li>
-		 * <li><code>_top</code></li>
-		 * <li><code>_blank</code></li>
-		 * <li><code>_parent</code></li>
-		 * <li><code>_search</code></li>
-		 * </ul>
-		 *
-		 * @type {string}
-		 * @defaultvalue "_self"
-		 * @public
-		 */
-		target: {
-			type: String,
-			defaultValue: "_self",
-		},
-
-		/**
-		 * Defines the <code>ui5-product-switch-item</code> target URI. Supports standard hyperlink behavior.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		targetSrc: {
-			type: String,
-		},
-
-		/**
-		 * Used to switch the active state (pressed or not) of the <code>ui5-product-switch-item</code>.
-		 * @private
-		 */
-		active: {
-			type: Boolean,
-		},
-
-		/**
-		 * Indicates whether the element is focused.
-		 * @private
-		 */
-		focused: {
-			type: Boolean,
-		},
-
-		_tabIndex: {
-			type: String,
-			defaultValue: "-1",
-			noAttribute: true,
-		},
-	},
-	slots: /** @lends  sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
-	},
-	events: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
-		/**
-		 * Fired when the <code>ui5-product-switch-item</code> is activated either with a
-		 * click/tap or by using the Enter or Space key.
-		 *
-		 * @event
-		 * @public
-		 */
-		click: {},
-		_focused: {},
-	},
-};
-
-/**
- * @class
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-product-switch-item</code> web component represents the items displayed in the
- * <code>ui5-product-switch</code> web component.
- * <br><br>
- * <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>.
- * <br><br>
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code>
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ProductSwitchItem
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-product-switch-item
- * @public
- * @since 1.0.0-rc.5
- */
-class ProductSwitchItem extends UI5Element {
-	constructor() {
-		super();
-
-		this._deactivate = () => {
-			if (this.active) {
-				this.active = false;
-			}
-		};
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return ProductSwitchItemCss;
-	}
-
-	static get template() {
-		return ProductSwitchItemTemplate;
-	}
-
-	onEnterDOM() {
-		document.addEventListener("mouseup", this._deactivate);
-	}
-
-	onExitDOM() {
-		document.removeEventListener("mouseup", this._deactivate);
-	}
-
-	_onmousedown() {
-		this.active = true;
-	}
-
-	_onkeydown(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this.active = true;
-		}
-
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-
-		if (isEnter(event)) {
-			this._fireItemClick();
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this.active = false;
-		}
-
-		if (isSpace(event)) {
-			this._fireItemClick();
-		}
-	}
-
-	_onfocusout() {
-		this.active = false;
-		this.focused = false;
-	}
-
-	_onfocusin(event) {
-		this.focused = true;
-
-		this.fireEvent("_focused", event);
-	}
-
-	_fireItemClick() {
-		this.fireEvent("click", { item: this });
-	}
-
-	static get dependencies() {
-		return [Icon];
-	}
-}
-
-ProductSwitchItem.define();
-
-export default ProductSwitchItem;

package/src/ShellBar.hbs

@@ -1,202 +0,0 @@
-<div
-	class="{{classes.wrapper}}"
-	dir="{{effectiveDir}}"
-	role="banner"
-	aria-label="{{_shellbarText}}"
-	part="root"
->
-	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
-
-		{{#if startButton.length}}
-				<slot name="startButton"></slot>
-		{{/if}}
-
-		{{#if hasFocusableLogo}}
-			<span class="ui5-shellbar-logo"
-				role="button"
-				aria-label="{{_logoText}}"
-				title="{{_logoText}}"
-				@click="{{_logoPress}}"
-				@keydown="{{_logoKeydown}}"
-				@keyup="{{_logoKeyup}}"
-				tabindex="0"
-				data-ui5-stable="logo"
-			>
-				<slot name="logo"></slot>
-			</span>
-		{{/if}}
-
-		{{#if showArrowDown}}
-			<button tabindex="{{menuBtnTabindex}}"
-				class="{{classes.button}}"
-				@click="{{_header.press}}"
-				aria-haspopup="{{menuBtnHasPopup}}"
-				aria-expanded="{{menuPopoverExpanded}}"
-			>
-				{{#if hasNonFocusableLogo}}
-					<span
-						class="ui5-shellbar-logo"
-						aria-label="{{_logoText}}"
-						title="{{_logoText}}"
-					>
-						<slot name="logo"></slot>
-					</span>
-				{{/if}}
-
-				{{#if primaryTitle}}
-					<h1 class="ui5-shellbar-menu-button-title">
-						<bdi class="{{classes.title}}">{{primaryTitle}}</bdi>
-					</h1>
-				{{/if}}
-
-				<span class="ui5-shellbar-menu-button-arrow"></span>
-			</button>
-		{{/if}}
-
-		<h2 class="ui5-shellbar-secondary-title">{{secondaryTitle}}</h2>
-	</div>
-
-	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">
-		{{#if showCoPilot}}
-			<div class="ui5-shellbar-copilot-wrapper"
-				tabindex="0"
-				aria-label="{{_copilotText}}"
-				title="{{_copilotText}}"
-				@keydown="{{_coPilotKeydown}}"
-				@keyup="{{_coPilotKeyup}}"
-				?active="{{coPilotActive}}"
-				data-ui5-stable="copilot"
-			>
-				{{> coPilot}}
-			</div>
-		{{else}}
-			<span class="ui5-shellbar-co-pilot-placeholder"></span>
-		{{/if}}
-	</div>
-
-	<div id="{{_id}}-searchfield-wrapper"
-		class="ui5-shellbar-search-field"
-		style="{{styles.searchField}}"
-	>
-		{{#if searchField.length}}
-			<slot name="searchField"></slot>
-		{{/if}}
-	</div>
-
-	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
-
-		<div class="ui5-shellbar-overflow-container-right-child">
-
-			{{#if hasSearchField}}
-				<ui5-button
-					id="{{this._id}}-item-1"
-					class="{{classes.items.search}} ui5-shellbar-button ui5-shellbar-search-button"
-					icon="sap-icon://search"
-					data-ui5-text="Search"
-					data-ui5-notification-count="{{notificationCount}}"
-					@click={{_handleSearchIconPress}}
-					aria-label="{{_searchText}}"
-					title="{{_searchText}}"
-					._buttonAccInfo="{{accInfo.search}}"
-				></ui5-button>
-			{{/if}}
-
-			{{#each customItemsInfo}}
-				<ui5-button
-					id="{{this.id}}"
-					style="{{this.style}}"
-					class="{{this.classes}}"
-					icon="{{this.icon}}"
-					title="{{this.title}}"
-					data-count="{{this.count}}"
-					data-ui5-notification-count="{{../notificationCount}}"
-					data-ui5-external-action-item-id="{{this.refItemid}}"
-					data-ui5-stable="{{stableDomRef}}"
-					@click={{this.press}}
-				></ui5-button>
-			{{/each}}
-
-			{{#if showNotifications}}
-			<ui5-button
-				id="{{this._id}}-item-2"
-				style="{{styles.items.notification}}"
-				class="{{classes.items.notification}} ui5-shellbar-button ui5-shellbar-bell-button"
-				icon="sap-icon://bell"
-				data-ui5-text="Notifications"
-				data-ui5-notification-count="{{notificationCount}}"
-				@click={{_handleNotificationsPress}}
-				aria-label="{{_notificationsText}}"
-				title="{{_notificationsText}}"
-				._buttonAccInfo="{{accInfo.notifications}}"
-				data-ui5-stable="notifications"
-			></ui5-button>
-			{{/if}}
-
-			<ui5-button
-				id="{{this._id}}-item-5"
-				style="{{styles.items.overflow}}"
-				class="{{classes.items.overflow}} ui5-shellbar-button ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button"
-				icon="sap-icon://overflow"
-				@click="{{_handleOverflowPress}}"
-				aria-label="{{_overflowText}}"
-				title="{{_overflowText}}"
-				._buttonAccInfo="{{accInfo.overflow}}"
-				data-ui5-stable="overflow"
-			></ui5-button>
-
-			{{#if hasProfile}}
-				<ui5-button
-					profile-btn
-					id="{{this._id}}-item-3"
-					@click={{_handleProfilePress}}
-					style="{{styles.items.profile}}"
-					aria-label="{{_profileText}}"
-					title="{{_profileText}}"
-					._buttonAccInfo="{{accInfo.profile}}"
-					class="ui5-shellbar-button ui5-shellbar-image-button"
-					data-ui5-stable="profile"
-				>
-					<slot
-						name="profile"
-					></slot>
-				</ui5-button>
-			{{/if}}
-
-			{{#if showProductSwitch}}
-			<ui5-button
-				id="{{this._id}}-item-4"
-				style="{{styles.items.product}}"
-				class="{{classes.items.product}} ui5-shellbar-button ui5-shellbar-button-product-switch"
-				icon="sap-icon://grid"
-				data-ui5-text="Product Switch"
-				@click={{_handleProductSwitchPress}}
-				aria-label="{{_productsText}}"
-				title="{{_productsText}}"
-				._buttonAccInfo="{{accInfo.products}}"
-				data-ui5-stable="product-switch"
-			></ui5-button>
-			{{/if}}
-		</div>
-	</div>
-</div>
-
-{{#*inline "coPilot"}}
-	<svg @click="{{_coPilotClick}}" focusable="false" width="44" role="presentation" aria-hidden="true" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">
-		<defs>
-			<linearGradient id="f" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#c0d9f2" stop-opacity=".87"/><stop offset="80%" stop-color="#fff" stop-opacity=".87"/></linearGradient>
-			<linearGradient id="e" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#b4d2ff" stop-opacity=".16"/><stop offset="80%" stop-color="#fff" stop-opacity=".16"/></linearGradient>
-			<linearGradient id="c" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#b4d2ff" stop-opacity=".1"/><stop offset="80%" stop-color="#fff" stop-opacity=".1"/></linearGradient>
-			<path id="d" d="M98.158 0c.158 17.395-9.107 31.335-18.609 45.928-9.21 14.153-18.933 25.29-33.377 34.045C31.427 88.918 17.25 94.39 0 94.273c-17.155-.115-30.823-6.582-45.798-14.949-15.216-8.497-27.76-16.77-37.253-31.375C-92.668 33.158-98.487 17.571-97.179 0c1.233-16.978 12.691-29.086 21.044-43.957 8.456-15.059 12.272-32.152 26.873-41.367 14.76-9.322 31.83-7.68 49.262-6.77 16.897.88 31.86 3.06 46.42 11.693 14.452 8.568 23.18 20.866 32.26 34.976C88.05-30.91 98.014-17.277 98.157 0z">
-				<animate attributeName="d" values="{{coPilot.animationValues}}" dur="30s" repeatCount="indefinite"/>
-				<animateTransform attributeName="transform" type="scale" values="1;1.05;1.05;1.02;1" dur="0.15s" begin="a.mousedown" repeatCount="1" additive="sum"/>
-			</path><mask id="b"><circle r="120" fill="#fff"/><circle r="76"/></mask>
-		</defs>
-		<g mask="url(#b)">
-			<g transform="rotate(54)"><use xlink:href="#d" fill="url(#c)">
-			{{#if coPilot.animated}}<animateTransform attributeName="transform" type="rotate" from="54" to="416" dur="15s" repeatCount="indefinite"/>{{/if}}</use></g>
-			<use xlink:href="#d" fill="url(#e)" transform="rotate(74)"/>
-			<g transform="rotate(90)"><use xlink:href="#d" fill="url(#f)">
-			{{#if coPilot.animated}}<animateTransform attributeName="transform" type="rotate" from="90" to="450" dur="30s" repeatCount="indefinite"/>{{/if}}</use></g>
-		</g><circle cx="0" cy="0" r="76" class="ui5-shellbar-co-pilot-circle" id="a"/>
-	</svg>
-{{/inline}}