@ruc-lib/skeleton 2.0.3 → 2.0.5

package/README.md

@@ -1,7 +1,113 @@
-# ruclib-skeleton
+# UXP Skeleton
 
-This library was generated with [Nx](https://nx.dev).
+A customizable Angular Skeleton is a placeholder to display instead of the actual content.
 
-## Running unit tests
+## Installation Guide
 
-Run `nx test ruclib-skeleton` to execute the unit tests.
+To use the UXP ruc-lib Skeleton Library, you can install the entire RUC library or just this specific component. 
+
+### Install the Entire Library
+```bash
+npm install @uxpractice/ruc-lib
+```
+
+### Install Individual Component
+If you only need the Skeleton Library:
+```bash
+npm install @ruc-lib/skeleton
+```
+
+## Usage
+
+### 1. Import the Module
+In your Angular module file (e.g., `app.module.ts`), import the `RuclibSkeletonModule`:
+
+```typescript
+import {RuclibSkeletonModule} from '@ruclib/skeleton';
+import { AppComponent } from './app.component';
+import { NgModule } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    RuclibSkeletonModule,
+    MatTooltipModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+### 2. Use the Component
+In your component's template, use the `<uxp-skeleton` selector and pass the configuration object to the `rucInputData` input.
+
+```html
+<uxp-skeleton [rucInputData]="skeletonData"></uxp-skeleton>
+```
+
+## API Reference
+
+### Component Inputs
+
+| Input          | Type               | Description                                  |
+|----------------|--------------------|----------------------------------------------|
+| `rucInputData` | `skeletonData`     | The main configuration object for the component. |
+| `customTheme`  | `string`           | An optional CSS class for custom theming.    |
+
+
+### `skeletonData`
+This is the main configuration object for the progress bar.
+
+| Property                | Type                                                                                                                                                     | Description                                                       |
+|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|
+| `shape`                 | `'rectangle' \| 'rounded-rectangle' \| 'square' \| 'circle' \| 'triangle' \| 'arrow-left' \| 'arrow-right' \| 'arrow-up' \| 'arrow-down' \| 'loader'`    | The Shape of the Skeleton .                                       |
+| `width`                 | `string`                                                                                                                                                 | To set the width of skeleton not applicable to loader.            |
+| `height`                | `string`                                                                                                                                                 | To set the height of skeleton not applicable to loader.           |
+| `borderRadius`          | `string`                                                                                                                                                 | To set the borderRadius of skeleton not applicable to loader bar. |
+| `class`                 | `string`                                                                                                                                                 | To set a custom class of skeleton not applicable to loader .      |
+| `tooltip`               | `boolean`                                                                                                                                                | If `true`, displays the tooltip labels.                           |
+| `tooltipText`           | `string`                                                                                                                                                 | To set a tooltip text of skeleton not applicable to loader.       |
+| `tooltipPosition`       | `'above' \| 'below' \| 'left' \| 'right'`                                                                                                                | To set a tooltip position of skeleton not applicable to loader.   |
+| `isLoader`              | `boolean`                                                                                                                                                | true , fasle when loader shape is selected labels.                |
+| `loaderPosition`        | `'page' \| 'section' \| 'inline' \| 'newline'`                                                                                                           | Loader Position labels.                                           |
+| `loaderCustomText`      | `string`                                                                                                                                                 | loader custom text.                                               |
+| `loaderSpinnerLogoUrl`  | `string`                                                                                                                                                 | loader image if user want.                                        |
+
+
+## Example Configuration
+
+Here's an example of how to configure the Skeleton in your component's TypeScript file.
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  skeletonData = {
+    shape: 'circle',
+        width: "50px",
+        height: "50px",
+        borderRadius: '',
+        class: '', 
+        tooltip: false,
+        tooltipText : '',
+        tooltipPosition: '',
+        isLoader: false
+  };
+}
+```
+
+## Contribution
+
+Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
+
+## Acknowledgements
+
+Thank you for choosing the Skeleton library. If you have any feedback or suggestions, please let us know!

package/esm2020/lib/ruclib-skeleton.module.mjs

@@ -2,19 +2,20 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SkeletonComponent } from './skeleton/skeleton.component';
 import { SkeletonService } from '../services/skeleton.service';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i0 from "@angular/core";
 export class RuclibSkeletonModule {
 }
 RuclibSkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RuclibSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, declarations: [SkeletonComponent], imports: [CommonModule], exports: [SkeletonComponent] });
-RuclibSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, providers: [SkeletonService], imports: [CommonModule] });
+RuclibSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, declarations: [SkeletonComponent], imports: [CommonModule, MatTooltipModule], exports: [SkeletonComponent] });
+RuclibSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, providers: [SkeletonService], imports: [CommonModule, MatTooltipModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, MatTooltipModule],
                     declarations: [SkeletonComponent],
                     exports: [SkeletonComponent],
                     providers: [SkeletonService]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXNrZWxldG9uLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3NrZWxldG9uL3NyYy9saWIvcnVjbGliLXNrZWxldG9uLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7O0FBUS9ELE1BQU0sT0FBTyxvQkFBb0I7O2tIQUFwQixvQkFBb0I7bUhBQXBCLG9CQUFvQixpQkFKaEIsaUJBQWlCLGFBRHRCLFlBQVksYUFFWixpQkFBaUI7bUhBR2hCLG9CQUFvQixhQUZyQixDQUFDLGVBQWUsQ0FBQyxZQUhqQixZQUFZOzRGQUtYLG9CQUFvQjtrQkFOaEMsUUFBUTttQkFBQztvQkFDUixPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7b0JBQ3ZCLFlBQVksRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUNqQyxPQUFPLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQztvQkFDNUIsU0FBUyxFQUFDLENBQUMsZUFBZSxDQUFDO2lCQUM1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IFNrZWxldG9uQ29tcG9uZW50IH0gZnJvbSAnLi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBTa2VsZXRvblNlcnZpY2UgfSBmcm9tICcuLi9zZXJ2aWNlcy9za2VsZXRvbi5zZXJ2aWNlJztcclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXHJcbiAgZGVjbGFyYXRpb25zOiBbU2tlbGV0b25Db21wb25lbnRdLFxyXG4gIGV4cG9ydHM6IFtTa2VsZXRvbkNvbXBvbmVudF0sXHJcbiAgcHJvdmlkZXJzOltTa2VsZXRvblNlcnZpY2VdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBSdWNsaWJTa2VsZXRvbk1vZHVsZSB7fVxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXNrZWxldG9uLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3NrZWxldG9uL3NyYy9saWIvcnVjbGliLXNrZWxldG9uLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7O0FBUTdELE1BQU0sT0FBTyxvQkFBb0I7O2tIQUFwQixvQkFBb0I7bUhBQXBCLG9CQUFvQixpQkFKaEIsaUJBQWlCLGFBRHRCLFlBQVksRUFBQyxnQkFBZ0IsYUFFN0IsaUJBQWlCO21IQUdoQixvQkFBb0IsYUFGckIsQ0FBQyxlQUFlLENBQUMsWUFIakIsWUFBWSxFQUFDLGdCQUFnQjs0RkFLNUIsb0JBQW9CO2tCQU5oQyxRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBQyxnQkFBZ0IsQ0FBRTtvQkFDekMsWUFBWSxFQUFFLENBQUMsaUJBQWlCLENBQUM7b0JBQ2pDLE9BQU8sRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUM1QixTQUFTLEVBQUMsQ0FBQyxlQUFlLENBQUM7aUJBQzVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgU2tlbGV0b25Db21wb25lbnQgfSBmcm9tICcuL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFNrZWxldG9uU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBNYXRUb29sdGlwTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdG9vbHRpcCc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsTWF0VG9vbHRpcE1vZHVsZSBdLFxyXG4gIGRlY2xhcmF0aW9uczogW1NrZWxldG9uQ29tcG9uZW50XSxcclxuICBleHBvcnRzOiBbU2tlbGV0b25Db21wb25lbnRdLFxyXG4gIHByb3ZpZGVyczpbU2tlbGV0b25TZXJ2aWNlXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUnVjbGliU2tlbGV0b25Nb2R1bGUge31cclxuIl19

package/esm2020/lib/skeleton/skeleton.component.mjs

@@ -4,6 +4,7 @@ import { SkeletonService } from '../../services/skeleton.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/skeleton.service";
 import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/tooltip";
 export class SkeletonComponent {
     set rucInputData(value) {
         if (value) {
@@ -33,13 +34,13 @@ export class SkeletonComponent {
     }
 }
 SkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, deps: [{ token: i1.SkeletonService }], target: i0.ɵɵFactoryTarget.Component });
-SkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SkeletonComponent, selector: "uxp-skeleton", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadies\"\r\n    [ngClass]=\"data?.class\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n         <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+SkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SkeletonComponent, selector: "uxp-skeleton", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadius\"\r\n    [ngClass]=\"data?.class\"\r\n    [matTooltip]=\"data.tooltipText ?? ''\"\r\n    [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n        <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uxp-skeleton', template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadies\"\r\n    [ngClass]=\"data?.class\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n         <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'uxp-skeleton', template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadius\"\r\n    [ngClass]=\"data?.class\"\r\n    [matTooltip]=\"data.tooltipText ?? ''\"\r\n    [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n        <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.SkeletonService }]; }, propDecorators: { customTheme: [{
                 type: Input
             }], rucInputData: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ydWNsaWIvc2tlbGV0b24vc3JjL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3J1Y2xpYi9za2VsZXRvbi9zcmMvbGliL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFvQyxNQUFNLGVBQWUsQ0FBQztBQUVuRixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7OztBQU1sRSxNQUFNLE9BQU8saUJBQWlCO0lBTzVCLElBQWEsWUFBWSxDQUFDLEtBQThCO1FBQ3RELElBQUcsS0FBSyxFQUFDO1lBQ1Asa0NBQWtDO1lBQ2xDLElBQUksQ0FBQyxlQUFlLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLENBQUM7WUFFOUMsMkNBQTJDO1lBQzNDLE1BQU0sYUFBYSxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLGlCQUFpQixFQUFFLEVBQUUsR0FBRyxLQUFLLEVBQUUsQ0FBQTtZQUMvRSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQzNDO0lBQ0gsQ0FBQztJQU1ELFlBQW1CLGVBQStCO1FBQS9CLG9CQUFlLEdBQWYsZUFBZSxDQUFnQjtRQWxCbEQsYUFBUSxHQUFHLElBQUksS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBY2pCLHFCQUFnQixHQUFHLElBQUksZUFBZSxDQUFrQixJQUFJLENBQUMsZUFBZSxDQUFDLGlCQUFpQixFQUFFLENBQUMsQ0FBQztRQUMxRyxVQUFLLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksRUFBRSxDQUFDO0lBR1EsQ0FBQztJQUN0RCxRQUFRO0lBQ1IsQ0FBQztJQUVEOzs7T0FHRztJQUNILFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFHLE9BQU8sQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxjQUFjLENBQUMsQ0FBQyxXQUFXLEVBQUM7WUFDakUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUM7U0FDbEU7SUFDSCxDQUFDOzsrR0FsQ1UsaUJBQWlCO21HQUFqQixpQkFBaUIsK0lDVDlCLDRxRUFnRE07NEZEdkNPLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxjQUFjO3NHQU9mLFdBQVc7c0JBQW5CLEtBQUs7Z0JBSU8sWUFBWTtzQkFBeEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7U2tlbGV0b25PcHRpb25zfSBmcm9tICcuLi8uLi9tb2RlbC9za2VsZXRvbk9wdGlvbnMnO1xyXG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgU2tlbGV0b25TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvc2tlbGV0b24uc2VydmljZSc7XHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndXhwLXNrZWxldG9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2tlbGV0b24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3NrZWxldG9uLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTa2VsZXRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcclxuXHJcbiBcclxuICBASW5wdXQoKSBjdXN0b21UaGVtZSE6IHN0cmluZztcclxuICBkaXZBcnJheSA9IG5ldyBBcnJheSgxMik7XHJcbiAgXHJcblxyXG4gIEBJbnB1dCgpIHNldCBydWNJbnB1dERhdGEodmFsdWU6UGFydGlhbDxTa2VsZXRvbk9wdGlvbnM+KXtcclxuICAgIGlmKHZhbHVlKXtcclxuICAgICAgLy91cGRhdGUgZGVmYXVsdCB2YWx1ZSBkeW5hbWljYWxseVxyXG4gICAgICB0aGlzLnNrZWxldG9uU2VydmljZS5zZXREZWZhdWx0T3B0aW9ucyh2YWx1ZSk7XHJcblxyXG4gICAgICAvL21lcmdlIHVwZGF0ZWQgZGVmYXVsdHMgd2l0aCB0aGUgbmV3IGlucHV0XHJcbiAgICAgIGNvbnN0IG1lcmdlZE9wdGlvbnMgPSB7IC4uLnRoaXMuc2tlbGV0b25TZXJ2aWNlLmdldERlZmF1bHRPcHRpb25zKCksIC4uLnZhbHVlIH1cclxuICAgICAgdGhpcy5pbnB1dERhdGFTdWJqZWN0Lm5leHQobWVyZ2VkT3B0aW9ucyk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGlucHV0RGF0YVN1YmplY3QgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PFNrZWxldG9uT3B0aW9ucz4odGhpcy5za2VsZXRvblNlcnZpY2UuZ2V0RGVmYXVsdE9wdGlvbnMoKSk7IFxyXG4gIGRhdGEkID0gdGhpcy5pbnB1dERhdGFTdWJqZWN0LmFzT2JzZXJ2YWJsZSgpO1xyXG5cclxuXHJcbiAgY29uc3RydWN0b3IocHVibGljIHNrZWxldG9uU2VydmljZTpTa2VsZXRvblNlcnZpY2UpeyB9XHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBcclxuICAgKiBAcGFyYW0gY2hhbmdlcyBcclxuICAgKi9cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKXtcclxuICAgIGlmKGNoYW5nZXNbJ3J1Y0lucHV0RGF0YSddICYmICFjaGFuZ2VzWydydWNJbnB1dERhdGEnXS5maXJzdENoYW5nZSl7XHJcbiAgICAgIHRoaXMuaW5wdXREYXRhU3ViamVjdC5uZXh0KGNoYW5nZXNbJ3J1Y0lucHV0RGF0YSddLmN1cnJlbnRWYWx1ZSk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iLCI8ZGl2IFtjbGFzc109XCJjdXN0b21UaGVtZSA/IGN1c3RvbVRoZW1lIDogJydcIiAqbmdJZj1cImRhdGEkIHwgYXN5bmMgYXMgZGF0YVwiPlxyXG4gICA8IS0tIFNrZWxldG9uIFN0YXJ0IC0tPlxyXG4gICAgPGRpdiBjbGFzcz1cInNrZWxldG9uIHNrZWxldG9uLXRleHRcIiBcclxuICAgIFtjbGFzc109XCJkYXRhLnNoYXBlXCIgXHJcbiAgICAqbmdJZj1cIiFkYXRhPy5pc0xvYWRlclwiIFxyXG4gICAgW3N0eWxlLndpZHRoXT1cImRhdGE/LndpZHRoXCIgXHJcbiAgICBbc3R5bGUuaGVpZ2h0XT1cImRhdGE/LmhlaWdodFwiXHJcbiAgICBbc3R5bGUuYm9yZGVyUmFkaXVzXT1cImRhdGE/LmJvcmRlclJhZGllc1wiXHJcbiAgICBbbmdDbGFzc109XCJkYXRhPy5jbGFzc1wiXHJcbiAgICA+PC9kaXY+XHJcbjwhLS0gU2tlbGV0b24gRW5kIC0tPlxyXG48IS0tIExvYWRlciBIVE1MIFNlY3Rpb24gc3RhcnQtLT5cclxuPGRpdiAqbmdJZj1cImRhdGEuaXNMb2FkZXIgJiYgZGF0YS5sb2FkZXJQb3NpdGlvblwiPlxyXG4gICAgPGRpdiAqbmdJZj1cImRhdGEubG9hZGVyUG9zaXRpb24gPT0gJ3BhZ2UnXCIgY2xhc3M9XCJydWMtbG9hZGluZyBydWMtbG9hZC1zcGlubmVyLXBhZ2VcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwicGFnZVJlZjsgY29udGV4dDogdGhpc1wiPjwvbmctY29udGFpbmVyPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2ICpuZ0lmPVwiZGF0YS5sb2FkZXJQb3NpdGlvbiA9PSAnc2VjdGlvbidcIiBjbGFzcz1cInJ1Yy1sb2FkaW5nIHJ1Yy1sb2FkLXNwaW5uZXItc2VjdGlvblwiPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJwYWdlUmVmOyBjb250ZXh0OiB0aGlzXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJkYXRhLmxvYWRlclBvc2l0aW9uID09ICdpbmxpbmUnXCI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImlubGluZVJlZjsgY29udGV4dDogdGhpc1wiPjwvbmctY29udGFpbmVyPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZGF0YS5sb2FkZXJQb3NpdGlvbiA9PSAnbmV3bGluZSdcIiBjbGFzcz1cIm5ld2xpbmUtbG9hZFwiPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJpbmxpbmVSZWY7IGNvbnRleHQ6IHRoaXNcIj48L25nLWNvbnRhaW5lcj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG5cclxuICAgIDxuZy10ZW1wbGF0ZSAjcGFnZVJlZj5cclxuICAgICAgICA8IS0tIHVzZSBpbiBsb29wIC0tPlxyXG4gICAgICAgICA8IS0tIDxkaXYgKm5nRm9yPVwibGV0IF8gb2YgZGl2QXJyYXlcIj5cclxuICAgICAgICAgPC9kaXY+IC0tPlxyXG4gICAgICAgICA8ZGl2IGNsYXNzPVwibG9hZGVyXCI+PC9kaXY+XHJcblxyXG4gICAgICAgIDxpbWcgY2xhc3M9XCJzcGlubmVyLWxvZ29cIiAqbmdJZj1cImRhdGEubG9hZGVyU3Bpbm5lckxvZ29VcmxcIiBhbHQ9XCJMb2dvXCI+XHJcbiAgICAgICAgPHAgKm5nSWY9XCJkYXRhLmxvYWRlckN1c3RvbVRleHRcIiBjbGFzcz1cInNwaW5uZXItdGV4dFwiPnt7ZGF0YS5sb2FkZXJDdXN0b21UZXh0fX0uLi48L3A+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuICAgIDxuZy10ZW1wbGF0ZSAjaW5saW5lUmVmPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJsb2FkZXJcIj48L2Rpdj5cclxuXHJcbiAgICAgICAgPCEtLSA8ZGl2IGNsYXNzPVwicnVjLWxvYWRpbmcgcnVjLWxvYWQtc3Bpbm5lci1zbWFsbC1pbmxpbmVcIj5cclxuICAgICAgICAgICAgPGltZyBjbGFzcz1cInNwaW5uZXItbG9nb1wiICpuZ0lmPVwiZGF0YS5sb2FkZXJTcGlubmVyTG9nb1VybFwiIGFsdD1cIkxvZ29cIj5cclxuICAgICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBfIG9mIGRpdkFycmF5XCI+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgPC9kaXY+IC0tPlxyXG4gICAgICAgIDxwICpuZ0lmPVwiZGF0YS5sb2FkZXJDdXN0b21UZXh0XCIgY2xhc3M9XCJydWMtc3Bpbm5lci10ZXh0LWlubGluZVwiPnt7ZGF0YS5sb2FkZXJDdXN0b21UZXh0fX0uLi48L3A+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG48L2Rpdj5cclxuPCEtLSBMb2FkZXIgSFRNTCBzZWN0aW9uIGVuZCAtLT5cclxuPC9kaXY+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ydWNsaWIvc2tlbGV0b24vc3JjL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3J1Y2xpYi9za2VsZXRvbi9zcmMvbGliL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFvQyxNQUFNLGVBQWUsQ0FBQztBQUVuRixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7Ozs7QUFNbEUsTUFBTSxPQUFPLGlCQUFpQjtJQU81QixJQUFhLFlBQVksQ0FBQyxLQUE4QjtRQUN0RCxJQUFHLEtBQUssRUFBQztZQUNQLGtDQUFrQztZQUNsQyxJQUFJLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRTlDLDJDQUEyQztZQUMzQyxNQUFNLGFBQWEsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLEdBQUcsS0FBSyxFQUFFLENBQUE7WUFDL0UsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUMzQztJQUNILENBQUM7SUFNRCxZQUFtQixlQUErQjtRQUEvQixvQkFBZSxHQUFmLGVBQWUsQ0FBZ0I7UUFsQmxELGFBQVEsR0FBRyxJQUFJLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQWNqQixxQkFBZ0IsR0FBRyxJQUFJLGVBQWUsQ0FBa0IsSUFBSSxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLENBQUM7UUFDMUcsVUFBSyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUdRLENBQUM7SUFDdEQsUUFBUTtJQUNSLENBQUM7SUFFRDs7O09BR0c7SUFDSCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBRyxPQUFPLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDLENBQUMsV0FBVyxFQUFDO1lBQ2pFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLGNBQWMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQ2xFO0lBQ0gsQ0FBQzs7K0dBbENVLGlCQUFpQjttR0FBakIsaUJBQWlCLCtJQ1Q5QiwweEVBa0RNOzRGRHpDTyxpQkFBaUI7a0JBTDdCLFNBQVM7K0JBQ0UsY0FBYztzR0FPZixXQUFXO3NCQUFuQixLQUFLO2dCQUlPLFlBQVk7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge1NrZWxldG9uT3B0aW9uc30gZnJvbSAnLi4vLi4vbW9kZWwvc2tlbGV0b25PcHRpb25zJztcclxuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0IH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IFNrZWxldG9uU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3V4cC1za2VsZXRvbicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3NrZWxldG9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9za2VsZXRvbi5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2tlbGV0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XHJcblxyXG4gXHJcbiAgQElucHV0KCkgY3VzdG9tVGhlbWUhOiBzdHJpbmc7XHJcbiAgZGl2QXJyYXkgPSBuZXcgQXJyYXkoMTIpO1xyXG4gIFxyXG5cclxuICBASW5wdXQoKSBzZXQgcnVjSW5wdXREYXRhKHZhbHVlOlBhcnRpYWw8U2tlbGV0b25PcHRpb25zPil7XHJcbiAgICBpZih2YWx1ZSl7XHJcbiAgICAgIC8vdXBkYXRlIGRlZmF1bHQgdmFsdWUgZHluYW1pY2FsbHlcclxuICAgICAgdGhpcy5za2VsZXRvblNlcnZpY2Uuc2V0RGVmYXVsdE9wdGlvbnModmFsdWUpO1xyXG5cclxuICAgICAgLy9tZXJnZSB1cGRhdGVkIGRlZmF1bHRzIHdpdGggdGhlIG5ldyBpbnB1dFxyXG4gICAgICBjb25zdCBtZXJnZWRPcHRpb25zID0geyAuLi50aGlzLnNrZWxldG9uU2VydmljZS5nZXREZWZhdWx0T3B0aW9ucygpLCAuLi52YWx1ZSB9XHJcbiAgICAgIHRoaXMuaW5wdXREYXRhU3ViamVjdC5uZXh0KG1lcmdlZE9wdGlvbnMpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBpbnB1dERhdGFTdWJqZWN0ID0gbmV3IEJlaGF2aW9yU3ViamVjdDxTa2VsZXRvbk9wdGlvbnM+KHRoaXMuc2tlbGV0b25TZXJ2aWNlLmdldERlZmF1bHRPcHRpb25zKCkpOyBcclxuICBkYXRhJCA9IHRoaXMuaW5wdXREYXRhU3ViamVjdC5hc09ic2VydmFibGUoKTtcclxuXHJcblxyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBza2VsZXRvblNlcnZpY2U6U2tlbGV0b25TZXJ2aWNlKXsgfVxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogXHJcbiAgICogQHBhcmFtIGNoYW5nZXMgXHJcbiAgICovXHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyl7XHJcbiAgICBpZihjaGFuZ2VzWydydWNJbnB1dERhdGEnXSAmJiAhY2hhbmdlc1sncnVjSW5wdXREYXRhJ10uZmlyc3RDaGFuZ2Upe1xyXG4gICAgICB0aGlzLmlucHV0RGF0YVN1YmplY3QubmV4dChjaGFuZ2VzWydydWNJbnB1dERhdGEnXS5jdXJyZW50VmFsdWUpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbn1cclxuIiwiPGRpdiBbY2xhc3NdPVwiY3VzdG9tVGhlbWUgPyBjdXN0b21UaGVtZSA6ICcnXCIgKm5nSWY9XCJkYXRhJCB8IGFzeW5jIGFzIGRhdGFcIj5cclxuICAgPCEtLSBTa2VsZXRvbiBTdGFydCAtLT5cclxuICAgIDxkaXYgY2xhc3M9XCJza2VsZXRvbiBza2VsZXRvbi10ZXh0XCIgXHJcbiAgICBbY2xhc3NdPVwiZGF0YS5zaGFwZVwiIFxyXG4gICAgKm5nSWY9XCIhZGF0YT8uaXNMb2FkZXJcIiBcclxuICAgIFtzdHlsZS53aWR0aF09XCJkYXRhPy53aWR0aFwiIFxyXG4gICAgW3N0eWxlLmhlaWdodF09XCJkYXRhPy5oZWlnaHRcIlxyXG4gICAgW3N0eWxlLmJvcmRlclJhZGl1c109XCJkYXRhPy5ib3JkZXJSYWRpdXNcIlxyXG4gICAgW25nQ2xhc3NdPVwiZGF0YT8uY2xhc3NcIlxyXG4gICAgW21hdFRvb2x0aXBdPVwiZGF0YS50b29sdGlwVGV4dCA/PyAnJ1wiXHJcbiAgICBbbWF0VG9vbHRpcFBvc2l0aW9uXT1cImRhdGEudG9vbHRpcFBvc2l0aW9uID8/ICdhYm92ZSdcIlxyXG4gICAgPjwvZGl2PlxyXG48IS0tIFNrZWxldG9uIEVuZCAtLT5cclxuPCEtLSBMb2FkZXIgSFRNTCBTZWN0aW9uIHN0YXJ0LS0+XHJcbjxkaXYgKm5nSWY9XCJkYXRhLmlzTG9hZGVyICYmIGRhdGEubG9hZGVyUG9zaXRpb25cIj5cclxuICAgIDxkaXYgKm5nSWY9XCJkYXRhLmxvYWRlclBvc2l0aW9uID09ICdwYWdlJ1wiIGNsYXNzPVwicnVjLWxvYWRpbmcgcnVjLWxvYWQtc3Bpbm5lci1wYWdlXCI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInBhZ2VSZWY7IGNvbnRleHQ6IHRoaXNcIj48L25nLWNvbnRhaW5lcj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiAqbmdJZj1cImRhdGEubG9hZGVyUG9zaXRpb24gPT0gJ3NlY3Rpb24nXCIgY2xhc3M9XCJydWMtbG9hZGluZyBydWMtbG9hZC1zcGlubmVyLXNlY3Rpb25cIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwicGFnZVJlZjsgY29udGV4dDogdGhpc1wiPjwvbmctY29udGFpbmVyPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZGF0YS5sb2FkZXJQb3NpdGlvbiA9PSAnaW5saW5lJ1wiPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJpbmxpbmVSZWY7IGNvbnRleHQ6IHRoaXNcIj48L25nLWNvbnRhaW5lcj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImRhdGEubG9hZGVyUG9zaXRpb24gPT0gJ25ld2xpbmUnXCIgY2xhc3M9XCJuZXdsaW5lLWxvYWRcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaW5saW5lUmVmOyBjb250ZXh0OiB0aGlzXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuXHJcbiAgICA8bmctdGVtcGxhdGUgI3BhZ2VSZWY+XHJcbiAgICAgICAgPCEtLSB1c2UgaW4gbG9vcCAtLT5cclxuICAgICAgICAgPCEtLSA8ZGl2ICpuZ0Zvcj1cImxldCBfIG9mIGRpdkFycmF5XCI+XHJcbiAgICAgICAgIDwvZGl2PiAtLT5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibG9hZGVyXCI+PC9kaXY+XHJcblxyXG4gICAgICAgIDxpbWcgY2xhc3M9XCJzcGlubmVyLWxvZ29cIiAqbmdJZj1cImRhdGEubG9hZGVyU3Bpbm5lckxvZ29VcmxcIiBhbHQ9XCJMb2dvXCI+XHJcbiAgICAgICAgPHAgKm5nSWY9XCJkYXRhLmxvYWRlckN1c3RvbVRleHRcIiBjbGFzcz1cInNwaW5uZXItdGV4dFwiPnt7ZGF0YS5sb2FkZXJDdXN0b21UZXh0fX0uLi48L3A+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuICAgIDxuZy10ZW1wbGF0ZSAjaW5saW5lUmVmPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJsb2FkZXJcIj48L2Rpdj5cclxuXHJcbiAgICAgICAgPCEtLSA8ZGl2IGNsYXNzPVwicnVjLWxvYWRpbmcgcnVjLWxvYWQtc3Bpbm5lci1zbWFsbC1pbmxpbmVcIj5cclxuICAgICAgICAgICAgPGltZyBjbGFzcz1cInNwaW5uZXItbG9nb1wiICpuZ0lmPVwiZGF0YS5sb2FkZXJTcGlubmVyTG9nb1VybFwiIGFsdD1cIkxvZ29cIj5cclxuICAgICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBfIG9mIGRpdkFycmF5XCI+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgPC9kaXY+IC0tPlxyXG4gICAgICAgIDxwICpuZ0lmPVwiZGF0YS5sb2FkZXJDdXN0b21UZXh0XCIgY2xhc3M9XCJydWMtc3Bpbm5lci10ZXh0LWlubGluZVwiPnt7ZGF0YS5sb2FkZXJDdXN0b21UZXh0fX0uLi48L3A+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG48L2Rpdj5cclxuPCEtLSBMb2FkZXIgSFRNTCBzZWN0aW9uIGVuZCAtLT5cclxuPC9kaXY+Il19

