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

package/dist/webcomponentsjs/webcomponents-loader.js

@@ -8,7 +8,7 @@
  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
-(function() {
+(function () {
   'use strict';
 
   /**
@@ -47,7 +47,9 @@
 
   function fireEvent() {
     window.WebComponents.ready = true;
-    document.dispatchEvent(new CustomEvent('WebComponentsReady', { bubbles: true }));
+    document.dispatchEvent(
+      new CustomEvent('WebComponentsReady', {bubbles: true})
+    );
   }
 
   function batchCustomElements() {
@@ -77,43 +79,51 @@
 
   function runWhenLoadedFns() {
     allowUpgrades = false;
-    var fnsMap = whenLoadedFns.map(function(fn) {
+    var fnsMap = whenLoadedFns.map(function (fn) {
       return fn instanceof Function ? fn() : fn;
     });
     whenLoadedFns = [];
-    return Promise.all(fnsMap).then(function() {
-      allowUpgrades = true;
-      flushFn && flushFn();
-    }).catch(function(err) {
-      console.error(err);
-    });
+    return Promise.all(fnsMap)
+      .then(function () {
+        allowUpgrades = true;
+        flushFn && flushFn();
+      })
+      .catch(function (err) {
+        console.error(err);
+      });
   }
 
   window.WebComponents = window.WebComponents || {};
   window.WebComponents.ready = window.WebComponents.ready || false;
-  window.WebComponents.waitFor = window.WebComponents.waitFor || function(waitFn) {
-    if (!waitFn) {
-      return;
-    }
-    whenLoadedFns.push(waitFn);
-    if (polyfillsLoaded) {
-      runWhenLoadedFns();
-    }
-  };
+  window.WebComponents.waitFor =
+    window.WebComponents.waitFor ||
+    function (waitFn) {
+      if (!waitFn) {
+        return;
+      }
+      whenLoadedFns.push(waitFn);
+      if (polyfillsLoaded) {
+        runWhenLoadedFns();
+      }
+    };
   window.WebComponents._batchCustomElements = batchCustomElements;
 
   var name = 'webcomponents-loader.js';
   // Feature detect which polyfill needs to be imported.
   var polyfills = [];
-  if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
-    (window.ShadyDOM && window.ShadyDOM.force)) {
+  if (
+    !(
+      'attachShadow' in Element.prototype && 'getRootNode' in Element.prototype
+    ) ||
+    (window.ShadyDOM && window.ShadyDOM.force)
+  ) {
     polyfills.push('sd');
   }
   if (!window.customElements || window.customElements.forcePolyfill) {
     polyfills.push('ce');
   }
 
-  var needsTemplate = (function() {
+  var needsTemplate = (function () {
     // no real <template> because no `content` property (IE and older browsers)
     var t = document.createElement('template');
     if (!('content' in t)) {
@@ -128,13 +138,21 @@
     t2.content.appendChild(document.createElement('div'));
     t.content.appendChild(t2);
     var clone = t.cloneNode(true);
-    return (clone.content.childNodes.length === 0 ||
-        clone.content.firstChild.content.childNodes.length === 0);
+    return (
+      clone.content.childNodes.length === 0 ||
+      clone.content.firstChild.content.childNodes.length === 0
+    );
   })();
 
   // NOTE: any browser that does not have template or ES6 features
   // must load the full suite of polyfills.
-  if (!window.Promise || !Array.from || !window.URL || !window.Symbol || needsTemplate) {
+  if (
+    !window.Promise ||
+    !Array.from ||
+    !window.URL ||
+    !window.Symbol ||
+    needsTemplate
+  ) {
     polyfills = ['sd-ce-pf'];
   }
 
@@ -146,7 +164,7 @@
     if (window.WebComponents.root) {
       url = window.WebComponents.root + polyfillFile;
     } else {
-      var script = document.querySelector('script[src*="' + name +'"]');
+      var script = document.querySelector('script[src*="' + name + '"]');
       // Load it from the right place.
       url = script.src.replace(name, polyfillFile);
     }
@@ -156,7 +174,10 @@
     // if readyState is 'loading', this script is synchronous
     if (document.readyState === 'loading') {
       // make sure custom elements are batched whenever parser gets to the injected script
-      newScript.setAttribute('onload', 'window.WebComponents._batchCustomElements()');
+      newScript.setAttribute(
+        'onload',
+        'window.WebComponents._batchCustomElements()'
+      );
       document.write(newScript.outerHTML);
       document.addEventListener('DOMContentLoaded', ready);
     } else {
@@ -176,10 +197,10 @@
     } else {
       // this script may come between DCL and load, so listen for both, and cancel load listener if DCL fires
       window.addEventListener('load', ready);
-      window.addEventListener('DOMContentLoaded', function() {
+      window.addEventListener('DOMContentLoaded', function () {
         window.removeEventListener('load', ready);
         ready();
-      })
+      });
     }
   }
 })();

package/package-scripts.js

@@ -2,6 +2,7 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
 
 const options = {
 	port: 8080,
+	portStep: 2,
 };
 
 const scripts = getScripts(options);

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-934b4df24",
+  "version": "0.0.0-b053ad005",
   "description": "UI5 Web Components: webcomponents.main",
+  "ui5": {
+    "webComponentsPackage": true
+  },
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "private": false,
@@ -14,24 +17,37 @@
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
     "start": "wc-dev start",
+    "watch": "wc-dev watch",
+    "serve": "wc-dev serve",
     "build": "wc-dev build",
     "test": "wc-dev test",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "npm run build"
   },
+  "exports": {
+    "./.port": "./.port",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./bundle.esm.js": "./bundle.esm.js",
+    "./bundle.es5.js": "./bundle.es5.js",
+    "./bundle.common.js": "./bundle.common.js",
+    "./*": "./dist/*"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/SAP/ui5-webcomponents.git",
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-934b4df24",
-    "@ui5/webcomponents-icons": "0.0.0-934b4df24",
-    "@ui5/webcomponents-localization": "0.0.0-934b4df24",
-    "@ui5/webcomponents-theme-base": "0.0.0-934b4df24"
+    "@ui5/webcomponents-base": "0.0.0-b053ad005",
+    "@ui5/webcomponents-icons": "0.0.0-b053ad005",
+    "@ui5/webcomponents-ie11": "0.0.0-b053ad005",
+    "@ui5/webcomponents-localization": "0.0.0-b053ad005",
+    "@ui5/webcomponents-theming": "0.0.0-b053ad005"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-934b4df24",
-    "chromedriver": "latest"
+    "@ui5/webcomponents-tools": "0.0.0-b053ad005",
+    "chromedriver": "95.0.0"
   }
 }

package/src/Assets-static.js

@@ -0,0 +1,6 @@
+import "@ui5/webcomponents-localization/dist/Assets-static.js"; // CLDR
+import "@ui5/webcomponents-theming/dist/Assets-static.js"; // Theming
+
+// own main package assets
+import "./generated/json-imports/Themes-static.js";
+import "./generated/json-imports/i18n-static.js";

package/src/Assets.js

@@ -0,0 +1,7 @@
+import "@ui5/webcomponents-localization/dist/Assets.js"; // CLDR
+import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
+import "@ui5/webcomponents-icons/dist/Assets.js"; // Icons texts
+
+// own main package assets
+import "./generated/json-imports/Themes.js";
+import "./generated/json-imports/i18n.js";

package/src/Avatar.hbs

@@ -0,0 +1,20 @@
+<div 
+	class="ui5-avatar-root" 
+	tabindex="{{tabindex}}"
+	data-sap-focus-ref
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}
+	@focusout={{_onfocusout}}
+	@focusin={{_onfocusin}}
+	@click={{_onclick}}
+	role="{{_role}}"
+	aria-haspopup="{{_ariaHasPopup}}"
+>
+	{{#if hasImage}}
+		<slot></slot>
+	{{else if icon}}
+		<ui5-icon class="ui5-avatar-icon" name="{{icon}}" accessible-name="{{accessibleNameText}}"></ui5-icon>
+	{{else if initials}}
+		<span class="ui5-avatar-initials">{{validInitials}}</span>
+	{{/if}}
+</div>

package/src/Avatar.js

@@ -0,0 +1,392 @@
+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 { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+// Template
+import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
+
+import { AVATAR_TOOLTIP } from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import AvatarCss from "./generated/themes/Avatar.css.js";
+
+import Icon from "./Icon.js";
+import AvatarSize from "./types/AvatarSize.js";
+import AvatarShape from "./types/AvatarShape.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-avatar",
+	languageAware: true,
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+
+		/**
+		 * Defines if the avatar is interactive (focusable and pressable)
+		 * @type {boolean}
+		 * @defaultValue false
+		 * @public
+		 */
+		interactive: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the elements is on focus
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the name of the UI5 Icon, that would be displayed.
+		 * <br>
+		 * <b>Note:</b> If <code>image</code> slot is provided, the property would be ignored.
+		 * <br>
+		 * <b>Note:</b> You should import the desired icon first, then use its name as "icon".
+		 * <br><br>
+		 * import "@ui5/webcomponents-icons/dist/{icon_name}.js"
+		 * <br>
+		 * <pre>&lt;ui5-avatar icon="employee"></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 the displayed initials.
+		 * <br>
+		 * Up to two Latin letters can be displayed as initials.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		initials: {
+			type: String,
+		},
+
+		/**
+		 * Defines the shape of the component.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Circle</code></li>
+		 * <li><code>Square</code></li>
+		 * </ul>
+		 * @type {AvatarShape}
+		 * @defaultvalue "Circle"
+		 * @public
+		 */
+		shape: {
+			type: AvatarShape,
+			defaultValue: AvatarShape.Circle,
+		},
+
+		/**
+		 * Defines predefined size of the component.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>XS</code></li>
+		 * <li><code>S</code></li>
+		 * <li><code>M</code></li>
+		 * <li><code>L</code></li>
+		 * <li><code>XL</code></li>
+		 * </ul>
+		 * @type {AvatarSize}
+		 * @defaultvalue "S"
+		 * @public
+		 */
+		size: {
+			type: AvatarSize,
+			defaultValue: AvatarSize.S,
+		},
+
+		/**
+		 * @private
+		 */
+		_size: {
+			type: String,
+			defaultValue: AvatarSize.S,
+		},
+
+		/**
+		 * Defines the background color of the desired image.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Accent1</code></li>
+		 * <li><code>Accent2</code></li>
+		 * <li><code>Accent3</code></li>
+		 * <li><code>Accent4</code></li>
+		 * <li><code>Accent5</code></li>
+		 * <li><code>Accent6</code></li>
+		 * <li><code>Accent7</code></li>
+		 * <li><code>Accent8</code></li>
+		 * <li><code>Accent9</code></li>
+		 * <li><code>Accent10</code></li>
+		 * <li><code>Placeholder</code></li>
+		 * </ul>
+		 * @type {AvatarColorScheme}
+		 * @defaultvalue "Accent6"
+		 * @public
+		 */
+		colorScheme: {
+			type: AvatarColorScheme,
+			defaultValue: AvatarColorScheme.Accent6,
+		},
+
+		/**
+		 * @private
+		 */
+		_colorScheme: {
+			type: String,
+			defaultValue: AvatarColorScheme.Accent6,
+		},
+
+		/**
+		 * Defines the text alternative of the component.
+		 * If not provided a default text alternative will be set, if present.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.7
+		 */
+		accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines the aria-haspopup value of the component when <code>interactive</code> property is <code>true</code>.
+		 * <br><br>
+		 * @type String
+		 * @since 1.0.0-rc.15
+		 * @protected
+		 */
+		ariaHaspopup: {
+			type: String,
+		},
+
+		_tabIndex: {
+			type: String,
+			noAttribute: true,
+		},
+
+		_hasImage: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+		/**
+		 * Receives the desired <code>&lt;img&gt;</code> tag
+		 *
+		 * <b>Note:</b> If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:
+		 * <br /> <br />
+		 * <code>
+		 *		ui5-avatar:not(:defined) { <br />
+		 *			&nbsp;visibility: hidden; <br />
+		 *		} <br />
+		 * </code>
+		 * @type {HTMLElement}
+		 * @slot
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		"default": {
+			propertyName: "image",
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+		/**
+		* Fired on mouseup, space and enter if avatar is interactive
+		*
+		* @event
+		* @private
+		* @since 1.0.0-rc.11
+		*/
+		click: {},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * An image-like control that has different display options for representing images and icons
+ * in different shapes and sizes, depending on the use case.
+ *
+ * The shape can be circular or square. There are several predefined sizes, as well as an option to
+ * set a custom size.
+ *
+ * <br><br>
+ * <h3>Keyboard Handling</h3>
+ *
+ * <ul>
+ * <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li>
+ * <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li>
+ * </ul>
+ * <br><br>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Avatar.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Avatar
+ * @extends UI5Element
+ * @tagname ui5-avatar
+ * @since 1.0.0-rc.6
+ * @implements sap.ui.webcomponents.main.IAvatar
+ * @public
+ */
+class Avatar extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return AvatarCss;
+	}
+
+	static get template() {
+		return AvatarTemplate;
+	}
+
+	static get dependencies() {
+		return [Icon];
+	}
+
+	static async onDefine() {
+		Avatar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
+	get tabindex() {
+		return this._tabIndex || (this.interactive ? "0" : "-1");
+	}
+
+	/**
+	 * Returns the effective avatar size.
+	 * @readonly
+	 * @type { String }
+	 * @defaultValue "S"
+	 * @private
+	 */
+	get _effectiveSize() {
+		// we read the attribute, because the "size" property will always have a default value
+		return this.getAttribute("size") || this._size;
+	}
+
+	/**
+	 * Returns the effective background color.
+	 * @readonly
+	 * @type { String }
+	 * @defaultValue "Accent6"
+	 * @private
+	 */
+	get _effectiveBackgroundColor() {
+		// we read the attribute, because the "background-color" property will always have a default value
+		return this.getAttribute("_color-scheme") || this._colorScheme;
+	}
+
+	get _role() {
+		return this.interactive ? "button" : undefined;
+	}
+
+	get _ariaHasPopup() {
+		return this._getAriaHasPopup();
+	}
+
+	get validInitials() {
+		const validInitials = /^[a-zA-Z]{1,2}$/;
+
+		if (this.initials && validInitials.test(this.initials)) {
+			return this.initials;
+		}
+
+		return null;
+	}
+
+	get accessibleNameText() {
+		if (this.accessibleName) {
+			return this.accessibleName;
+		}
+
+		return Avatar.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
+	}
+
+	get hasImage() {
+		this._hasImage = !!this.image.length;
+		return this._hasImage;
+	}
+
+	onBeforeRendering() {
+		this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
+	}
+
+	_onClickHandler(event) {
+		// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
+		event.stopPropagation();
+		this.fireEvent("click");
+	}
+
+	_onkeydown(event) {
+		if (!this.interactive) {
+			return;
+		}
+
+		if (isEnter(event)) {
+			this.fireEvent("click");
+		}
+
+		if (isSpace(event)) {
+			event.preventDefault(); // prevent scrolling
+		}
+	}
+
+	_onkeyup(event) {
+		if (this.interactive && !event.shiftKey && isSpace(event)) {
+			this.fireEvent("click");
+		}
+	}
+
+	_onfocusout() {
+		this.focused = false;
+	}
+
+	_onfocusin() {
+		if (this.interactive) {
+			this.focused = true;
+		}
+	}
+
+	_getAriaHasPopup() {
+		if (!this.interactive || this.ariaHaspopup === "") {
+			return;
+		}
+
+		return this.ariaHaspopup;
+	}
+}
+
+Avatar.define();
+
+export default Avatar;

package/src/AvatarGroup.hbs

@@ -0,0 +1,30 @@
+<div class="ui5-avatar-group-root">
+	<div
+		class="ui5-avatar-group-items"
+		@keyup="{{_onkeyup}}"
+		@keydown="{{_onkeydown}}"
+		@focusin="{{_onfocusin}}"
+		tabindex="{{_groupTabIndex}}"
+		@click="{{_onClick}}"
+		@ui5-click="{{_onUI5Click}}"
+		aria-label="{{_ariaLabelText}}"
+		role="{{_role}}"
+		aria-haspopup="{{_containerAriaHasPopup}}"
+	>
+		<slot></slot>
+
+		{{#if _customOverflowButton}}
+			<slot name="overflowButton"></slot>
+		{{else}}
+			<ui5-button
+				._buttonAccInfo="{{_overflowButtonAccInfo}}"
+				aria-label="{{_overflowButtonAriaLabelText}}"
+				?hidden="{{_overflowBtnHidden}}"
+				?non-interactive={{_isGroup}}
+				class="{{classes.overflowButton}}"
+			>
+				{{_overflowButtonText}}
+			</ui5-button>
+		{{/if}}
+	</div>
+</div>