@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/dist/Timeline.js

@@ -1,99 +1,373 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Timeline_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import { isTabNext, isTabPrevious, isSpace, isEnter, isUp, isDown, isLeft, isRight, } from "@ui5/webcomponents-base/dist/Keys.js";
+import "./TimelineItem.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
+import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
-import TimelineItem from "./TimelineItem.js";
-
+import TimelineTemplate from "./TimelineTemplate.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import process from "@ui5/webcomponents-icons/dist/process.js";
+import drillDown from "@ui5/webcomponents-icons/dist/drill-down.js";
 // Styles
-import styles from "./generated/themes/Timeline.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-timeline",
-	languageAware: true,
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.Timeline.prototype */ {
-		/**
-		 * Determines the content of the <code>ui5-timeline</code>.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			propertyName: "items",
-			type: HTMLElement,
-			individualSlots: true,
-		},
-	},
-};
-
+import TimelineCss from "./generated/themes/Timeline.css.js";
+import TimelineLayout from "./types/TimelineLayout.js";
+// Mode
+import TimelineGrowingMode from "./types/TimelineGrowingMode.js";
+const SHORT_LINE_WIDTH = "ShortLineWidth";
+const LARGE_LINE_WIDTH = "LargeLineWidth";
+const GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-timeline</code> component shows entries (such as objects, events, or posts) in chronological order.
+ * The `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.
  * A common use case is to provide information about changes to an object, or events related to an object.
  * These entries can be generated by the system (for example, value XY changed from A to B), or added manually.
  * There are two distinct variants of the timeline: basic and social. The basic timeline is read-only,
  * while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
- *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.Timeline
  * @extends UI5Element
- * @tagname ui5-timeline
- * @appenddocs TimelineItem
  * @public
  * @since 0.8.0
  */
-class Timeline extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TimelineTemplate;
-	}
-
-	constructor() {
-		super();
-
-		this.initItemNavigation();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
-	}
-
-	static get dependencies() {
-		return [TimelineItem];
-	}
-
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
-	}
-
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
-		this._itemNavigation.getItemsCallback = () => this.items;
-	}
-
-	get ariaLabel() {
-		return this.i18nBundle.getText(TIMELINE_ARIA_LABEL);
-	}
-}
-
+let Timeline = Timeline_1 = class Timeline extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the items orientation.
+         * @default "Vertical"
+         * @since 1.0.0-rc.15
+         * @public
+         */
+        this.layout = "Vertical";
+        /**
+         * Defines if the component should display a loading indicator over the Timeline.
+         *
+         * @default false
+         * @since 2.7.0
+         * @public
+         */
+        this.loading = false;
+        /**
+         * Defines the delay in milliseconds, after which the loading indicator will show up for this component.
+         * @default 1000
+         * @public
+         */
+        this.loadingDelay = 1000;
+        /**
+         * Defines whether the Timeline will have growing capability either by pressing a "More" button,
+         * or via user scroll. In both cases a `load-more` event is fired.
+         *
+         * Available options:
+         *
+         * `Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.
+         *
+         * `Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.
+         *
+         * `None` (default) - The growing functionality is off.
+         *
+         * @default "None"
+         * @since 2.7.0
+         * @public
+         */
+        this.growing = "None";
+        /**
+         * Defines the active state of the `More` button.
+         * @private
+         */
+        this._loadMoreActive = false;
+        this.timeLineEndObserved = false;
+        this.initialIntersection = true;
+        this._itemNavigation = new ItemNavigation(this, {
+            getItemsCallback: () => this._navigableItems,
+        });
+    }
+    get ariaLabel() {
+        return this.accessibleName
+            ? `${Timeline_1.i18nBundle.getText(TIMELINE_ARIA_LABEL)} ${this.accessibleName}`
+            : Timeline_1.i18nBundle.getText(TIMELINE_ARIA_LABEL);
+    }
+    get showBusyIndicatorOverlay() {
+        return !this.growsWithButton && this.loading;
+    }
+    get growsOnScroll() {
+        return this.growing === TimelineGrowingMode.Scroll;
+    }
+    get growingButtonIcon() {
+        return this.layout === TimelineLayout.Horizontal ? process : drillDown;
+    }
+    get growsWithButton() {
+        return this.growing === TimelineGrowingMode.Button;
+    }
+    onAfterRendering() {
+        if (this.growsOnScroll) {
+            this.observeTimelineEnd();
+        }
+        else if (this.timeLineEndObserved) {
+            this.unobserveTimelineEnd();
+        }
+        this.growingIntersectionObserver = this.getIntersectionObserver();
+    }
+    onExitDOM() {
+        this.unobserveTimelineEnd();
+    }
+    async observeTimelineEnd() {
+        if (!this.timeLineEndObserved) {
+            await renderFinished();
+            this.getIntersectionObserver().observe(this.timelineEndMarker);
+            this.timeLineEndObserved = true;
+        }
+    }
+    unobserveTimelineEnd() {
+        if (this.growingIntersectionObserver) {
+            this.growingIntersectionObserver.disconnect();
+            this.growingIntersectionObserver = null;
+            this.timeLineEndObserved = false;
+        }
+    }
+    getIntersectionObserver() {
+        if (!this.growingIntersectionObserver) {
+            this.growingIntersectionObserver = new IntersectionObserver(this.onIntersection.bind(this), {
+                root: null,
+                threshold: 1.0,
+            });
+        }
+        return this.growingIntersectionObserver;
+    }
+    onIntersection(entries) {
+        if (this.initialIntersection) {
+            this.initialIntersection = false;
+            return;
+        }
+        if (entries.some(entry => entry.isIntersecting)) {
+            debounce(this.loadMore.bind(this), GROWING_WITH_SCROLL_DEBOUNCE_RATE);
+        }
+    }
+    loadMore() {
+        this.fireDecoratorEvent("load-more");
+    }
+    _onLoadMoreKeydown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+            this._loadMoreActive = true;
+        }
+        if (isEnter(e)) {
+            this._onLoadMoreClick();
+            this._loadMoreActive = true;
+        }
+    }
+    _onLoadMoreKeyup(e) {
+        if (isSpace(e)) {
+            this._onLoadMoreClick();
+        }
+        this._loadMoreActive = false;
+    }
+    _onLoadMoreClick() {
+        this.fireDecoratorEvent("load-more");
+    }
+    _onfocusin(e) {
+        let target = e.target;
+        if (target.isGroupItem) {
+            target = target.shadowRoot.querySelector("[ui5-toggle-button]");
+        }
+        this._itemNavigation.setCurrentItem(target);
+    }
+    onBeforeRendering() {
+        this._itemNavigation._navigationMode = this.layout === TimelineLayout.Horizontal ? NavigationMode.Horizontal : NavigationMode.Vertical;
+        if (!this.items.length) {
+            return;
+        }
+        for (let i = 0; i < this.items.length; i++) {
+            this.items[i].layout = this.layout;
+            if (this.items[i + 1] && !!this.items[i + 1].icon) {
+                this.items[i].forcedLineWidth = SHORT_LINE_WIDTH;
+            }
+            else if (this.items[i].icon && this.items[i + 1] && !this.items[i + 1].icon) {
+                this.items[i].forcedLineWidth = LARGE_LINE_WIDTH;
+            }
+        }
+        this._setLastItem();
+        this._setIsNextItemGroup();
+        this.items[0].firstItemInTimeline = true;
+    }
+    _setLastItem() {
+        const items = this.items;
+        for (let i = 0; i < items.length; i++) {
+            items[i].lastItem = false;
+        }
+        if (items.length > 0) {
+            items[items.length - 1].lastItem = true;
+        }
+    }
+    _setIsNextItemGroup() {
+        for (let i = 0; i < this.items.length; i++) {
+            this.items[i].isNextItemGroup = false;
+        }
+        for (let i = 0; i < this.items.length; i++) {
+            if (this.items[i + 1] && this.items[i + 1].isGroupItem) {
+                this.items[i].isNextItemGroup = true;
+            }
+        }
+    }
+    _onkeydown(e) {
+        const target = e.target;
+        if (isDown(e) || isRight(e)) {
+            this._handleDown();
+            e.preventDefault();
+            return;
+        }
+        if (isUp(e) || isLeft(e)) {
+            this._handleUp(e);
+            e.preventDefault();
+            return;
+        }
+        if (target.nameClickable && !target.getFocusDomRef().matches(":has(:focus-within)")) {
+            return;
+        }
+        if (isTabNext(e)) {
+            this._handleNextOrPreviousItem(e, true);
+        }
+        else if (isTabPrevious(e)) {
+            this._handleNextOrPreviousItem(e);
+        }
+    }
+    _handleNextOrPreviousItem(e, isNext) {
+        const target = e.target;
+        let updatedTarget = target;
+        if (target.isGroupItem) {
+            updatedTarget = target.shadowRoot.querySelector("[ui5-toggle-button]");
+        }
+        const nextTargetIndex = isNext ? this._navigableItems.indexOf(updatedTarget) + 1 : this._navigableItems.indexOf(updatedTarget) - 1;
+        const nextTarget = this._navigableItems[nextTargetIndex];
+        if (!nextTarget) {
+            return;
+        }
+        if (nextTarget) {
+            e.preventDefault();
+            nextTarget.focus();
+            this._itemNavigation.setCurrentItem(nextTarget);
+        }
+    }
+    _handleDown() {
+        if (this.growsWithButton) {
+            this.focusGrowingButton();
+        }
+    }
+    focusGrowingButton() {
+        const items = this._navigableItems;
+        const lastIndex = items.length - 1;
+        const currentIndex = this._itemNavigation._currentIndex;
+        if (currentIndex !== -1 && currentIndex === lastIndex) {
+            this.growingButton?.focus();
+        }
+    }
+    _handleUp(e) {
+        if (this.growingButton === e.target) {
+            const items = this._navigableItems;
+            const lastItem = items[items.length - 1];
+            this.focusItem(lastItem);
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+    }
+    /**
+     * Focuses a list item and sets its tabindex to "0" via the ItemNavigation
+     * @protected
+     * @param item
+     */
+    focusItem(item) {
+        this._itemNavigation.setCurrentItem(item);
+        item.focus();
+    }
+    get _navigableItems() {
+        const navigatableItems = [];
+        if (!this.items.length) {
+            return [];
+        }
+        this.items.forEach(item => {
+            if (!item.isGroupItem) {
+                navigatableItems.push(item);
+                return;
+            }
+            const navigatableItem = item.shadowRoot.querySelector("[ui5-toggle-button]");
+            if (navigatableItem) {
+                navigatableItems.push(navigatableItem);
+            }
+            if (!item.collapsed) {
+                item.items?.forEach(groupItem => {
+                    navigatableItems.push(groupItem);
+                });
+            }
+        });
+        return navigatableItems;
+    }
+};
+__decorate([
+    property()
+], Timeline.prototype, "layout", void 0);
+__decorate([
+    property()
+], Timeline.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Boolean })
+], Timeline.prototype, "loading", void 0);
+__decorate([
+    property({ type: Number })
+], Timeline.prototype, "loadingDelay", void 0);
+__decorate([
+    property()
+], Timeline.prototype, "growing", void 0);
+__decorate([
+    property({ type: Boolean })
+], Timeline.prototype, "_loadMoreActive", void 0);
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true, "default": true })
+], Timeline.prototype, "items", void 0);
+__decorate([
+    query(".ui5-timeline-end-marker")
+], Timeline.prototype, "timelineEndMarker", void 0);
+__decorate([
+    query((`[id="ui5-timeline-growing-btn"]`))
+], Timeline.prototype, "growingButton", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], Timeline, "i18nBundle", void 0);
+Timeline = Timeline_1 = __decorate([
+    customElement({
+        tag: "ui5-timeline",
+        languageAware: true,
+        renderer: jsxRenderer,
+        styles: TimelineCss,
+        template: TimelineTemplate,
+    })
+    /**
+     * Fired when the user presses the `More` button or scrolls to the Timeline's end.
+     *
+     * **Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.
+     * @public
+     * @since 2.7.0
+     */
+    ,
+    event("load-more", {
+        bubbles: true,
+    })
+], Timeline);
 Timeline.define();
