@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/TimelineGroupItem.js

@@ -0,0 +1,164 @@
+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;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import TimelineGroupItemTemplate from "./TimelineGroupItemTemplate.js";
+// Styles
+import TimelineGroupItemCss from "./generated/themes/TimelineGroupItem.css.js";
+const SHORT_LINE_WIDTH = "ShortLineWidth";
+const LARGE_LINE_WIDTH = "LargeLineWidth";
+/**
+ * @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
+ */
+let TimelineGroupItem = class TimelineGroupItem extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines if the group is collapsed or expanded.
+         * @default false
+         * @public
+         */
+        this.collapsed = false;
+        /**
+         * Defines the items orientation.
+         * @default "Vertical"
+         * @private
+         */
+        this.layout = "Vertical";
+        /**
+         * Applies to the last item in the group.
+         * @private
+         */
+        this.lastItem = false;
+        /**
+         * Determines if the item afterwards is a group item.
+         * Intended for styling purposes.
+         * @private
+         */
+        this.isNextItemGroup = false;
+        this.hidden = false;
+        /**
+         * @private
+         */
+        this.firstItemInTimeline = false;
+        this.forcedTabIndex = "-1";
+    }
+    onBeforeRendering() {
+        if (!this.items.length) {
+            return;
+        }
+        this.items.forEach(item => {
+            item.effectiveRole = "treeitem";
+        });
+        this._setGroupItemProps();
+    }
+    _setGroupItemProps() {
+        const items = this.items;
+        const itemsLength = items.length;
+        if (itemsLength && this.firstItemInTimeline) {
+            items[0].firstItemInTimeline = true;
+        }
+        for (let i = 0; i < itemsLength; i++) {
+            items[i].lastItem = false;
+            items[i].isNextItemGroup = false;
+        }
+        if (itemsLength > 0) {
+            items[itemsLength - 1].isNextItemGroup = this.isNextItemGroup;
+            if (this.collapsed) {
+                items[itemsLength - 1].lastItem = false;
+            }
+            else if (this.lastItem) {
+                items[itemsLength - 1].lastItem = true;
+            }
+        }
+        for (let i = 0; i < itemsLength; i++) {
+            const item = items[i];
+            item.positionInGroup = i + 1;
+            item.hidden = !!this.collapsed;
+            item.layout = this.layout;
+            if (items[i + 1] && !!items[i + 1].icon) {
+                item.forcedLineWidth = SHORT_LINE_WIDTH;
+            }
+            else if (item.icon && items[i + 1] && !items[i + 1].icon) {
+                item.forcedLineWidth = LARGE_LINE_WIDTH;
+            }
+        }
+    }
+    onGroupItemClick() {
+        this.collapsed = !this.collapsed;
+        this.fireDecoratorEvent("toggle");
+    }
+    get isGroupItem() {
+        return true;
+    }
+    get _groupName() {
+        return this.groupName;
+    }
+};
+__decorate([
+    property()
+], TimelineGroupItem.prototype, "groupName", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineGroupItem.prototype, "collapsed", void 0);
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true, "default": true })
+], TimelineGroupItem.prototype, "items", void 0);
+__decorate([
+    property()
+], TimelineGroupItem.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineGroupItem.prototype, "lastItem", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineGroupItem.prototype, "isNextItemGroup", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineGroupItem.prototype, "hidden", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineGroupItem.prototype, "firstItemInTimeline", void 0);
+__decorate([
+    property({ noAttribute: true })
+], TimelineGroupItem.prototype, "forcedTabIndex", void 0);
+TimelineGroupItem = __decorate([
+    customElement({
+        tag: "ui5-timeline-group-item",
+        renderer: jsxRenderer,
+        styles: TimelineGroupItemCss,
+        template: TimelineGroupItemTemplate,
+    })
+    /**
+     * Fired when the group item is expanded or collapsed.
+     * @public
+     */
+    ,
+    event("toggle", {
+        bubbles: true,
+    })
+], TimelineGroupItem);
+TimelineGroupItem.define();
+export default TimelineGroupItem;
+//# sourceMappingURL=TimelineGroupItem.js.map

