@ruc-lib/timeline 3.2.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +49 -21
  2. package/fesm2022/ruc-lib-timeline.mjs +216 -0
  3. package/fesm2022/ruc-lib-timeline.mjs.map +1 -0
  4. package/index.d.ts +239 -2
  5. package/package.json +6 -18
  6. package/esm2020/index.mjs +0 -3
  7. package/esm2020/lib/ruclib-timeline/ruclib-timeline.component.mjs +0 -206
  8. package/esm2020/lib/ruclib-timeline.module.mjs +0 -21
  9. package/esm2020/model/ruclib-timeline.model.mjs +0 -2
  10. package/esm2020/ruc-lib-timeline.mjs +0 -5
  11. package/fesm2015/ruc-lib-timeline.mjs +0 -246
  12. package/fesm2015/ruc-lib-timeline.mjs.map +0 -1
  13. package/fesm2020/ruc-lib-timeline.mjs +0 -231
  14. package/fesm2020/ruc-lib-timeline.mjs.map +0 -1
  15. package/lib/ruclib-timeline/ruclib-timeline.component.d.ts +0 -111
  16. package/lib/ruclib-timeline.module.d.ts +0 -11
  17. package/model/ruclib-timeline.model.d.ts +0 -126
package/README.md CHANGED
@@ -13,11 +13,40 @@ npm install @uxpractice/ruc-lib
13
13
 
14
14
  ### Install Individual Component
15
15
 
16
- If you only need the timeline component
16
+ If you only need the Timeline component:
17
+
18
+ **For Angular 15:**
19
+ ```bash
20
+ npm install @ruc-lib/timeline@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
21
+ ```
22
+
23
+ **For Angular 16:**
24
+ ```bash
25
+ npm install @ruc-lib/timeline@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
26
+ ```
27
+
28
+ **For Angular 17:**
29
+ ```bash
30
+ npm install @ruc-lib/timeline@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
31
+ ```
32
+
33
+ **For Angular 18:**
34
+ ```bash
35
+ npm install @ruc-lib/timeline@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
36
+ ```
37
+
38
+ **For Angular 19:**
17
39
  ```bash
18
- npm install @ruc-lib/timeline
40
+ npm install @ruc-lib/timeline@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
19
41
  ```
20
42
 
43
+ **For Angular 20:**
44
+ ```bash
45
+ npm install @ruc-lib/timeline@4.0.0
46
+ ```
47
+
48
+ > **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
49
+
21
50
  ## Version Compatibility
22
51
 
23
52
  Please ensure you install the correct version of `@ruc-lib/timeline` based on your Angular version.
@@ -26,33 +55,32 @@ Please ensure you install the correct version of `@ruc-lib/timeline` based on yo
26
55
  |--------------------|---------------------------------------------|
27
56
  | 15.x.x | `npm install @ruc-lib/timeline@^3.2.0` |
28
57
  | 16.x.x | `npm install @ruc-lib/timeline@^3.2.0` |
29
-
58
+ | 17.x.x | `npm install @ruc-lib/timeline@^4.0.0` |
59
+ | 18.x.x | `npm install @ruc-lib/timeline@^4.0.0` |
60
+ | 19.x.x | `npm install @ruc-lib/timeline@^4.0.0` |
61
+ | 20.x.x | `npm install @ruc-lib/timeline@^4.0.0` |
30
62
 
31
63
  ## Usage
32
- ### 1. Import the Module
33
- In your Angular module file (e.g., `app.module.ts`), import the `RuclibTimelineModule`:
64
+ ### 1. Import the Component
65
+ In your Angular component file (e.g., `app.component.ts`), import the `RuclibTimelineComponent`:
34
66
 
35
67
  ```typescript
68
+ import { Component } from '@angular/core';
69
+
36
70
  // For Complete Library
37
- import { RuclibTimelineModule } from '@uxpractice/ruc-lib/timeline';
71
+ import { RuclibTimelineComponent } from '@uxpractice/ruc-lib/timeline';
38
72
 
39
73
  // For Individual Package
40
- import { RuclibTimelineModule } from '@ruc-lib/timeline';
41
-
42
- import { AppComponent } from './app.component';
43
- import { NgModule } from '@angular/core';
44
- import { BrowserModule } from '@angular/platform-browser';
45
-
46
- @NgModule({
47
- declarations: [AppComponent],
48
- imports: [
49
- BrowserModule,
50
- RuclibTimelineModule
51
- ],
52
- providers: [],
53
- bootstrap: [AppComponent]
74
+ import { RuclibTimelineComponent } from '@ruc-lib/timeline';
75
+
76
+ @Component({
77
+ selector: 'app-root',
78
+ imports: [RuclibTimelineComponent],
79
+ templateUrl: './app.component.html',
54
80
  })
55
- export class AppModule {}
81
+ export class AppComponent {
82
+ // Component code here
83
+ }
56
84
  ```
57
85
 
58
86
  ### 2. Use the Component
