@ui5/webcomponents-fiori 0.0.0-db2be6526 → 0.0.0-db622d8a8

package/README.md

@@ -1,8 +1,7 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/master/docs/images/UI5_logo_wide.png)
+![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
 
 # UI5 Web Components - Fiori
 
-[![Travis CI Build Status](https://travis-ci.org/SAP/ui5-webcomponents.svg?branch=master)](https://travis-ci.org/SAP/ui5-webcomponents)
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
 Provides essential building blocks, necessary to implement the Fiori UX concept, 
@@ -14,8 +13,11 @@ such as a common header (ShellBar).
 |-------------------------------------------|--------------------------------|-----------------------------------------------------------------------|
 | Bar                                       | `ui5-bar`                      | `import "@ui5/webcomponents-fiori/dist/Bar.js";`                      |
 | Barcode Scanner Dialog                    | `ui5-barcode-scanner-dialog`   | `import "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";`     |
+| Dynamic Side Content                      | `ui5-dynamic-side-content`     | `import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";`       |
 | Flexible Column Layout                    | `ui5-flexible-column-layout`   | `import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";`     |
 | Illustrated Message                       | `ui5-illustrated-message`      | `import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";`       |
+| Media Gallery                             | `ui5-media-gallery`            | `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`             |
+| Media Gallery Item                        | `ui5-media-gallery-item`       | comes with  `ui5-media-gallery`                                       |
 | Notification List Item                    | `ui5-li-notifcation`           | `import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";`      |
 | Notification Group List Item              | `ui5-li-notification-group`    | `import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";` |
 | Notification Action                       | `ui5-notification-action`      | `import "@ui5/webcomponents-fiori/dist/NotificationAction.js";`       |
@@ -46,7 +48,7 @@ import "@ui5/webcomponents-fiori/dist/Assets.js";
 
 | Assets           | Module                                    | Notes                                                                                                                                  |
 |------------------|-------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
-| `i18n`, `themes` | `@ui5/webcomponents-fiori/dist/Assets.js` | Theming parameters and translations for the components  <br><br> *Automatically imports also:<br> `@ui5/webcomponents/dist/Assets.js`* |
+| `i18n`, `themes` | `@ui5/webcomponents-fiori/dist/Assets.js` | Theming parameters and translations for the components  <br/><br/> *Automatically imports also:<br/> `@ui5/webcomponents/dist/Assets.js`* |
 
 ## Provided features
 
@@ -66,16 +68,16 @@ Importing the module above enables the detailed but more resource-intensive anim
 
 
 ## Resources
-- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/master/README.md)
+- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
 - [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
 
 ## Contribute
-Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/docs/6-contributing/02-conventions-and-guidelines.md).
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
-This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/master/LICENSE.txt) file.
+This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/main/LICENSE.txt) file.

package/config/wdio.conf.cjs

@@ -0,0 +1 @@
+module.exports = require("@ui5/webcomponents-tools/components-package/wdio.js");

package/{src/Assets-static.js → dist/Assets-static.d.ts}

@@ -1,6 +1,3 @@
-// main package assets (transitively base and theming)
 import "@ui5/webcomponents/dist/Assets-static.js";
-
-// own fiori package assets
 import "./generated/json-imports/Themes-static.js";
 import "./generated/json-imports/i18n-static.js";

package/dist/Assets-static.js

@@ -1,6 +1,6 @@
 // main package assets (transitively base and theming)
 import "@ui5/webcomponents/dist/Assets-static.js";
-
 // own fiori package assets
 import "./generated/json-imports/Themes-static.js";
 import "./generated/json-imports/i18n-static.js";
+//# sourceMappingURL=Assets-static.js.map