package/dist/TimelineGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineGroupItem.js","sourceRoot":"","sources":["../src/TimelineGroupItem.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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type TimelineLayout from \"./types/TimelineLayout.js\";\nimport type { ITimelineItem } from \"./Timeline.js\";\nimport TimelineGroupItemTemplate from \"./TimelineGroupItemTemplate.js\";\n\n// Styles\nimport TimelineGroupItemCss from \"./generated/themes/TimelineGroupItem.css.js\";\n\nconst SHORT_LINE_WIDTH = \"ShortLineWidth\";\nconst LARGE_LINE_WIDTH = \"LargeLineWidth\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * An entry posted on the timeline.\n * It is intented to represent a group of `<ui5-timeline-item>`s.\n *\n * **Note**: Please do not use empty groups in order to preserve the intended design.\n *\n * @constructor\n * @extends UI5Element\n * @implements {ITimelineItem}\n * @public\n * @since 2.1.0\n */\n@customElement({\n\ttag: \"ui5-timeline-group-item\",\n\trenderer: jsxRenderer,\n\tstyles: TimelineGroupItemCss,\n\ttemplate: TimelineGroupItemTemplate,\n})\n/**\n * Fired when the group item is expanded or collapsed.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\nclass TimelineGroupItem extends UI5Element implements ITimelineItem {\n\teventDetails!: {\n\t\t\"toggle\": void\n\t}\n\t/**\n\t * Defines the text of the button that expands and collapses the group.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tgroupName?: string;\n\n\t/**\n\t * Determines if the group is collapsed or expanded.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Determines the content of the `ui5-timeline-group-item`.\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 items orientation.\n\t * @default \"Vertical\"\n\t * @private\n\t */\n\t@property()\n\tlayout: `${TimelineLayout}` = \"Vertical\";\n\n\t/**\n\t * Applies to the last item in the group.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tlastItem = false;\n\n\t/**\n\t * Determines if the item afterwards is a group item.\n\t * Intended for styling purposes.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tisNextItemGroup = false;\n\n\t@property({ type: Boolean })\n\thidden = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfirstItemInTimeline = false;\n\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\tonBeforeRendering() {\n\t\tif (!this.items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.items.forEach(item => {\n\t\t\titem.effectiveRole = \"treeitem\";\n\t\t});\n\n\t\tthis._setGroupItemProps();\n\t}\n\n\t_setGroupItemProps() {\n\t\tconst items = this.items;\n\t\tconst itemsLength = items.length;\n\n\t\tif (itemsLength && this.firstItemInTimeline) {\n\t\t\titems[0].firstItemInTimeline = true;\n\t\t}\n\n\t\tfor (let i = 0; i < itemsLength; i++) {\n\t\t\titems[i].lastItem = false;\n\t\t\titems[i].isNextItemGroup = false;\n\t\t}\n\n\t\tif (itemsLength > 0) {\n\t\t\titems[itemsLength - 1].isNextItemGroup = this.isNextItemGroup;\n\t\t\tif (this.collapsed) {\n\t\t\t\titems[itemsLength - 1].lastItem = false;\n\t\t\t} else if (this.lastItem) {\n\t\t\t\titems[itemsLength - 1].lastItem = true;\n\t\t\t}\n\t\t}\n\n\t\tfor (let i = 0; i < itemsLength; i++) {\n\t\t\tconst item = items[i];\n\t\t\titem.positionInGroup = i + 1;\n\t\t\titem.hidden = !!this.collapsed;\n\t\t\titem.layout = this.layout;\n\n\t\t\tif (items[i + 1] && !!items[i + 1].icon) {\n\t\t\t\titem.forcedLineWidth = SHORT_LINE_WIDTH;\n\t\t\t} else if (item.icon && items[i + 1] && !items[i + 1].icon) {\n\t\t\t\titem.forcedLineWidth = LARGE_LINE_WIDTH;\n\t\t\t}\n\t\t}\n\t}\n\n\tonGroupItemClick() {\n\t\tthis.collapsed = !this.collapsed;\n\t\tthis.fireDecoratorEvent(\"toggle\");\n\t}\n\n\tget isGroupItem() {\n\t\treturn true;\n\t}\n\n\tget _groupName() {\n\t\treturn this.groupName;\n\t}\n}\n\nTimelineGroupItem.define();\n\nexport default TimelineGroupItem;\n"]}