package/fesm2022/ruc-lib-timeline.mjs ADDED
@@ -0,0 +1,216 @@
1
+ import * as i0 from '@angular/core';
2
+ import { Input, Component } from '@angular/core';
3
+ import * as i1 from '@angular/common';
4
+ import { CommonModule } from '@angular/common';
5
+ import * as i2 from '@angular/material/tooltip';
6
+ import { MatTooltipModule } from '@angular/material/tooltip';
7
+ import * as i3 from '@angular/material/icon';
8
+ import { MatIconModule } from '@angular/material/icon';
9
+ import * as i4 from '@angular/material/card';
10
+ import { MatCardModule } from '@angular/material/card';
11
+
12
+ class RuclibTimelineComponent {
13
+ /**
14
+ * To get position of the timeline
15
+ * @param position
16
+ * @param index
17
+ * @returns default: left
18
+ */
19
+ getItemPosition(position, index) {
20
+ switch (position) {
21
+ case 'alternate': {
22
+ const layout = this.getLayout();
23
+ if (index % 2 == 0) {
24
+ return layout === 'horizontal' ? 'top' : 'left';
25
+ }
26
+ else {
27
+ return layout === 'horizontal' ? 'bottom' : 'right';
28
+ }
29
+ }
30
+ case 'top':
31
+ return 'top';
32
+ case 'bottom':
33
+ return 'bottom';
34
+ case 'right':
35
+ return 'right';
36
+ case 'left':
37
+ default:
38
+ return 'left';
39
+ }
40
+ }
41
+ /**
42
+ * To get layout of the timeline
43
+ * @param layout
44
+ * @returns default: vertical
45
+ */
46
+ getItemLayout(layout = '') {
47
+ switch (layout) {
48
+ case 'horizontal':
49
+ return 'horizontal';
50
+ case 'vertical':
51
+ default:
52
+ return 'vertical';
53
+ }
54
+ }
55
+ /**
56
+ * To get data from the input
57
+ */
58
+ getData() {
59
+ if (this.rucInputData?.data) {
60
+ this.data = this.rucInputData.data?.sort((a, b) => a?.id - b?.id) || [];
61
+ }
62
+ return typeof this.data !== 'undefined' ? this.data : [];
63
+ }
64
+ /**
65
+ * To get position of the timeline
66
+ * @returns default: left
67
+ */
68
+ getPosition(index = -1) {
69
+ if (index === -1) {
70
+ return this.rucInputData?.position;
71
+ }
72
+ return this.getItemPosition(this.rucInputData?.position || 'left', index); // Provide a default if position is undefined
73
+ }
74
+ /**
75
+ * To get layout of the timeline
76
+ * @returns default: vertical
77
+ */
78
+ getLayout() {
79
+ return this.getItemLayout(this.rucInputData?.layout); // Provide a default if layout is undefined
80
+ }
81
+ /**
82
+ * To get highlight color of the timeline
83
+ * @returns default: undefined
84
+ */
85
+ getHighlightColor() {
86
+ return this.rucInputData?.highlightColor;
87
+ }
88
+ /**
89
+ * To get title font color of the timeline
90
+ * @returns default: undefined
91
+ */
92
+ getTitleColor() {
93
+ return this.rucInputData?.titleFontColor;
94
+ }
95
+ /**
96
+ * To get sub title font color of the timeline
97
+ * @returns default: undefined
98
+ */
99
+ getSubTitleColor() {
100
+ return this.rucInputData?.subTitleFontColor;
101
+ }
102
+ /**
103
+ * To get title font size of the timeline
104
+ * @returns default: undefined
105
+ */
106
+ getTitleFontSize() {
107
+ return this.rucInputData?.titleFontSize;
108
+ }
109
+ /**
110
+ * To get subtitle font size of the timeline
111
+ * @returns default: undefined
112
+ */
113
+ getSubTitleFontSize() {
114
+ return this.rucInputData?.subTitleFontSize;
115
+ }
116
+ /**
117
+ * To get title background color of the timeline
118
+ * @returns default: undefined
119
+ */
120
+ getTitleBackgroundColor() {
121
+ return this.rucInputData?.titleBackgroundColor;
122
+ }
123
+ /**
124
+ * To get subtitle background color of the timeline
125
+ * @returns default: undefined
126
+ */
127
+ getSubTitleBackgroundColor() {
128
+ return this.rucInputData?.subTitleBackgroundColor;
129
+ }
130
+ /**
131
+ * To get max title length of the timeline
132
+ * @returns default: undefined
133
+ */
134
+ getMaxTitleLength() {
135
+ return this.rucInputData?.maxTitleLength;
136
+ }
137
+ /**
138
+ * To get max sub title length of the timeline
139
+ * @returns default: undefined
140
+ */
141
+ getMaxSubtitleLength() {
142
+ return this.rucInputData?.maxSubTitleLength;
143
+ }
144
+ /**
145
+ * To check if the isInfo variable is defined and value is true|false in timeline
146
+ * @returns default: undefined
147
+ */
148
+ isInfo() {
149
+ return this.rucInputData?.isInfo;
150
+ }
151
+ /**
152
+ * To get title in timeline
153
+ * @param title
154
+ * @param key
155
+ * @returns default: title
156
+ */
157
+ getTitle(title = '', key = '') {
158
+ switch (key) {
159
+ case 'title': {
160
+ const checkLength = this.getMaxTitleLength();
161
+ return this.isLengthDefined(title, checkLength);
162
+ }
163
+ case 'subtitle': {
164
+ const checkLength = this.getMaxSubtitleLength();
165
+ return this.isLengthDefined(title, checkLength);
166
+ }
167
+ default: {
168
+ return title;
169
+ }
170
+ }
171
+ }
172
+ /**
173
+ * To check if the length is defined
174
+ * @param title
175
+ * @param checkLength
176
+ * @returns default: title
177
+ */
178
+ isLengthDefined(title = '', checkLength) {
179
+ if (typeof checkLength !== 'undefined' && checkLength > 0 && title !== '') {
180
+ const str = title.substring(0, checkLength);
181
+ return title.length === checkLength ? str : str + '...';
182
+ }
183
+ return title;
184
+ }
185
+ /**
186
+ * To check if the template variable is defined and value is true|false in timeline
187
+ * @returns default: false
188
+ */
189
+ isCard() {
190
+ return typeof this.rucInputData?.isTemplate !== 'undefined' ? this.rucInputData?.isTemplate : false;
191
+ }
192
+ /**
193
+ * To get the color of icon
194
+ * @returns default: false
195
+ */
196
+ getIconColor() {
197
+ return this.rucInputData?.iconColor || 'primary';
198
+ }
199
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
200
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibTimelineComponent, isStandalone: true, selector: "uxp-ruclib-timeline", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, ngImport: i0, template: "<div class={{customTheme}}>\r\n <ul class=\"w-full timeline timeline-{{getPosition()}} timeline-{{getLayout()}}\"\r\n [ngClass]=\"{'timeline-card': !!isCard()}\">\r\n @for (item of getData(); track item; let i = $index) {\r\n <li class=\"timeline-event\">\r\n @if (getPosition() === 'opposite') {\r\n <div class=\"timeline-event-opposite divya\">\r\n @if (true) {\r\n <!-- Fot Title -->\r\n @if (!!item.title) {\r\n <div\r\n class=\"timeline-event-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconTitle}\"\r\n [style.background-color]=\"getTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxTitleLength()}\"\r\n [style.color]=\"getTitleColor()\"\r\n [style.font-size]=\"getTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item?.title && item?.title?.length > getMaxTitleLength())\"\r\n [matTooltip]=\"item.title\"\r\n matTooltipPosition=\"above\">\r\n {{getTitle(item.title, 'title')}}\r\n </span>\r\n @if (!!item.iconTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.titleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about title\"\r\n >{{item.titleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"timeline-event-opposite rajput\"></div>\r\n }\r\n <div class=\"timeline-event-separator\">\r\n <div class=\"timeline-event-marker\" [ngClass]=\"{'timeline-event-marker-active': !item.icon}\">\r\n @if (item.icon) {\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle\"\r\n role=\"img\"\r\n [attr.aria-label]=\"item.iconAriaLabel || item.icon\"\r\n >{{item.icon}}</mat-icon>\r\n }\r\n </div>\r\n @if (i !== (getData()?.length - 1)) {\r\n <div class=\"timeline-event-connector\"></div>\r\n }\r\n </div>\r\n <div class=\"timeline-event-content\" [style.background-color]=\"getHighlightColor()\">\r\n @if (isCard()) {\r\n <!-- Fot Template -->\r\n <mat-card class=\"m-mat-card\" appearance=\"outlined\">\r\n <mat-card-header>\r\n <mat-card-title-group>\r\n <mat-card-title>{{item.title}}</mat-card-title>\r\n <mat-card-subtitle>{{item.subtitle}}</mat-card-subtitle>\r\n <img\r\n mat-card-lg-image\r\n src=\"{{item.imageUrl}}\"\r\n [alt]=\"item.imageAltText || item.title || 'Timeline event image'\"\r\n >\r\n </mat-card-title-group>\r\n </mat-card-header>\r\n <mat-card-content>\r\n {{item.content}}\r\n </mat-card-content>\r\n </mat-card>\r\n }\r\n @if (getPosition() === 'opposite') {\r\n <!-- Fot Sub Title -->\r\n @if (!!item.subtitle) {\r\n <div\r\n class=\"timeline-event-sub-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconSubTitle}\"\r\n [style.background-color]=\"getSubTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxSubtitleLength()}\"\r\n [style.color]=\"getSubTitleColor()\"\r\n [style.font-size]=\"getSubTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item.subtitle && item.subtitle.length > getMaxSubtitleLength())\"\r\n [matTooltip]=\"item.subtitle\"\r\n matTooltipPosition=\"above\"\r\n >\r\n {{getTitle(item.subtitle, 'subtitle')}}\r\n </span>\r\n @if (!!item.iconSubTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconSubTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.subTitleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about subtitle\"\r\n >{{item.subTitleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n @if ((!isCard() && getPosition() !== 'opposite')) {\r\n @if (true) {\r\n <!-- Fot Title -->\r\n @if (!!item.title) {\r\n <div\r\n class=\"timeline-event-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconTitle}\"\r\n [style.background-color]=\"getTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxTitleLength()}\"\r\n [style.color]=\"getTitleColor()\"\r\n [style.font-size]=\"getTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item?.title && item?.title?.length > getMaxTitleLength())\"\r\n [matTooltip]=\"item.title\"\r\n matTooltipPosition=\"above\">\r\n {{getTitle(item.title, 'title')}}\r\n </span>\r\n @if (!!item.iconTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.titleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about title\"\r\n >{{item.titleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n @if (true) {\r\n <!-- Fot Sub Title -->\r\n @if (!!item.subtitle) {\r\n <div\r\n class=\"timeline-event-sub-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconSubTitle}\"\r\n [style.background-color]=\"getSubTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxSubtitleLength()}\"\r\n [style.color]=\"getSubTitleColor()\"\r\n [style.font-size]=\"getSubTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item.subtitle && item.subtitle.length > getMaxSubtitleLength())\"\r\n [matTooltip]=\"item.subtitle\"\r\n matTooltipPosition=\"above\"\r\n >\r\n {{getTitle(item.subtitle, 'subtitle')}}\r\n </span>\r\n @if (!!item.iconSubTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconSubTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.subTitleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about subtitle\"\r\n >{{item.subTitleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n", styles: ["*,:before,:after{box-sizing:border-box}.timeline{display:flex;flex-grow:1;flex-direction:column;direction:ltr}.timeline.w-full{max-width:800px;margin:auto}.timeline.timeline-vertical .timeline-event{display:flex;position:relative}.timeline.timeline-vertical .timeline-event:last-child{min-height:0;margin-bottom:0}.timeline.timeline-vertical .timeline-event-connector{width:2px;min-height:30px}.timeline.timeline-vertical .timeline-event-opposite,.timeline.timeline-vertical .timeline-event-content{padding:0 .5rem}.timeline.timeline-vertical.timeline-left .timeline-event-opposite{text-align:right}.timeline.timeline-vertical.timeline-left .timeline-event-content{text-align:left}.timeline.timeline-vertical.timeline-left .timeline-icon-question-mark{padding:0 .375rem}.timeline.timeline-vertical.timeline-left .timeline-icon-question-mark-active{padding:.375rem 0;justify-content:start!important}.timeline.timeline-vertical.timeline-right .timeline-event{flex-direction:row-reverse}.timeline.timeline-vertical.timeline-right .timeline-event-opposite,.timeline.timeline-vertical.timeline-right.timeline-card .timeline-event-content{text-align:left}.timeline.timeline-vertical.timeline-right .timeline-event-content{text-align:right}.timeline.timeline-vertical.timeline-right .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(odd) .timeline-event-opposite{text-align:right}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(odd) .timeline-event-content{text-align:left}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(odd) .timeline-icon-question-mark-active{justify-content:start!important}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(2n){flex-direction:row-reverse}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(2n) .timeline-event-opposite{text-align:left}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(2n) .timeline-event-content{text-align:right}.timeline.timeline-vertical.timeline-alternate .timeline-event .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-vertical.timeline-alternate.timeline-card .timeline-event .timeline-event-content{text-align:left}.timeline.timeline-vertical.timeline-opposite .timeline-event-opposite{display:flex;justify-content:flex-end;align-items:normal}.timeline.timeline-horizontal{flex-direction:row}.timeline.timeline-horizontal .timeline-event{display:flex;position:relative;flex-direction:column;flex:1}.timeline.timeline-horizontal .timeline-event-connector{width:100%;height:2px}.timeline.timeline-horizontal.timeline-top .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-horizontal.timeline-bottom .timeline-event{flex-direction:column-reverse}.timeline.timeline-horizontal.timeline-bottom .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-horizontal.timeline-alternate{min-height:29vh}.timeline.timeline-horizontal.timeline-alternate.timeline-card{white-space:nowrap;min-height:45vh;flex:1}.timeline.timeline-horizontal.timeline-alternate .timeline-event{min-height:calc(100% - 80px)}.timeline.timeline-horizontal.timeline-alternate .timeline-event:nth-child(2n){flex-direction:column-reverse}.timeline.timeline-horizontal.timeline-alternate .timeline-event-opposite{flex:1}.timeline.timeline-horizontal.timeline-alternate .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-horizontal .timeline-event-content{margin-bottom:auto;padding-left:1px;margin-right:8px;padding:1rem 0}.timeline.timeline-horizontal .timeline-event-content .timeline-icon-question-mark-active{padding:.375rem 0;justify-content:start}.timeline.timeline-horizontal .timeline-event-opposite{flex:0;padding:1rem 0}.timeline.timeline-horizontal .timeline-event-separator{flex-direction:row}.timeline .timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.timeline .timeline-event-separator .timeline-event-marker{display:inline-flex;align-items:center;justify-content:center;position:relative;align-self:baseline;border-width:2px;border-style:solid;border-color:#e2e8f0;border-radius:50%;width:25px;height:25px}.timeline .timeline-event-separator .timeline-event-marker:after{content:\" \";position:absolute;width:100%;height:100%;border-radius:50%}.timeline .timeline-event-separator .timeline-event-marker.timeline-event-marker-active:before{content:\" \";border-radius:50%;width:.375rem;height:.375rem;background:#ccc}.timeline .timeline-event-separator .timeline-event-connector{flex-grow:1;background:#e2e8f0}.timeline .timeline-event-opposite{line-height:1;flex:1}.timeline .timeline-event-content{flex:1;margin-bottom:10px;line-height:1}.timeline .timeline-event-content .m-mat-card{max-width:400px;margin-bottom:8px}.timeline .timeline-event-content .timeline-event-title{padding:.375rem 0}.timeline .timeline-event-content .timeline-event-sub-title{padding:.125rem .15rem}.timeline .timeline-event-content .timeline-icon-question-mark-active{padding:.375rem 0;display:flex;align-items:normal;justify-content:end}.timeline .timeline-icon-circle{position:absolute;border-radius:50%;font-size:var(--timeline-icon-glyph-size)!important;display:flex;align-items:center;justify-content:center;z-index:1;box-sizing:border-box}.timeline .timeline-icon{align-items:normal}.timeline .timeline-icon-question-mark-icon{position:absolute;font-size:var(--timeline-icon-glyph-size)!important;align-items:normal;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardLgImage, selector: "[mat-card-lg-image], [matCardImageLarge]" }, { kind: "directive", type: i4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4.MatCardTitleGroup, selector: "mat-card-title-group" }] }); }
201
+ }
202
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibTimelineComponent, decorators: [{
203
+ type: Component,
204
+ args: [{ selector: 'uxp-ruclib-timeline', imports: [CommonModule, MatTooltipModule, MatIconModule, MatCardModule], template: "<div class={{customTheme}}>\r\n <ul class=\"w-full timeline timeline-{{getPosition()}} timeline-{{getLayout()}}\"\r\n [ngClass]=\"{'timeline-card': !!isCard()}\">\r\n @for (item of getData(); track item; let i = $index) {\r\n <li class=\"timeline-event\">\r\n @if (getPosition() === 'opposite') {\r\n <div class=\"timeline-event-opposite divya\">\r\n @if (true) {\r\n <!-- Fot Title -->\r\n @if (!!item.title) {\r\n <div\r\n class=\"timeline-event-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconTitle}\"\r\n [style.background-color]=\"getTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxTitleLength()}\"\r\n [style.color]=\"getTitleColor()\"\r\n [style.font-size]=\"getTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item?.title && item?.title?.length > getMaxTitleLength())\"\r\n [matTooltip]=\"item.title\"\r\n matTooltipPosition=\"above\">\r\n {{getTitle(item.title, 'title')}}\r\n </span>\r\n @if (!!item.iconTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.titleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about title\"\r\n >{{item.titleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"timeline-event-opposite rajput\"></div>\r\n }\r\n <div class=\"timeline-event-separator\">\r\n <div class=\"timeline-event-marker\" [ngClass]=\"{'timeline-event-marker-active': !item.icon}\">\r\n @if (item.icon) {\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle\"\r\n role=\"img\"\r\n [attr.aria-label]=\"item.iconAriaLabel || item.icon\"\r\n >{{item.icon}}</mat-icon>\r\n }\r\n </div>\r\n @if (i !== (getData()?.length - 1)) {\r\n <div class=\"timeline-event-connector\"></div>\r\n }\r\n </div>\r\n <div class=\"timeline-event-content\" [style.background-color]=\"getHighlightColor()\">\r\n @if (isCard()) {\r\n <!-- Fot Template -->\r\n <mat-card class=\"m-mat-card\" appearance=\"outlined\">\r\n <mat-card-header>\r\n <mat-card-title-group>\r\n <mat-card-title>{{item.title}}</mat-card-title>\r\n <mat-card-subtitle>{{item.subtitle}}</mat-card-subtitle>\r\n <img\r\n mat-card-lg-image\r\n src=\"{{item.imageUrl}}\"\r\n [alt]=\"item.imageAltText || item.title || 'Timeline event image'\"\r\n >\r\n </mat-card-title-group>\r\n </mat-card-header>\r\n <mat-card-content>\r\n {{item.content}}\r\n </mat-card-content>\r\n </mat-card>\r\n }\r\n @if (getPosition() === 'opposite') {\r\n <!-- Fot Sub Title -->\r\n @if (!!item.subtitle) {\r\n <div\r\n class=\"timeline-event-sub-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconSubTitle}\"\r\n [style.background-color]=\"getSubTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxSubtitleLength()}\"\r\n [style.color]=\"getSubTitleColor()\"\r\n [style.font-size]=\"getSubTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item.subtitle && item.subtitle.length > getMaxSubtitleLength())\"\r\n [matTooltip]=\"item.subtitle\"\r\n matTooltipPosition=\"above\"\r\n >\r\n {{getTitle(item.subtitle, 'subtitle')}}\r\n </span>\r\n @if (!!item.iconSubTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconSubTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.subTitleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about subtitle\"\r\n >{{item.subTitleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n @if ((!isCard() && getPosition() !== 'opposite')) {\r\n @if (true) {\r\n <!-- Fot Title -->\r\n @if (!!item.title) {\r\n <div\r\n class=\"timeline-event-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconTitle}\"\r\n [style.background-color]=\"getTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxTitleLength()}\"\r\n [style.color]=\"getTitleColor()\"\r\n [style.font-size]=\"getTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item?.title && item?.title?.length > getMaxTitleLength())\"\r\n [matTooltip]=\"item.title\"\r\n matTooltipPosition=\"above\">\r\n {{getTitle(item.title, 'title')}}\r\n </span>\r\n @if (!!item.iconTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.titleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about title\"\r\n >{{item.titleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n @if (true) {\r\n <!-- Fot Sub Title -->\r\n @if (!!item.subtitle) {\r\n <div\r\n class=\"timeline-event-sub-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconSubTitle}\"\r\n [style.background-color]=\"getSubTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxSubtitleLength()}\"\r\n [style.color]=\"getSubTitleColor()\"\r\n [style.font-size]=\"getSubTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item.subtitle && item.subtitle.length > getMaxSubtitleLength())\"\r\n [matTooltip]=\"item.subtitle\"\r\n matTooltipPosition=\"above\"\r\n >\r\n {{getTitle(item.subtitle, 'subtitle')}}\r\n </span>\r\n @if (!!item.iconSubTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconSubTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.subTitleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about subtitle\"\r\n >{{item.subTitleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n", styles: ["*,:before,:after{box-sizing:border-box}.timeline{display:flex;flex-grow:1;flex-direction:column;direction:ltr}.timeline.w-full{max-width:800px;margin:auto}.timeline.timeline-vertical .timeline-event{display:flex;position:relative}.timeline.timeline-vertical .timeline-event:last-child{min-height:0;margin-bottom:0}.timeline.timeline-vertical .timeline-event-connector{width:2px;min-height:30px}.timeline.timeline-vertical .timeline-event-opposite,.timeline.timeline-vertical .timeline-event-content{padding:0 .5rem}.timeline.timeline-vertical.timeline-left .timeline-event-opposite{text-align:right}.timeline.timeline-vertical.timeline-left .timeline-event-content{text-align:left}.timeline.timeline-vertical.timeline-left .timeline-icon-question-mark{padding:0 .375rem}.timeline.timeline-vertical.timeline-left .timeline-icon-question-mark-active{padding:.375rem 0;justify-content:start!important}.timeline.timeline-vertical.timeline-right .timeline-event{flex-direction:row-reverse}.timeline.timeline-vertical.timeline-right .timeline-event-opposite,.timeline.timeline-vertical.timeline-right.timeline-card .timeline-event-content{text-align:left}.timeline.timeline-vertical.timeline-right .timeline-event-content{text-align:right}.timeline.timeline-vertical.timeline-right .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(odd) .timeline-event-opposite{text-align:right}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(odd) .timeline-event-content{text-align:left}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(odd) .timeline-icon-question-mark-active{justify-content:start!important}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(2n){flex-direction:row-reverse}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(2n) .timeline-event-opposite{text-align:left}.timeline.timeline-vertical.timeline-alternate .timeline-event:nth-child(2n) .timeline-event-content{text-align:right}.timeline.timeline-vertical.timeline-alternate .timeline-event .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-vertical.timeline-alternate.timeline-card .timeline-event .timeline-event-content{text-align:left}.timeline.timeline-vertical.timeline-opposite .timeline-event-opposite{display:flex;justify-content:flex-end;align-items:normal}.timeline.timeline-horizontal{flex-direction:row}.timeline.timeline-horizontal .timeline-event{display:flex;position:relative;flex-direction:column;flex:1}.timeline.timeline-horizontal .timeline-event-connector{width:100%;height:2px}.timeline.timeline-horizontal.timeline-top .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-horizontal.timeline-bottom .timeline-event{flex-direction:column-reverse}.timeline.timeline-horizontal.timeline-bottom .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-horizontal.timeline-alternate{min-height:29vh}.timeline.timeline-horizontal.timeline-alternate.timeline-card{white-space:nowrap;min-height:45vh;flex:1}.timeline.timeline-horizontal.timeline-alternate .timeline-event{min-height:calc(100% - 80px)}.timeline.timeline-horizontal.timeline-alternate .timeline-event:nth-child(2n){flex-direction:column-reverse}.timeline.timeline-horizontal.timeline-alternate .timeline-event-opposite{flex:1}.timeline.timeline-horizontal.timeline-alternate .timeline-icon-question-mark{padding-right:1.5rem}.timeline.timeline-horizontal .timeline-event-content{margin-bottom:auto;padding-left:1px;margin-right:8px;padding:1rem 0}.timeline.timeline-horizontal .timeline-event-content .timeline-icon-question-mark-active{padding:.375rem 0;justify-content:start}.timeline.timeline-horizontal .timeline-event-opposite{flex:0;padding:1rem 0}.timeline.timeline-horizontal .timeline-event-separator{flex-direction:row}.timeline .timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.timeline .timeline-event-separator .timeline-event-marker{display:inline-flex;align-items:center;justify-content:center;position:relative;align-self:baseline;border-width:2px;border-style:solid;border-color:#e2e8f0;border-radius:50%;width:25px;height:25px}.timeline .timeline-event-separator .timeline-event-marker:after{content:\" \";position:absolute;width:100%;height:100%;border-radius:50%}.timeline .timeline-event-separator .timeline-event-marker.timeline-event-marker-active:before{content:\" \";border-radius:50%;width:.375rem;height:.375rem;background:#ccc}.timeline .timeline-event-separator .timeline-event-connector{flex-grow:1;background:#e2e8f0}.timeline .timeline-event-opposite{line-height:1;flex:1}.timeline .timeline-event-content{flex:1;margin-bottom:10px;line-height:1}.timeline .timeline-event-content .m-mat-card{max-width:400px;margin-bottom:8px}.timeline .timeline-event-content .timeline-event-title{padding:.375rem 0}.timeline .timeline-event-content .timeline-event-sub-title{padding:.125rem .15rem}.timeline .timeline-event-content .timeline-icon-question-mark-active{padding:.375rem 0;display:flex;align-items:normal;justify-content:end}.timeline .timeline-icon-circle{position:absolute;border-radius:50%;font-size:var(--timeline-icon-glyph-size)!important;display:flex;align-items:center;justify-content:center;z-index:1;box-sizing:border-box}.timeline .timeline-icon{align-items:normal}.timeline .timeline-icon-question-mark-icon{position:absolute;font-size:var(--timeline-icon-glyph-size)!important;align-items:normal;justify-content:center}\n"] }]
205
+ }], propDecorators: { customTheme: [{
206
+ type: Input
207
+ }], rucInputData: [{
208
+ type: Input
209
+ }] } });
210
+
211
+ /**
212
+ * Generated bundle index. Do not edit.
213
+ */
214
+
215
+ export { RuclibTimelineComponent };
216
+ //# sourceMappingURL=ruc-lib-timeline.mjs.map
package/fesm2022/ruc-lib-timeline.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ruc-lib-timeline.mjs","sources":["../../src/lib/ruclib-timeline/ruclib-timeline.component.ts","../../src/lib/ruclib-timeline/ruclib-timeline.component.html","../../src/ruc-lib-timeline.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\r\nimport { RucTimelineInput, RucTimelineItemData } from '../../model/ruclib-timeline.model';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatCardModule } from '@angular/material/card';\r\n\r\n\r\n@Component({\r\n selector: 'uxp-ruclib-timeline',\r\n imports: [CommonModule, MatTooltipModule, MatIconModule, MatCardModule],\r\n templateUrl: './ruclib-timeline.component.html',\r\n styleUrls: ['./ruclib-timeline.component.scss']\r\n})\r\nexport class RuclibTimelineComponent {\r\n @Input() customTheme!: string;\r\n @Input() rucInputData?: RucTimelineInput;\r\n data: RucTimelineItemData[] | undefined;\r\n\r\n\r\n /**\r\n * To get position of the timeline\r\n * @param position\r\n * @param index\r\n * @returns default: left\r\n */\r\n private getItemPosition(position: string, index: number): string {\r\n switch (position) {\r\n case 'alternate': {\r\n const layout = this.getLayout();\r\n if(index % 2 == 0) {\r\n return layout === 'horizontal' ? 'top' :'left';\r\n } else {\r\n return layout === 'horizontal' ? 'bottom' :'right';\r\n }\r\n }\r\n case 'top':\r\n return 'top';\r\n case 'bottom':\r\n return 'bottom';\r\n case 'right':\r\n return 'right';\r\n case 'left':\r\n default:\r\n return 'left'\r\n }\r\n }\r\n\r\n\r\n /**\r\n * To get layout of the timeline\r\n * @param layout\r\n * @returns default: vertical\r\n */\r\n private getItemLayout(layout = ''): string {\r\n switch (layout) {\r\n case 'horizontal':\r\n return 'horizontal';\r\n case 'vertical':\r\n default:\r\n return 'vertical';\r\n }\r\n }\r\n\r\n\r\n /**\r\n * To get data from the input\r\n */\r\n getData(): RucTimelineItemData[] | any {\r\n if (this.rucInputData?.data) {\r\n this.data = this.rucInputData.data?.sort((a: RucTimelineItemData, b: RucTimelineItemData) => a?.id - b?.id) || [];\r\n }\r\n return typeof this.data !== 'undefined' ? this.data : [];\r\n }\r\n\r\n /**\r\n * To get position of the timeline\r\n * @returns default: left\r\n */\r\n getPosition(index = -1): string | undefined {\r\n if(index === -1) {\r\n return this.rucInputData?.position;\r\n }\r\n return this.getItemPosition(this.rucInputData?.position || 'left', index); // Provide a default if position is undefined\r\n }\r\n\r\n\r\n /**\r\n * To get layout of the timeline\r\n * @returns default: vertical\r\n */\r\n getLayout(): string {\r\n return this.getItemLayout(this.rucInputData?.layout) // Provide a default if layout is undefined\r\n }\r\n\r\n /**\r\n * To get highlight color of the timeline\r\n * @returns default: undefined\r\n */\r\n getHighlightColor(): string | undefined {\r\n return this.rucInputData?.highlightColor;\r\n }\r\n\r\n /**\r\n * To get title font color of the timeline\r\n * @returns default: undefined\r\n */\r\n getTitleColor(): string | undefined {\r\n return this.rucInputData?.titleFontColor;\r\n }\r\n\r\n /**\r\n * To get sub title font color of the timeline\r\n * @returns default: undefined\r\n */\r\n getSubTitleColor(): string | undefined {\r\n return this.rucInputData?.subTitleFontColor;\r\n }\r\n\r\n /**\r\n * To get title font size of the timeline\r\n * @returns default: undefined\r\n */\r\n getTitleFontSize(): string | undefined {\r\n return this.rucInputData?.titleFontSize;\r\n }\r\n\r\n /**\r\n * To get subtitle font size of the timeline\r\n * @returns default: undefined\r\n */\r\n getSubTitleFontSize(): string | undefined {\r\n return this.rucInputData?.subTitleFontSize;\r\n }\r\n\r\n /**\r\n * To get title background color of the timeline\r\n * @returns default: undefined\r\n */\r\n getTitleBackgroundColor(): string | undefined {\r\n return this.rucInputData?.titleBackgroundColor;\r\n }\r\n\r\n /**\r\n * To get subtitle background color of the timeline\r\n * @returns default: undefined\r\n */\r\n getSubTitleBackgroundColor(): string | undefined {\r\n return this.rucInputData?.subTitleBackgroundColor;\r\n }\r\n\r\n /**\r\n * To get max title length of the timeline\r\n * @returns default: undefined\r\n */\r\n getMaxTitleLength(): number | any {\r\n return this.rucInputData?.maxTitleLength;\r\n }\r\n\r\n /**\r\n * To get max sub title length of the timeline\r\n * @returns default: undefined\r\n */\r\n getMaxSubtitleLength(): number | any {\r\n return this.rucInputData?.maxSubTitleLength;\r\n }\r\n\r\n /**\r\n * To check if the isInfo variable is defined and value is true|false in timeline\r\n * @returns default: undefined\r\n */\r\n isInfo() {\r\n return this.rucInputData?.isInfo;\r\n }\r\n\r\n /**\r\n * To get title in timeline\r\n * @param title\r\n * @param key\r\n * @returns default: title\r\n */\r\n getTitle(title = '', key: 'title' | 'subtitle' | '' = ''): string {\r\n switch(key) {\r\n case 'title': {\r\n const checkLength = this.getMaxTitleLength();\r\n return this.isLengthDefined(title, checkLength);\r\n }\r\n case 'subtitle': {\r\n const checkLength = this.getMaxSubtitleLength();\r\n return this.isLengthDefined(title, checkLength);\r\n }\r\n default: {\r\n return title;\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * To check if the length is defined\r\n * @param title\r\n * @param checkLength\r\n * @returns default: title\r\n */\r\n isLengthDefined(title = '', checkLength: number | undefined): string {\r\n if(typeof checkLength !== 'undefined' && checkLength > 0 && title !== '') {\r\n const str = title.substring(0, checkLength);\r\n return title.length === checkLength ? str : str+'...';\r\n }\r\n return title;\r\n }\r\n\r\n /**\r\n * To check if the template variable is defined and value is true|false in timeline\r\n * @returns default: false\r\n */\r\n isCard() {\r\n return typeof this.rucInputData?.isTemplate !== 'undefined' ? this.rucInputData?.isTemplate : false;\r\n }\r\n\r\n /**\r\n * To get the color of icon\r\n * @returns default: false\r\n */\r\n getIconColor(): string {\r\n return this.rucInputData?.iconColor || 'primary';\r\n }\r\n}\r\n","<div class={{customTheme}}>\r\n <ul class=\"w-full timeline timeline-{{getPosition()}} timeline-{{getLayout()}}\"\r\n [ngClass]=\"{'timeline-card': !!isCard()}\">\r\n @for (item of getData(); track item; let i = $index) {\r\n <li class=\"timeline-event\">\r\n @if (getPosition() === 'opposite') {\r\n <div class=\"timeline-event-opposite divya\">\r\n @if (true) {\r\n <!-- Fot Title -->\r\n @if (!!item.title) {\r\n <div\r\n class=\"timeline-event-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconTitle}\"\r\n [style.background-color]=\"getTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxTitleLength()}\"\r\n [style.color]=\"getTitleColor()\"\r\n [style.font-size]=\"getTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item?.title && item?.title?.length > getMaxTitleLength())\"\r\n [matTooltip]=\"item.title\"\r\n matTooltipPosition=\"above\">\r\n {{getTitle(item.title, 'title')}}\r\n </span>\r\n @if (!!item.iconTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.titleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about title\"\r\n >{{item.titleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"timeline-event-opposite rajput\"></div>\r\n }\r\n <div class=\"timeline-event-separator\">\r\n <div class=\"timeline-event-marker\" [ngClass]=\"{'timeline-event-marker-active': !item.icon}\">\r\n @if (item.icon) {\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle\"\r\n role=\"img\"\r\n [attr.aria-label]=\"item.iconAriaLabel || item.icon\"\r\n >{{item.icon}}</mat-icon>\r\n }\r\n </div>\r\n @if (i !== (getData()?.length - 1)) {\r\n <div class=\"timeline-event-connector\"></div>\r\n }\r\n </div>\r\n <div class=\"timeline-event-content\" [style.background-color]=\"getHighlightColor()\">\r\n @if (isCard()) {\r\n <!-- Fot Template -->\r\n <mat-card class=\"m-mat-card\" appearance=\"outlined\">\r\n <mat-card-header>\r\n <mat-card-title-group>\r\n <mat-card-title>{{item.title}}</mat-card-title>\r\n <mat-card-subtitle>{{item.subtitle}}</mat-card-subtitle>\r\n <img\r\n mat-card-lg-image\r\n src=\"{{item.imageUrl}}\"\r\n [alt]=\"item.imageAltText || item.title || 'Timeline event image'\"\r\n >\r\n </mat-card-title-group>\r\n </mat-card-header>\r\n <mat-card-content>\r\n {{item.content}}\r\n </mat-card-content>\r\n </mat-card>\r\n }\r\n @if (getPosition() === 'opposite') {\r\n <!-- Fot Sub Title -->\r\n @if (!!item.subtitle) {\r\n <div\r\n class=\"timeline-event-sub-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconSubTitle}\"\r\n [style.background-color]=\"getSubTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxSubtitleLength()}\"\r\n [style.color]=\"getSubTitleColor()\"\r\n [style.font-size]=\"getSubTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item.subtitle && item.subtitle.length > getMaxSubtitleLength())\"\r\n [matTooltip]=\"item.subtitle\"\r\n matTooltipPosition=\"above\"\r\n >\r\n {{getTitle(item.subtitle, 'subtitle')}}\r\n </span>\r\n @if (!!item.iconSubTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconSubTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.subTitleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about subtitle\"\r\n >{{item.subTitleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n @if ((!isCard() && getPosition() !== 'opposite')) {\r\n @if (true) {\r\n <!-- Fot Title -->\r\n @if (!!item.title) {\r\n <div\r\n class=\"timeline-event-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconTitle}\"\r\n [style.background-color]=\"getTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxTitleLength()}\"\r\n [style.color]=\"getTitleColor()\"\r\n [style.font-size]=\"getTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item?.title && item?.title?.length > getMaxTitleLength())\"\r\n [matTooltip]=\"item.title\"\r\n matTooltipPosition=\"above\">\r\n {{getTitle(item.title, 'title')}}\r\n </span>\r\n @if (!!item.iconTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.titleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about title\"\r\n >{{item.titleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n @if (true) {\r\n <!-- Fot Sub Title -->\r\n @if (!!item.subtitle) {\r\n <div\r\n class=\"timeline-event-sub-title\"\r\n [ngClass]=\"{'timeline-icon-question-mark-active': !!item.iconSubTitle}\"\r\n [style.background-color]=\"getSubTitleBackgroundColor()\"\r\n >\r\n <span\r\n [ngClass]=\"{'description-ellipsis-active': !!getMaxSubtitleLength()}\"\r\n [style.color]=\"getSubTitleColor()\"\r\n [style.font-size]=\"getSubTitleFontSize()\"\r\n [matTooltipDisabled]=\"!(item.subtitle && item.subtitle.length > getMaxSubtitleLength())\"\r\n [matTooltip]=\"item.subtitle\"\r\n matTooltipPosition=\"above\"\r\n >\r\n {{getTitle(item.subtitle, 'subtitle')}}\r\n </span>\r\n @if (!!item.iconSubTitle) {\r\n <span class=\"timeline-icon-question-mark\" aria-hidden=\"true\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-circle timeline-icon\"\r\n >{{item.iconSubTitle}}</mat-icon>\r\n </span>\r\n }\r\n @if (isInfo()) {\r\n <span class=\"timeline-icon-question-mark\">\r\n <mat-icon\r\n color=\"{{getIconColor()}}\"\r\n class=\"timeline-icon-question-mark-icon\"\r\n [matTooltip]=\"item?.subTitleInfo\"\r\n matTooltipPosition=\"above\"\r\n role=\"button\"\r\n aria-label=\"More information about subtitle\"\r\n >{{item.subTitleInfoIcon}}</mat-icon>\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}