@ui5/webcomponents-fiori 2.23.0 → 2.24.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/DynamicPage.d.ts +59 -0
- package/dist/DynamicPage.js +39 -1
- package/dist/DynamicPage.js.map +1 -1
- package/dist/DynamicPageHeader.d.ts +8 -0
- package/dist/DynamicPageHeader.js +6 -0
- package/dist/DynamicPageHeader.js.map +1 -1
- package/dist/DynamicPageTemplate.js +3 -3
- package/dist/DynamicPageTemplate.js.map +1 -1
- package/dist/Timeline.d.ts +52 -1
- package/dist/Timeline.js +66 -0
- package/dist/Timeline.js.map +1 -1
- package/dist/TimelineTemplate.js +4 -1
- package/dist/TimelineTemplate.js.map +1 -1
- package/dist/css/themes/Timeline.css +1 -1
- package/dist/custom-elements-internal.json +90 -1
- package/dist/custom-elements.json +77 -1
- package/dist/generated/themes/Timeline.css.d.ts +1 -1
- package/dist/generated/themes/Timeline.css.js +1 -1
- package/dist/generated/themes/Timeline.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +18 -2
- package/dist/web-types.json +50 -4
- package/package.json +7 -7
- package/src/DynamicPageTemplate.tsx +7 -5
- package/src/TimelineTemplate.tsx +15 -1
- package/src/themes/Timeline.css +36 -7
package/dist/DynamicPage.d.ts
CHANGED
|
@@ -1,9 +1,32 @@
|
|
|
1
1
|
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
2
|
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
3
|
+
import type { AriaLandmarkRole } from "@ui5/webcomponents-base";
|
|
3
4
|
import DynamicPageHeader from "./DynamicPageHeader.js";
|
|
4
5
|
import DynamicPageTitle from "./DynamicPageTitle.js";
|
|
5
6
|
import type DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
|
|
6
7
|
import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
8
|
+
type DynamicPageHeaderRoles = Extract<AriaLandmarkRole, "none" | "banner" | "region">;
|
|
9
|
+
type DynamicPageContentRoles = Extract<AriaLandmarkRole, "none" | "main" | "region" | "form">;
|
|
10
|
+
type DynamicPageFooterRoles = Extract<AriaLandmarkRole, "none" | "contentinfo" | "region">;
|
|
11
|
+
type DynamicPageRootRoles = Extract<AriaLandmarkRole, "none" | "main" | "region">;
|
|
12
|
+
type DynamicPageAccessibilityAttributes = {
|
|
13
|
+
root?: {
|
|
14
|
+
role?: DynamicPageRootRoles;
|
|
15
|
+
name?: string;
|
|
16
|
+
};
|
|
17
|
+
header?: {
|
|
18
|
+
role?: DynamicPageHeaderRoles;
|
|
19
|
+
name?: string;
|
|
20
|
+
};
|
|
21
|
+
content?: {
|
|
22
|
+
role?: DynamicPageContentRoles;
|
|
23
|
+
name?: string;
|
|
24
|
+
};
|
|
25
|
+
footer?: {
|
|
26
|
+
role?: DynamicPageFooterRoles;
|
|
27
|
+
name?: string;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
7
30
|
/**
|
|
8
31
|
* @class
|
|
9
32
|
*
|
|
@@ -115,6 +138,34 @@ declare class DynamicPage extends UI5Element {
|
|
|
115
138
|
* @public
|
|
116
139
|
*/
|
|
117
140
|
footerArea: Slot<HTMLElement>;
|
|
141
|
+
/**
|
|
142
|
+
* Defines additional accessibility attributes on different areas of the component.
|
|
143
|
+
*
|
|
144
|
+
* The accessibilityAttributes object has the following fields,
|
|
145
|
+
* where each field is an object supporting one or more accessibility attributes:
|
|
146
|
+
*
|
|
147
|
+
* - **root**: `root.role` and `root.name`.
|
|
148
|
+
* - **header**: `header.role` and `header.name`.
|
|
149
|
+
* - **content**: `content.role` and `content.name`.
|
|
150
|
+
* - **footer**: `footer.role` and `footer.name`.
|
|
151
|
+
*
|
|
152
|
+
* The accessibility attributes support the following values:
|
|
153
|
+
*
|
|
154
|
+
* - **role**: Defines the accessible ARIA landmark role of the area.
|
|
155
|
+
* Accepts the following values per section:
|
|
156
|
+
* `root` — `none`, `main`, `region`;
|
|
157
|
+
* `header` — `none`, `banner`, `region`;
|
|
158
|
+
* `content` — `none`, `main`, `region`, `form`;
|
|
159
|
+
* `footer` — `none`, `contentinfo`, `region`.
|
|
160
|
+
*
|
|
161
|
+
* - **name**: Defines the accessible ARIA name of the area.
|
|
162
|
+
* Accepts any string.
|
|
163
|
+
*
|
|
164
|
+
* @default {}
|
|
165
|
+
* @public
|
|
166
|
+
* @since 2.24.0
|
|
167
|
+
*/
|
|
168
|
+
accessibilityAttributes: DynamicPageAccessibilityAttributes;
|
|
118
169
|
static i18nBundle: I18nBundle;
|
|
119
170
|
skipSnapOnScroll: boolean;
|
|
120
171
|
showHeaderInStickArea: boolean;
|
|
@@ -140,6 +191,13 @@ declare class DynamicPage extends UI5Element {
|
|
|
140
191
|
get headerSnapped(): boolean;
|
|
141
192
|
get hasSnappedTitleOnMobile(): number | false | undefined;
|
|
142
193
|
get headerAriaLabel(): string | undefined;
|
|
194
|
+
get _headerRole(): DynamicPageHeaderRoles | undefined;
|
|
195
|
+
get _rootRole(): DynamicPageRootRoles | undefined;
|
|
196
|
+
get _rootAriaLabel(): string | undefined;
|
|
197
|
+
get _contentRole(): DynamicPageContentRoles | undefined;
|
|
198
|
+
get _contentAriaLabel(): string | undefined;
|
|
199
|
+
get _footerRole(): DynamicPageFooterRoles | undefined;
|
|
200
|
+
get _footerAriaLabel(): string | undefined;
|
|
143
201
|
get _hidePinButton(): boolean;
|
|
144
202
|
/**
|
|
145
203
|
* Defines if the header is snapped.
|
|
@@ -164,3 +222,4 @@ declare class DynamicPage extends UI5Element {
|
|
|
164
222
|
}): void;
|
|
165
223
|
}
|
|
166
224
|
export default DynamicPage;
|
|
225
|
+
export type { DynamicPageAccessibilityAttributes };
|
package/dist/DynamicPage.js
CHANGED
|
@@ -113,6 +113,34 @@ let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
|
|
|
113
113
|
* @public
|
|
114
114
|
*/
|
|
115
115
|
this.showFooter = false;
|
|
116
|
+
/**
|
|
117
|
+
* Defines additional accessibility attributes on different areas of the component.
|
|
118
|
+
*
|
|
119
|
+
* The accessibilityAttributes object has the following fields,
|
|
120
|
+
* where each field is an object supporting one or more accessibility attributes:
|
|
121
|
+
*
|
|
122
|
+
* - **root**: `root.role` and `root.name`.
|
|
123
|
+
* - **header**: `header.role` and `header.name`.
|
|
124
|
+
* - **content**: `content.role` and `content.name`.
|
|
125
|
+
* - **footer**: `footer.role` and `footer.name`.
|
|
126
|
+
*
|
|
127
|
+
* The accessibility attributes support the following values:
|
|
128
|
+
*
|
|
129
|
+
* - **role**: Defines the accessible ARIA landmark role of the area.
|
|
130
|
+
* Accepts the following values per section:
|
|
131
|
+
* `root` — `none`, `main`, `region`;
|
|
132
|
+
* `header` — `none`, `banner`, `region`;
|
|
133
|
+
* `content` — `none`, `main`, `region`, `form`;
|
|
134
|
+
* `footer` — `none`, `contentinfo`, `region`.
|
|
135
|
+
*
|
|
136
|
+
* - **name**: Defines the accessible ARIA name of the area.
|
|
137
|
+
* Accepts any string.
|
|
138
|
+
*
|
|
139
|
+
* @default {}
|
|
140
|
+
* @public
|
|
141
|
+
* @since 2.24.0
|
|
142
|
+
*/
|
|
143
|
+
this.accessibilityAttributes = {};
|
|
116
144
|
this.skipSnapOnScroll = false;
|
|
117
145
|
this.showHeaderInStickArea = false;
|
|
118
146
|
this.isToggled = false;
|
|
@@ -184,8 +212,15 @@ let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
|
|
|
184
212
|
return isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;
|
|
185
213
|
}
|
|
186
214
|
get headerAriaLabel() {
|
|
187
|
-
return this.hasHeading ? this._headerLabel : undefined;
|
|
215
|
+
return this.accessibilityAttributes.header?.name || (this.hasHeading ? this._headerLabel : undefined);
|
|
188
216
|
}
|
|
217
|
+
get _headerRole() { return this.accessibilityAttributes.header?.role; }
|
|
218
|
+
get _rootRole() { return this.accessibilityAttributes.root?.role; }
|
|
219
|
+
get _rootAriaLabel() { return this.accessibilityAttributes.root?.name; }
|
|
220
|
+
get _contentRole() { return this.accessibilityAttributes.content?.role; }
|
|
221
|
+
get _contentAriaLabel() { return this.accessibilityAttributes.content?.name; }
|
|
222
|
+
get _footerRole() { return this.accessibilityAttributes.footer?.role; }
|
|
223
|
+
get _footerAriaLabel() { return this.accessibilityAttributes.footer?.name; }
|
|
189
224
|
get _hidePinButton() {
|
|
190
225
|
return this.hidePinButton || isPhone();
|
|
191
226
|
}
|
|
@@ -369,6 +404,9 @@ __decorate([
|
|
|
369
404
|
__decorate([
|
|
370
405
|
slot({ type: HTMLElement })
|
|
371
406
|
], DynamicPage.prototype, "footerArea", void 0);
|
|
407
|
+
__decorate([
|
|
408
|
+
property({ type: Object })
|
|
409
|
+
], DynamicPage.prototype, "accessibilityAttributes", void 0);
|
|
372
410
|
__decorate([
|
|
373
411
|
property({ type: Boolean })
|
|
374
412
|
], DynamicPage.prototype, "_headerSnapped", void 0);
|
package/dist/DynamicPage.js.map
CHANGED
|
@@ -1 +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-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./DynamicPageTemplate.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport type 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\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.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: jsxRenderer,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\", {\n\tbubbles: true,\n})\n\nclass DynamicPage extends UI5Element {\n\teventDetails!: {\n\t\t\"pin-button-toggle\": void;\n\t\t\"title-toggle\": void;\n\t}\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 content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: DefaultSlot<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!: Slot<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!: Slot<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!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\tisToggled = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t@query(\".ui5-dynamic-page-scroll-container\")\n\tscrollContainer?: HTMLElement;\n\n\t@query(\"[ui5-dynamic-page-header-actions]\")\n\theaderActions?: DynamicPageHeaderActions;\n\n\tconstructor() {\n\t\tsuper();\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\tthis.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;\n\t\t\tthis.dynamicPageTitle.removeAttribute(\"hovered\");\n\t\t}\n\t\tif (this.dynamicPageHeader) {\n\t\t\tthis.dynamicPageHeader._snapped = this._headerSnapped;\n\t\t}\n\t}\n\n\tget endAreaHeight() {\n\t\treturn this.showFooter ? this.footerWrapper?.getBoundingClientRect().height || 0 : 0;\n\t}\n\n\tget scrollPaddingTop() {\n\t\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\n\t\tif (this._headerSnapped) {\n\t\t\treturn titleHeight;\n\t\t}\n\n\t\tconst fullHeight = headerHeight + titleHeight;\n\t\tconst scrollTop = this.scrollContainer?.scrollTop || 0;\n\n\t\treturn Math.max(titleHeight, fullHeight - scrollTop);\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 footerWrapper() {\n\t\treturn this.shadowRoot?.querySelector(\".ui5-dynamic-page-footer\");\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 && !this.hasSnappedTitleOnMobile;\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 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\tget hasSnappedTitleOnMobile() {\n\t\treturn isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;\n\t}\n\n\tget headerAriaLabel() {\n\t\treturn this.hasHeading ? this._headerLabel : undefined;\n\t}\n\n\tget _hidePinButton() {\n\t\treturn this.hidePinButton || isPhone();\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\treturn;\n\t\t}\n\n\t\tif (!this.scrollContainer) {\n\t\t\tthis._headerSnapped = snapped;\n\t\t\tthis.showHeaderInStickArea = snapped;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleHeader();\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 || !this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.isToggled) {\n\t\t\tthis.isToggled = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer.scrollTop;\n\t\tconst headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this._headerSnapped && scrollTop > headerHeight) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\n\t\tconst shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;\n\t\tconst shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD\n\t\t\t|| (!scrollTop && !headerHeight));\n\n\t\tif (shouldSnap) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\n\t\t\t//* snappedTitleOnMobile\n\t\t\t// If the header is snapped and the scroll is at the top, scroll down a bit\n\t\t\t// to avoid ending in an endless loop of snapping and unsnapping\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (shouldExpand) {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\t// Fire event if snapped state changed\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\t}\n\t}\n\n\tasync onExpandClick() {\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\n\t\tif (this.hasSnappedTitleOnMobile) {\n\t\t\tthis.dynamicPageTitle?.focus();\n\t\t}\n\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tif (this.headerPinned) {\n\t\t\tthis.showHeaderInStickArea = true;\n\t\t} else if (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\t\tthis.fireDecoratorEvent(\"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.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (!this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst currentScrollTop = this.scrollContainer.scrollTop;\n\n\t\tif (!this._headerSnapped && this.headerPinned) {\n\t\t\tthis.headerPinned = false;\n\t\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\t}\n\n\t\tif (currentScrollTop <= SCROLL_THRESHOLD) {\n\t\t\tthis._headerSnapped = !this._headerSnapped;\n\t\t\tthis.showHeaderInStickArea = this._headerSnapped;\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {\n\t\t\tif (!this._headerSnapped) {\n\t\t\t\tthis._headerSnapped = true;\n\t\t\t\tthis.showHeaderInStickArea = true;\n\t\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis.showHeaderInStickArea = false;\n\t\t\t\tthis._headerSnapped = false;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\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\tonExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t}\n\n\tonContentFocusIn(e: FocusEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tthis.setScrollPadding({ start: this.scrollPaddingTop, end: this.endAreaHeight });\n\n\t\t// textareas and similar elements appear \"in view\" even when partially\n\t\t// hidden behind sticky header/footer.\n\t\t// manual scroll brings them fully into view.\n\t\t// another issue is that browsers do not reflect dynamic changes of scroll-padding\n\t\trequestAnimationFrame(() => {\n\t\t\ttarget.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n\t\t});\n\t}\n\n\tonContentFocusOut() {\n\t\t// Reset scroll padding when focus leaves content (e.g., moves to sticky header).\n\t\t// The sticky header is part of the scrollable area, so keeping padding causes unwanted scroll.\n\t\tthis.setScrollPadding({ start: 0, end: 0 });\n\t}\n\n\tsetScrollPadding(padding: { start: number, end: number }) {\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-top\", `${padding.start}px`);\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-bottom\", `${padding.end}px`);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}
|
|
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-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { AriaLandmarkRole } from \"@ui5/webcomponents-base\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./DynamicPageTemplate.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport type 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\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ntype DynamicPageHeaderRoles = Extract<AriaLandmarkRole, \"none\" | \"banner\" | \"region\">;\ntype DynamicPageContentRoles = Extract<AriaLandmarkRole, \"none\" | \"main\" | \"region\" | \"form\">;\ntype DynamicPageFooterRoles = Extract<AriaLandmarkRole, \"none\" | \"contentinfo\" | \"region\">;\ntype DynamicPageRootRoles = Extract<AriaLandmarkRole, \"none\" | \"main\" | \"region\">;\ntype DynamicPageAccessibilityAttributes = {\n\troot?: {\n\t\trole?: DynamicPageRootRoles,\n\t\tname?: string,\n\t},\n\theader?: {\n\t\trole?: DynamicPageHeaderRoles,\n\t\tname?: string,\n\t},\n\tcontent?: {\n\t\trole?: DynamicPageContentRoles,\n\t\tname?: string,\n\t},\n\tfooter?: {\n\t\trole?: DynamicPageFooterRoles,\n\t\tname?: string,\n\t},\n};\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: jsxRenderer,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\", {\n\tbubbles: true,\n})\n\nclass DynamicPage extends UI5Element {\n\teventDetails!: {\n\t\t\"pin-button-toggle\": void;\n\t\t\"title-toggle\": void;\n\t}\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 content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: DefaultSlot<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!: Slot<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!: Slot<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!: Slot<HTMLElement>;\n\n\t/**\n\t* Defines additional accessibility attributes on different areas of the component.\n\t*\n\t* The accessibilityAttributes object has the following fields,\n\t* where each field is an object supporting one or more accessibility attributes:\n\t*\n\t* - **root**: `root.role` and `root.name`.\n\t* - **header**: `header.role` and `header.name`.\n\t* - **content**: `content.role` and `content.name`.\n\t* - **footer**: `footer.role` and `footer.name`.\n\t*\n\t* The accessibility attributes support the following values:\n\t*\n\t* - **role**: Defines the accessible ARIA landmark role of the area.\n\t* Accepts the following values per section:\n\t* `root` — `none`, `main`, `region`;\n\t* `header` — `none`, `banner`, `region`;\n\t* `content` — `none`, `main`, `region`, `form`;\n\t* `footer` — `none`, `contentinfo`, `region`.\n\t*\n\t* - **name**: Defines the accessible ARIA name of the area.\n\t* Accepts any string.\n\t*\n\t* @default {}\n\t* @public\n\t* @since 2.24.0\n\t*/\n\t@property({ type: Object })\n\taccessibilityAttributes: DynamicPageAccessibilityAttributes = {};\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\tisToggled = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t@query(\".ui5-dynamic-page-scroll-container\")\n\tscrollContainer?: HTMLElement;\n\n\t@query(\"[ui5-dynamic-page-header-actions]\")\n\theaderActions?: DynamicPageHeaderActions;\n\n\tconstructor() {\n\t\tsuper();\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\tthis.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;\n\t\t\tthis.dynamicPageTitle.removeAttribute(\"hovered\");\n\t\t}\n\t\tif (this.dynamicPageHeader) {\n\t\t\tthis.dynamicPageHeader._snapped = this._headerSnapped;\n\t\t}\n\t}\n\n\tget endAreaHeight() {\n\t\treturn this.showFooter ? this.footerWrapper?.getBoundingClientRect().height || 0 : 0;\n\t}\n\n\tget scrollPaddingTop() {\n\t\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\n\t\tif (this._headerSnapped) {\n\t\t\treturn titleHeight;\n\t\t}\n\n\t\tconst fullHeight = headerHeight + titleHeight;\n\t\tconst scrollTop = this.scrollContainer?.scrollTop || 0;\n\n\t\treturn Math.max(titleHeight, fullHeight - scrollTop);\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 footerWrapper() {\n\t\treturn this.shadowRoot?.querySelector(\".ui5-dynamic-page-footer\");\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 && !this.hasSnappedTitleOnMobile;\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 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\tget hasSnappedTitleOnMobile() {\n\t\treturn isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;\n\t}\n\n\tget headerAriaLabel() {\n\t\treturn this.accessibilityAttributes.header?.name || (this.hasHeading ? this._headerLabel : undefined);\n\t}\n\n\tget _headerRole() { return this.accessibilityAttributes.header?.role; }\n\tget _rootRole() { return this.accessibilityAttributes.root?.role; }\n\tget _rootAriaLabel() { return this.accessibilityAttributes.root?.name; }\n\tget _contentRole() { return this.accessibilityAttributes.content?.role; }\n\tget _contentAriaLabel() { return this.accessibilityAttributes.content?.name; }\n\tget _footerRole() { return this.accessibilityAttributes.footer?.role; }\n\tget _footerAriaLabel() { return this.accessibilityAttributes.footer?.name; }\n\n\tget _hidePinButton() {\n\t\treturn this.hidePinButton || isPhone();\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\treturn;\n\t\t}\n\n\t\tif (!this.scrollContainer) {\n\t\t\tthis._headerSnapped = snapped;\n\t\t\tthis.showHeaderInStickArea = snapped;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleHeader();\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 || !this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.isToggled) {\n\t\t\tthis.isToggled = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer.scrollTop;\n\t\tconst headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this._headerSnapped && scrollTop > headerHeight) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\n\t\tconst shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;\n\t\tconst shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD\n\t\t\t|| (!scrollTop && !headerHeight));\n\n\t\tif (shouldSnap) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\n\t\t\t//* snappedTitleOnMobile\n\t\t\t// If the header is snapped and the scroll is at the top, scroll down a bit\n\t\t\t// to avoid ending in an endless loop of snapping and unsnapping\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (shouldExpand) {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\t// Fire event if snapped state changed\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\t}\n\t}\n\n\tasync onExpandClick() {\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\n\t\tif (this.hasSnappedTitleOnMobile) {\n\t\t\tthis.dynamicPageTitle?.focus();\n\t\t}\n\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tif (this.headerPinned) {\n\t\t\tthis.showHeaderInStickArea = true;\n\t\t} else if (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\t\tthis.fireDecoratorEvent(\"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.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (!this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst currentScrollTop = this.scrollContainer.scrollTop;\n\n\t\tif (!this._headerSnapped && this.headerPinned) {\n\t\t\tthis.headerPinned = false;\n\t\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\t}\n\n\t\tif (currentScrollTop <= SCROLL_THRESHOLD) {\n\t\t\tthis._headerSnapped = !this._headerSnapped;\n\t\t\tthis.showHeaderInStickArea = this._headerSnapped;\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {\n\t\t\tif (!this._headerSnapped) {\n\t\t\t\tthis._headerSnapped = true;\n\t\t\t\tthis.showHeaderInStickArea = true;\n\t\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis.showHeaderInStickArea = false;\n\t\t\t\tthis._headerSnapped = false;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\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\tonExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t}\n\n\tonContentFocusIn(e: FocusEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tthis.setScrollPadding({ start: this.scrollPaddingTop, end: this.endAreaHeight });\n\n\t\t// textareas and similar elements appear \"in view\" even when partially\n\t\t// hidden behind sticky header/footer.\n\t\t// manual scroll brings them fully into view.\n\t\t// another issue is that browsers do not reflect dynamic changes of scroll-padding\n\t\trequestAnimationFrame(() => {\n\t\t\ttarget.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n\t\t});\n\t}\n\n\tonContentFocusOut() {\n\t\t// Reset scroll padding when focus leaves content (e.g., moves to sticky header).\n\t\t// The sticky header is part of the scrollable area, so keeping padding causes unwanted scroll.\n\t\tthis.setScrollPadding({ start: 0, end: 0 });\n\t}\n\n\tsetScrollPadding(padding: { start: number, end: number }) {\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-top\", `${padding.start}px`);\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-bottom\", `${padding.end}px`);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n\nexport type { DynamicPageAccessibilityAttributes };\n"]}
|
|
@@ -47,6 +47,14 @@ declare class DynamicPageHeader extends UI5Element {
|
|
|
47
47
|
* @private
|
|
48
48
|
*/
|
|
49
49
|
_snapped: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Defines the accessible ARIA label for the header region.
|
|
52
|
+
* Overrides the default "Header Expanded" / "Header Snapped" text.
|
|
53
|
+
* @public
|
|
54
|
+
* @default undefined
|
|
55
|
+
* @since 2.24.0
|
|
56
|
+
*/
|
|
57
|
+
accessibleName?: string;
|
|
50
58
|
static i18nBundle: I18nBundle;
|
|
51
59
|
/**
|
|
52
60
|
* Returns the aria-label for the header region.
|
|
@@ -65,6 +65,9 @@ let DynamicPageHeader = DynamicPageHeader_1 = class DynamicPageHeader extends UI
|
|
|
65
65
|
* @internal
|
|
66
66
|
*/
|
|
67
67
|
get _headerRegionAriaLabel() {
|
|
68
|
+
if (this.accessibleName) {
|
|
69
|
+
return this.accessibleName;
|
|
70
|
+
}
|
|
68
71
|
const defaultText = this._snapped
|
|
69
72
|
? DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER
|
|
70
73
|
: DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER;
|
|
@@ -77,6 +80,9 @@ __decorate([
|
|
|
77
80
|
__decorate([
|
|
78
81
|
property({ type: Boolean })
|
|
79
82
|
], DynamicPageHeader.prototype, "_snapped", void 0);
|
|
83
|
+
__decorate([
|
|
84
|
+
property()
|
|
85
|
+
], DynamicPageHeader.prototype, "accessibleName", void 0);
|
|
80
86
|
__decorate([
|
|
81
87
|
i18n("@ui5/webcomponents-fiori")
|
|
82
88
|
], DynamicPageHeader, "i18nBundle", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DynamicPageHeader.js","sourceRoot":"","sources":["../src/DynamicPageHeader.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAInE,WAAW;AACX,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AAEvE,SAAS;AACT,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAE/E,OAAO;AACP,OAAO,EACN,uCAAuC,EACvC,sCAAsC,GACtC,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QASC;;;;;WAKG;QAEH,aAAQ,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"DynamicPageHeader.js","sourceRoot":"","sources":["../src/DynamicPageHeader.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAInE,WAAW;AACX,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AAEvE,SAAS;AACT,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAE/E,OAAO;AACP,OAAO,EACN,uCAAuC,EACvC,sCAAsC,GACtC,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QASC;;;;;WAKG;QAEH,aAAQ,GAAG,KAAK,CAAC;IA6BlB,CAAC;IAdA;;;OAGG;IACH,IAAI,sBAAsB;QACzB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,cAAc,CAAC;QAC5B,CAAC;QACD,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ;YAChC,CAAC,CAAC,sCAAsC;YACxC,CAAC,CAAC,uCAAuC,CAAC;QAE3C,OAAO,mBAAiB,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC;CACD,CAAA;AAtCA;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;kDACV;AASnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACX;AAUjB;IADC,QAAQ,EAAE;yDACa;AAGjB;IADN,IAAI,CAAC,0BAA0B,CAAC;2CACH;AA7BzB,iBAAiB;IANtB,aAAa,CAAC;QACd,GAAG,EAAE,yBAAyB;QAC9B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,oBAAoB;QAC5B,QAAQ,EAAE,yBAAyB;KACnC,CAAC;GACI,iBAAiB,CA6CtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n// Template\nimport DynamicPageHeaderTemplate from \"./DynamicPageHeaderTemplate.js\";\n\n// Styles\nimport DynamicPageHeaderCss from \"./generated/themes/DynamicPageHeader.css.js\";\n\n// i18n\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * Header of the DynamicPage.\n *\n * ### Overview\n *\n * The DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\n * and is used to serve as header of the `DynamicPage`.\n *\n * ### Usage\n *\n * The `DynamicPageHeader` can hold any layout control and has two states - expanded\n * and collapsed (snapped). The switching between these states happens when:\n *\t- the user scrolls below its bottom margin\n *\t- the user clicks on the `DynamicPageTitle`\n *\t- through the `DynamicPage` property `headerSnapped`\n *\n * ### Responsive Behavior\n *\n * The responsive behavior of the `DynamicPageHeader` depends on the behavior of the\n * content that is displayed.\n *\n * ### Accessibility\n *\n * The `DynamicPageHeader` provides an accessible label for the header region.\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header\",\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageHeaderCss,\n\ttemplate: DynamicPageHeaderTemplate,\n})\nclass DynamicPageHeader extends UI5Element {\n\t/**\n\t * Defines the content of the Dynamic Page Header.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_snapped = false;\n\n\t/**\n\t * Defines the accessible ARIA label for the header region.\n\t * Overrides the default \"Header Expanded\" / \"Header Snapped\" text.\n\t * @public\n\t * @default undefined\n\t * @since 2.24.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/**\n\t * Returns the aria-label for the header region.\n\t * @internal\n\t */\n\tget _headerRegionAriaLabel(): string {\n\t\tif (this.accessibleName) {\n\t\t\treturn this.accessibleName;\n\t\t}\n\t\tconst defaultText = this._snapped\n\t\t\t? DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER\n\t\t\t: DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER;\n\n\t\treturn DynamicPageHeader.i18nBundle.getText(defaultText);\n\t}\n}\n\nDynamicPageHeader.define();\n\nexport default DynamicPageHeader;\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
|
|
2
2
|
import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
|
|
3
3
|
export default function DynamicPageTemplate() {
|
|
4
|
-
return (_jsxs("div", { class: "ui5-dynamic-page-root", children: [_jsxs("div", { class: "ui5-dynamic-page-scroll-container", onScroll: this.snapOnScroll, children: [_jsxs("
|
|
4
|
+
return (_jsxs("div", { class: "ui5-dynamic-page-root", role: this._rootRole, "aria-label": this._rootAriaLabel, children: [_jsxs("div", { class: "ui5-dynamic-page-scroll-container", onScroll: this.snapOnScroll, children: [_jsxs("div", { class: "ui5-dynamic-page-title-header-wrapper", id: `${this._id}-header`, role: this._headerRole || "banner", "aria-label": this.headerAriaLabel, "onui5-toggle-title": this.onToggleTitle, children: [_jsx("slot", { name: "titleArea" }), this.headerInTitle &&
|
|
5
5
|
_jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), this.actionsInTitle && headerActions.call(this)] }), this.headerInContent &&
|
|
6
|
-
_jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), !this.actionsInTitle && headerActions.call(this), _jsx("div", { part: "content", class: "ui5-dynamic-page-content", onFocusIn: this.onContentFocusIn, onFocusOut: this.onContentFocusOut, children: _jsxs("div", { class: "ui5-dynamic-page-fit-content", part: "fit-content", children: [_jsx("slot", {}), this.showFooter &&
|
|
7
|
-
_jsx("div", { class: "ui5-dynamic-page-spacer" })] }) })] }), _jsx("div", { class: "ui5-dynamic-page-footer", part: "footer", children: _jsx("slot", { name: "footerArea" }) })] }));
|
|
6
|
+
_jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), !this.actionsInTitle && headerActions.call(this), _jsx("div", { part: "content", class: "ui5-dynamic-page-content", role: this._contentRole, "aria-label": this._contentAriaLabel, onFocusIn: this.onContentFocusIn, onFocusOut: this.onContentFocusOut, children: _jsxs("div", { class: "ui5-dynamic-page-fit-content", part: "fit-content", children: [_jsx("slot", {}), this.showFooter &&
|
|
7
|
+
_jsx("div", { class: "ui5-dynamic-page-spacer" })] }) })] }), _jsx("div", { class: "ui5-dynamic-page-footer", part: "footer", role: this._footerRole, "aria-label": this._footerAriaLabel, children: _jsx("slot", { name: "footerArea" }) })] }));
|
|
8
8
|
}
|
|
9
9
|
function headerActions() {
|
|
10
10
|
if (!this.hasSnappedTitleOnMobile && this.hasHeading) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DynamicPageTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"DynamicPageTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,cAAc,aACvF,eAAK,KAAK,EAAC,mCAAmC,EAC7C,QAAQ,EAAE,IAAI,CAAC,YAAY,aAE3B,eACC,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,IAAI,QAAQ,gBACtB,IAAI,CAAC,eAAe,wBACZ,IAAI,CAAC,aAAa,aAEtC,eAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,aAAa;gCAClB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAER,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAC3C,EAEL,IAAI,CAAC,eAAe;wBACpB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,CAAC,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAEjD,cACC,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAE,IAAI,CAAC,YAAY,gBACX,IAAI,CAAC,iBAAiB,EAClC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,UAAU,EAAE,IAAI,CAAC,iBAAiB,YAElC,eAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,aAAa,aAC3D,gBAAa,EACZ,IAAI,CAAC,UAAU;oCACf,cAAK,KAAK,EAAC,yBAAyB,GAAO,IAEvC,GACD,IACD,EAEN,cAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,WAAW,gBAAc,IAAI,CAAC,gBAAgB,YAC3G,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa;IACrB,IAAI,CAAC,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QACtD,OAAO,CACN,KAAC,wBAAwB,IACxB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,aAAa,EAAE,IAAI,CAAC,cAAc,+BACP,IAAI,CAAC,aAAa,4BACrB,IAAI,CAAC,UAAU,kCACT,IAAI,CAAC,eAAe,mCACnB,IAAI,CAAC,gBAAgB,GACnD,CACF,CAAC;IACH,CAAC;AACF,CAAC","sourcesContent":["import type DynamicPage from \"./DynamicPage.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\nexport default function DynamicPageTemplate(this: DynamicPage) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-root\" role={this._rootRole} aria-label={this._rootAriaLabel}>\n\t\t\t<div class=\"ui5-dynamic-page-scroll-container\"\n\t\t\t\tonScroll={this.snapOnScroll}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-dynamic-page-title-header-wrapper\"\n\t\t\t\t\tid={`${this._id}-header`}\n\t\t\t\t\trole={this._headerRole || \"banner\"}\n\t\t\t\t\taria-label={this.headerAriaLabel}\n\t\t\t\t\tonui5-toggle-title={this.onToggleTitle}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"titleArea\"></slot>\n\t\t\t\t\t{this.headerInTitle &&\n\t\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t\t></slot>\n\t\t\t\t\t}\n\t\t\t\t\t{this.actionsInTitle && headerActions.call(this)}\n\t\t\t\t</div>\n\n\t\t\t\t{this.headerInContent &&\n\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t></slot>\n\t\t\t\t}\n\n\t\t\t\t{!this.actionsInTitle && headerActions.call(this)}\n\n\t\t\t\t<div\n\t\t\t\t\tpart=\"content\"\n\t\t\t\t\tclass=\"ui5-dynamic-page-content\"\n\t\t\t\t\trole={this._contentRole}\n\t\t\t\t\taria-label={this._contentAriaLabel}\n\t\t\t\t\tonFocusIn={this.onContentFocusIn}\n\t\t\t\t\tonFocusOut={this.onContentFocusOut}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"ui5-dynamic-page-fit-content\" part=\"fit-content\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{this.showFooter &&\n\t\t\t\t\t\t\t<div class=\"ui5-dynamic-page-spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"ui5-dynamic-page-footer\" part=\"footer\" role={this._footerRole} aria-label={this._footerAriaLabel}>\n\t\t\t\t<slot name=\"footerArea\"></slot>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction headerActions(this: DynamicPage) {\n\tif (!this.hasSnappedTitleOnMobile && this.hasHeading) {\n\t\treturn (\n\t\t\t<DynamicPageHeaderActions\n\t\t\t\tsnapped={this.headerSnapped}\n\t\t\t\tpinned={this.headerPinned}\n\t\t\t\thidePinButton={this._hidePinButton}\n\t\t\t\tonui5-expand-button-click={this.onExpandClick}\n\t\t\t\tonui5-pin-button-click={this.onPinClick}\n\t\t\t\tonui5-expand-button-hover-in={this.onExpandHoverIn}\n\t\t\t\tonui5-expand-button-hover-out={this.onExpandHoverOut}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}
|
package/dist/Timeline.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
|
-
import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
|
+
import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
3
3
|
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
4
4
|
import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
|
|
5
5
|
import type ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
|
|
@@ -36,6 +36,23 @@ interface ITimelineItem extends UI5Element, ITabbable {
|
|
|
36
36
|
* These entries can be generated by the system (for example, value XY changed from A to B), or added manually.
|
|
37
37
|
* There are two distinct variants of the timeline: basic and social. The basic timeline is read-only,
|
|
38
38
|
* while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
|
|
39
|
+
*
|
|
40
|
+
* ### Header and Info Bar Slots
|
|
41
|
+
*
|
|
42
|
+
* The Timeline exposes two named slots above the items area:
|
|
43
|
+
*
|
|
44
|
+
* - `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).
|
|
45
|
+
* The most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open
|
|
46
|
+
* a filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or
|
|
47
|
+
* searching — the application listens for events from its own controls and reorders, hides, or
|
|
48
|
+
* adds items in the default slot accordingly.
|
|
49
|
+
*
|
|
50
|
+
* - `infoBar` — for a status bar that reflects the result of the controls (active filters,
|
|
51
|
+
* applied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.
|
|
52
|
+
*
|
|
53
|
+
* The Timeline itself does not filter, sort, or search — the application owns that logic.
|
|
54
|
+
* Use `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline
|
|
55
|
+
* a constrained height in this mode so it owns its scrollbar.
|
|
39
56
|
* @constructor
|
|
40
57
|
* @extends UI5Element
|
|
41
58
|
* @public
|
|
@@ -90,6 +107,20 @@ declare class Timeline extends UI5Element {
|
|
|
90
107
|
* @public
|
|
91
108
|
*/
|
|
92
109
|
growing: `${TimelineGrowingMode}`;
|
|
110
|
+
/**
|
|
111
|
+
* Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.
|
|
112
|
+
*
|
|
113
|
+
* **Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a
|
|
114
|
+
* constrained height (for example `style="height: 32rem"`) so its items scroll
|
|
115
|
+
* inside it. Placing the Timeline inside an externally scrolling ancestor while
|
|
116
|
+
* leaving the Timeline itself unsized is not supported in this mode — the bars
|
|
117
|
+
* will scroll away with the ancestor.
|
|
118
|
+
*
|
|
119
|
+
* @default false
|
|
120
|
+
* @public
|
|
121
|
+
* @since 2.22.0
|
|
122
|
+
*/
|
|
123
|
+
stickyHeader: boolean;
|
|
93
124
|
/**
|
|
94
125
|
* Defines the active state of the `More` button.
|
|
95
126
|
* @private
|
|
@@ -100,8 +131,25 @@ declare class Timeline extends UI5Element {
|
|
|
100
131
|
* @public
|
|
101
132
|
*/
|
|
102
133
|
items: DefaultSlot<ITimelineItem>;
|
|
134
|
+
/**
|
|
135
|
+
* Defines the content of the Timeline's header area, displayed above the items.
|
|
136
|
+
* Typically a `ui5-toolbar` with search, sort, and filter controls.
|
|
137
|
+
*
|
|
138
|
+
* @public
|
|
139
|
+
* @since 2.22.0
|
|
140
|
+
*/
|
|
141
|
+
header: Slot<HTMLElement>;
|
|
142
|
+
/**
|
|
143
|
+
* Defines the content of the Timeline's info bar area, displayed below the header
|
|
144
|
+
* and above the items. Use for status display (applied filters, sort direction, counts).
|
|
145
|
+
*
|
|
146
|
+
* @public
|
|
147
|
+
* @since 2.22.0
|
|
148
|
+
*/
|
|
149
|
+
infoBar: Slot<HTMLElement>;
|
|
103
150
|
timelineEndMarker: HTMLElement;
|
|
104
151
|
growingButton: HTMLElement;
|
|
152
|
+
_scrollContainer: HTMLElement;
|
|
105
153
|
static i18nBundle: I18nBundle;
|
|
106
154
|
_itemNavigation: ItemNavigation;
|
|
107
155
|
growingIntersectionObserver?: IntersectionObserver | null;
|
|
@@ -109,6 +157,8 @@ declare class Timeline extends UI5Element {
|
|
|
109
157
|
initialIntersection: boolean;
|
|
110
158
|
constructor();
|
|
111
159
|
get ariaLabel(): string;
|
|
160
|
+
get _hasHeader(): boolean;
|
|
161
|
+
get _hasInfoBar(): boolean;
|
|
112
162
|
get showBusyIndicatorOverlay(): boolean;
|
|
113
163
|
get growsOnScroll(): boolean;
|
|
114
164
|
get growingButtonIcon(): "process" | "drill-down";
|
|
@@ -126,6 +176,7 @@ declare class Timeline extends UI5Element {
|
|
|
126
176
|
_onLoadMoreKeyup(e: KeyboardEvent): void;
|
|
127
177
|
_onLoadMoreClick(): void;
|
|
128
178
|
_onfocusin(e: FocusEvent): void;
|
|
179
|
+
_onwheel(e: WheelEvent): void;
|
|
129
180
|
onBeforeRendering(): void;
|
|
130
181
|
_setLastItem(): void;
|
|
131
182
|
_setIsNextItemGroup(): void;
|
package/dist/Timeline.js
CHANGED
|
@@ -43,6 +43,23 @@ const GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms
|
|
|
43
43
|
* These entries can be generated by the system (for example, value XY changed from A to B), or added manually.
|
|
44
44
|
* There are two distinct variants of the timeline: basic and social. The basic timeline is read-only,
|
|
45
45
|
* while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
|
|
46
|
+
*
|
|
47
|
+
* ### Header and Info Bar Slots
|
|
48
|
+
*
|
|
49
|
+
* The Timeline exposes two named slots above the items area:
|
|
50
|
+
*
|
|
51
|
+
* - `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).
|
|
52
|
+
* The most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open
|
|
53
|
+
* a filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or
|
|
54
|
+
* searching — the application listens for events from its own controls and reorders, hides, or
|
|
55
|
+
* adds items in the default slot accordingly.
|
|
56
|
+
*
|
|
57
|
+
* - `infoBar` — for a status bar that reflects the result of the controls (active filters,
|
|
58
|
+
* applied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.
|
|
59
|
+
*
|
|
60
|
+
* The Timeline itself does not filter, sort, or search — the application owns that logic.
|
|
61
|
+
* Use `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline
|
|
62
|
+
* a constrained height in this mode so it owns its scrollbar.
|
|
46
63
|
* @constructor
|
|
47
64
|
* @extends UI5Element
|
|
48
65
|
* @public
|
|
@@ -89,6 +106,20 @@ let Timeline = Timeline_1 = class Timeline extends UI5Element {
|
|
|
89
106
|
* @public
|
|
90
107
|
*/
|
|
91
108
|
this.growing = "None";
|
|
109
|
+
/**
|
|
110
|
+
* Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.
|
|
111
|
+
*
|
|
112
|
+
* **Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a
|
|
113
|
+
* constrained height (for example `style="height: 32rem"`) so its items scroll
|
|
114
|
+
* inside it. Placing the Timeline inside an externally scrolling ancestor while
|
|
115
|
+
* leaving the Timeline itself unsized is not supported in this mode — the bars
|
|
116
|
+
* will scroll away with the ancestor.
|
|
117
|
+
*
|
|
118
|
+
* @default false
|
|
119
|
+
* @public
|
|
120
|
+
* @since 2.22.0
|
|
121
|
+
*/
|
|
122
|
+
this.stickyHeader = false;
|
|
92
123
|
/**
|
|
93
124
|
* Defines the active state of the `More` button.
|
|
94
125
|
* @private
|
|
@@ -105,6 +136,12 @@ let Timeline = Timeline_1 = class Timeline extends UI5Element {
|
|
|
105
136
|
? `${Timeline_1.i18nBundle.getText(TIMELINE_ARIA_LABEL)} ${this.accessibleName}`
|
|
106
137
|
: Timeline_1.i18nBundle.getText(TIMELINE_ARIA_LABEL);
|
|
107
138
|
}
|
|
139
|
+
get _hasHeader() {
|
|
140
|
+
return this.header.length > 0;
|
|
141
|
+
}
|
|
142
|
+
get _hasInfoBar() {
|
|
143
|
+
return this.infoBar.length > 0;
|
|
144
|
+
}
|
|
108
145
|
get showBusyIndicatorOverlay() {
|
|
109
146
|
return !this.growsWithButton && this.loading;
|
|
110
147
|
}
|
|
@@ -196,6 +233,23 @@ let Timeline = Timeline_1 = class Timeline extends UI5Element {
|
|
|
196
233
|
}
|
|
197
234
|
this._itemNavigation.setCurrentItem(target);
|
|
198
235
|
}
|
|
236
|
+
_onwheel(e) {
|
|
237
|
+
// In horizontal layout, translate vertical wheel into horizontal scroll
|
|
238
|
+
// so a regular mouse wheel can scroll through items.
|
|
239
|
+
if (this.layout !== TimelineLayout.Horizontal || !e.deltaY || e.deltaX) {
|
|
240
|
+
return;
|
|
241
|
+
}
|
|
242
|
+
const container = this._scrollContainer;
|
|
243
|
+
if (!container) {
|
|
244
|
+
return;
|
|
245
|
+
}
|
|
246
|
+
const canScroll = container.scrollWidth > container.clientWidth;
|
|
247
|
+
if (!canScroll) {
|
|
248
|
+
return;
|
|
249
|
+
}
|
|
250
|
+
container.scrollLeft += e.deltaY;
|
|
251
|
+
e.preventDefault();
|
|
252
|
+
}
|
|
199
253
|
onBeforeRendering() {
|
|
200
254
|
this._itemNavigation._navigationMode = this.layout === TimelineLayout.Horizontal ? NavigationMode.Horizontal : NavigationMode.Vertical;
|
|
201
255
|
if (!this.items.length) {
|
|
@@ -340,18 +394,30 @@ __decorate([
|
|
|
340
394
|
__decorate([
|
|
341
395
|
property()
|
|
342
396
|
], Timeline.prototype, "growing", void 0);
|
|
397
|
+
__decorate([
|
|
398
|
+
property({ type: Boolean })
|
|
399
|
+
], Timeline.prototype, "stickyHeader", void 0);
|
|
343
400
|
__decorate([
|
|
344
401
|
property({ type: Boolean })
|
|
345
402
|
], Timeline.prototype, "_loadMoreActive", void 0);
|
|
346
403
|
__decorate([
|
|
347
404
|
slot({ type: HTMLElement, individualSlots: true, "default": true })
|
|
348
405
|
], Timeline.prototype, "items", void 0);
|
|
406
|
+
__decorate([
|
|
407
|
+
slot()
|
|
408
|
+
], Timeline.prototype, "header", void 0);
|
|
409
|
+
__decorate([
|
|
410
|
+
slot()
|
|
411
|
+
], Timeline.prototype, "infoBar", void 0);
|
|
349
412
|
__decorate([
|
|
350
413
|
query(".ui5-timeline-end-marker")
|
|
351
414
|
], Timeline.prototype, "timelineEndMarker", void 0);
|
|
352
415
|
__decorate([
|
|
353
416
|
query((`[id="ui5-timeline-growing-btn"]`))
|
|
354
417
|
], Timeline.prototype, "growingButton", void 0);
|
|
418
|
+
__decorate([
|
|
419
|
+
query(".ui5-timeline-scroll-container")
|
|
420
|
+
], Timeline.prototype, "_scrollContainer", void 0);
|
|
355
421
|
__decorate([
|
|
356
422
|
i18n("@ui5/webcomponents-fiori")
|
|
357
423
|
], Timeline, "i18nBundle", void 0);
|