package/dist/TimelineGroupItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type TimelineGroupItem from "./TimelineGroupItem.js";
+export default function TimelineGroupItemTemplate(this: TimelineGroupItem): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TimelineGroupItemTemplate.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import TimelineLayout from "./types/TimelineLayout.js";
+import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+import slimArrowleft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import slimArrowup from "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
+export default function TimelineGroupItemTemplate() {
+    return (_jsxs("div", { class: "ui5-tlgi-root", role: "treeitem", children: [_jsxs("div", { class: "ui5-tlgi-btn-root", children: [_jsx("div", { class: "ui5-tlgi-icon-placeholder", children: _jsx("div", { class: "ui5-tlgi-icon-dot" }) }), _jsx("div", { class: "ui5-tlgi-line-placeholder", children: _jsx("div", { class: "ui5-tlgi-line" }) }), _jsx(ToggleButton, { class: "ui5-tlgi-btn", icon: getEffectiveGroupIcon.call(this, this.layout, this.collapsed), pressed: this.collapsed, onClick: this.onGroupItemClick, accessibleName: `${this.groupName || "Group"}, ${this.collapsed ? "collapsed" : "expanded"}`, children: this.groupName })] }), _jsx("div", { class: "ui5-tl-group-item", role: "group", "aria-label": `${this.groupName || "Group"} items`, children: this.items.map(item => _jsx("div", { class: "ui5-timeline-group-list-item", children: _jsx("slot", { name: item._individualSlot }) })) })] }));
+}
+function getEffectiveGroupIcon(layout, collapsed) {
+    if (layout === TimelineLayout.Vertical) {
+        return collapsed ? slimArrowleft : slimArrowDown;
+    }
+    return collapsed ? slimArrowup : slimArrowRight;
+}
+//# sourceMappingURL=TimelineGroupItemTemplate.js.map

package/dist/TimelineGroupItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineGroupItemTemplate.js","sourceRoot":"","sources":["../src/TimelineGroupItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,WAAW,MAAM,gDAAgD,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,yBAAyB;IAChD,OAAO,CACN,eAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,UAAU,aACzC,eAAK,KAAK,EAAC,mBAAmB,aAC7B,cAAK,KAAK,EAAC,2BAA2B,YACrC,cAAK,KAAK,EAAC,mBAAmB,GAAO,GAChC,EAEN,cAAK,KAAK,EAAC,2BAA2B,YACrC,cAAK,KAAK,EAAC,eAAe,GAAO,GAC5B,EAEN,KAAC,YAAY,IACZ,KAAK,EAAC,cAAc,EACpB,IAAI,EAAE,qBAAqB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,EACnE,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,cAAc,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,OAAO,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,EAAE,YAE3F,IAAI,CAAC,SAAS,GACD,IACV,EACN,cAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,OAAO,gBAAa,GAAG,IAAI,CAAC,SAAS,IAAI,OAAO,QAAQ,YAC1F,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtB,cAAK,KAAK,EAAC,8BAA8B,YACxC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,GACI,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,qBAAqB,CAAC,MAA2B,EAAE,SAAkB;IAC7E,IAAI,MAAM,KAAK,cAAc,CAAC,QAAQ,EAAE,CAAC;QACxC,OAAO,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;IAClD,CAAC;IAED,OAAO,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC;AACjD,CAAC","sourcesContent":["import type TimelineGroupItem from \"./TimelineGroupItem.js\";\nimport TimelineLayout from \"./types/TimelineLayout.js\";\nimport ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport slimArrowleft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport slimArrowup from \"@ui5/webcomponents-icons/dist/slim-arrow-up.js\";\n\nexport default function TimelineGroupItemTemplate(this: TimelineGroupItem) {\n\treturn (\n\t\t<div class=\"ui5-tlgi-root\" role=\"treeitem\">\n\t\t\t<div class=\"ui5-tlgi-btn-root\">\n\t\t\t\t<div class=\"ui5-tlgi-icon-placeholder\">\n\t\t\t\t\t<div class=\"ui5-tlgi-icon-dot\"></div>\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"ui5-tlgi-line-placeholder\">\n\t\t\t\t\t<div class=\"ui5-tlgi-line\"></div>\n\t\t\t\t</div>\n\n\t\t\t\t<ToggleButton\n\t\t\t\t\tclass=\"ui5-tlgi-btn\"\n\t\t\t\t\ticon={getEffectiveGroupIcon.call(this, this.layout, this.collapsed)}\n\t\t\t\t\tpressed={this.collapsed}\n\t\t\t\t\tonClick={this.onGroupItemClick}\n\t\t\t\t\taccessibleName={`${this.groupName || \"Group\"}, ${this.collapsed ? \"collapsed\" : \"expanded\"}`}\n\t\t\t\t>\n\t\t\t\t\t{this.groupName}\n\t\t\t\t</ToggleButton>\n\t\t\t</div>\n\t\t\t<div class=\"ui5-tl-group-item\" role=\"group\" aria-label={`${this.groupName || \"Group\"} items`}>\n\t\t\t\t{this.items.map(item =>\n\t\t\t\t\t<div class=\"ui5-timeline-group-list-item\">\n\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction getEffectiveGroupIcon(layout: `${TimelineLayout}`, collapsed: boolean): string {\n\tif (layout === TimelineLayout.Vertical) {\n\t\treturn collapsed ? slimArrowleft : slimArrowDown;\n\t}\n\n\treturn collapsed ? slimArrowup : slimArrowRight;\n}\n"]}