package/esm2020/model/skeletonOptions.mjs

@@ -1,3 +1,3 @@
 export class SkeletonOptions {
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25PcHRpb25zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ydWNsaWIvc2tlbGV0b24vc3JjL21vZGVsL3NrZWxldG9uT3B0aW9ucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sZUFBZTtDQWMzQiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjbGFzcyBTa2VsZXRvbk9wdGlvbnN7XHJcbiAgICAvLyByZWN0YW5nbGUgLCByb3VuZGVkLXJlY3RhbmdsZSwgc3F1YXJlLCBjaXJjbGUsIFxyXG4vLyB0cmlhbmdsZSwgYXJyb3ctbGVmdCwgYXJyb3ctcmlnaHQsIGFycm93LXVwLCBhcnJvdy1kb3duXHJcbiAgICBzaGFwZT8gOiBhbnk7IC8vdGV4dCwgcmVjdGFuZ2xlLCByb3VuZGVkLCBTcXVhcmUsIENpcmNsZSwgVHJpYW5nbGUsIGxlZnQgQXJyb3csIHJpZ2h0ICwgdXAgYW5kIGRvd24gYXJyb3csIGxvYWRlclxyXG4gICAgd2lkdGg/OiBhbnk7ICAvL1RvIHNldCB0aGUgd2lkdGggb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBoZWlnaHQ/OiBhbnk7IC8vVG8gc2V0IHRoZSBoZWlnaHQgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBib3JkZXJSYWRpZXM/OiBhbnk7IC8vVG8gc2V0IHRoZSBib3JkZXJSYWRpZXMgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBjbGFzcz86IGFueTsgLy9UbyBzZXQgYSBjdXN0b20gY2xhc3Mgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICB0b29sdGlwPzogYm9vbGVhbjsgLy9UbyBzZXQgYSB0b29sdGlwIG9mIHNrZWxldG9uIG5vdCBhcHBsaWNhYmxlIHRvIGxvYWRlclxyXG4gICAgdG9vbHRpcFRleHQ/IDogc3RyaW5nOyAvL1RvIHNldCBhIHRvb2x0aXAgdGV4dCBvZiBza2VsZXRvbiBub3QgYXBwbGljYWJsZSB0byBsb2FkZXJcclxuICAgIGlzTG9hZGVyPzogYm9vbGVhbjsgLy8gdHJ1ZSAsIGZhc2xlIHdoZW4gbG9hZGVyIGlzIHNlbGVjdGVkXHJcbiAgICBsb2FkZXJQb3NpdGlvbj86IHN0cmluZyAvLydwYWdlJyB8ICdzZWN0aW9uJyB8ICdpbmxpbmUnIHwgJ25ld2xpbmUnOyAvLyBsb2FkZXIgcG9zaXRpb25cclxuICAgIGxvYWRlckN1c3RvbVRleHQ/OiBzdHJpbmc7IC8vIGxvYWRlciBjdXN0b20gdGV4dFxyXG4gICAgbG9hZGVyU3Bpbm5lckxvZ29Vcmw/OiBzdHJpbmc7IC8vIGxvYWRlciBpbWFnZSBpZiB1c2VyIHdhbnRcclxufVxyXG5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25PcHRpb25zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ydWNsaWIvc2tlbGV0b24vc3JjL21vZGVsL3NrZWxldG9uT3B0aW9ucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sZUFBZTtDQWUzQiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjbGFzcyBTa2VsZXRvbk9wdGlvbnN7XHJcbiAgICAvLyByZWN0YW5nbGUgLCByb3VuZGVkLXJlY3RhbmdsZSwgc3F1YXJlLCBjaXJjbGUsIFxyXG4vLyB0cmlhbmdsZSwgYXJyb3ctbGVmdCwgYXJyb3ctcmlnaHQsIGFycm93LXVwLCBhcnJvdy1kb3duXHJcbiAgICBzaGFwZT8gOiBhbnk7IC8vdGV4dCwgcmVjdGFuZ2xlLCByb3VuZGVkLCBTcXVhcmUsIENpcmNsZSwgVHJpYW5nbGUsIGxlZnQgQXJyb3csIHJpZ2h0ICwgdXAgYW5kIGRvd24gYXJyb3csIGxvYWRlclxyXG4gICAgd2lkdGg/OiBhbnk7ICAvL1RvIHNldCB0aGUgd2lkdGggb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBoZWlnaHQ/OiBhbnk7IC8vVG8gc2V0IHRoZSBoZWlnaHQgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBib3JkZXJSYWRpdXM/OiBhbnk7IC8vVG8gc2V0IHRoZSBib3JkZXJSYWRpdXMgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBjbGFzcz86IGFueTsgLy9UbyBzZXQgYSBjdXN0b20gY2xhc3Mgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICB0b29sdGlwPzogYm9vbGVhbjsgLy9UbyBzZXQgYSB0b29sdGlwIG9mIHNrZWxldG9uIG5vdCBhcHBsaWNhYmxlIHRvIGxvYWRlclxyXG4gICAgdG9vbHRpcFRleHQ/IDogc3RyaW5nOyAvL1RvIHNldCBhIHRvb2x0aXAgdGV4dCBvZiBza2VsZXRvbiBub3QgYXBwbGljYWJsZSB0byBsb2FkZXJcclxuICAgIHRvb2x0aXBQb3NpdGlvbj86ICdhYm92ZScgfCAnYmVsb3cnIHwgJ2xlZnQnIHwgJ3JpZ2h0JztcclxuICAgIGlzTG9hZGVyPzogYm9vbGVhbjsgLy8gdHJ1ZSAsIGZhc2xlIHdoZW4gbG9hZGVyIGlzIHNlbGVjdGVkXHJcbiAgICBsb2FkZXJQb3NpdGlvbj86IHN0cmluZyAvLydwYWdlJyB8ICdzZWN0aW9uJyB8ICdpbmxpbmUnIHwgJ25ld2xpbmUnOyAvLyBsb2FkZXIgcG9zaXRpb25cclxuICAgIGxvYWRlckN1c3RvbVRleHQ/OiBzdHJpbmc7IC8vIGxvYWRlciBjdXN0b20gdGV4dFxyXG4gICAgbG9hZGVyU3Bpbm5lckxvZ29Vcmw/OiBzdHJpbmc7IC8vIGxvYWRlciBpbWFnZSBpZiB1c2VyIHdhbnRcclxufVxyXG5cclxuIl19

package/esm2020/services/skeleton.service.mjs

@@ -7,10 +7,11 @@ export class SkeletonService {
             shape: 'circle',
             width: "50px",
             height: "50px",
-            borderRadies: '',
+            borderRadius: '',
             class: '',
             tooltip: false,
             tooltipText: '',
+            tooltipPosition: 'above',
             isLoader: false,
         };
     }
