@ruc-lib/timeline 2.0.0 → 3.1.0

package/README.md

@@ -2,90 +2,193 @@
 
 A timeline visualizes a series of chained events. It's a way to display information, like data tables, in a format that's easy to scan, allowing users to identify patterns and insights.
 
-# Features
-- Configurable layout (vertical or horizontal).
-- Customizable details and subdetails.
-- Option for simple text or Material card display.
-- Adjustable positioning (left, right, top, bottom, opposite).
-- Support for Material icons, tooltips, and configurable font styles for titles and subtitles.
-- Order configuration and text ellipsis for long content.
-- Support for Material Card
-
 # Installation guide
 
-# Install complete library
-
-`npm install @uxpractice/ruc-lib`
-
-# Install individual component
+To use the timeline component, you can install the entire RUC library or just this specific component.
 
-If users only need the timeline component, they can install it separately
-`npm install @ruc-lib/timeline`
-
-# Usage
+### Install the Entire Library
+```bash
+npm install @uxpractice/ruc-lib
+```
 
-# import required modules
+### Install Individual Component
 
-for library
-`import { RuclibTimelineModule } from '@uxpractice/ruc-lib/timeline'`
+If you only need the timeline component
+```bash
+npm install @ruc-lib/timeline
+```
 
-for seperate package
-`import { RuclibTimelineModule } from '@ruc-lib/timeline'`
+## Version Compatibility
+ 
+Please ensure you install the correct version of `@ruc-lib/timeline` based on your Angular version.
+ 
+| Angular Version    | Compatible `@ruc-lib/timeline` Version     |
+|--------------------|---------------------------------------------|
+| 15.x.x             | `npm install @ruc-lib/timeline@^3.0.0`     |
+| 16.x.x             | `npm install @ruc-lib/timeline@^3.0.0`     |
+
+
+## Usage
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibTimelineComponent`:
+
+```typescript
+import { Component } from '@angular/core';
+
+// For Complete Library
+import { RuclibTimelineComponent } from '@uxpractice/ruc-lib/timeline';
+
+// For Individual Package
+import { RuclibTimelineComponent } from '@ruc-lib/timeline';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibTimelineComponent],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  // Component code here
+}
+```
 
-# use component selector
+### 2. Use the Component
+In your component's template, use the `<uxp-ruclib-timeline>` selector and pass the configuration object to the `rucInputData` input.
 
-```
-<uxp-ruclib-timeline [rucInputData]="inputObjectDataTimeline" [customTheme]="customTheme"></uxp-ruclib-timeline>
+```html
+<uxp-ruclib-timeline [rucInputData]="timelineDataConfig" [customTheme]="customTheme"></uxp-ruclib-timeline>
 ```
 
