@ui5/webcomponents-fiori 0.0.0-e463d2345 → 0.0.0-e55c2cec6

package/README.md

@@ -1,33 +1,83 @@
-![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, 
 such as a common header (ShellBar).
- 
- |      Web Component       |       Tag name       |                       Module import                        |
- | ------------------------ | -------------------- | ---------------------------------------------------------- |
- | Shell Bar                | `ui5-shellbar`       | `import "@ui5/webcomponents-fiori/dist/ShellBar.js";`      |
- | Shell Bar Item           | `ui5-shellbar-item`  | `import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";`  |
- | Product Switch           | `ui5-product-switch`       | `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";`      |
- | Product Switch Item      | `ui5-product-switch-item`  | `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`  |
 
-For a complete list of all public module imports from the `fiori` package, click [here](../../docs/Public%20Module%20Imports.md#fiori):
+## Provided components 
+
+| Web Component                             | Tag name                       | Module import                                                         |
+|-------------------------------------------|--------------------------------|-----------------------------------------------------------------------|
+| 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";`       |
+| Page                                      | `ui5-page`                     | `import "@ui5/webcomponents-fiori/dist/Page.js";`                     |
+| Product Switch                            | `ui5-product-switch`           | `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";`            |
+| Product Switch Item                       | `ui5-product-switch-item`      | `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`        |
+| Shell Bar                                 | `ui5-shellbar`                 | `import "@ui5/webcomponents-fiori/dist/ShellBar.js";`                 |
+| Shell Bar Item                            | `ui5-shellbar-item`            | `import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";`             |
+| Side Navigation                           | `ui5-side-navigation`          | `import "@ui5/webcomponents-fiori/dist/SideNavigation.js";`           |
+| Side Navigation Item                      | `ui5-side-navigation-item`     | `import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";`       |
+| Side Navigation Sub Item                  | `ui5-side-navigation-sub-item` | `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";`    |
+| Timeline                                  | `ui5-timeline`                 | `import "@ui5/webcomponents-fiori/dist/Timeline.js";`                 |
+| Timeline Item                             | `ui5-timeline-item`            | comes with `ui5-timeline`                                             |
+| Upload Collection                         | `ui5-upload-collection`        | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";`         |
+| Upload Collection Item                    | `ui5-upload-collection-item`   | `import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";`     |
+| View Settings Dialog                      | `ui5-view-settings-dialog`     | `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";`       |
+| View Settings Dialog - Sort Item          | `ui5-sort-item`                | `import "@ui5/webcomponents-fiori/dist/SortItem.js";`                 |
+| View Settings Dialog - Filter Item        | `ui5-filter-item`              | `import "@ui5/webcomponents-fiori/dist/FilterItem.js";`               |
+| View Settings Dialog - Filter Item Option | `ui5-filter-item-option`       | `import "@ui5/webcomponents-fiori/dist/FilterItemOption.js";`         |
+| Wizard                                    | `ui5-wizard`                   | `import "@ui5/webcomponents-fiori/dist/Wizard.js";`                   |
+| Wizard Step                               | `ui5-wizard-step`              | comes with `ui5-wizard`                                               |
+
+## Provided assets
+
+```js
+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`* |
+
+## Provided features
+
+
+| Affects        | Feature Import                                               | Description                                                                                             |
+|----------------|--------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
+| `ui5-shellbar` | `@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js` | Support for a better (but bigger in size) animation for the "co-pilot" button in the shellbar component |
+
+### Shellbar CoPilot animation
+
+```js
+import "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js";
+```
+
+By default, the `ui5-shellbar` CoPilot button ships with a simple animation for better performance.
+Importing the module above enables the detailed but more resource-intensive animation instead.
+
 
 ## 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/CONTRIBUTING.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/dist/Assets-static.d.ts

@@ -0,0 +1,3 @@
+import "@ui5/webcomponents/dist/Assets-static.js";
+import "./generated/json-imports/Themes-static.js";
+import "./generated/json-imports/i18n-static.js";

package/dist/Assets-static.js

@@ -0,0 +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"}

package/dist/Assets.d.ts

@@ -0,0 +1,3 @@
+import "@ui5/webcomponents/dist/Assets.js";
+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 and theme-base)
+// 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"}

package/dist/Bar.d.ts

@@ -0,0 +1,113 @@
+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;
+    static get render(): (templateResult: object, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | string[] | undefined, forStaticArea: boolean, options: import("lit-html").RenderOptions) => void;
+    static get styles(): import("@ui5/webcomponents-base/src/types.js").StyleData;
+    static get template(): import("@ui5/webcomponents-base/src/renderer/executeTemplate.js").TemplateFunction;
+    get accInfo(): {
+        label: BarDesign;
+    };
+    constructor();
+    handleResize(): void;
+    get classes(): {
+        root: {
+            "ui5-bar-root": boolean;
+        };
+    };
+    onBeforeRendering(): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+}
+export default Bar;

package/dist/Bar.js

@@ -0,0 +1,136 @@
+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 fastNavigation from "@ui5/webcomponents-base/dist/decorators/fastNavigation.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 BarDesign from "./types/BarDesign.js";
+// Template
+import BarTemplate from "./generated/templates/BarTemplate.lit.js";
+// Styles
+import BarCss from "./generated/themes/Bar.css.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
+ */
+let Bar = class Bar extends UI5Element {
+    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;
+        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("ui5-bar"),
+    fastNavigation
+], 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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"}

package/dist/BarcodeScannerDialog.js

