@ui5/webcomponents-fiori 1.21.0 → 1.22.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.22.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0...v1.22.0-rc.0) (2024-01-11)
+
+
+### Features
+
+* **ui5-side-navigation:** Add new overflow behaviour to collapsed mode ([#8019](https://github.com/SAP/ui5-webcomponents/issues/8019)) ([e5f8edd](https://github.com/SAP/ui5-webcomponents/commit/e5f8eddcdc9f1139d002585cdb014b47a0687b62))
+
+
+
+
+
 # [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05)
 
 **Note:** Version bump only for package @ui5/webcomponents-fiori

package/dist/Bar.d.ts

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import BarDesign from "./types/BarDesign.js";
+import type { IBar } from "./Interfaces.js";
 /**
  * @class
  *
@@ -18,15 +19,6 @@ import BarDesign from "./types/BarDesign.js";
  * 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>
@@ -39,46 +31,33 @@ import BarDesign from "./types/BarDesign.js";
  *
  * <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>
  *
+ * @csspart bar - Used to style the wrapper of the content of the component
  * @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
+ * @implements { IBar }
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.11
  */
-declare class Bar extends UI5Element {
+declare class Bar extends UI5Element implements IBar {
     /**
      * Defines the component's design.
      *
-     * @type {sap.ui.webc.fiori.types.BarDesign}
-     * @name sap.ui.webc.fiori.Bar.prototype.design
-     * @defaultvalue "Header"
+     * @default "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>;

package/dist/Bar.js

@@ -33,15 +33,6 @@ import BarCss from "./generated/themes/Bar.css.js";
  * 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>
@@ -54,12 +45,10 @@ import BarCss from "./generated/themes/Bar.css.js";
  *
  * <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>
  *
+ * @csspart bar - Used to style the wrapper of the content of the component
  * @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
+ * @implements { IBar }
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.11
  */

package/dist/Bar.js.map

@@ -1 +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 * @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\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"]}
+{"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\";\nimport type { IBar } from \"./Interfaces.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>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 * @csspart bar - Used to style the wrapper of the content of the component\n * @constructor\n * @implements { IBar }\n * @extends UI5Element\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 implements IBar {\n\t/**\n\t * Defines the component's design.\n\t *\n\t * @default \"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* @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* @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* @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\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

@@ -27,10 +27,7 @@ type BarcodeScannerDialogScanErrorEventDetail = {
  * 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
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.15
  */
@@ -38,9 +35,7 @@ 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
+     * @default false
      * @private
      */
     loading: boolean;
@@ -51,17 +46,11 @@ declare class BarcodeScannerDialog extends UI5Element {
     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;

package/dist/BarcodeScannerDialog.js

@@ -55,10 +55,7 @@ const defaultMediaConstraints = {
  * 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
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.15
  */
@@ -72,9 +69,6 @@ let BarcodeScannerDialog = BarcodeScannerDialog_1 = class BarcodeScannerDialog e
     }
     /**
      * Shows a dialog with the camera videostream. Starts a scan session.
-     * @method
-     * @name sap.ui.webc.fiori.BarcodeScannerDialog#show
-     * @returns {void}
      * @public
      */
     show() {
@@ -96,9 +90,6 @@ let BarcodeScannerDialog = BarcodeScannerDialog_1 = class BarcodeScannerDialog e
     }
     /**
      * Closes the dialog and the scan session.
-     * @method
-     * @name sap.ui.webc.fiori.BarcodeScannerDialog#close
-     * @returns {void}
      * @public
      */
     close() {
@@ -180,7 +171,6 @@ BarcodeScannerDialog = BarcodeScannerDialog_1 = __decorate([
     /**
      * 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
@@ -188,20 +178,28 @@ BarcodeScannerDialog = BarcodeScannerDialog_1 = __decorate([
     ,
     event("scan-success", {
         detail: {
+            /**
+            * @public
+            */
             text: { type: String },
+            /**
+            * @public
+            */
             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
      */
     ,
     event("scan-error", {
         detail: {
+            /**
+            * @public
+            */
             message: { type: String },
         },
     })

package/dist/BarcodeScannerDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarcodeScannerDialog.js","sourceRoot":"","sources":["../src/BarcodeScannerDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport * as ZXing from \"@zxing/library/umd/index.min.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport type { Result, Exception } from \"@zxing/library/esm5/index.js\";\n\n// Texts\nimport {\n\tBARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT,\n\tBARCODE_SCANNER_DIALOG_LOADING_TXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport BarcodeScannerDialogTemplate from \"./generated/templates/BarcodeScannerDialogTemplate.lit.js\";\n\n// Styles\nimport BarcodeScannerDialogCss from \"./generated/themes/BarcodeScannerDialog.css.js\";\n\n// some tools handle named exports from UMD files and the window object is not assigned but the imports work (vitejs)\n// 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)\nconst effectiveZXing = { ...ZXing, ...window.ZXing };\nconst { BrowserMultiFormatReader, NotFoundException } = effectiveZXing;\n\nconst defaultMediaConstraints = {\n\taudio: false,\n\tvideo: {\n\t\theight: {\n\t\t\tmin: 480,\n\t\t\tideal: 960,\n\t\t\tmax: 1440,\n\t\t},\n\t\taspectRatio: 1.333333333,\n\t\tfacingMode: \"environment\",\n\t},\n};\n\ntype BarcodeScannerDialogScanSuccessEventDetail = {\n\ttext: string,\n\trawBytes: Uint8Array,\n};\n\ntype BarcodeScannerDialogScanErrorEventDetail = {\n\tmessage: string,\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>BarcodeScannerDialog</code> component provides barcode scanning functionality for all devices that support the <code>MediaDevices.getUserMedia()</code> native API.\n * Opening the dialog launches the device camera and scans for known barcode formats.\n * <br>\n * <br>\n * A <code>scanSuccess</code> event fires whenever a barcode is identified\n * and a <code>scanError</code> event fires when the scan failed (for example, due to missing permisions).\n * <br>\n * <br>\n * Internally, the component  uses the zxing-js/library third party OSS.\n *\n * 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.\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.BarcodeScannerDialog\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-barcode-scanner-dialog\n * @public\n * @since 1.0.0-rc.15\n */\n@customElement({\n\ttag: \"ui5-barcode-scanner-dialog\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\tstaticAreaTemplate: BarcodeScannerDialogTemplate,\n\tstaticAreaStyles: [BarcodeScannerDialogCss],\n\tdependencies: [\n\t\tDialog,\n\t\tBusyIndicator,\n\t\tButton,\n\t],\n})\n/**\n * Fires when the scan is completed successfuuly.\n *\n * @event sap.ui.webc.fiori.BarcodeScannerDialog#scan-success\n * @param {string} text the scan result as string\n * @param {Object} rawBytes the scan result as a Uint8Array\n * @public\n */\n@event(\"scan-success\", {\n\tdetail: {\n\t\ttext: { type: String },\n\t\trawBytes: { type: Object },\n\t},\n})\n\n/**\n * Fires when the scan fails with error.\n *\n * @event sap.ui.webc.fiori.BarcodeScannerDialog#scan-error\n * @param {string} message the error message\n * @public\n */\n@event(\"scan-error\", {\n\tdetail: {\n\t\tmessage: { type: String },\n\t},\n})\n\nclass BarcodeScannerDialog extends UI5Element {\n\t/**\n\t * Indicates whether a loading indicator should be displayed in the dialog.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.fiori.BarcodeScannerDialog.prototype.loading\n\t * @defaultvalue false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tloading!: boolean;\n\n\t_codeReader: InstanceType<typeof BrowserMultiFormatReader>;\n\tdialog?: Dialog;\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._codeReader = new BrowserMultiFormatReader();\n\t}\n\n\tstatic async onDefine() {\n\t\tBarcodeScannerDialog.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\t/**\n\t * Shows a dialog with the camera videostream. Starts a scan session.\n\t * @method\n\t * @name sap.ui.webc.fiori.BarcodeScannerDialog#show\n\t * @returns {void}\n\t * @public\n\t */\n\tshow() {\n\t\tif (this.loading) {\n\t\t\tconsole.warn(\"Barcode scanning is already in progress.\");  // eslint-disable-line\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasGetUserMedia()) {\n\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: \"getUserMedia() is not supported by your browser\" });\n\t\t\treturn;\n\t\t}\n\n\t\tthis.loading = true;\n\n\t\tthis._getUserPermission()\n\t\t\t.then(() => this._showDialog())\n\t\t\t.catch(err => {\n\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: err });\n\t\t\t\tthis.loading = false;\n\t\t\t});\n\t}\n\n\t/**\n\t * Closes the dialog and the scan session.\n\t * @method\n\t * @name sap.ui.webc.fiori.BarcodeScannerDialog#close\n\t * @returns {void}\n\t * @public\n\t */\n\tclose() {\n\t\tthis._closeDialog();\n\t\tthis.loading = false;\n\t}\n\n\t/**\n\t *  PRIVATE METHODS\n\t */\n\n\t_hasGetUserMedia() {\n\t\treturn !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);\n\t}\n\n\t_getUserPermission() {\n\t\treturn navigator.mediaDevices.getUserMedia(defaultMediaConstraints);\n\t}\n\n\tasync _getDialog() {\n\t\tconst staticAreaItem = await this.getStaticAreaItemDomRef();\n\t\treturn staticAreaItem!.querySelector<Dialog>(\"[ui5-dialog]\")!;\n\t}\n\n\tasync _getVideoElement() {\n\t\tconst staticAreaItem = await this.getStaticAreaItemDomRef();\n\t\treturn staticAreaItem!.querySelector<HTMLVideoElement>(\".ui5-barcode-scanner-dialog-video\")!;\n\t}\n\n\tasync _showDialog() {\n\t\tthis.dialog = await this._getDialog();\n\t\tthis.dialog.show();\n\t}\n\n\t_closeDialog() {\n\t\tif (this.dialog && this.dialog.opened) {\n\t\t\tthis.dialog.close();\n\t\t}\n\t}\n\n\t_startReader() {\n\t\tthis._decodeFromCamera();\n\t}\n\n\tasync _resetReader() {\n\t\tconst videoElement = await this._getVideoElement();\n\t\tvideoElement.pause();\n\t\tthis._codeReader.reset();\n\t}\n\n\tasync _decodeFromCamera() {\n\t\tconst videoElement = await this._getVideoElement();\n\t\tthis._codeReader.decodeFromVideoDevice(null, videoElement, (result: Result, err?: Exception) => {\n\t\t\tthis.loading = false;\n\t\t\tif (result) {\n\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanSuccessEventDetail>(\"scan-success\",\n\t\t\t\t\t{\n\t\t\t\t\t\ttext: result.getText(),\n\t\t\t\t\t\trawBytes: result.getRawBytes(),\n\t\t\t\t\t});\n\t\t\t}\n\t\t\tif (err && !(err instanceof NotFoundException)) {\n\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: err.message });\n\t\t\t}\n\t\t}).catch((err: Error) => this.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: err.message }));\n\t}\n\n\tget _cancelButtonText() {\n\t\treturn BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT);\n\t}\n\n\tget _busyIndicatorText() {\n\t\treturn BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_LOADING_TXT);\n\t}\n}\n\nBarcodeScannerDialog.define();\n\nexport default BarcodeScannerDialog;\nexport type {\n\tBarcodeScannerDialogScanErrorEventDetail,\n\tBarcodeScannerDialogScanSuccessEventDetail,\n};\n"]}
+{"version":3,"file":"BarcodeScannerDialog.js","sourceRoot":"","sources":["../src/BarcodeScannerDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport * as ZXing from \"@zxing/library/umd/index.min.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport type { Result, Exception } from \"@zxing/library/esm5/index.js\";\n\n// Texts\nimport {\n\tBARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT,\n\tBARCODE_SCANNER_DIALOG_LOADING_TXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport BarcodeScannerDialogTemplate from \"./generated/templates/BarcodeScannerDialogTemplate.lit.js\";\n\n// Styles\nimport BarcodeScannerDialogCss from \"./generated/themes/BarcodeScannerDialog.css.js\";\n\n// some tools handle named exports from UMD files and the window object is not assigned but the imports work (vitejs)\n// 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)\nconst effectiveZXing = { ...ZXing, ...window.ZXing };\nconst { BrowserMultiFormatReader, NotFoundException } = effectiveZXing;\n\nconst defaultMediaConstraints = {\n\taudio: false,\n\tvideo: {\n\t\theight: {\n\t\t\tmin: 480,\n\t\t\tideal: 960,\n\t\t\tmax: 1440,\n\t\t},\n\t\taspectRatio: 1.333333333,\n\t\tfacingMode: \"environment\",\n\t},\n};\n\ntype BarcodeScannerDialogScanSuccessEventDetail = {\n\ttext: string,\n\trawBytes: Uint8Array,\n};\n\ntype BarcodeScannerDialogScanErrorEventDetail = {\n\tmessage: string,\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>BarcodeScannerDialog</code> component provides barcode scanning functionality for all devices that support the <code>MediaDevices.getUserMedia()</code> native API.\n * Opening the dialog launches the device camera and scans for known barcode formats.\n * <br>\n * <br>\n * A <code>scanSuccess</code> event fires whenever a barcode is identified\n * and a <code>scanError</code> event fires when the scan failed (for example, due to missing permisions).\n * <br>\n * <br>\n * Internally, the component  uses the zxing-js/library third party OSS.\n *\n * 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.\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.15\n */\n@customElement({\n\ttag: \"ui5-barcode-scanner-dialog\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\tstaticAreaTemplate: BarcodeScannerDialogTemplate,\n\tstaticAreaStyles: [BarcodeScannerDialogCss],\n\tdependencies: [\n\t\tDialog,\n\t\tBusyIndicator,\n\t\tButton,\n\t],\n})\n/**\n * Fires when the scan is completed successfuuly.\n *\n * @param {string} text the scan result as string\n * @param {Object} rawBytes the scan result as a Uint8Array\n * @public\n */\n@event(\"scan-success\", {\n\tdetail: {\n\t\t/**\n\t\t* @public\n\t\t*/\n\t\ttext: { type: String },\n\t\t/**\n\t\t* @public\n\t\t*/\n\t\trawBytes: { type: Object },\n\t},\n})\n\n/**\n * Fires when the scan fails with error.\n *\n * @param {string} message the error message\n * @public\n */\n@event(\"scan-error\", {\n\tdetail: {\n\t\t/**\n\t\t* @public\n\t\t*/\n\t\tmessage: { type: String },\n\t},\n})\n\nclass BarcodeScannerDialog extends UI5Element {\n\t/**\n\t * Indicates whether a loading indicator should be displayed in the dialog.\n\t *\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tloading!: boolean;\n\n\t_codeReader: InstanceType<typeof BrowserMultiFormatReader>;\n\tdialog?: Dialog;\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._codeReader = new BrowserMultiFormatReader();\n\t}\n\n\tstatic async onDefine() {\n\t\tBarcodeScannerDialog.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\t/**\n\t * Shows a dialog with the camera videostream. Starts a scan session.\n\t * @public\n\t */\n\tshow(): void {\n\t\tif (this.loading) {\n\t\t\tconsole.warn(\"Barcode scanning is already in progress.\");  // eslint-disable-line\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasGetUserMedia()) {\n\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: \"getUserMedia() is not supported by your browser\" });\n\t\t\treturn;\n\t\t}\n\n\t\tthis.loading = true;\n\n\t\tthis._getUserPermission()\n\t\t\t.then(() => this._showDialog())\n\t\t\t.catch(err => {\n\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: err });\n\t\t\t\tthis.loading = false;\n\t\t\t});\n\t}\n\n\t/**\n\t * Closes the dialog and the scan session.\n\t * @public\n\t */\n\tclose():void {\n\t\tthis._closeDialog();\n\t\tthis.loading = false;\n\t}\n\n\t/**\n\t *  PRIVATE METHODS\n\t */\n\n\t_hasGetUserMedia() {\n\t\treturn !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);\n\t}\n\n\t_getUserPermission() {\n\t\treturn navigator.mediaDevices.getUserMedia(defaultMediaConstraints);\n\t}\n\n\tasync _getDialog() {\n\t\tconst staticAreaItem = await this.getStaticAreaItemDomRef();\n\t\treturn staticAreaItem!.querySelector<Dialog>(\"[ui5-dialog]\")!;\n\t}\n\n\tasync _getVideoElement() {\n\t\tconst staticAreaItem = await this.getStaticAreaItemDomRef();\n\t\treturn staticAreaItem!.querySelector<HTMLVideoElement>(\".ui5-barcode-scanner-dialog-video\")!;\n\t}\n\n\tasync _showDialog() {\n\t\tthis.dialog = await this._getDialog();\n\t\tthis.dialog.show();\n\t}\n\n\t_closeDialog() {\n\t\tif (this.dialog && this.dialog.opened) {\n\t\t\tthis.dialog.close();\n\t\t}\n\t}\n\n\t_startReader() {\n\t\tthis._decodeFromCamera();\n\t}\n\n\tasync _resetReader() {\n\t\tconst videoElement = await this._getVideoElement();\n\t\tvideoElement.pause();\n\t\tthis._codeReader.reset();\n\t}\n\n\tasync _decodeFromCamera() {\n\t\tconst videoElement = await this._getVideoElement();\n\t\tthis._codeReader.decodeFromVideoDevice(null, videoElement, (result: Result, err?: Exception) => {\n\t\t\tthis.loading = false;\n\t\t\tif (result) {\n\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanSuccessEventDetail>(\"scan-success\",\n\t\t\t\t\t{\n\t\t\t\t\t\ttext: result.getText(),\n\t\t\t\t\t\trawBytes: result.getRawBytes(),\n\t\t\t\t\t});\n\t\t\t}\n\t\t\tif (err && !(err instanceof NotFoundException)) {\n\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: err.message });\n\t\t\t}\n\t\t}).catch((err: Error) => this.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: err.message }));\n\t}\n\n\tget _cancelButtonText() {\n\t\treturn BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT);\n\t}\n\n\tget _busyIndicatorText() {\n\t\treturn BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_LOADING_TXT);\n\t}\n}\n\nBarcodeScannerDialog.define();\n\nexport default BarcodeScannerDialog;\nexport type {\n\tBarcodeScannerDialogScanErrorEventDetail,\n\tBarcodeScannerDialogScanSuccessEventDetail,\n};\n"]}

package/dist/DynamicSideContent.d.ts

@@ -80,20 +80,16 @@ type DynamicSideContentLayoutChangeEventDetail = {
  * <code>import "@ui5/webcomponents-fiori/dist/DynamicSideContent";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.DynamicSideContent
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-dynamic-side-content
+ * @extends UI5Element
  * @public
  * @since 1.1.0
+ * @slot {Array<HTMLElement>} default - Defines the main content.
  */
 declare class DynamicSideContent extends UI5Element {
     /**
      * Defines the visibility of the main content.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideMainContent
-     * @defaultvalue false
+     * @default false
      * @public
      *
      */
@@ -101,9 +97,7 @@ declare class DynamicSideContent extends UI5Element {
     /**
      * Defines the visibility of the side content.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideSideContent
-     * @defaultvalue false
+     * @default false
      * @public
      *
      */
@@ -120,9 +114,7 @@ declare class DynamicSideContent extends UI5Element {
      * <li><code>End</code></li>
      * </ul>
      *
-     * @type {sap.ui.webc.fiori.types.SideContentPosition}
-     * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentPosition
-     * @defaultvalue "End"
+     * @default "End"
      * @public
      *
      */
@@ -141,9 +133,7 @@ declare class DynamicSideContent extends UI5Element {
      * <li><code>NeverShow</code></li>
      * </ul>
      *
-     * @type {sap.ui.webc.fiori.types.SideContentVisibility}
-     * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentVisibility
-     * @defaultvalue "ShowAboveS"
+     * @default "ShowAboveS"
      * @public
      *
      */
@@ -161,9 +151,7 @@ declare class DynamicSideContent extends UI5Element {
      * <li><code>OnMinimumWidth</code></li>
      * </ul>
      *
-     * @type {sap.ui.webc.fiori.types.SideContentFallDown}
-     * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentFallDown
-     * @defaultvalue "OnMinimumWidth"
+     * @default "OnMinimumWidth"
      * @public
      *
      */
@@ -174,9 +162,7 @@ declare class DynamicSideContent extends UI5Element {
      * except for phone, where the main and side contents are switching visibility
      * using the toggle method.
      *
-     * @type {boolean}]
-     * @name sap.ui.webc.fiori.DynamicSideContent.prototype.equalSplit
-     * @defaultvalue false
+     * @default false
      * @public
      *
      */
@@ -197,20 +183,9 @@ declare class DynamicSideContent extends UI5Element {
      * @private
      */
     _currentBreakpoint: string;
-    /**
-     * Defines the main content.
-     *
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.fiori.DynamicSideContent.prototype.default
-     * @slot
-     * @public
-     */
     /**
      * Defines the side content.
      *
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContent
-     * @slot
      * @public
      */
     sideContent: Array<HTMLElement>;
@@ -223,9 +198,8 @@ declare class DynamicSideContent extends UI5Element {
     onExitDOM(): void;
     /**
      * Toggles visibility of main and side contents on S screen size (mobile device).
+     *
      * @public
-     * @method
-     * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents
      */
     toggleContents(): void;
     get classes(): ClassMap;

package/dist/DynamicSideContent.js

@@ -96,12 +96,10 @@ MINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and s
  * <code>import "@ui5/webcomponents-fiori/dist/DynamicSideContent";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.DynamicSideContent
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-dynamic-side-content
+ * @extends UI5Element
  * @public
  * @since 1.1.0
+ * @slot {Array<HTMLElement>} default - Defines the main content.
  */
 let DynamicSideContent = DynamicSideContent_1 = class DynamicSideContent extends UI5Element {
     constructor() {
@@ -122,9 +120,8 @@ let DynamicSideContent = DynamicSideContent_1 = class DynamicSideContent extends
     }
     /**
      * Toggles visibility of main and side contents on S screen size (mobile device).
+     *
      * @public
-     * @method
-     * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents
      */
     toggleContents() {
         if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) {
@@ -347,7 +344,6 @@ DynamicSideContent = DynamicSideContent_1 = __decorate([
     })
     /**
      * Fires when the current breakpoint has been changed.
-     * @event sap.ui.webc.fiori.DynamicSideContent#layout-change
      * @param {string} currentBreakpoint the current breakpoint.
      * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint.
      * @param {boolean} mainContentVisible visibility of the main content.
@@ -357,15 +353,27 @@ DynamicSideContent = DynamicSideContent_1 = __decorate([
     ,
     event("layout-change", {
         detail: {
+            /**
+             * @public
+             */
             currentBreakpoint: {
                 type: String,
             },
+            /**
+             * @public
+             */
             previousBreakpoint: {
                 type: String,
             },
+            /**
+             * @public
+             */
             mainContentVisible: {
                 type: Boolean,
             },
+            /**
+             * @public
+             */
             sideContentVisible: {
                 type: Boolean,
             },

package/dist/DynamicSideContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicSideContent.js","sourceRoot":"","sources":["../src/DynamicSideContent.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport SideContentPosition from \"./types/SideContentPosition.js\";\nimport SideContentVisibility from \"./types/SideContentVisibility.js\";\nimport SideContentFallDown from \"./types/SideContentFallDown.js\";\nimport DynamicSideContentTemplate from \"./generated/templates/DynamicSideContentTemplate.lit.js\";\n\n// Styles\nimport DynamicSideContentCss from \"./generated/themes/DynamicSideContent.css.js\";\n\n// Texts\nimport {\n\tDSC_SIDE_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Breakpoint-related constants\nconst S_M_BREAKPOINT = 720,\t// Breakpoint between S and M screen sizes\n\tM_L_BREAKPOINT = 1024, // Breakpoint between M and L screen sizes\n\tL_XL_BREAKPOINT = 1440, // Breakpoint between L and XL screen sizes\n\tMINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and side contents are side by side\n\ntype DynamicSideContentLayoutChangeEventDetail = {\n\tcurrentBreakpoint: string,\n\tpreviousBreakpoint: string,\n\tmainContentVisible: boolean,\n\tsideContentVisible: boolean,\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The DynamicSideContent (<code>ui5-dynamic-side-content</code>) is a layout component that allows additional content\n * to be displayed in a way that flexibly adapts to different screen sizes. The side\n * content appears in a container next to or directly below the main content\n * (it doesn't overlay). When the side content is triggered, the main content becomes\n * narrower (if appearing side-by-side). The side content contains a separate scrollbar\n * when appearing next to the main content.\n *\n *\n * <h3>Usage</h3>\n *\n * <i>When to use?</i>\n *\n * Use this component if you want to display relevant information that is not critical\n * for users to complete a task. Users should have access to all the key functions and\n * critical information in the app even if they do not see the side content. This is\n * important because on smaller screen sizes it may be difficult to display the side\n * content in a way that is easily accessible for the user.\n *\n * <i>When not to use?</i>\n *\n * Don't use it if you want to display navigation or critical information that prevents\n * users from completing a task when they have no access to the side content.\n *\n *\n * <h3>Responsive Behavior</h3>\n *\n * Screen width > 1440px\n *\n * <ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\n * each).</li>\n * <li>If the application defines a trigger, the side content can be hidden.</li></ul>\n *\n * Screen width <= 1440px and > 1024px\n *\n * <ul><li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n * 320px each). If the side content width falls below 320 px, it automatically slides\n * under the main content, unless the app development team specifies that it should\n * disappear.</li></ul>\n *\n * Screen width <= 1024px and > 720px\n *\n * <ul><li>The side content ratio is fixed to 340px, and the main content takes the rest\n * of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code>\n * and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>\n *\n * Screen width <= 720px (for example on a mobile device)\n *\n * <ul><li>In this case, the side content automatically disappears from the screen (unless\n * specified to stay under the content by setting of <code>sideContentVisibility</code>\n * property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger\n * (specified within the app). When the side content is triggered, it replaces the main\n * content. We recommend that you always place the trigger for the side content in the\n * same location, such as in the app footer.</li></ul>\n *\n * A special case allows switching the comparison mode between the main and side content.\n * In this case, the screen is split into 50:50 percent for main vs. side content. The\n * responsive behavior of the equal split is the same as in the standard view - the\n * side content disappears on screen widths of less than 720 px and can only be\n * viewed by triggering it.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents-fiori/dist/DynamicSideContent\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.DynamicSideContent\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-dynamic-side-content\n * @public\n * @since 1.1.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-side-content\",\n\trenderer: litRender,\n\tstyles: DynamicSideContentCss,\n\ttemplate: DynamicSideContentTemplate,\n})\n/**\n * Fires when the current breakpoint has been changed.\n * @event sap.ui.webc.fiori.DynamicSideContent#layout-change\n * @param {string} currentBreakpoint the current breakpoint.\n * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint.\n * @param {boolean} mainContentVisible visibility of the main content.\n * @param {boolean} sideContentVisible visibility of the side content.\n * @public\n */\n@event(\"layout-change\", {\n\tdetail: {\n\t\tcurrentBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\tpreviousBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\tmainContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\tsideContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t},\n})\nclass DynamicSideContent extends UI5Element {\n\t/**\n\t * Defines the visibility of the main content.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideMainContent\n\t * @defaultvalue false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\thideMainContent!: boolean;\n\n\t/**\n\t * Defines the visibility of the side content.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideSideContent\n\t * @defaultvalue false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\thideSideContent!: boolean;\n\n\t/**\n\t * Defines whether the side content is positioned before the main content (left side\n\t * in LTR mode), or after the the main content (right side in LTR mode).\n\t *\n\t * <br><br>\n\t * <b>The available values are:</b>\n\t *\n\t * <ul>\n\t * <li><code>Start</code></li>\n\t * <li><code>End</code></li>\n\t * </ul>\n\t *\n\t * @type {sap.ui.webc.fiori.types.SideContentPosition}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentPosition\n\t * @defaultvalue \"End\"\n\t * @public\n\t *\n\t */\n\t@property({ type: SideContentPosition, defaultValue: SideContentPosition.End })\n\tsideContentPosition!: `${SideContentPosition}`;\n\n\t/**\n\t * Defines on which breakpoints the side content is visible.\n\t *\n\t * <br><br>\n\t * <b>The available values are:</b>\n\t *\n\t * <ul>\n\t * <li><code>AlwaysShow</code></li>\n\t * <li><code>ShowAboveL</code></li>\n\t * <li><code>ShowAboveM</code></li>\n\t * <li><code>ShowAboveS</code></li>\n\t * <li><code>NeverShow</code></li>\n\t * </ul>\n\t *\n\t * @type {sap.ui.webc.fiori.types.SideContentVisibility}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentVisibility\n\t * @defaultvalue \"ShowAboveS\"\n\t * @public\n\t *\n\t */\n\t@property({ type: SideContentVisibility, defaultValue: SideContentVisibility.ShowAboveS })\n\tsideContentVisibility!: `${SideContentVisibility}`;\n\n\t/**\n\t * Defines on which breakpoints the side content falls down below the main content.\n\t *\n\t * <br><br>\n\t * <b>The available values are:</b>\n\t *\n\t * <ul>\n\t * <li><code>BelowXL</code></li>\n\t * <li><code>BelowL</code></li>\n\t * <li><code>BelowM</code></li>\n\t * <li><code>OnMinimumWidth</code></li>\n\t * </ul>\n\t *\n\t * @type {sap.ui.webc.fiori.types.SideContentFallDown}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentFallDown\n\t * @defaultvalue \"OnMinimumWidth\"\n\t * @public\n\t *\n\t */\n\t@property({ type: SideContentFallDown, defaultValue: SideContentFallDown.OnMinimumWidth })\n\tsideContentFallDown!: `${SideContentFallDown}`;\n\n\t/**\n\t * Defines whether the component is in equal split mode. In this mode, the side and\n\t * the main content take 50:50 percent of the container on all screen sizes\n\t * except for phone, where the main and side contents are switching visibility\n\t * using the toggle method.\n\t *\n\t * @type {boolean}]\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.equalSplit\n\t * @defaultvalue false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\tequalSplit!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_mcSpan!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_scSpan!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_toggled!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_currentBreakpoint!: string;\n\n\t/**\n\t * Defines the main content.\n\t *\n\t * @type {HTMLElement[]}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.default\n\t * @slot\n\t * @public\n\t */\n\n\t/**\n\t * Defines the side content.\n\t *\n\t * @type {HTMLElement[]}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContent\n\t * @slot\n\t * @public\n\t */\n\t@slot()\n\tsideContent!: Array<HTMLElement>;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\t_handleResizeBound: () => void;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tDynamicSideContent.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonAfterRendering() {\n\t\tthis._resizeContents();\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\t}\n\n\t/**\n\t * Toggles visibility of main and side contents on S screen size (mobile device).\n\t * @public\n\t * @method\n\t * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents\n\t */\n\ttoggleContents() {\n\t\tif (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) {\n\t\t\tthis._toggled = !this._toggled;\n\t\t}\n\t}\n\n\tget classes(): ClassMap {\n\t\tconst gridPrefix = \"ui5-dsc-span\",\n\t\t\tmcSpan = this._toggled ? this._scSpan : this._mcSpan,\n\t\t\tscSpan = this._toggled ? this._mcSpan : this._scSpan,\n\t\t\tclasses: ClassMap = {\n\t\t\t\tmain: {\n\t\t\t\t\t\"ui5-dsc-main\": true,\n\t\t\t\t},\n\t\t\t\tside: {\n\t\t\t\t\t\"ui5-dsc-side\": true,\n\t\t\t\t},\n\t\t\t};\n\n\t\tclasses.main[`${gridPrefix}-${mcSpan}`] = true;\n\t\tclasses.side[`${gridPrefix}-${scSpan}`] = true;\n\n\t\treturn classes;\n\t}\n\n\tget styles() {\n\t\tconst isToggled = this.breakpoint === this.sizeS && this._toggled,\n\t\t\tmcSpan = isToggled ? this._scSpan : this._mcSpan,\n\t\t\tscSpan = isToggled ? this._mcSpan : this._scSpan,\n\t\t\tcontentHeight = this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow ? \"100%\" : \"auto\";\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"flex-wrap\": this._mcSpan === \"12\" ? \"wrap\" : \"nowrap\",\n\t\t\t},\n\t\t\tmain: {\n\t\t\t\t\"height\": mcSpan === this.span12 ? contentHeight : \"100%\",\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"height\": scSpan === this.span12 ? contentHeight : \"100%\",\n\t\t\t},\n\t\t};\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),\n\t\t};\n\t}\n\n\tget sizeS() {\n\t\treturn \"S\";\n\t}\n\n\tget sizeM() {\n\t\treturn \"M\";\n\t}\n\n\tget sizeL() {\n\t\treturn \"L\";\n\t}\n\n\tget sizeXL() {\n\t\treturn \"XL\";\n\t}\n\n\tget span0() {\n\t\treturn \"0\";\n\t}\n\n\tget span3() {\n\t\treturn \"3\";\n\t}\n\n\tget span4() {\n\t\treturn \"4\";\n\t}\n\n\tget span6() {\n\t\treturn \"6\";\n\t}\n\n\tget span8() {\n\t\treturn \"8\";\n\t}\n\n\tget span9() {\n\t\treturn \"9\";\n\t}\n\n\tget span12() {\n\t\treturn \"12\";\n\t}\n\n\tget spanFixed() {\n\t\treturn \"fixed\";\n\t}\n\n\tget containerWidth() {\n\t\treturn (this.parentElement as HTMLElement).clientWidth;\n\t}\n\n\tget breakpoint() {\n\t\tlet size;\n\n\t\tif (this.containerWidth <= S_M_BREAKPOINT) {\n\t\t\tsize = this.sizeS;\n\t\t} else if (this.containerWidth > S_M_BREAKPOINT && this.containerWidth <= M_L_BREAKPOINT) {\n\t\t\tsize = this.sizeM;\n\t\t} else if (this.containerWidth > M_L_BREAKPOINT && this.containerWidth <= L_XL_BREAKPOINT) {\n\t\t\tsize = this.sizeL;\n\t\t} else {\n\t\t\tsize = this.sizeXL;\n\t\t}\n\n\t\treturn size;\n\t}\n\n\tget _isSideContentFirst() {\n\t\treturn this.sideContentPosition === SideContentPosition.Start;\n\t}\n\n\thandleResize() {\n\t\tthis._resizeContents();\n\t}\n\n\t_resizeContents() {\n\t\tlet mainSize!: string,\n\t\t\tsideSize!: string,\n\t\t\tsideVisible!: boolean;\n\n\t\t// initial set contents sizes\n\t\tswitch (this.breakpoint) {\n\t\tcase this.sizeS:\n\t\t\tmainSize = this.span12;\n\t\t\tsideSize = this.span12;\n\t\t\tbreak;\n\t\tcase this.sizeM:\n\t\t\tif (this.sideContentFallDown === SideContentFallDown.BelowXL\n\t\t\t\t|| this.sideContentFallDown === SideContentFallDown.BelowL\n\t\t\t\t|| (this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT && this.sideContentFallDown === SideContentFallDown.OnMinimumWidth)) {\n\t\t\t\tmainSize = this.span12;\n\t\t\t\tsideSize = this.span12;\n\t\t\t} else {\n\t\t\t\tmainSize = this.equalSplit ? this.span6 : this.spanFixed;\n\t\t\t\tsideSize = this.equalSplit ? this.span6 : this.spanFixed;\n\t\t\t}\n\t\t\tsideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS\n\t\t\t\t|| this.sideContentVisibility === SideContentVisibility.AlwaysShow;\n\t\t\tbreak;\n\t\tcase this.sizeL:\n\t\t\tif (this.sideContentFallDown === SideContentFallDown.BelowXL) {\n\t\t\t\tmainSize = this.span12;\n\t\t\t\tsideSize = this.span12;\n\t\t\t} else {\n\t\t\t\tmainSize = this.equalSplit ? this.span6 : this.span8;\n\t\t\t\tsideSize = this.equalSplit ? this.span6 : this.span4;\n\t\t\t}\n\t\t\tsideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS\n\t\t\t\t|| this.sideContentVisibility === SideContentVisibility.ShowAboveM\n\t\t\t\t|| this.sideContentVisibility === SideContentVisibility.AlwaysShow;\n\t\t\tbreak;\n\t\tcase this.sizeXL:\n\t\t\tmainSize = this.equalSplit ? this.span6 : this.span9;\n\t\t\tsideSize = this.equalSplit ? this.span6 : this.span3;\n\t\t\tsideVisible = this.sideContentVisibility !== SideContentVisibility.NeverShow;\n\t\t}\n\n\t\tif (this.sideContentVisibility === SideContentVisibility.AlwaysShow) {\n\t\t\tsideVisible = true;\n\t\t}\n\n\t\t// modify sizes of the contents depending on hideMainContent and hideSideContent properties\n\t\tif (this.hideSideContent) {\n\t\t\tmainSize = this.hideMainContent ? this.span0 : this.span12;\n\t\t\tsideSize = this.span0;\n\t\t\tsideVisible = false;\n\t\t}\n\n\t\tif (this.hideMainContent) {\n\t\t\tmainSize = this.span0;\n\t\t\tsideSize = this.hideSideContent ? this.span0 : this.span12;\n\t\t\tsideVisible = true;\n\t\t}\n\n\t\t// set final sizes of the contents\n\t\tif (!sideVisible) {\n\t\t\tmainSize = this.span12;\n\t\t\tsideSize = this.span0;\n\t\t}\n\n\t\t// fire \"layout-change\" event\n\t\tif (this._currentBreakpoint !== this.breakpoint) {\n\t\t\tconst eventParams = {\n\t\t\t\tcurrentBreakpoint: this.breakpoint,\n\t\t\t\tpreviousBreakpoint: this._currentBreakpoint,\n\t\t\t\tmainContentVisible: mainSize !== this.span0,\n\t\t\t\tsideContentVisible: sideSize !== this.span0,\n\t\t\t};\n\t\t\tthis.fireEvent<DynamicSideContentLayoutChangeEventDetail>(\"layout-change\", eventParams);\n\t\t\tthis._currentBreakpoint = this.breakpoint;\n\t\t}\n\n\t\t// update contents sizes\n\t\tthis._setSpanSizes(mainSize, sideSize);\n\t}\n\n\t_setSpanSizes(mainSize: string, sideSize: string) {\n\t\tthis._mcSpan = mainSize;\n\t\tthis._scSpan = sideSize;\n\t\tif (this.breakpoint !== this.sizeS) {\n\t\t\tthis._toggled = false;\n\t\t}\n\t}\n}\n\nDynamicSideContent.define();\n\nexport default DynamicSideContent;\nexport type {\n\tDynamicSideContentLayoutChangeEventDetail,\n};\n"]}
+{"version":3,"file":"DynamicSideContent.js","sourceRoot":"","sources":["../src/DynamicSideContent.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport SideContentPosition from \"./types/SideContentPosition.js\";\nimport SideContentVisibility from \"./types/SideContentVisibility.js\";\nimport SideContentFallDown from \"./types/SideContentFallDown.js\";\nimport DynamicSideContentTemplate from \"./generated/templates/DynamicSideContentTemplate.lit.js\";\n\n// Styles\nimport DynamicSideContentCss from \"./generated/themes/DynamicSideContent.css.js\";\n\n// Texts\nimport {\n\tDSC_SIDE_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Breakpoint-related constants\nconst S_M_BREAKPOINT = 720,\t// Breakpoint between S and M screen sizes\n\tM_L_BREAKPOINT = 1024, // Breakpoint between M and L screen sizes\n\tL_XL_BREAKPOINT = 1440, // Breakpoint between L and XL screen sizes\n\tMINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and side contents are side by side\n\ntype DynamicSideContentLayoutChangeEventDetail = {\n\tcurrentBreakpoint: string,\n\tpreviousBreakpoint: string,\n\tmainContentVisible: boolean,\n\tsideContentVisible: boolean,\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The DynamicSideContent (<code>ui5-dynamic-side-content</code>) is a layout component that allows additional content\n * to be displayed in a way that flexibly adapts to different screen sizes. The side\n * content appears in a container next to or directly below the main content\n * (it doesn't overlay). When the side content is triggered, the main content becomes\n * narrower (if appearing side-by-side). The side content contains a separate scrollbar\n * when appearing next to the main content.\n *\n *\n * <h3>Usage</h3>\n *\n * <i>When to use?</i>\n *\n * Use this component if you want to display relevant information that is not critical\n * for users to complete a task. Users should have access to all the key functions and\n * critical information in the app even if they do not see the side content. This is\n * important because on smaller screen sizes it may be difficult to display the side\n * content in a way that is easily accessible for the user.\n *\n * <i>When not to use?</i>\n *\n * Don't use it if you want to display navigation or critical information that prevents\n * users from completing a task when they have no access to the side content.\n *\n *\n * <h3>Responsive Behavior</h3>\n *\n * Screen width > 1440px\n *\n * <ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\n * each).</li>\n * <li>If the application defines a trigger, the side content can be hidden.</li></ul>\n *\n * Screen width <= 1440px and > 1024px\n *\n * <ul><li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n * 320px each). If the side content width falls below 320 px, it automatically slides\n * under the main content, unless the app development team specifies that it should\n * disappear.</li></ul>\n *\n * Screen width <= 1024px and > 720px\n *\n * <ul><li>The side content ratio is fixed to 340px, and the main content takes the rest\n * of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code>\n * and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>\n *\n * Screen width <= 720px (for example on a mobile device)\n *\n * <ul><li>In this case, the side content automatically disappears from the screen (unless\n * specified to stay under the content by setting of <code>sideContentVisibility</code>\n * property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger\n * (specified within the app). When the side content is triggered, it replaces the main\n * content. We recommend that you always place the trigger for the side content in the\n * same location, such as in the app footer.</li></ul>\n *\n * A special case allows switching the comparison mode between the main and side content.\n * In this case, the screen is split into 50:50 percent for main vs. side content. The\n * responsive behavior of the equal split is the same as in the standard view - the\n * side content disappears on screen widths of less than 720 px and can only be\n * viewed by triggering it.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents-fiori/dist/DynamicSideContent\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.1.0\n * @slot {Array<HTMLElement>} default - Defines the main content.\n */\n@customElement({\n\ttag: \"ui5-dynamic-side-content\",\n\trenderer: litRender,\n\tstyles: DynamicSideContentCss,\n\ttemplate: DynamicSideContentTemplate,\n})\n/**\n * Fires when the current breakpoint has been changed.\n * @param {string} currentBreakpoint the current breakpoint.\n * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint.\n * @param {boolean} mainContentVisible visibility of the main content.\n * @param {boolean} sideContentVisible visibility of the side content.\n * @public\n */\n@event(\"layout-change\", {\n\tdetail: {\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tcurrentBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tpreviousBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tmainContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tsideContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t},\n})\nclass DynamicSideContent extends UI5Element {\n\t/**\n\t * Defines the visibility of the main content.\n\t *\n\t * @default false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\thideMainContent!: boolean;\n\n\t/**\n\t * Defines the visibility of the side content.\n\t *\n\t * @default false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\thideSideContent!: boolean;\n\n\t/**\n\t * Defines whether the side content is positioned before the main content (left side\n\t * in LTR mode), or after the the main content (right side in LTR mode).\n\t *\n\t * <br><br>\n\t * <b>The available values are:</b>\n\t *\n\t * <ul>\n\t * <li><code>Start</code></li>\n\t * <li><code>End</code></li>\n\t * </ul>\n\t *\n\t * @default \"End\"\n\t * @public\n\t *\n\t */\n\t@property({ type: SideContentPosition, defaultValue: SideContentPosition.End })\n\tsideContentPosition!: `${SideContentPosition}`;\n\n\t/**\n\t * Defines on which breakpoints the side content is visible.\n\t *\n\t * <br><br>\n\t * <b>The available values are:</b>\n\t *\n\t * <ul>\n\t * <li><code>AlwaysShow</code></li>\n\t * <li><code>ShowAboveL</code></li>\n\t * <li><code>ShowAboveM</code></li>\n\t * <li><code>ShowAboveS</code></li>\n\t * <li><code>NeverShow</code></li>\n\t * </ul>\n\t *\n\t * @default \"ShowAboveS\"\n\t * @public\n\t *\n\t */\n\t@property({ type: SideContentVisibility, defaultValue: SideContentVisibility.ShowAboveS })\n\tsideContentVisibility!: `${SideContentVisibility}`;\n\n\t/**\n\t * Defines on which breakpoints the side content falls down below the main content.\n\t *\n\t * <br><br>\n\t * <b>The available values are:</b>\n\t *\n\t * <ul>\n\t * <li><code>BelowXL</code></li>\n\t * <li><code>BelowL</code></li>\n\t * <li><code>BelowM</code></li>\n\t * <li><code>OnMinimumWidth</code></li>\n\t * </ul>\n\t *\n\t * @default \"OnMinimumWidth\"\n\t * @public\n\t *\n\t */\n\t@property({ type: SideContentFallDown, defaultValue: SideContentFallDown.OnMinimumWidth })\n\tsideContentFallDown!: `${SideContentFallDown}`;\n\n\t/**\n\t * Defines whether the component is in equal split mode. In this mode, the side and\n\t * the main content take 50:50 percent of the container on all screen sizes\n\t * except for phone, where the main and side contents are switching visibility\n\t * using the toggle method.\n\t *\n\t * @default false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\tequalSplit!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_mcSpan!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_scSpan!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_toggled!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_currentBreakpoint!: string;\n\n\t/**\n\t * Defines the side content.\n\t *\n\t * @public\n\t */\n\t@slot()\n\tsideContent!: Array<HTMLElement>;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\t_handleResizeBound: () => void;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tDynamicSideContent.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonAfterRendering() {\n\t\tthis._resizeContents();\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\t}\n\n\t/**\n\t * Toggles visibility of main and side contents on S screen size (mobile device).\n\t *\n\t * @public\n\t */\n\ttoggleContents(): void {\n\t\tif (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) {\n\t\t\tthis._toggled = !this._toggled;\n\t\t}\n\t}\n\n\tget classes(): ClassMap {\n\t\tconst gridPrefix = \"ui5-dsc-span\",\n\t\t\tmcSpan = this._toggled ? this._scSpan : this._mcSpan,\n\t\t\tscSpan = this._toggled ? this._mcSpan : this._scSpan,\n\t\t\tclasses: ClassMap = {\n\t\t\t\tmain: {\n\t\t\t\t\t\"ui5-dsc-main\": true,\n\t\t\t\t},\n\t\t\t\tside: {\n\t\t\t\t\t\"ui5-dsc-side\": true,\n\t\t\t\t},\n\t\t\t};\n\n\t\tclasses.main[`${gridPrefix}-${mcSpan}`] = true;\n\t\tclasses.side[`${gridPrefix}-${scSpan}`] = true;\n\n\t\treturn classes;\n\t}\n\n\tget styles() {\n\t\tconst isToggled = this.breakpoint === this.sizeS && this._toggled,\n\t\t\tmcSpan = isToggled ? this._scSpan : this._mcSpan,\n\t\t\tscSpan = isToggled ? this._mcSpan : this._scSpan,\n\t\t\tcontentHeight = this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow ? \"100%\" : \"auto\";\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"flex-wrap\": this._mcSpan === \"12\" ? \"wrap\" : \"nowrap\",\n\t\t\t},\n\t\t\tmain: {\n\t\t\t\t\"height\": mcSpan === this.span12 ? contentHeight : \"100%\",\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"height\": scSpan === this.span12 ? contentHeight : \"100%\",\n\t\t\t},\n\t\t};\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),\n\t\t};\n\t}\n\n\tget sizeS() {\n\t\treturn \"S\";\n\t}\n\n\tget sizeM() {\n\t\treturn \"M\";\n\t}\n\n\tget sizeL() {\n\t\treturn \"L\";\n\t}\n\n\tget sizeXL() {\n\t\treturn \"XL\";\n\t}\n\n\tget span0() {\n\t\treturn \"0\";\n\t}\n\n\tget span3() {\n\t\treturn \"3\";\n\t}\n\n\tget span4() {\n\t\treturn \"4\";\n\t}\n\n\tget span6() {\n\t\treturn \"6\";\n\t}\n\n\tget span8() {\n\t\treturn \"8\";\n\t}\n\n\tget span9() {\n\t\treturn \"9\";\n\t}\n\n\tget span12() {\n\t\treturn \"12\";\n\t}\n\n\tget spanFixed() {\n\t\treturn \"fixed\";\n\t}\n\n\tget containerWidth() {\n\t\treturn (this.parentElement as HTMLElement).clientWidth;\n\t}\n\n\tget breakpoint() {\n\t\tlet size;\n\n\t\tif (this.containerWidth <= S_M_BREAKPOINT) {\n\t\t\tsize = this.sizeS;\n\t\t} else if (this.containerWidth > S_M_BREAKPOINT && this.containerWidth <= M_L_BREAKPOINT) {\n\t\t\tsize = this.sizeM;\n\t\t} else if (this.containerWidth > M_L_BREAKPOINT && this.containerWidth <= L_XL_BREAKPOINT) {\n\t\t\tsize = this.sizeL;\n\t\t} else {\n\t\t\tsize = this.sizeXL;\n\t\t}\n\n\t\treturn size;\n\t}\n\n\tget _isSideContentFirst() {\n\t\treturn this.sideContentPosition === SideContentPosition.Start;\n\t}\n\n\thandleResize() {\n\t\tthis._resizeContents();\n\t}\n\n\t_resizeContents() {\n\t\tlet mainSize!: string,\n\t\t\tsideSize!: string,\n\t\t\tsideVisible!: boolean;\n\n\t\t// initial set contents sizes\n\t\tswitch (this.breakpoint) {\n\t\tcase this.sizeS:\n\t\t\tmainSize = this.span12;\n\t\t\tsideSize = this.span12;\n\t\t\tbreak;\n\t\tcase this.sizeM:\n\t\t\tif (this.sideContentFallDown === SideContentFallDown.BelowXL\n\t\t\t\t|| this.sideContentFallDown === SideContentFallDown.BelowL\n\t\t\t\t|| (this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT && this.sideContentFallDown === SideContentFallDown.OnMinimumWidth)) {\n\t\t\t\tmainSize = this.span12;\n\t\t\t\tsideSize = this.span12;\n\t\t\t} else {\n\t\t\t\tmainSize = this.equalSplit ? this.span6 : this.spanFixed;\n\t\t\t\tsideSize = this.equalSplit ? this.span6 : this.spanFixed;\n\t\t\t}\n\t\t\tsideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS\n\t\t\t\t|| this.sideContentVisibility === SideContentVisibility.AlwaysShow;\n\t\t\tbreak;\n\t\tcase this.sizeL:\n\t\t\tif (this.sideContentFallDown === SideContentFallDown.BelowXL) {\n\t\t\t\tmainSize = this.span12;\n\t\t\t\tsideSize = this.span12;\n\t\t\t} else {\n\t\t\t\tmainSize = this.equalSplit ? this.span6 : this.span8;\n\t\t\t\tsideSize = this.equalSplit ? this.span6 : this.span4;\n\t\t\t}\n\t\t\tsideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS\n\t\t\t\t|| this.sideContentVisibility === SideContentVisibility.ShowAboveM\n\t\t\t\t|| this.sideContentVisibility === SideContentVisibility.AlwaysShow;\n\t\t\tbreak;\n\t\tcase this.sizeXL:\n\t\t\tmainSize = this.equalSplit ? this.span6 : this.span9;\n\t\t\tsideSize = this.equalSplit ? this.span6 : this.span3;\n\t\t\tsideVisible = this.sideContentVisibility !== SideContentVisibility.NeverShow;\n\t\t}\n\n\t\tif (this.sideContentVisibility === SideContentVisibility.AlwaysShow) {\n\t\t\tsideVisible = true;\n\t\t}\n\n\t\t// modify sizes of the contents depending on hideMainContent and hideSideContent properties\n\t\tif (this.hideSideContent) {\n\t\t\tmainSize = this.hideMainContent ? this.span0 : this.span12;\n\t\t\tsideSize = this.span0;\n\t\t\tsideVisible = false;\n\t\t}\n\n\t\tif (this.hideMainContent) {\n\t\t\tmainSize = this.span0;\n\t\t\tsideSize = this.hideSideContent ? this.span0 : this.span12;\n\t\t\tsideVisible = true;\n\t\t}\n\n\t\t// set final sizes of the contents\n\t\tif (!sideVisible) {\n\t\t\tmainSize = this.span12;\n\t\t\tsideSize = this.span0;\n\t\t}\n\n\t\t// fire \"layout-change\" event\n\t\tif (this._currentBreakpoint !== this.breakpoint) {\n\t\t\tconst eventParams = {\n\t\t\t\tcurrentBreakpoint: this.breakpoint,\n\t\t\t\tpreviousBreakpoint: this._currentBreakpoint,\n\t\t\t\tmainContentVisible: mainSize !== this.span0,\n\t\t\t\tsideContentVisible: sideSize !== this.span0,\n\t\t\t};\n\t\t\tthis.fireEvent<DynamicSideContentLayoutChangeEventDetail>(\"layout-change\", eventParams);\n\t\t\tthis._currentBreakpoint = this.breakpoint;\n\t\t}\n\n\t\t// update contents sizes\n\t\tthis._setSpanSizes(mainSize, sideSize);\n\t}\n\n\t_setSpanSizes(mainSize: string, sideSize: string) {\n\t\tthis._mcSpan = mainSize;\n\t\tthis._scSpan = sideSize;\n\t\tif (this.breakpoint !== this.sizeS) {\n\t\t\tthis._toggled = false;\n\t\t}\n\t}\n}\n\nDynamicSideContent.define();\n\nexport default DynamicSideContent;\nexport type {\n\tDynamicSideContentLayoutChangeEventDetail,\n};\n"]}