@ruc-lib/skeleton 3.2.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -12,44 +12,78 @@ npm install @uxpractice/ruc-lib
12
12
  ```
13
13
 
14
14
  ### Install Individual Component
15
- If you only need the Skeleton Library:
15
+
16
+ If you only need the Skeleton component:
17
+
18
+ **For Angular 15:**
19
+ ```bash
20
+ npm install @ruc-lib/skeleton@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
21
+ ```
22
+
23
+ **For Angular 16:**
24
+ ```bash
25
+ npm install @ruc-lib/skeleton@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
26
+ ```
27
+
28
+ **For Angular 17:**
29
+ ```bash
30
+ npm install @ruc-lib/skeleton@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
31
+ ```
32
+
33
+ **For Angular 18:**
34
+ ```bash
35
+ npm install @ruc-lib/skeleton@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
36
+ ```
37
+
38
+ **For Angular 19:**
16
39
  ```bash
17
- npm install @ruc-lib/skeleton
40
+ npm install @ruc-lib/skeleton@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
18
41
  ```
19
42
 
43
+ **For Angular 20:**
44
+ ```bash
45
+ npm install @ruc-lib/skeleton@4.0.0
46
+ ```
47
+
48
+ > **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
49
+
50
+
20
51
  ## Version Compatibility
21
52
 
22
53
  Please ensure you install the correct version of `@ruc-lib/skeleton` based on your Angular version.
23
54
 
24
55
  | Angular Version | Compatible `@ruc-lib/skeleton` Version |
25
- |--------------------|---------------------------------------------|
56
+ |--------------------|--------------------------------------------|
26
57
  | 15.x.x | `npm install @ruc-lib/skeleton@^3.2.0` |
27
58
  | 16.x.x | `npm install @ruc-lib/skeleton@^3.2.0` |
59
+ | 17.x.x | `npm install @ruc-lib/skeleton@^4.0.0` |
60
+ | 18.x.x | `npm install @ruc-lib/skeleton@^4.0.0` |
61
+ | 19.x.x | `npm install @ruc-lib/skeleton@^4.0.0` |
62
+ | 20.x.x | `npm install @ruc-lib/skeleton@^4.0.0` |
28
63
 
29
64
 
30
65
  ## Usage
31
66
 
32
- ### 1. Import the Module
33
- In your Angular module file (e.g., `app.module.ts`), import the `RuclibSkeletonModule`:
67
+ ### 1. Import the Component
68
+ In your Angular component file (e.g., `app.component.ts`), import the `RuclibSkeletonComponent`:
34
69
 
35
70
  ```typescript
