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

package/dist/upload-utils/UploadCollectionBodyDnD.js

@@ -0,0 +1,60 @@
+/**
+ * Handles drag and drop event listeners on document.body.
+ * Ensures that there is only 1 listener per type attached (drag, drop, leave). Event listeners will only be attached when
+ * there is at least 1 UploadCollection subscribed.
+ */
+import EventProvider from "@ui5/webcomponents-base/dist/EventProvider.js";
+import UploadCollectionDnDOverlayMode from "../types/UploadCollectionDnDMode.js";
+const draggingFiles = (event) => {
+    return event.dataTransfer && Array.from(event.dataTransfer.types).includes("Files");
+};
+const eventProvider = new EventProvider();
+const EVENT = "UploadCollectionBodyDndEvent";
+let lastDragEnter = null;
+let globalHandlersAttached = false;
+const ondragenter = (event) => {
+    if (!draggingFiles(event)) {
+        return;
+    }
+    lastDragEnter = event.target;
+    eventProvider.fireEvent(EVENT, { mode: UploadCollectionDnDOverlayMode.Drag });
+};
+const ondragleave = (event) => {
+    if (lastDragEnter === event.target) {
+        eventProvider.fireEvent(EVENT, { mode: UploadCollectionDnDOverlayMode.None });
+    }
+};
+const ondrop = () => {
+    eventProvider.fireEvent(EVENT, { mode: UploadCollectionDnDOverlayMode.None });
+};
+const ondragover = (event) => {
+    event.preventDefault();
+};
+const attachGlobalHandlers = () => {
+    document.body.addEventListener("dragenter", ondragenter);
+    document.body.addEventListener("dragleave", ondragleave);
+    document.body.addEventListener("drop", ondrop);
+    document.body.addEventListener("dragover", ondragover);
+};
+const detachGlobalHandlers = () => {
+    document.body.removeEventListener("dragenter", ondragenter);
+    document.body.removeEventListener("dragleave", ondragleave);
+    document.body.removeEventListener("drop", ondrop);
+    document.body.removeEventListener("dragover", ondragover);
+    globalHandlersAttached = false;
+};
+const attachBodyDnDHandler = (handler) => {
+    eventProvider.attachEvent(EVENT, handler);
+    if (!globalHandlersAttached) {
+        attachGlobalHandlers();
+        globalHandlersAttached = true;
+    }
+};
+const detachBodyDnDHandler = (handler) => {
+    eventProvider.detachEvent(EVENT, handler);
+    if (!eventProvider.hasListeners(EVENT)) {
+        detachGlobalHandlers();
+    }
+};
+export { attachBodyDnDHandler, detachBodyDnDHandler, draggingFiles, };
+//# sourceMappingURL=UploadCollectionBodyDnD.js.map

package/dist/upload-utils/UploadCollectionBodyDnD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadCollectionBodyDnD.js","sourceRoot":"","sources":["../../src/upload-utils/UploadCollectionBodyDnD.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,aAAa,MAAM,+CAA+C,CAAC;AAC1E,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AAQjF,MAAM,aAAa,GAAG,CAAC,KAAgB,EAAE,EAAE;IAC1C,OAAO,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,aAAa,EAA+B,CAAC;AACvE,MAAM,KAAK,GAAG,8BAA8B,CAAC;AAC7C,IAAI,aAAa,GAAuB,IAAI,CAAC;AAC7C,IAAI,sBAAsB,GAAG,KAAK,CAAC;AAEnC,MAAM,WAAW,GAAG,CAAC,KAAgB,EAAE,EAAE;IACxC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;QAC1B,OAAO;KACP;IAED,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAC;IAC5C,aAAa,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,8BAA8B,CAAC,IAAI,EAAE,CAAC,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,KAAgB,EAAE,EAAE;IACxC,IAAI,aAAa,KAAK,KAAK,CAAC,MAAM,EAAE;QACnC,aAAa,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,8BAA8B,CAAC,IAAI,EAAE,CAAC,CAAC;KAC9E;AACF,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,GAAG,EAAE;IACnB,aAAa,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,8BAA8B,CAAC,IAAI,EAAE,CAAC,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,KAAgB,EAAE,EAAE;IACvC,KAAK,CAAC,cAAc,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACjC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACzD,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACzD,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACjC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAC5D,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAC5D,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAC1D,sBAAsB,GAAG,KAAK,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAyB,EAAE,EAAE;IAC1D,aAAa,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAE1C,IAAI,CAAC,sBAAsB,EAAE;QAC5B,oBAAoB,EAAE,CAAC;QACvB,sBAAsB,GAAG,IAAI,CAAC;KAC9B;AACF,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAyB,EAAE,EAAE;IAC1D,aAAa,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAE1C,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;QACvC,oBAAoB,EAAE,CAAC;KACvB;AACF,CAAC,CAAC;AAEF,OAAO,EACN,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,GACb,CAAC"}

package/global.d.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line
+import "@ui5/webcomponents-base/global";
+import { TemplateFunction } from "@ui5/webcomponents-base/src/renderer/executeTemplate.js";
+
+export {};
+
+declare global {
+	module "*.lit.js" {
+		const content: TemplateFunction;
+		export default content;
+	}
+}

package/package-scripts.js