-
 export default Timeline;
+//# sourceMappingURL=Timeline.js.map

package/dist/Timeline.js.map

@@ -0,0 +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 customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport 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\tisTabNext,\n\tisTabPrevious,\n\tisSpace,\n\tisEnter,\n\tisUp,\n\tisDown,\n\tisLeft,\n\tisRight,\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 } 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\";\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}\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!: Array<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 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\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.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\t_onkeydown(e: KeyboardEvent) {\n\t\tconst target = e.target as ITimelineItem;\n\n\t\tif (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 (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 (target.nameClickable && !target.getFocusDomRef()!.matches(\":has(:focus-within)\")) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isTabNext(e)) {\n\t\t\tthis._handleNextOrPreviousItem(e, true);\n\t\t} else if (isTabPrevious(e)) {\n\t\t\tthis._handleNextOrPreviousItem(e);\n\t\t}\n\t}\n\n\t_handleNextOrPreviousItem(e: KeyboardEvent, isNext?: boolean) {\n\t\tconst target = e.target as ITimelineItem | ToggleButton;\n\t\tlet updatedTarget = target;\n\n\t\tif ((target as ITimelineItem).isGroupItem) {\n\t\t\tupdatedTarget = target.shadowRoot!.querySelector<ToggleButton>(\"[ui5-toggle-button]\")!;\n\t\t}\n\n\t\tconst nextTargetIndex = isNext ? this._navigableItems.indexOf(updatedTarget) + 1 : this._navigableItems.indexOf(updatedTarget) - 1;\n\t\tconst nextTarget = this._navigableItems[nextTargetIndex];\n\n\t\tif (!nextTarget) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (nextTarget) {\n\t\t\te.preventDefault();\n\t\t\tnextTarget.focus();\n\t\t\tthis._itemNavigation.setCurrentItem(nextTarget);\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 _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/TimelineGroupItem.d.ts

