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

package/CHANGELOG.md

@@ -3,6 +3,121 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.6...v2.0.0) (2024-07-03)
+
+
+### Bug Fixes
+
+* **dynamic-page:** some remarks fixed ([#9341](https://github.com/SAP/ui5-webcomponents/issues/9341)) ([eb99114](https://github.com/SAP/ui5-webcomponents/commit/eb991145f0029d00c41c37a1b3a7e1e7229be647))
+* **ui5-tag:** fix styling issues ([#9305](https://github.com/SAP/ui5-webcomponents/issues/9305)) ([24dd42b](https://github.com/SAP/ui5-webcomponents/commit/24dd42b16f6889f9ea54402f4b664c84fdf92bfa))
+
+
+### Code Refactoring
+
+* **ui5-illustrated-message:** rename IllustrationMessageSize enum ([#9302](https://github.com/SAP/ui5-webcomponents/issues/9302)) ([6fe2a02](https://github.com/SAP/ui5-webcomponents/commit/6fe2a023772f34550a3d7f433017b1f8f2c5cd0c)), closes [#8605](https://github.com/SAP/ui5-webcomponents/issues/8605) [#8461](https://github.com/SAP/ui5-webcomponents/issues/8461) [#7887](https://github.com/SAP/ui5-webcomponents/issues/7887)
+* **ui5-view-settings-dialog:** change opening api to open property ([#9249](https://github.com/SAP/ui5-webcomponents/issues/9249)) ([52106cc](https://github.com/SAP/ui5-webcomponents/commit/52106ccffba64d13949764339a71225b33dac3a3))
+
+
+### Features
+
+* add property initializers ([#8846](https://github.com/SAP/ui5-webcomponents/issues/8846)) ([eef0cc9](https://github.com/SAP/ui5-webcomponents/commit/eef0cc9b663fda6268b98e516ed46439435fa2b0))
+* **ui5-flexible-column-layout:** enable resize via separators drag-and-drop ([#9160](https://github.com/SAP/ui5-webcomponents/issues/9160)) ([9b54af4](https://github.com/SAP/ui5-webcomponents/commit/9b54af42b6dccfee5781ef45f66d2003a71f7e5b))
+
+
+### BREAKING CHANGES
+
+* **ui5-illustrated-message:** The enum IllustrationMessageSize is renamed to IllustrationMessageDesign.
+If you have previously imported the enum:
+
+import IllustrationMessageSize from "@ui5/webcomponents-base/dist/types/IllustrationMessageSize.js";
+Now import IllustrationMessageDesign instead:
+
+import IllustrationMessageDesign from "@ui5/webcomponents-base/dist/types/IllustrationMessageDesign.js";
+* **ui5-view-settings-dialog:** Removed `show` and `close` methods.
+
+Before, the ui5-view-settings-dialog could be opened and closed by calling `show()` and `close()`:
+```ts
+const viewSettingsDialog = document.getElementById("exampleID");
+viewSettingsDialog.show();
+viewSettingsDialog.close();
+```
+Now, the dialog is opened and closed by setting the open property to true or false:
+```ts
+const viewSettingsDialog = document.getElementById("exampleID");
+viewSettingsDialog.open = true;
+viewSettingsDialog.open = false;
+```
+fixes: https://github.com/SAP/ui5-webcomponents/issues/9240
+* @property decorator must be adapted according to new type parameter
+
+
+
+
+
+# [2.0.0-rc.6](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.5...v2.0.0-rc.6) (2024-06-17)
+
+
+### Bug Fixes
+
+* **ui5-barcode-scanner-dialog:** properly fire 'close' event ([#9193](https://github.com/SAP/ui5-webcomponents/issues/9193)) ([db099f1](https://github.com/SAP/ui5-webcomponents/commit/db099f120353d86ccb04de554b483228bff73325)), closes [#9177](https://github.com/SAP/ui5-webcomponents/issues/9177)
+* **ui5-li-notification:** enhance accessibility ([#9192](https://github.com/SAP/ui5-webcomponents/issues/9192)) ([cc34cea](https://github.com/SAP/ui5-webcomponents/commit/cc34cea9d06babbcb44a1edd21e99becf637c64f)), closes [#9161](https://github.com/SAP/ui5-webcomponents/issues/9161)
+* **ui5-notification-list:** change host to display:block ([#9139](https://github.com/SAP/ui5-webcomponents/issues/9139)) ([efb4791](https://github.com/SAP/ui5-webcomponents/commit/efb4791e529860e2a996136719c5bbbb98d5603f))
+* **ui5-shellbar:** add tooltip for shellbar items ([#9143](https://github.com/SAP/ui5-webcomponents/issues/9143)) ([c39c18a](https://github.com/SAP/ui5-webcomponents/commit/c39c18a8d4f6b1b858f72680d830c40f189d7eab))
+* **ui5-side-navigation:** group name is announced one time by screen … ([#9207](https://github.com/SAP/ui5-webcomponents/issues/9207)) ([4f18dfd](https://github.com/SAP/ui5-webcomponents/commit/4f18dfdf844dee248744692913284304641e83cb))
+
+
+### Code Refactoring
+
+* **ui5-li, ui5-li-custom:** rename classes ([#9158](https://github.com/SAP/ui5-webcomponents/issues/9158)) ([8f5b679](https://github.com/SAP/ui5-webcomponents/commit/8f5b67901a429196252f52980c10a04f7d43fe0b))
+* **ui5-side-navigation-item:** remove wholeItemToggleable property ([#9164](https://github.com/SAP/ui5-webcomponents/issues/9164)) ([37b2181](https://github.com/SAP/ui5-webcomponents/commit/37b2181eb79dfccae8b39069bb068062e37a5a2b)), closes [#9057](https://github.com/SAP/ui5-webcomponents/issues/9057)
+* **ui5-tag:** wrap text by default ([#9126](https://github.com/SAP/ui5-webcomponents/issues/9126)) ([96704b8](https://github.com/SAP/ui5-webcomponents/commit/96704b8e893a777206c00efbc57282e56429d687))
+
+
+### BREAKING CHANGES
+
+* **ui5-side-navigation-item:** the `wholeItemToggleAble` poperty of `ui5-side-navigation-item` is now remomoved.
+The functionality of clicking the whole item to show/hide the sub items (if present) will
+be introduced soon with new property name and enhanced accessibility and keyboard handling.
+* **ui5-tag:** `wrapping-type` property default value has changed from `None` to `Normal`. Before:
+```html
+<ui5-tag>In Process</ui5-tag><!-- would truncate the text if there is not enough space -->
+```
+
+Now:
+```html
+<ui5-tag>In Process</ui5-tag><!-- would let the text wrap if there is not enough space -->
+```
+
+Related to https://github.com/SAP/ui5-webcomponents/issues/8461
+
+* refactor(ui5-tag): fix test texsts
+
+* refactor(ui5-tag): fix height of the tags to be the same
+
+No matter if the tag is with wrapping-type="None" or wrapping-type="Normal"
+the height when there is only one line of text should be the same.
+
+* refactor(ui5-tag): merge adjustments and code review comments
+
+* refactor(ui5-tag): fix height
+* **ui5-li, ui5-li-custom:** `StandardListItem` has been renamed to `ListItemStandard`, and `CustomListItem` has been renamed to `ListItemCustom`.
+If you previously imported the classes as follows:
+```ts
+import StandardListItem from "@ui5/webcomponents/StandardListItem.js";
+import CustomListItem from "@ui5/webcomponents/CustomListItem.js";
+```
+now you must change imports to:
+```ts
+import ListItemStandard from "@ui5/webcomponents/ListItemStandard.js";
+import ListItemCustom from "@ui5/webcomponents/ListItemCustom.js";
+```
+
+Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
+
+
+
+
+
 # [2.0.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.4...v2.0.0-rc.5) (2024-06-06)
 
 

package/README.md

@@ -1,7 +1,4 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
-
-
-# UI5 Web Components - Fiori
+# ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_water.png)UI5 Web Components - Fiori
 
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 

package/dist/BarcodeScannerDialog.d.ts

@@ -63,6 +63,7 @@ declare class BarcodeScannerDialog extends UI5Element {
     _getUserPermission(): Promise<MediaStream>;
     _getVideoElement(): HTMLVideoElement;
     _closeDialog(): void;
+    _fireCloseEvent(): void;
     _startReader(): void;
     _resetReader(): void;
     _decodeFromCamera(): void;

package/dist/BarcodeScannerDialog.js

@@ -59,6 +59,26 @@ const defaultMediaConstraints = {
 let BarcodeScannerDialog = BarcodeScannerDialog_1 = class BarcodeScannerDialog extends UI5Element {
     constructor() {
         super();
+        /**
+         * Indicates whether the dialog is open.
+         *
+         * @public
+         * @default false
+         * @since 1.24.0
+        */
+        this.open = false;
+        /**
+         * Indicates whether a loading indicator should be displayed in the dialog.
+         * @default false
+         * @private
+         */
+        this.loading = false;
+        /**
+         * Indicates whether the user has granted permissions to use the camera.
+         * @default false
+         * @private
+         */
+        this.permissionsGranted = false;
         this._codeReader = new BrowserMultiFormatReader();
     }
     static async onDefine() {
@@ -106,6 +126,9 @@ let BarcodeScannerDialog = BarcodeScannerDialog_1 = class BarcodeScannerDialog e
     }
     _closeDialog() {
         this.open = false;
+    }
+    _fireCloseEvent() {
+        this.open = false;
         this.fireEvent("close");
     }
     _startReader() {

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 * ### 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\ttemplate: BarcodeScannerDialogTemplate,\n\tstyles: [BarcodeScannerDialogCss],\n\tdependencies: [\n\t\tDialog,\n\t\tBusyIndicator,\n\t\tButton,\n\t],\n})\n\n/**\n * Fired when the user closes the component.\n * @public\n */\n@event(\"close\")\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 the dialog is open.\n\t *\n\t * @public\n\t * @default false\n\t * @since 1.24.0\n\t*/\n\t@property({ type: Boolean })\n\topen!: boolean;\n\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/**\n\t * Indicates whether the user has granted permissions to use the camera.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\tpermissionsGranted!: 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\tonAfterRendering() {\n\t\tif (this.open) {\n\t\t\tif (this.loading) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (!this._hasGetUserMedia()) {\n\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: \"getUserMedia() is not supported by your browser\" });\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (!this.permissionsGranted) {\n\t\t\t\tthis.loading = true;\n\t\t\t}\n\n\t\t\tthis._getUserPermission()\n\t\t\t\t.then(() => {\n\t\t\t\t\tthis.permissionsGranted = true;\n\t\t\t\t})\n\t\t\t\t.catch(err => {\n\t\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: err });\n\t\t\t\t\tthis.loading = false;\n\t\t\t\t});\n\t\t} else {\n\t\t\tthis.loading = false;\n\t\t}\n\t}\n\n\tget _open() {\n\t\treturn this.open && this.permissionsGranted;\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\t_getVideoElement() {\n\t\treturn this.shadowRoot!.querySelector<HTMLVideoElement>(\".ui5-barcode-scanner-dialog-video\")!;\n\t}\n\n\t_closeDialog() {\n\t\tthis.open = false;\n\t\tthis.fireEvent(\"close\");\n\t}\n\n\t_startReader() {\n\t\tthis._decodeFromCamera();\n\t}\n\n\t_resetReader() {\n\t\tconst videoElement = this._getVideoElement();\n\t\tvideoElement.pause();\n\t\tthis._codeReader.reset();\n\t}\n\n\t_decodeFromCamera() {\n\t\tconst videoElement = 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\ttemplate: BarcodeScannerDialogTemplate,\n\tstyles: [BarcodeScannerDialogCss],\n\tdependencies: [\n\t\tDialog,\n\t\tBusyIndicator,\n\t\tButton,\n\t],\n})\n\n/**\n * Fired when the user closes the component.\n * @public\n */\n@event(\"close\")\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 the dialog is open.\n\t *\n\t * @public\n\t * @default false\n\t * @since 1.24.0\n\t*/\n\t@property({ type: Boolean })\n\topen = false;\n\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 = false;\n\n\t/**\n\t * Indicates whether the user has granted permissions to use the camera.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\tpermissionsGranted = false;\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\tonAfterRendering() {\n\t\tif (this.open) {\n\t\t\tif (this.loading) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (!this._hasGetUserMedia()) {\n\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: \"getUserMedia() is not supported by your browser\" });\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (!this.permissionsGranted) {\n\t\t\t\tthis.loading = true;\n\t\t\t}\n\n\t\t\tthis._getUserPermission()\n\t\t\t\t.then(() => {\n\t\t\t\t\tthis.permissionsGranted = true;\n\t\t\t\t})\n\t\t\t\t.catch(err => {\n\t\t\t\t\tthis.fireEvent<BarcodeScannerDialogScanErrorEventDetail>(\"scan-error\", { message: err });\n\t\t\t\t\tthis.loading = false;\n\t\t\t\t});\n\t\t} else {\n\t\t\tthis.loading = false;\n\t\t}\n\t}\n\n\tget _open() {\n\t\treturn this.open && this.permissionsGranted;\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\t_getVideoElement() {\n\t\treturn this.shadowRoot!.querySelector<HTMLVideoElement>(\".ui5-barcode-scanner-dialog-video\")!;\n\t}\n\n\t_closeDialog() {\n\t\tthis.open = false;\n\t}\n\n\t_fireCloseEvent() {\n\t\tthis.open = false;\n\t\tthis.fireEvent(\"close\");\n\t}\n\n\t_startReader() {\n\t\tthis._decodeFromCamera();\n\t}\n\n\t_resetReader() {\n\t\tconst videoElement = this._getVideoElement();\n\t\tvideoElement.pause();\n\t\tthis._codeReader.reset();\n\t}\n\n\t_decodeFromCamera() {\n\t\tconst videoElement = 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/DynamicPage.d.ts

@@ -92,7 +92,7 @@ declare class DynamicPage extends UI5Element {
      *
      * @private
      */
-    mediaRange: string;
+    mediaRange?: string;
     /**
      * Defines the content of the Dynamic Page.
      *

package/dist/DynamicPage.js

@@ -93,8 +93,30 @@ const SCROLL_THRESHOLD = 10; // px
 let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
     constructor() {
         super();
+        /**
+         * Defines if the pin button is hidden.
+         *
+         * @default false
+         * @public
+         */
+        this.hidePinButton = false;
+        /**
+         * Defines if the header is pinned.
+         *
+         * @default false
+         * @public
+         */
+        this.headerPinned = false;
+        /**
+         * Defines if the footer is shown.
+         *
+         * @default false
+         * @public
+         */
+        this.showFooter = false;
         this.skipSnapOnScroll = false;
         this.showHeaderInStickArea = false;
+        this._headerSnapped = false;
         this._updateMediaRange = this.updateMediaRange.bind(this);
     }
     static async onDefine() {

package/dist/DynamicPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./generated/templates/DynamicPageTemplate.lit.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\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 *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: litRender,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n\tdependencies: [DynamicPageHeaderActions],\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\")\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\")\n\nclass DynamicPage extends UI5Element {\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton!: boolean;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned!: boolean;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter!: boolean;\n\n\t/**\n\t * Defines the current media query size.\n\t *\n\t * @private\n\t */\n\t@property()\n\tmediaRange!: string;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Array<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Array<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: HTMLElement[];\n\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped!: boolean;\n\n\t_updateMediaRange: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._updateMediaRange = this.updateMediaRange.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tDynamicPage.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._updateMediaRange);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._updateMediaRange);\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t}\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget scrollContainer(): HTMLElement | null {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-dynamic-page-scroll-container\");\n\t}\n\n\tget headerActions(): DynamicPageHeaderActions | null {\n\t\treturn this.shadowRoot!.querySelector<DynamicPageHeaderActions>(\"ui5-dynamic-page-header-actions\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget _accAttributesForHeaderActions() {\n\t\treturn {\n\t\t\tcontrols: `${this._id}-header`,\n\t\t};\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped !== this._headerSnapped) {\n\t\t\tthis._toggleHeader();\n\t\t}\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer!.scrollTop;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\t\t} else {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireEvent(\"title-toggle\");\n\t\t}\n\n\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t}\n\n\tasync onExpandClick() {\n\t\tthis._toggleHeader();\n\t\tthis.fireEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tthis.fireEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis._toggleHeader();\n\t\tthis.fireEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (this.scrollContainer!.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer!.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tasync onExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t\tawait renderFinished();\n\t}\n\n\tasync onExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t\tawait renderFinished();\n\t}\n\n\tupdateMediaRange() {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}
+{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./generated/templates/DynamicPageTemplate.lit.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\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 *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: litRender,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n\tdependencies: [DynamicPageHeaderActions],\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\")\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\")\n\nclass DynamicPage extends UI5Element {\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned = false;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter = false;\n\n\t/**\n\t * Defines the current media query size.\n\t *\n\t * @private\n\t */\n\t@property()\n\tmediaRange?: string;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Array<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Array<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: HTMLElement[];\n\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t_updateMediaRange: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._updateMediaRange = this.updateMediaRange.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tDynamicPage.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._updateMediaRange);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._updateMediaRange);\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t}\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget scrollContainer(): HTMLElement | null {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-dynamic-page-scroll-container\");\n\t}\n\n\tget headerActions(): DynamicPageHeaderActions | null {\n\t\treturn this.shadowRoot!.querySelector<DynamicPageHeaderActions>(\"ui5-dynamic-page-header-actions\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget _accAttributesForHeaderActions() {\n\t\treturn {\n\t\t\tcontrols: `${this._id}-header`,\n\t\t};\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped !== this._headerSnapped) {\n\t\t\tthis._toggleHeader();\n\t\t}\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer!.scrollTop;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\t\t} else {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireEvent(\"title-toggle\");\n\t\t}\n\n\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t}\n\n\tasync onExpandClick() {\n\t\tthis._toggleHeader();\n\t\tthis.fireEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tthis.fireEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis._toggleHeader();\n\t\tthis.fireEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (this.scrollContainer!.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer!.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tasync onExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t\tawait renderFinished();\n\t}\n\n\tasync onExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t\tawait renderFinished();\n\t}\n\n\tupdateMediaRange() {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}

package/dist/DynamicPageHeaderActions.d.ts

@@ -51,7 +51,7 @@ declare class DynamicPageHeaderActions extends UI5Element {
      * @default {}
      */
     accessibilityAttributes: {
-        controls: string;
+        controls?: string;
     };
     static i18nBundle: I18nBundle;
     static onDefine(): Promise<void>;

package/dist/DynamicPageHeaderActions.js

@@ -41,6 +41,37 @@ import { DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER, DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEA
  * @private
  */
 let DynamicPageHeaderActions = DynamicPageHeaderActions_1 = class DynamicPageHeaderActions extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the header is pinned.
+         *
+         * @protected
+         * @default false
+         */
+        this.pinned = false;
+        /**
+         * Defines whether the pin button is hidden.
+         *
+         * @protected
+         * @default false
+         */
+        this.hidePinButton = false;
+        /**
+         * Defines whether the header is snapped.
+         *
+         * @protected
+         * @default false
+         */
+        this.snapped = false;
+        /**
+         * Contains attributes to be added to HTML to gain accessibility.
+         *
+         * @protected
+         * @default {}
+         */
+        this.accessibilityAttributes = {};
+    }
     static async onDefine() {
         DynamicPageHeaderActions_1.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
     }

package/dist/DynamicPageHeaderActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPageHeaderActions.js","sourceRoot":"","sources":["../src/DynamicPageHeaderActions.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 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 Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport { isLegacyThemeFamily } from \"@ui5/webcomponents-base/dist/config/Theme.js\";\n\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-up.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-off.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-on.js\";\n\n// Template\nimport DynamicPageHeaderActionsTemplate from \"./generated/templates/DynamicPageHeaderActionsTemplate.lit.js\";\n\n// Styles\nimport DynamicPageHeaderActionsCss from \"./generated/themes/DynamicPageHeaderActions.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n/**\n * @class\n *\n * ### Overview\n *\n * The `DynamicPageHeaderActions` component is part of the `DynamicPage`\n * family and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n *\n * The \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\n * The expand/collapse action is used to switch between the two states of `DynamicPageHeader`.\n *\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header-actions\",\n\trenderer: litRender,\n\tstyles: DynamicPageHeaderActionsCss,\n\ttemplate: DynamicPageHeaderActionsTemplate,\n\tdependencies: [Button, ToggleButton],\n})\n\n/**\n * Event that is being fired by clicking on the expand button.\n *\n * @protected\n */\n@event(\"expand-button-click\")\n\n/**\n * Event that is being fired by clicking on the pin button.\n *\n * @protected\n */\n@event(\"pin-button-click\")\n\n/**\n * Event that is being fired by hovering over the expand button.\n *\n * @protected\n */\n@event(\"expand-button-hover\")\n\nclass DynamicPageHeaderActions extends UI5Element {\n\t/**\n\t * Defines whether the header is pinned.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tpinned!: boolean;\n\n\t/**\n\t * Defines whether the pin button is hidden.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\thidePinButton!: boolean;\n\n\t/**\n\t * Defines whether the header is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped!: boolean;\n\n\t/**\n\t * Contains attributes to be added to HTML to gain accessibility.\n\t *\n\t * @protected\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes!: { controls: string };\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tDynamicPageHeaderActions.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tget arrowButtonIcon() {\n\t\treturn this.snapped ? \"slim-arrow-down\" : \"slim-arrow-up\";\n\t}\n\n\tget pinButtonIcon() {\n\t\tif (isLegacyThemeFamily()) {\n\t\t\treturn \"pushpin-off\";\n\t\t}\n\t\treturn this.pinned ? \"pushpin-on\" : \"pushpin-off\";\n\t}\n\n\tget expandButton(): Button | null {\n\t\treturn this.shadowRoot!.querySelector<Button>(\".ui5-dynamic-page-header-action-expand\");\n\t}\n\n\tget pinButton(): ToggleButton | null {\n\t\treturn this.shadowRoot!.querySelector<ToggleButton>(\".ui5-dynamic-page-header-action-pin\");\n\t}\n\n\tget pinLabel() {\n\t\treturn DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER);\n\t}\n\n\tget expandLabel() {\n\t\treturn this.snapped\n\t\t\t? DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER)\n\t\t\t: DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER);\n\t}\n\n\tfocusExpandButton() {\n\t\tthis.expandButton?.focus();\n\t}\n\n\tfocusPinButton() {\n\t\tthis.pinButton?.focus();\n\t}\n\n\tonExpandClick() {\n\t\tthis.fireEvent(\"expand-button-click\");\n\t}\n\n\tonPinClick() {\n\t\tthis.fireEvent(\"pin-button-click\");\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.fireEvent(\"expand-button-hover-in\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.fireEvent(\"expand-button-hover-out\");\n\t}\n\n\tget showPinButton() {\n\t\treturn !this.hidePinButton && !this.snapped;\n\t}\n}\n\nDynamicPageHeaderActions.define();\n\nexport default DynamicPageHeaderActions;\n"]}
+{"version":3,"file":"DynamicPageHeaderActions.js","sourceRoot":"","sources":["../src/DynamicPageHeaderActions.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 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 Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport { isLegacyThemeFamily } from \"@ui5/webcomponents-base/dist/config/Theme.js\";\n\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-up.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-off.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-on.js\";\n\n// Template\nimport DynamicPageHeaderActionsTemplate from \"./generated/templates/DynamicPageHeaderActionsTemplate.lit.js\";\n\n// Styles\nimport DynamicPageHeaderActionsCss from \"./generated/themes/DynamicPageHeaderActions.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n/**\n * @class\n *\n * ### Overview\n *\n * The `DynamicPageHeaderActions` component is part of the `DynamicPage`\n * family and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n *\n * The \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\n * The expand/collapse action is used to switch between the two states of `DynamicPageHeader`.\n *\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header-actions\",\n\trenderer: litRender,\n\tstyles: DynamicPageHeaderActionsCss,\n\ttemplate: DynamicPageHeaderActionsTemplate,\n\tdependencies: [Button, ToggleButton],\n})\n\n/**\n * Event that is being fired by clicking on the expand button.\n *\n * @protected\n */\n@event(\"expand-button-click\")\n\n/**\n * Event that is being fired by clicking on the pin button.\n *\n * @protected\n */\n@event(\"pin-button-click\")\n\n/**\n * Event that is being fired by hovering over the expand button.\n *\n * @protected\n */\n@event(\"expand-button-hover\")\n\nclass DynamicPageHeaderActions extends UI5Element {\n\t/**\n\t * Defines whether the header is pinned.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tpinned = false;\n\n\t/**\n\t * Defines whether the pin button is hidden.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines whether the header is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped = false;\n\n\t/**\n\t * Contains attributes to be added to HTML to gain accessibility.\n\t *\n\t * @protected\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: { controls?: string } = {};\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tDynamicPageHeaderActions.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tget arrowButtonIcon() {\n\t\treturn this.snapped ? \"slim-arrow-down\" : \"slim-arrow-up\";\n\t}\n\n\tget pinButtonIcon() {\n\t\tif (isLegacyThemeFamily()) {\n\t\t\treturn \"pushpin-off\";\n\t\t}\n\t\treturn this.pinned ? \"pushpin-on\" : \"pushpin-off\";\n\t}\n\n\tget expandButton(): Button | null {\n\t\treturn this.shadowRoot!.querySelector<Button>(\".ui5-dynamic-page-header-action-expand\");\n\t}\n\n\tget pinButton(): ToggleButton | null {\n\t\treturn this.shadowRoot!.querySelector<ToggleButton>(\".ui5-dynamic-page-header-action-pin\");\n\t}\n\n\tget pinLabel() {\n\t\treturn DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER);\n\t}\n\n\tget expandLabel() {\n\t\treturn this.snapped\n\t\t\t? DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER)\n\t\t\t: DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER);\n\t}\n\n\tfocusExpandButton() {\n\t\tthis.expandButton?.focus();\n\t}\n\n\tfocusPinButton() {\n\t\tthis.pinButton?.focus();\n\t}\n\n\tonExpandClick() {\n\t\tthis.fireEvent(\"expand-button-click\");\n\t}\n\n\tonPinClick() {\n\t\tthis.fireEvent(\"pin-button-click\");\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.fireEvent(\"expand-button-hover-in\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.fireEvent(\"expand-button-hover-out\");\n\t}\n\n\tget showPinButton() {\n\t\treturn !this.hidePinButton && !this.snapped;\n\t}\n}\n\nDynamicPageHeaderActions.define();\n\nexport default DynamicPageHeaderActions;\n"]}

package/dist/DynamicPageTitle.js

@@ -10,7 +10,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -58,6 +57,28 @@ import { DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER, } from "./generated/i18n/i18n-de
 let DynamicPageTitle = DynamicPageTitle_1 = class DynamicPageTitle extends UI5Element {
     constructor() {
         super();
+        /**
+         * Defines if the title is snapped.
+         *
+         * @protected
+         * @default false
+         */
+        this.snapped = false;
+        /**
+         * Defines if the mobileNavigationActions are shown.
+         *
+         * @private
+         */
+        this.mobileNavigationActions = false;
+        /**
+         * Indicates if the elements is on focus
+         * @private
+         */
+        this.focused = false;
+        /**
+         * @private
+         */
+        this.interactive = false;
         this._handleResize = this.handleResize.bind(this);
     }
     static async onDefine() {
@@ -154,10 +175,10 @@ __decorate([
     property({ type: Boolean })
 ], DynamicPageTitle.prototype, "focused", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], DynamicPageTitle.prototype, "minContentWidth", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], DynamicPageTitle.prototype, "minActionsWidth", void 0);
 __decorate([
     slot({ type: HTMLElement })

package/dist/DynamicPageTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPageTitle.js","sourceRoot":"","sources":["../src/DynamicPageTitle.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.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 ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport type { ToolbarMinWidthChangeEventDetail } from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport ToolbarItemOverflowBehavior from \"@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\n// Template\nimport DynamicPageTitleTemplate from \"./generated/templates/DynamicPageTitleTemplate.lit.js\";\n\n// Styles\nimport DynamicPageTitleCss from \"./generated/themes/DynamicPageTitle.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * Title of the `DynamicPage`.\n *\n * The `DynamicPageTitle` component is part of the `DynamicPage`\n * family and is used to serve as title of the `DynamicPage`.\n *\n * ### Usage\n *\n * The `DynamicPageTitle` can hold any component and displays the most important\n * information regarding the object that will always remain visible while scrolling.\n *\n * **Note:** The `actions` slot accepts any UI5 web component, but it's\n * recommended to use `ui5-toolbar`.\n *\n * The user can switch between the expanded/collapsed states of the\n * `DynamicPage` by clicking on the `DynamicPageTitle`\n * or by using the expand/collapse visual indicators, positioned at the bottom of the\n * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n *\n * ### Responsive Behavior\n *\n * The responsive behavior of the `DynamicPageTitle` depends on the behavior of the\n * content that is displayed.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-title\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: DynamicPageTitleCss,\n\ttemplate: DynamicPageTitleTemplate,\n})\n\n/**\n * Event is fired when the title is toggled.\n * @private\n */\n@event(\"_toggle-title\")\n\nclass DynamicPageTitle extends UI5Element {\n\t/**\n\t * Defines if the title is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped!: boolean;\n\n\t/**\n\t * Defines if the mobileNavigationActions are shown.\n\t *\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tmobileNavigationActions!: boolean;\n\n\t/**\n\t * Indicates if the elements is on focus\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/**\n\t * Defines the minimum width of the content area.\n\t * @private\n\t */\n\t@property({ validator: Integer })\n\tminContentWidth?: number;\n\n\t/**\n\t * Defines the minimum width of the actions area.\n\t * @private\n\t */\n\t@property({ validator: Integer })\n\tminActionsWidth?: number;\n\n\t/**\n\t * Defines the content of the Heading of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\theading!: HTMLElement[];\n\n\t/**\n\t * Defines the heading that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedHeading!: HTMLElement[];\n\n\t/**\n\t * Defines the bar with actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tactionsBar!: HTMLElement[];\n\n\t/**\n\t * Defines the bar with navigation actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tnavigationBar!: Array<Toolbar>;\n\n\t/**\n\t * Defines the content of the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is not snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedSubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the breadcrumbs inside Dynamic Page Title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tbreadcrumbs!: HTMLElement[];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tinteractive!: boolean;\n\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResize: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResize = this.handleResize.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tDynamicPageTitle.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResize);\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResize);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.prepareLayoutActions();\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\t\"min-width\": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,\n\t\t\t},\n\t\t\tactions: {\n\t\t\t\t\"min-width\": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\tget hasContent() {\n\t\treturn !!this.content.length;\n\t}\n\n\tget headingSlotName() {\n\t\tif (!this.snapped) {\n\t\t\treturn \"heading\";\n\t\t}\n\t\treturn \"snappedHeading\";\n\t}\n\n\tget subheadingSlotName() {\n\t\treturn !this.snapped ? \"subheading\" : \"snappedSubheading\";\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.interactive ? \"0\" : undefined;\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this.snapped;\n\t}\n\n\tget _ariaDescribedbyText() {\n\t\treturn DynamicPageTitle.i18nBundle.getText(DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER);\n\t}\n\n\tget _ariaLabelledBy() {\n\t\tconst hasAnyHeading = this[this.headingSlotName].length;\n\t\tif (hasAnyHeading) {\n\t\t\treturn `${this._id}-heading`;\n\t\t}\n\t}\n\n\tprepareLayoutActions() {\n\t\t// all navigation/layout actions should have the NeverOverflow behavior\n\t\tconst navigationBar = this.querySelector<Toolbar>(\"[ui5-toolbar][slot='navigationBar']\");\n\t\tif (!navigationBar) {\n\t\t\treturn;\n\t\t}\n\t\tnavigationBar.items.forEach(action => {\n\t\t\taction.overflowPriority = ToolbarItemOverflowBehavior.NeverOverflow;\n\t\t});\n\t}\n\n\thandleResize() {\n\t\tthis.mobileNavigationActions = this.offsetWidth < 1280;\n\t}\n\n\tonMinContentWidthChange(e: CustomEvent<ToolbarMinWidthChangeEventDetail>) {\n\t\tconst slotName = (<HTMLElement>e.target)?.assignedSlot?.name;\n\t\tif (!slotName || slotName === \"content\") {\n\t\t\tthis.minContentWidth = e.detail.minWidth;\n\t\t} else if (slotName === \"actionsBar\") {\n\t\t\tthis.minActionsWidth = e.detail.minWidth;\n\t\t}\n\t}\n\n\tonTitleClick() {\n\t\tthis.fireEvent(\"_toggle-title\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e) || isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis.fireEvent(\"_toggle-title\");\n\t\t}\n\t}\n}\n\nDynamicPageTitle.define();\n\nexport default DynamicPageTitle;\n"]}
+{"version":3,"file":"DynamicPageTitle.js","sourceRoot":"","sources":["../src/DynamicPageTitle.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 event from \"@ui5/webcomponents-base/dist/decorators/event.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 ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport type { ToolbarMinWidthChangeEventDetail } from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport ToolbarItemOverflowBehavior from \"@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\n// Template\nimport DynamicPageTitleTemplate from \"./generated/templates/DynamicPageTitleTemplate.lit.js\";\n\n// Styles\nimport DynamicPageTitleCss from \"./generated/themes/DynamicPageTitle.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * Title of the `DynamicPage`.\n *\n * The `DynamicPageTitle` component is part of the `DynamicPage`\n * family and is used to serve as title of the `DynamicPage`.\n *\n * ### Usage\n *\n * The `DynamicPageTitle` can hold any component and displays the most important\n * information regarding the object that will always remain visible while scrolling.\n *\n * **Note:** The `actions` slot accepts any UI5 web component, but it's\n * recommended to use `ui5-toolbar`.\n *\n * The user can switch between the expanded/collapsed states of the\n * `DynamicPage` by clicking on the `DynamicPageTitle`\n * or by using the expand/collapse visual indicators, positioned at the bottom of the\n * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n *\n * ### Responsive Behavior\n *\n * The responsive behavior of the `DynamicPageTitle` depends on the behavior of the\n * content that is displayed.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-title\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: DynamicPageTitleCss,\n\ttemplate: DynamicPageTitleTemplate,\n})\n\n/**\n * Event is fired when the title is toggled.\n * @private\n */\n@event(\"_toggle-title\")\n\nclass DynamicPageTitle extends UI5Element {\n\t/**\n\t * Defines if the title is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped = false;\n\n\t/**\n\t * Defines if the mobileNavigationActions are shown.\n\t *\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tmobileNavigationActions = false;\n\n\t/**\n\t * Indicates if the elements is on focus\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t/**\n\t * Defines the minimum width of the content area.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tminContentWidth?: number;\n\n\t/**\n\t * Defines the minimum width of the actions area.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tminActionsWidth?: number;\n\n\t/**\n\t * Defines the content of the Heading of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\theading!: HTMLElement[];\n\n\t/**\n\t * Defines the heading that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedHeading!: HTMLElement[];\n\n\t/**\n\t * Defines the bar with actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tactionsBar!: HTMLElement[];\n\n\t/**\n\t * Defines the bar with navigation actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tnavigationBar!: Array<Toolbar>;\n\n\t/**\n\t * Defines the content of the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is not snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedSubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the breadcrumbs inside Dynamic Page Title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tbreadcrumbs!: HTMLElement[];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResize: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResize = this.handleResize.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tDynamicPageTitle.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResize);\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResize);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.prepareLayoutActions();\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\t\"min-width\": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,\n\t\t\t},\n\t\t\tactions: {\n\t\t\t\t\"min-width\": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\tget hasContent() {\n\t\treturn !!this.content.length;\n\t}\n\n\tget headingSlotName() {\n\t\tif (!this.snapped) {\n\t\t\treturn \"heading\";\n\t\t}\n\t\treturn \"snappedHeading\";\n\t}\n\n\tget subheadingSlotName() {\n\t\treturn !this.snapped ? \"subheading\" : \"snappedSubheading\";\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.interactive ? \"0\" : undefined;\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this.snapped;\n\t}\n\n\tget _ariaDescribedbyText() {\n\t\treturn DynamicPageTitle.i18nBundle.getText(DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER);\n\t}\n\n\tget _ariaLabelledBy() {\n\t\tconst hasAnyHeading = this[this.headingSlotName].length;\n\t\tif (hasAnyHeading) {\n\t\t\treturn `${this._id}-heading`;\n\t\t}\n\t}\n\n\tprepareLayoutActions() {\n\t\t// all navigation/layout actions should have the NeverOverflow behavior\n\t\tconst navigationBar = this.querySelector<Toolbar>(\"[ui5-toolbar][slot='navigationBar']\");\n\t\tif (!navigationBar) {\n\t\t\treturn;\n\t\t}\n\t\tnavigationBar.items.forEach(action => {\n\t\t\taction.overflowPriority = ToolbarItemOverflowBehavior.NeverOverflow;\n\t\t});\n\t}\n\n\thandleResize() {\n\t\tthis.mobileNavigationActions = this.offsetWidth < 1280;\n\t}\n\n\tonMinContentWidthChange(e: CustomEvent<ToolbarMinWidthChangeEventDetail>) {\n\t\tconst slotName = (<HTMLElement>e.target)?.assignedSlot?.name;\n\t\tif (!slotName || slotName === \"content\") {\n\t\t\tthis.minContentWidth = e.detail.minWidth;\n\t\t} else if (slotName === \"actionsBar\") {\n\t\t\tthis.minActionsWidth = e.detail.minWidth;\n\t\t}\n\t}\n\n\tonTitleClick() {\n\t\tthis.fireEvent(\"_toggle-title\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e) || isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis.fireEvent(\"_toggle-title\");\n\t\t}\n\t}\n}\n\nDynamicPageTitle.define();\n\nexport default DynamicPageTitle;\n"]}

package/dist/DynamicSideContent.d.ts

@@ -6,7 +6,7 @@ import SideContentVisibility from "./types/SideContentVisibility.js";
 import SideContentFallDown from "./types/SideContentFallDown.js";
 type DynamicSideContentLayoutChangeEventDetail = {
     currentBreakpoint: string;
-    previousBreakpoint: string;
+    previousBreakpoint: string | undefined;
     mainContentVisible: boolean;
     sideContentVisible: boolean;
 };
@@ -145,7 +145,7 @@ declare class DynamicSideContent extends UI5Element {
     /**
      * @private
      */
-    _currentBreakpoint: string;
+    _currentBreakpoint?: string;
     /**
      * Defines the side content.
      * @public