@skeletonizer/angular 0.0.23-alpha.0 → 1.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 +1 -2
- package/package.json +23 -20
- package/dist/skeletonizer/README.md +0 -7
- package/dist/skeletonizer/esm2022/lib/skeletonize.directive.mjs +0 -24
- package/dist/skeletonizer/esm2022/lib/skeletonizer.skeleton.component.mjs +0 -35
- package/dist/skeletonizer/esm2022/public-api.mjs +0 -5
- package/dist/skeletonizer/esm2022/skeletonizer-angular.mjs +0 -5
- package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs +0 -66
- package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs.map +0 -1
- package/dist/skeletonizer/index.d.ts +0 -5
- package/dist/skeletonizer/lib/skeletonize.directive.d.ts +0 -11
- package/dist/skeletonizer/lib/skeletonizer.skeleton.component.d.ts +0 -14
- package/dist/skeletonizer/public-api.d.ts +0 -1
package/README.md
CHANGED
|
@@ -248,13 +248,12 @@ export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> im
|
|
|
248
248
|
### Color Scheme
|
|
249
249
|
Generally speaking, you shouldn't need to adjust the color scheme of the skeletonized component in most cases. However, should you need to, the color scheme of the skeletonized views can be customized by providing the `colorScheme` property to the `SkeletonizerSkeletonComponent`.
|
|
250
250
|
|
|
251
|
-
For more details about the `colorScheme` property, see the [
|
|
251
|
+
For more details about the `colorScheme` property, see the [colorSchema](/packages/utils/README.md#colorschema) section.
|
|
252
252
|
|
|
253
253
|
## Contributing
|
|
254
254
|
For Angular adapter-specific contributions, run the following commands to get started:
|
|
255
255
|
- `npm install`
|
|
256
256
|
- adjust the code in the `packages/angular` directory
|
|
257
|
-
- run `npm run build` in the `packages/angular` directory
|
|
258
257
|
- adjust the code in the `packages/angular/src/app` directory to make sure the changes can easily be seen in the example app
|
|
259
258
|
- `npm run dev` in the `packages/angular` directory to start the example app
|
|
260
259
|
- update readme file in the `packages/angular` directory
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skeletonizer/angular",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "The way to skeletonize your Angular components",
|
|
5
5
|
"author": "Luka Varga",
|
|
6
6
|
"license": "MIT",
|
|
@@ -41,12 +41,12 @@
|
|
|
41
41
|
"test": "ng test skeletonizer --no-watch",
|
|
42
42
|
"test-browser-run": "ng test skeletonizer --browsers chrome",
|
|
43
43
|
"test-watch": "ng test skeletonizer --watch",
|
|
44
|
-
"coverage": "ng test skeletonizer --code-coverage --no-watch",
|
|
44
|
+
"coverage": "ng test skeletonizer --code-coverage --no-watch --browsers=ChromeHeadless",
|
|
45
45
|
"coverage-watch": "ng test skeletonizer --code-coverage",
|
|
46
46
|
"style-lint": "stylelint '**/*.?(css|scss)' --color",
|
|
47
47
|
"style-lintfix": "stylelint '**/*.?(css|scss)' --color --fix",
|
|
48
|
-
"lint": "eslint
|
|
49
|
-
"lintfix": "npm run style-lintfix && eslint
|
|
48
|
+
"lint": "eslint projects/skeletonizer/src/ && eslint src/ && npm run style-lint",
|
|
49
|
+
"lintfix": "npm run style-lintfix && eslint projects/skeletonizer/src/ --fix && eslint src/ --fix",
|
|
50
50
|
"lint-staged": "lint-staged"
|
|
51
51
|
},
|
|
52
52
|
"lint-staged": {
|
|
@@ -62,31 +62,34 @@
|
|
|
62
62
|
"@angular/platform-browser": "^18.0.0",
|
|
63
63
|
"@angular/platform-browser-dynamic": "^18.0.0",
|
|
64
64
|
"@angular/router": "^18.0.0",
|
|
65
|
+
"@skeletonizer/utils": "^1.1.0",
|
|
65
66
|
"rxjs": "~7.8.1",
|
|
66
67
|
"tslib": "^2.6.2",
|
|
67
68
|
"zone.js": "~0.14.4"
|
|
68
69
|
},
|
|
69
70
|
"devDependencies": {
|
|
70
|
-
"@angular-devkit/build-angular": "^18.2.
|
|
71
|
-
"@angular-eslint/builder": "18.
|
|
72
|
-
"@angular-eslint/eslint-plugin": "18.
|
|
73
|
-
"@angular-eslint/eslint-plugin-template": "18.
|
|
74
|
-
"@angular-eslint/schematics": "18.
|
|
75
|
-
"@angular-eslint/template-parser": "18.
|
|
76
|
-
"@angular/cli": "~18.2.
|
|
77
|
-
"@angular/compiler-cli": "^18.2.
|
|
78
|
-
"@
|
|
79
|
-
"@
|
|
80
|
-
"@typescript-eslint/
|
|
81
|
-
"eslint": "^8.
|
|
82
|
-
"
|
|
83
|
-
"
|
|
71
|
+
"@angular-devkit/build-angular": "^18.2.11",
|
|
72
|
+
"@angular-eslint/builder": "18.4.0",
|
|
73
|
+
"@angular-eslint/eslint-plugin": "18.4.0",
|
|
74
|
+
"@angular-eslint/eslint-plugin-template": "18.4.0",
|
|
75
|
+
"@angular-eslint/schematics": "18.4.0",
|
|
76
|
+
"@angular-eslint/template-parser": "18.4.0",
|
|
77
|
+
"@angular/cli": "~18.2.11",
|
|
78
|
+
"@angular/compiler-cli": "^18.2.10",
|
|
79
|
+
"@skeletonizer/utils": "^1.1.0",
|
|
80
|
+
"@types/jasmine": "~5.1.4",
|
|
81
|
+
"@typescript-eslint/eslint-plugin": "^8.12.2",
|
|
82
|
+
"@typescript-eslint/parser": "^8.12.2",
|
|
83
|
+
"angular-eslint": "^18.4.0",
|
|
84
|
+
"eslint": "^9.14.0",
|
|
85
|
+
"jasmine-core": "~5.4.0",
|
|
86
|
+
"karma": "~6.4.4",
|
|
84
87
|
"karma-chrome-launcher": "~3.2.0",
|
|
85
88
|
"karma-coverage": "~2.2.1",
|
|
86
89
|
"karma-jasmine": "~5.1.0",
|
|
87
90
|
"karma-jasmine-html-reporter": "~2.1.0",
|
|
88
91
|
"ng-packagr": "^18.2.1",
|
|
89
|
-
"typescript": "~5.4
|
|
92
|
+
"typescript": "~5.5.4"
|
|
90
93
|
},
|
|
91
|
-
"gitHead": "
|
|
94
|
+
"gitHead": "1cc1b5c8a71f0f2490f555edf700c238a64df3d1"
|
|
92
95
|
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
# @skeletonizer/angular
|
|
2
|
-
This is the Angular adapter for Skeletonizer. It provides a simple way to create skeletonized views for your Angular application.
|
|
3
|
-
|
|
4
|
-
## Installation
|
|
5
|
-
To install the package, run the following command:
|
|
6
|
-
`npm install @skeletonizer/angular @skeletonizer/utils --save`
|
|
7
|
-
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Directive, Input } from '@angular/core';
|
|
2
|
-
import { SkeletonDirective } from '@skeletonizer/utils';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
export class SkeletonizeDirective {
|
|
5
|
-
constructor(el) {
|
|
6
|
-
this.el = el;
|
|
7
|
-
}
|
|
8
|
-
ngAfterViewInit() {
|
|
9
|
-
SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema);
|
|
10
|
-
}
|
|
11
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: SkeletonizeDirective, isStandalone: true, selector: "[skeletonize]", inputs: { colorSchema: ["skeletonize", "colorSchema"] }, ngImport: i0 }); }
|
|
13
|
-
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizeDirective, decorators: [{
|
|
15
|
-
type: Directive,
|
|
16
|
-
args: [{
|
|
17
|
-
selector: '[skeletonize]',
|
|
18
|
-
standalone: true,
|
|
19
|
-
}]
|
|
20
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { colorSchema: [{
|
|
21
|
-
type: Input,
|
|
22
|
-
args: [{ alias: 'skeletonize' }]
|
|
23
|
-
}] } });
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25pemUuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvc2tlbGV0b25pemVyL3NyYy9saWIvc2tlbGV0b25pemUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFjLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RSxPQUFPLEVBQTRCLGlCQUFpQixFQUFFLE1BQU0scUJBQXFCLENBQUM7O0FBTWxGLE1BQU0sT0FBTyxvQkFBb0I7SUFHL0IsWUFDbUIsRUFBYztRQUFkLE9BQUUsR0FBRixFQUFFLENBQVk7SUFDOUIsQ0FBQztJQUVHLGVBQWU7UUFDcEIsaUJBQWlCLENBQUMsNEJBQTRCLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQzFGLENBQUM7OEdBVFUsb0JBQW9CO2tHQUFwQixvQkFBb0I7OzJGQUFwQixvQkFBb0I7a0JBSmhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjsrRUFFeUMsV0FBVztzQkFBbEQsS0FBSzt1QkFBQyxFQUFFLEtBQUssRUFBRSxhQUFhLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJU2tlbGV0b25pemVyQ29sb3JTY2hlbWEsIFNrZWxldG9uRGlyZWN0aXZlIH0gZnJvbSAnQHNrZWxldG9uaXplci91dGlscyc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tza2VsZXRvbml6ZV0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBTa2VsZXRvbml6ZURpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBASW5wdXQoeyBhbGlhczogJ3NrZWxldG9uaXplJyB9KSBwdWJsaWMgY29sb3JTY2hlbWE6IElTa2VsZXRvbml6ZXJDb2xvclNjaGVtYSB8IHVuZGVmaW5lZDtcblxuICBwdWJsaWMgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSByZWFkb25seSBlbDogRWxlbWVudFJlZixcbiAgKSB7fVxuXG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgU2tlbGV0b25EaXJlY3RpdmUuc2tlbGV0b25pemVQcm9qZWN0ZWRUZW1wbGF0ZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHRoaXMuY29sb3JTY2hlbWEpO1xuICB9XG59XG4iXX0=
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
|
|
2
|
-
import { SkeletonAdapterComponent } from '@skeletonizer/utils';
|
|
3
|
-
import { SkeletonizeDirective } from './skeletonize.directive';
|
|
4
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
export class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
|
|
7
|
-
set configInput(config) {
|
|
8
|
-
this.config = config;
|
|
9
|
-
this.setupModels();
|
|
10
|
-
}
|
|
11
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizerSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SkeletonizerSkeletonComponent, isStandalone: true, selector: "skeletonizer-skeleton", inputs: { showSkeleton: "showSkeleton", scope: "scope", colorSchema: "colorSchema", configInput: ["config", "configInput"] }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n", styles: ["[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}skeletonizer-skeleton{display:contents}\n"], dependencies: [{ kind: "directive", type: SkeletonizeDirective, selector: "[skeletonize]", inputs: ["skeletonize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
13
|
-
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
|
|
15
|
-
type: Component,
|
|
16
|
-
args: [{ selector: 'skeletonizer-skeleton', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
|
|
17
|
-
SkeletonizeDirective,
|
|
18
|
-
NgTemplateOutlet,
|
|
19
|
-
], template: "@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n", styles: ["[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}skeletonizer-skeleton{display:contents}\n"] }]
|
|
20
|
-
}], propDecorators: { templateRef: [{
|
|
21
|
-
type: ContentChild,
|
|
22
|
-
args: [TemplateRef]
|
|
23
|
-
}], showSkeleton: [{
|
|
24
|
-
type: Input,
|
|
25
|
-
args: [{ required: true }]
|
|
26
|
-
}], scope: [{
|
|
27
|
-
type: Input,
|
|
28
|
-
args: [{ required: true }]
|
|
29
|
-
}], colorSchema: [{
|
|
30
|
-
type: Input
|
|
31
|
-
}], configInput: [{
|
|
32
|
-
type: Input,
|
|
33
|
-
args: [{ alias: 'config', required: true }]
|
|
34
|
-
}] } });
|
|
35
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3NrZWxldG9uaXplci9zcmMvbGliL3NrZWxldG9uaXplci5za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9za2VsZXRvbml6ZXIvc3JjL2xpYi9za2VsZXRvbml6ZXIuc2tlbGV0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRixPQUFPLEVBQW9DLHdCQUF3QixFQUFpQixNQUFNLHFCQUFxQixDQUFDO0FBQ2hILE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQWFuRCxNQUFNLE9BQU8sNkJBQWlFLFNBQVEsd0JBQTJCO0lBTy9HLElBQXVELFdBQVcsQ0FBQyxNQUF3QjtRQUN6RixJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUVyQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQzs4R0FYVSw2QkFBNkI7a0dBQTdCLDZCQUE2Qix3UEFDMUIsV0FBVyx1RUNqQjNCLDBWQVNBLGlxQkRHSSxvQkFBb0IsbUZBQ3BCLGdCQUFnQjs7MkZBR1AsNkJBQTZCO2tCQVh6QyxTQUFTOytCQUNFLHVCQUF1QixpQkFHbEIsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1A7d0JBQ1Asb0JBQW9CO3dCQUNwQixnQkFBZ0I7cUJBQ2pCOzhCQUcwQyxXQUFXO3NCQUFyRCxZQUFZO3VCQUFDLFdBQVc7Z0JBRVMsWUFBWTtzQkFBN0MsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1MsS0FBSztzQkFBdEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1QsV0FBVztzQkFBMUIsS0FBSztnQkFFaUQsV0FBVztzQkFBakUsS0FBSzt1QkFBQyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCwgVGVtcGxhdGVSZWYsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJU2tlbGV0b25pemVyQ29sb3JTY2hlbWEsIFNjaGVtYSwgU2tlbGV0b25BZGFwdGVyQ29tcG9uZW50LCBUU2NoZW1hQ29uZmlnIH0gZnJvbSAnQHNrZWxldG9uaXplci91dGlscyc7XG5pbXBvcnQgeyBTa2VsZXRvbml6ZURpcmVjdGl2ZSB9IGZyb20gJy4vc2tlbGV0b25pemUuZGlyZWN0aXZlJztcbmltcG9ydCB7IE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza2VsZXRvbml6ZXItc2tlbGV0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vc2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBTa2VsZXRvbml6ZURpcmVjdGl2ZSxcbiAgICBOZ1RlbXBsYXRlT3V0bGV0LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa2VsZXRvbml6ZXJTa2VsZXRvbkNvbXBvbmVudDxUIGV4dGVuZHMgb2JqZWN0LCBTY29wZSBleHRlbmRzIFQ+IGV4dGVuZHMgU2tlbGV0b25BZGFwdGVyQ29tcG9uZW50PFQ+IHtcbiAgQENvbnRlbnRDaGlsZChUZW1wbGF0ZVJlZikgcHVibGljIHJlYWRvbmx5IHRlbXBsYXRlUmVmITogVGVtcGxhdGVSZWY8eyAkaW1wbGljaXQ6IFNjaGVtYTxUPiB8IFNjb3BlIH0+O1xuXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyBzaG93U2tlbGV0b24hOiBib29sZWFuO1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBwdWJsaWMgc2NvcGUhOiBTY29wZTtcbiAgQElucHV0KCkgcHVibGljIGNvbG9yU2NoZW1hPzogSVNrZWxldG9uaXplckNvbG9yU2NoZW1hO1xuXG4gIEBJbnB1dCh7IGFsaWFzOiAnY29uZmlnJywgcmVxdWlyZWQ6IHRydWUgfSkgcHVibGljIHNldCBjb25maWdJbnB1dChjb25maWc6IFRTY2hlbWFDb25maWc8VD4pIHtcbiAgICB0aGlzLmNvbmZpZyA9IGNvbmZpZztcblxuICAgIHRoaXMuc2V0dXBNb2RlbHMoKTtcbiAgfVxufVxuIiwiQGlmIChzaG93U2tlbGV0b24pIHtcbiAgQGZvciAobW9kZWwgb2Ygdmlld01vZGVsczsgdHJhY2sgbW9kZWwudXVpZCkge1xuICAgIDxkaXYgW3NrZWxldG9uaXplXT1cImNvbG9yU2NoZW1hXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBtb2RlbCB9XCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIH1cbn0gQGVsc2Uge1xuICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBzY29wZSB9XCI+PC9uZy1jb250YWluZXI+XG59XG4iXX0=
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Public API Surface of skeletonizer
|
|
3
|
-
*/
|
|
4
|
-
export * from './lib/skeletonizer.skeleton.component';
|
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3NrZWxldG9uaXplci9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsdUNBQXVDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIHNrZWxldG9uaXplclxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3NrZWxldG9uaXplci5za2VsZXRvbi5jb21wb25lbnQnO1xuIl19
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Generated bundle index. Do not edit.
|
|
3
|
-
*/
|
|
4
|
-
export * from './public-api';
|
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25pemVyLWFuZ3VsYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9za2VsZXRvbml6ZXIvc3JjL3NrZWxldG9uaXplci1hbmd1bGFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Input, TemplateRef, Component, ViewEncapsulation, ContentChild } from '@angular/core';
|
|
3
|
-
import { SkeletonDirective, SkeletonAdapterComponent } from '@skeletonizer/utils';
|
|
4
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
5
|
-
|
|
6
|
-
class SkeletonizeDirective {
|
|
7
|
-
constructor(el) {
|
|
8
|
-
this.el = el;
|
|
9
|
-
}
|
|
10
|
-
ngAfterViewInit() {
|
|
11
|
-
SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema);
|
|
12
|
-
}
|
|
13
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: SkeletonizeDirective, isStandalone: true, selector: "[skeletonize]", inputs: { colorSchema: ["skeletonize", "colorSchema"] }, ngImport: i0 }); }
|
|
15
|
-
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizeDirective, decorators: [{
|
|
17
|
-
type: Directive,
|
|
18
|
-
args: [{
|
|
19
|
-
selector: '[skeletonize]',
|
|
20
|
-
standalone: true,
|
|
21
|
-
}]
|
|
22
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { colorSchema: [{
|
|
23
|
-
type: Input,
|
|
24
|
-
args: [{ alias: 'skeletonize' }]
|
|
25
|
-
}] } });
|
|
26
|
-
|
|
27
|
-
class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
|
|
28
|
-
set configInput(config) {
|
|
29
|
-
this.config = config;
|
|
30
|
-
this.setupModels();
|
|
31
|
-
}
|
|
32
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizerSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SkeletonizerSkeletonComponent, isStandalone: true, selector: "skeletonizer-skeleton", inputs: { showSkeleton: "showSkeleton", scope: "scope", colorSchema: "colorSchema", configInput: ["config", "configInput"] }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n", styles: ["[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}skeletonizer-skeleton{display:contents}\n"], dependencies: [{ kind: "directive", type: SkeletonizeDirective, selector: "[skeletonize]", inputs: ["skeletonize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
34
|
-
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
|
|
36
|
-
type: Component,
|
|
37
|
-
args: [{ selector: 'skeletonizer-skeleton', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
|
|
38
|
-
SkeletonizeDirective,
|
|
39
|
-
NgTemplateOutlet,
|
|
40
|
-
], template: "@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n", styles: ["[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}skeletonizer-skeleton{display:contents}\n"] }]
|
|
41
|
-
}], propDecorators: { templateRef: [{
|
|
42
|
-
type: ContentChild,
|
|
43
|
-
args: [TemplateRef]
|
|
44
|
-
}], showSkeleton: [{
|
|
45
|
-
type: Input,
|
|
46
|
-
args: [{ required: true }]
|
|
47
|
-
}], scope: [{
|
|
48
|
-
type: Input,
|
|
49
|
-
args: [{ required: true }]
|
|
50
|
-
}], colorSchema: [{
|
|
51
|
-
type: Input
|
|
52
|
-
}], configInput: [{
|
|
53
|
-
type: Input,
|
|
54
|
-
args: [{ alias: 'config', required: true }]
|
|
55
|
-
}] } });
|
|
56
|
-
|
|
57
|
-
/*
|
|
58
|
-
* Public API Surface of skeletonizer
|
|
59
|
-
*/
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Generated bundle index. Do not edit.
|
|
63
|
-
*/
|
|
64
|
-
|
|
65
|
-
export { SkeletonizerSkeletonComponent };
|
|
66
|
-
//# sourceMappingURL=skeletonizer-angular.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"skeletonizer-angular.mjs","sources":["../../../projects/skeletonizer/src/lib/skeletonize.directive.ts","../../../projects/skeletonizer/src/lib/skeletonizer.skeleton.component.ts","../../../projects/skeletonizer/src/lib/skeletonizer.skeleton.component.html","../../../projects/skeletonizer/src/public-api.ts","../../../projects/skeletonizer/src/skeletonizer-angular.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';\nimport { ISkeletonizerColorSchema, SkeletonDirective } from '@skeletonizer/utils';\n\n@Directive({\n selector: '[skeletonize]',\n standalone: true,\n})\nexport class SkeletonizeDirective implements AfterViewInit {\n @Input({ alias: 'skeletonize' }) public colorSchema: ISkeletonizerColorSchema | undefined;\n\n public constructor(\n private readonly el: ElementRef,\n ) {}\n\n public ngAfterViewInit(): void {\n SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema);\n }\n}\n","import { Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { ISkeletonizerColorSchema, Schema, SkeletonAdapterComponent, TSchemaConfig } from '@skeletonizer/utils';\nimport { SkeletonizeDirective } from './skeletonize.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n selector: 'skeletonizer-skeleton',\n templateUrl: './skeletonizer.skeleton.component.html',\n styleUrls: ['./skeletonizer.skeleton.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: true,\n imports: [\n SkeletonizeDirective,\n NgTemplateOutlet,\n ],\n})\nexport class SkeletonizerSkeletonComponent<T extends object, Scope extends T> extends SkeletonAdapterComponent<T> {\n @ContentChild(TemplateRef) public readonly templateRef!: TemplateRef<{ $implicit: Schema<T> | Scope }>;\n\n @Input({ required: true }) public showSkeleton!: boolean;\n @Input({ required: true }) public scope!: Scope;\n @Input() public colorSchema?: ISkeletonizerColorSchema;\n\n @Input({ alias: 'config', required: true }) public set configInput(config: TSchemaConfig<T>) {\n this.config = config;\n\n this.setupModels();\n }\n}\n","@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n","/*\n * Public API Surface of skeletonizer\n */\n\nexport * from './lib/skeletonizer.skeleton.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { AfterViewInit, ElementRef } from '@angular/core';
|
|
2
|
-
import { ISkeletonizerColorSchema } from '@skeletonizer/utils';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
export declare class SkeletonizeDirective implements AfterViewInit {
|
|
5
|
-
private readonly el;
|
|
6
|
-
colorSchema: ISkeletonizerColorSchema | undefined;
|
|
7
|
-
constructor(el: ElementRef);
|
|
8
|
-
ngAfterViewInit(): void;
|
|
9
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonizeDirective, never>;
|
|
10
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<SkeletonizeDirective, "[skeletonize]", never, { "colorSchema": { "alias": "skeletonize"; "required": false; }; }, {}, never, never, true, never>;
|
|
11
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { TemplateRef } from '@angular/core';
|
|
2
|
-
import { ISkeletonizerColorSchema, Schema, SkeletonAdapterComponent, TSchemaConfig } from '@skeletonizer/utils';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
export declare class SkeletonizerSkeletonComponent<T extends object, Scope extends T> extends SkeletonAdapterComponent<T> {
|
|
5
|
-
readonly templateRef: TemplateRef<{
|
|
6
|
-
$implicit: Schema<T> | Scope;
|
|
7
|
-
}>;
|
|
8
|
-
showSkeleton: boolean;
|
|
9
|
-
scope: Scope;
|
|
10
|
-
colorSchema?: ISkeletonizerColorSchema;
|
|
11
|
-
set configInput(config: TSchemaConfig<T>);
|
|
12
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonizerSkeletonComponent<any, any>, never>;
|
|
13
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonizerSkeletonComponent<any, any>, "skeletonizer-skeleton", never, { "showSkeleton": { "alias": "showSkeleton"; "required": true; }; "scope": { "alias": "scope"; "required": true; }; "colorSchema": { "alias": "colorSchema"; "required": false; }; "configInput": { "alias": "config"; "required": true; }; }, {}, ["templateRef"], never, true, never>;
|
|
14
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './lib/skeletonizer.skeleton.component';
|