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

package/dist/TimelineGroupItem.js

@@ -0,0 +1,161 @@
+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.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._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 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 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!: Array<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._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", 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, children: this.groupName })] }), _jsx("ul", { class: "ui5-tl-group-item", children: this.items.map(item => _jsx("li", { 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,aACzB,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,YAE7B,IAAI,CAAC,SAAS,GACD,IACV,EACN,aAAI,KAAK,EAAC,mBAAmB,YAC3B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtB,aAAI,KAAK,EAAC,8BAA8B,YACvC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACrC,CACL,GACG,IACA,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\">\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>\n\t\t\t\t\t{this.groupName}\n\t\t\t\t</ToggleButton>\n\t\t\t</div>\n\t\t\t<ul class=\"ui5-tl-group-item\">\n\t\t\t\t{this.items.map(item =>\n\t\t\t\t\t<li class=\"ui5-timeline-group-list-item\">\n\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t</li>\n\t\t\t\t)}\n\t\t\t</ul>\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,116 @@
+import UI5Element 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";
+/**
+ * @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: Array<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;
+    /**
+     * Defines the position of the item in a group.
+     * @private
+     */
+    positionInGroup?: number;
+    static i18nBundle: I18nBundle;
+    constructor();
+    onNamePress(): void;
+    /**
+     * Focus the internal link.
+     */
+    focusLink(): void;
+    static typeTextMappings(): Record<string, I18nText>;
+    get timelineItemStateText(): string | undefined;
+    get isGroupItem(): boolean;
+}
+export default TimelineItem;

package/dist/TimelineItem.js

@@ -1,156 +1,171 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import Link from "@ui5/webcomponents/dist/Link.js";
-import TimelineItemTemplate from "./generated/templates/TimelineItemTemplate.lit.js";
-
-// Styles
-import styles from "./generated/themes/TimelineItem.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-timeline-item",
-	slots: /** @lends sap.ui.webcomponents.fiori.TimelineItem.prototype */ {
-		/**
-		 * Determines the description of the <code>ui5-timeline-item</code>.
-		 *
-		 * @type {Node[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			type: Node,
-		},
-	},
-	properties: /** @lends sap.ui.webcomponents.fiori.TimelineItem.prototype */ {
-		/**
-		 * Defines the icon to be displayed as graphical element within the <code>ui5-timeline-item</code>.
-		 * SAP-icons font provides numerous options.
-		 * <br><br>
-		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		icon: {
-			type: String,
-		},
-
-		/**
-		 * Defines the name of the item.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		itemName: {
-			type: String,
-		},
-
-		/**
-		 * Defines whether the <code>itemName</code> is clickable.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		itemNameClickable: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the title text of the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		titleText: {
-			type: String,
-		},
-
-		/**
-		 * Defines the subtitle text of the component.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		subtitleText: {
-			type: String,
-		},
-
-		_tabIndex: {
-			type: String,
-			defaultValue: "-1",
-			noAttribute: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.fiori.TimelineItem.prototype */ {
-		/**
-		 * Fired when the item name is pressed either with a
-		 * click/tap or by using the Enter or Space key.
-		 * <br><br>
-		 * <b>Note:</b> The event will not be fired if the <code>item-name-clickable</code>
-		 * attribute is not set.
-		 *
-		 * @event sap.ui.webcomponents.fiori.TimelineItem#item-name-click
-		 * @public
-		 */
-		"item-name-click": {},
-	},
+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.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
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
  * An entry posted on the timeline.
- *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.TimelineItem
  * @extends UI5Element
- * @tagname ui5-timeline-item
+ * @implements { ITimelineItem }
  * @public
  */
-class TimelineItem extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TimelineItemTemplate;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
-	constructor() {
-		super();
-	}
-
-	onItemNamePress() {
-		this.fireEvent("item-name-click", {});
-	}
-
-	static get dependencies() {
-		return [
-			Icon,
-			Link,
-		];
-	}
-}
-
+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;
+    }
+    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.i18nBundle.getText(TimelineItem_1.typeTextMappings()[this.state]) : undefined;
+    }
+    get isGroupItem() {
+        return false;
+    }
+};
+__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({ type: Number })
+], TimelineItem.prototype, "positionInGroup", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], TimelineItem, "i18nBundle", 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 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.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\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!: Array<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 * 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\")\n\tstatic i18nBundle: 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.i18nBundle.getText(TimelineItem.typeTextMappings()[this.state]) : undefined;\n\t}\n\n\tget isGroupItem() {\n\t\treturn false;\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;