@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/Timeline.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../src/Timeline.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport {\n\tisSpace,\n\tisEnter,\n\tisUp,\n\tisDown,\n\tisLeft,\n\tisRight,\n\tisF2,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport \"./TimelineItem.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport { TIMELINE_ARIA_LABEL, TIMELINE_LOAD_MORE_BUTTON_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport TimelineTemplate from \"./TimelineTemplate.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport process from \"@ui5/webcomponents-icons/dist/process.js\";\nimport drillDown from \"@ui5/webcomponents-icons/dist/drill-down.js\";\n// Styles\nimport TimelineCss from \"./generated/themes/Timeline.css.js\";\nimport TimelineLayout from \"./types/TimelineLayout.js\";\n// Mode\nimport TimelineGrowingMode from \"./types/TimelineGrowingMode.js\";\nimport { getFirstFocusableElement } from \"@ui5/webcomponents-base/dist/util/FocusableElements.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\n\n/**\n * Interface for components that may be slotted inside `ui5-timeline` as items\n * @public\n */\ninterface ITimelineItem extends UI5Element, ITabbable {\n\tlayout: `${TimelineLayout}`;\n\tisGroupItem: boolean;\n\tforcedLineWidth?: string;\n\ticon?: string;\n\tnameClickable?: boolean;\n\tpositionInGroup?: number;\n\tcollapsed?: boolean;\n\titems?: Array<ITimelineItem>;\n\tfocusLink?(): void;\n\tlastItem: boolean;\n\tisNextItemGroup?: boolean;\n\tfirstItemInTimeline?: boolean;\n\teffectiveRole?: string;\n}\n\nconst SHORT_LINE_WIDTH = \"ShortLineWidth\";\nconst LARGE_LINE_WIDTH = \"LargeLineWidth\";\nconst GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\n * A common use case is to provide information about changes to an object, or events related to an object.\n * These entries can be generated by the system (for example, value XY changed from A to B), or added manually.\n * There are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\n * while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 0.8.0\n */\n@customElement({\n\ttag: \"ui5-timeline\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: TimelineCss,\n\ttemplate: TimelineTemplate,\n})\n\n/**\n * Fired when the user presses the `More` button or scrolls to the Timeline's end.\n *\n * **Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n * @public\n * @since 2.7.0\n */\n@event(\"load-more\", {\n\tbubbles: true,\n})\n\nclass Timeline extends UI5Element {\n\teventDetails!: {\n\t\t\"load-more\": void,\n\t}\n\t/**\n\t * Defines the items orientation.\n\t * @default \"Vertical\"\n\t * @since 1.0.0-rc.15\n\t * @public\n\t */\n\t@property()\n\tlayout: `${TimelineLayout}` = \"Vertical\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines if the component should display a loading indicator over the Timeline.\n\t *\n\t * @default false\n\t * @since 2.7.0\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the loading indicator will show up for this component.\n\t * @default 1000\n\t * @public\n\t */\n\t@property({ type: Number })\n\tloadingDelay = 1000;\n\n\t/**\n\t * Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\n\t * or via user scroll. In both cases a `load-more` event is fired.\n\t *\n\t * Available options:\n\t *\n\t * `Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\t *\n\t * `Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\t *\n\t * `None` (default) - The growing functionality is off.\n\t *\n\t * @default \"None\"\n\t * @since 2.7.0\n\t * @public\n\t */\n\t@property()\n\tgrowing: `${TimelineGrowingMode}` = \"None\";\n\n\t/**\n\t * Defines the active state of the `More` button.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_loadMoreActive = false;\n\n\t/**\n\t * Determines the content of the `ui5-timeline`.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, individualSlots: true, \"default\": true })\n\titems!: DefaultSlot<ITimelineItem>;\n\n\t@query(\".ui5-timeline-end-marker\")\n\ttimelineEndMarker!: HTMLElement;\n\n\t@query((`[id=\"ui5-timeline-growing-btn\"]`))\n\tgrowingButton!: HTMLElement;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_itemNavigation: ItemNavigation;\n\tgrowingIntersectionObserver?: IntersectionObserver | null;\n\ttimeLineEndObserved = false;\n\tinitialIntersection = true;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tgetItemsCallback: () => this._navigableItems,\n\t\t});\n\t}\n\n\tget ariaLabel() {\n\t\treturn this.accessibleName\n\t\t\t? `${Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL)} ${this.accessibleName}`\n\t\t\t: Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);\n\t}\n\n\tget showBusyIndicatorOverlay() {\n\t\treturn !this.growsWithButton && this.loading;\n\t}\n\n\tget growsOnScroll(): boolean {\n\t\treturn this.growing === TimelineGrowingMode.Scroll;\n\t}\n\n\tget growingButtonIcon() {\n\t\treturn this.layout === TimelineLayout.Horizontal ? process : drillDown;\n\t}\n\n\tget growingButtonText() {\n\t\treturn Timeline.i18nBundle.getText(TIMELINE_LOAD_MORE_BUTTON_TEXT);\n\t}\n\n\tget growsWithButton(): boolean {\n\t\treturn this.growing === TimelineGrowingMode.Button;\n\t}\n\n\tonAfterRendering() {\n\t\tif (this.growsOnScroll) {\n\t\t\tthis.observeTimelineEnd();\n\t\t} else if (this.timeLineEndObserved) {\n\t\t\tthis.unobserveTimelineEnd();\n\t\t}\n\n\t\tthis.growingIntersectionObserver = this.getIntersectionObserver();\n\t}\n\n\tonExitDOM() {\n\t\tthis.unobserveTimelineEnd();\n\t}\n\n\tasync observeTimelineEnd() {\n\t\tif (!this.timeLineEndObserved) {\n\t\t\tawait renderFinished();\n\t\t\tthis.getIntersectionObserver().observe(this.timelineEndMarker);\n\t\t\tthis.timeLineEndObserved = true;\n\t\t}\n\t}\n\n\tunobserveTimelineEnd() {\n\t\tif (this.growingIntersectionObserver) {\n\t\t\tthis.growingIntersectionObserver.disconnect();\n\t\t\tthis.growingIntersectionObserver = null;\n\t\t\tthis.timeLineEndObserved = false;\n\t\t}\n\t}\n\n\tgetIntersectionObserver(): IntersectionObserver {\n\t\tif (!this.growingIntersectionObserver) {\n\t\t\tthis.growingIntersectionObserver = new IntersectionObserver(this.onIntersection.bind(this), {\n\t\t\t\troot: null,\n\t\t\t\tthreshold: 1.0,\n\t\t\t});\n\t\t}\n\n\t\treturn this.growingIntersectionObserver;\n\t}\n\n\tonIntersection(entries: Array<IntersectionObserverEntry>) {\n\t\tif (this.initialIntersection) {\n\t\t\tthis.initialIntersection = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (entries.some(entry => entry.isIntersecting)) {\n\t\t\tdebounce(this.loadMore.bind(this), GROWING_WITH_SCROLL_DEBOUNCE_RATE);\n\t\t}\n\t}\n\n\tloadMore() {\n\t\tthis.fireDecoratorEvent(\"load-more\");\n\t}\n\n\tgetFocusDomRef(): HTMLElement | undefined {\n\t\treturn this._itemNavigation._getCurrentItem();\n\t}\n\n\t_onLoadMoreKeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._loadMoreActive = true;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._onLoadMoreClick();\n\t\t\tthis._loadMoreActive = true;\n\t\t}\n\t}\n\n\t_onLoadMoreKeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._onLoadMoreClick();\n\t\t}\n\t\tthis._loadMoreActive = false;\n\t}\n\n\t_onLoadMoreClick() {\n\t\tthis.fireDecoratorEvent(\"load-more\");\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tlet target = e.target as ITimelineItem | ToggleButton;\n\n\t\tif ((target as ITimelineItem).isGroupItem) {\n\t\t\ttarget = target.shadowRoot!.querySelector<ToggleButton>(\"[ui5-toggle-button]\")!;\n\t\t}\n\n\t\tthis._itemNavigation.setCurrentItem(target);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._itemNavigation._navigationMode = this.layout === TimelineLayout.Horizontal ? NavigationMode.Horizontal : NavigationMode.Vertical;\n\n\t\tif (!this.items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tfor (let i = 0; i < this.items.length; i++) {\n\t\t\tthis.items[i].layout = this.layout;\n\t\t\tif (this.hasGroupItems) {\n\t\t\t\tthis.items[i].effectiveRole = \"treeitem\";\n\t\t\t} else {\n\t\t\t\tthis.items[i].effectiveRole = \"listitem\";\n\t\t\t}\n\n\t\t\tif (this.items[i + 1] && !!this.items[i + 1].icon) {\n\t\t\t\tthis.items[i].forcedLineWidth = SHORT_LINE_WIDTH;\n\t\t\t} else if (this.items[i].icon && this.items[i + 1] && !this.items[i + 1].icon) {\n\t\t\t\tthis.items[i].forcedLineWidth = LARGE_LINE_WIDTH;\n\t\t\t}\n\t\t}\n\n\t\tthis._setLastItem();\n\t\tthis._setIsNextItemGroup();\n\t\tthis.items[0].firstItemInTimeline = true;\n\t}\n\n\t_setLastItem() {\n\t\tconst items = this.items;\n\n\t\tfor (let i = 0; i < items.length; i++) {\n\t\t\titems[i].lastItem = false;\n\t\t}\n\n\t\tif (items.length > 0) {\n\t\t\titems[items.length - 1].lastItem = true;\n\t\t}\n\t}\n\n\t_setIsNextItemGroup() {\n\t\tfor (let i = 0; i < this.items.length; i++) {\n\t\t\tthis.items[i].isNextItemGroup = false;\n\t\t}\n\n\t\tfor (let i = 0; i < this.items.length; i++) {\n\t\t\tif (this.items[i + 1] && this.items[i + 1].isGroupItem) {\n\t\t\t\tthis.items[i].isNextItemGroup = true;\n\t\t\t}\n\t\t}\n\t}\n\n\tasync _onkeydown(e: KeyboardEvent) {\n\t\tconst target = e.target as ITimelineItem,\n\t\t\ttargetfocusDomRef = target?.getFocusDomRef(),\n\t\t\tshouldHandleCustomArrowNavigation = targetfocusDomRef === this.getFocusDomRef() || target === this.growingButton;\n\n\t\tif (shouldHandleCustomArrowNavigation && (isDown(e) || isRight(e))) {\n\t\t\tthis._handleDown();\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tif (shouldHandleCustomArrowNavigation && (isUp(e) || isLeft(e))) {\n\t\t\tthis._handleUp(e);\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tif (isF2(e)) {\n\t\t\te.stopImmediatePropagation();\n\t\t\tconst activeElement = getActiveElement();\n\t\t\tconst focusDomRef = this.getFocusDomRef();\n\n\t\t\tif (!focusDomRef) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (activeElement === focusDomRef) {\n\t\t\t\tconst firstFocusable = await getFirstFocusableElement(focusDomRef);\n\t\t\t\tfirstFocusable?.focus();\n\t\t\t} else {\n\t\t\t\tconst parentItem = (e.target as HTMLElement)?.closest(\"ui5-timeline-item\") as HTMLElement;\n\t\t\t\tparentItem?.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\t_handleDown() {\n\t\tif (this.growsWithButton) {\n\t\t\tthis.focusGrowingButton();\n\t\t}\n\t}\n\n\tfocusGrowingButton() {\n\t\tconst items = this._navigableItems;\n\t\tconst lastIndex = items.length - 1;\n\t\tconst currentIndex = this._itemNavigation._currentIndex;\n\n\t\tif (currentIndex !== -1 && currentIndex === lastIndex) {\n\t\t\tthis.growingButton?.focus();\n\t\t}\n\t}\n\n\t_handleUp(e: KeyboardEvent) {\n\t\tif (this.growingButton === e.target) {\n\t\t\tconst items = this._navigableItems;\n\t\t\tconst lastItem = items[items.length - 1];\n\n\t\t\tthis.focusItem(lastItem);\n\n\t\t\te.preventDefault();\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Focuses a list item and sets its tabindex to \"0\" via the ItemNavigation\n\t * @protected\n\t * @param item\n\t */\n\tfocusItem(item: ITimelineItem | ToggleButton) {\n\t\tthis._itemNavigation.setCurrentItem(item);\n\t\titem.focus();\n\t}\n\n\tget hasGroupItems() {\n\t\treturn this.items.some(item => item.isGroupItem);\n\t}\n\n\tget _navigableItems() {\n\t\tconst navigatableItems: Array<ITimelineItem | ToggleButton> = [];\n\n\t\tif (!this.items.length) {\n\t\t\treturn [];\n\t\t}\n\n\t\tthis.items.forEach(item => {\n\t\t\tif (!item.isGroupItem) {\n\t\t\t\tnavigatableItems.push(item);\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst navigatableItem = item.shadowRoot!.querySelector<ToggleButton>(\"[ui5-toggle-button]\");\n\n\t\t\tif (navigatableItem) {\n\t\t\t\tnavigatableItems.push(navigatableItem);\n\t\t\t}\n\n\t\t\tif (!item.collapsed) {\n\t\t\t\titem.items?.forEach(groupItem => {\n\t\t\t\t\tnavigatableItems.push(groupItem);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\treturn navigatableItems;\n\t}\n}\n\nTimeline.define();\n\nexport default Timeline;\nexport type {\n\tITimelineItem,\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../src/Timeline.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } 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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport {\n\tisSpace,\n\tisEnter,\n\tisUp,\n\tisDown,\n\tisLeft,\n\tisRight,\n\tisF2,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport \"./TimelineItem.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport { TIMELINE_ARIA_LABEL, TIMELINE_LOAD_MORE_BUTTON_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport TimelineTemplate from \"./TimelineTemplate.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport process from \"@ui5/webcomponents-icons/dist/process.js\";\nimport drillDown from \"@ui5/webcomponents-icons/dist/drill-down.js\";\n// Styles\nimport TimelineCss from \"./generated/themes/Timeline.css.js\";\nimport TimelineLayout from \"./types/TimelineLayout.js\";\n// Mode\nimport TimelineGrowingMode from \"./types/TimelineGrowingMode.js\";\nimport { getFirstFocusableElement } from \"@ui5/webcomponents-base/dist/util/FocusableElements.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\n\n/**\n * Interface for components that may be slotted inside `ui5-timeline` as items\n * @public\n */\ninterface ITimelineItem extends UI5Element, ITabbable {\n\tlayout: `${TimelineLayout}`;\n\tisGroupItem: boolean;\n\tforcedLineWidth?: string;\n\ticon?: string;\n\tnameClickable?: boolean;\n\tpositionInGroup?: number;\n\tcollapsed?: boolean;\n\titems?: Array<ITimelineItem>;\n\tfocusLink?(): void;\n\tlastItem: boolean;\n\tisNextItemGroup?: boolean;\n\tfirstItemInTimeline?: boolean;\n\teffectiveRole?: string;\n}\n\nconst SHORT_LINE_WIDTH = \"ShortLineWidth\";\nconst LARGE_LINE_WIDTH = \"LargeLineWidth\";\nconst GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\n * A common use case is to provide information about changes to an object, or events related to an object.\n * These entries can be generated by the system (for example, value XY changed from A to B), or added manually.\n * There are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\n * while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n *\n * ### Header and Info Bar Slots\n *\n * The Timeline exposes two named slots above the items area:\n *\n * - `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).\n * The most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open\n * a filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or\n * searching — the application listens for events from its own controls and reorders, hides, or\n * adds items in the default slot accordingly.\n *\n * - `infoBar` — for a status bar that reflects the result of the controls (active filters,\n * applied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.\n *\n * The Timeline itself does not filter, sort, or search — the application owns that logic.\n * Use `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline\n * a constrained height in this mode so it owns its scrollbar.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 0.8.0\n */\n@customElement({\n\ttag: \"ui5-timeline\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: TimelineCss,\n\ttemplate: TimelineTemplate,\n})\n\n/**\n * Fired when the user presses the `More` button or scrolls to the Timeline's end.\n *\n * **Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n * @public\n * @since 2.7.0\n */\n@event(\"load-more\", {\n\tbubbles: true,\n})\n\nclass Timeline extends UI5Element {\n\teventDetails!: {\n\t\t\"load-more\": void,\n\t}\n\t/**\n\t * Defines the items orientation.\n\t * @default \"Vertical\"\n\t * @since 1.0.0-rc.15\n\t * @public\n\t */\n\t@property()\n\tlayout: `${TimelineLayout}` = \"Vertical\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines if the component should display a loading indicator over the Timeline.\n\t *\n\t * @default false\n\t * @since 2.7.0\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the loading indicator will show up for this component.\n\t * @default 1000\n\t * @public\n\t */\n\t@property({ type: Number })\n\tloadingDelay = 1000;\n\n\t/**\n\t * Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\n\t * or via user scroll. In both cases a `load-more` event is fired.\n\t *\n\t * Available options:\n\t *\n\t * `Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\t *\n\t * `Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\t *\n\t * `None` (default) - The growing functionality is off.\n\t *\n\t * @default \"None\"\n\t * @since 2.7.0\n\t * @public\n\t */\n\t@property()\n\tgrowing: `${TimelineGrowingMode}` = \"None\";\n\n\t/**\n\t * Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.\n\t *\n\t * **Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a\n\t * constrained height (for example `style=\"height: 32rem\"`) so its items scroll\n\t * inside it. Placing the Timeline inside an externally scrolling ancestor while\n\t * leaving the Timeline itself unsized is not supported in this mode — the bars\n\t * will scroll away with the ancestor.\n\t *\n\t * @default false\n\t * @public\n\t * @since 2.22.0\n\t */\n\t@property({ type: Boolean })\n\tstickyHeader = false;\n\n\t/**\n\t * Defines the active state of the `More` button.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_loadMoreActive = false;\n\n\t/**\n\t * Determines the content of the `ui5-timeline`.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, individualSlots: true, \"default\": true })\n\titems!: DefaultSlot<ITimelineItem>;\n\n\t/**\n\t * Defines the content of the Timeline's header area, displayed above the items.\n\t * Typically a `ui5-toolbar` with search, sort, and filter controls.\n\t *\n\t * @public\n\t * @since 2.22.0\n\t */\n\t@slot()\n\theader!: Slot<HTMLElement>;\n\n\t/**\n\t * Defines the content of the Timeline's info bar area, displayed below the header\n\t * and above the items. Use for status display (applied filters, sort direction, counts).\n\t *\n\t * @public\n\t * @since 2.22.0\n\t */\n\t@slot()\n\tinfoBar!: Slot<HTMLElement>;\n\n\t@query(\".ui5-timeline-end-marker\")\n\ttimelineEndMarker!: HTMLElement;\n\n\t@query((`[id=\"ui5-timeline-growing-btn\"]`))\n\tgrowingButton!: HTMLElement;\n\n\t@query(\".ui5-timeline-scroll-container\")\n\t_scrollContainer!: HTMLElement;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_itemNavigation: ItemNavigation;\n\tgrowingIntersectionObserver?: IntersectionObserver | null;\n\ttimeLineEndObserved = false;\n\tinitialIntersection = true;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tgetItemsCallback: () => this._navigableItems,\n\t\t});\n\t}\n\n\tget ariaLabel() {\n\t\treturn this.accessibleName\n\t\t\t? `${Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL)} ${this.accessibleName}`\n\t\t\t: Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);\n\t}\n\n\tget _hasHeader(): boolean {\n\t\treturn this.header.length > 0;\n\t}\n\n\tget _hasInfoBar(): boolean {\n\t\treturn this.infoBar.length > 0;\n\t}\n\n\tget showBusyIndicatorOverlay() {\n\t\treturn !this.growsWithButton && this.loading;\n\t}\n\n\tget growsOnScroll(): boolean {\n\t\treturn this.growing === TimelineGrowingMode.Scroll;\n\t}\n\n\tget growingButtonIcon() {\n\t\treturn this.layout === TimelineLayout.Horizontal ? process : drillDown;\n\t}\n\n\tget growingButtonText() {\n\t\treturn Timeline.i18nBundle.getText(TIMELINE_LOAD_MORE_BUTTON_TEXT);\n\t}\n\n\tget growsWithButton(): boolean {\n\t\treturn this.growing === TimelineGrowingMode.Button;\n\t}\n\n\tonAfterRendering() {\n\t\tif (this.growsOnScroll) {\n\t\t\tthis.observeTimelineEnd();\n\t\t} else if (this.timeLineEndObserved) {\n\t\t\tthis.unobserveTimelineEnd();\n\t\t}\n\n\t\tthis.growingIntersectionObserver = this.getIntersectionObserver();\n\t}\n\n\tonExitDOM() {\n\t\tthis.unobserveTimelineEnd();\n\t}\n\n\tasync observeTimelineEnd() {\n\t\tif (!this.timeLineEndObserved) {\n\t\t\tawait renderFinished();\n\t\t\tthis.getIntersectionObserver().observe(this.timelineEndMarker);\n\t\t\tthis.timeLineEndObserved = true;\n\t\t}\n\t}\n\n\tunobserveTimelineEnd() {\n\t\tif (this.growingIntersectionObserver) {\n\t\t\tthis.growingIntersectionObserver.disconnect();\n\t\t\tthis.growingIntersectionObserver = null;\n\t\t\tthis.timeLineEndObserved = false;\n\t\t}\n\t}\n\n\tgetIntersectionObserver(): IntersectionObserver {\n\t\tif (!this.growingIntersectionObserver) {\n\t\t\tthis.growingIntersectionObserver = new IntersectionObserver(this.onIntersection.bind(this), {\n\t\t\t\troot: null,\n\t\t\t\tthreshold: 1.0,\n\t\t\t});\n\t\t}\n\n\t\treturn this.growingIntersectionObserver;\n\t}\n\n\tonIntersection(entries: Array<IntersectionObserverEntry>) {\n\t\tif (this.initialIntersection) {\n\t\t\tthis.initialIntersection = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (entries.some(entry => entry.isIntersecting)) {\n\t\t\tdebounce(this.loadMore.bind(this), GROWING_WITH_SCROLL_DEBOUNCE_RATE);\n\t\t}\n\t}\n\n\tloadMore() {\n\t\tthis.fireDecoratorEvent(\"load-more\");\n\t}\n\n\tgetFocusDomRef(): HTMLElement | undefined {\n\t\treturn this._itemNavigation._getCurrentItem();\n\t}\n\n\t_onLoadMoreKeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._loadMoreActive = true;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._onLoadMoreClick();\n\t\t\tthis._loadMoreActive = true;\n\t\t}\n\t}\n\n\t_onLoadMoreKeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._onLoadMoreClick();\n\t\t}\n\t\tthis._loadMoreActive = false;\n\t}\n\n\t_onLoadMoreClick() {\n\t\tthis.fireDecoratorEvent(\"load-more\");\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tlet target = e.target as ITimelineItem | ToggleButton;\n\n\t\tif ((target as ITimelineItem).isGroupItem) {\n\t\t\ttarget = target.shadowRoot!.querySelector<ToggleButton>(\"[ui5-toggle-button]\")!;\n\t\t}\n\n\t\tthis._itemNavigation.setCurrentItem(target);\n\t}\n\n\t_onwheel(e: WheelEvent) {\n\t\t// In horizontal layout, translate vertical wheel into horizontal scroll\n\t\t// so a regular mouse wheel can scroll through items.\n\t\tif (this.layout !== TimelineLayout.Horizontal || !e.deltaY || e.deltaX) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst container = this._scrollContainer;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst canScroll = container.scrollWidth > container.clientWidth;\n\t\tif (!canScroll) {\n\t\t\treturn;\n\t\t}\n\n\t\tcontainer.scrollLeft += e.deltaY;\n\t\te.preventDefault();\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._itemNavigation._navigationMode = this.layout === TimelineLayout.Horizontal ? NavigationMode.Horizontal : NavigationMode.Vertical;\n\n\t\tif (!this.items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tfor (let i = 0; i < this.items.length; i++) {\n\t\t\tthis.items[i].layout = this.layout;\n\t\t\tif (this.hasGroupItems) {\n\t\t\t\tthis.items[i].effectiveRole = \"treeitem\";\n\t\t\t} else {\n\t\t\t\tthis.items[i].effectiveRole = \"listitem\";\n\t\t\t}\n\n\t\t\tif (this.items[i + 1] && !!this.items[i + 1].icon) {\n\t\t\t\tthis.items[i].forcedLineWidth = SHORT_LINE_WIDTH;\n\t\t\t} else if (this.items[i].icon && this.items[i + 1] && !this.items[i + 1].icon) {\n\t\t\t\tthis.items[i].forcedLineWidth = LARGE_LINE_WIDTH;\n\t\t\t}\n\t\t}\n\n\t\tthis._setLastItem();\n\t\tthis._setIsNextItemGroup();\n\t\tthis.items[0].firstItemInTimeline = true;\n\t}\n\n\t_setLastItem() {\n\t\tconst items = this.items;\n\n\t\tfor (let i = 0; i < items.length; i++) {\n\t\t\titems[i].lastItem = false;\n\t\t}\n\n\t\tif (items.length > 0) {\n\t\t\titems[items.length - 1].lastItem = true;\n\t\t}\n\t}\n\n\t_setIsNextItemGroup() {\n\t\tfor (let i = 0; i < this.items.length; i++) {\n\t\t\tthis.items[i].isNextItemGroup = false;\n\t\t}\n\n\t\tfor (let i = 0; i < this.items.length; i++) {\n\t\t\tif (this.items[i + 1] && this.items[i + 1].isGroupItem) {\n\t\t\t\tthis.items[i].isNextItemGroup = true;\n\t\t\t}\n\t\t}\n\t}\n\n\tasync _onkeydown(e: KeyboardEvent) {\n\t\tconst target = e.target as ITimelineItem,\n\t\t\ttargetfocusDomRef = target?.getFocusDomRef(),\n\t\t\tshouldHandleCustomArrowNavigation = targetfocusDomRef === this.getFocusDomRef() || target === this.growingButton;\n\n\t\tif (shouldHandleCustomArrowNavigation && (isDown(e) || isRight(e))) {\n\t\t\tthis._handleDown();\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tif (shouldHandleCustomArrowNavigation && (isUp(e) || isLeft(e))) {\n\t\t\tthis._handleUp(e);\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tif (isF2(e)) {\n\t\t\te.stopImmediatePropagation();\n\t\t\tconst activeElement = getActiveElement();\n\t\t\tconst focusDomRef = this.getFocusDomRef();\n\n\t\t\tif (!focusDomRef) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (activeElement === focusDomRef) {\n\t\t\t\tconst firstFocusable = await getFirstFocusableElement(focusDomRef);\n\t\t\t\tfirstFocusable?.focus();\n\t\t\t} else {\n\t\t\t\tconst parentItem = (e.target as HTMLElement)?.closest(\"ui5-timeline-item\") as HTMLElement;\n\t\t\t\tparentItem?.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\t_handleDown() {\n\t\tif (this.growsWithButton) {\n\t\t\tthis.focusGrowingButton();\n\t\t}\n\t}\n\n\tfocusGrowingButton() {\n\t\tconst items = this._navigableItems;\n\t\tconst lastIndex = items.length - 1;\n\t\tconst currentIndex = this._itemNavigation._currentIndex;\n\n\t\tif (currentIndex !== -1 && currentIndex === lastIndex) {\n\t\t\tthis.growingButton?.focus();\n\t\t}\n\t}\n\n\t_handleUp(e: KeyboardEvent) {\n\t\tif (this.growingButton === e.target) {\n\t\t\tconst items = this._navigableItems;\n\t\t\tconst lastItem = items[items.length - 1];\n\n\t\t\tthis.focusItem(lastItem);\n\n\t\t\te.preventDefault();\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Focuses a list item and sets its tabindex to \"0\" via the ItemNavigation\n\t * @protected\n\t * @param item\n\t */\n\tfocusItem(item: ITimelineItem | ToggleButton) {\n\t\tthis._itemNavigation.setCurrentItem(item);\n\t\titem.focus();\n\t}\n\n\tget hasGroupItems() {\n\t\treturn this.items.some(item => item.isGroupItem);\n\t}\n\n\tget _navigableItems() {\n\t\tconst navigatableItems: Array<ITimelineItem | ToggleButton> = [];\n\n\t\tif (!this.items.length) {\n\t\t\treturn [];\n\t\t}\n\n\t\tthis.items.forEach(item => {\n\t\t\tif (!item.isGroupItem) {\n\t\t\t\tnavigatableItems.push(item);\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst navigatableItem = item.shadowRoot!.querySelector<ToggleButton>(\"[ui5-toggle-button]\");\n\n\t\t\tif (navigatableItem) {\n\t\t\t\tnavigatableItems.push(navigatableItem);\n\t\t\t}\n\n\t\t\tif (!item.collapsed) {\n\t\t\t\titem.items?.forEach(groupItem => {\n\t\t\t\t\tnavigatableItems.push(groupItem);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\treturn navigatableItems;\n\t}\n}\n\nTimeline.define();\n\nexport default Timeline;\nexport type {\n\tITimelineItem,\n};\n"]}
|
package/dist/TimelineTemplate.js
CHANGED
|
@@ -3,7 +3,10 @@ import Button from "@ui5/webcomponents/dist/Button.js";
|
|
|
3
3
|
import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
|
|
4
4
|
export default function TimelineTemplate() {
|
|
5
5
|
const listRole = this.hasGroupItems ? "tree" : "list";
|
|
6
|
-
return (_jsx("div", { class: "ui5-timeline-root", role: "region", "aria-label": this.ariaLabel, onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, children: _jsx(BusyIndicator, { id: `${this._id}-busyIndicator`, delay: this.loadingDelay, active: this.showBusyIndicatorOverlay, class: "ui5-timeline-busy-indicator", children:
|
|
6
|
+
return (_jsx("div", { class: "ui5-timeline-root", role: "region", "aria-label": this.ariaLabel, onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, onWheel: this._onwheel, children: _jsx(BusyIndicator, { id: `${this._id}-busyIndicator`, delay: this.loadingDelay, active: this.showBusyIndicatorOverlay, class: "ui5-timeline-busy-indicator", children: _jsxs("div", { class: "ui5-timeline-scroll-container", children: [(this._hasHeader || this._hasInfoBar) &&
|
|
7
|
+
_jsxs("div", { class: "ui5-timeline-header-area", children: [this._hasHeader &&
|
|
8
|
+
_jsx("div", { class: "ui5-timeline-header", children: _jsx("slot", { name: "header" }) }), this._hasInfoBar &&
|
|
9
|
+
_jsx("div", { class: "ui5-timeline-info-bar", children: _jsx("slot", { name: "infoBar" }) })] }), _jsxs("div", { class: "ui5-timeline-list", role: listRole, "aria-live": "polite", "aria-label": this.ariaLabel, children: [this.items.map(item => _jsx("div", { class: "ui5-timeline-list-item", children: _jsx("slot", { name: item._individualSlot }) })), this.growsWithButton && moreRow.call(this), this.growsOnScroll && endRow.call(this)] })] }) }) }));
|
|
7
10
|
}
|
|
8
11
|
function moreRow() {
|
|
9
12
|
return (_jsxs("li", { class: "ui5-timeline-list-item ui5-timeline-list-growing", children: [_jsx("div", { class: "ui5-tli-icon-outer", children: _jsx(Button, { icon: this.growingButtonIcon, id: "ui5-timeline-growing-btn", class: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineTemplate.js","sourceRoot":"","sources":["../src/TimelineTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAIrE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,MAAM,QAAQ,GAA0B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7E,OAAO,CACN,cAAK,KAAK,EAAC,mBAAmB,EAC7B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,SAAS,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"TimelineTemplate.js","sourceRoot":"","sources":["../src/TimelineTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAIrE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,MAAM,QAAQ,GAA0B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7E,OAAO,CACN,cAAK,KAAK,EAAC,mBAAmB,EAC7B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,SAAS,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,YAEtB,KAAC,aAAa,IACb,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gBAAgB,EAC/B,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,IAAI,CAAC,wBAAwB,EACrC,KAAK,EAAC,6BAA6B,YAEnC,eAAK,KAAK,EAAC,+BAA+B,aACxC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,CAAC;wBACrC,eAAK,KAAK,EAAC,0BAA0B,aACnC,IAAI,CAAC,UAAU;oCACf,cAAK,KAAK,EAAC,qBAAqB,YAC/B,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACtB,EAEN,IAAI,CAAC,WAAW;oCAChB,cAAK,KAAK,EAAC,uBAAuB,YACjC,eAAM,IAAI,EAAC,SAAS,GAAQ,GACvB,IAEF,EAEP,eAAK,KAAK,EAAC,mBAAmB,EAC7B,IAAI,EAAE,QAAQ,eACJ,QAAQ,gBACN,IAAI,CAAC,SAAS,aAEzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtB,cAAK,KAAK,EAAC,wBAAwB,YAClC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,EACC,IAAI,CAAC,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IACpC,IACD,GACS,GACX,CACN,CAAC;AACH,CAAC;AAED,SAAS,OAAO;IACf,OAAO,CACN,cAAI,KAAK,EAAC,kDAAkD,aAC3D,cAAK,KAAK,EAAC,oBAAoB,YAC9B,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EACnC,EAAE,EAAE,0BAA0B,EAC9B,KAAK,EAAE;wBACN,gCAAgC,EAAE,IAAI;wBACtC,wCAAwC,EAAE,IAAI,CAAC,eAAe;qBAC9D,EACD,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,cAAc,EAAE,IAAI,CAAC,iBAAiB,GAC7B,GACL,EACL,IAAI,CAAC,OAAO;gBACZ,KAAC,aAAa,IACb,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAC,4CAA4C,EAClD,MAAM,SACS,IAEb,CACL,CAAC;AACH,CAAC;AAED,SAAS,MAAM;IACd,OAAO,CACN,cAAK,QAAQ,EAAE,CAAC,CAAC,iBAAc,MAAM,EAAC,KAAK,EAAC,yBAAyB,YACpE,eAAM,QAAQ,EAAE,CAAC,CAAC,iBAAc,MAAM,EAAC,KAAK,EAAC,yBAAyB,GAAQ,GACzE,CACN,CAAC;AACH,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type Timeline from \"./Timeline.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\n\ntype TimelineListRole = \"list\" | \"tree\";\n\nexport default function TimelineTemplate(this: Timeline) {\n\tconst listRole: `${TimelineListRole}` = this.hasGroupItems ? \"tree\" : \"list\";\n\n\treturn (\n\t\t<div class=\"ui5-timeline-root\"\n\t\t\trole=\"region\"\n\t\t\taria-label={this.ariaLabel}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonWheel={this._onwheel}\n\t\t>\n\t\t\t<BusyIndicator\n\t\t\t\tid={`${this._id}-busyIndicator`}\n\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\tactive={this.showBusyIndicatorOverlay}\n\t\t\t\tclass=\"ui5-timeline-busy-indicator\"\n\t\t\t>\n\t\t\t\t<div class=\"ui5-timeline-scroll-container\">\n\t\t\t\t\t{(this._hasHeader || this._hasInfoBar) &&\n\t\t\t\t\t\t<div class=\"ui5-timeline-header-area\">\n\t\t\t\t\t\t\t{this._hasHeader &&\n\t\t\t\t\t\t\t\t<div class=\"ui5-timeline-header\">\n\t\t\t\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{this._hasInfoBar &&\n\t\t\t\t\t\t\t\t<div class=\"ui5-timeline-info-bar\">\n\t\t\t\t\t\t\t\t\t<slot name=\"infoBar\"></slot>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"ui5-timeline-list\"\n\t\t\t\t\t\trole={listRole}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-label={this.ariaLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.items.map(item =>\n\t\t\t\t\t\t\t<div class=\"ui5-timeline-list-item\">\n\t\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{ this.growsWithButton && moreRow.call(this) }\n\t\t\t\t\t\t{ this.growsOnScroll && endRow.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</BusyIndicator>\n\t\t</div>\n\t);\n}\n\nfunction moreRow(this: Timeline) {\n\treturn (\n\t\t<li class=\"ui5-timeline-list-item ui5-timeline-list-growing\">\n\t\t\t<div class=\"ui5-tli-icon-outer\">\n\t\t\t\t<Button icon={this.growingButtonIcon}\n\t\t\t\t\tid={\"ui5-timeline-growing-btn\"}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-timeline-growing-row-inner\": true,\n\t\t\t\t\t\t\"ui5-timeline-growing-row-inner--active\": this._loadMoreActive\n\t\t\t\t\t}}\n\t\t\t\t\ttabindex={0}\n\t\t\t\t\tonClick={this._onLoadMoreClick}\n\t\t\t\t\tonKeyDown={this._onLoadMoreKeydown}\n\t\t\t\t\tonKeyUp={this._onLoadMoreKeyup}\n\t\t\t\t\ttooltip={this.growingButtonText}\n\t\t\t\t\taccessibleName={this.growingButtonText}\n\t\t\t\t></Button>\n\t\t\t</div>\n\t\t\t{this.loading &&\n\t\t\t\t<BusyIndicator\n\t\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\t\tclass=\"ui5-timeline-growing-button-busy-indicator\"\n\t\t\t\t\tactive>\n\t\t\t\t</BusyIndicator>\n\t\t\t}\n\t\t</li>\n\t);\n}\n\nfunction endRow(this: Timeline) {\n\treturn (\n\t\t<div tabindex={-1} aria-hidden=\"true\" class=\"ui5-timeline-end-marker\">\n\t\t\t<span tabindex={-1} aria-hidden=\"true\" class=\"ui5-timeline-end-marker\"></span>\n\t\t</div>\n\t);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:host(:not([hidden])){display:block}.ui5-timeline-root{padding:var(--_ui5_tl_padding);box-sizing:border-box;overflow:hidden}.ui5-timeline-list{list-style:none;margin:0;padding:0}:host([layout="Horizontal"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:column;justify-content:center;margin-inline-start:.625rem;align-items:center;min-width:3.375rem}:host([layout="Vertical"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center}:host([layout="Horizontal"]) .ui5-timeline-end-marker{margin:-.625rem}:host([layout="Vertical"]) .ui5-timeline-list{display:flex;flex-direction:column}.ui5-timeline-list-item{margin-bottom:var(--_ui5_tl_li_margin_bottom)}.ui5-timeline-list-item:last-child{margin-bottom:0}:host([layout="Horizontal"]) .ui5-timeline-list{white-space:nowrap;list-style:none;margin:0;padding:0;display:flex}:host([layout="Horizontal"]) .ui5-timeline-list-item{display:inline-block;margin-inline-start:var(--_ui5_tl_li_margin_bottom)}:host([layout="Horizontal"]) .ui5-timeline-scroll-container{overflow:auto;width:calc(100% + var(--_ui5_timeline_scroll_container_offset))}:host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]){display:none}.ui5-timeline-root,.ui5-timeline-busy-indicator{width:100%;height:100%;position:relative;box-sizing:border-box}:host([
|
|
1
|
+
:host(:not([hidden])){display:block}.ui5-timeline-root{padding:var(--_ui5_tl_padding);box-sizing:border-box;overflow:hidden}.ui5-timeline-list{list-style:none;margin:0;padding:0}:host([layout="Horizontal"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:column;justify-content:center;margin-inline-start:.625rem;align-items:center;min-width:3.375rem}:host([layout="Vertical"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center}:host([layout="Horizontal"]) .ui5-timeline-end-marker{margin:-.625rem}:host([layout="Vertical"]) .ui5-timeline-list{display:flex;flex-direction:column}.ui5-timeline-list-item{margin-bottom:var(--_ui5_tl_li_margin_bottom)}.ui5-timeline-list-item:last-child{margin-bottom:0}:host([layout="Horizontal"]) .ui5-timeline-list{white-space:nowrap;list-style:none;margin:0;padding:0;display:flex}:host([layout="Horizontal"]) .ui5-timeline-list-item{display:inline-block;margin-inline-start:var(--_ui5_tl_li_margin_bottom)}:host([layout="Horizontal"]) .ui5-timeline-scroll-container{overflow-x:auto;overflow-y:hidden;width:calc(100% + var(--_ui5_timeline_scroll_container_offset))}:host([layout="Vertical"]) .ui5-timeline-scroll-container{height:100%;width:100%;overflow:auto}.ui5-timeline-scroll-container{display:flex;flex-direction:column}:host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]){display:none}.ui5-timeline-root,.ui5-timeline-busy-indicator{width:100%;height:100%;position:relative;box-sizing:border-box}:host([growing="Scroll"]) .ui5-timeline-end-marker{display:inline-block}.ui5-timeline-header-area{flex-shrink:0;width:100%;background:var(--sapBackgroundColor);margin-block-end:1rem}.ui5-timeline-header,.ui5-timeline-info-bar{flex-shrink:0}:host([sticky-header]) .ui5-timeline-header-area{position:sticky;top:0;inset-inline-start:0;z-index:2}
|
|
@@ -252,6 +252,24 @@
|
|
|
252
252
|
}
|
|
253
253
|
],
|
|
254
254
|
"members": [
|
|
255
|
+
{
|
|
256
|
+
"kind": "field",
|
|
257
|
+
"name": "accessibilityAttributes",
|
|
258
|
+
"type": {
|
|
259
|
+
"text": "DynamicPageAccessibilityAttributes",
|
|
260
|
+
"references": [
|
|
261
|
+
{
|
|
262
|
+
"name": "DynamicPageAccessibilityAttributes",
|
|
263
|
+
"package": "@ui5/webcomponents-fiori",
|
|
264
|
+
"module": "dist/DynamicPage.js"
|
|
265
|
+
}
|
|
266
|
+
]
|
|
267
|
+
},
|
|
268
|
+
"default": "{}",
|
|
269
|
+
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **root**: `root.role` and `root.name`.\n - **header**: `header.role` and `header.name`.\n - **content**: `content.role` and `content.name`.\n - **footer**: `footer.role` and `footer.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values per section:\n`root` — `none`, `main`, `region`;\n`header` — `none`, `banner`, `region`;\n`content` — `none`, `main`, `region`, `form`;\n`footer` — `none`, `contentinfo`, `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
|
|
270
|
+
"privacy": "public",
|
|
271
|
+
"_ui5since": "2.24.0"
|
|
272
|
+
},
|
|
255
273
|
{
|
|
256
274
|
"kind": "field",
|
|
257
275
|
"name": "headerPinned",
|
|
@@ -318,6 +336,15 @@
|
|
|
318
336
|
}
|
|
319
337
|
],
|
|
320
338
|
"attributes": [
|
|
339
|
+
{
|
|
340
|
+
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **root**: `root.role` and `root.name`.\n - **header**: `header.role` and `header.name`.\n - **content**: `content.role` and `content.name`.\n - **footer**: `footer.role` and `footer.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values per section:\n`root` — `none`, `main`, `region`;\n`header` — `none`, `banner`, `region`;\n`content` — `none`, `main`, `region`, `form`;\n`footer` — `none`, `contentinfo`, `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
|
|
341
|
+
"name": "accessibility-attributes",
|
|
342
|
+
"default": "{}",
|
|
343
|
+
"fieldName": "accessibilityAttributes",
|
|
344
|
+
"type": {
|
|
345
|
+
"text": "DynamicPageAccessibilityAttributes"
|
|
346
|
+
}
|
|
347
|
+
},
|
|
321
348
|
{
|
|
322
349
|
"description": "Defines if the header is pinned.",
|
|
323
350
|
"name": "header-pinned",
|
|
@@ -404,6 +431,30 @@
|
|
|
404
431
|
"_ui5privacy": "public"
|
|
405
432
|
}
|
|
406
433
|
],
|
|
434
|
+
"members": [
|
|
435
|
+
{
|
|
436
|
+
"kind": "field",
|
|
437
|
+
"name": "accessibleName",
|
|
438
|
+
"type": {
|
|
439
|
+
"text": "string | undefined"
|
|
440
|
+
},
|
|
441
|
+
"description": "Defines the accessible ARIA label for the header region.\nOverrides the default \"Header Expanded\" / \"Header Snapped\" text.",
|
|
442
|
+
"privacy": "public",
|
|
443
|
+
"default": "undefined",
|
|
444
|
+
"_ui5since": "2.24.0"
|
|
445
|
+
}
|
|
446
|
+
],
|
|
447
|
+
"attributes": [
|
|
448
|
+
{
|
|
449
|
+
"description": "Defines the accessible ARIA label for the header region.\nOverrides the default \"Header Expanded\" / \"Header Snapped\" text.",
|
|
450
|
+
"name": "accessible-name",
|
|
451
|
+
"default": "undefined",
|
|
452
|
+
"fieldName": "accessibleName",
|
|
453
|
+
"type": {
|
|
454
|
+
"text": "string | undefined"
|
|
455
|
+
}
|
|
456
|
+
}
|
|
457
|
+
],
|
|
407
458
|
"superclass": {
|
|
408
459
|
"name": "UI5Element",
|
|
409
460
|
"package": "@ui5/webcomponents-base",
|
|
@@ -10529,7 +10580,7 @@
|
|
|
10529
10580
|
},
|
|
10530
10581
|
{
|
|
10531
10582
|
"kind": "class",
|
|
10532
|
-
"description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.",
|
|
10583
|
+
"description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header and Info Bar Slots\n\nThe Timeline exposes two named slots above the items area:\n\n- `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).\nThe most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open\na filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or\nsearching — the application listens for events from its own controls and reorders, hides, or\nadds items in the default slot accordingly.\n\n- `infoBar` — for a status bar that reflects the result of the controls (active filters,\napplied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.\n\nThe Timeline itself does not filter, sort, or search — the application owns that logic.\nUse `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline\na constrained height in this mode so it owns its scrollbar.",
|
|
10533
10584
|
"name": "Timeline",
|
|
10534
10585
|
"slots": [
|
|
10535
10586
|
{
|
|
@@ -10547,6 +10598,24 @@
|
|
|
10547
10598
|
]
|
|
10548
10599
|
},
|
|
10549
10600
|
"_ui5privacy": "public"
|
|
10601
|
+
},
|
|
10602
|
+
{
|
|
10603
|
+
"name": "header",
|
|
10604
|
+
"description": "Defines the content of the Timeline's header area, displayed above the items.\nTypically a `ui5-toolbar` with search, sort, and filter controls.",
|
|
10605
|
+
"_ui5since": "2.22.0",
|
|
10606
|
+
"_ui5type": {
|
|
10607
|
+
"text": "Array<HTMLElement>"
|
|
10608
|
+
},
|
|
10609
|
+
"_ui5privacy": "public"
|
|
10610
|
+
},
|
|
10611
|
+
{
|
|
10612
|
+
"name": "infoBar",
|
|
10613
|
+
"description": "Defines the content of the Timeline's info bar area, displayed below the header\nand above the items. Use for status display (applied filters, sort direction, counts).",
|
|
10614
|
+
"_ui5since": "2.22.0",
|
|
10615
|
+
"_ui5type": {
|
|
10616
|
+
"text": "Array<HTMLElement>"
|
|
10617
|
+
},
|
|
10618
|
+
"_ui5privacy": "public"
|
|
10550
10619
|
}
|
|
10551
10620
|
],
|
|
10552
10621
|
"members": [
|
|
@@ -10617,6 +10686,17 @@
|
|
|
10617
10686
|
"default": "1000",
|
|
10618
10687
|
"description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
|
|
10619
10688
|
"privacy": "public"
|
|
10689
|
+
},
|
|
10690
|
+
{
|
|
10691
|
+
"kind": "field",
|
|
10692
|
+
"name": "stickyHeader",
|
|
10693
|
+
"type": {
|
|
10694
|
+
"text": "boolean"
|
|
10695
|
+
},
|
|
10696
|
+
"default": "false",
|
|
10697
|
+
"description": "Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.\n\n**Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a\nconstrained height (for example `style=\"height: 32rem\"`) so its items scroll\ninside it. Placing the Timeline inside an externally scrolling ancestor while\nleaving the Timeline itself unsized is not supported in this mode — the bars\nwill scroll away with the ancestor.",
|
|
10698
|
+
"privacy": "public",
|
|
10699
|
+
"_ui5since": "2.22.0"
|
|
10620
10700
|
}
|
|
10621
10701
|
],
|
|
10622
10702
|
"events": [
|
|
@@ -10678,6 +10758,15 @@
|
|
|
10678
10758
|
"type": {
|
|
10679
10759
|
"text": "number"
|
|
10680
10760
|
}
|
|
10761
|
+
},
|
|
10762
|
+
{
|
|
10763
|
+
"description": "Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.\n\n**Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a\nconstrained height (for example `style=\"height: 32rem\"`) so its items scroll\ninside it. Placing the Timeline inside an externally scrolling ancestor while\nleaving the Timeline itself unsized is not supported in this mode — the bars\nwill scroll away with the ancestor.",
|
|
10764
|
+
"name": "sticky-header",
|
|
10765
|
+
"default": "false",
|
|
10766
|
+
"fieldName": "stickyHeader",
|
|
10767
|
+
"type": {
|
|
10768
|
+
"text": "boolean"
|
|
10769
|
+
}
|
|
10681
10770
|
}
|
|
10682
10771
|
],
|
|
10683
10772
|
"superclass": {
|
|
@@ -167,6 +167,23 @@
|
|
|
167
167
|
}
|
|
168
168
|
],
|
|
169
169
|
"members": [
|
|
170
|
+
{
|
|
171
|
+
"kind": "field",
|
|
172
|
+
"name": "accessibilityAttributes",
|
|
173
|
+
"type": {
|
|
174
|
+
"text": "DynamicPageAccessibilityAttributes",
|
|
175
|
+
"references": [
|
|
176
|
+
{
|
|
177
|
+
"name": "DynamicPageAccessibilityAttributes",
|
|
178
|
+
"package": "@ui5/webcomponents-fiori",
|
|
179
|
+
"module": "dist/DynamicPage.js"
|
|
180
|
+
}
|
|
181
|
+
]
|
|
182
|
+
},
|
|
183
|
+
"default": "{}",
|
|
184
|
+
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **root**: `root.role` and `root.name`.\n - **header**: `header.role` and `header.name`.\n - **content**: `content.role` and `content.name`.\n - **footer**: `footer.role` and `footer.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values per section:\n`root` — `none`, `main`, `region`;\n`header` — `none`, `banner`, `region`;\n`content` — `none`, `main`, `region`, `form`;\n`footer` — `none`, `contentinfo`, `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
|
|
185
|
+
"privacy": "public"
|
|
186
|
+
},
|
|
170
187
|
{
|
|
171
188
|
"kind": "field",
|
|
172
189
|
"name": "headerPinned",
|
|
@@ -225,6 +242,15 @@
|
|
|
225
242
|
}
|
|
226
243
|
],
|
|
227
244
|
"attributes": [
|
|
245
|
+
{
|
|
246
|
+
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **root**: `root.role` and `root.name`.\n - **header**: `header.role` and `header.name`.\n - **content**: `content.role` and `content.name`.\n - **footer**: `footer.role` and `footer.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values per section:\n`root` — `none`, `main`, `region`;\n`header` — `none`, `banner`, `region`;\n`content` — `none`, `main`, `region`, `form`;\n`footer` — `none`, `contentinfo`, `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
|
|
247
|
+
"name": "accessibility-attributes",
|
|
248
|
+
"default": "{}",
|
|
249
|
+
"fieldName": "accessibilityAttributes",
|
|
250
|
+
"type": {
|
|
251
|
+
"text": "DynamicPageAccessibilityAttributes"
|
|
252
|
+
}
|
|
253
|
+
},
|
|
228
254
|
{
|
|
229
255
|
"description": "Defines if the header is pinned.",
|
|
230
256
|
"name": "header-pinned",
|
|
@@ -304,6 +330,29 @@
|
|
|
304
330
|
"description": "Defines the content of the Dynamic Page Header."
|
|
305
331
|
}
|
|
306
332
|
],
|
|
333
|
+
"members": [
|
|
334
|
+
{
|
|
335
|
+
"kind": "field",
|
|
336
|
+
"name": "accessibleName",
|
|
337
|
+
"type": {
|
|
338
|
+
"text": "string | undefined"
|
|
339
|
+
},
|
|
340
|
+
"description": "Defines the accessible ARIA label for the header region.\nOverrides the default \"Header Expanded\" / \"Header Snapped\" text.",
|
|
341
|
+
"privacy": "public",
|
|
342
|
+
"default": "undefined"
|
|
343
|
+
}
|
|
344
|
+
],
|
|
345
|
+
"attributes": [
|
|
346
|
+
{
|
|
347
|
+
"description": "Defines the accessible ARIA label for the header region.\nOverrides the default \"Header Expanded\" / \"Header Snapped\" text.",
|
|
348
|
+
"name": "accessible-name",
|
|
349
|
+
"default": "undefined",
|
|
350
|
+
"fieldName": "accessibleName",
|
|
351
|
+
"type": {
|
|
352
|
+
"text": "string | undefined"
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
],
|
|
307
356
|
"superclass": {
|
|
308
357
|
"name": "UI5Element",
|
|
309
358
|
"package": "@ui5/webcomponents-base",
|
|
@@ -8384,12 +8433,20 @@
|
|
|
8384
8433
|
"declarations": [
|
|
8385
8434
|
{
|
|
8386
8435
|
"kind": "class",
|
|
8387
|
-
"description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.",
|
|
8436
|
+
"description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header and Info Bar Slots\n\nThe Timeline exposes two named slots above the items area:\n\n- `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).\nThe most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open\na filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or\nsearching — the application listens for events from its own controls and reorders, hides, or\nadds items in the default slot accordingly.\n\n- `infoBar` — for a status bar that reflects the result of the controls (active filters,\napplied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.\n\nThe Timeline itself does not filter, sort, or search — the application owns that logic.\nUse `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline\na constrained height in this mode so it owns its scrollbar.",
|
|
8388
8437
|
"name": "Timeline",
|
|
8389
8438
|
"slots": [
|
|
8390
8439
|
{
|
|
8391
8440
|
"name": "default",
|
|
8392
8441
|
"description": "Determines the content of the `ui5-timeline`."
|
|
8442
|
+
},
|
|
8443
|
+
{
|
|
8444
|
+
"name": "header",
|
|
8445
|
+
"description": "Defines the content of the Timeline's header area, displayed above the items.\nTypically a `ui5-toolbar` with search, sort, and filter controls."
|
|
8446
|
+
},
|
|
8447
|
+
{
|
|
8448
|
+
"name": "infoBar",
|
|
8449
|
+
"description": "Defines the content of the Timeline's info bar area, displayed below the header\nand above the items. Use for status display (applied filters, sort direction, counts)."
|
|
8393
8450
|
}
|
|
8394
8451
|
],
|
|
8395
8452
|
"members": [
|
|
@@ -8456,6 +8513,16 @@
|
|
|
8456
8513
|
"default": "1000",
|
|
8457
8514
|
"description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
|
|
8458
8515
|
"privacy": "public"
|
|
8516
|
+
},
|
|
8517
|
+
{
|
|
8518
|
+
"kind": "field",
|
|
8519
|
+
"name": "stickyHeader",
|
|
8520
|
+
"type": {
|
|
8521
|
+
"text": "boolean"
|
|
8522
|
+
},
|
|
8523
|
+
"default": "false",
|
|
8524
|
+
"description": "Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.\n\n**Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a\nconstrained height (for example `style=\"height: 32rem\"`) so its items scroll\ninside it. Placing the Timeline inside an externally scrolling ancestor while\nleaving the Timeline itself unsized is not supported in this mode — the bars\nwill scroll away with the ancestor.",
|
|
8525
|
+
"privacy": "public"
|
|
8459
8526
|
}
|
|
8460
8527
|
],
|
|
8461
8528
|
"events": [
|
|
@@ -8512,6 +8579,15 @@
|
|
|
8512
8579
|
"type": {
|
|
8513
8580
|
"text": "number"
|
|
8514
8581
|
}
|
|
8582
|
+
},
|
|
8583
|
+
{
|
|
8584
|
+
"description": "Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.\n\n**Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a\nconstrained height (for example `style=\"height: 32rem\"`) so its items scroll\ninside it. Placing the Timeline inside an externally scrolling ancestor while\nleaving the Timeline itself unsized is not supported in this mode — the bars\nwill scroll away with the ancestor.",
|
|
8585
|
+
"name": "sticky-header",
|
|
8586
|
+
"default": "false",
|
|
8587
|
+
"fieldName": "stickyHeader",
|
|
8588
|
+
"type": {
|
|
8589
|
+
"text": "boolean"
|
|
8590
|
+
}
|
|
8515
8591
|
}
|
|
8516
8592
|
],
|
|
8517
8593
|
"superclass": {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: ":host(:not([hidden])){display:block}.ui5-timeline-root{padding:var(--_ui5_tl_padding);box-sizing:border-box;overflow:hidden}.ui5-timeline-list{list-style:none;margin:0;padding:0}:host([layout=\"Horizontal\"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:column;justify-content:center;margin-inline-start:.625rem;align-items:center;min-width:3.375rem}:host([layout=\"Vertical\"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center}:host([layout=\"Horizontal\"]) .ui5-timeline-end-marker{margin:-.625rem}:host([layout=\"Vertical\"]) .ui5-timeline-list{display:flex;flex-direction:column}.ui5-timeline-list-item{margin-bottom:var(--_ui5_tl_li_margin_bottom)}.ui5-timeline-list-item:last-child{margin-bottom:0}:host([layout=\"Horizontal\"]) .ui5-timeline-list{white-space:nowrap;list-style:none;margin:0;padding:0;display:flex}:host([layout=\"Horizontal\"]) .ui5-timeline-list-item{display:inline-block;margin-inline-start:var(--_ui5_tl_li_margin_bottom)}:host([layout=\"Horizontal\"]) .ui5-timeline-scroll-container{overflow:auto;width:calc(100% + var(--_ui5_timeline_scroll_container_offset))}:host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]){display:none}.ui5-timeline-root,.ui5-timeline-busy-indicator{width:100%;height:100%;position:relative;box-sizing:border-box}:host([
|
|
1
|
+
declare const _default: ":host(:not([hidden])){display:block}.ui5-timeline-root{padding:var(--_ui5_tl_padding);box-sizing:border-box;overflow:hidden}.ui5-timeline-list{list-style:none;margin:0;padding:0}:host([layout=\"Horizontal\"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:column;justify-content:center;margin-inline-start:.625rem;align-items:center;min-width:3.375rem}:host([layout=\"Vertical\"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center}:host([layout=\"Horizontal\"]) .ui5-timeline-end-marker{margin:-.625rem}:host([layout=\"Vertical\"]) .ui5-timeline-list{display:flex;flex-direction:column}.ui5-timeline-list-item{margin-bottom:var(--_ui5_tl_li_margin_bottom)}.ui5-timeline-list-item:last-child{margin-bottom:0}:host([layout=\"Horizontal\"]) .ui5-timeline-list{white-space:nowrap;list-style:none;margin:0;padding:0;display:flex}:host([layout=\"Horizontal\"]) .ui5-timeline-list-item{display:inline-block;margin-inline-start:var(--_ui5_tl_li_margin_bottom)}:host([layout=\"Horizontal\"]) .ui5-timeline-scroll-container{overflow-x:auto;overflow-y:hidden;width:calc(100% + var(--_ui5_timeline_scroll_container_offset))}:host([layout=\"Vertical\"]) .ui5-timeline-scroll-container{height:100%;width:100%;overflow:auto}.ui5-timeline-scroll-container{display:flex;flex-direction:column}:host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]){display:none}.ui5-timeline-root,.ui5-timeline-busy-indicator{width:100%;height:100%;position:relative;box-sizing:border-box}:host([growing=\"Scroll\"]) .ui5-timeline-end-marker{display:inline-block}.ui5-timeline-header-area{flex-shrink:0;width:100%;background:var(--sapBackgroundColor);margin-block-end:1rem}.ui5-timeline-header,.ui5-timeline-info-bar{flex-shrink:0}:host([sticky-header]) .ui5-timeline-header-area{position:sticky;top:0;inset-inline-start:0;z-index:2}\n";
|
|
2
2
|
export default _default;
|
|
@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
|
|
|
3
3
|
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
4
4
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
5
5
|
registerThemePropertiesLoader("@" + "u" + "i" + "5" + "/" + "w" + "e" + "b" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s" + "-" + "f" + "i" + "o" + "r" + "i", "sap_horizon", async () => defaultTheme, "host");
|
|
6
|
-
export default `:host(:not([hidden])){display:block}.ui5-timeline-root{padding:var(--_ui5_tl_padding);box-sizing:border-box;overflow:hidden}.ui5-timeline-list{list-style:none;margin:0;padding:0}:host([layout="Horizontal"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:column;justify-content:center;margin-inline-start:.625rem;align-items:center;min-width:3.375rem}:host([layout="Vertical"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center}:host([layout="Horizontal"]) .ui5-timeline-end-marker{margin:-.625rem}:host([layout="Vertical"]) .ui5-timeline-list{display:flex;flex-direction:column}.ui5-timeline-list-item{margin-bottom:var(--_ui5_tl_li_margin_bottom)}.ui5-timeline-list-item:last-child{margin-bottom:0}:host([layout="Horizontal"]) .ui5-timeline-list{white-space:nowrap;list-style:none;margin:0;padding:0;display:flex}:host([layout="Horizontal"]) .ui5-timeline-list-item{display:inline-block;margin-inline-start:var(--_ui5_tl_li_margin_bottom)}:host([layout="Horizontal"]) .ui5-timeline-scroll-container{overflow:auto;width:calc(100% + var(--_ui5_timeline_scroll_container_offset))}:host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]){display:none}.ui5-timeline-root,.ui5-timeline-busy-indicator{width:100%;height:100%;position:relative;box-sizing:border-box}:host([
|
|
6
|
+
export default `:host(:not([hidden])){display:block}.ui5-timeline-root{padding:var(--_ui5_tl_padding);box-sizing:border-box;overflow:hidden}.ui5-timeline-list{list-style:none;margin:0;padding:0}:host([layout="Horizontal"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:column;justify-content:center;margin-inline-start:.625rem;align-items:center;min-width:3.375rem}:host([layout="Vertical"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center}:host([layout="Horizontal"]) .ui5-timeline-end-marker{margin:-.625rem}:host([layout="Vertical"]) .ui5-timeline-list{display:flex;flex-direction:column}.ui5-timeline-list-item{margin-bottom:var(--_ui5_tl_li_margin_bottom)}.ui5-timeline-list-item:last-child{margin-bottom:0}:host([layout="Horizontal"]) .ui5-timeline-list{white-space:nowrap;list-style:none;margin:0;padding:0;display:flex}:host([layout="Horizontal"]) .ui5-timeline-list-item{display:inline-block;margin-inline-start:var(--_ui5_tl_li_margin_bottom)}:host([layout="Horizontal"]) .ui5-timeline-scroll-container{overflow-x:auto;overflow-y:hidden;width:calc(100% + var(--_ui5_timeline_scroll_container_offset))}:host([layout="Vertical"]) .ui5-timeline-scroll-container{height:100%;width:100%;overflow:auto}.ui5-timeline-scroll-container{display:flex;flex-direction:column}:host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]){display:none}.ui5-timeline-root,.ui5-timeline-busy-indicator{width:100%;height:100%;position:relative;box-sizing:border-box}:host([growing="Scroll"]) .ui5-timeline-end-marker{display:inline-block}.ui5-timeline-header-area{flex-shrink:0;width:100%;background:var(--sapBackgroundColor);margin-block-end:1rem}.ui5-timeline-header,.ui5-timeline-info-bar{flex-shrink:0}:host([sticky-header]) .ui5-timeline-header-area{position:sticky;top:0;inset-inline-start:0;z-index:2}
|
|
7
7
|
`;
|
|
8
8
|
//# sourceMappingURL=Timeline.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Timeline.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC9N,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\" + \"-\" + \"f\" + \"i\" + \"o\" + \"r\" + \"i\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host(:not([hidden])){display:block}.ui5-timeline-root{padding:var(--_ui5_tl_padding);box-sizing:border-box;overflow:hidden}.ui5-timeline-list{list-style:none;margin:0;padding:0}:host([layout=\"Horizontal\"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:column;justify-content:center;margin-inline-start:.625rem;align-items:center;min-width:3.375rem}:host([layout=\"Vertical\"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center}:host([layout=\"Horizontal\"]) .ui5-timeline-end-marker{margin:-.625rem}:host([layout=\"Vertical\"]) .ui5-timeline-list{display:flex;flex-direction:column}.ui5-timeline-list-item{margin-bottom:var(--_ui5_tl_li_margin_bottom)}.ui5-timeline-list-item:last-child{margin-bottom:0}:host([layout=\"Horizontal\"]) .ui5-timeline-list{white-space:nowrap;list-style:none;margin:0;padding:0;display:flex}:host([layout=\"Horizontal\"]) .ui5-timeline-list-item{display:inline-block;margin-inline-start:var(--_ui5_tl_li_margin_bottom)}:host([layout=\"Horizontal\"]) .ui5-timeline-scroll-container{overflow:auto;width:calc(100% + var(--_ui5_timeline_scroll_container_offset))}:host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]){display:none}.ui5-timeline-root,.ui5-timeline-busy-indicator{width:100%;height:100%;position:relative;box-sizing:border-box}:host([
|
|
1
|
+
{"version":3,"file":"Timeline.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Timeline.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC9N,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\" + \"-\" + \"f\" + \"i\" + \"o\" + \"r\" + \"i\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host(:not([hidden])){display:block}.ui5-timeline-root{padding:var(--_ui5_tl_padding);box-sizing:border-box;overflow:hidden}.ui5-timeline-list{list-style:none;margin:0;padding:0}:host([layout=\"Horizontal\"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:column;justify-content:center;margin-inline-start:.625rem;align-items:center;min-width:3.375rem}:host([layout=\"Vertical\"]) .ui5-timeline-list-item.ui5-timeline-list-growing{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center}:host([layout=\"Horizontal\"]) .ui5-timeline-end-marker{margin:-.625rem}:host([layout=\"Vertical\"]) .ui5-timeline-list{display:flex;flex-direction:column}.ui5-timeline-list-item{margin-bottom:var(--_ui5_tl_li_margin_bottom)}.ui5-timeline-list-item:last-child{margin-bottom:0}:host([layout=\"Horizontal\"]) .ui5-timeline-list{white-space:nowrap;list-style:none;margin:0;padding:0;display:flex}:host([layout=\"Horizontal\"]) .ui5-timeline-list-item{display:inline-block;margin-inline-start:var(--_ui5_tl_li_margin_bottom)}:host([layout=\"Horizontal\"]) .ui5-timeline-scroll-container{overflow-x:auto;overflow-y:hidden;width:calc(100% + var(--_ui5_timeline_scroll_container_offset))}:host([layout=\"Vertical\"]) .ui5-timeline-scroll-container{height:100%;width:100%;overflow:auto}.ui5-timeline-scroll-container{display:flex;flex-direction:column}:host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]){display:none}.ui5-timeline-root,.ui5-timeline-busy-indicator{width:100%;height:100%;position:relative;box-sizing:border-box}:host([growing=\"Scroll\"]) .ui5-timeline-end-marker{display:inline-block}.ui5-timeline-header-area{flex-shrink:0;width:100%;background:var(--sapBackgroundColor);margin-block-end:1rem}.ui5-timeline-header,.ui5-timeline-info-bar{flex-shrink:0}:host([sticky-header]) .ui5-timeline-header-area{position:sticky;top:0;inset-inline-start:0;z-index:2}\n`"]}
|
|
@@ -17,6 +17,11 @@
|
|
|
17
17
|
"name": "ui5-dynamic-page",
|
|
18
18
|
"description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe 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\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe 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),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll 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\nDynamic 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.\nIf 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).\nIf 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`.\nIn 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\n---\n\n\n\n\n### **Events:**\n - **pin-button-toggle** - Fired when the pin header button is toggled.\n- **title-toggle** - Fired when the expand/collapse area of the title is toggled.\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page.\n- **footerArea** - Defines the footer HTML Element.\n- **headerArea** - Defines the header HTML Element.\n- **titleArea** - Defines the title HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **fit-content** - Used to style the fit content container of the component.\n- **footer** - Used to style the footer of the component",
|
|
19
19
|
"attributes": [
|
|
20
|
+
{
|
|
21
|
+
"name": "accessibility-attributes",
|
|
22
|
+
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **root**: `root.role` and `root.name`.\n - **header**: `header.role` and `header.name`.\n - **content**: `content.role` and `content.name`.\n - **footer**: `footer.role` and `footer.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values per section:\n`root` — `none`, `main`, `region`;\n`header` — `none`, `banner`, `region`;\n`content` — `none`, `main`, `region`, `form`;\n`footer` — `none`, `contentinfo`, `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
|
|
23
|
+
"values": [{ "name": "DynamicPageAccessibilityAttributes" }]
|
|
24
|
+
},
|
|
20
25
|
{
|
|
21
26
|
"name": "header-pinned",
|
|
22
27
|
"description": "Defines if the header is pinned.",
|
|
@@ -43,7 +48,13 @@
|
|
|
43
48
|
{
|
|
44
49
|
"name": "ui5-dynamic-page-header",
|
|
45
50
|
"description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page Header.",
|
|
46
|
-
"attributes": [
|
|
51
|
+
"attributes": [
|
|
52
|
+
{
|
|
53
|
+
"name": "accessible-name",
|
|
54
|
+
"description": "Defines the accessible ARIA label for the header region.\nOverrides the default \"Header Expanded\" / \"Header Snapped\" text.",
|
|
55
|
+
"values": []
|
|
56
|
+
}
|
|
57
|
+
],
|
|
47
58
|
"references": []
|
|
48
59
|
},
|
|
49
60
|
{
|
|
@@ -1236,7 +1247,7 @@
|
|
|
1236
1247
|
},
|
|
1237
1248
|
{
|
|
1238
1249
|
"name": "ui5-timeline",
|
|
1239
|
-
"description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n\n---\n\n\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline
|
|
1250
|
+
"description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header and Info Bar Slots\n\nThe Timeline exposes two named slots above the items area:\n\n- `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).\nThe most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open\na filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or\nsearching — the application listens for events from its own controls and reorders, hides, or\nadds items in the default slot accordingly.\n\n- `infoBar` — for a status bar that reflects the result of the controls (active filters,\napplied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.\n\nThe Timeline itself does not filter, sort, or search — the application owns that logic.\nUse `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline\na constrained height in this mode so it owns its scrollbar.\n\n\n---\n\n\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.\n- **header** - Defines the content of the Timeline's header area, displayed above the items.\nTypically a `ui5-toolbar` with search, sort, and filter controls.\n- **infoBar** - Defines the content of the Timeline's info bar area, displayed below the header\nand above the items. Use for status display (applied filters, sort direction, counts).",
|
|
1240
1251
|
"attributes": [
|
|
1241
1252
|
{
|
|
1242
1253
|
"name": "accessible-name",
|
|
@@ -1266,6 +1277,11 @@
|
|
|
1266
1277
|
"name": "loading-delay",
|
|
1267
1278
|
"description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
|
|
1268
1279
|
"values": []
|
|
1280
|
+
},
|
|
1281
|
+
{
|
|
1282
|
+
"name": "sticky-header",
|
|
1283
|
+
"description": "Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.\n\n**Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a\nconstrained height (for example `style=\"height: 32rem\"`) so its items scroll\ninside it. Placing the Timeline inside an externally scrolling ancestor while\nleaving the Timeline itself unsized is not supported in this mode — the bars\nwill scroll away with the ancestor.",
|
|
1284
|
+
"values": []
|
|
1269
1285
|
}
|
|
1270
1286
|
],
|
|
1271
1287
|
"references": []
|