package/dist/TimelineItem.d.ts

@@ -0,0 +1,123 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ITimelineItem } from "./Timeline.js";
+import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type TimelineLayout from "./types/TimelineLayout.js";
+type TimelineItemRole = "listitem" | "treeitem";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * An entry posted on the timeline.
+ * @constructor
+ * @extends UI5Element
+ * @implements { ITimelineItem }
+ * @public
+ */
+declare class TimelineItem extends UI5Element implements ITimelineItem {
+    eventDetails: {
+        "name-click": void;
+    };
+    /**
+     * Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.
+     * SAP-icons font provides numerous options.
+     *
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default undefined
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines the name of the item, displayed before the `title-text`.
+     * @default undefined
+     * @public
+     */
+    name?: string;
+    /**
+     * Defines if the `name` is clickable.
+     * @default false
+     * @public
+     */
+    nameClickable: boolean;
+    /**
+     * Defines the title text of the component.
+     * @default undefined
+     * @public
+     */
+    titleText?: string;
+    /**
+     * Defines the subtitle text of the component.
+     * @default undefined
+     * @public
+     */
+    subtitleText?: string;
+    /**
+     * Defines the state of the icon displayed in the `ui5-timeline-item`.
+     * @default "None"
+     * @public
+     * @since 2.7.0
+     */
+    state: `${ValueState}`;
+    /**
+     * Defines the content of the `ui5-timeline-item`.
+     * @public
+     */
+    content: DefaultSlot<Node>;
+    /**
+     * @private
+     */
+    firstItemInTimeline: boolean;
+    /**
+     * @private
+     */
+    isNextItemGroup: boolean;
+    forcedTabIndex: string;
+    /**
+     * Defines the items orientation.
+     * @default "Vertical"
+     * @private
+     */
+    layout: `${TimelineLayout}`;
+    /**
+     * Defines the indicator line width.
+     * @private
+     */
+    forcedLineWidth?: string;
+    /**
+     * @private
+     */
+    hideBubble: boolean;
+    /**
+     * Marks the last `<ui5-timeline-item>`
+     * @private
+     */
+    lastItem: boolean;
+    /**
+     * @private
+     */
+    hidden: boolean;
+    /**
+     * @private
+     */
+    effectiveRole: `${TimelineItemRole}`;
+    /**
+     * Defines the position of the item in a group.
+     * @private
+     */
+    positionInGroup?: number;
+    static i18nBundleFiori: I18nBundle;
+    constructor();
+    onNamePress(): void;
+    /**
+     * Focus the internal link.
+     */
+    focusLink(): void;
+    static typeTextMappings(): Record<string, I18nText>;
+    get timelineItemStateText(): string | undefined;
+    get isGroupItem(): boolean;
+    get _getAccessibleLabel(): string;
+}
+export default TimelineItem;

package/dist/TimelineItem.js

