@ui5/webcomponents-fiori 0.0.0-aeb93167c → 0.0.0-b053ad005

package/CHANGELOG.md

@@ -3,6 +3,127 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-rc.15](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.14...v1.0.0-rc.15) (2021-07-23)
+
+
+### Bug Fixes
+
+* **ui5-bar:** aria-label added depending on the "design" property ([#3161](https://github.com/SAP/ui5-webcomponents/issues/3161)) ([7ffb575](https://github.com/SAP/ui5-webcomponents/commit/7ffb575)), closes [#3020](https://github.com/SAP/ui5-webcomponents/issues/3020)
+* **ui5-bar:** rename middleContent slot ([#3440](https://github.com/SAP/ui5-webcomponents/issues/3440)) ([e235d7d](https://github.com/SAP/ui5-webcomponents/commit/e235d7d)), closes [#3107](https://github.com/SAP/ui5-webcomponents/issues/3107)
+* **ui5-flexible-column-layout:** column borders in high contrast themes ([#3328](https://github.com/SAP/ui5-webcomponents/issues/3328)) ([bd18bb9](https://github.com/SAP/ui5-webcomponents/commit/bd18bb9)), closes [#3320](https://github.com/SAP/ui5-webcomponents/issues/3320)
+* **ui5-flexible-column-layout:** correct columns display ([#3444](https://github.com/SAP/ui5-webcomponents/issues/3444)) ([62977d0](https://github.com/SAP/ui5-webcomponents/commit/62977d0)), closes [#3425](https://github.com/SAP/ui5-webcomponents/issues/3425)
+* **ui5-flexible-column-layout:** rename noArrows property to hideArrows ([#3352](https://github.com/SAP/ui5-webcomponents/issues/3352)) ([8660d11](https://github.com/SAP/ui5-webcomponents/commit/8660d11)), closes [#3107](https://github.com/SAP/ui5-webcomponents/issues/3107)
+* **ui5-shellbar:** fix search field width ([#3296](https://github.com/SAP/ui5-webcomponents/issues/3296)) ([51fb1a3](https://github.com/SAP/ui5-webcomponents/commit/51fb1a3))
+* **ui5-shellbar:** Fix unnecessary cutting space on left side ([#3513](https://github.com/SAP/ui5-webcomponents/issues/3513)) ([c7e6f07](https://github.com/SAP/ui5-webcomponents/commit/c7e6f07)), closes [#3501](https://github.com/SAP/ui5-webcomponents/issues/3501)
+* **ui5-shellbar:** hide notification bubble if empty str ([#3123](https://github.com/SAP/ui5-webcomponents/issues/3123)) ([33fde82](https://github.com/SAP/ui5-webcomponents/commit/33fde82)), closes [#3121](https://github.com/SAP/ui5-webcomponents/issues/3121)
+* **ui5-shellbar:** menu button arrow position ([#3285](https://github.com/SAP/ui5-webcomponents/issues/3285)) ([18ea76d](https://github.com/SAP/ui5-webcomponents/commit/18ea76d)), closes [#3199](https://github.com/SAP/ui5-webcomponents/issues/3199)
+* **ui5-side-navigation:** items in popup fire click event ([#3468](https://github.com/SAP/ui5-webcomponents/issues/3468)) ([658328a](https://github.com/SAP/ui5-webcomponents/commit/658328a))
+* **ui5-upload-collection:** change file deleted event name ([#3413](https://github.com/SAP/ui5-webcomponents/issues/3413)) ([5898eb8](https://github.com/SAP/ui5-webcomponents/commit/5898eb8)), closes [#3107](https://github.com/SAP/ui5-webcomponents/issues/3107)
+* **ui5-upload-collection:** rename noDnd property to hideDragOverlay ([#3335](https://github.com/SAP/ui5-webcomponents/issues/3335)) ([c360443](https://github.com/SAP/ui5-webcomponents/commit/c360443)), closes [#3107](https://github.com/SAP/ui5-webcomponents/issues/3107)
+* **ui5-upload-collection-item:** fixed keyboard navigation ([#3327](https://github.com/SAP/ui5-webcomponents/issues/3327)) ([aad0c32](https://github.com/SAP/ui5-webcomponents/commit/aad0c32))
+* **ui5-wizard:** Circle's number horizontally aligned with the step's title ([#3370](https://github.com/SAP/ui5-webcomponents/issues/3370)) ([2cd97ec](https://github.com/SAP/ui5-webcomponents/commit/2cd97ec)), closes [#3251](https://github.com/SAP/ui5-webcomponents/issues/3251) [#3251](https://github.com/SAP/ui5-webcomponents/issues/3251)
+* **ui5-wizard:** correct aria-controls value ([#3180](https://github.com/SAP/ui5-webcomponents/issues/3180)) ([d449812](https://github.com/SAP/ui5-webcomponents/commit/d449812))
+* **ui5-wizard:** implement revised accessibility spec ([#2990](https://github.com/SAP/ui5-webcomponents/issues/2990)) ([99cb6b1](https://github.com/SAP/ui5-webcomponents/commit/99cb6b1))
+* **ui5-wizard-step:** rename properties ([#3334](https://github.com/SAP/ui5-webcomponents/issues/3334)) ([b0e73ad](https://github.com/SAP/ui5-webcomponents/commit/b0e73ad)), closes [#3107](https://github.com/SAP/ui5-webcomponents/issues/3107)
+* keep invisible texts out of the view port ([#3085](https://github.com/SAP/ui5-webcomponents/issues/3085)) ([de47520](https://github.com/SAP/ui5-webcomponents/commit/de47520)), closes [#2723](https://github.com/SAP/ui5-webcomponents/issues/2723) [#2723](https://github.com/SAP/ui5-webcomponents/issues/2723)
+
+
+### Features
+
+* **ui5-page:** implement responsive paddings ([#3412](https://github.com/SAP/ui5-webcomponents/issues/3412)) ([b720393](https://github.com/SAP/ui5-webcomponents/commit/b720393))
+* **ui5-product-switch:** Implement accessibility specification ([#2865](https://github.com/SAP/ui5-webcomponents/issues/2865)) ([8c0225c](https://github.com/SAP/ui5-webcomponents/commit/8c0225c)), closes [#2707](https://github.com/SAP/ui5-webcomponents/issues/2707)
+* **ui5-wizard:** set initial focus when a step is changed ([#3310](https://github.com/SAP/ui5-webcomponents/issues/3310)) ([70f5563](https://github.com/SAP/ui5-webcomponents/commit/70f5563))
+
+
+
+# [1.0.0-rc.14](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.13...v1.0.0-rc.14) (2021-04-01)
+
+
+### Bug Fixes
+
+
+
+* **ui5-li-notification-group, ui5-li-notification:** fix i18n bundles usage ([#3063](https://github.com/SAP/ui5-webcomponents/issues/3063)) ([d6b6fa4](https://github.com/SAP/ui5-webcomponents/commit/d6b6fa4))
+* **ui5-upload-collection-item:** make use of both main & fiori i18n bundles ([#3061](https://github.com/SAP/ui5-webcomponents/issues/3061)) ([2a01cb4](https://github.com/SAP/ui5-webcomponents/commit/2a01cb4))
+
+
+### Features
+
+* **ui5-static-area-item:** StaticAreaItem can now be scoped ([#3076](https://github.com/SAP/ui5-webcomponents/issues/3076)) ([9a7ffe4](https://github.com/SAP/ui5-webcomponents/commit/9a7ffe4))
+* **ui5-wizard:** add parameter to selectionChange event ([#3034](https://github.com/SAP/ui5-webcomponents/issues/3034)) ([7ad94d2](https://github.com/SAP/ui5-webcomponents/commit/7ad94d2))
+
+
+
+# [1.0.0-rc.13](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.12...v1.0.0-rc.13) (2021-03-26)
+
+
+### Bug Fixes
+
+* **ui5-page:** correct background-design styles ([#2862](https://github.com/SAP/ui5-webcomponents/issues/2862)) ([b10ee4c](https://github.com/SAP/ui5-webcomponents/commit/b10ee4c))
+* **ui5-upload-collection:** add region and roledescription to root element ([#2915](https://github.com/SAP/ui5-webcomponents/issues/2915)) ([6db9f09](https://github.com/SAP/ui5-webcomponents/commit/6db9f09))
+* **ui5-upload-collection:** add tooltip to edit button ([#2886](https://github.com/SAP/ui5-webcomponents/issues/2886)) ([35de38c](https://github.com/SAP/ui5-webcomponents/commit/35de38c))
+* **ui5-upload-collection-item:** show disabled delete button ([#2893](https://github.com/SAP/ui5-webcomponents/issues/2893)) ([b609b47](https://github.com/SAP/ui5-webcomponents/commit/b609b47))
+* **ui5-wizard:** use CSS vars for navigation bg-color ([#2892](https://github.com/SAP/ui5-webcomponents/issues/2892)) ([c967c6c](https://github.com/SAP/ui5-webcomponents/commit/c967c6c))
+
+
+
+
+
+# [1.0.0-rc.12](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.11...v1.0.0-rc.12) (2021-02-18)
+
+
+### Bug Fixes
+
+* **ui5-li-notification:** it is now possible to not have a description ([#2744](https://github.com/SAP/ui5-webcomponents/issues/2744)) ([ef35f84](https://github.com/SAP/ui5-webcomponents/commit/ef35f84))
+* **ui5-li-notification-group:** align priority icon ([#2584](https://github.com/SAP/ui5-webcomponents/issues/2584)) ([ff247f0](https://github.com/SAP/ui5-webcomponents/commit/ff247f0))
+* **ui5-upload-collection:** wrap noDataText/Desc text ([#2674](https://github.com/SAP/ui5-webcomponents/issues/2674)) ([c48bfe7](https://github.com/SAP/ui5-webcomponents/commit/c48bfe7)), closes [#2672](https://github.com/SAP/ui5-webcomponents/issues/2672)
+* **ui5-upload-collection-item:** fix title behaviour on small screens ([#2699](https://github.com/SAP/ui5-webcomponents/issues/2699)) ([bb7c952](https://github.com/SAP/ui5-webcomponents/commit/bb7c952))
+* **ui5-wizard:** observe content height changes ([#2801](https://github.com/SAP/ui5-webcomponents/issues/2801)) ([b4cbc43](https://github.com/SAP/ui5-webcomponents/commit/b4cbc43))
+
+
+### Features
+
+* **ui5-li-notification*:** full-fill accessibility spec ([#2578](https://github.com/SAP/ui5-webcomponents/issues/2578)) ([20de5ae](https://github.com/SAP/ui5-webcomponents/commit/20de5ae))
+* **ui5-page:** Initial implementation ([#2685](https://github.com/SAP/ui5-webcomponents/issues/2685)) ([bd09e17](https://github.com/SAP/ui5-webcomponents/commit/bd09e17)), closes [#2433](https://github.com/SAP/ui5-webcomponents/issues/2433)
+* **ui5-wizard:** improve progress navigator responsiveness ([#2590](https://github.com/SAP/ui5-webcomponents/issues/2590)) ([01cd6f9](https://github.com/SAP/ui5-webcomponents/commit/01cd6f9))
+
+
+
+
+# [1.0.0-rc.11](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.10...v1.0.0-rc.11) (2020-12-21)
+
+
+### Bug Fixes
+
+* **docs:** fix ui5-side-navigation sample ([#2564](https://github.com/SAP/ui5-webcomponents/issues/2564)) ([0338fdc](https://github.com/SAP/ui5-webcomponents/commit/0338fdc))
+* **ui5-shellbar:** fix overlapping of the search box over icons ([#2155](https://github.com/SAP/ui5-webcomponents/issues/2155)) ([3597902](https://github.com/SAP/ui5-webcomponents/commit/3597902)), closes [#2044](https://github.com/SAP/ui5-webcomponents/issues/2044)
+* **ui5-upload-collection:** fire drop only when files are dropped within dnd overlay ([#2527](https://github.com/SAP/ui5-webcomponents/issues/2527)) ([455f614](https://github.com/SAP/ui5-webcomponents/commit/455f614))
+* **ui5-wizard:** correct phone breakpoint size ([#2596](https://github.com/SAP/ui5-webcomponents/issues/2596)) ([c98d9ba](https://github.com/SAP/ui5-webcomponents/commit/c98d9ba))
+* **ui5-wizard:** fix styling issues ([#2547](https://github.com/SAP/ui5-webcomponents/issues/2547)) ([65cb42f](https://github.com/SAP/ui5-webcomponents/commit/65cb42f)), closes [#2523](https://github.com/SAP/ui5-webcomponents/issues/2523)
+
+
+### Features
+
+* **framework:** Change child-parent invalidation API ([#2541](https://github.com/SAP/ui5-webcomponents/issues/2541)) ([a1a3f80](https://github.com/SAP/ui5-webcomponents/commit/a1a3f80))
+* **ui5-bar:** initial implementation ([#2533](https://github.com/SAP/ui5-webcomponents/issues/2533)) ([5c601cd](https://github.com/SAP/ui5-webcomponents/commit/5c601cd)), closes [#2434](https://github.com/SAP/ui5-webcomponents/issues/2434)
+* **ui5-flexible-column-layout:** add start/mid/endColumnAccessibleName properties ([#2483](https://github.com/SAP/ui5-webcomponents/issues/2483)) ([fb0b24c](https://github.com/SAP/ui5-webcomponents/commit/fb0b24c))
+* **ui5-side-navigation:** add "header" slot ([#2520](https://github.com/SAP/ui5-webcomponents/issues/2520)) ([b5c4a92](https://github.com/SAP/ui5-webcomponents/commit/b5c4a92)), closes [#2518](https://github.com/SAP/ui5-webcomponents/issues/2518)
+* **ui5-side-navigation-item, ui5-side-navigation-sub-item:** introduce click event ([#2298](https://github.com/SAP/ui5-webcomponents/issues/2298)) ([d73ce38](https://github.com/SAP/ui5-webcomponents/commit/d73ce38))
+
+
+
+
+
+# [1.0.0-rc.10](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.9...v1.0.0-rc.10) (2020-11-12)
+
+
+
+### Features
+
+* **ui5-wizard:** introduce new component ([#2400](https://github.com/SAP/ui5-webcomponents/issues/2400)) ([bdec517](https://github.com/SAP/ui5-webcomponents/commit/bdec517)), closes [#2368](https://github.com/SAP/ui5-webcomponents/issues/2368)
+
+
+
 # [1.0.0-rc.9](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.8...v1.0.0-rc.9) (2020-10-08)
 
 

package/README.md

@@ -7,15 +7,63 @@
 
 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";`     |
+| 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";`       |
+| 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)
@@ -26,7 +74,7 @@ For a complete list of all public module imports from the `fiori` package, click
 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/).
 
 ## 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/master/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.

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

package/dist/Assets.js

@@ -1,4 +1,4 @@
-// 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

package/dist/Bar.js

@@ -0,0 +1,182 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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";
+
+// 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
+ *
+ * <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>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
+ * @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);
+	}
+}
+
+Bar.define();
+
+export default Bar;

package/dist/BarcodeScannerDialog.js

@@ -0,0 +1,262 @@
+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 { BrowserMultiFormatReader, NotFoundException } from "@zxing/library";
+
+// 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";
+
+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.webcomponents.fiori.BarcodeScannerDialog.prototype */ {
+	},
+	properties: /** @lends  sap.ui.webcomponents.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.webcomponents.fiori.BarcodeScannerDialog.prototype */ {
+		/**
+		 * Fires when the scan is completed successfuuly.
+		 *
+		 * @event sap.ui.webcomponents.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.webcomponents.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.webcomponents.fiori.BarcodeScannerDialog
+ * @extends 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;