package/dist/Assets-static.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Assets-static.js","sourceRoot":"","sources":["../src/Assets-static.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,0CAA0C,CAAC;AAElD,2BAA2B;AAC3B,OAAO,2CAA2C,CAAC;AACnD,OAAO,yCAAyC,CAAC","sourcesContent":["// main package assets (transitively base and theming)\nimport \"@ui5/webcomponents/dist/Assets-static.js\";\n\n// own fiori package assets\nimport \"./generated/json-imports/Themes-static.js\";\nimport \"./generated/json-imports/i18n-static.js\";\n"]}

package/{src/Assets.js → dist/Assets.d.ts}

@@ -1,6 +1,3 @@
-// main package assets (transitively base, theming and icons)
 import "@ui5/webcomponents/dist/Assets.js";
-
-// own fiori package assets
 import "./generated/json-imports/Themes.js";
 import "./generated/json-imports/i18n.js";

package/dist/Assets.js

@@ -1,6 +1,6 @@
 // main package assets (transitively base, theming and icons)
 import "@ui5/webcomponents/dist/Assets.js";
-
 // own fiori package assets
 import "./generated/json-imports/Themes.js";
 import "./generated/json-imports/i18n.js";
+//# sourceMappingURL=Assets.js.map

package/dist/Assets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Assets.js","sourceRoot":"","sources":["../src/Assets.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,mCAAmC,CAAC;AAE3C,2BAA2B;AAC3B,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kCAAkC,CAAC","sourcesContent":["// main package assets (transitively base, theming and icons)\nimport \"@ui5/webcomponents/dist/Assets.js\";\n\n// own fiori package assets\nimport \"./generated/json-imports/Themes.js\";\nimport \"./generated/json-imports/i18n.js\";\n"]}

package/dist/Bar.d.ts

@@ -0,0 +1,110 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import BarDesign from "./types/BarDesign.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The Bar is a container which is primarily used to hold titles, buttons and input elements
+ * and its design and functionality is the basis for page headers and footers.
+ * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.
+ * It has the capability to center content, such as a title, while having other components on the left and right side.
+ *
+ * <h3>Usage</h3>
+ * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.
+ * <br>
+ * <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
+ *
+ * <h3>Responsive Behavior</h3>
+ * The default slot will be centered in the available space between the startContent and the endContent areas,
+ * therefore it might not always be centered in the entire bar.
+ *
+ * <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-bar</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>bar - Used to style the wrapper of the content of the component</li>
+ * </ul>
+ *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.Bar
+ * @implements sap.ui.webc.fiori.IBar
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-bar
+ * @public
+ * @since 1.0.0-rc.11
+ */
+declare class Bar extends UI5Element {
+    /**
+     * Defines the component's design.
+     *
+     * <br><br>
+     * <b>Note:</b>
+     * Available options are:
+     * <ul>
+     * <li><code>Header</code></li>
+     * <li><code>Subheader</code></li>
+     * <li><code>Footer</code></li>
+     * <li><code>FloatingFooter</code></li>
+     * </ul>
+     *
+     * @type {sap.ui.webc.fiori.types.BarDesign}
+     * @name sap.ui.webc.fiori.Bar.prototype.design
+     * @defaultvalue "Header"
+     * @public
+     */
+    design: `${BarDesign}`;
+    /**
+    * Defines the content at the start of the bar
+    * @type {HTMLElement[]}
+    * @name sap.ui.webc.fiori.Bar.prototype.startContent
+    * @slot
+    * @public
+    */
+    startContent: Array<HTMLElement>;
+    /**
+    * Defines the content in the middle of the bar
+    * @type {HTMLElement[]}
+    * @name sap.ui.webc.fiori.Bar.prototype.default
+    * @slot middleContent
+    * @public
+    */
+    middleContent: Array<HTMLElement>;
+    /**
+    * Defines the content at the end of the bar
+    * @type {HTMLElement[]}
+    * @name sap.ui.webc.fiori.Bar.prototype.endContent
+    * @slot
+    * @public
+    */
+    endContent: Array<HTMLElement>;
+    _handleResizeBound: () => void;
+    get accInfo(): {
+        label: "Header" | "Subheader" | "Footer" | "FloatingFooter";
+    };
+    constructor();
+    handleResize(): void;
+    get classes(): {
+        root: {
+            "ui5-bar-root": boolean;
+        };
+    };
+    onBeforeRendering(): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+}
+export default Bar;