@@ -0,0 +1,266 @@
+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 Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import * as ZXing from "@zxing/library/umd/index.min.js";
+// Template
+import BarcodeScannerDialogTemplate from "./generated/templates/BarcodeScannerDialogTemplate.lit.js";
+
+// Styles
+import BarcodeScannerDialogCss from "./generated/themes/BarcodeScannerDialog.css.js";
+
+// Texts
+import {
+	BARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT,
+	BARCODE_SCANNER_DIALOG_LOADING_TXT,
+} from "./generated/i18n/i18n-defaults.js";
+
+// some tools handle named exports from UMD files and the window object is not assigned but the imports work (vitejs)
+// other tools do not handle named exports (they are undefined after the import), but the window global is assigned and can be used (web dev server)
+const effectiveZXing = { ...ZXing, ...window.ZXing };
+const { BrowserMultiFormatReader, NotFoundException } = effectiveZXing;
+
+const defaultMediaConstraints = {
+	audio: false,
+	video: {
+		height: {
+			min: 480,
+			ideal: 960,
+			max: 1440,
+		},
+		aspectRatio: 1.333333333,
+		facingMode: "environment",
+	},
+};
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-barcode-scanner-dialog",
+	languageAware: true,
+	slots: /** @lends sap.ui.webc.fiori.BarcodeScannerDialog.prototype */ {
+	},
+	properties: /** @lends sap.ui.webc.fiori.BarcodeScannerDialog.prototype */ {
+		/**
+		 * Indicates whether a loading indicator should be displayed in the dialog.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @private
+		 */
+		loading: {
+			type: Boolean,
+		},
+	},
+	events: /** @lends sap.ui.webc.fiori.BarcodeScannerDialog.prototype */ {
+		/**
+		 * Fires when the scan is completed successfuuly.
+		 *
+		 * @event sap.ui.webc.fiori.BarcodeScannerDialog#scan-success
+		 * @param {string} text the scan result as string
+		 * @param {Object} rawBytes the scan result as a Uint8Array
+		 * @public
+		 */
+		 "scan-success": {
+			detail: {
+				text: { type: String },
+				rawBytes: { type: Object },
+			},
+		},
+
+		/**
+		 * Fires when the scan fails with error.
+		 *
+		 * @event sap.ui.webc.fiori.BarcodeScannerDialog#scan-error
+		 * @param {string} message the error message
+		 * @public
+		 */
+		 "scan-error": {
+			detail: {
+				message: { type: 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
+ */
+class BarcodeScannerDialog extends UI5Element {
+	constructor() {
+		super();
+		this._codeReader = new BrowserMultiFormatReader();
+	}
+
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return null;
+	}
+
+	static get staticAreaTemplate() {
+		return BarcodeScannerDialogTemplate;
+	}
+
+	static get styles() {
+		return null;
+	}
+
+	static get staticAreaStyles() {
+		return [BarcodeScannerDialogCss];
+	}
+
+	static async onDefine() {
+		BarcodeScannerDialog.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+	}
+
+	/**
+	 * Shows a dialog with the camera videostream. Starts a scan session.
+	 * @public
+	 */
+	show() {
+		if (this.loading) {
+			console.warn("Barcode scanning is already in progress.");  // eslint-disable-line
+			return;
+		}
+
+		if (!this._hasGetUserMedia()) {
+			this.fireEvent("scan-error", { message: "getUserMedia() is not supported by your browser" });
+			return;
+		}
+
+		this.loading = true;
+
+		this._getUserPermission()
+			.then(() => this._showDialog())
+			.catch(err => {
+				this.fireEvent("scan-error", { message: err });
+				this.loading = false;
+			});
+	}
+
+	/**
+	 * Closes the dialog and the scan session.
+	 * @public
+	 */
+	close() {
+		this._closeDialog();
+		this.loading = false;
+	}
+
+	/**
+	 *  PRIVATE METHODS
+	 */
+
+	_hasGetUserMedia() {
+		return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
+	}
+
+	_getUserPermission() {
+		return navigator.mediaDevices.getUserMedia(defaultMediaConstraints);
+	}
+
+	async _getDialog() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector("[ui5-dialog]");
+	}
+
+	async _getVideoElement() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector(".ui5-barcode-scanner-dialog-video");
+	}
+
+	async _showDialog() {
+		this.dialog = await this._getDialog();
+		this.dialog.show();
+	}
+
+	_closeDialog() {
+		if (this._isOpen) {
+			this.dialog.close();
+		}
+	}
+
+	_startReader() {
+		this._decodeFromCamera(null);
+	}
+
+	async _resetReader() {
+		const videoElement = await this._getVideoElement();
+		videoElement.pause();
+		this._codeReader.reset();
+	}
+
+	async _decodeFromCamera(cameraId) {
+		const videoElement = await this._getVideoElement();
+
+		this._codeReader.decodeFromVideoDevice(cameraId, videoElement, (result, err) => {
+			this.loading = false;
+			if (result) {
+				this.fireEvent("scan-success",
+					{
+						text: result.getText(),
+						rawBytes: result.getRawBytes(),
+					});
+			}
+			if (err && !(err instanceof NotFoundException)) {
+				this.fireEvent("scan-error", { message: err });
+			}
+		}).catch(err => this.fireEvent("scan-error", { message: err }));
+	}
+
+	get _isOpen() {
+		return !!this.dialog && this.dialog.opened;
+	}
+
+	get _cancelButtonText() {
+		return BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT);
+	}
+
+	get _busyIndicatorText() {
+		return BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_LOADING_TXT);
+	}
+
+	static get dependencies() {
+		return [
+			Dialog,
+			BusyIndicator,
+			Button,
+		];
+	}
+}
+
+BarcodeScannerDialog.define();
+
+export default BarcodeScannerDialog;