diff --git a/packages/base/package.json b/packages/base/package.json index 4811b4b0cde9..d90b1a1e1c26 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -44,9 +44,8 @@ "lit-html": "^2.0.1" }, "devDependencies": { - "@buxlabs/amd-to-es6": "0.16.1", - "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.22.0-rc.1", + "@openui5/sap.ui.core": "1.120.3", + "@ui5/webcomponents-tools": "1.22.0", "chromedriver": "120.0.0", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 6dfaec46ac09..f5d2eb864aee 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -53,7 +53,7 @@ "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.22.0-rc.1", + "@ui5/webcomponents-tools": "1.22.0", "chromedriver": "120.0.0" } } diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 02190d15ef66..f3b383dfa5bb 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -11,7 +11,8 @@ import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js"; import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import type { Timeout } from "@ui5/webcomponents-base/dist/types.js"; + +import debounce from "@ui5/webcomponents-base/dist/util/debounce.js"; // Template import DynamicPageTemplate from "./generated/templates/DynamicPageTemplate.lit.js"; @@ -29,7 +30,7 @@ import { DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER, } from "./generated/i18n/i18n-defaults.js"; -const SCROLL_DEBOUNCE_RATE = 0; // ms +const SCROLL_DEBOUNCE_RATE = 25; // ms /** * @class @@ -186,9 +187,7 @@ class DynamicPage extends UI5Element { @slot({ type: HTMLElement }) footer!: HTMLElement[]; - isExpanding = false; - iPreviousScrollAmount = 0; - _debounceInterval?: Timeout | null; + skipSnapOnScroll = false; showHeaderInStickArea = false; _updateMediaRange: ResizeObserverCallback; @@ -275,36 +274,29 @@ class DynamicPage extends UI5Element { } snapOnScroll() { - this._debounce(() => { - if (!this.dynamicPageTitle || !this.dynamicPageHeader) { - return; - } - - const scrollTop = this.scrollContainer!.scrollTop; - - if (this.iPreviousScrollAmount === scrollTop) { - return; - } - - this.iPreviousScrollAmount = scrollTop; - - if (this.headerPinned) { - return; - } - - if (this.isExpanding) { - this.isExpanding = false; - return; - } - - if (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) { - this.headerSnapped = true; - this.showHeaderInStickArea = false; - } else { - this.headerSnapped = false; - } - this.dynamicPageTitle.snapped = this.headerSnapped; - }, SCROLL_DEBOUNCE_RATE); + debounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE); + } + + snapTitleByScroll() { + if (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) { + return; + } + + const scrollTop = this.scrollContainer!.scrollTop; + + if (this.skipSnapOnScroll) { + this.skipSnapOnScroll = false; + return; + } + + if (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) { + this.headerSnapped = true; + this.showHeaderInStickArea = false; + } else { + this.headerSnapped = false; + } + + this.dynamicPageTitle.snapped = this.headerSnapped; } async onExpandClick() { @@ -330,20 +322,10 @@ class DynamicPage extends UI5Element { this.showHeaderInStickArea = !this.showHeaderInStickArea; this.headerSnapped = !this.headerSnapped; - this.isExpanding = true; + this.skipSnapOnScroll = true; this.headerPinned = false; } - /// - - _debounce(fn: () => void, delay: number) { - clearTimeout(this._debounceInterval!); - this._debounceInterval = setTimeout(() => { - this._debounceInterval = null; - fn(); - }, delay); - } - updateMediaRange() { this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth); } diff --git a/packages/fiori/src/DynamicPageHeaderActions.ts b/packages/fiori/src/DynamicPageHeaderActions.ts index 90604295925c..863477635687 100644 --- a/packages/fiori/src/DynamicPageHeaderActions.ts +++ b/packages/fiori/src/DynamicPageHeaderActions.ts @@ -88,7 +88,7 @@ class DynamicPageHeaderActions extends UI5Element { * @default {} */ @property({ type: Object }) - accessibilityAttributes!: {controls: string}; + accessibilityAttributes!: { controls: string }; get classes() { return { diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs index b6ed4371d77e..acf3d0999141 100644 --- a/packages/fiori/src/DynamicPageTitle.hbs +++ b/packages/fiori/src/DynamicPageTitle.hbs @@ -9,14 +9,10 @@ role="button" aria-expanded="{{_headerExpanded}}" aria-labelledby="{{_ariaLabelledBy}}" - aria-describedby="toggle-description"> + aria-describedby="{{_id}}-toggle-description">
- {{#if hasBreadcrumb}} -
- -
- {{/if}} + {{#if mobileNavigationActions}} @@ -24,7 +20,7 @@
+ @ui5-_min-content-width-change={{onMinContentWidthChange}}>
@@ -47,5 +43,5 @@
- {{_ariaDescribedbyText}} + {{_ariaDescribedbyText}} \ No newline at end of file diff --git a/packages/fiori/src/DynamicPageTitle.ts b/packages/fiori/src/DynamicPageTitle.ts index 50cf719c1e6c..2f9b2786aea4 100644 --- a/packages/fiori/src/DynamicPageTitle.ts +++ b/packages/fiori/src/DynamicPageTitle.ts @@ -10,6 +10,7 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js"; import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js"; import type { ToolbarMinWidthChangeEventDetail } from "@ui5/webcomponents/dist/Toolbar.js"; +import ToolbarItemOverflowBehavior from "@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js"; // Template import DynamicPageTitleTemplate from "./generated/templates/DynamicPageTitleTemplate.lit.js"; @@ -174,10 +175,6 @@ class DynamicPageTitle extends UI5Element { this._handleResize = this.handleResize.bind(this); } - get hasBreadcrumb() { - return !!this.breadcrumbs.length; - } - get hasContent() { return !!this.content.length; } @@ -226,9 +223,6 @@ class DynamicPageTitle extends UI5Element { topArea: { "ui5-dynamic-page-title--top-area": true, }, - breadcrumbs: { - "ui5-dynamic-page-title--breadcrumbs": true, - }, wrapper: { "ui5-dynamic-page-title--wrapper": true, }, @@ -277,7 +271,7 @@ class DynamicPageTitle extends UI5Element { return; } navigationActions.items.forEach(action => { - action.overflowPriority = "NeverOverflow"; + action.overflowPriority = ToolbarItemOverflowBehavior.NeverOverflow; }); } diff --git a/packages/fiori/src/themes/DynamicPageTitle.css b/packages/fiori/src/themes/DynamicPageTitle.css index 2f3b656a1b6d..d5bfb76dbc79 100644 --- a/packages/fiori/src/themes/DynamicPageTitle.css +++ b/packages/fiori/src/themes/DynamicPageTitle.css @@ -129,10 +129,6 @@ align-items: center; } -.ui5-dynamic-page-title--breadcrumbs { - width: 100%; -} - /* focus */ :host([focused]) { /* separate change adds proper parameters */ diff --git a/packages/localization/package.json b/packages/localization/package.json index d0069f9c694a..842df10f1005 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -29,8 +29,12 @@ "prepublishOnly": "tsc -b" }, "devDependencies": { - "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.22.0-rc.1", + "@babel/core": "^7.23.7", + "@babel/generator": "^7.23.6", + "@babel/parser": "^7.23.6", + "@openui5/sap.ui.core": "1.120.3", + "@ui5/webcomponents-tools": "1.22.0", + "babel-plugin-amd-to-esm": "^2.0.3", "chromedriver": "120.0.0", "mkdirp": "^1.0.4", "resolve": "^1.20.0" diff --git a/packages/main/package.json b/packages/main/package.json index f8f5bea6762e..06a0bb118060 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -56,7 +56,7 @@ "@ui5/webcomponents-theming": "1.22.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.22.0-rc.1", + "@ui5/webcomponents-tools": "1.22.0", "chromedriver": "120.0.0" } }