@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 +56 -22
- package/fesm2022/ruc-lib-skeleton.mjs +93 -0
- package/fesm2022/ruc-lib-skeleton.mjs.map +1 -0
- package/index.d.ts +54 -4
- package/package.json +12 -24
- package/esm2020/index.mjs +0 -5
- package/esm2020/lib/ruclib-skeleton.module.mjs +0 -21
- package/esm2020/lib/skeleton/skeleton.component.mjs +0 -46
- package/esm2020/model/skeletonOptions.mjs +0 -3
- package/esm2020/ruc-lib-skeleton.mjs +0 -5
- package/esm2020/services/skeleton.service.mjs +0 -41
- package/fesm2015/ruc-lib-skeleton.mjs +0 -110
- package/fesm2015/ruc-lib-skeleton.mjs.map +0 -1
- package/fesm2020/ruc-lib-skeleton.mjs +0 -110
- package/fesm2020/ruc-lib-skeleton.mjs.map +0 -1
- package/lib/ruclib-skeleton.module.d.ts +0 -9
- package/lib/skeleton/skeleton.component.d.ts +0 -21
- package/model/skeletonOptions.d.ts +0 -14
- package/services/skeleton.service.d.ts +0 -18
package/README.md
CHANGED
|
@@ -12,44 +12,78 @@ npm install @uxpractice/ruc-lib
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
### Install Individual Component
|
|
15
|
-
|
|
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
|
|
33
|
-
In your Angular
|
|
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 {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
import {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
@
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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": "
|
|
4
|
-
"license": "MIT",
|
|
3
|
+
"version": "4.0.0",
|
|
5
4
|
"peerDependencies": {
|
|
6
|
-
"@angular/
|
|
7
|
-
"@angular/
|
|
8
|
-
"@angular/
|
|
9
|
-
"@angular/
|
|
10
|
-
"@angular/forms": "
|
|
11
|
-
"@angular/platform-browser": "
|
|
12
|
-
"ngx-pagination": "^6.0.
|
|
13
|
-
"rxjs": ">=
|
|
14
|
-
"zone.js": "
|
|
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": "
|
|
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
|
-
"
|
|
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
|
-
}
|