package/dist/Bar.js

@@ -1,87 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import BarTemplate from "./generated/templates/BarTemplate.lit.js";
 import BarDesign from "./types/BarDesign.js";
-
+// Template
+import BarTemplate from "./generated/templates/BarTemplate.lit.js";
 // Styles
 import BarCss from "./generated/themes/Bar.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-bar",
-	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.Bar.prototype */ {
-		/**
-		 * Defines the <code>ui5-bar</code> design.
-		 *
-		 * <br><br>
-		 * <b>Note:</b>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Header</code></li>
-		 * <li><code>Subheader</code></li>
-		 * <li><code>Footer</code></li>
-		 * <li><code>FloatingFooter</code></li>
-		 * </ul>
-		 *
-		 * @type {BarDesign}
-		 * @defaultvalue "Header"
-		 * @public
-		 */
-		design: {
-			type: BarDesign,
-			defaultValue: BarDesign.Header,
-		},
-
-		/**
-		 * Defines if the component middle area needs to be centered between start and end area
-		 * @type {Boolean}
-		 * @private
-		 */
-		_shrinked: {
-			type: Boolean,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.fiori.Bar.prototype */ {
-		/**
-		 * Defines the content at the start of the bar
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		startContent: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the content in the middle of the bar
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			type: HTMLElement,
-			propertyName: "middleContent",
-		},
-
-		/**
-		 * Defines the content at the end of the bar
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		endContent: {
-			type: HTMLElement,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.fiori.Bar.prototype */ {
-		//
-	},
-};
-
 /**
  * @class
  *
@@ -109,74 +42,90 @@ const metadata = {
  * <li>bar - Used to style the wrapper of the content of the component</li>
  * </ul>
  *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.Bar
- * @extends UI5Element
+ * @alias sap.ui.webc.fiori.Bar
+ * @implements sap.ui.webc.fiori.IBar
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-bar
  * @public
  * @since 1.0.0-rc.11
  */
-class Bar extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return BarCss;
-	}
-
-	static get template() {
-		return BarTemplate;
-	}
-
-	get accInfo() {
-		return {
-			"label": this.design,
-		};
-	}
-
-	constructor() {
-		super();
-
-		this._handleResizeBound = this.handleResize.bind(this);
-	}
-
-	handleResize() {
-		const bar = this.getDomRef();
-		const barWidth = bar.offsetWidth;
-
-		this._shrinked = Array.from(bar.children).some(element => {
-			return barWidth / 3 < element.offsetWidth;
-		});
-	}
-
-	get classes() {
-		return {
-			root: {
-				"ui5-bar-root": true,
-				"ui5-bar-root-shrinked": this._shrinked,
-			},
-		};
-	}
-
-	onEnterDOM() {
-		ResizeHandler.register(this, this._handleResizeBound);
-	}
-
-	onExitDOM() {
-		ResizeHandler.deregister(this, this._handleResizeBound);
-	}
-}
-
+let Bar = class Bar extends UI5Element {
+    get accInfo() {
+        return {
+            "label": this.design,
+        };
+    }
+    constructor() {
+        super();
+        this._handleResizeBound = this.handleResize.bind(this);
+    }
+    handleResize() {
+        const bar = this.getDomRef();
+        const barWidth = bar.offsetWidth;
+        const needShrinked = Array.from(bar.children).some(child => {
+            return child.offsetWidth > barWidth / 3;
+        });
+        bar.classList.toggle("ui5-bar-root-shrinked", needShrinked);
+    }
+    get classes() {
+        return {
+            root: {
+                "ui5-bar-root": true,
+            },
+        };
+    }
+    onBeforeRendering() {
+        // Next row is specific for IE11. Please remove after stop support and edit css file
+        [...this.startContent, ...this.middleContent, ...this.endContent].forEach(element => element.classList.add("ui5-bar-content"));
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+        this.getDomRef().querySelectorAll(".ui5-bar-content-container").forEach(child => {
+            ResizeHandler.register(child, this._handleResizeBound);
+        }, this);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+        this.getDomRef().querySelectorAll(".ui5-bar-content-container").forEach(child => {
+            ResizeHandler.deregister(child, this._handleResizeBound);
+        }, this);
+    }
+};
+__decorate([
+    property({ type: BarDesign, defaultValue: BarDesign.Header })
+], Bar.prototype, "design", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], Bar.prototype, "startContent", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], Bar.prototype, "middleContent", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], Bar.prototype, "endContent", void 0);
+Bar = __decorate([
+    customElement({
+        tag: "ui5-bar",
+        fastNavigation: true,
+        renderer: litRender,
+        styles: BarCss,
+        template: BarTemplate,
+    })
+], Bar);
 Bar.define();