-# Input and Output
-
-# Inputs
-rucInputData -> It is the configuration input to configure the timeline
-
-customTheme -> It is the name of the theme.
-
-# Output
-
-User can see the UI with timeline data
-
-# rucInputData (sample object)
-
-# Detail definition of the each property can be found in type definition file.
-
- ```
- rucInputData = {
-   layout: 'horizontal',
-   position: 'alternate',
-   imageAltText: 'alternative text for image',
-   titleFontColor: '#d77777',
-   subTitleFontColor: 'aqua',
-   titleFontSize: '20px',
-   subTitleFontSize: '15px',
-   titleBackgroundColor: 'yellow',
-   subTitleBackgroundColor: '#d77777',
-   highlightColor: 'lightgreen',
-   maxTitleLength: 5,
-   maxSubTitleLength: 20,
-   isInfo: false,
-   isTemplate: false,
-   data: [
-    { 
-      id: 1, 
-      title: 'Ordered', 
+## API Reference
+
+### Component Inputs
+
+| Input           | Type                 | Description                                        |
+|-----------------|----------------------|----------------------------------------------------|
+| `rucInputData`  | `timelineDataConfig` | The main configuration object for the timeline.    |
+| `customTheme`   | `string`             | An optional CSS class for custom theming.          |
+
+### Component Outputs
+
+| Output          | Type      | Description                                       |
+|-----------------|-----------|---------------------------------------------------|
+|-----------------|-----------| User can see the UI with timeline data.           |
+
+### `timelineDataConfig`
+This is the main configuration object for the timeline component.
+
+| Property                  | Type                                                    | Description                                                           |
+|---------------------------|---------------------------------------------------------|-----------------------------------------------------------------------|
+| `layout`                  | `'vertical' \| 'horizontal'`                            | Type of timeline (e.g., 'vertical', 'horizontal').                    |
+| `position`                | `'top' \| 'bottom' \| 'left' \| 'right' \| 'alternate'` | Position of the timeline (e.g., use top, bottom and horizontal when layout is horizontal and when layout is vertical use left, right and alternate). |
+| `titleFontColor`          | `string`                                                | configure color of the title text.                                    |
+| `subTitleFontColor`       | `string`                                                | configure color of the subtitle text.                                 |
+| `titleFontSize`           | `string`                                                | configure font size of the title text.                                |
+| `subTitleFontSize`        | `string`                                                | configure font size of the subtitle text.                             |
+| `titleBackgroundColor`    | `string`                                                | configure background color of the title.                              |
+| `subTitleBackgroundColor` | `string`                                                | configure background color of the subtitle.                           |
+| `highlightColor`          | `string`                                                | configure color used to highlight an active or selected timeline item.|
+| `iconColor`               | `'primary' \| 'accent' \| 'warn'`                       | configure the theme color for the timeline item icons.                |
+| `maxTitleLength`          | `number`                                                | configure maximum number of characters to display for the title before truncating. |
+| `maxSubTitleLength`       | `number`                                                | configure maximum number of characters to display for the subtitle before truncating. |
+| `isInfo`                  | `boolean`                                               | A flag to determine if the additional info sections for title and subtitle should be displayed.| 
+| `isTemplate`              | `boolean`                                               | A flag to indicate whether a custom template is being used for the timeline items instead of the default structure.|
+| `data`                    |  `timelineData`                                         | The array of data objects that represent the items in the timeline.   | 
+
+### `timelineData`
+This array of objects defines the content for each step of the tour guide.
+
+| Property            | Type              | Description                                                                                           |
+|---------------------|-------------------|-------------------------------------------------------------------------------------------------------|
+| `id`                | `number`          | to give the order.                                                                                    |
+| `title`             | `string`          | content for main heading.                                                                             |
+| `subtitle`          | `string`          | content for sub heading.                                                                              |
+| `content`           | `string`          | The main content or description for the timeline item.                                                |
+| `icon`              | `string`          | provide material icon for timeline.                                                                   |
+| `iconAriaLabel`     | `string`          | Custom width for the popup of the current step.                                                       |
+| `imageUrl`          | `string`          | provide url of image when isTemplate is true.                                                         |
+| `imageAltText`      | `string`          | provide alternative text of image when isTemplate is true.                                            |
+| `titleInfo`         | `string`          | provide content for titile when isInfo is true.                                                       |
+| `subTitleInfo`      | `string`          | provide content for subtitile when isInfo is true.                                                    |
+| `iconTitle`         | `string`          | The name of the Material icon to be displayed next to the title info text.                            |
+| `iconSubTitle`      | `string`          | The name of the Material icon to be displayed next to the subtitle info text.                         |
+| `titleInfoIcon`     | `string`          | The name of the Material icon for the title's info section, often used for a tooltip or popover.      |
+| `subTitleInfoIcon`  | `string`          | The name of the Material icon for the subtitle's info section, often used for a tooltip or popover.   |
+
+## Example Configuration
+
+Here's an example of how to configure the timeline component in your component's TypeScript file.
+
+```typescript
+import { Component } from '@angular/core';
+
+// For Complete Library
+import { RucTimelineInput, RucTimelineItemData } from '@uxpractice/ruc-lib/timeline';
+
+// For Individual package
+import { RucTimelineInput, RucTimelineItemData } from '@ruc-lib/timeline';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  timelineDataConfig: RucTimelineInput = {
+    layout: 'vertical',
+    position: 'left',
+    data: timelineData,
+  };
+
+  timelineData: RucTimelineItemData[] = [
+    {
+      id: 1,
+      title: 'Ordered',
       subtitle: 'sub-title',
     },
-    { 
-      id: 2, 
-      title: 'Processing', 
+    {
+      id: 2,
+      title: 'Processing',
       subtitle: 'sub-title',
     },
-  ]
-};
+    {
+      id: 3,
+      title: 'Shipped',
+      subtitle: 'sub-title',
+    },
+    {
+      id: 4,
+      title: 'Delivered',
+      subtitle: 'sub-title',
+    },
+    {
+      id: 5,
+      title: 'Introduction',
+      subtitle: "Established",
+    },
+  ];
+}
+```
+
+> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**
+
+When implementing **custom themes**, such as:
+
+```scss
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+}
+
+// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+  @include mat.typography-level($theme-custom-typography-name, body-1);
+}
 ```
 
-# Contribution
+
+## Contribution
+
 Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
 
-# Acknowledgements
-Thank you for choosing the Timeline Component Library. If you have any feedback or suggestions, please let us know!
+## Acknowledgements
+
+Thank you for choosing the timeline component. If you have any feedback or suggestions, please let us know!

package/fesm2022/ruc-lib-timeline.mjs

@@ -0,0 +1,216 @@
+import * as i0 from '@angular/core';
+import { Input, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+
+class RuclibTimelineComponent {
+    /**
+     * To get position of the timeline
+     * @param position
+     * @param index
+     * @returns default: left
+     */
+    getItemPosition(position, index) {
+        switch (position) {
+            case 'alternate': {
+                const layout = this.getLayout();
+                if (index % 2 == 0) {
+                    return layout === 'horizontal' ? 'top' : 'left';
+                }
+                else {
+                    return layout === 'horizontal' ? 'bottom' : 'right';
+                }
+            }
+            case 'top':
+                return 'top';
+            case 'bottom':
+                return 'bottom';
+            case 'right':
+                return 'right';
+            case 'left':
+            default:
+                return 'left';
+        }
+    }
+    /**
+     * To get layout of the timeline
+     * @param layout
+     * @returns default: vertical
+     */
+    getItemLayout(layout = '') {
+        switch (layout) {
+            case 'horizontal':
+                return 'horizontal';
+            case 'vertical':
+            default:
+                return 'vertical';
+        }
+    }
+    /**
+     * To get data from the input
+     */
+    getData() {
+        if (this.rucInputData?.data) {
+            this.data = this.rucInputData.data?.sort((a, b) => a?.id - b?.id) || [];
+        }
+        return typeof this.data !== 'undefined' ? this.data : [];
+    }
+    /**
+     * To get position of the timeline
+     * @returns default: left
+     */
+    getPosition(index = -1) {
+        if (index === -1) {
+            return this.rucInputData?.position;
+        }
+        return this.getItemPosition(this.rucInputData?.position || 'left', index); // Provide a default if position is undefined
+    }
+    /**
+    * To get layout of the timeline
+    * @returns default: vertical
+    */
+    getLayout() {
+        return this.getItemLayout(this.rucInputData?.layout); // Provide a default if layout is undefined
+    }
+    /**
+     * To get highlight color of the timeline
+     * @returns default: undefined
+     */
+    getHighlightColor() {
+        return this.rucInputData?.highlightColor;
+    }
+    /**
+     * To get title font color of the timeline
+     * @returns default: undefined
+     */
+    getTitleColor() {
+        return this.rucInputData?.titleFontColor;
+    }
+    /**
+     * To get sub title font color of the timeline
+     * @returns default: undefined
+     */
+    getSubTitleColor() {
+        return this.rucInputData?.subTitleFontColor;
+    }
+    /**
+     * To get title font size of the timeline
+     * @returns default: undefined
+     */
+    getTitleFontSize() {
+        return this.rucInputData?.titleFontSize;
+    }
+    /**
+     * To get subtitle font size of the timeline
+     * @returns default: undefined
+     */
+    getSubTitleFontSize() {
+        return this.rucInputData?.subTitleFontSize;
+    }
+    /**
+     * To get title background color of the timeline
+     * @returns default: undefined
+     */
+    getTitleBackgroundColor() {
+        return this.rucInputData?.titleBackgroundColor;
+    }
+    /**
+     * To get subtitle background color of the timeline
+     * @returns default: undefined
+     */
+    getSubTitleBackgroundColor() {
+        return this.rucInputData?.subTitleBackgroundColor;
+    }
+    /**
+     * To get max title length of the timeline
+     * @returns default: undefined
+     */
+    getMaxTitleLength() {
+        return this.rucInputData?.maxTitleLength;
+    }
+    /**
+     * To get max sub title length of the timeline
+     * @returns default: undefined
+     */
+    getMaxSubtitleLength() {
+        return this.rucInputData?.maxSubTitleLength;
+    }
+    /**
+     * To check if the isInfo variable is defined and value is true|false in timeline
+     * @returns default: undefined
+     */
+    isInfo() {
+        return this.rucInputData?.isInfo;
+    }
+    /**
+     * To get title in timeline
+     * @param title
+     * @param key
+     * @returns default: title
+     */
+    getTitle(title = '', key = '') {
+        switch (key) {
+            case 'title': {
+                const checkLength = this.getMaxTitleLength();
+                return this.isLengthDefined(title, checkLength);
+            }
+            case 'subtitle': {
+                const checkLength = this.getMaxSubtitleLength();
+                return this.isLengthDefined(title, checkLength);
+            }
+            default: {
+                return title;
+            }
+        }
+    }
+    /**
+     * To check if the length is defined
+     * @param title
+     * @param checkLength
+     * @returns default: title
+     */
+    isLengthDefined(title = '', checkLength) {
+        if (typeof checkLength !== 'undefined' && checkLength > 0 && title !== '') {
+            const str = title.substring(0, checkLength);
+            return title.length === checkLength ? str : str + '...';
+        }
+        return title;
+    }
+    /**
+     * To check if the template variable is defined and value is true|false in timeline
+     * @returns default: false
+     */
+    isCard() {
+        return typeof this.rucInputData?.isTemplate !== 'undefined' ? this.rucInputData?.isTemplate : false;
+    }
+    /**
+     * To get the color of icon
+     * @returns default: false
+     */
+    getIconColor() {
+        return this.rucInputData?.iconColor || 'primary';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibTimelineComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], propDecorators: { customTheme: [{
+                type: Input
+            }], rucInputData: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RuclibTimelineComponent };
+//# sourceMappingURL=ruc-lib-timeline.mjs.map

package/fesm2022/ruc-lib-timeline.mjs.map

@@ -0,0 +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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"}