@ui5/webcomponents-fiori 1.23.0-rc.5 → 1.23.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.23.0](https://github.com/SAP/ui5-webcomponents/compare/v1.23.0-rc.5...v1.23.0) (2024-03-06)
+
+
+### Bug Fixes
+
+* **ui5-side-navigation:** fix private types ([#8158](https://github.com/SAP/ui5-webcomponents/issues/8158)) ([a03921c](https://github.com/SAP/ui5-webcomponents/commit/a03921cc4ad90418d3ca9dd2241a3cafe24e4fff))
+
+
+### Features
+
+* **ui5-illustrated-message:** introduced "Dot" size ([#8343](https://github.com/SAP/ui5-webcomponents/issues/8343)) ([9c88f36](https://github.com/SAP/ui5-webcomponents/commit/9c88f36112888c1a766875611eb2a0aecbbc6f23)), closes [#8328](https://github.com/SAP/ui5-webcomponents/issues/8328)
+
+
+
+
+
 # [1.23.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.23.0-rc.4...v1.23.0-rc.5) (2024-02-29)
 
 

package/dist/Bar.d.ts

@@ -3,33 +3,31 @@ import BarDesign from "./types/BarDesign.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  * 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>
+ * ### Usage
  * 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>
+ * **Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
+ *
+ * ### Responsive Behavior
  * 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>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
- *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/Bar.js";`
  * @csspart bar - Used to style the wrapper of the content of the component
  * @constructor
  * @extends UI5Element
@@ -39,7 +37,6 @@ import BarDesign from "./types/BarDesign.js";
 declare class Bar extends UI5Element {
     /**
      * Defines the component's design.
-     *
      * @default "Header"
      * @public
      */

package/dist/Bar.js

@@ -18,33 +18,31 @@ import BarCss from "./generated/themes/Bar.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  * 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>
+ * ### Usage
  * 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>
+ * **Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
+ *
+ * ### Responsive Behavior
  * 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>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
- *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/Bar.js";`
  * @csspart bar - Used to style the wrapper of the content of the component
  * @constructor
  * @extends UI5Element

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>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 * @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 {\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"]}
+{"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 * ### Overview\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 * ### Usage\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 *\n * **Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n *\n * ### Responsive Behavior\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 * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/Bar.js\";`\n * @csspart bar - Used to style the wrapper of the content of the component\n * @constructor\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 {\n\t/**\n\t * Defines the component's design.\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

@@ -12,20 +12,17 @@ type BarcodeScannerDialogScanErrorEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>BarcodeScannerDialog</code> component provides barcode scanning functionality for all devices that support the <code>MediaDevices.getUserMedia()</code> native API.
+ * The `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` 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.
+ * A `scanSuccess` event fires whenever a barcode is identified
+ * and a `scanError` event fires when the scan failed (for example, due to missing permisions).
+ *
+ * Internally, the component  uses the zxing-js/library third party OSS.
  *
+ * For a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.
  * @constructor
  * @extends UI5Element
  * @public
@@ -34,7 +31,6 @@ type BarcodeScannerDialogScanErrorEventDetail = {
 declare class BarcodeScannerDialog extends UI5Element {
     /**
      * Indicates whether a loading indicator should be displayed in the dialog.
-     *
      * @default false
      * @private
      */

package/dist/BarcodeScannerDialog.js

@@ -40,20 +40,17 @@ const defaultMediaConstraints = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>BarcodeScannerDialog</code> component provides barcode scanning functionality for all devices that support the <code>MediaDevices.getUserMedia()</code> native API.
+ * The `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` 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.
+ * A `scanSuccess` event fires whenever a barcode is identified
+ * and a `scanError` event fires when the scan failed (for example, due to missing permisions).
+ *
+ * Internally, the component  uses the zxing-js/library third party OSS.
  *
+ * For a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.
  * @constructor
  * @extends UI5Element
  * @public
@@ -170,7 +167,6 @@ BarcodeScannerDialog = BarcodeScannerDialog_1 = __decorate([
     })
     /**
      * Fires when the scan is completed successfuuly.
-     *
      * @param {string} text the scan result as string
      * @param {Object} rawBytes the scan result as a Uint8Array
      * @public
@@ -190,7 +186,6 @@ BarcodeScannerDialog = BarcodeScannerDialog_1 = __decorate([
     })
     /**
      * Fires when the scan fails with error.
-     *
      * @param {string} message the error message
      * @public
      */

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 * @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<BarcodeScannerDialogScanSuccessEventDetail>(\"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<BarcodeScannerDialogScanErrorEventDetail>(\"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"]}
+{"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 * ### Overview\n *\n * The `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\n * Opening the dialog launches the device camera and scans for known barcode formats.\n *\n * A `scanSuccess` event fires whenever a barcode is identified\n * and a `scanError` event fires when the scan failed (for example, due to missing permisions).\n *\n * Internally, the component  uses the zxing-js/library third party OSS.\n *\n * For a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.\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 * @param {string} text the scan result as string\n * @param {Object} rawBytes the scan result as a Uint8Array\n * @public\n */\n@event<BarcodeScannerDialogScanSuccessEventDetail>(\"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 * @param {string} message the error message\n * @public\n */\n@event<BarcodeScannerDialogScanErrorEventDetail>(\"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 * @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

@@ -13,19 +13,18 @@ type DynamicSideContentLayoutChangeEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The DynamicSideContent (<code>ui5-dynamic-side-content</code>) is a layout component that allows additional content
+ * The DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content
  * to be displayed in a way that flexibly adapts to different screen sizes. The side
  * content appears in a container next to or directly below the main content
  * (it doesn't overlay). When the side content is triggered, the main content becomes
  * narrower (if appearing side-by-side). The side content contains a separate scrollbar
  * when appearing next to the main content.
  *
+ * ### Usage
  *
- * <h3>Usage</h3>
- *
- * <i>When to use?</i>
+ * *When to use?*
  *
  * Use this component if you want to display relevant information that is not critical
  * for users to complete a task. Users should have access to all the key functions and
@@ -33,41 +32,40 @@ type DynamicSideContentLayoutChangeEventDetail = {
  * important because on smaller screen sizes it may be difficult to display the side
  * content in a way that is easily accessible for the user.
  *
- * <i>When not to use?</i>
+ * *When not to use?*
  *
  * Don't use it if you want to display navigation or critical information that prevents
  * users from completing a task when they have no access to the side content.
  *
+ * ### Responsive Behavior
  *
- * <h3>Responsive Behavior</h3>
- *
- * Screen width > 1440px
+ * Screen width \> 1440px
  *
- * <ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px
- * each).</li>
- * <li>If the application defines a trigger, the side content can be hidden.</li></ul>
+ * - Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px
+ * each).
+ * - If the application defines a trigger, the side content can be hidden.
  *
- * Screen width <= 1440px and > 1024px
+ * Screen width \<\= 1440px and \> 1024px
  *
- * <ul><li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of
+ * - Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of
  * 320px each). If the side content width falls below 320 px, it automatically slides
  * under the main content, unless the app development team specifies that it should
- * disappear.</li></ul>
+ * disappear.
  *
- * Screen width <= 1024px and > 720px
+ * Screen width \<\= 1024px and \> 720px
  *
- * <ul><li>The side content ratio is fixed to 340px, and the main content takes the rest
- * of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code>
- * and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>
+ * - The side content ratio is fixed to 340px, and the main content takes the rest
+ * of the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`
+ * and screen width is \<\= 960px and \> 720px the side content falls below the main content.
  *
- * Screen width <= 720px (for example on a mobile device)
+ * Screen width \<\= 720px (for example on a mobile device)
  *
- * <ul><li>In this case, the side content automatically disappears from the screen (unless
- * specified to stay under the content by setting of <code>sideContentVisibility</code>
- * property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger
+ * - In this case, the side content automatically disappears from the screen (unless
+ * specified to stay under the content by setting of `sideContentVisibility`
+ * property to `AlwaysShow`) and can be triggered from a pre-set trigger
  * (specified within the app). When the side content is triggered, it replaces the main
  * content. We recommend that you always place the trigger for the side content in the
- * same location, such as in the app footer.</li></ul>
+ * same location, such as in the app footer.
  *
  * A special case allows switching the comparison mode between the main and side content.
  * In this case, the screen is split into 50:50 percent for main vs. side content. The
@@ -75,10 +73,9 @@ type DynamicSideContentLayoutChangeEventDetail = {
  * side content disappears on screen widths of less than 720 px and can only be
  * viewed by triggering it.
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents-fiori/dist/DynamicSideContent";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -88,7 +85,6 @@ type DynamicSideContentLayoutChangeEventDetail = {
 declare class DynamicSideContent extends UI5Element {
     /**
      * Defines the visibility of the main content.
-     *
      * @default false
      * @public
      *
@@ -96,7 +92,6 @@ declare class DynamicSideContent extends UI5Element {
     hideMainContent: boolean;
     /**
      * Defines the visibility of the side content.
-     *
      * @default false
      * @public
      *
@@ -105,15 +100,7 @@ declare class DynamicSideContent extends UI5Element {
     /**
      * Defines whether the side content is positioned before the main content (left side
      * in LTR mode), or after the the main content (right side in LTR mode).
-     *
-     * <br><br>
-     * <b>The available values are:</b>
-     *
-     * <ul>
-     * <li><code>Start</code></li>
-     * <li><code>End</code></li>
-     * </ul>
-     *
+
      * @default "End"
      * @public
      *
@@ -121,18 +108,6 @@ declare class DynamicSideContent extends UI5Element {
     sideContentPosition: `${SideContentPosition}`;
     /**
      * Defines on which breakpoints the side content is visible.
-     *
-     * <br><br>
-     * <b>The available values are:</b>
-     *
-     * <ul>
-     * <li><code>AlwaysShow</code></li>
-     * <li><code>ShowAboveL</code></li>
-     * <li><code>ShowAboveM</code></li>
-     * <li><code>ShowAboveS</code></li>
-     * <li><code>NeverShow</code></li>
-     * </ul>
-     *
      * @default "ShowAboveS"
      * @public
      *
@@ -140,17 +115,6 @@ declare class DynamicSideContent extends UI5Element {
     sideContentVisibility: `${SideContentVisibility}`;
     /**
      * Defines on which breakpoints the side content falls down below the main content.
-     *
-     * <br><br>
-     * <b>The available values are:</b>
-     *
-     * <ul>
-     * <li><code>BelowXL</code></li>
-     * <li><code>BelowL</code></li>
-     * <li><code>BelowM</code></li>
-     * <li><code>OnMinimumWidth</code></li>
-     * </ul>
-     *
      * @default "OnMinimumWidth"
      * @public
      *
@@ -161,7 +125,6 @@ declare class DynamicSideContent extends UI5Element {
      * the main content take 50:50 percent of the container on all screen sizes
      * except for phone, where the main and side contents are switching visibility
      * using the toggle method.
-     *
      * @default false
      * @public
      *
@@ -185,7 +148,6 @@ declare class DynamicSideContent extends UI5Element {
     _currentBreakpoint: string;
     /**
      * Defines the side content.
-     *
      * @public
      */
     sideContent: Array<HTMLElement>;
@@ -198,7 +160,6 @@ declare class DynamicSideContent extends UI5Element {
     onExitDOM(): void;
     /**
      * Toggles visibility of main and side contents on S screen size (mobile device).
-     *
      * @public
      */
     toggleContents(): void;

package/dist/DynamicSideContent.js

@@ -29,19 +29,18 @@ MINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and s
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The DynamicSideContent (<code>ui5-dynamic-side-content</code>) is a layout component that allows additional content
+ * The DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content
  * to be displayed in a way that flexibly adapts to different screen sizes. The side
  * content appears in a container next to or directly below the main content
  * (it doesn't overlay). When the side content is triggered, the main content becomes
  * narrower (if appearing side-by-side). The side content contains a separate scrollbar
  * when appearing next to the main content.
  *
+ * ### Usage
  *
- * <h3>Usage</h3>
- *
- * <i>When to use?</i>
+ * *When to use?*
  *
  * Use this component if you want to display relevant information that is not critical
  * for users to complete a task. Users should have access to all the key functions and
@@ -49,41 +48,40 @@ MINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and s
  * important because on smaller screen sizes it may be difficult to display the side
  * content in a way that is easily accessible for the user.
  *
- * <i>When not to use?</i>
+ * *When not to use?*
  *
  * Don't use it if you want to display navigation or critical information that prevents
  * users from completing a task when they have no access to the side content.
  *
+ * ### Responsive Behavior
  *
- * <h3>Responsive Behavior</h3>
- *
- * Screen width > 1440px
+ * Screen width \> 1440px
  *
- * <ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px
- * each).</li>
- * <li>If the application defines a trigger, the side content can be hidden.</li></ul>
+ * - Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px
+ * each).
+ * - If the application defines a trigger, the side content can be hidden.
  *
- * Screen width <= 1440px and > 1024px
+ * Screen width \<\= 1440px and \> 1024px
  *
- * <ul><li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of
+ * - Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of
  * 320px each). If the side content width falls below 320 px, it automatically slides
  * under the main content, unless the app development team specifies that it should
- * disappear.</li></ul>
+ * disappear.
  *
- * Screen width <= 1024px and > 720px
+ * Screen width \<\= 1024px and \> 720px
  *
- * <ul><li>The side content ratio is fixed to 340px, and the main content takes the rest
- * of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code>
- * and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>
+ * - The side content ratio is fixed to 340px, and the main content takes the rest
+ * of the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`
+ * and screen width is \<\= 960px and \> 720px the side content falls below the main content.
  *
- * Screen width <= 720px (for example on a mobile device)
+ * Screen width \<\= 720px (for example on a mobile device)
  *
- * <ul><li>In this case, the side content automatically disappears from the screen (unless
- * specified to stay under the content by setting of <code>sideContentVisibility</code>
- * property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger
+ * - In this case, the side content automatically disappears from the screen (unless
+ * specified to stay under the content by setting of `sideContentVisibility`
+ * property to `AlwaysShow`) and can be triggered from a pre-set trigger
  * (specified within the app). When the side content is triggered, it replaces the main
  * content. We recommend that you always place the trigger for the side content in the
- * same location, such as in the app footer.</li></ul>
+ * same location, such as in the app footer.
  *
  * A special case allows switching the comparison mode between the main and side content.
  * In this case, the screen is split into 50:50 percent for main vs. side content. The
@@ -91,10 +89,9 @@ MINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and s
  * side content disappears on screen widths of less than 720 px and can only be
  * viewed by triggering it.
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents-fiori/dist/DynamicSideContent";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -120,7 +117,6 @@ let DynamicSideContent = DynamicSideContent_1 = class DynamicSideContent extends
     }
     /**
      * Toggles visibility of main and side contents on S screen size (mobile device).
-     *
      * @public
      */
     toggleContents() {