36
- import {RuclibSkeletonModule} from '@ruclib/skeleton';
37
- import { AppComponent } from './app.component';
38
- import { NgModule } from '@angular/core';
39
- import { MatTooltipModule } from '@angular/material/tooltip';
40
- import { BrowserModule } from '@angular/platform-browser';
41
-
42
- @NgModule({
43
- declarations: [AppComponent],
44
- imports: [
45
- BrowserModule,
46
- RuclibSkeletonModule,
47
- MatTooltipModule
48
- ],
49
- providers: [],
50
- bootstrap: [AppComponent]
71
+ import { Component } from '@angular/core';
72
+
73
+ // For Complete Library
74
+ import { RuclibSkeletonComponent } from '@uxpractice/ruc-lib/skeleton';
75
+
76
+ // For Individual Package
77
+ import { RuclibSkeletonComponent } from '@ruc-lib/skeleton';
78
+
79
+ @Component({
80
+ selector: 'app-root',
81
+ imports: [RuclibSkeletonComponent],
82
+ templateUrl: './app.component.html',
51
83
  })
52
- export class AppModule {}
84
+ export class AppComponent {
85
+ // Component code here
86
+ }
53
87
  ```
54
88
 
55
89
  ### 2. Use the Component
@@ -120,4 +154,4 @@ Contributions are welcome! Feel free to open issues or pull requests for any enh
120
154
 
121
155
  ## Acknowledgements
122
156
 
123
- Thank you for choosing the Skeleton library. If you have any feedback or suggestions, please let us know!
157
+ Thank you for choosing the Skeleton library. If you have any feedback or suggestions, please let us know!
@@ -0,0 +1,93 @@
1
+ import * as i3 from '@angular/material/tooltip';
2
+ import { MatTooltipModule } from '@angular/material/tooltip';
3
+ import * as i0 from '@angular/core';
4
+ import { Injectable, Input, Component } from '@angular/core';
5
+ import { BehaviorSubject } from 'rxjs';
6
+ import * as i2 from '@angular/common';
7
+ import { CommonModule } from '@angular/common';
8
+
9
+ class SkeletonService {
10
+ // skeletonOptions: SkeletonOptions;
11
+ constructor() {
12
+ this.defaultOptions = {
13
+ shape: 'circle',
14
+ width: "50px",
15
+ height: "50px",
16
+ borderRadius: '',
17
+ class: '',
18
+ tooltip: false,
19
+ tooltipText: '',
20
+ tooltipPosition: 'above',
21
+ isLoader: false,
22
+ };
23
+ }
24
+ /**
25
+ * get options
26
+ * @returns defaultOptions
27
+ */
28
+ getDefaultOptions() {
29
+ return { ...this.defaultOptions };
30
+ }
31
+ /**
32
+ * set options
33
+ * @param newOptions
34
+ */
35
+ setDefaultOptions(newOptions) {
36
+ this.defaultOptions = { ...this.defaultOptions, ...newOptions };
37
+ }
38
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
39
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SkeletonService, providedIn: 'root' }); }
40
+ }
41
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SkeletonService, decorators: [{
42
+ type: Injectable,
43
+ args: [{
44
+ providedIn: 'root',
45
+ }]
46
+ }], ctorParameters: () => [] });
47
+
48
+ class RuclibSkeletonComponent {
49
+ set rucInputData(value) {
50
+ if (value) {
51
+ //update default value dynamically
52
+ this.skeletonService.setDefaultOptions(value);
53
+ //merge updated defaults with the new input
54
+ const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value };
55
+ this.inputDataSubject.next(mergedOptions);
56
+ }
57
+ }
58
+ constructor(skeletonService) {
59
+ this.skeletonService = skeletonService;
60
+ this.divArray = new Array(12);
61
+ this.inputDataSubject = new BehaviorSubject(this.skeletonService.getDefaultOptions());
62
+ this.data$ = this.inputDataSubject.asObservable();
63
+ }
64
+ /**
65
+ *
66
+ * @param changes
67
+ */
68
+ ngOnChanges(changes) {
69
+ if (changes['rucInputData'] && !changes['rucInputData'].firstChange) {
70
+ this.inputDataSubject.next(changes['rucInputData'].currentValue);
71
+ }
72
+ }
73
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibSkeletonComponent, deps: [{ token: SkeletonService }], target: i0.ɵɵFactoryTarget.Component }); }
74
+ 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" }] }); }
75
+ }
76
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibSkeletonComponent, decorators: [{
77
+ type: Component,
78
+ 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"] }]
79
+ }], ctorParameters: () => [{ type: SkeletonService }], propDecorators: { customTheme: [{
80
+ type: Input
81
+ }], rucInputData: [{
82
+ type: Input
83
+ }] } });
84
+
85
+ class SkeletonOptions {
86
+ }
87
+
88
+ /**
89
+ * Generated bundle index. Do not edit.
90
+ */
91
+
92
+ export { RuclibSkeletonComponent, SkeletonOptions, SkeletonService };
93
+ //# sourceMappingURL=ruc-lib-skeleton.mjs.map
@@ -0,0 +1 @@
1
+ {"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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"}
package/index.d.ts CHANGED
@@ -1,4 +1,54 @@
1
- export * from './lib/ruclib-skeleton.module';
2
- export * from './lib/skeleton/skeleton.component';
3
- export * from './services/skeleton.service';
4
- export * from './model/skeletonOptions';
1
+ import * as rxjs from 'rxjs';
2
+ import * as i0 from '@angular/core';
3
+ import { OnChanges, SimpleChanges } from '@angular/core';
4
+
5
+ declare class SkeletonOptions {
6
+ shape?: any;
7
+ width?: any;
8
+ height?: any;
9
+ borderRadius?: any;
10
+ class?: any;
11
+ tooltip?: boolean;
12
+ tooltipText?: string;
13
+ tooltipPosition?: 'above' | 'below' | 'left' | 'right';
14
+ isLoader?: boolean;
15
+ loaderPosition?: string;
16
+ loaderCustomText?: string;
17
+ loaderSpinnerLogoUrl?: string;
18
+ }
19
+
20
+ declare class SkeletonService {
21
+ defaultOptions: SkeletonOptions;
22
+ constructor();
23
+ /**
24
+ * get options
25
+ * @returns defaultOptions
26
+ */
27
+ getDefaultOptions(): SkeletonOptions;
28
+ /**
29
+ * set options
30
+ * @param newOptions
31
+ */
32
+ setDefaultOptions(newOptions: Partial<SkeletonOptions>): void;
33
+ static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonService, never>;
34
+ static ɵprov: i0.ɵɵInjectableDeclaration<SkeletonService>;
35
+ }
36
+
37
+ declare class RuclibSkeletonComponent implements OnChanges {
38
+ skeletonService: SkeletonService;
39
+ customTheme: string;
40
+ divArray: any[];
41
+ set rucInputData(value: Partial<SkeletonOptions>);
42
+ private inputDataSubject;
43
+ data$: rxjs.Observable<SkeletonOptions>;
44
+ constructor(skeletonService: SkeletonService);
45
+ /**
46
+ *
47
+ * @param changes
48
+ */
49
+ ngOnChanges(changes: SimpleChanges): void;
50
+ static ɵfac: i0.ɵɵFactoryDeclaration<RuclibSkeletonComponent, never>;
51
+ static ɵcmp: i0.ɵɵComponentDeclaration<RuclibSkeletonComponent, "uxp-ruclib-skeleton", never, { "customTheme": { "alias": "customTheme"; "required": false; }; "rucInputData": { "alias": "rucInputData"; "required": false; }; }, {}, never, never, true, never>;
52
+ }
53
+
54
+ export { RuclibSkeletonComponent, SkeletonOptions, SkeletonService };
package/package.json CHANGED
@@ -1,30 +1,22 @@
1
1
  {
2
2
  "name": "@ruc-lib/skeleton",
3
- "version": "3.2.0",
4
- "license": "MIT",
3
+ "version": "4.0.0",
5
4
  "peerDependencies": {
6
- "@angular/material": "^15.2.0",
7
- "@angular/animations": ">=15.0.0 <18.0.0",
8
- "@angular/core": ">=15.0.0 <18.0.0",
9
- "@angular/common": ">=15.0.0 <18.0.0",
10
- "@angular/forms": ">=15.0.0 <18.0.0",
11
- "@angular/platform-browser": ">=15.0.0 <18.0.0",
12
- "ngx-pagination": "^6.0.3",
13
- "rxjs": ">=6.5.0 <8.0.0",
14
- "zone.js": ">=0.11.4 <0.14.0"
5
+ "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
6
+ "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
7
+ "@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
8
+ "@angular/animations": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
9
+ "@angular/forms": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
10
+ "@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
11
+ "ngx-pagination": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
12
+ "rxjs": ">=7.5.0 <8.0.0",
13
+ "zone.js": "^0.13.0 || ^0.14.0"
15
14
  },
16
15
  "dependencies": {
17
16
  "tslib": "^2.3.0"
18
17
  },
19
- "publishConfig": {
20
- "access": "public"
21
- },
22
18
  "sideEffects": false,
23
- "module": "fesm2015/ruc-lib-skeleton.mjs",
24
- "es2020": "fesm2020/ruc-lib-skeleton.mjs",
25
- "esm2020": "esm2020/ruc-lib-skeleton.mjs",
26
- "fesm2020": "fesm2020/ruc-lib-skeleton.mjs",
27
- "fesm2015": "fesm2015/ruc-lib-skeleton.mjs",
19
+ "module": "fesm2022/ruc-lib-skeleton.mjs",
28
20
  "typings": "index.d.ts",
29
21
  "exports": {
30
22
  "./package.json": {
@@ -32,11 +24,7 @@
32
24
  },
33
25
  ".": {
34
26
  "types": "./index.d.ts",
35
- "esm2020": "./esm2020/ruc-lib-skeleton.mjs",
36
- "es2020": "./fesm2020/ruc-lib-skeleton.mjs",
37
- "es2015": "./fesm2015/ruc-lib-skeleton.mjs",
38
- "node": "./fesm2015/ruc-lib-skeleton.mjs",
39
- "default": "./fesm2020/ruc-lib-skeleton.mjs"
27
+ "default": "./fesm2022/ruc-lib-skeleton.mjs"
40
28
  }
41
29
  }
42
30
  }
package/esm2020/index.mjs DELETED
@@ -1,5 +0,0 @@
1
- export * from './lib/ruclib-skeleton.module';
2
- export * from './lib/skeleton/skeleton.component';
3
- export * from './services/skeleton.service';
4
- export * from './model/skeletonOptions';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx5QkFBeUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL3J1Y2xpYi1za2VsZXRvbi5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnO1xyXG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5leHBvcnQgKiBmcm9tICcuL21vZGVsL3NrZWxldG9uT3B0aW9ucyc7Il19
@@ -1,21 +0,0 @@
1
- import { NgModule } from '@angular/core';
2
- import { CommonModule } from '@angular/common';
3
- import { SkeletonComponent } from './skeleton/skeleton.component';
4
- import { SkeletonService } from '../services/skeleton.service';
5
- import { MatTooltipModule } from '@angular/material/tooltip';
6
- import * as i0 from "@angular/core";
7
- export class RuclibSkeletonModule {
8
- }
9
- RuclibSkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
10
- RuclibSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, declarations: [SkeletonComponent], imports: [CommonModule, MatTooltipModule], exports: [SkeletonComponent] });
11
- RuclibSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, providers: [SkeletonService], imports: [CommonModule, MatTooltipModule] });
12
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, decorators: [{
13
- type: NgModule,
14
- args: [{
15
- imports: [CommonModule, MatTooltipModule],
16
- declarations: [SkeletonComponent],
17
- exports: [SkeletonComponent],
18
- providers: [SkeletonService]
19
- }]
20
- }] });
21
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXNrZWxldG9uLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvcnVjbGliLXNrZWxldG9uLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7O0FBUTdELE1BQU0sT0FBTyxvQkFBb0I7O2tIQUFwQixvQkFBb0I7bUhBQXBCLG9CQUFvQixpQkFKaEIsaUJBQWlCLGFBRHRCLFlBQVksRUFBQyxnQkFBZ0IsYUFFN0IsaUJBQWlCO21IQUdoQixvQkFBb0IsYUFGckIsQ0FBQyxlQUFlLENBQUMsWUFIakIsWUFBWSxFQUFDLGdCQUFnQjs0RkFLNUIsb0JBQW9CO2tCQU5oQyxRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBQyxnQkFBZ0IsQ0FBRTtvQkFDekMsWUFBWSxFQUFFLENBQUMsaUJBQWlCLENBQUM7b0JBQ2pDLE9BQU8sRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUM1QixTQUFTLEVBQUMsQ0FBQyxlQUFlLENBQUM7aUJBQzVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgU2tlbGV0b25Db21wb25lbnQgfSBmcm9tICcuL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFNrZWxldG9uU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBNYXRUb29sdGlwTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdG9vbHRpcCc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsTWF0VG9vbHRpcE1vZHVsZSBdLFxyXG4gIGRlY2xhcmF0aW9uczogW1NrZWxldG9uQ29tcG9uZW50XSxcclxuICBleHBvcnRzOiBbU2tlbGV0b25Db21wb25lbnRdLFxyXG4gIHByb3ZpZGVyczpbU2tlbGV0b25TZXJ2aWNlXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUnVjbGliU2tlbGV0b25Nb2R1bGUge31cclxuIl19
@@ -1,46 +0,0 @@
1
- import { Component, Input } from '@angular/core';
2
- import { BehaviorSubject } from 'rxjs';
3
- import { SkeletonService } from '../../services/skeleton.service';
4
- import * as i0 from "@angular/core";
5
- import * as i1 from "../../services/skeleton.service";
6
- import * as i2 from "@angular/common";
7
- import * as i3 from "@angular/material/tooltip";
8
- export class SkeletonComponent {
9
- set rucInputData(value) {
10
- if (value) {
11
- //update default value dynamically
12
- this.skeletonService.setDefaultOptions(value);
13
- //merge updated defaults with the new input
14
- const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value };
15
- this.inputDataSubject.next(mergedOptions);
16
- }
17
- }
18
- constructor(skeletonService) {
19
- this.skeletonService = skeletonService;
20
- this.divArray = new Array(12);
21
- this.inputDataSubject = new BehaviorSubject(this.skeletonService.getDefaultOptions());
22
- this.data$ = this.inputDataSubject.asObservable();
23
- }
24
- ngOnInit() {
25
- }
26
- /**
27
- *
28
- * @param changes
29
- */
30
- ngOnChanges(changes) {
31
- if (changes['rucInputData'] && !changes['rucInputData'].firstChange) {
32
- this.inputDataSubject.next(changes['rucInputData'].currentValue);
33
- }
34
- }
35
- }
36
- SkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, deps: [{ token: i1.SkeletonService }], target: i0.ɵɵFactoryTarget.Component });
37
- 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" }] });
38
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, decorators: [{
39
- type: Component,
40
- 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"] }]
41
- }], ctorParameters: function () { return [{ type: i1.SkeletonService }]; }, propDecorators: { customTheme: [{
42
- type: Input
43
- }], rucInputData: [{
44
- type: Input
45
- }] } });
46
- //# 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==
@@ -1,3 +0,0 @@
1
- export class SkeletonOptions {
2
- }
3
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25PcHRpb25zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL21vZGVsL3NrZWxldG9uT3B0aW9ucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sZUFBZTtDQWUzQiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjbGFzcyBTa2VsZXRvbk9wdGlvbnN7XHJcbiAgICAvLyByZWN0YW5nbGUgLCByb3VuZGVkLXJlY3RhbmdsZSwgc3F1YXJlLCBjaXJjbGUsIFxyXG4vLyB0cmlhbmdsZSwgYXJyb3ctbGVmdCwgYXJyb3ctcmlnaHQsIGFycm93LXVwLCBhcnJvdy1kb3duXHJcbiAgICBzaGFwZT8gOiBhbnk7IC8vdGV4dCwgcmVjdGFuZ2xlLCByb3VuZGVkLCBTcXVhcmUsIENpcmNsZSwgVHJpYW5nbGUsIGxlZnQgQXJyb3csIHJpZ2h0ICwgdXAgYW5kIGRvd24gYXJyb3csIGxvYWRlclxyXG4gICAgd2lkdGg/OiBhbnk7ICAvL1RvIHNldCB0aGUgd2lkdGggb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBoZWlnaHQ/OiBhbnk7IC8vVG8gc2V0IHRoZSBoZWlnaHQgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBib3JkZXJSYWRpdXM/OiBhbnk7IC8vVG8gc2V0IHRoZSBib3JkZXJSYWRpdXMgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICBjbGFzcz86IGFueTsgLy9UbyBzZXQgYSBjdXN0b20gY2xhc3Mgb2Ygc2tlbGV0b24gbm90IGFwcGxpY2FibGUgdG8gbG9hZGVyXHJcbiAgICB0b29sdGlwPzogYm9vbGVhbjsgLy9UbyBzZXQgYSB0b29sdGlwIG9mIHNrZWxldG9uIG5vdCBhcHBsaWNhYmxlIHRvIGxvYWRlclxyXG4gICAgdG9vbHRpcFRleHQ/IDogc3RyaW5nOyAvL1RvIHNldCBhIHRvb2x0aXAgdGV4dCBvZiBza2VsZXRvbiBub3QgYXBwbGljYWJsZSB0byBsb2FkZXJcclxuICAgIHRvb2x0aXBQb3NpdGlvbj86ICdhYm92ZScgfCAnYmVsb3cnIHwgJ2xlZnQnIHwgJ3JpZ2h0JztcclxuICAgIGlzTG9hZGVyPzogYm9vbGVhbjsgLy8gdHJ1ZSAsIGZhc2xlIHdoZW4gbG9hZGVyIGlzIHNlbGVjdGVkXHJcbiAgICBsb2FkZXJQb3NpdGlvbj86IHN0cmluZyAvLydwYWdlJyB8ICdzZWN0aW9uJyB8ICdpbmxpbmUnIHwgJ25ld2xpbmUnOyAvLyBsb2FkZXIgcG9zaXRpb25cclxuICAgIGxvYWRlckN1c3RvbVRleHQ/OiBzdHJpbmc7IC8vIGxvYWRlciBjdXN0b20gdGV4dFxyXG4gICAgbG9hZGVyU3Bpbm5lckxvZ29Vcmw/OiBzdHJpbmc7IC8vIGxvYWRlciBpbWFnZSBpZiB1c2VyIHdhbnRcclxufVxyXG5cclxuIl19
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './index';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjLWxpYi1za2VsZXRvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9ydWMtbGliLXNrZWxldG9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
@@ -1,41 +0,0 @@
1
- import { Injectable } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export class SkeletonService {
4
- // skeletonOptions: SkeletonOptions;
5
- constructor() {
6
- this.defaultOptions = {
7
- shape: 'circle',
8
- width: "50px",
9
- height: "50px",
10
- borderRadius: '',
11
- class: '',
12
- tooltip: false,
13
- tooltipText: '',
14
- tooltipPosition: 'above',
15
- isLoader: false,
16
- };
17
- }
18
- /**
19
- * get options
20
- * @returns defaultOptions
21
- */
22
- getDefaultOptions() {
23
- return { ...this.defaultOptions };
24
- }
25
- /**
26
- * set options
27
- * @param newOptions
28
- */
29
- setDefaultOptions(newOptions) {
30
- this.defaultOptions = { ...this.defaultOptions, ...newOptions };
31
- }
32
- }
33
- SkeletonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
34
- SkeletonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, providedIn: 'root' });
35
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, decorators: [{
36
- type: Injectable,
37
- args: [{
38
- providedIn: 'root',
39
- }]
40
- }], ctorParameters: function () { return []; } });
41
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zZXJ2aWNlcy9za2VsZXRvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQW9CLE1BQU0sZUFBZSxDQUFDOztBQVE3RCxNQUFNLE9BQU8sZUFBZTtJQUd4QixvQ0FBb0M7SUFFcEM7UUFDRSxJQUFJLENBQUMsY0FBYyxHQUFHO1lBQ3BCLEtBQUssRUFBRSxRQUFRO1lBQ2YsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxFQUFFO1lBQ2hCLEtBQUssRUFBRSxFQUFFO1lBQ1QsT0FBTyxFQUFFLEtBQUs7WUFDZCxXQUFXLEVBQUcsRUFBRTtZQUNoQixlQUFlLEVBQUUsT0FBTztZQUN4QixRQUFRLEVBQUUsS0FBSztTQUNoQixDQUFBO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNILGlCQUFpQjtRQUNmLE9BQU8sRUFBQyxHQUFHLElBQUksQ0FBQyxjQUFjLEVBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsaUJBQWlCLENBQUMsVUFBb0M7UUFDcEQsSUFBSSxDQUFDLGNBQWMsR0FBRSxFQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxHQUFHLFVBQVUsRUFBQyxDQUFDO0lBRS9ELENBQUM7OzZHQWxDUSxlQUFlO2lIQUFmLGVBQWUsY0FGZCxNQUFNOzRGQUVQLGVBQWU7a0JBSDNCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJqZWN0LCBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHtTa2VsZXRvbk9wdGlvbnN9IGZyb20gJy4uL21vZGVsL3NrZWxldG9uT3B0aW9ucyc7XHJcbmltcG9ydCB7U2tlbGV0b25Db21wb25lbnR9IGZyb20gJy4uL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290JyxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNrZWxldG9uU2VydmljZSB7XHJcbiAgICBkZWZhdWx0T3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIC8vIHNrZWxldG9uT3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgICB0aGlzLmRlZmF1bHRPcHRpb25zID0ge1xyXG4gICAgICAgIHNoYXBlOiAnY2lyY2xlJyxcclxuICAgICAgICB3aWR0aDogXCI1MHB4XCIsXHJcbiAgICAgICAgaGVpZ2h0OiBcIjUwcHhcIixcclxuICAgICAgICBib3JkZXJSYWRpdXM6ICcnLFxyXG4gICAgICAgIGNsYXNzOiAnJywgXHJcbiAgICAgICAgdG9vbHRpcDogZmFsc2UsXHJcbiAgICAgICAgdG9vbHRpcFRleHQgOiAnJyxcclxuICAgICAgICB0b29sdGlwUG9zaXRpb246ICdhYm92ZScsXHJcbiAgICAgICAgaXNMb2FkZXI6IGZhbHNlLFxyXG4gICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBnZXQgb3B0aW9uc1xyXG4gICAgICogQHJldHVybnMgZGVmYXVsdE9wdGlvbnNcclxuICAgICAqL1xyXG4gICAgZ2V0RGVmYXVsdE9wdGlvbnMoKTogU2tlbGV0b25PcHRpb25ze1xyXG4gICAgICByZXR1cm4gey4uLnRoaXMuZGVmYXVsdE9wdGlvbnN9O1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogc2V0IG9wdGlvbnNcclxuICAgICAqIEBwYXJhbSBuZXdPcHRpb25zIFxyXG4gICAgICovXHJcbiAgICBzZXREZWZhdWx0T3B0aW9ucyhuZXdPcHRpb25zOiBQYXJ0aWFsPFNrZWxldG9uT3B0aW9ucz4pOiB2b2lke1xyXG4gICAgICB0aGlzLmRlZmF1bHRPcHRpb25zID17Li4udGhpcy5kZWZhdWx0T3B0aW9ucywgLi4ubmV3T3B0aW9uc307XHJcblxyXG4gICAgfVxyXG59Il19
@@ -1,110 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Injectable, Component, Input, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/common';
4
- import { CommonModule } from '@angular/common';
5
- import { BehaviorSubject } from 'rxjs';
6
- import * as i3 from '@angular/material/tooltip';
7
- import { MatTooltipModule } from '@angular/material/tooltip';
8
-
9
- class SkeletonService {
10
- // skeletonOptions: SkeletonOptions;
11
- constructor() {
12
- this.defaultOptions = {
13
- shape: 'circle',
14
- width: "50px",
15
- height: "50px",
16
- borderRadius: '',
17
- class: '',
18
- tooltip: false,
19
- tooltipText: '',
20
- tooltipPosition: 'above',
21
- isLoader: false,
22
- };
23
- }
24
- /**
25
- * get options
26
- * @returns defaultOptions
27
- */
28
- getDefaultOptions() {
29
- return Object.assign({}, this.defaultOptions);
30
- }
31
- /**
32
- * set options
33
- * @param newOptions
34
- */
35
- setDefaultOptions(newOptions) {
36
- this.defaultOptions = Object.assign(Object.assign({}, this.defaultOptions), newOptions);
37
- }
38
- }
39
- SkeletonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
40
- SkeletonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, providedIn: 'root' });
41
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, decorators: [{
42
- type: Injectable,
43
- args: [{
44
- providedIn: 'root',
45
- }]
46
- }], ctorParameters: function () { return []; } });
47
-
48
- class SkeletonComponent {
49
- set rucInputData(value) {
50
- if (value) {
51
- //update default value dynamically
52
- this.skeletonService.setDefaultOptions(value);
53
- //merge updated defaults with the new input
54
- const mergedOptions = Object.assign(Object.assign({}, this.skeletonService.getDefaultOptions()), value);
55
- this.inputDataSubject.next(mergedOptions);
56
- }
57
- }
58
- constructor(skeletonService) {
59
- this.skeletonService = skeletonService;
60
- this.divArray = new Array(12);
61
- this.inputDataSubject = new BehaviorSubject(this.skeletonService.getDefaultOptions());
62
- this.data$ = this.inputDataSubject.asObservable();
63
- }
64
- ngOnInit() {
65
- }
66
- /**
67
- *
68
- * @param changes
69
- */
70
- ngOnChanges(changes) {
71
- if (changes['rucInputData'] && !changes['rucInputData'].firstChange) {
72
- this.inputDataSubject.next(changes['rucInputData'].currentValue);
73
- }
74
- }
75
- }
76
- SkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, deps: [{ token: SkeletonService }], target: i0.ɵɵFactoryTarget.Component });
77
- 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" }] });
78
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, decorators: [{
79
- type: Component,
80
- 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"] }]
81
- }], ctorParameters: function () { return [{ type: SkeletonService }]; }, propDecorators: { customTheme: [{
82
- type: Input
83
- }], rucInputData: [{
84
- type: Input
85
- }] } });
86
-
87
- class RuclibSkeletonModule {
88
- }
89
- RuclibSkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
90
- RuclibSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, declarations: [SkeletonComponent], imports: [CommonModule, MatTooltipModule], exports: [SkeletonComponent] });
91
- RuclibSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, providers: [SkeletonService], imports: [CommonModule, MatTooltipModule] });
92
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, decorators: [{
93
- type: NgModule,
94
- args: [{
95
- imports: [CommonModule, MatTooltipModule],
96
- declarations: [SkeletonComponent],
97
- exports: [SkeletonComponent],
98
- providers: [SkeletonService]
99
- }]
100
- }] });
101
-
102
- class SkeletonOptions {
103
- }
104
-
105
- /**
106
- * Generated bundle index. Do not edit.
107
- */
108
-
109
- export { RuclibSkeletonModule, SkeletonComponent, SkeletonOptions, SkeletonService };
110
- //# sourceMappingURL=ruc-lib-skeleton.mjs.map
@@ -1 +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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"}
@@ -1,110 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Injectable, Component, Input, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/common';
4
- import { CommonModule } from '@angular/common';
5
- import { BehaviorSubject } from 'rxjs';
6
- import * as i3 from '@angular/material/tooltip';
7
- import { MatTooltipModule } from '@angular/material/tooltip';
8
-
9
- class SkeletonService {
10
- // skeletonOptions: SkeletonOptions;
11
- constructor() {
12
- this.defaultOptions = {
13
- shape: 'circle',
14
- width: "50px",
15
- height: "50px",
16
- borderRadius: '',
17
- class: '',
18
- tooltip: false,
19
- tooltipText: '',
20
- tooltipPosition: 'above',
21
- isLoader: false,
22
- };
23
- }
24
- /**
25
- * get options
26
- * @returns defaultOptions
27
- */
28
- getDefaultOptions() {
29
- return { ...this.defaultOptions };
30
- }
31
- /**
32
- * set options
33
- * @param newOptions
34
- */
35
- setDefaultOptions(newOptions) {
36
- this.defaultOptions = { ...this.defaultOptions, ...newOptions };
37
- }
38
- }
39
- SkeletonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
40
- SkeletonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, providedIn: 'root' });
41
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonService, decorators: [{
42
- type: Injectable,
43
- args: [{
44
- providedIn: 'root',
45
- }]
46
- }], ctorParameters: function () { return []; } });
47
-
48
- class SkeletonComponent {
49
- set rucInputData(value) {
50
- if (value) {
51
- //update default value dynamically
52
- this.skeletonService.setDefaultOptions(value);
53
- //merge updated defaults with the new input
54
- const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value };
55
- this.inputDataSubject.next(mergedOptions);
56
- }
57
- }
58
- constructor(skeletonService) {
59
- this.skeletonService = skeletonService;
60
- this.divArray = new Array(12);
61
- this.inputDataSubject = new BehaviorSubject(this.skeletonService.getDefaultOptions());
62
- this.data$ = this.inputDataSubject.asObservable();
63
- }
64
- ngOnInit() {
65
- }
66
- /**
67
- *
68
- * @param changes
69
- */
70
- ngOnChanges(changes) {
71
- if (changes['rucInputData'] && !changes['rucInputData'].firstChange) {
72
- this.inputDataSubject.next(changes['rucInputData'].currentValue);
73
- }
74
- }
75
- }
76
- SkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, deps: [{ token: SkeletonService }], target: i0.ɵɵFactoryTarget.Component });
77
- 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" }] });
78
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, decorators: [{
79
- type: Component,
80
- 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"] }]
81
- }], ctorParameters: function () { return [{ type: SkeletonService }]; }, propDecorators: { customTheme: [{
82
- type: Input
83
- }], rucInputData: [{
84
- type: Input
85
- }] } });
86
-
87
- class RuclibSkeletonModule {
88
- }
89
- RuclibSkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
90
- RuclibSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, declarations: [SkeletonComponent], imports: [CommonModule, MatTooltipModule], exports: [SkeletonComponent] });
91
- RuclibSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, providers: [SkeletonService], imports: [CommonModule, MatTooltipModule] });
92
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibSkeletonModule, decorators: [{
93
- type: NgModule,
94
- args: [{
95
- imports: [CommonModule, MatTooltipModule],
96
- declarations: [SkeletonComponent],
97
- exports: [SkeletonComponent],
98
- providers: [SkeletonService]
99
- }]
100
- }] });
101
-
102
- class SkeletonOptions {
103
- }
104
-
105
- /**
106
- * Generated bundle index. Do not edit.
107
- */
108
-
109
- export { RuclibSkeletonModule, SkeletonComponent, SkeletonOptions, SkeletonService };
110
- //# sourceMappingURL=ruc-lib-skeleton.mjs.map
@@ -1 +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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"}
@@ -1,9 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import * as i1 from "./skeleton/skeleton.component";
3
- import * as i2 from "@angular/common";
4
- import * as i3 from "@angular/material/tooltip";
5
- export declare class RuclibSkeletonModule {
6
- static ɵfac: i0.ɵɵFactoryDeclaration<RuclibSkeletonModule, never>;
7
- static ɵmod: i0.ɵɵNgModuleDeclaration<RuclibSkeletonModule, [typeof i1.SkeletonComponent], [typeof i2.CommonModule, typeof i3.MatTooltipModule], [typeof i1.SkeletonComponent]>;
8
- static ɵinj: i0.ɵɵInjectorDeclaration<RuclibSkeletonModule>;
9
- }
@@ -1,21 +0,0 @@
1
- import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
2
- import { SkeletonOptions } from '../../model/skeletonOptions';
3
- import { SkeletonService } from '../../services/skeleton.service';
4
- import * as i0 from "@angular/core";
5
- export declare class SkeletonComponent implements OnInit, OnChanges {
6
- skeletonService: SkeletonService;
7
- customTheme: string;
8
- divArray: any[];
9
- set rucInputData(value: Partial<SkeletonOptions>);
10
- private inputDataSubject;
11
- data$: import("rxjs").Observable<SkeletonOptions>;
12
- constructor(skeletonService: SkeletonService);
13
- ngOnInit(): void;
14
- /**
15
- *
16
- * @param changes
17
- */
18
- ngOnChanges(changes: SimpleChanges): void;
19
- static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, never>;
20
- static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonComponent, "uxp-ruclib-skeleton", never, { "customTheme": "customTheme"; "rucInputData": "rucInputData"; }, {}, never, never, false, never>;
21
- }
@@ -1,14 +0,0 @@
1
- export declare class SkeletonOptions {
2
- shape?: any;
3
- width?: any;
4
- height?: any;
5
- borderRadius?: any;
6
- class?: any;
7
- tooltip?: boolean;
8
- tooltipText?: string;
9
- tooltipPosition?: 'above' | 'below' | 'left' | 'right';
10
- isLoader?: boolean;
11
- loaderPosition?: string;
12
- loaderCustomText?: string;
13
- loaderSpinnerLogoUrl?: string;
14
- }
@@ -1,18 +0,0 @@
1
- import { SkeletonOptions } from '../model/skeletonOptions';
2
- import * as i0 from "@angular/core";
3
- export declare class SkeletonService {
4
- defaultOptions: SkeletonOptions;
5
- constructor();
6
- /**
7
- * get options
8
- * @returns defaultOptions
9
- */
10
- getDefaultOptions(): SkeletonOptions;
11
- /**
12
- * set options
13
- * @param newOptions
14
- */
15
- setDefaultOptions(newOptions: Partial<SkeletonOptions>): void;
16
- static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonService, never>;
17
- static ɵprov: i0.ɵɵInjectableDeclaration<SkeletonService>;
18
- }