@ruc-lib/skeleton 3.1.0 → 3.2.0

package/README.md

@@ -23,32 +23,33 @@ Please ensure you install the correct version of `@ruc-lib/skeleton` based on yo
  
 | Angular Version    | Compatible `@ruc-lib/skeleton` Version     |
 |--------------------|---------------------------------------------|
-| 15.x.x             | `npm install @ruc-lib/skeleton@^3.0.0`     |
-| 16.x.x             | `npm install @ruc-lib/skeleton@^3.0.0`     |
+| 15.x.x             | `npm install @ruc-lib/skeleton@^3.2.0`     |
+| 16.x.x             | `npm install @ruc-lib/skeleton@^3.2.0`     |
 
 
 ## Usage
 
-### 1. Import the Component
-In your Angular component file (e.g., `app.component.ts`), import the `RuclibSkeletonComponent`:
-
-```typescript
-import { Component } from '@angular/core';
-
-// For Complete Library
-import { RuclibSkeletonComponent } from '@uxpractice/ruc-lib/skeleton';
-
-// For Individual Package
-import { RuclibSkeletonComponent } from '@ruc-lib/skeleton';
-
-@Component({
-  selector: 'app-root',
-  imports: [RuclibSkeletonComponent],
-  templateUrl: './app.component.html',
-})
-export class AppComponent {
-  // Component code here
-}
+### 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
@@ -119,4 +120,4 @@ Contributions are welcome! Feel free to open issues or pull requests for any enh
 
 ## Acknowledgements
 
-Thank you for choosing the Skeleton library. If you have any feedback or suggestions, please let us know!
+Thank you for choosing the Skeleton library. If you have any feedback or suggestions, please let us know!

package/esm2020/index.mjs

@@ -0,0 +1,5 @@
+export * from './lib/ruclib-skeleton.module';
+export * from './lib/skeleton/skeleton.component';
+export * from './services/skeleton.service';
+export * from './model/skeletonOptions';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx5QkFBeUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL3J1Y2xpYi1za2VsZXRvbi5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnO1xyXG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5leHBvcnQgKiBmcm9tICcuL21vZGVsL3NrZWxldG9uT3B0aW9ucyc7Il19

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

@@ -0,0 +1,21 @@
+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, 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, MatTooltipModule],
+                    declarations: [SkeletonComponent],
+                    exports: [SkeletonComponent],
+                    providers: [SkeletonService]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXNrZWxldG9uLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvcnVjbGliLXNrZWxldG9uLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7O0FBUTdELE1BQU0sT0FBTyxvQkFBb0I7O2tIQUFwQixvQkFBb0I7bUhBQXBCLG9CQUFvQixpQkFKaEIsaUJBQWlCLGFBRHRCLFlBQVksRUFBQyxnQkFBZ0IsYUFFN0IsaUJBQWlCO21IQUdoQixvQkFBb0IsYUFGckIsQ0FBQyxlQUFlLENBQUMsWUFIakIsWUFBWSxFQUFDLGdCQUFnQjs0RkFLNUIsb0JBQW9CO2tCQU5oQyxRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBQyxnQkFBZ0IsQ0FBRTtvQkFDekMsWUFBWSxFQUFFLENBQUMsaUJBQWlCLENBQUM7b0JBQ2pDLE9BQU8sRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUM1QixTQUFTLEVBQUMsQ0FBQyxlQUFlLENBQUM7aUJBQzVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgU2tlbGV0b25Db21wb25lbnQgfSBmcm9tICcuL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFNrZWxldG9uU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBNYXRUb29sdGlwTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdG9vbHRpcCc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsTWF0VG9vbHRpcE1vZHVsZSBdLFxyXG4gIGRlY2xhcmF0aW9uczogW1NrZWxldG9uQ29tcG9uZW50XSxcclxuICBleHBvcnRzOiBbU2tlbGV0b25Db21wb25lbnRdLFxyXG4gIHByb3ZpZGVyczpbU2tlbGV0b25TZXJ2aWNlXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUnVjbGliU2tlbGV0b25Nb2R1bGUge31cclxuIl19

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

@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+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) {
+            //update default value dynamically
+            this.skeletonService.setDefaultOptions(value);
+            //merge updated defaults with the new input
+            const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value };
+            this.inputDataSubject.next(mergedOptions);
+        }
+    }
+    constructor(skeletonService) {
+        this.skeletonService = skeletonService;
+        this.divArray = new Array(12);
+        this.inputDataSubject = new BehaviorSubject(this.skeletonService.getDefaultOptions());
+        this.data$ = this.inputDataSubject.asObservable();
+    }
+    ngOnInit() {
+    }
+    /**
+     *
+     * @param changes
+     */
+    ngOnChanges(changes) {
+        if (changes['rucInputData'] && !changes['rucInputData'].firstChange) {
+            this.inputDataSubject.next(changes['rucInputData'].currentValue);
+        }
+    }
+}
+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-ruclib-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-ruclib-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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9zcmMvbGliL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFvQyxNQUFNLGVBQWUsQ0FBQztBQUVuRixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7Ozs7QUFNbEUsTUFBTSxPQUFPLGlCQUFpQjtJQU81QixJQUFhLFlBQVksQ0FBQyxLQUE4QjtRQUN0RCxJQUFHLEtBQUssRUFBQztZQUNQLGtDQUFrQztZQUNsQyxJQUFJLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRTlDLDJDQUEyQztZQUMzQyxNQUFNLGFBQWEsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLEdBQUcsS0FBSyxFQUFFLENBQUE7WUFDL0UsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUMzQztJQUNILENBQUM7SUFNRCxZQUFtQixlQUErQjtRQUEvQixvQkFBZSxHQUFmLGVBQWUsQ0FBZ0I7UUFsQmxELGFBQVEsR0FBRyxJQUFJLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQWNqQixxQkFBZ0IsR0FBRyxJQUFJLGVBQWUsQ0FBa0IsSUFBSSxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLENBQUM7UUFDMUcsVUFBSyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUdRLENBQUM7SUFDdEQsUUFBUTtJQUNSLENBQUM7SUFFRDs7O09BR0c7SUFDSCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBRyxPQUFPLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDLENBQUMsV0FBVyxFQUFDO1lBQ2pFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLGNBQWMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQ2xFO0lBQ0gsQ0FBQzs7K0dBbENVLGlCQUFpQjttR0FBakIsaUJBQWlCLHNKQ1Q5QiwweEVBa0RNOzRGRHpDTyxpQkFBaUI7a0JBTDdCLFNBQVM7K0JBQ0UscUJBQXFCO3NHQU90QixXQUFXO3NCQUFuQixLQUFLO2dCQUlPLFlBQVk7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge1NrZWxldG9uT3B0aW9uc30gZnJvbSAnLi4vLi4vbW9kZWwvc2tlbGV0b25PcHRpb25zJztcclxuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0IH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IFNrZWxldG9uU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3V4cC1ydWNsaWItc2tlbGV0b24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9za2VsZXRvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2tlbGV0b24uY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNrZWxldG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xyXG5cclxuIFxyXG4gIEBJbnB1dCgpIGN1c3RvbVRoZW1lITogc3RyaW5nO1xyXG4gIGRpdkFycmF5ID0gbmV3IEFycmF5KDEyKTtcclxuICBcclxuXHJcbiAgQElucHV0KCkgc2V0IHJ1Y0lucHV0RGF0YSh2YWx1ZTpQYXJ0aWFsPFNrZWxldG9uT3B0aW9ucz4pe1xyXG4gICAgaWYodmFsdWUpe1xyXG4gICAgICAvL3VwZGF0ZSBkZWZhdWx0IHZhbHVlIGR5bmFtaWNhbGx5XHJcbiAgICAgIHRoaXMuc2tlbGV0b25TZXJ2aWNlLnNldERlZmF1bHRPcHRpb25zKHZhbHVlKTtcclxuXHJcbiAgICAgIC8vbWVyZ2UgdXBkYXRlZCBkZWZhdWx0cyB3aXRoIHRoZSBuZXcgaW5wdXRcclxuICAgICAgY29uc3QgbWVyZ2VkT3B0aW9ucyA9IHsgLi4udGhpcy5za2VsZXRvblNlcnZpY2UuZ2V0RGVmYXVsdE9wdGlvbnMoKSwgLi4udmFsdWUgfVxyXG4gICAgICB0aGlzLmlucHV0RGF0YVN1YmplY3QubmV4dChtZXJnZWRPcHRpb25zKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgaW5wdXREYXRhU3ViamVjdCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8U2tlbGV0b25PcHRpb25zPih0aGlzLnNrZWxldG9uU2VydmljZS5nZXREZWZhdWx0T3B0aW9ucygpKTsgXHJcbiAgZGF0YSQgPSB0aGlzLmlucHV0RGF0YVN1YmplY3QuYXNPYnNlcnZhYmxlKCk7XHJcblxyXG5cclxuICBjb25zdHJ1Y3RvcihwdWJsaWMgc2tlbGV0b25TZXJ2aWNlOlNrZWxldG9uU2VydmljZSl7IH1cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFxyXG4gICAqIEBwYXJhbSBjaGFuZ2VzIFxyXG4gICAqL1xyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpe1xyXG4gICAgaWYoY2hhbmdlc1sncnVjSW5wdXREYXRhJ10gJiYgIWNoYW5nZXNbJ3J1Y0lucHV0RGF0YSddLmZpcnN0Q2hhbmdlKXtcclxuICAgICAgdGhpcy5pbnB1dERhdGFTdWJqZWN0Lm5leHQoY2hhbmdlc1sncnVjSW5wdXREYXRhJ10uY3VycmVudFZhbHVlKTtcclxuICAgIH1cclxuICB9XHJcblxyXG59XHJcbiIsIjxkaXYgW2NsYXNzXT1cImN1c3RvbVRoZW1lID8gY3VzdG9tVGhlbWUgOiAnJ1wiICpuZ0lmPVwiZGF0YSQgfCBhc3luYyBhcyBkYXRhXCI+XHJcbiAgIDwhLS0gU2tlbGV0b24gU3RhcnQgLS0+XHJcbiAgICA8ZGl2IGNsYXNzPVwic2tlbGV0b24gc2tlbGV0b24tdGV4dFwiIFxyXG4gICAgW2NsYXNzXT1cImRhdGEuc2hhcGVcIiBcclxuICAgICpuZ0lmPVwiIWRhdGE/LmlzTG9hZGVyXCIgXHJcbiAgICBbc3R5bGUud2lkdGhdPVwiZGF0YT8ud2lkdGhcIiBcclxuICAgIFtzdHlsZS5oZWlnaHRdPVwiZGF0YT8uaGVpZ2h0XCJcclxuICAgIFtzdHlsZS5ib3JkZXJSYWRpdXNdPVwiZGF0YT8uYm9yZGVyUmFkaXVzXCJcclxuICAgIFtuZ0NsYXNzXT1cImRhdGE/LmNsYXNzXCJcclxuICAgIFttYXRUb29sdGlwXT1cImRhdGEudG9vbHRpcFRleHQgPz8gJydcIlxyXG4gICAgW21hdFRvb2x0aXBQb3NpdGlvbl09XCJkYXRhLnRvb2x0aXBQb3NpdGlvbiA/PyAnYWJvdmUnXCJcclxuICAgID48L2Rpdj5cclxuPCEtLSBTa2VsZXRvbiBFbmQgLS0+XHJcbjwhLS0gTG9hZGVyIEhUTUwgU2VjdGlvbiBzdGFydC0tPlxyXG48ZGl2ICpuZ0lmPVwiZGF0YS5pc0xvYWRlciAmJiBkYXRhLmxvYWRlclBvc2l0aW9uXCI+XHJcbiAgICA8ZGl2ICpuZ0lmPVwiZGF0YS5sb2FkZXJQb3NpdGlvbiA9PSAncGFnZSdcIiBjbGFzcz1cInJ1Yy1sb2FkaW5nIHJ1Yy1sb2FkLXNwaW5uZXItcGFnZVwiPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJwYWdlUmVmOyBjb250ZXh0OiB0aGlzXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgKm5nSWY9XCJkYXRhLmxvYWRlclBvc2l0aW9uID09ICdzZWN0aW9uJ1wiIGNsYXNzPVwicnVjLWxvYWRpbmcgcnVjLWxvYWQtc3Bpbm5lci1zZWN0aW9uXCI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInBhZ2VSZWY7IGNvbnRleHQ6IHRoaXNcIj48L25nLWNvbnRhaW5lcj5cclxuICAgIDwvZGl2PlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImRhdGEubG9hZGVyUG9zaXRpb24gPT0gJ2lubGluZSdcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaW5saW5lUmVmOyBjb250ZXh0OiB0aGlzXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJkYXRhLmxvYWRlclBvc2l0aW9uID09ICduZXdsaW5lJ1wiIGNsYXNzPVwibmV3bGluZS1sb2FkXCI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImlubGluZVJlZjsgY29udGV4dDogdGhpc1wiPjwvbmctY29udGFpbmVyPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcblxyXG4gICAgPG5nLXRlbXBsYXRlICNwYWdlUmVmPlxyXG4gICAgICAgIDwhLS0gdXNlIGluIGxvb3AgLS0+XHJcbiAgICAgICAgIDwhLS0gPGRpdiAqbmdGb3I9XCJsZXQgXyBvZiBkaXZBcnJheVwiPlxyXG4gICAgICAgICA8L2Rpdj4gLS0+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImxvYWRlclwiPjwvZGl2PlxyXG5cclxuICAgICAgICA8aW1nIGNsYXNzPVwic3Bpbm5lci1sb2dvXCIgKm5nSWY9XCJkYXRhLmxvYWRlclNwaW5uZXJMb2dvVXJsXCIgYWx0PVwiTG9nb1wiPlxyXG4gICAgICAgIDxwICpuZ0lmPVwiZGF0YS5sb2FkZXJDdXN0b21UZXh0XCIgY2xhc3M9XCJzcGlubmVyLXRleHRcIj57e2RhdGEubG9hZGVyQ3VzdG9tVGV4dH19Li4uPC9wPlxyXG4gICAgPC9uZy10ZW1wbGF0ZT5cclxuXHJcbiAgICA8bmctdGVtcGxhdGUgI2lubGluZVJlZj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibG9hZGVyXCI+PC9kaXY+XHJcblxyXG4gICAgICAgIDwhLS0gPGRpdiBjbGFzcz1cInJ1Yy1sb2FkaW5nIHJ1Yy1sb2FkLXNwaW5uZXItc21hbGwtaW5saW5lXCI+XHJcbiAgICAgICAgICAgIDxpbWcgY2xhc3M9XCJzcGlubmVyLWxvZ29cIiAqbmdJZj1cImRhdGEubG9hZGVyU3Bpbm5lckxvZ29VcmxcIiBhbHQ9XCJMb2dvXCI+XHJcbiAgICAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgXyBvZiBkaXZBcnJheVwiPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgIDwvZGl2PiAtLT5cclxuICAgICAgICA8cCAqbmdJZj1cImRhdGEubG9hZGVyQ3VzdG9tVGV4dFwiIGNsYXNzPVwicnVjLXNwaW5uZXItdGV4dC1pbmxpbmVcIj57e2RhdGEubG9hZGVyQ3VzdG9tVGV4dH19Li4uPC9wPlxyXG4gICAgPC9uZy10ZW1wbGF0ZT5cclxuPC9kaXY+XHJcbjwhLS0gTG9hZGVyIEhUTUwgc2VjdGlvbiBlbmQgLS0+XHJcbjwvZGl2PiJdfQ==

package/esm2020/model/skeletonOptions.mjs

@@ -0,0 +1,3 @@
+export class SkeletonOptions {
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25PcHRpb25zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL21vZGVsL3NrZWxldG9uT3B0aW9ucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sZUFBZTtDQWUzQiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjbGFzcyBTa2VsZXRvbk9wdGlvbnN7XHJcbiAgICAvLyByZWN0YW5nbGUgLCByb3VuZGVkLXJlY3RhbmdsZSwgc3F1YXJlLCBjaXJjbGUsIFxyXG4vLyB0cmlhbmdsZSwgYXJyb3ctbGVmdCwgYXJyb3ctcmlnaHQsIGFycm93LXVwLCBhcnJvdy1kb3duXHJcbiAgICBzaGFwZT8gOiBhbnk7IC8vdGV4dCwgcmVjdGFuZ2xlLCByb3VuZGVkLCBTcXVhcmUsIENpcmNsZSwgVHJpYW5nbGUsIGxlZnQgQXJyb3csIHJpZ2h0ICwgdXAgYW5kIGRvd24gYXJyb3csIGxvYWRlclxyXG4gICAgd2lkdGg/OiBhbnk7ICAvL1RvIHNldCB0aGUgd2lkdGggb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBoZWlnaHQ/OiBhbnk7IC8vVG8gc2V0IHRoZSBoZWlnaHQgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBib3JkZXJSYWRpdXM/OiBhbnk7IC8vVG8gc2V0IHRoZSBib3JkZXJSYWRpdXMgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBjbGFzcz86IGFueTsgLy9UbyBzZXQgYSBjdXN0b20gY2xhc3Mgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICB0b29sdGlwPzogYm9vbGVhbjsgLy9UbyBzZXQgYSB0b29sdGlwIG9mIHNrZWxldG9uIG5vdCBhcHBsaWNhYmxlIHRvIGxvYWRlclxyXG4gICAgdG9vbHRpcFRleHQ/IDogc3RyaW5nOyAvL1RvIHNldCBhIHRvb2x0aXAgdGV4dCBvZiBza2VsZXRvbiBub3QgYXBwbGljYWJsZSB0byBsb2FkZXJcclxuICAgIHRvb2x0aXBQb3NpdGlvbj86ICdhYm92ZScgfCAnYmVsb3cnIHwgJ2xlZnQnIHwgJ3JpZ2h0JztcclxuICAgIGlzTG9hZGVyPzogYm9vbGVhbjsgLy8gdHJ1ZSAsIGZhc2xlIHdoZW4gbG9hZGVyIGlzIHNlbGVjdGVkXHJcbiAgICBsb2FkZXJQb3NpdGlvbj86IHN0cmluZyAvLydwYWdlJyB8ICdzZWN0aW9uJyB8ICdpbmxpbmUnIHwgJ25ld2xpbmUnOyAvLyBsb2FkZXIgcG9zaXRpb25cclxuICAgIGxvYWRlckN1c3RvbVRleHQ/OiBzdHJpbmc7IC8vIGxvYWRlciBjdXN0b20gdGV4dFxyXG4gICAgbG9hZGVyU3Bpbm5lckxvZ29Vcmw/OiBzdHJpbmc7IC8vIGxvYWRlciBpbWFnZSBpZiB1c2VyIHdhbnRcclxufVxyXG5cclxuIl19

package/esm2020/ruc-lib-skeleton.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjLWxpYi1za2VsZXRvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9ydWMtbGliLXNrZWxldG9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19

package/esm2020/services/skeleton.service.mjs

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SkeletonService {
+    // skeletonOptions: SkeletonOptions;
+    constructor() {
+        this.defaultOptions = {
+            shape: 'circle',
+            width: "50px",
+            height: "50px",
+            borderRadius: '',
+            class: '',
+            tooltip: false,
+            tooltipText: '',
+            tooltipPosition: 'above',
+            isLoader: false,
+        };
+    }
+    /**
+     * get options
+     * @returns defaultOptions
+     */
+    getDefaultOptions() {
+        return { ...this.defaultOptions };
+    }
+    /**
+     * set options
+     * @param newOptions
+     */
+    setDefaultOptions(newOptions) {
+        this.defaultOptions = { ...this.defaultOptions, ...newOptions };
+    }
+}
+SkeletonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkeletonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zZXJ2aWNlcy9za2VsZXRvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQW9CLE1BQU0sZUFBZSxDQUFDOztBQVE3RCxNQUFNLE9BQU8sZUFBZTtJQUd4QixvQ0FBb0M7SUFFcEM7UUFDRSxJQUFJLENBQUMsY0FBYyxHQUFHO1lBQ3BCLEtBQUssRUFBRSxRQUFRO1lBQ2YsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxFQUFFO1lBQ2hCLEtBQUssRUFBRSxFQUFFO1lBQ1QsT0FBTyxFQUFFLEtBQUs7WUFDZCxXQUFXLEVBQUcsRUFBRTtZQUNoQixlQUFlLEVBQUUsT0FBTztZQUN4QixRQUFRLEVBQUUsS0FBSztTQUNoQixDQUFBO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNILGlCQUFpQjtRQUNmLE9BQU8sRUFBQyxHQUFHLElBQUksQ0FBQyxjQUFjLEVBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsaUJBQWlCLENBQUMsVUFBb0M7UUFDcEQsSUFBSSxDQUFDLGNBQWMsR0FBRSxFQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxHQUFHLFVBQVUsRUFBQyxDQUFDO0lBRS9ELENBQUM7OzZHQWxDUSxlQUFlO2lIQUFmLGVBQWUsY0FGZCxNQUFNOzRGQUVQLGVBQWU7a0JBSDNCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJqZWN0LCBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHtTa2VsZXRvbk9wdGlvbnN9IGZyb20gJy4uL21vZGVsL3NrZWxldG9uT3B0aW9ucyc7XHJcbmltcG9ydCB7U2tlbGV0b25Db21wb25lbnR9IGZyb20gJy4uL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290JyxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNrZWxldG9uU2VydmljZSB7XHJcbiAgICBkZWZhdWx0T3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIC8vIHNrZWxldG9uT3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgICB0aGlzLmRlZmF1bHRPcHRpb25zID0ge1xyXG4gICAgICAgIHNoYXBlOiAnY2lyY2xlJyxcclxuICAgICAgICB3aWR0aDogXCI1MHB4XCIsXHJcbiAgICAgICAgaGVpZ2h0OiBcIjUwcHhcIixcclxuICAgICAgICBib3JkZXJSYWRpdXM6ICcnLFxyXG4gICAgICAgIGNsYXNzOiAnJywgXHJcbiAgICAgICAgdG9vbHRpcDogZmFsc2UsXHJcbiAgICAgICAgdG9vbHRpcFRleHQgOiAnJyxcclxuICAgICAgICB0b29sdGlwUG9zaXRpb246ICdhYm92ZScsXHJcbiAgICAgICAgaXNMb2FkZXI6IGZhbHNlLFxyXG4gICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBnZXQgb3B0aW9uc1xyXG4gICAgICogQHJldHVybnMgZGVmYXVsdE9wdGlvbnNcclxuICAgICAqL1xyXG4gICAgZ2V0RGVmYXVsdE9wdGlvbnMoKTogU2tlbGV0b25PcHRpb25ze1xyXG4gICAgICByZXR1cm4gey4uLnRoaXMuZGVmYXVsdE9wdGlvbnN9O1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogc2V0IG9wdGlvbnNcclxuICAgICAqIEBwYXJhbSBuZXdPcHRpb25zIFxyXG4gICAgICovXHJcbiAgICBzZXREZWZhdWx0T3B0aW9ucyhuZXdPcHRpb25zOiBQYXJ0aWFsPFNrZWxldG9uT3B0aW9ucz4pOiB2b2lke1xyXG4gICAgICB0aGlzLmRlZmF1bHRPcHRpb25zID17Li4udGhpcy5kZWZhdWx0T3B0aW9ucywgLi4ubmV3T3B0aW9uc307XHJcblxyXG4gICAgfVxyXG59Il19

package/fesm2015/ruc-lib-skeleton.mjs

@@ -0,0 +1,110 @@
+import * as i0 from '@angular/core';
+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;
+    constructor() {
+        this.defaultOptions = {
+            shape: 'circle',
+            width: "50px",
+            height: "50px",
+            borderRadius: '',
+            class: '',
+            tooltip: false,
+            tooltipText: '',
+            tooltipPosition: 'above',
+            isLoader: false,
+        };
+    }
+    /**
+     * get options
+     * @returns defaultOptions
+     */
+    getDefaultOptions() {
+        return Object.assign({}, this.defaultOptions);
+    }
+    /**
+     * set options
+     * @param newOptions
+     */
+    setDefaultOptions(newOptions) {
+        this.defaultOptions = Object.assign(Object.assign({}, this.defaultOptions), newOptions);
+    }
+}
+SkeletonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkeletonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SkeletonComponent {
+    set rucInputData(value) {
+        if (value) {
+            //update default value dynamically
+            this.skeletonService.setDefaultOptions(value);
+            //merge updated defaults with the new input
+            const mergedOptions = Object.assign(Object.assign({}, this.skeletonService.getDefaultOptions()), value);
+            this.inputDataSubject.next(mergedOptions);
+        }
+    }
+    constructor(skeletonService) {
+        this.skeletonService = skeletonService;
+        this.divArray = new Array(12);
+        this.inputDataSubject = new BehaviorSubject(this.skeletonService.getDefaultOptions());
+        this.data$ = this.inputDataSubject.asObservable();
+    }
+    ngOnInit() {
+    }
+    /**
+     *
+     * @param changes
+     */
+    ngOnChanges(changes) {
+        if (changes['rucInputData'] && !changes['rucInputData'].firstChange) {
+            this.inputDataSubject.next(changes['rucInputData'].currentValue);
+        }
+    }
+}
+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-ruclib-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-ruclib-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: [{
+                type: Input
+            }] } });
+
+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, 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, MatTooltipModule],
+                    declarations: [SkeletonComponent],
+                    exports: [SkeletonComponent],
+                    providers: [SkeletonService]
+                }]
+        }] });
+
+class SkeletonOptions {
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RuclibSkeletonModule, SkeletonComponent, SkeletonOptions, SkeletonService };
+//# sourceMappingURL=ruc-lib-skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ruc-lib-skeleton.mjs","sources":["../../src/services/skeleton.service.ts","../../src/lib/skeleton/skeleton.component.ts","../../src/lib/skeleton/skeleton.component.html","../../src/lib/ruclib-skeleton.module.ts","../../src/model/skeletonOptions.ts","../../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-ruclib-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

@@ -0,0 +1,110 @@
+import * as i0 from '@angular/core';
+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;
+    constructor() {
+        this.defaultOptions = {
+            shape: 'circle',
+            width: "50px",
+            height: "50px",
+            borderRadius: '',
+            class: '',
+            tooltip: false,
+            tooltipText: '',
+            tooltipPosition: 'above',
+            isLoader: false,
+        };
+    }
+    /**
+     * get options
+     * @returns defaultOptions
+     */
+    getDefaultOptions() {
+        return { ...this.defaultOptions };
+    }
+    /**
+     * set options
+     * @param newOptions
+     */
+    setDefaultOptions(newOptions) {
+        this.defaultOptions = { ...this.defaultOptions, ...newOptions };
+    }
+}
+SkeletonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkeletonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SkeletonComponent {
+    set rucInputData(value) {
+        if (value) {
+            //update default value dynamically
+            this.skeletonService.setDefaultOptions(value);
+            //merge updated defaults with the new input
+            const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value };
+            this.inputDataSubject.next(mergedOptions);
+        }
+    }
+    constructor(skeletonService) {
+        this.skeletonService = skeletonService;
+        this.divArray = new Array(12);
+        this.inputDataSubject = new BehaviorSubject(this.skeletonService.getDefaultOptions());
+        this.data$ = this.inputDataSubject.asObservable();
+    }
+    ngOnInit() {
+    }
+    /**
+     *
+     * @param changes
+     */
+    ngOnChanges(changes) {
+        if (changes['rucInputData'] && !changes['rucInputData'].firstChange) {
+            this.inputDataSubject.next(changes['rucInputData'].currentValue);
+        }
+    }
+}
+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-ruclib-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-ruclib-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: [{
+                type: Input
+            }] } });
+
+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, 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, MatTooltipModule],
+                    declarations: [SkeletonComponent],
+                    exports: [SkeletonComponent],
+                    providers: [SkeletonService]
+                }]
+        }] });
+
+class SkeletonOptions {
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RuclibSkeletonModule, SkeletonComponent, SkeletonOptions, SkeletonService };
+//# sourceMappingURL=ruc-lib-skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ruc-lib-skeleton.mjs","sources":["../../src/services/skeleton.service.ts","../../src/lib/skeleton/skeleton.component.ts","../../src/lib/skeleton/skeleton.component.html","../../src/lib/ruclib-skeleton.module.ts","../../src/model/skeletonOptions.ts","../../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-ruclib-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/index.d.ts

@@ -1,54 +1,4 @@
-import * as rxjs from 'rxjs';
-import * as i0 from '@angular/core';
-import { OnChanges, SimpleChanges } from '@angular/core';
-
-declare class SkeletonOptions {
-    shape?: any;
-    width?: any;
-    height?: any;
-    borderRadius?: any;
-    class?: any;
-    tooltip?: boolean;
-    tooltipText?: string;
-    tooltipPosition?: 'above' | 'below' | 'left' | 'right';
-    isLoader?: boolean;
-    loaderPosition?: string;
-    loaderCustomText?: string;
-    loaderSpinnerLogoUrl?: string;
-}
-
-declare class SkeletonService {
-    defaultOptions: SkeletonOptions;
-    constructor();
-    /**
-     * get options
-     * @returns defaultOptions
-     */
-    getDefaultOptions(): SkeletonOptions;
-    /**
-     * set options
-     * @param newOptions
-     */
-    setDefaultOptions(newOptions: Partial<SkeletonOptions>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<SkeletonService>;
-}
-
-declare class RuclibSkeletonComponent implements OnChanges {
-    skeletonService: SkeletonService;
-    customTheme: string;
-    divArray: any[];
-    set rucInputData(value: Partial<SkeletonOptions>);
-    private inputDataSubject;
-    data$: rxjs.Observable<SkeletonOptions>;
-    constructor(skeletonService: SkeletonService);
-    /**
-     *
-     * @param changes
-     */
-    ngOnChanges(changes: SimpleChanges): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibSkeletonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RuclibSkeletonComponent, "uxp-ruclib-skeleton", never, { "customTheme": { "alias": "customTheme"; "required": false; }; "rucInputData": { "alias": "rucInputData"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-export { RuclibSkeletonComponent, SkeletonOptions, SkeletonService };
+export * from './lib/ruclib-skeleton.module';
+export * from './lib/skeleton/skeleton.component';
+export * from './services/skeleton.service';
+export * from './model/skeletonOptions';

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

@@ -0,0 +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 i3.MatTooltipModule], [typeof i1.SkeletonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RuclibSkeletonModule>;
+}

package/lib/skeleton/skeleton.component.d.ts

@@ -0,0 +1,21 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { SkeletonOptions } from '../../model/skeletonOptions';
+import { SkeletonService } from '../../services/skeleton.service';
+import * as i0 from "@angular/core";
+export declare class SkeletonComponent implements OnInit, OnChanges {
+    skeletonService: SkeletonService;
+    customTheme: string;
+    divArray: any[];
+    set rucInputData(value: Partial<SkeletonOptions>);
+    private inputDataSubject;
+    data$: import("rxjs").Observable<SkeletonOptions>;
+    constructor(skeletonService: SkeletonService);
+    ngOnInit(): void;
+    /**
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonComponent, "uxp-ruclib-skeleton", never, { "customTheme": "customTheme"; "rucInputData": "rucInputData"; }, {}, never, never, false, never>;
+}

package/model/skeletonOptions.d.ts

@@ -0,0 +1,14 @@
+export declare class SkeletonOptions {
+    shape?: any;
+    width?: any;
+    height?: any;
+    borderRadius?: any;
+    class?: any;
+    tooltip?: boolean;
+    tooltipText?: string;
+    tooltipPosition?: 'above' | 'below' | 'left' | 'right';
+    isLoader?: boolean;
+    loaderPosition?: string;
+    loaderCustomText?: string;
+    loaderSpinnerLogoUrl?: string;
+}

package/package.json

@@ -1,22 +1,30 @@
 {
   "name": "@ruc-lib/skeleton",
-  "version": "3.1.0",
+  "version": "3.2.0",
+  "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/animations": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/forms": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "ngx-pagination": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
-    "rxjs": ">=7.5.0 <8.0.0",
-    "zone.js": "^0.13.0 || ^0.14.0"
+    "@angular/material": "^15.2.0",
+    "@angular/animations": ">=15.0.0 <18.0.0",
+    "@angular/core": ">=15.0.0 <18.0.0",
+    "@angular/common": ">=15.0.0 <18.0.0",
+    "@angular/forms": ">=15.0.0 <18.0.0",
+    "@angular/platform-browser": ">=15.0.0 <18.0.0",
+    "ngx-pagination": "^6.0.3",
+    "rxjs": ">=6.5.0 <8.0.0",
+    "zone.js": ">=0.11.4 <0.14.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "sideEffects": false,
-  "module": "fesm2022/ruc-lib-skeleton.mjs",
+  "module": "fesm2015/ruc-lib-skeleton.mjs",
+  "es2020": "fesm2020/ruc-lib-skeleton.mjs",
+  "esm2020": "esm2020/ruc-lib-skeleton.mjs",
+  "fesm2020": "fesm2020/ruc-lib-skeleton.mjs",
+  "fesm2015": "fesm2015/ruc-lib-skeleton.mjs",
   "typings": "index.d.ts",
   "exports": {
     "./package.json": {
@@ -24,7 +32,11 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "default": "./fesm2022/ruc-lib-skeleton.mjs"
+      "esm2020": "./esm2020/ruc-lib-skeleton.mjs",
+      "es2020": "./fesm2020/ruc-lib-skeleton.mjs",
+      "es2015": "./fesm2015/ruc-lib-skeleton.mjs",
+      "node": "./fesm2015/ruc-lib-skeleton.mjs",
+      "default": "./fesm2020/ruc-lib-skeleton.mjs"
     }
   }
 }

package/services/skeleton.service.d.ts

@@ -0,0 +1,18 @@
+import { SkeletonOptions } from '../model/skeletonOptions';
+import * as i0 from "@angular/core";
+export declare class SkeletonService {
+    defaultOptions: SkeletonOptions;
+    constructor();
+    /**
+     * get options
+     * @returns defaultOptions
+     */
+    getDefaultOptions(): SkeletonOptions;
+    /**
+     * set options
+     * @param newOptions
+     */
+    setDefaultOptions(newOptions: Partial<SkeletonOptions>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SkeletonService>;
+}

package/fesm2022/ruc-lib-skeleton.mjs

@@ -1,93 +0,0 @@
-import * as i3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i0 from '@angular/core';
-import { Injectable, Input, Component } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-
-class SkeletonService {
-    // skeletonOptions: SkeletonOptions;
-    constructor() {
-        this.defaultOptions = {
-            shape: 'circle',
-            width: "50px",
-            height: "50px",
-            borderRadius: '',
-            class: '',
-            tooltip: false,
-            tooltipText: '',
-            tooltipPosition: 'above',
-            isLoader: false,
-        };
-    }
-    /**
-     * get options
-     * @returns defaultOptions
-     */
-    getDefaultOptions() {
-        return { ...this.defaultOptions };
-    }
-    /**
-     * set options
-     * @param newOptions
-     */
-    setDefaultOptions(newOptions) {
-        this.defaultOptions = { ...this.defaultOptions, ...newOptions };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SkeletonService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SkeletonService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class RuclibSkeletonComponent {
-    set rucInputData(value) {
-        if (value) {
-            //update default value dynamically
-            this.skeletonService.setDefaultOptions(value);
-            //merge updated defaults with the new input
-            const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value };
-            this.inputDataSubject.next(mergedOptions);
-        }
-    }
-    constructor(skeletonService) {
-        this.skeletonService = skeletonService;
-        this.divArray = new Array(12);
-        this.inputDataSubject = new BehaviorSubject(this.skeletonService.getDefaultOptions());
-        this.data$ = this.inputDataSubject.asObservable();
-    }
-    /**
-     *
-     * @param changes
-     */
-    ngOnChanges(changes) {
-        if (changes['rucInputData'] && !changes['rucInputData'].firstChange) {
-            this.inputDataSubject.next(changes['rucInputData'].currentValue);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibSkeletonComponent, deps: [{ token: SkeletonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibSkeletonComponent, isStandalone: true, selector: "uxp-ruclib-skeleton", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, usesOnChanges: true, ngImport: i0, template: "@if (data$ | async; as data) {\r\n  <div [class]=\"customTheme ? customTheme : ''\">\r\n    <!-- Skeleton Start -->\r\n    @if (!data?.isLoader) {\r\n      <div class=\"skeleton skeleton-text\"\r\n        [class]=\"data.shape\"\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    }\r\n    <!-- Skeleton End -->\r\n    <!-- Loader HTML Section start-->\r\n    @if (data.isLoader && data.loaderPosition) {\r\n      <div>\r\n        @if (data.loaderPosition === 'page') {\r\n          <div class=\"ruc-loading ruc-load-spinner-page\">\r\n            <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n          </div>\r\n        }\r\n        @if (data.loaderPosition === 'section') {\r\n          <div class=\"ruc-loading ruc-load-spinner-section\">\r\n            <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n          </div>\r\n        }\r\n        @if (data.loaderPosition === 'inline') {\r\n          <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n        }\r\n        @if (data.loaderPosition === 'newline') {\r\n          <ng-container 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        @if (data.loaderSpinnerLogoUrl) {\r\n          <img class=\"spinner-logo\" alt=\"Logo\">\r\n        }\r\n        @if (data.loaderCustomText) {\r\n          <p class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n        }\r\n      </ng-template>\r\n      <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\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      @if (data.loaderCustomText) {\r\n        <p class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n}\r\n<!-- Loader HTML section end -->\r\n</div>\r\n}\r\n", 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}.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-page{position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px}.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-section{position:relative;margin:0 auto}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px}.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-load-spinner-small-inline{display:inline-block;position:relative;top:-5px}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibSkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'uxp-ruclib-skeleton', imports: [CommonModule, MatTooltipModule], template: "@if (data$ | async; as data) {\r\n  <div [class]=\"customTheme ? customTheme : ''\">\r\n    <!-- Skeleton Start -->\r\n    @if (!data?.isLoader) {\r\n      <div class=\"skeleton skeleton-text\"\r\n        [class]=\"data.shape\"\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    }\r\n    <!-- Skeleton End -->\r\n    <!-- Loader HTML Section start-->\r\n    @if (data.isLoader && data.loaderPosition) {\r\n      <div>\r\n        @if (data.loaderPosition === 'page') {\r\n          <div class=\"ruc-loading ruc-load-spinner-page\">\r\n            <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n          </div>\r\n        }\r\n        @if (data.loaderPosition === 'section') {\r\n          <div class=\"ruc-loading ruc-load-spinner-section\">\r\n            <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n          </div>\r\n        }\r\n        @if (data.loaderPosition === 'inline') {\r\n          <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n        }\r\n        @if (data.loaderPosition === 'newline') {\r\n          <ng-container 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        @if (data.loaderSpinnerLogoUrl) {\r\n          <img class=\"spinner-logo\" alt=\"Logo\">\r\n        }\r\n        @if (data.loaderCustomText) {\r\n          <p class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n        }\r\n      </ng-template>\r\n      <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\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      @if (data.loaderCustomText) {\r\n        <p class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n}\r\n<!-- Loader HTML section end -->\r\n</div>\r\n}\r\n", 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}.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-page{position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px}.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-section{position:relative;margin:0 auto}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px}.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-load-spinner-small-inline{display:inline-block;position:relative;top:-5px}.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: () => [{ type: SkeletonService }], propDecorators: { customTheme: [{
-                type: Input
-            }], rucInputData: [{
-                type: Input
-            }] } });
-
-class SkeletonOptions {
-}
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { RuclibSkeletonComponent, SkeletonOptions, SkeletonService };
-//# sourceMappingURL=ruc-lib-skeleton.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ruc-lib-skeleton.mjs","sources":["../../src/services/skeleton.service.ts","../../src/lib/ruclib-skeleton/ruclib-skeleton.component.ts","../../src/lib/ruclib-skeleton/ruclib-skeleton.component.html","../../src/model/skeletonOptions.ts","../../src/ruc-lib-skeleton.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { SkeletonOptions } from '../model/skeletonOptions';\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}\r\n","import { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { 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\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'uxp-ruclib-skeleton',\r\n    imports: [CommonModule, MatTooltipModule],\r\n    templateUrl: './ruclib-skeleton.component.html',\r\n    styleUrl: './ruclib-skeleton.component.scss'\r\n})\r\nexport class RuclibSkeletonComponent implements  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\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\r\n","@if (data$ | async; as data) {\r\n  <div [class]=\"customTheme ? customTheme : ''\">\r\n    <!-- Skeleton Start -->\r\n    @if (!data?.isLoader) {\r\n      <div class=\"skeleton skeleton-text\"\r\n        [class]=\"data.shape\"\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    }\r\n    <!-- Skeleton End -->\r\n    <!-- Loader HTML Section start-->\r\n    @if (data.isLoader && data.loaderPosition) {\r\n      <div>\r\n        @if (data.loaderPosition === 'page') {\r\n          <div class=\"ruc-loading ruc-load-spinner-page\">\r\n            <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n          </div>\r\n        }\r\n        @if (data.loaderPosition === 'section') {\r\n          <div class=\"ruc-loading ruc-load-spinner-section\">\r\n            <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n          </div>\r\n        }\r\n        @if (data.loaderPosition === 'inline') {\r\n          <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n        }\r\n        @if (data.loaderPosition === 'newline') {\r\n          <ng-container 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        @if (data.loaderSpinnerLogoUrl) {\r\n          <img class=\"spinner-logo\" alt=\"Logo\">\r\n        }\r\n        @if (data.loaderCustomText) {\r\n          <p class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n        }\r\n      </ng-template>\r\n      <ng-template #inlineRef>\r\n        <div class=\"loader\"></div>\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      @if (data.loaderCustomText) {\r\n        <p class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n}\r\n<!-- Loader HTML section end -->\r\n</div>\r\n}\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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"}