@@ -37,4 +38,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     providedIn: 'root',
                 }]
         }], ctorParameters: function () { return []; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3NrZWxldG9uL3NyYy9zZXJ2aWNlcy9za2VsZXRvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQW9CLE1BQU0sZUFBZSxDQUFDOztBQVE3RCxNQUFNLE9BQU8sZUFBZTtJQUd4QixvQ0FBb0M7SUFFcEM7UUFDRSxJQUFJLENBQUMsY0FBYyxHQUFHO1lBQ3BCLEtBQUssRUFBRSxRQUFRO1lBQ2YsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxFQUFFO1lBQ2hCLEtBQUssRUFBRSxFQUFFO1lBQ1QsT0FBTyxFQUFFLEtBQUs7WUFDZCxXQUFXLEVBQUcsRUFBRTtZQUNoQixRQUFRLEVBQUUsS0FBSztTQUNoQixDQUFBO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNILGlCQUFpQjtRQUNmLE9BQU8sRUFBQyxHQUFHLElBQUksQ0FBQyxjQUFjLEVBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsaUJBQWlCLENBQUMsVUFBb0M7UUFDcEQsSUFBSSxDQUFDLGNBQWMsR0FBRSxFQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxHQUFHLFVBQVUsRUFBQyxDQUFDO0lBRS9ELENBQUM7OzZHQWpDUSxlQUFlO2lIQUFmLGVBQWUsY0FGZCxNQUFNOzRGQUVQLGVBQWU7a0JBSDNCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJqZWN0LCBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHtTa2VsZXRvbk9wdGlvbnN9IGZyb20gJy4uL21vZGVsL3NrZWxldG9uT3B0aW9ucyc7XHJcbmltcG9ydCB7U2tlbGV0b25Db21wb25lbnR9IGZyb20gJy4uL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290JyxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNrZWxldG9uU2VydmljZSB7XHJcbiAgICBkZWZhdWx0T3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIC8vIHNrZWxldG9uT3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgICB0aGlzLmRlZmF1bHRPcHRpb25zID0ge1xyXG4gICAgICAgIHNoYXBlOiAnY2lyY2xlJyxcclxuICAgICAgICB3aWR0aDogXCI1MHB4XCIsXHJcbiAgICAgICAgaGVpZ2h0OiBcIjUwcHhcIixcclxuICAgICAgICBib3JkZXJSYWRpZXM6ICcnLFxyXG4gICAgICAgIGNsYXNzOiAnJywgXHJcbiAgICAgICAgdG9vbHRpcDogZmFsc2UsXHJcbiAgICAgICAgdG9vbHRpcFRleHQgOiAnJyxcclxuICAgICAgICBpc0xvYWRlcjogZmFsc2UsXHJcbiAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICAvKipcclxuICAgICAqIGdldCBvcHRpb25zXHJcbiAgICAgKiBAcmV0dXJucyBkZWZhdWx0T3B0aW9uc1xyXG4gICAgICovXHJcbiAgICBnZXREZWZhdWx0T3B0aW9ucygpOiBTa2VsZXRvbk9wdGlvbnN7XHJcbiAgICAgIHJldHVybiB7Li4udGhpcy5kZWZhdWx0T3B0aW9uc307XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBzZXQgb3B0aW9uc1xyXG4gICAgICogQHBhcmFtIG5ld09wdGlvbnMgXHJcbiAgICAgKi9cclxuICAgIHNldERlZmF1bHRPcHRpb25zKG5ld09wdGlvbnM6IFBhcnRpYWw8U2tlbGV0b25PcHRpb25zPik6IHZvaWR7XHJcbiAgICAgIHRoaXMuZGVmYXVsdE9wdGlvbnMgPXsuLi50aGlzLmRlZmF1bHRPcHRpb25zLCAuLi5uZXdPcHRpb25zfTtcclxuXHJcbiAgICB9XHJcbn0iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3NrZWxldG9uL3NyYy9zZXJ2aWNlcy9za2VsZXRvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQW9CLE1BQU0sZUFBZSxDQUFDOztBQVE3RCxNQUFNLE9BQU8sZUFBZTtJQUd4QixvQ0FBb0M7SUFFcEM7UUFDRSxJQUFJLENBQUMsY0FBYyxHQUFHO1lBQ3BCLEtBQUssRUFBRSxRQUFRO1lBQ2YsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxFQUFFO1lBQ2hCLEtBQUssRUFBRSxFQUFFO1lBQ1QsT0FBTyxFQUFFLEtBQUs7WUFDZCxXQUFXLEVBQUcsRUFBRTtZQUNoQixlQUFlLEVBQUUsT0FBTztZQUN4QixRQUFRLEVBQUUsS0FBSztTQUNoQixDQUFBO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNILGlCQUFpQjtRQUNmLE9BQU8sRUFBQyxHQUFHLElBQUksQ0FBQyxjQUFjLEVBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsaUJBQWlCLENBQUMsVUFBb0M7UUFDcEQsSUFBSSxDQUFDLGNBQWMsR0FBRSxFQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxHQUFHLFVBQVUsRUFBQyxDQUFDO0lBRS9ELENBQUM7OzZHQWxDUSxlQUFlO2lIQUFmLGVBQWUsY0FGZCxNQUFNOzRGQUVQLGVBQWU7a0JBSDNCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJqZWN0LCBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHtTa2VsZXRvbk9wdGlvbnN9IGZyb20gJy4uL21vZGVsL3NrZWxldG9uT3B0aW9ucyc7XHJcbmltcG9ydCB7U2tlbGV0b25Db21wb25lbnR9IGZyb20gJy4uL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290JyxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNrZWxldG9uU2VydmljZSB7XHJcbiAgICBkZWZhdWx0T3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIC8vIHNrZWxldG9uT3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgICB0aGlzLmRlZmF1bHRPcHRpb25zID0ge1xyXG4gICAgICAgIHNoYXBlOiAnY2lyY2xlJyxcclxuICAgICAgICB3aWR0aDogXCI1MHB4XCIsXHJcbiAgICAgICAgaGVpZ2h0OiBcIjUwcHhcIixcclxuICAgICAgICBib3JkZXJSYWRpdXM6ICcnLFxyXG4gICAgICAgIGNsYXNzOiAnJywgXHJcbiAgICAgICAgdG9vbHRpcDogZmFsc2UsXHJcbiAgICAgICAgdG9vbHRpcFRleHQgOiAnJyxcclxuICAgICAgICB0b29sdGlwUG9zaXRpb246ICdhYm92ZScsXHJcbiAgICAgICAgaXNMb2FkZXI6IGZhbHNlLFxyXG4gICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBnZXQgb3B0aW9uc1xyXG4gICAgICogQHJldHVybnMgZGVmYXVsdE9wdGlvbnNcclxuICAgICAqL1xyXG4gICAgZ2V0RGVmYXVsdE9wdGlvbnMoKTogU2tlbGV0b25PcHRpb25ze1xyXG4gICAgICByZXR1cm4gey4uLnRoaXMuZGVmYXVsdE9wdGlvbnN9O1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogc2V0IG9wdGlvbnNcclxuICAgICAqIEBwYXJhbSBuZXdPcHRpb25zIFxyXG4gICAgICovXHJcbiAgICBzZXREZWZhdWx0T3B0aW9ucyhuZXdPcHRpb25zOiBQYXJ0aWFsPFNrZWxldG9uT3B0aW9ucz4pOiB2b2lke1xyXG4gICAgICB0aGlzLmRlZmF1bHRPcHRpb25zID17Li4udGhpcy5kZWZhdWx0T3B0aW9ucywgLi4ubmV3T3B0aW9uc307XHJcblxyXG4gICAgfVxyXG59Il19

package/fesm2015/ruc-lib-skeleton.mjs

@@ -3,6 +3,8 @@ import { Injectable, Component, Input, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { BehaviorSubject } from 'rxjs';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 class SkeletonService {
     // skeletonOptions: SkeletonOptions;
@@ -11,10 +13,11 @@ class SkeletonService {
             shape: 'circle',
             width: "50px",
             height: "50px",
-            borderRadies: '',
+            borderRadius: '',
             class: '',
             tooltip: false,
             tooltipText: '',
+            tooltipPosition: 'above',
             isLoader: false,
         };
     }
@@ -71,10 +74,10 @@ class SkeletonComponent {
     }
 }
 SkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, deps: [{ token: SkeletonService }], target: i0.ɵɵFactoryTarget.Component });
-SkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SkeletonComponent, selector: "uxp-skeleton", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadies\"\r\n    [ngClass]=\"data?.class\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n         <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+SkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SkeletonComponent, selector: "uxp-skeleton", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadius\"\r\n    [ngClass]=\"data?.class\"\r\n    [matTooltip]=\"data.tooltipText ?? ''\"\r\n    [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n        <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uxp-skeleton', template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadies\"\r\n    [ngClass]=\"data?.class\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n         <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'uxp-skeleton', template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadius\"\r\n    [ngClass]=\"data?.class\"\r\n    [matTooltip]=\"data.tooltipText ?? ''\"\r\n    [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n        <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: SkeletonService }]; }, propDecorators: { customTheme: [{
                 type: Input
             }], rucInputData: [{
@@ -84,12 +87,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class RuclibSkeletonModule {
 }
 RuclibSkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RuclibSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, declarations: [SkeletonComponent], imports: [CommonModule], exports: [SkeletonComponent] });
-RuclibSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, providers: [SkeletonService], imports: [CommonModule] });
+RuclibSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, declarations: [SkeletonComponent], imports: [CommonModule, MatTooltipModule], exports: [SkeletonComponent] });
+RuclibSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, providers: [SkeletonService], imports: [CommonModule, MatTooltipModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, MatTooltipModule],
                     declarations: [SkeletonComponent],
                     exports: [SkeletonComponent],
                     providers: [SkeletonService]