@@ -0,0 +1,70 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type TimelineLayout from "./types/TimelineLayout.js";
+import type { ITimelineItem } from "./Timeline.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * An entry posted on the timeline.
+ * It is intented to represent a group of `<ui5-timeline-item>`s.
+ *
+ * **Note**: Please do not use empty groups in order to preserve the intended design.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @implements {ITimelineItem}
+ * @public
+ * @since 2.1.0
+ */
+declare class TimelineGroupItem extends UI5Element implements ITimelineItem {
+    eventDetails: {
+        "toggle": void;
+    };
+    /**
+     * Defines the text of the button that expands and collapses the group.
+     * @default undefined
+     * @public
+     */
+    groupName?: string;
+    /**
+     * Determines if the group is collapsed or expanded.
+     * @default false
+     * @public
+     */
+    collapsed: boolean;
+    /**
+     * Determines the content of the `ui5-timeline-group-item`.
+     * @public
+     */
+    items: Array<ITimelineItem>;
+    /**
+     * Defines the items orientation.
+     * @default "Vertical"
+     * @private
+     */
+    layout: `${TimelineLayout}`;
+    /**
+     * Applies to the last item in the group.
+     * @private
+     */
+    lastItem: boolean;
+    /**
+     * Determines if the item afterwards is a group item.
+     * Intended for styling purposes.
+     * @private
+     */
+    isNextItemGroup: boolean;
+    hidden: boolean;
+    /**
+     * @private
+     */
+    firstItemInTimeline: boolean;
+    forcedTabIndex: string;
+    onBeforeRendering(): void;
+    _setGroupItemProps(): void;
+    onGroupItemClick(): void;
+    get isGroupItem(): boolean;
+    get _groupName(): string | undefined;
+}
+export default TimelineGroupItem;