@@ -0,0 +1,194 @@
+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 TimelineItem_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import TimelineItemTemplate from "./TimelineItemTemplate.js";
+import { TIMELINE_ITEM_INFORMATION_STATE_TEXT, TIMELINE_ITEM_POSITIVE_STATE_TEXT, TIMELINE_ITEM_NEGATIVE_STATE_TEXT, TIMELINE_ITEM_CRITICAL_STATE_TEXT, } from "./generated/i18n/i18n-defaults.js";
+import TimelineItemCss from "./generated/themes/TimelineItem.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * An entry posted on the timeline.
+ * @constructor
+ * @extends UI5Element
+ * @implements { ITimelineItem }
+ * @public
+ */
+let TimelineItem = TimelineItem_1 = class TimelineItem extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines if the `name` is clickable.
+         * @default false
+         * @public
+         */
+        this.nameClickable = false;
+        /**
+         * Defines the state of the icon displayed in the `ui5-timeline-item`.
+         * @default "None"
+         * @public
+         * @since 2.7.0
+         */
+        this.state = "None";
+        /**
+         * @private
+         */
+        this.firstItemInTimeline = false;
+        /**
+         * @private
+         */
+        this.isNextItemGroup = false;
+        this.forcedTabIndex = "-1";
+        /**
+         * Defines the items orientation.
+         * @default "Vertical"
+         * @private
+         */
+        this.layout = "Vertical";
+        /**
+         * @private
+         */
+        this.hideBubble = false;
+        /**
+         * Marks the last `<ui5-timeline-item>`
+         * @private
+         */
+        this.lastItem = false;
+        /**
+         * @private
+         */
+        this.hidden = false;
+        /**
+         * @private
+         */
+        this.effectiveRole = "listitem";
+    }
+    onNamePress() {
+        this.fireDecoratorEvent("name-click");
+    }
+    /**
+     * Focus the internal link.
+     */
+    focusLink() {
+        this.shadowRoot.querySelector("[ui5-link]")?.focus();
+    }
+    static typeTextMappings() {
+        return {
+            "Information": TIMELINE_ITEM_INFORMATION_STATE_TEXT,
+            "Positive": TIMELINE_ITEM_POSITIVE_STATE_TEXT,
+            "Negative": TIMELINE_ITEM_NEGATIVE_STATE_TEXT,
+            "Critical": TIMELINE_ITEM_CRITICAL_STATE_TEXT,
+        };
+    }
+    get timelineItemStateText() {
+        return this.state !== "None" ? TimelineItem_1.i18nBundleFiori.getText(TimelineItem_1.typeTextMappings()[this.state]) : undefined;
+    }
+    get isGroupItem() {
+        return false;
+    }
+    get _getAccessibleLabel() {
+        const parts = [];
+        if (this.name) {
+            parts.push(this.name);
+        }
+        if (this.titleText) {
+            parts.push(this.titleText);
+        }
+        if (this.subtitleText) {
+            parts.push(this.subtitleText);
+        }
+        if (this.timelineItemStateText) {
+            parts.push(this.timelineItemStateText);
+        }
+        return parts.join(", ");
+    }
+};
+__decorate([
+    property()
+], TimelineItem.prototype, "icon", void 0);
+__decorate([
+    property()
+], TimelineItem.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineItem.prototype, "nameClickable", void 0);
+__decorate([
+    property()
+], TimelineItem.prototype, "titleText", void 0);
+__decorate([
+    property()
+], TimelineItem.prototype, "subtitleText", void 0);
+__decorate([
+    property()
+], TimelineItem.prototype, "state", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], TimelineItem.prototype, "content", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineItem.prototype, "firstItemInTimeline", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineItem.prototype, "isNextItemGroup", void 0);
+__decorate([
+    property({ noAttribute: true })
+], TimelineItem.prototype, "forcedTabIndex", void 0);
+__decorate([
+    property()
+], TimelineItem.prototype, "layout", void 0);
+__decorate([
+    property({ noAttribute: true })
+], TimelineItem.prototype, "forcedLineWidth", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineItem.prototype, "hideBubble", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineItem.prototype, "lastItem", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineItem.prototype, "hidden", void 0);
+__decorate([
+    property({ noAttribute: true })
+], TimelineItem.prototype, "effectiveRole", void 0);
+__decorate([
+    property({ type: Number })
+], TimelineItem.prototype, "positionInGroup", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], TimelineItem, "i18nBundleFiori", void 0);
+TimelineItem = TimelineItem_1 = __decorate([
+    customElement({
+        tag: "ui5-timeline-item",
+        renderer: jsxRenderer,
+        styles: TimelineItemCss,
+        template: TimelineItemTemplate,
+    })
+    /**
+     * Fired when the item name is pressed either with a
+     * click/tap or by using the Enter or Space key.
+     *
+     * **Note:** The event will not be fired if the `name-clickable`
+     * attribute is not set.
+     * @public
+     */
+    ,
+    event("name-click", {
+        bubbles: true,
+    })
+], TimelineItem);
+TimelineItem.define();
+export default TimelineItem;
+//# sourceMappingURL=TimelineItem.js.map