@@ -1,7 +1,26 @@
 const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js");
 
 const options = {
-	port: 8081
+	port: 8081,
+	portStep: 2,
+	fioriPackage: true,
+	typescript: true,
+	illustrationsData: [
+		{
+			path: "src/illustrations",
+			defaultText: true,
+			illustrationsPrefix: "sapIllus",
+			set: "fiori",
+			destinationPath: "dist/illustrations",
+		},
+		{
+			path: "src/illustrations/tnt",
+			defaultText: false,
+			illustrationsPrefix: "tnt",
+			set: "tnt",
+			destinationPath: "dist/illustrations/tnt",
+		},
+	]
 };
 
 const scripts = getScripts(options);

package/package.json

@@ -1,19 +1,34 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "0.0.0-e463d2345",
+  "version": "0.0.0-e55c2cec6",
   "description": "UI5 Web Components: webcomponents.fiori",
+  "ui5": {
+    "webComponentsPackage": true
+  },
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "private": false,
+  "customElements": "./dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
     "ui5"
   ],
+  "exports": {
+    "./.port": "./.port",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./bundle.esm.js": "./bundle.esm.js",
+    "./bundle.common.js": "./bundle.common.js",
+    "./bundle.scoped.esm.js": "./bundle.scoped.esm.js",
+    "./*": "./dist/*"
+  },
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
     "start": "wc-dev start",
+    "watch": "wc-dev watch",
     "build": "wc-dev build",
     "test": "wc-dev test",
     "create-ui5-element": "wc-create-ui5-element",
@@ -25,12 +40,14 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "0.0.0-e463d2345",
-    "@ui5/webcomponents-icons": "0.0.0-e463d2345",
-    "@ui5/webcomponents-theme-base": "0.0.0-e463d2345",
-    "@ui5/webcomponents-base": "0.0.0-e463d2345"
+    "@ui5/webcomponents": "0.0.0-e55c2cec6",
+    "@ui5/webcomponents-base": "0.0.0-e55c2cec6",
+    "@ui5/webcomponents-icons": "0.0.0-e55c2cec6",
+    "@ui5/webcomponents-theming": "0.0.0-e55c2cec6",
+    "@zxing/library": "^0.17.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-e463d2345"
+    "@ui5/webcomponents-tools": "0.0.0-e55c2cec6",
+    "chromedriver": "108.0.0"
   }
 }

package/src/Assets-static.ts

@@ -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";

package/src/Assets.ts

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

package/src/Bar.hbs

@@ -0,0 +1,16 @@
+<div
+	class="{{classes.root}}"
+	aria-label="{{accInfo.label}}"
+	role="toolbar"
+	part="bar"
+>
+	<div class="ui5-bar-content-container ui5-bar-startcontent-container">
+		<slot name="startContent"></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-midcontent-container">
+		<slot></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-endcontent-container">
+		<slot name="endContent"></slot>
+	</div>
+</div>

package/src/Bar.ts

@@ -0,0 +1,186 @@
+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
+ */
+@customElement("ui5-bar")
+@fastNavigation
+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
+	 */
+	@property({ type: BarDesign, defaultValue: BarDesign.Header })
+	design!: BarDesign
+
+	/**
+	* Defines the content at the start of the bar
+	* @type {HTMLElement[]}
+	* @name sap.ui.webc.fiori.Bar.prototype.startContent
+	* @slot
+	* @public
+	*/
+	@slot({ type: HTMLElement })
+	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
+	*/
+	@slot({ type: HTMLElement, "default": true })
+	middleContent!: Array<HTMLElement>
+
+	/**
+	* Defines the content at the end of the bar
+	* @type {HTMLElement[]}
+	* @name sap.ui.webc.fiori.Bar.prototype.endContent
+	* @slot
+	* @public
+	*/
+	@slot({ type: HTMLElement })
+	endContent!: Array<HTMLElement>
+
+	_handleResizeBound: () => void;
+
+	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 as HTMLElement).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 as HTMLElement, this._handleResizeBound);
+		}, this);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._handleResizeBound);
+
+		this.getDomRef()!.querySelectorAll(".ui5-bar-content-container").forEach(child => {
+			ResizeHandler.deregister(child as HTMLElement, this._handleResizeBound);
+		}, this);
+	 }
+}
+
+Bar.define();
+
+export default Bar;

package/src/BarcodeScannerDialog.hbs

@@ -0,0 +1,17 @@
+<ui5-dialog stretch
+	class="ui5-barcode-scanner-dialog-root"
+	@ui5-before-open={{_startReader}}
+	@ui5-after-close={{_resetReader}}>
+	<div class="ui5-barcode-scanner-dialog-video-wrapper">
+		<video class="ui5-barcode-scanner-dialog-video"></video>
+	</div>
+	<div slot="footer" class="ui5-barcode-scanner-dialog-footer">
+		<ui5-button design="Transparent" @click={{_closeDialog}}>{{_cancelButtonText}}</ui5-button>
+	</div>
+	<ui5-busy-indicator
+		?active={{loading}}
+		size="Large"
+		text="{{_busyIndicatorText}}"
+		class="ui5-barcode-scanner-dialog-busy">
+	</ui5-busy-indicator>
+</ui5-dialog>

package/src/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;