-
 export default Bar;
+//# sourceMappingURL=Bar.js.map

package/dist/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","sourceRoot":"","sources":["../src/Bar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport BarDesign from \"./types/BarDesign.js\";\n\n// Template\nimport BarTemplate from \"./generated/templates/BarTemplate.lit.js\";\n\n// Styles\nimport BarCss from \"./generated/themes/Bar.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The Bar is a container which is primarily used to hold titles, buttons and input elements\n * and its design and functionality is the basis for page headers and footers.\n * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\n * It has the capability to center content, such as a title, while having other components on the left and right side.\n *\n * <h3>Usage</h3>\n * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n * <br>\n * <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n *\n * <h3>Responsive Behavior</h3>\n * The default slot will be centered in the available space between the startContent and the endContent areas,\n * therefore it might not always be centered in the entire bar.\n *\n * <h3>CSS Shadow Parts</h3>\n *\n * <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.\n * <br>\n * The <code>ui5-bar</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>bar - Used to style the wrapper of the content of the component</li>\n * </ul>\n *\n * <h3>Keyboard Handling</h3>\n *\n * <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents-fiori/dist/Bar.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.Bar\n * @implements sap.ui.webc.fiori.IBar\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-bar\n * @public\n * @since 1.0.0-rc.11\n */\n@customElement({\n\ttag: \"ui5-bar\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: BarCss,\n\ttemplate: BarTemplate,\n})\nclass Bar extends UI5Element {\n\t/**\n\t * Defines the component's design.\n\t *\n\t * <br><br>\n\t * <b>Note:</b>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Header</code></li>\n\t * <li><code>Subheader</code></li>\n\t * <li><code>Footer</code></li>\n\t * <li><code>FloatingFooter</code></li>\n\t * </ul>\n\t *\n\t * @type {sap.ui.webc.fiori.types.BarDesign}\n\t * @name sap.ui.webc.fiori.Bar.prototype.design\n\t * @defaultvalue \"Header\"\n\t * @public\n\t */\n\t@property({ type: BarDesign, defaultValue: BarDesign.Header })\n\tdesign!: `${BarDesign}`\n\n\t/**\n\t* Defines the content at the start of the bar\n\t* @type {HTMLElement[]}\n\t* @name sap.ui.webc.fiori.Bar.prototype.startContent\n\t* @slot\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tstartContent!: Array<HTMLElement>;\n\n\t/**\n\t* Defines the content in the middle of the bar\n\t* @type {HTMLElement[]}\n\t* @name sap.ui.webc.fiori.Bar.prototype.default\n\t* @slot middleContent\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tmiddleContent!: Array<HTMLElement>\n\n\t/**\n\t* Defines the content at the end of the bar\n\t* @type {HTMLElement[]}\n\t* @name sap.ui.webc.fiori.Bar.prototype.endContent\n\t* @slot\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tendContent!: Array<HTMLElement>\n\n\t_handleResizeBound: () => void;\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": this.design,\n\t\t};\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\thandleResize() {\n\t\tconst bar = this.getDomRef()!;\n\t\tconst barWidth = bar.offsetWidth;\n\t\tconst needShrinked = Array.from(bar.children).some(child => {\n\t\t\treturn (child as HTMLElement).offsetWidth > barWidth / 3;\n\t\t});\n\n\t\tbar.classList.toggle(\"ui5-bar-root-shrinked\", needShrinked);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-bar-root\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\tonBeforeRendering() {\n\t\t// Next row is specific for IE11. Please remove after stop support and edit css file\n\t\t[...this.startContent, ...this.middleContent, ...this.endContent].forEach(element => element.classList.add(\"ui5-bar-content\"));\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.register(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.deregister(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t }\n}\n\nBar.define();\n\nexport default Bar;\n"]}