package/dist/TimelineItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../src/TimelineItem.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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.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 Link from \"@ui5/webcomponents/dist/Link.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ITimelineItem } from \"./Timeline.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport TimelineItemTemplate from \"./TimelineItemTemplate.js\";\n// Styles\nimport type TimelineLayout from \"./types/TimelineLayout.js\";\n\nimport {\n\tTIMELINE_ITEM_INFORMATION_STATE_TEXT,\n\tTIMELINE_ITEM_POSITIVE_STATE_TEXT,\n\tTIMELINE_ITEM_NEGATIVE_STATE_TEXT,\n\tTIMELINE_ITEM_CRITICAL_STATE_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport TimelineItemCss from \"./generated/themes/TimelineItem.css.js\";\n\ntype TimelineItemRole = \"listitem\" | \"treeitem\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * An entry posted on the timeline.\n * @constructor\n * @extends UI5Element\n * @implements { ITimelineItem }\n * @public\n */\n@customElement({\n\ttag: \"ui5-timeline-item\",\n\trenderer: jsxRenderer,\n\tstyles: TimelineItemCss,\n\ttemplate: TimelineItemTemplate,\n})\n/**\n * Fired when the item name is pressed either with a\n * click/tap or by using the Enter or Space key.\n *\n * **Note:** The event will not be fired if the `name-clickable`\n * attribute is not set.\n * @public\n */\n@event(\"name-click\", {\n\tbubbles: true,\n})\nclass TimelineItem extends UI5Element implements ITimelineItem {\n\teventDetails!: {\n\t\t\"name-click\": void\n\t}\n\t/**\n\t * Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\n\t * SAP-icons font provides numerous options.\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the name of the item, displayed before the `title-text`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines if the `name` is clickable.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tnameClickable = false;\n\n\t/**\n\t * Defines the title text of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttitleText?: string;\n\n\t/**\n\t * Defines the subtitle text of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tsubtitleText?: string;\n\n\t/**\n\t * Defines the state of the icon displayed in the `ui5-timeline-item`.\n\t * @default \"None\"\n\t * @public\n\t * @since 2.7.0\n\t */\n\t@property()\n\tstate: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines the content of the `ui5-timeline-item`.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: DefaultSlot<Node>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfirstItemInTimeline = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tisNextItemGroup = false;\n\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\t/**\n\t * Defines the items orientation.\n\t * @default \"Vertical\"\n\t * @private\n\t */\n\t@property()\n\tlayout: `${TimelineLayout}` = \"Vertical\";\n\n\t/**\n\t * Defines the indicator line width.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tforcedLineWidth?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thideBubble = false;\n\n\t/**\n\t * Marks the last `<ui5-timeline-item>`\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tlastItem = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thidden = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveRole: `${TimelineItemRole}` = \"listitem\";\n\n\t/**\n\t * Defines the position of the item in a group.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tpositionInGroup?: number;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundleFiori: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonNamePress() {\n\t\tthis.fireDecoratorEvent(\"name-click\");\n\t}\n\n\t/**\n\t * Focus the internal link.\n\t */\n\tfocusLink() {\n\t\tthis.shadowRoot!.querySelector<Link>(\"[ui5-link]\")?.focus();\n\t}\n\n\tstatic typeTextMappings(): Record<string, I18nText> {\n\t\treturn {\n\t\t\t\"Information\": TIMELINE_ITEM_INFORMATION_STATE_TEXT,\n\t\t\t\"Positive\": TIMELINE_ITEM_POSITIVE_STATE_TEXT,\n\t\t\t\"Negative\": TIMELINE_ITEM_NEGATIVE_STATE_TEXT,\n\t\t\t\"Critical\": TIMELINE_ITEM_CRITICAL_STATE_TEXT,\n\t\t};\n\t}\n\n\tget timelineItemStateText() {\n\t\treturn this.state !== \"None\" ? TimelineItem.i18nBundleFiori.getText(TimelineItem.typeTextMappings()[this.state]) : undefined;\n\t}\n\n\tget isGroupItem() {\n\t\treturn false;\n\t}\n\n\tget _getAccessibleLabel() {\n\t\tconst parts = [];\n\n\t\tif (this.name) {\n\t\t\tparts.push(this.name);\n\t\t}\n\n\t\tif (this.titleText) {\n\t\t\tparts.push(this.titleText);\n\t\t}\n\n\t\tif (this.subtitleText) {\n\t\t\tparts.push(this.subtitleText);\n\t\t}\n\n\t\tif (this.timelineItemStateText) {\n\t\t\tparts.push(this.timelineItemStateText);\n\t\t}\n\n\t\treturn parts.join(\", \");\n\t}\n}\n\nTimelineItem.define();\n\nexport default TimelineItem;\n"]}