package/fesm2015/ruc-lib-skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ruc-lib-skeleton.mjs","sources":["../../../../../libs/ruclib/skeleton/src/services/skeleton.service.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.html","../../../../../libs/ruclib/skeleton/src/lib/ruclib-skeleton.module.ts","../../../../../libs/ruclib/skeleton/src/model/skeletonOptions.ts","../../../../../libs/ruclib/skeleton/src/ruc-lib-skeleton.ts"],"sourcesContent":["import { Injectable, ViewContainerRef } from '@angular/core';\r\nimport { Observable, Subject, BehaviorSubject } from 'rxjs';\r\nimport {SkeletonOptions} from '../model/skeletonOptions';\r\nimport {SkeletonComponent} from '../lib/skeleton/skeleton.component';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class SkeletonService {\r\n    defaultOptions: SkeletonOptions;\r\n\r\n    // skeletonOptions: SkeletonOptions;\r\n\r\n    constructor() {\r\n      this.defaultOptions = {\r\n        shape: 'circle',\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadies: '',\r\n        class: '', \r\n        tooltip: false,\r\n        tooltipText : '',\r\n        isLoader: false,\r\n      }\r\n    }\r\n\r\n    /**\r\n     * get options\r\n     * @returns defaultOptions\r\n     */\r\n    getDefaultOptions(): SkeletonOptions{\r\n      return {...this.defaultOptions};\r\n    }\r\n\r\n    /**\r\n     * set options\r\n     * @param newOptions \r\n     */\r\n    setDefaultOptions(newOptions: Partial<SkeletonOptions>): void{\r\n      this.defaultOptions ={...this.defaultOptions, ...newOptions};\r\n\r\n    }\r\n}","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport {SkeletonOptions} from '../../model/skeletonOptions';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { SkeletonService } from '../../services/skeleton.service';\r\n@Component({\r\n  selector: 'uxp-skeleton',\r\n  templateUrl: './skeleton.component.html',\r\n  styleUrls: ['./skeleton.component.scss'],\r\n})\r\nexport class SkeletonComponent implements OnInit, OnChanges {\r\n\r\n \r\n  @Input() customTheme!: string;\r\n  divArray = new Array(12);\r\n  \r\n\r\n  @Input() set rucInputData(value:Partial<SkeletonOptions>){\r\n    if(value){\r\n      //update default value dynamically\r\n      this.skeletonService.setDefaultOptions(value);\r\n\r\n      //merge updated defaults with the new input\r\n      const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value }\r\n      this.inputDataSubject.next(mergedOptions);\r\n    }\r\n  }\r\n\r\n  private inputDataSubject = new BehaviorSubject<SkeletonOptions>(this.skeletonService.getDefaultOptions()); \r\n  data$ = this.inputDataSubject.asObservable();\r\n\r\n\r\n  constructor(public skeletonService:SkeletonService){ }\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  /**\r\n   * \r\n   * @param changes \r\n   */\r\n  ngOnChanges(changes: SimpleChanges){\r\n    if(changes['rucInputData'] && !changes['rucInputData'].firstChange){\r\n      this.inputDataSubject.next(changes['rucInputData'].currentValue);\r\n    }\r\n  }\r\n\r\n}\r\n","<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadies\"\r\n    [ngClass]=\"data?.class\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n         <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SkeletonComponent } from './skeleton/skeleton.component';\r\nimport { SkeletonService } from '../services/skeleton.service';\r\n\r\n@NgModule({\r\n  imports: [CommonModule],\r\n  declarations: [SkeletonComponent],\r\n  exports: [SkeletonComponent],\r\n  providers:[SkeletonService]\r\n})\r\nexport class RuclibSkeletonModule {}\r\n","export class SkeletonOptions{\r\n    // rectangle , rounded-rectangle, square, circle, \r\n// triangle, arrow-left, arrow-right, arrow-up, arrow-down\r\n    shape? : any; //text, rectangle, rounded, Square, Circle, Triangle, left Arrow, right , up and down arrow, loader\r\n    width?: any;  //To set the width of skeleton not applicable to loader\r\n    height?: any; //To set the height of skeleton not applicable to loader\r\n    borderRadies?: any; //To set the borderRadies of skeleton not applicable to loader\r\n    class?: any; //To set a custom class of skeleton not applicable to loader\r\n    tooltip?: boolean; //To set a tooltip of skeleton not applicable to loader\r\n    tooltipText? : string; //To set a tooltip text of skeleton not applicable to loader\r\n    isLoader?: boolean; // true , fasle when loader is selected\r\n    loaderPosition?: string //'page' | 'section' | 'inline' | 'newline'; // loader position\r\n    loaderCustomText?: string; // loader custom text\r\n    loaderSpinnerLogoUrl?: string; // loader image if user want\r\n}\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SkeletonService"],"mappings":"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"}
+{"version":3,"file":"ruc-lib-skeleton.mjs","sources":["../../../../../libs/ruclib/skeleton/src/services/skeleton.service.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.html","../../../../../libs/ruclib/skeleton/src/lib/ruclib-skeleton.module.ts","../../../../../libs/ruclib/skeleton/src/model/skeletonOptions.ts","../../../../../libs/ruclib/skeleton/src/ruc-lib-skeleton.ts"],"sourcesContent":["import { Injectable, ViewContainerRef } from '@angular/core';\r\nimport { Observable, Subject, BehaviorSubject } from 'rxjs';\r\nimport {SkeletonOptions} from '../model/skeletonOptions';\r\nimport {SkeletonComponent} from '../lib/skeleton/skeleton.component';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class SkeletonService {\r\n    defaultOptions: SkeletonOptions;\r\n\r\n    // skeletonOptions: SkeletonOptions;\r\n\r\n    constructor() {\r\n      this.defaultOptions = {\r\n        shape: 'circle',\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadius: '',\r\n        class: '', \r\n        tooltip: false,\r\n        tooltipText : '',\r\n        tooltipPosition: 'above',\r\n        isLoader: false,\r\n      }\r\n    }\r\n\r\n    /**\r\n     * get options\r\n     * @returns defaultOptions\r\n     */\r\n    getDefaultOptions(): SkeletonOptions{\r\n      return {...this.defaultOptions};\r\n    }\r\n\r\n    /**\r\n     * set options\r\n     * @param newOptions \r\n     */\r\n    setDefaultOptions(newOptions: Partial<SkeletonOptions>): void{\r\n      this.defaultOptions ={...this.defaultOptions, ...newOptions};\r\n\r\n    }\r\n}","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport {SkeletonOptions} from '../../model/skeletonOptions';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { SkeletonService } from '../../services/skeleton.service';\r\n@Component({\r\n  selector: 'uxp-skeleton',\r\n  templateUrl: './skeleton.component.html',\r\n  styleUrls: ['./skeleton.component.scss'],\r\n})\r\nexport class SkeletonComponent implements OnInit, OnChanges {\r\n\r\n \r\n  @Input() customTheme!: string;\r\n  divArray = new Array(12);\r\n  \r\n\r\n  @Input() set rucInputData(value:Partial<SkeletonOptions>){\r\n    if(value){\r\n      //update default value dynamically\r\n      this.skeletonService.setDefaultOptions(value);\r\n\r\n      //merge updated defaults with the new input\r\n      const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value }\r\n      this.inputDataSubject.next(mergedOptions);\r\n    }\r\n  }\r\n\r\n  private inputDataSubject = new BehaviorSubject<SkeletonOptions>(this.skeletonService.getDefaultOptions()); \r\n  data$ = this.inputDataSubject.asObservable();\r\n\r\n\r\n  constructor(public skeletonService:SkeletonService){ }\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  /**\r\n   * \r\n   * @param changes \r\n   */\r\n  ngOnChanges(changes: SimpleChanges){\r\n    if(changes['rucInputData'] && !changes['rucInputData'].firstChange){\r\n      this.inputDataSubject.next(changes['rucInputData'].currentValue);\r\n    }\r\n  }\r\n\r\n}\r\n","<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadius\"\r\n    [ngClass]=\"data?.class\"\r\n    [matTooltip]=\"data.tooltipText ?? ''\"\r\n    [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n        <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SkeletonComponent } from './skeleton/skeleton.component';\r\nimport { SkeletonService } from '../services/skeleton.service';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\n@NgModule({\r\n  imports: [CommonModule,MatTooltipModule ],\r\n  declarations: [SkeletonComponent],\r\n  exports: [SkeletonComponent],\r\n  providers:[SkeletonService]\r\n})\r\nexport class RuclibSkeletonModule {}\r\n","export class SkeletonOptions{\r\n    // rectangle , rounded-rectangle, square, circle, \r\n// triangle, arrow-left, arrow-right, arrow-up, arrow-down\r\n    shape? : any; //text, rectangle, rounded, Square, Circle, Triangle, left Arrow, right , up and down arrow, loader\r\n    width?: any;  //To set the width of skeleton not applicable to loader\r\n    height?: any; //To set the height of skeleton not applicable to loader\r\n    borderRadius?: any; //To set the borderRadius of skeleton not applicable to loader\r\n    class?: any; //To set a custom class of skeleton not applicable to loader\r\n    tooltip?: boolean; //To set a tooltip of skeleton not applicable to loader\r\n    tooltipText? : string; //To set a tooltip text of skeleton not applicable to loader\r\n    tooltipPosition?: 'above' | 'below' | 'left' | 'right';\r\n    isLoader?: boolean; // true , fasle when loader is selected\r\n    loaderPosition?: string //'page' | 'section' | 'inline' | 'newline'; // loader position\r\n    loaderCustomText?: string; // loader custom text\r\n    loaderSpinnerLogoUrl?: string; // loader image if user want\r\n}\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SkeletonService"],"mappings":"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"}

package/fesm2020/ruc-lib-skeleton.mjs

@@ -3,6 +3,8 @@ import { Injectable, Component, Input, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { BehaviorSubject } from 'rxjs';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 class SkeletonService {
     // skeletonOptions: SkeletonOptions;
@@ -11,10 +13,11 @@ class SkeletonService {
             shape: 'circle',
             width: "50px",
             height: "50px",
-            borderRadies: '',
+            borderRadius: '',
             class: '',
             tooltip: false,
             tooltipText: '',
+            tooltipPosition: 'above',
             isLoader: false,
         };
     }
@@ -71,10 +74,10 @@ class SkeletonComponent {
     }
 }
 SkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, deps: [{ token: SkeletonService }], target: i0.ɵɵFactoryTarget.Component });
-SkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SkeletonComponent, selector: "uxp-skeleton", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadies\"\r\n    [ngClass]=\"data?.class\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n         <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+SkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SkeletonComponent, selector: "uxp-skeleton", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadius\"\r\n    [ngClass]=\"data?.class\"\r\n    [matTooltip]=\"data.tooltipText ?? ''\"\r\n    [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n        <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uxp-skeleton', template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadies\"\r\n    [ngClass]=\"data?.class\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n         <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'uxp-skeleton', template: "<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadius\"\r\n    [ngClass]=\"data?.class\"\r\n    [matTooltip]=\"data.tooltipText ?? ''\"\r\n    [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n        <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px;position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px;position:relative;margin:0 auto}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px;display:inline-block;position:relative;top:-5px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: SkeletonService }]; }, propDecorators: { customTheme: [{
                 type: Input
             }], rucInputData: [{
@@ -84,12 +87,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class RuclibSkeletonModule {
 }
 RuclibSkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RuclibSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, declarations: [SkeletonComponent], imports: [CommonModule], exports: [SkeletonComponent] });
-RuclibSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, providers: [SkeletonService], imports: [CommonModule] });
+RuclibSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, declarations: [SkeletonComponent], imports: [CommonModule, MatTooltipModule], exports: [SkeletonComponent] });
+RuclibSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, providers: [SkeletonService], imports: [CommonModule, MatTooltipModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, MatTooltipModule],
                     declarations: [SkeletonComponent],
                     exports: [SkeletonComponent],
                     providers: [SkeletonService]