package/dist/BarcodeScannerDialog.d.ts

@@ -0,0 +1,84 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+declare const BrowserMultiFormatReader: typeof import("@zxing/library/esm5/index.js").BrowserMultiFormatReader;
+type BarcodeScannerDialogScanSuccessEventDetail = {
+    text: string;
+    rawBytes: Uint8Array;
+};
+type BarcodeScannerDialogScanErrorEventDetail = {
+    message: string;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>BarcodeScannerDialog</code> component provides barcode scanning functionality for all devices that support the <code>MediaDevices.getUserMedia()</code> native API.
+ * Opening the dialog launches the device camera and scans for known barcode formats.
+ * <br>
+ * <br>
+ * A <code>scanSuccess</code> event fires whenever a barcode is identified
+ * and a <code>scanError</code> event fires when the scan failed (for example, due to missing permisions).
+ * <br>
+ * <br>
+ * Internally, the component  uses the zxing-js/library third party OSS.
+ *
+ * For a list of supported barcode formats, see the <ui5-link target="_blank" href="https://github.com/zxing-js/library">zxing-js/library</ui5-link> documentation.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.BarcodeScannerDialog
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-barcode-scanner-dialog
+ * @public
+ * @since 1.0.0-rc.15
+ */
+declare class BarcodeScannerDialog extends UI5Element {
+    /**
+     * Indicates whether a loading indicator should be displayed in the dialog.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.fiori.BarcodeScannerDialog.prototype.loading
+     * @defaultvalue false
+     * @private
+     */
+    loading: boolean;
+    _codeReader: InstanceType<typeof BrowserMultiFormatReader>;
+    dialog?: Dialog;
+    static i18nBundle: I18nBundle;
+    constructor();
+    static onDefine(): Promise<void>;
+    /**
+     * Shows a dialog with the camera videostream. Starts a scan session.
+     * @method
+     * @name sap.ui.webc.fiori.BarcodeScannerDialog#show
+     * @returns {void}
+     * @public
+     */
+    show(): void;
+    /**
+     * Closes the dialog and the scan session.
+     * @method
+     * @name sap.ui.webc.fiori.BarcodeScannerDialog#close
+     * @returns {void}
+     * @public
+     */
+    close(): void;
+    /**
+     *  PRIVATE METHODS
+     */
+    _hasGetUserMedia(): boolean;
+    _getUserPermission(): Promise<MediaStream>;
+    _getDialog(): Promise<Dialog>;
+    _getVideoElement(): Promise<HTMLVideoElement>;
+    _showDialog(): Promise<void>;
+    _closeDialog(): void;
+    _startReader(): void;
+    _resetReader(): Promise<void>;
+    _decodeFromCamera(): Promise<void>;
+    get _cancelButtonText(): string;
+    get _busyIndicatorText(): string;
+}
+export default BarcodeScannerDialog;
+export type { BarcodeScannerDialogScanErrorEventDetail, BarcodeScannerDialogScanSuccessEventDetail, };