package/dist/TimelineItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type TimelineItem from "./TimelineItem.js";
+export default function TimelineItemTemplate(this: TimelineItem): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TimelineItemTemplate.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Link from "@ui5/webcomponents/dist/Link.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import TimelineLayout from "./types/TimelineLayout.js";
+export default function TimelineItemTemplate() {
+    // Create accessible label with status information
+    const accessibleLabel = this._getAccessibleLabel;
+    return (_jsxs("div", { class: "ui5-tli-root", children: [_jsx("div", { class: {
+                    "ui5-tli-indicator": true,
+                    "ui5-tli-indicator-short-line": this.forcedLineWidth === "ShortLineWidth",
+                    "ui5-tli-indicator-large-line": this.forcedLineWidth === "LargeLineWidth",
+                }, children: _jsx("div", { class: "ui5-tli-icon-outer", children: this.icon ?
+                        _jsx(Icon, { class: "ui5-tli-icon", name: this.icon, mode: "Decorative" })
+                        :
+                            _jsx("div", { class: "ui5-tli-dummy-icon-container" }) }) }), !this.hideBubble &&
+                _jsxs("div", { "data-sap-focus-ref": true, class: "ui5-tli-bubble", role: this.effectiveRole, tabindex: parseInt(this.forcedTabIndex), "aria-label": accessibleLabel, "aria-description": this.timelineItemStateText, children: [_jsxs("div", { class: "ui5-tli-title", children: [this.name && name.call(this), _jsx("span", { children: this.titleText })] }), _jsx("div", { class: "ui5-tli-subtitle", children: this.subtitleText }), this.content &&
+                            _jsx("div", { class: "ui5-tli-desc", children: _jsx("slot", {}) }), _jsx("span", { class: {
+                                "ui5-tli-bubble-arrow": true,
+                                "ui5-tli-bubble-arrow--left": this.layout === TimelineLayout.Vertical,
+                                "ui5-tli-bubble-arrow--top": this.layout === TimelineLayout.Horizontal,
+                            } })] })] }));
+}
+function name() {
+    return (_jsx(_Fragment, { children: this.nameClickable ?
+            _jsxs(Link, { class: "ui5-tli-title-name-clickable", wrappingType: this.layout === TimelineLayout.Horizontal ? "None" : "Normal", onClick: this.onNamePress, children: [this.name, "\u00A0"] })
+            :
+                _jsxs("span", { class: "ui5-tli-title-name", children: [this.name, "\u00A0"] }) }));
+}
+//# sourceMappingURL=TimelineItemTemplate.js.map

