@ruc-lib/skeleton 2.1.1 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -17,36 +17,45 @@ If you only need the Skeleton Library:
17
17
  npm install @ruc-lib/skeleton
18
18
  ```
19
19
 
20
- ## Usage
20
+ ## Version Compatibility
21
+
22
+ Please ensure you install the correct version of `@ruc-lib/skeleton` based on your Angular version.
23
+
24
+ | Angular Version | Compatible `@ruc-lib/skeleton` Version |
25
+ |--------------------|---------------------------------------------|
26
+ | 15.x.x | `npm install @ruc-lib/skeleton@^3.0.0` |
27
+ | 16.x.x | `npm install @ruc-lib/skeleton@^3.0.0` |
21
28
 
22
- ### 1. Import the Module
23
- In your Angular module file (e.g., `app.module.ts`), import the `RuclibSkeletonModule`:
24
29
 
25
- ```typescript
26
- import {RuclibSkeletonModule} from '@ruclib/skeleton';
27
- import { AppComponent } from './app.component';
28
- import { NgModule } from '@angular/core';
29
- import { MatTooltipModule } from '@angular/material/tooltip';
30
- import { BrowserModule } from '@angular/platform-browser';
31
-
32
- @NgModule({
33
- declarations: [AppComponent],
34
- imports: [
35
- BrowserModule,
36
- RuclibSkeletonModule,
37
- MatTooltipModule
38
- ],
39
- providers: [],
40
- bootstrap: [AppComponent]
41
- })
42
- export class AppModule {}
30
+ ## Usage
31
+
32
+ ### 1. Import the Component
33
+ In your Angular component file (e.g., `app.component.ts`), import the `RuclibSkeletonComponent`:
34
+
35
+ ```typescript
36
+ import { Component } from '@angular/core';
37
+
38
+ // For Complete Library
39
+ import { RuclibSkeletonComponent } from '@uxpractice/ruc-lib/skeleton';
40
+
41
+ // For Individual Package
42
+ import { RuclibSkeletonComponent } from '@ruc-lib/skeleton';
43
+
44
+ @Component({
45
+ selector: 'app-root',
46
+ imports: [RuclibSkeletonComponent],
47
+ templateUrl: './app.component.html',
48
+ })
49
+ export class AppComponent {
50
+ // Component code here
51
+ }
43
52
  ```
44
53
 
45
54
  ### 2. Use the Component
46
- In your component's template, use the `<uxp-skeleton` selector and pass the configuration object to the `rucInputData` input.
55
+ In your component's template, use the `<uxp-ruclib-skeleton` selector and pass the configuration object to the `rucInputData` input.
47
56
 
48
57
  ```html
49
- <uxp-skeleton [rucInputData]="skeletonData"></uxp-skeleton>
58
+ <uxp-ruclib-skeleton [rucInputData]="skeletonData"></uxp-ruclib-skeleton>
50
59
  ```
51
60
 
52
61
  ## API Reference
@@ -110,4 +119,4 @@ Contributions are welcome! Feel free to open issues or pull requests for any enh
110
119
 
111
120
  ## Acknowledgements
112
121
 