package/fesm2020/ruc-lib-skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ruc-lib-skeleton.mjs","sources":["../../../../../libs/ruclib/skeleton/src/services/skeleton.service.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.html","../../../../../libs/ruclib/skeleton/src/lib/ruclib-skeleton.module.ts","../../../../../libs/ruclib/skeleton/src/model/skeletonOptions.ts","../../../../../libs/ruclib/skeleton/src/ruc-lib-skeleton.ts"],"sourcesContent":["import { Injectable, ViewContainerRef } from '@angular/core';\r\nimport { Observable, Subject, BehaviorSubject } from 'rxjs';\r\nimport {SkeletonOptions} from '../model/skeletonOptions';\r\nimport {SkeletonComponent} from '../lib/skeleton/skeleton.component';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class SkeletonService {\r\n    defaultOptions: SkeletonOptions;\r\n\r\n    // skeletonOptions: SkeletonOptions;\r\n\r\n    constructor() {\r\n      this.defaultOptions = {\r\n        shape: 'circle',\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadies: '',\r\n        class: '', \r\n        tooltip: false,\r\n        tooltipText : '',\r\n        isLoader: false,\r\n      }\r\n    }\r\n\r\n    /**\r\n     * get options\r\n     * @returns defaultOptions\r\n     */\r\n    getDefaultOptions(): SkeletonOptions{\r\n      return {...this.defaultOptions};\r\n    }\r\n\r\n    /**\r\n     * set options\r\n     * @param newOptions \r\n     */\r\n    setDefaultOptions(newOptions: Partial<SkeletonOptions>): void{\r\n      this.defaultOptions ={...this.defaultOptions, ...newOptions};\r\n\r\n    }\r\n}","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport {SkeletonOptions} from '../../model/skeletonOptions';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { SkeletonService } from '../../services/skeleton.service';\r\n@Component({\r\n  selector: 'uxp-skeleton',\r\n  templateUrl: './skeleton.component.html',\r\n  styleUrls: ['./skeleton.component.scss'],\r\n})\r\nexport class SkeletonComponent implements OnInit, OnChanges {\r\n\r\n \r\n  @Input() customTheme!: string;\r\n  divArray = new Array(12);\r\n  \r\n\r\n  @Input() set rucInputData(value:Partial<SkeletonOptions>){\r\n    if(value){\r\n      //update default value dynamically\r\n      this.skeletonService.setDefaultOptions(value);\r\n\r\n      //merge updated defaults with the new input\r\n      const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value }\r\n      this.inputDataSubject.next(mergedOptions);\r\n    }\r\n  }\r\n\r\n  private inputDataSubject = new BehaviorSubject<SkeletonOptions>(this.skeletonService.getDefaultOptions()); \r\n  data$ = this.inputDataSubject.asObservable();\r\n\r\n\r\n  constructor(public skeletonService:SkeletonService){ }\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  /**\r\n   * \r\n   * @param changes \r\n   */\r\n  ngOnChanges(changes: SimpleChanges){\r\n    if(changes['rucInputData'] && !changes['rucInputData'].firstChange){\r\n      this.inputDataSubject.next(changes['rucInputData'].currentValue);\r\n    }\r\n  }\r\n\r\n}\r\n","<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadies\"\r\n    [ngClass]=\"data?.class\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n         <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SkeletonComponent } from './skeleton/skeleton.component';\r\nimport { SkeletonService } from '../services/skeleton.service';\r\n\r\n@NgModule({\r\n  imports: [CommonModule],\r\n  declarations: [SkeletonComponent],\r\n  exports: [SkeletonComponent],\r\n  providers:[SkeletonService]\r\n})\r\nexport class RuclibSkeletonModule {}\r\n","export class SkeletonOptions{\r\n    // rectangle , rounded-rectangle, square, circle, \r\n// triangle, arrow-left, arrow-right, arrow-up, arrow-down\r\n    shape? : any; //text, rectangle, rounded, Square, Circle, Triangle, left Arrow, right , up and down arrow, loader\r\n    width?: any;  //To set the width of skeleton not applicable to loader\r\n    height?: any; //To set the height of skeleton not applicable to loader\r\n    borderRadies?: any; //To set the borderRadies of skeleton not applicable to loader\r\n    class?: any; //To set a custom class of skeleton not applicable to loader\r\n    tooltip?: boolean; //To set a tooltip of skeleton not applicable to loader\r\n    tooltipText? : string; //To set a tooltip text of skeleton not applicable to loader\r\n    isLoader?: boolean; // true , fasle when loader is selected\r\n    loaderPosition?: string //'page' | 'section' | 'inline' | 'newline'; // loader position\r\n    loaderCustomText?: string; // loader custom text\r\n    loaderSpinnerLogoUrl?: string; // loader image if user want\r\n}\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SkeletonService"],"mappings":"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"}
+{"version":3,"file":"ruc-lib-skeleton.mjs","sources":["../../../../../libs/ruclib/skeleton/src/services/skeleton.service.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.html","../../../../../libs/ruclib/skeleton/src/lib/ruclib-skeleton.module.ts","../../../../../libs/ruclib/skeleton/src/model/skeletonOptions.ts","../../../../../libs/ruclib/skeleton/src/ruc-lib-skeleton.ts"],"sourcesContent":["import { Injectable, ViewContainerRef } from '@angular/core';\r\nimport { Observable, Subject, BehaviorSubject } from 'rxjs';\r\nimport {SkeletonOptions} from '../model/skeletonOptions';\r\nimport {SkeletonComponent} from '../lib/skeleton/skeleton.component';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class SkeletonService {\r\n    defaultOptions: SkeletonOptions;\r\n\r\n    // skeletonOptions: SkeletonOptions;\r\n\r\n    constructor() {\r\n      this.defaultOptions = {\r\n        shape: 'circle',\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadius: '',\r\n        class: '', \r\n        tooltip: false,\r\n        tooltipText : '',\r\n        tooltipPosition: 'above',\r\n        isLoader: false,\r\n      }\r\n    }\r\n\r\n    /**\r\n     * get options\r\n     * @returns defaultOptions\r\n     */\r\n    getDefaultOptions(): SkeletonOptions{\r\n      return {...this.defaultOptions};\r\n    }\r\n\r\n    /**\r\n     * set options\r\n     * @param newOptions \r\n     */\r\n    setDefaultOptions(newOptions: Partial<SkeletonOptions>): void{\r\n      this.defaultOptions ={...this.defaultOptions, ...newOptions};\r\n\r\n    }\r\n}","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport {SkeletonOptions} from '../../model/skeletonOptions';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { SkeletonService } from '../../services/skeleton.service';\r\n@Component({\r\n  selector: 'uxp-skeleton',\r\n  templateUrl: './skeleton.component.html',\r\n  styleUrls: ['./skeleton.component.scss'],\r\n})\r\nexport class SkeletonComponent implements OnInit, OnChanges {\r\n\r\n \r\n  @Input() customTheme!: string;\r\n  divArray = new Array(12);\r\n  \r\n\r\n  @Input() set rucInputData(value:Partial<SkeletonOptions>){\r\n    if(value){\r\n      //update default value dynamically\r\n      this.skeletonService.setDefaultOptions(value);\r\n\r\n      //merge updated defaults with the new input\r\n      const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value }\r\n      this.inputDataSubject.next(mergedOptions);\r\n    }\r\n  }\r\n\r\n  private inputDataSubject = new BehaviorSubject<SkeletonOptions>(this.skeletonService.getDefaultOptions()); \r\n  data$ = this.inputDataSubject.asObservable();\r\n\r\n\r\n  constructor(public skeletonService:SkeletonService){ }\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  /**\r\n   * \r\n   * @param changes \r\n   */\r\n  ngOnChanges(changes: SimpleChanges){\r\n    if(changes['rucInputData'] && !changes['rucInputData'].firstChange){\r\n      this.inputDataSubject.next(changes['rucInputData'].currentValue);\r\n    }\r\n  }\r\n\r\n}\r\n","<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n   <!-- Skeleton Start -->\r\n    <div class=\"skeleton skeleton-text\" \r\n    [class]=\"data.shape\" \r\n    *ngIf=\"!data?.isLoader\" \r\n    [style.width]=\"data?.width\" \r\n    [style.height]=\"data?.height\"\r\n    [style.borderRadius]=\"data?.borderRadius\"\r\n    [ngClass]=\"data?.class\"\r\n    [matTooltip]=\"data.tooltipText ?? ''\"\r\n    [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n    ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n    <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n        <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n        <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #pageRef>\r\n        <!-- use in loop -->\r\n         <!-- <div *ngFor=\"let _ of divArray\">\r\n         </div> -->\r\n        <div class=\"loader\"></div>\r\n\r\n        <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n\r\n    <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\r\n\r\n        <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n            <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n           <div *ngFor=\"let _ of divArray\">\r\n            </div>\r\n       </div> -->\r\n        <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n    </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SkeletonComponent } from './skeleton/skeleton.component';\r\nimport { SkeletonService } from '../services/skeleton.service';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\n@NgModule({\r\n  imports: [CommonModule,MatTooltipModule ],\r\n  declarations: [SkeletonComponent],\r\n  exports: [SkeletonComponent],\r\n  providers:[SkeletonService]\r\n})\r\nexport class RuclibSkeletonModule {}\r\n","export class SkeletonOptions{\r\n    // rectangle , rounded-rectangle, square, circle, \r\n// triangle, arrow-left, arrow-right, arrow-up, arrow-down\r\n    shape? : any; //text, rectangle, rounded, Square, Circle, Triangle, left Arrow, right , up and down arrow, loader\r\n    width?: any;  //To set the width of skeleton not applicable to loader\r\n    height?: any; //To set the height of skeleton not applicable to loader\r\n    borderRadius?: any; //To set the borderRadius of skeleton not applicable to loader\r\n    class?: any; //To set a custom class of skeleton not applicable to loader\r\n    tooltip?: boolean; //To set a tooltip of skeleton not applicable to loader\r\n    tooltipText? : string; //To set a tooltip text of skeleton not applicable to loader\r\n    tooltipPosition?: 'above' | 'below' | 'left' | 'right';\r\n    isLoader?: boolean; // true , fasle when loader is selected\r\n    loaderPosition?: string //'page' | 'section' | 'inline' | 'newline'; // loader position\r\n    loaderCustomText?: string; // loader custom text\r\n    loaderSpinnerLogoUrl?: string; // loader image if user want\r\n}\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SkeletonService"],"mappings":"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"}

package/lib/ruclib-skeleton.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./skeleton/skeleton.component";
 import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/tooltip";
 export declare class RuclibSkeletonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<RuclibSkeletonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RuclibSkeletonModule, [typeof i1.SkeletonComponent], [typeof i2.CommonModule], [typeof i1.SkeletonComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RuclibSkeletonModule, [typeof i1.SkeletonComponent], [typeof i2.CommonModule, typeof i3.MatTooltipModule], [typeof i1.SkeletonComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<RuclibSkeletonModule>;
 }

package/model/skeletonOptions.d.ts

@@ -2,10 +2,11 @@ export declare class SkeletonOptions {
     shape?: any;
     width?: any;
     height?: any;
-    borderRadies?: any;
+    borderRadius?: any;
     class?: any;
     tooltip?: boolean;
     tooltipText?: string;
+    tooltipPosition?: 'above' | 'below' | 'left' | 'right';
     isLoader?: boolean;
     loaderPosition?: string;
     loaderCustomText?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ruc-lib/skeleton",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^17.0.0 || ^16.0.0 || ^15.0.0",