package/dist/TimelineItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineItemTemplate.js","sourceRoot":"","sources":["../src/TimelineItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,cAAc,MAAM,2BAA2B,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,kDAAkD;IAClD,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC;IAEjD,OAAO,CACN,eAAK,KAAK,EAAC,cAAc,aACxB,cACC,KAAK,EAAE;oBACN,mBAAmB,EAAE,IAAI;oBACzB,8BAA8B,EAAE,IAAI,CAAC,eAAe,KAAK,gBAAgB;oBACzE,8BAA8B,EAAE,IAAI,CAAC,eAAe,KAAK,gBAAgB;iBACzE,YAED,cAAK,KAAK,EAAC,oBAAoB,YAE7B,IAAI,CAAC,IAAI,CAAC,CAAC;wBACV,KAAC,IAAI,IAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,YAAY,GAAE;wBAC/D,CAAC;4BACD,cAAK,KAAK,EAAC,8BAA8B,GAAO,GAE7C,GACD,EAEL,CAAC,IAAI,CAAC,UAAU;gBAChB,2CAEC,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,gBAC3B,eAAe,sBACT,IAAI,CAAC,qBAAqB,aAE5C,eAAK,KAAK,EAAC,eAAe,aACvB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9B,yBAAO,IAAI,CAAC,SAAS,GAAQ,IACxB,EAEN,cAAK,KAAK,EAAC,kBAAkB,YAAE,IAAI,CAAC,YAAY,GAAO,EAEtD,IAAI,CAAC,OAAO;4BACZ,cAAK,KAAK,EAAC,cAAc,YACxB,gBAAa,GACR,EAEP,eAAM,KAAK,EAAE;gCACZ,sBAAsB,EAAE,IAAI;gCAC5B,4BAA4B,EAAE,IAAI,CAAC,MAAM,KAAK,cAAc,CAAC,QAAQ;gCACrE,2BAA2B,EAAE,IAAI,CAAC,MAAM,KAAK,cAAc,CAAC,UAAU;6BACtE,GAAS,IACL,IAEF,CACN,CAAC;AACH,CAAC;AAED,SAAS,IAAI;IACZ,OAAO,CACN,4BACE,IAAI,CAAC,aAAa,CAAC,CAAC;YACpB,MAAC,IAAI,IACJ,KAAK,EAAC,8BAA8B,EACpC,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAC3E,OAAO,EAAE,IAAI,CAAC,WAAW,aAExB,IAAI,CAAC,IAAI,cACJ;YACP,CAAC;gBACD,gBAAM,KAAK,EAAC,oBAAoB,aAAE,IAAI,CAAC,IAAI,cAAc,GAExD,CACH,CAAC;AACH,CAAC","sourcesContent":["import type TimelineItem from \"./TimelineItem.js\";\nimport Link from \"@ui5/webcomponents/dist/Link.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport TimelineLayout from \"./types/TimelineLayout.js\";\n\nexport default function TimelineItemTemplate(this: TimelineItem) {\n\t// Create accessible label with status information\n\tconst accessibleLabel = this._getAccessibleLabel;\n\n\treturn (\n\t\t<div class=\"ui5-tli-root\">\n\t\t\t<div\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-tli-indicator\": true,\n\t\t\t\t\t\"ui5-tli-indicator-short-line\": this.forcedLineWidth === \"ShortLineWidth\",\n\t\t\t\t\t\"ui5-tli-indicator-large-line\": this.forcedLineWidth === \"LargeLineWidth\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div class=\"ui5-tli-icon-outer\">\n\t\t\t\t\t{\n\t\t\t\t\t\tthis.icon ?\n\t\t\t\t\t\t\t<Icon class=\"ui5-tli-icon\" name={this.icon} mode=\"Decorative\"/>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t<div class=\"ui5-tli-dummy-icon-container\"></div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{!this.hideBubble &&\n\t\t\t\t<div\n\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\tclass=\"ui5-tli-bubble\"\n\t\t\t\t\trole={this.effectiveRole}\n\t\t\t\t\ttabindex={parseInt(this.forcedTabIndex)}\n\t\t\t\t\taria-label={accessibleLabel}\n\t\t\t\t\taria-description={this.timelineItemStateText}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"ui5-tli-title\">\n\t\t\t\t\t\t{ this.name && name.call(this) }\n\t\t\t\t\t\t<span>{this.titleText}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"ui5-tli-subtitle\">{this.subtitleText}</div>\n\n\t\t\t\t\t{this.content &&\n\t\t\t\t\t\t<div class=\"ui5-tli-desc\">\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<span class={{\n\t\t\t\t\t\t\"ui5-tli-bubble-arrow\": true,\n\t\t\t\t\t\t\"ui5-tli-bubble-arrow--left\": this.layout === TimelineLayout.Vertical,\n\t\t\t\t\t\t\"ui5-tli-bubble-arrow--top\": this.layout === TimelineLayout.Horizontal,\n\t\t\t\t\t}}></span>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction name(this: TimelineItem) {\n\treturn (\n\t\t<>\n\t\t\t{this.nameClickable ?\n\t\t\t\t<Link\n\t\t\t\t\tclass=\"ui5-tli-title-name-clickable\"\n\t\t\t\t\twrappingType={this.layout === TimelineLayout.Horizontal ? \"None\" : \"Normal\"}\n\t\t\t\t\tonClick={this.onNamePress}\n\t\t\t\t>\n\t\t\t\t\t{this.name}&nbsp;\n\t\t\t\t</Link>\n\t\t\t\t:\n\t\t\t\t<span class=\"ui5-tli-title-name\">{this.name}&nbsp;</span>\n\t\t\t}\n\t\t</>\n\t);\n}\n"]}

package/dist/TimelineTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Timeline from "./Timeline.js";
+export default function TimelineTemplate(this: Timeline): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TimelineTemplate.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+export default function TimelineTemplate() {
+    const listRole = this.hasGroupItems ? "tree" : "list";
+    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: _jsx("div", { class: "ui5-timeline-scroll-container", children: _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)] }) }) }) }));
+}
+function moreRow() {
+    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: {
+                        "ui5-timeline-growing-row-inner": true,
+                        "ui5-timeline-growing-row-inner--active": this._loadMoreActive
+                    }, tabindex: 0, onClick: this._onLoadMoreClick, onKeyDown: this._onLoadMoreKeydown, onKeyUp: this._onLoadMoreKeyup, tooltip: this.growingButtonText, accessibleName: this.growingButtonText }) }), this.loading &&
+                _jsx(BusyIndicator, { delay: this.loadingDelay, class: "ui5-timeline-growing-button-busy-indicator", active: true })] }));
+}
+function endRow() {
+    return (_jsx("div", { tabindex: -1, "aria-hidden": "true", class: "ui5-timeline-end-marker", children: _jsx("span", { tabindex: -1, "aria-hidden": "true", class: "ui5-timeline-end-marker" }) }));
+}
+//# sourceMappingURL=TimelineTemplate.js.map

package/dist/TimelineTemplate.js.map

@@ -0,0 +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,YAE1B,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,cAAK,KAAK,EAAC,+BAA+B,YAEzC,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,GACD,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>\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\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"]}