113
- Thank you for choosing the Skeleton library. If you have any feedback or suggestions, please let us know!
122
+ Thank you for choosing the Skeleton library. If you have any feedback or suggestions, please let us know!
@@ -0,0 +1,93 @@
1
+ import * as i3 from '@angular/material/tooltip';
2
+ import { MatTooltipModule } from '@angular/material/tooltip';
3
+ import * as i0 from '@angular/core';
4
+ import { Injectable, Input, Component } from '@angular/core';
5
+ import { BehaviorSubject } from 'rxjs';
6
+ import * as i2 from '@angular/common';
7
+ import { CommonModule } from '@angular/common';
8
+
9
+ class SkeletonService {
10
+ // skeletonOptions: SkeletonOptions;
11
+ constructor() {
12
+ this.defaultOptions = {
13
+ shape: 'circle',
14
+ width: "50px",
15
+ height: "50px",
16
+ borderRadius: '',
17
+ class: '',
18
+ tooltip: false,
19
+ tooltipText: '',
20
+ tooltipPosition: 'above',
21
+ isLoader: false,
22
+ };
23
+ }
24
+ /**
25
+ * get options
26
+ * @returns defaultOptions
27
+ */
28
+ getDefaultOptions() {
29
+ return { ...this.defaultOptions };
30
+ }
31
+ /**
32
+ * set options
33
+ * @param newOptions
34
+ */
35
+ setDefaultOptions(newOptions) {
36
+ this.defaultOptions = { ...this.defaultOptions, ...newOptions };
37
+ }
38
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
39
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SkeletonService, providedIn: 'root' }); }
40
+ }
41
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SkeletonService, decorators: [{
42
+ type: Injectable,
43
+ args: [{
44
+ providedIn: 'root',
45
+ }]
46
+ }], ctorParameters: () => [] });
47
+
48
+ class RuclibSkeletonComponent {
49
+ set rucInputData(value) {
50
+ if (value) {
51
+ //update default value dynamically
52
+ this.skeletonService.setDefaultOptions(value);
53
+ //merge updated defaults with the new input
54
+ const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value };
55
+ this.inputDataSubject.next(mergedOptions);
56
+ }
57
+ }
58
+ constructor(skeletonService) {
59
+ this.skeletonService = skeletonService;
60
+ this.divArray = new Array(12);
61
+ this.inputDataSubject = new BehaviorSubject(this.skeletonService.getDefaultOptions());
62
+ this.data$ = this.inputDataSubject.asObservable();
63
+ }
64
+ /**
65
+ *
66
+ * @param changes
67
+ */
68
+ ngOnChanges(changes) {
69
+ if (changes['rucInputData'] && !changes['rucInputData'].firstChange) {
70
+ this.inputDataSubject.next(changes['rucInputData'].currentValue);
71
+ }
72
+ }
73
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibSkeletonComponent, deps: [{ token: SkeletonService }], target: i0.ɵɵFactoryTarget.Component }); }
74
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibSkeletonComponent, isStandalone: true, selector: "uxp-ruclib-skeleton", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, usesOnChanges: true, ngImport: i0, template: "@if (data$ | async; as data) {\r\n <div [class]=\"customTheme ? customTheme : ''\">\r\n <!-- Skeleton Start -->\r\n @if (!data?.isLoader) {\r\n <div class=\"skeleton skeleton-text\"\r\n [class]=\"data.shape\"\r\n [style.width]=\"data?.width\"\r\n [style.height]=\"data?.height\"\r\n [style.borderRadius]=\"data?.borderRadius\"\r\n [ngClass]=\"data?.class\"\r\n [matTooltip]=\"data.tooltipText ?? ''\"\r\n [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n ></div>\r\n }\r\n <!-- Skeleton End -->\r\n <!-- Loader HTML Section start-->\r\n @if (data.isLoader && data.loaderPosition) {\r\n <div>\r\n @if (data.loaderPosition === 'page') {\r\n <div class=\"ruc-loading ruc-load-spinner-page\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n }\r\n @if (data.loaderPosition === 'section') {\r\n <div class=\"ruc-loading ruc-load-spinner-section\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n }\r\n @if (data.loaderPosition === 'inline') {\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n }\r\n @if (data.loaderPosition === 'newline') {\r\n <ng-container class=\"newline-load\">\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n </ng-container>\r\n }\r\n <ng-template #pageRef>\r\n <!-- use in loop -->\r\n <!-- <div *ngFor=\"let _ of divArray\">\r\n </div> -->\r\n <div class=\"loader\"></div>\r\n @if (data.loaderSpinnerLogoUrl) {\r\n <img class=\"spinner-logo\" alt=\"Logo\">\r\n }\r\n @if (data.loaderCustomText) {\r\n <p class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n }\r\n </ng-template>\r\n <ng-template #inlineRef>\r\n <div class=\"loader\"></div>\r\n <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n <div *ngFor=\"let _ of divArray\">\r\n </div>\r\n </div> -->\r\n @if (data.loaderCustomText) {\r\n <p class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n }\r\n </ng-template>\r\n </div>\r\n}\r\n<!-- Loader HTML section end -->\r\n</div>\r\n}\r\n", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-page{position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-section{position:relative;margin:0 auto}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{display:inline-block;position:relative;top:-5px}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
75
+ }
76
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibSkeletonComponent, decorators: [{
77
+ type: Component,
78
+ args: [{ selector: 'uxp-ruclib-skeleton', imports: [CommonModule, MatTooltipModule], template: "@if (data$ | async; as data) {\r\n <div [class]=\"customTheme ? customTheme : ''\">\r\n <!-- Skeleton Start -->\r\n @if (!data?.isLoader) {\r\n <div class=\"skeleton skeleton-text\"\r\n [class]=\"data.shape\"\r\n [style.width]=\"data?.width\"\r\n [style.height]=\"data?.height\"\r\n [style.borderRadius]=\"data?.borderRadius\"\r\n [ngClass]=\"data?.class\"\r\n [matTooltip]=\"data.tooltipText ?? ''\"\r\n [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n ></div>\r\n }\r\n <!-- Skeleton End -->\r\n <!-- Loader HTML Section start-->\r\n @if (data.isLoader && data.loaderPosition) {\r\n <div>\r\n @if (data.loaderPosition === 'page') {\r\n <div class=\"ruc-loading ruc-load-spinner-page\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n }\r\n @if (data.loaderPosition === 'section') {\r\n <div class=\"ruc-loading ruc-load-spinner-section\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n }\r\n @if (data.loaderPosition === 'inline') {\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n }\r\n @if (data.loaderPosition === 'newline') {\r\n <ng-container class=\"newline-load\">\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n </ng-container>\r\n }\r\n <ng-template #pageRef>\r\n <!-- use in loop -->\r\n <!-- <div *ngFor=\"let _ of divArray\">\r\n </div> -->\r\n <div class=\"loader\"></div>\r\n @if (data.loaderSpinnerLogoUrl) {\r\n <img class=\"spinner-logo\" alt=\"Logo\">\r\n }\r\n @if (data.loaderCustomText) {\r\n <p class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n }\r\n </ng-template>\r\n <ng-template #inlineRef>\r\n <div class=\"loader\"></div>\r\n <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n <div *ngFor=\"let _ of divArray\">\r\n </div>\r\n </div> -->\r\n @if (data.loaderCustomText) {\r\n <p class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n }\r\n </ng-template>\r\n </div>\r\n}\r\n<!-- Loader HTML section end -->\r\n</div>\r\n}\r\n", styles: [".skeletn{background-color:#e0e0e0;border-radius:4px;animation:shimmer 1.5s infinite linear;width:100%;height:20px}.skeletn-text{width:60%;height:16px}.skeletn-logo{width:200px;height:150px;border-radius:8px}.skeletn-card{width:300px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc;border-radius:8px}.skeletn-text.short{width:40%}.skeletn-button{width:100px;height:40px;border-radius:20px}.rectangle{width:200px;height:100px;border-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.rounded-rectangle{width:200px;height:100px;background-color:#e0e0e0;border-radius:12px;animation:shimmer 1.5s infinite linear}.square{width:100px;height:100px;background-color:#e0e0e0;animation:shimmer 1.5s infinite linear}.circle{width:100px;height:100px;background-color:#e0e0e0;border-radius:50%;animation:shimmer 1.5s infinite linear}.triangle{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-left{width:0;height:0;border-top:30px solid transparent;border-right:50px solid #e0e0e0;border-bottom:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:50px solid #e0e0e0;animation:shimmer 1.5s infinite linear}.arrow-up{width:0;height:0;border-right:30px solid transparent;border-bottom:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}.arrow-down{width:0;height:0;border-right:30px solid transparent;border-top:50px solid #e0e0e0;border-left:30px solid transparent;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}.newline-load{padding-top:5px}@keyframes ruc-spinner{0%{opacity:1}to{opacity:0}}.ruc-load-spinner-page{z-index:99999;color:#8a2be2;display:block;width:120px;height:120px}.ruc-load-spinner-page .spineer-logo{position:relative;width:60px;left:calc(120px * .27);top:calc(120px * .27)}.ruc-load-spinner-page .spinner-text{top:72px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-page div{transform-origin:60px 60px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-60px}.ruc-load-spinner-page div:after{content:\" \";display:block;position:absolute;top:1.2px;left:36px;width:6px;height:18px;border-radius:20%;background:0}.ruc-load-spinner-page{position:absolute;top:max(30%,200px);left:calc(50% - 60px)}.ruc-load-spinner-section{z-index:99999;color:#8a2be2;display:block;width:90px;height:90px}.ruc-load-spinner-section .spineer-logo{position:relative;width:45px;left:24.3px;top:24.3px}.ruc-load-spinner-section .spinner-text{top:54px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-section div{transform-origin:45px 45px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-45px}.ruc-load-spinner-section div:after{content:\" \";display:block;position:absolute;top:.9px;left:27px;width:4.5px;height:13.5px;border-radius:20%;background:0}.ruc-load-spinner-section{position:relative;margin:0 auto}.ruc-load-spinner-small-inline{z-index:99999;color:#8a2be2;display:block;width:30px;height:30px}.ruc-load-spinner-small-inline .spineer-logo{position:relative;width:15px;left:calc(30px * .27);top:calc(30px * .27)}.ruc-load-spinner-small-inline .spinner-text{top:18px;position:relative;text-align:center;white-space:nowrap}.ruc-load-spinner-small-inline div{transform-origin:15px 15px;animation:ruc-spinner 1.2s linear infinite;position:relative;top:-15px}.ruc-load-spinner-small-inline div:after{content:\" \";display:block;position:absolute;top:.3px;left:9px;width:1.5px;height:4.5px;border-radius:20%;background:0}.ruc-load-spinner-small-inline{display:inline-block;position:relative;top:-5px}.ruc-spinner-text-inline{display:inline-block;vertical-align:sub;margin-left:10px;font-size:12px}@media (max-width: 768px){.spinner-text,.ruc-spinner-text-inline{font-size:12px}}.loader{width:48px;height:48px;border:5px dotted #3f51b5;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
79
+ }], ctorParameters: () => [{ type: SkeletonService }], propDecorators: { customTheme: [{
80
+ type: Input
81
+ }], rucInputData: [{
82
+ type: Input
83
+ }] } });
84
+
85
+ class SkeletonOptions {
86
+ }
87
+
88
+ /**
89
+ * Generated bundle index. Do not edit.
90
+ */
91
+
92
+ export { RuclibSkeletonComponent, SkeletonOptions, SkeletonService };
93
+ //# sourceMappingURL=ruc-lib-skeleton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ruc-lib-skeleton.mjs","sources":["../../src/services/skeleton.service.ts","../../src/lib/ruclib-skeleton/ruclib-skeleton.component.ts","../../src/lib/ruclib-skeleton/ruclib-skeleton.component.html","../../src/model/skeletonOptions.ts","../../src/ruc-lib-skeleton.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { SkeletonOptions } from '../model/skeletonOptions';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class SkeletonService {\r\n defaultOptions: SkeletonOptions;\r\n\r\n // skeletonOptions: SkeletonOptions;\r\n\r\n constructor() {\r\n this.defaultOptions = {\r\n shape: 'circle',\r\n width: \"50px\",\r\n height: \"50px\",\r\n borderRadius: '',\r\n class: '',\r\n tooltip: false,\r\n tooltipText : '',\r\n tooltipPosition: 'above',\r\n isLoader: false,\r\n }\r\n }\r\n\r\n /**\r\n * get options\r\n * @returns defaultOptions\r\n */\r\n getDefaultOptions(): SkeletonOptions{\r\n return {...this.defaultOptions};\r\n }\r\n\r\n /**\r\n * set options\r\n * @param newOptions\r\n */\r\n setDefaultOptions(newOptions: Partial<SkeletonOptions>): void{\r\n this.defaultOptions ={...this.defaultOptions, ...newOptions};\r\n\r\n }\r\n}\r\n","import { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport {SkeletonOptions} from '../../model/skeletonOptions';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { SkeletonService } from '../../services/skeleton.service';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'uxp-ruclib-skeleton',\r\n imports: [CommonModule, MatTooltipModule],\r\n templateUrl: './ruclib-skeleton.component.html',\r\n styleUrl: './ruclib-skeleton.component.scss'\r\n})\r\nexport class RuclibSkeletonComponent implements OnChanges {\r\n\r\n\r\n @Input() customTheme!: string;\r\n divArray = new Array(12);\r\n\r\n\r\n @Input() set rucInputData(value:Partial<SkeletonOptions>){\r\n if(value){\r\n //update default value dynamically\r\n this.skeletonService.setDefaultOptions(value);\r\n\r\n //merge updated defaults with the new input\r\n const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value }\r\n this.inputDataSubject.next(mergedOptions);\r\n }\r\n }\r\n\r\n private inputDataSubject = new BehaviorSubject<SkeletonOptions>(this.skeletonService.getDefaultOptions());\r\n data$ = this.inputDataSubject.asObservable();\r\n\r\n\r\n constructor(public skeletonService:SkeletonService){ }\r\n\r\n /**\r\n *\r\n * @param changes\r\n */\r\n ngOnChanges(changes: SimpleChanges){\r\n if(changes['rucInputData'] && !changes['rucInputData'].firstChange){\r\n this.inputDataSubject.next(changes['rucInputData'].currentValue);\r\n }\r\n }\r\n\r\n}\r\n\r\n","@if (data$ | async; as data) {\r\n <div [class]=\"customTheme ? customTheme : ''\">\r\n <!-- Skeleton Start -->\r\n @if (!data?.isLoader) {\r\n <div class=\"skeleton skeleton-text\"\r\n [class]=\"data.shape\"\r\n [style.width]=\"data?.width\"\r\n [style.height]=\"data?.height\"\r\n [style.borderRadius]=\"data?.borderRadius\"\r\n [ngClass]=\"data?.class\"\r\n [matTooltip]=\"data.tooltipText ?? ''\"\r\n [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n ></div>\r\n }\r\n <!-- Skeleton End -->\r\n <!-- Loader HTML Section start-->\r\n @if (data.isLoader && data.loaderPosition) {\r\n <div>\r\n @if (data.loaderPosition === 'page') {\r\n <div class=\"ruc-loading ruc-load-spinner-page\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n }\r\n @if (data.loaderPosition === 'section') {\r\n <div class=\"ruc-loading ruc-load-spinner-section\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n }\r\n @if (data.loaderPosition === 'inline') {\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n }\r\n @if (data.loaderPosition === 'newline') {\r\n <ng-container class=\"newline-load\">\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n </ng-container>\r\n }\r\n <ng-template #pageRef>\r\n <!-- use in loop -->\r\n <!-- <div *ngFor=\"let _ of divArray\">\r\n </div> -->\r\n <div class=\"loader\"></div>\r\n @if (data.loaderSpinnerLogoUrl) {\r\n <img class=\"spinner-logo\" alt=\"Logo\">\r\n }\r\n @if (data.loaderCustomText) {\r\n <p class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n }\r\n </ng-template>\r\n <ng-template #inlineRef>\r\n <div class=\"loader\"></div>\r\n <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n <div *ngFor=\"let _ of divArray\">\r\n </div>\r\n </div> -->\r\n @if (data.loaderCustomText) {\r\n <p class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n }\r\n </ng-template>\r\n </div>\r\n}\r\n<!-- Loader HTML section end -->\r\n</div>\r\n}\r\n","export class SkeletonOptions{\r\n // rectangle , rounded-rectangle, square, circle, \r\n// triangle, arrow-left, arrow-right, arrow-up, arrow-down\r\n shape? : any; //text, rectangle, rounded, Square, Circle, Triangle, left Arrow, right , up and down arrow, loader\r\n width?: any; //To set the width of skeleton not applicable to loader\r\n height?: any; //To set the height of skeleton not applicable to loader\r\n borderRadius?: any; //To set the borderRadius of skeleton not applicable to loader\r\n class?: any; //To set a custom class of skeleton not applicable to loader\r\n tooltip?: boolean; //To set a tooltip of skeleton not applicable to loader\r\n tooltipText? : string; //To set a tooltip text of skeleton not applicable to loader\r\n tooltipPosition?: 'above' | 'below' | 'left' | 'right';\r\n isLoader?: boolean; // true , fasle when loader is selected\r\n loaderPosition?: string //'page' | 'section' | 'inline' | 'newline'; // loader position\r\n loaderCustomText?: string; // loader custom text\r\n loaderSpinnerLogoUrl?: string; // loader image if user want\r\n}\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SkeletonService"],"mappings":"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"}
package/index.d.ts CHANGED
@@ -1,4 +1,54 @@
1
- export * from './lib/ruclib-skeleton.module';
2
- export * from './lib/skeleton/skeleton.component';
3
- export * from './services/skeleton.service';
4
- export * from './model/skeletonOptions';
1
+ import * as rxjs from 'rxjs';
2
+ import * as i0 from '@angular/core';
3
+ import { OnChanges, SimpleChanges } from '@angular/core';
4
+
5
+ declare class SkeletonOptions {
6
+ shape?: any;
7
+ width?: any;
8
+ height?: any;
9
+ borderRadius?: any;
10
+ class?: any;
11
+ tooltip?: boolean;
12
+ tooltipText?: string;
13
+ tooltipPosition?: 'above' | 'below' | 'left' | 'right';
14
+ isLoader?: boolean;
15
+ loaderPosition?: string;
16
+ loaderCustomText?: string;
17
+ loaderSpinnerLogoUrl?: string;
18
+ }
19
+
20
+ declare class SkeletonService {
21
+ defaultOptions: SkeletonOptions;
22
+ constructor();
23
+ /**
24
+ * get options
25
+ * @returns defaultOptions
26
+ */
27
+ getDefaultOptions(): SkeletonOptions;
28
+ /**
29
+ * set options
30
+ * @param newOptions
31
+ */
32
+ setDefaultOptions(newOptions: Partial<SkeletonOptions>): void;
33
+ static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonService, never>;
34
+ static ɵprov: i0.ɵɵInjectableDeclaration<SkeletonService>;
35
+ }
36
+
37
+ declare class RuclibSkeletonComponent implements OnChanges {
38
+ skeletonService: SkeletonService;
39
+ customTheme: string;
40
+ divArray: any[];
41
+ set rucInputData(value: Partial<SkeletonOptions>);
42
+ private inputDataSubject;
43
+ data$: rxjs.Observable<SkeletonOptions>;
44
+ constructor(skeletonService: SkeletonService);
45
+ /**
46
+ *
47
+ * @param changes
48
+ */
49
+ ngOnChanges(changes: SimpleChanges): void;
50
+ static ɵfac: i0.ɵɵFactoryDeclaration<RuclibSkeletonComponent, never>;
51
+ static ɵcmp: i0.ɵɵComponentDeclaration<RuclibSkeletonComponent, "uxp-ruclib-skeleton", never, { "customTheme": { "alias": "customTheme"; "required": false; }; "rucInputData": { "alias": "rucInputData"; "required": false; }; }, {}, never, never, true, never>;
52
+ }
53
+
54
+ export { RuclibSkeletonComponent, SkeletonOptions, SkeletonService };
package/package.json CHANGED
@@ -1,50 +1,22 @@
1
1
  {
2
2
  "name": "@ruc-lib/skeleton",
3
- "version": "2.1.1",
4
- "license": "MIT",
3
+ "version": "3.1.0",
5
4
  "peerDependencies": {
6
- "@angular/common": ">=15.0.0",
7
- "@angular/core": ">=15.0.0",
8
- "@angular/forms": ">=15.0.0",
9
- "@angular/platform-browser": ">=15.0.0",
10
- "@angular/platform-browser-dynamic": ">=15.0.0",
11
- "@angular/animations": ">=15.0.0",
12
- "@angular/material": ">=15.0.0",
13
- "@angular/cdk": ">=15.0.0",
14
- "rxjs": "^7.8.0"
15
- },
16
- "peerDependenciesMeta": {
17
- "@angular/forms": {
18
- "optional": true
19
- },
20
- "@angular/material": {
21
- "optional": true
22
- },
23
- "@angular/cdk": {
24
- "optional": true
25
- },
26
- "@angular/animations": {
27
- "optional": true
28
- },
29
- "@angular/platform-browser": {
30
- "optional": true
31
- },
32
- "@angular/platform-browser-dynamic": {
33
- "optional": true
34
- }
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"
35
14
  },
36
15
  "dependencies": {
37
16
  "tslib": "^2.3.0"
38
17
  },
39
- "publishConfig": {
40
- "access": "public"
41
- },
42
18
  "sideEffects": false,
43
- "module": "fesm2015/ruc-lib-skeleton.mjs",
44
- "es2020": "fesm2020/ruc-lib-skeleton.mjs",
45
- "esm2020": "esm2020/ruc-lib-skeleton.mjs",
46
- "fesm2020": "fesm2020/ruc-lib-skeleton.mjs",
47
- "fesm2015": "fesm2015/ruc-lib-skeleton.mjs",
19
+ "module": "fesm2022/ruc-lib-skeleton.mjs",
48
20
  "typings": "index.d.ts",
49
21
  "exports": {
50
22
  "./package.json": {
@@ -52,11 +24,7 @@
52
24
  },
53
25
  ".": {
54
26
  "types": "./index.d.ts",
55
- "esm2020": "./esm2020/ruc-lib-skeleton.mjs",
56
- "es2020": "./fesm2020/ruc-lib-skeleton.mjs",
57
- "es2015": "./fesm2015/ruc-lib-skeleton.mjs",
58
- "node": "./fesm2015/ruc-lib-skeleton.mjs",
59
- "default": "./fesm2020/ruc-lib-skeleton.mjs"
27
+ "default": "./fesm2022/ruc-lib-skeleton.mjs"
60
28
  }
61
29
  }
62
- }
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3J1Y2xpYi9za2VsZXRvbi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx5QkFBeUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL3J1Y2xpYi1za2VsZXRvbi5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnO1xyXG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5leHBvcnQgKiBmcm9tICcuL21vZGVsL3NrZWxldG9uT3B0aW9ucyc7Il19
@@ -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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXNrZWxldG9uLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3NrZWxldG9uL3NyYy9saWIvcnVjbGliLXNrZWxldG9uLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7O0FBUTdELE1BQU0sT0FBTyxvQkFBb0I7O2tIQUFwQixvQkFBb0I7bUhBQXBCLG9CQUFvQixpQkFKaEIsaUJBQWlCLGFBRHRCLFlBQVksRUFBQyxnQkFBZ0IsYUFFN0IsaUJBQWlCO21IQUdoQixvQkFBb0IsYUFGckIsQ0FBQyxlQUFlLENBQUMsWUFIakIsWUFBWSxFQUFDLGdCQUFnQjs0RkFLNUIsb0JBQW9CO2tCQU5oQyxRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBQyxnQkFBZ0IsQ0FBRTtvQkFDekMsWUFBWSxFQUFFLENBQUMsaUJBQWlCLENBQUM7b0JBQ2pDLE9BQU8sRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUM1QixTQUFTLEVBQUMsQ0FBQyxlQUFlLENBQUM7aUJBQzVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgU2tlbGV0b25Db21wb25lbnQgfSBmcm9tICcuL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFNrZWxldG9uU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBNYXRUb29sdGlwTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdG9vbHRpcCc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsTWF0VG9vbHRpcE1vZHVsZSBdLFxyXG4gIGRlY2xhcmF0aW9uczogW1NrZWxldG9uQ29tcG9uZW50XSxcclxuICBleHBvcnRzOiBbU2tlbGV0b25Db21wb25lbnRdLFxyXG4gIHByb3ZpZGVyczpbU2tlbGV0b25TZXJ2aWNlXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUnVjbGliU2tlbGV0b25Nb2R1bGUge31cclxuIl19
@@ -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-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-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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ydWNsaWIvc2tlbGV0b24vc3JjL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3J1Y2xpYi9za2VsZXRvbi9zcmMvbGliL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFvQyxNQUFNLGVBQWUsQ0FBQztBQUVuRixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7Ozs7QUFNbEUsTUFBTSxPQUFPLGlCQUFpQjtJQU81QixJQUFhLFlBQVksQ0FBQyxLQUE4QjtRQUN0RCxJQUFHLEtBQUssRUFBQztZQUNQLGtDQUFrQztZQUNsQyxJQUFJLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRTlDLDJDQUEyQztZQUMzQyxNQUFNLGFBQWEsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLEdBQUcsS0FBSyxFQUFFLENBQUE7WUFDL0UsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUMzQztJQUNILENBQUM7SUFNRCxZQUFtQixlQUErQjtRQUEvQixvQkFBZSxHQUFmLGVBQWUsQ0FBZ0I7UUFsQmxELGFBQVEsR0FBRyxJQUFJLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQWNqQixxQkFBZ0IsR0FBRyxJQUFJLGVBQWUsQ0FBa0IsSUFBSSxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLENBQUM7UUFDMUcsVUFBSyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUdRLENBQUM7SUFDdEQsUUFBUTtJQUNSLENBQUM7SUFFRDs7O09BR0c7SUFDSCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBRyxPQUFPLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDLENBQUMsV0FBVyxFQUFDO1lBQ2pFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLGNBQWMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQ2xFO0lBQ0gsQ0FBQzs7K0dBbENVLGlCQUFpQjttR0FBakIsaUJBQWlCLCtJQ1Q5QiwweEVBa0RNOzRGRHpDTyxpQkFBaUI7a0JBTDdCLFNBQVM7K0JBQ0UsY0FBYztzR0FPZixXQUFXO3NCQUFuQixLQUFLO2dCQUlPLFlBQVk7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge1NrZWxldG9uT3B0aW9uc30gZnJvbSAnLi4vLi4vbW9kZWwvc2tlbGV0b25PcHRpb25zJztcclxuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0IH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IFNrZWxldG9uU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3NrZWxldG9uLnNlcnZpY2UnO1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3V4cC1za2VsZXRvbicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3NrZWxldG9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9za2VsZXRvbi5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2tlbGV0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XHJcblxyXG4gXHJcbiAgQElucHV0KCkgY3VzdG9tVGhlbWUhOiBzdHJpbmc7XHJcbiAgZGl2QXJyYXkgPSBuZXcgQXJyYXkoMTIpO1xyXG4gIFxyXG5cclxuICBASW5wdXQoKSBzZXQgcnVjSW5wdXREYXRhKHZhbHVlOlBhcnRpYWw8U2tlbGV0b25PcHRpb25zPil7XHJcbiAgICBpZih2YWx1ZSl7XHJcbiAgICAgIC8vdXBkYXRlIGRlZmF1bHQgdmFsdWUgZHluYW1pY2FsbHlcclxuICAgICAgdGhpcy5za2VsZXRvblNlcnZpY2Uuc2V0RGVmYXVsdE9wdGlvbnModmFsdWUpO1xyXG5cclxuICAgICAgLy9tZXJnZSB1cGRhdGVkIGRlZmF1bHRzIHdpdGggdGhlIG5ldyBpbnB1dFxyXG4gICAgICBjb25zdCBtZXJnZWRPcHRpb25zID0geyAuLi50aGlzLnNrZWxldG9uU2VydmljZS5nZXREZWZhdWx0T3B0aW9ucygpLCAuLi52YWx1ZSB9XHJcbiAgICAgIHRoaXMuaW5wdXREYXRhU3ViamVjdC5uZXh0KG1lcmdlZE9wdGlvbnMpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBpbnB1dERhdGFTdWJqZWN0ID0gbmV3IEJlaGF2aW9yU3ViamVjdDxTa2VsZXRvbk9wdGlvbnM+KHRoaXMuc2tlbGV0b25TZXJ2aWNlLmdldERlZmF1bHRPcHRpb25zKCkpOyBcclxuICBkYXRhJCA9IHRoaXMuaW5wdXREYXRhU3ViamVjdC5hc09ic2VydmFibGUoKTtcclxuXHJcblxyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBza2VsZXRvblNlcnZpY2U6U2tlbGV0b25TZXJ2aWNlKXsgfVxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogXHJcbiAgICogQHBhcmFtIGNoYW5nZXMgXHJcbiAgICovXHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyl7XHJcbiAgICBpZihjaGFuZ2VzWydydWNJbnB1dERhdGEnXSAmJiAhY2hhbmdlc1sncnVjSW5wdXREYXRhJ10uZmlyc3RDaGFuZ2Upe1xyXG4gICAgICB0aGlzLmlucHV0RGF0YVN1YmplY3QubmV4dChjaGFuZ2VzWydydWNJbnB1dERhdGEnXS5jdXJyZW50VmFsdWUpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbn1cclxuIiwiPGRpdiBbY2xhc3NdPVwiY3VzdG9tVGhlbWUgPyBjdXN0b21UaGVtZSA6ICcnXCIgKm5nSWY9XCJkYXRhJCB8IGFzeW5jIGFzIGRhdGFcIj5cclxuICAgPCEtLSBTa2VsZXRvbiBTdGFydCAtLT5cclxuICAgIDxkaXYgY2xhc3M9XCJza2VsZXRvbiBza2VsZXRvbi10ZXh0XCIgXHJcbiAgICBbY2xhc3NdPVwiZGF0YS5zaGFwZVwiIFxyXG4gICAgKm5nSWY9XCIhZGF0YT8uaXNMb2FkZXJcIiBcclxuICAgIFtzdHlsZS53aWR0aF09XCJkYXRhPy53aWR0aFwiIFxyXG4gICAgW3N0eWxlLmhlaWdodF09XCJkYXRhPy5oZWlnaHRcIlxyXG4gICAgW3N0eWxlLmJvcmRlclJhZGl1c109XCJkYXRhPy5ib3JkZXJSYWRpdXNcIlxyXG4gICAgW25nQ2xhc3NdPVwiZGF0YT8uY2xhc3NcIlxyXG4gICAgW21hdFRvb2x0aXBdPVwiZGF0YS50b29sdGlwVGV4dCA/PyAnJ1wiXHJcbiAgICBbbWF0VG9vbHRpcFBvc2l0aW9uXT1cImRhdGEudG9vbHRpcFBvc2l0aW9uID8/ICdhYm92ZSdcIlxyXG4gICAgPjwvZGl2PlxyXG48IS0tIFNrZWxldG9uIEVuZCAtLT5cclxuPCEtLSBMb2FkZXIgSFRNTCBTZWN0aW9uIHN0YXJ0LS0+XHJcbjxkaXYgKm5nSWY9XCJkYXRhLmlzTG9hZGVyICYmIGRhdGEubG9hZGVyUG9zaXRpb25cIj5cclxuICAgIDxkaXYgKm5nSWY9XCJkYXRhLmxvYWRlclBvc2l0aW9uID09ICdwYWdlJ1wiIGNsYXNzPVwicnVjLWxvYWRpbmcgcnVjLWxvYWQtc3Bpbm5lci1wYWdlXCI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInBhZ2VSZWY7IGNvbnRleHQ6IHRoaXNcIj48L25nLWNvbnRhaW5lcj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiAqbmdJZj1cImRhdGEubG9hZGVyUG9zaXRpb24gPT0gJ3NlY3Rpb24nXCIgY2xhc3M9XCJydWMtbG9hZGluZyBydWMtbG9hZC1zcGlubmVyLXNlY3Rpb25cIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwicGFnZVJlZjsgY29udGV4dDogdGhpc1wiPjwvbmctY29udGFpbmVyPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZGF0YS5sb2FkZXJQb3NpdGlvbiA9PSAnaW5saW5lJ1wiPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJpbmxpbmVSZWY7IGNvbnRleHQ6IHRoaXNcIj48L25nLWNvbnRhaW5lcj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImRhdGEubG9hZGVyUG9zaXRpb24gPT0gJ25ld2xpbmUnXCIgY2xhc3M9XCJuZXdsaW5lLWxvYWRcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaW5saW5lUmVmOyBjb250ZXh0OiB0aGlzXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuXHJcbiAgICA8bmctdGVtcGxhdGUgI3BhZ2VSZWY+XHJcbiAgICAgICAgPCEtLSB1c2UgaW4gbG9vcCAtLT5cclxuICAgICAgICAgPCEtLSA8ZGl2ICpuZ0Zvcj1cImxldCBfIG9mIGRpdkFycmF5XCI+XHJcbiAgICAgICAgIDwvZGl2PiAtLT5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibG9hZGVyXCI+PC9kaXY+XHJcblxyXG4gICAgICAgIDxpbWcgY2xhc3M9XCJzcGlubmVyLWxvZ29cIiAqbmdJZj1cImRhdGEubG9hZGVyU3Bpbm5lckxvZ29VcmxcIiBhbHQ9XCJMb2dvXCI+XHJcbiAgICAgICAgPHAgKm5nSWY9XCJkYXRhLmxvYWRlckN1c3RvbVRleHRcIiBjbGFzcz1cInNwaW5uZXItdGV4dFwiPnt7ZGF0YS5sb2FkZXJDdXN0b21UZXh0fX0uLi48L3A+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuICAgIDxuZy10ZW1wbGF0ZSAjaW5saW5lUmVmPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJsb2FkZXJcIj48L2Rpdj5cclxuXHJcbiAgICAgICAgPCEtLSA8ZGl2IGNsYXNzPVwicnVjLWxvYWRpbmcgcnVjLWxvYWQtc3Bpbm5lci1zbWFsbC1pbmxpbmVcIj5cclxuICAgICAgICAgICAgPGltZyBjbGFzcz1cInNwaW5uZXItbG9nb1wiICpuZ0lmPVwiZGF0YS5sb2FkZXJTcGlubmVyTG9nb1VybFwiIGFsdD1cIkxvZ29cIj5cclxuICAgICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBfIG9mIGRpdkFycmF5XCI+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgPC9kaXY+IC0tPlxyXG4gICAgICAgIDxwICpuZ0lmPVwiZGF0YS5sb2FkZXJDdXN0b21UZXh0XCIgY2xhc3M9XCJydWMtc3Bpbm5lci10ZXh0LWlubGluZVwiPnt7ZGF0YS5sb2FkZXJDdXN0b21UZXh0fX0uLi48L3A+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG48L2Rpdj5cclxuPCEtLSBMb2FkZXIgSFRNTCBzZWN0aW9uIGVuZCAtLT5cclxuPC9kaXY+Il19
@@ -1,3 +0,0 @@
1
- export class SkeletonOptions {
2
- }
3
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25PcHRpb25zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ydWNsaWIvc2tlbGV0b24vc3JjL21vZGVsL3NrZWxldG9uT3B0aW9ucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sZUFBZTtDQWUzQiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjbGFzcyBTa2VsZXRvbk9wdGlvbnN7XHJcbiAgICAvLyByZWN0YW5nbGUgLCByb3VuZGVkLXJlY3RhbmdsZSwgc3F1YXJlLCBjaXJjbGUsIFxyXG4vLyB0cmlhbmdsZSwgYXJyb3ctbGVmdCwgYXJyb3ctcmlnaHQsIGFycm93LXVwLCBhcnJvdy1kb3duXHJcbiAgICBzaGFwZT8gOiBhbnk7IC8vdGV4dCwgcmVjdGFuZ2xlLCByb3VuZGVkLCBTcXVhcmUsIENpcmNsZSwgVHJpYW5nbGUsIGxlZnQgQXJyb3csIHJpZ2h0ICwgdXAgYW5kIGRvd24gYXJyb3csIGxvYWRlclxyXG4gICAgd2lkdGg/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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjLWxpYi1za2VsZXRvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3NrZWxldG9uL3NyYy9ydWMtbGliLXNrZWxldG9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
@@ -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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3NrZWxldG9uL3NyYy9zZXJ2aWNlcy9za2VsZXRvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQW9CLE1BQU0sZUFBZSxDQUFDOztBQVE3RCxNQUFNLE9BQU8sZUFBZTtJQUd4QixvQ0FBb0M7SUFFcEM7UUFDRSxJQUFJLENBQUMsY0FBYyxHQUFHO1lBQ3BCLEtBQUssRUFBRSxRQUFRO1lBQ2YsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxFQUFFO1lBQ2hCLEtBQUssRUFBRSxFQUFFO1lBQ1QsT0FBTyxFQUFFLEtBQUs7WUFDZCxXQUFXLEVBQUcsRUFBRTtZQUNoQixlQUFlLEVBQUUsT0FBTztZQUN4QixRQUFRLEVBQUUsS0FBSztTQUNoQixDQUFBO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNILGlCQUFpQjtRQUNmLE9BQU8sRUFBQyxHQUFHLElBQUksQ0FBQyxjQUFjLEVBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsaUJBQWlCLENBQUMsVUFBb0M7UUFDcEQsSUFBSSxDQUFDLGNBQWMsR0FBRSxFQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxHQUFHLFVBQVUsRUFBQyxDQUFDO0lBRS9ELENBQUM7OzZHQWxDUSxlQUFlO2lIQUFmLGVBQWUsY0FGZCxNQUFNOzRGQUVQLGVBQWU7a0JBSDNCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJqZWN0LCBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHtTa2VsZXRvbk9wdGlvbnN9IGZyb20gJy4uL21vZGVsL3NrZWxldG9uT3B0aW9ucyc7XHJcbmltcG9ydCB7U2tlbGV0b25Db21wb25lbnR9IGZyb20gJy4uL2xpYi9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290JyxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNrZWxldG9uU2VydmljZSB7XHJcbiAgICBkZWZhdWx0T3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIC8vIHNrZWxldG9uT3B0aW9uczogU2tlbGV0b25PcHRpb25zO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgICB0aGlzLmRlZmF1bHRPcHRpb25zID0ge1xyXG4gICAgICAgIHNoYXBlOiAnY2lyY2xlJyxcclxuICAgICAgICB3aWR0aDogXCI1MHB4XCIsXHJcbiAgICAgICAgaGVpZ2h0OiBcIjUwcHhcIixcclxuICAgICAgICBib3JkZXJSYWRpdXM6ICcnLFxyXG4gICAgICAgIGNsYXNzOiAnJywgXHJcbiAgICAgICAgdG9vbHRpcDogZmFsc2UsXHJcbiAgICAgICAgdG9vbHRpcFRleHQgOiAnJyxcclxuICAgICAgICB0b29sdGlwUG9zaXRpb246ICdhYm92ZScsXHJcbiAgICAgICAgaXNMb2FkZXI6IGZhbHNlLFxyXG4gICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBnZXQgb3B0aW9uc1xyXG4gICAgICogQHJldHVybnMgZGVmYXVsdE9wdGlvbnNcclxuICAgICAqL1xyXG4gICAgZ2V0RGVmYXVsdE9wdGlvbnMoKTogU2tlbGV0b25PcHRpb25ze1xyXG4gICAgICByZXR1cm4gey4uLnRoaXMuZGVmYXVsdE9wdGlvbnN9O1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogc2V0IG9wdGlvbnNcclxuICAgICAqIEBwYXJhbSBuZXdPcHRpb25zIFxyXG4gICAgICovXHJcbiAgICBzZXREZWZhdWx0T3B0aW9ucyhuZXdPcHRpb25zOiBQYXJ0aWFsPFNrZWxldG9uT3B0aW9ucz4pOiB2b2lke1xyXG4gICAgICB0aGlzLmRlZmF1bHRPcHRpb25zID17Li4udGhpcy5kZWZhdWx0T3B0aW9ucywgLi4ubmV3T3B0aW9uc307XHJcblxyXG4gICAgfVxyXG59Il19
@@ -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-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-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":["../../../../../libs/ruclib/skeleton/src/services/skeleton.service.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.html","../../../../../libs/ruclib/skeleton/src/lib/ruclib-skeleton.module.ts","../../../../../libs/ruclib/skeleton/src/model/skeletonOptions.ts","../../../../../libs/ruclib/skeleton/src/ruc-lib-skeleton.ts"],"sourcesContent":["import { Injectable, ViewContainerRef } from '@angular/core';\r\nimport { Observable, Subject, BehaviorSubject } from 'rxjs';\r\nimport {SkeletonOptions} from '../model/skeletonOptions';\r\nimport {SkeletonComponent} from '../lib/skeleton/skeleton.component';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class SkeletonService {\r\n defaultOptions: SkeletonOptions;\r\n\r\n // skeletonOptions: SkeletonOptions;\r\n\r\n constructor() {\r\n this.defaultOptions = {\r\n shape: 'circle',\r\n width: \"50px\",\r\n height: \"50px\",\r\n borderRadius: '',\r\n class: '', \r\n tooltip: false,\r\n tooltipText : '',\r\n tooltipPosition: 'above',\r\n isLoader: false,\r\n }\r\n }\r\n\r\n /**\r\n * get options\r\n * @returns defaultOptions\r\n */\r\n getDefaultOptions(): SkeletonOptions{\r\n return {...this.defaultOptions};\r\n }\r\n\r\n /**\r\n * set options\r\n * @param newOptions \r\n */\r\n setDefaultOptions(newOptions: Partial<SkeletonOptions>): void{\r\n this.defaultOptions ={...this.defaultOptions, ...newOptions};\r\n\r\n }\r\n}","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport {SkeletonOptions} from '../../model/skeletonOptions';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { SkeletonService } from '../../services/skeleton.service';\r\n@Component({\r\n selector: 'uxp-skeleton',\r\n templateUrl: './skeleton.component.html',\r\n styleUrls: ['./skeleton.component.scss'],\r\n})\r\nexport class SkeletonComponent implements OnInit, OnChanges {\r\n\r\n \r\n @Input() customTheme!: string;\r\n divArray = new Array(12);\r\n \r\n\r\n @Input() set rucInputData(value:Partial<SkeletonOptions>){\r\n if(value){\r\n //update default value dynamically\r\n this.skeletonService.setDefaultOptions(value);\r\n\r\n //merge updated defaults with the new input\r\n const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value }\r\n this.inputDataSubject.next(mergedOptions);\r\n }\r\n }\r\n\r\n private inputDataSubject = new BehaviorSubject<SkeletonOptions>(this.skeletonService.getDefaultOptions()); \r\n data$ = this.inputDataSubject.asObservable();\r\n\r\n\r\n constructor(public skeletonService:SkeletonService){ }\r\n ngOnInit(): void {\r\n }\r\n\r\n /**\r\n * \r\n * @param changes \r\n */\r\n ngOnChanges(changes: SimpleChanges){\r\n if(changes['rucInputData'] && !changes['rucInputData'].firstChange){\r\n this.inputDataSubject.next(changes['rucInputData'].currentValue);\r\n }\r\n }\r\n\r\n}\r\n","<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n <!-- Skeleton Start -->\r\n <div class=\"skeleton skeleton-text\" \r\n [class]=\"data.shape\" \r\n *ngIf=\"!data?.isLoader\" \r\n [style.width]=\"data?.width\" \r\n [style.height]=\"data?.height\"\r\n [style.borderRadius]=\"data?.borderRadius\"\r\n [ngClass]=\"data?.class\"\r\n [matTooltip]=\"data.tooltipText ?? ''\"\r\n [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #pageRef>\r\n <!-- use in loop -->\r\n <!-- <div *ngFor=\"let _ of divArray\">\r\n </div> -->\r\n <div class=\"loader\"></div>\r\n\r\n <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n </ng-template>\r\n\r\n <ng-template #inlineRef>\r\n <div class=\"loader\"></div>\r\n\r\n <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n <div *ngFor=\"let _ of divArray\">\r\n </div>\r\n </div> -->\r\n <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SkeletonComponent } from './skeleton/skeleton.component';\r\nimport { SkeletonService } from '../services/skeleton.service';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\n@NgModule({\r\n imports: [CommonModule,MatTooltipModule ],\r\n declarations: [SkeletonComponent],\r\n exports: [SkeletonComponent],\r\n providers:[SkeletonService]\r\n})\r\nexport class RuclibSkeletonModule {}\r\n","export class SkeletonOptions{\r\n // rectangle , rounded-rectangle, square, circle, \r\n// triangle, arrow-left, arrow-right, arrow-up, arrow-down\r\n shape? : any; //text, rectangle, rounded, Square, Circle, Triangle, left Arrow, right , up and down arrow, loader\r\n width?: any; //To set the width of skeleton not applicable to loader\r\n height?: any; //To set the height of skeleton not applicable to loader\r\n borderRadius?: any; //To set the borderRadius of skeleton not applicable to loader\r\n class?: any; //To set a custom class of skeleton not applicable to loader\r\n tooltip?: boolean; //To set a tooltip of skeleton not applicable to loader\r\n tooltipText? : string; //To set a tooltip text of skeleton not applicable to loader\r\n tooltipPosition?: 'above' | 'below' | 'left' | 'right';\r\n isLoader?: boolean; // true , fasle when loader is selected\r\n loaderPosition?: string //'page' | 'section' | 'inline' | 'newline'; // loader position\r\n loaderCustomText?: string; // loader custom text\r\n loaderSpinnerLogoUrl?: string; // loader image if user want\r\n}\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SkeletonService"],"mappings":"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"}
@@ -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-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-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":["../../../../../libs/ruclib/skeleton/src/services/skeleton.service.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.ts","../../../../../libs/ruclib/skeleton/src/lib/skeleton/skeleton.component.html","../../../../../libs/ruclib/skeleton/src/lib/ruclib-skeleton.module.ts","../../../../../libs/ruclib/skeleton/src/model/skeletonOptions.ts","../../../../../libs/ruclib/skeleton/src/ruc-lib-skeleton.ts"],"sourcesContent":["import { Injectable, ViewContainerRef } from '@angular/core';\r\nimport { Observable, Subject, BehaviorSubject } from 'rxjs';\r\nimport {SkeletonOptions} from '../model/skeletonOptions';\r\nimport {SkeletonComponent} from '../lib/skeleton/skeleton.component';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class SkeletonService {\r\n defaultOptions: SkeletonOptions;\r\n\r\n // skeletonOptions: SkeletonOptions;\r\n\r\n constructor() {\r\n this.defaultOptions = {\r\n shape: 'circle',\r\n width: \"50px\",\r\n height: \"50px\",\r\n borderRadius: '',\r\n class: '', \r\n tooltip: false,\r\n tooltipText : '',\r\n tooltipPosition: 'above',\r\n isLoader: false,\r\n }\r\n }\r\n\r\n /**\r\n * get options\r\n * @returns defaultOptions\r\n */\r\n getDefaultOptions(): SkeletonOptions{\r\n return {...this.defaultOptions};\r\n }\r\n\r\n /**\r\n * set options\r\n * @param newOptions \r\n */\r\n setDefaultOptions(newOptions: Partial<SkeletonOptions>): void{\r\n this.defaultOptions ={...this.defaultOptions, ...newOptions};\r\n\r\n }\r\n}","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport {SkeletonOptions} from '../../model/skeletonOptions';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { SkeletonService } from '../../services/skeleton.service';\r\n@Component({\r\n selector: 'uxp-skeleton',\r\n templateUrl: './skeleton.component.html',\r\n styleUrls: ['./skeleton.component.scss'],\r\n})\r\nexport class SkeletonComponent implements OnInit, OnChanges {\r\n\r\n \r\n @Input() customTheme!: string;\r\n divArray = new Array(12);\r\n \r\n\r\n @Input() set rucInputData(value:Partial<SkeletonOptions>){\r\n if(value){\r\n //update default value dynamically\r\n this.skeletonService.setDefaultOptions(value);\r\n\r\n //merge updated defaults with the new input\r\n const mergedOptions = { ...this.skeletonService.getDefaultOptions(), ...value }\r\n this.inputDataSubject.next(mergedOptions);\r\n }\r\n }\r\n\r\n private inputDataSubject = new BehaviorSubject<SkeletonOptions>(this.skeletonService.getDefaultOptions()); \r\n data$ = this.inputDataSubject.asObservable();\r\n\r\n\r\n constructor(public skeletonService:SkeletonService){ }\r\n ngOnInit(): void {\r\n }\r\n\r\n /**\r\n * \r\n * @param changes \r\n */\r\n ngOnChanges(changes: SimpleChanges){\r\n if(changes['rucInputData'] && !changes['rucInputData'].firstChange){\r\n this.inputDataSubject.next(changes['rucInputData'].currentValue);\r\n }\r\n }\r\n\r\n}\r\n","<div [class]=\"customTheme ? customTheme : ''\" *ngIf=\"data$ | async as data\">\r\n <!-- Skeleton Start -->\r\n <div class=\"skeleton skeleton-text\" \r\n [class]=\"data.shape\" \r\n *ngIf=\"!data?.isLoader\" \r\n [style.width]=\"data?.width\" \r\n [style.height]=\"data?.height\"\r\n [style.borderRadius]=\"data?.borderRadius\"\r\n [ngClass]=\"data?.class\"\r\n [matTooltip]=\"data.tooltipText ?? ''\"\r\n [matTooltipPosition]=\"data.tooltipPosition ?? 'above'\"\r\n ></div>\r\n<!-- Skeleton End -->\r\n<!-- Loader HTML Section start-->\r\n<div *ngIf=\"data.isLoader && data.loaderPosition\">\r\n <div *ngIf=\"data.loaderPosition == 'page'\" class=\"ruc-loading ruc-load-spinner-page\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n <div *ngIf=\"data.loaderPosition == 'section'\" class=\"ruc-loading ruc-load-spinner-section\">\r\n <ng-container *ngTemplateOutlet=\"pageRef; context: this\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data.loaderPosition == 'inline'\">\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data.loaderPosition == 'newline'\" class=\"newline-load\">\r\n <ng-container *ngTemplateOutlet=\"inlineRef; context: this\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #pageRef>\r\n <!-- use in loop -->\r\n <!-- <div *ngFor=\"let _ of divArray\">\r\n </div> -->\r\n <div class=\"loader\"></div>\r\n\r\n <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n <p *ngIf=\"data.loaderCustomText\" class=\"spinner-text\">{{data.loaderCustomText}}...</p>\r\n </ng-template>\r\n\r\n <ng-template #inlineRef>\r\n <div class=\"loader\"></div>\r\n\r\n <!-- <div class=\"ruc-loading ruc-load-spinner-small-inline\">\r\n <img class=\"spinner-logo\" *ngIf=\"data.loaderSpinnerLogoUrl\" alt=\"Logo\">\r\n <div *ngFor=\"let _ of divArray\">\r\n </div>\r\n </div> -->\r\n <p *ngIf=\"data.loaderCustomText\" class=\"ruc-spinner-text-inline\">{{data.loaderCustomText}}...</p>\r\n </ng-template>\r\n</div>\r\n<!-- Loader HTML section end -->\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SkeletonComponent } from './skeleton/skeleton.component';\r\nimport { SkeletonService } from '../services/skeleton.service';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\n@NgModule({\r\n imports: [CommonModule,MatTooltipModule ],\r\n declarations: [SkeletonComponent],\r\n exports: [SkeletonComponent],\r\n providers:[SkeletonService]\r\n})\r\nexport class RuclibSkeletonModule {}\r\n","export class SkeletonOptions{\r\n // rectangle , rounded-rectangle, square, circle, \r\n// triangle, arrow-left, arrow-right, arrow-up, arrow-down\r\n shape? : any; //text, rectangle, rounded, Square, Circle, Triangle, left Arrow, right , up and down arrow, loader\r\n width?: any; //To set the width of skeleton not applicable to loader\r\n height?: any; //To set the height of skeleton not applicable to loader\r\n borderRadius?: any; //To set the borderRadius of skeleton not applicable to loader\r\n class?: any; //To set a custom class of skeleton not applicable to loader\r\n tooltip?: boolean; //To set a tooltip of skeleton not applicable to loader\r\n tooltipText? : string; //To set a tooltip text of skeleton not applicable to loader\r\n tooltipPosition?: 'above' | 'below' | 'left' | 'right';\r\n isLoader?: boolean; // true , fasle when loader is selected\r\n loaderPosition?: string //'page' | 'section' | 'inline' | 'newline'; // loader position\r\n loaderCustomText?: string; // loader custom text\r\n loaderSpinnerLogoUrl?: string; // loader image if user want\r\n}\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SkeletonService"],"mappings":";;;;;;;;MAQa,eAAe,CAAA;;AAKxB,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,cAAc,GAAG;AACpB,YAAA,KAAK,EAAE,QAAQ;AACf,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,KAAK,EAAE,EAAE;AACT,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,WAAW,EAAG,EAAE;AAChB,YAAA,eAAe,EAAE,OAAO;AACxB,YAAA,QAAQ,EAAE,KAAK;SAChB,CAAA;KACF;AAED;;;AAGG;IACH,iBAAiB,GAAA;AACf,QAAA,OAAO,EAAC,GAAG,IAAI,CAAC,cAAc,EAAC,CAAC;KACjC;AAED;;;AAGG;AACH,IAAA,iBAAiB,CAAC,UAAoC,EAAA;AACpD,QAAA,IAAI,CAAC,cAAc,GAAE,EAAC,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,UAAU,EAAC,CAAC;KAE9D;;6GAlCQ,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAf,eAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,cAFd,MAAM,EAAA,CAAA,CAAA;4FAEP,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA,CAAA;;;MCEY,iBAAiB,CAAA;IAO5B,IAAa,YAAY,CAAC,KAA8B,EAAA;AACtD,QAAA,IAAG,KAAK,EAAC;;AAEP,YAAA,IAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;;AAG9C,YAAA,MAAM,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,EAAE,GAAG,KAAK,EAAE,CAAA;AAC/E,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AAC3C,SAAA;KACF;AAMD,IAAA,WAAA,CAAmB,eAA+B,EAAA;QAA/B,IAAe,CAAA,eAAA,GAAf,eAAe,CAAgB;AAlBlD,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC;QAcjB,IAAgB,CAAA,gBAAA,GAAG,IAAI,eAAe,CAAkB,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC1G,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC;KAGS;IACtD,QAAQ,GAAA;KACP;AAED;;;AAGG;AACH,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAG,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,WAAW,EAAC;AACjE,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC;AAClE,SAAA;KACF;;+GAlCU,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,iBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,+ICT9B,0xEAkDM,EAAA,MAAA,EAAA,CAAA,koIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;4FDzCO,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;+BACE,cAAc,EAAA,QAAA,EAAA,0xEAAA,EAAA,MAAA,EAAA,CAAA,koIAAA,CAAA,EAAA,CAAA;mGAOf,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAIO,YAAY,EAAA,CAAA;sBAAxB,KAAK;;;MEJK,oBAAoB,CAAA;;kHAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAApB,oBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,iBAJhB,iBAAiB,CAAA,EAAA,OAAA,EAAA,CADtB,YAAY,EAAC,gBAAgB,aAE7B,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAGhB,oBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,aAFrB,CAAC,eAAe,CAAC,EAHjB,OAAA,EAAA,CAAA,YAAY,EAAC,gBAAgB,CAAA,EAAA,CAAA,CAAA;4FAK5B,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAC,gBAAgB,CAAE;oBACzC,YAAY,EAAE,CAAC,iBAAiB,CAAC;oBACjC,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,SAAS,EAAC,CAAC,eAAe,CAAC;AAC5B,iBAAA,CAAA;;;MCXY,eAAe,CAAA;AAe3B;;ACfD;;AAEG;;;;"}
@@ -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-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
- }