@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 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 [colorScheme](/packages/utils/README.md#colorscheme) section.
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": "0.0.23-alpha.0",
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 --ext .ts,.js,.html projects/skeletonizer/src/ && eslint --ext .ts,.js,.html src/ && npm run style-lint",
49
- "lintfix": "npm run style-lintfix && eslint --ext .ts,.js,.html projects/skeletonizer/src/ --fix && eslint --ext .ts,.js,.html src/ --fix",
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.7",
71
- "@angular-eslint/builder": "18.3.1",
72
- "@angular-eslint/eslint-plugin": "18.3.1",
73
- "@angular-eslint/eslint-plugin-template": "18.3.1",
74
- "@angular-eslint/schematics": "18.3.1",
75
- "@angular-eslint/template-parser": "18.3.1",
76
- "@angular/cli": "~18.2.7",
77
- "@angular/compiler-cli": "^18.2.7",
78
- "@types/jasmine": "~4.6.4",
79
- "@typescript-eslint/eslint-plugin": "^7.5.0",
80
- "@typescript-eslint/parser": "^7.5.0",
81
- "eslint": "^8.57.0",
82
- "jasmine-core": "~4.6.0",
83
- "karma": "~6.4.3",
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.3"
92
+ "typescript": "~5.5.4"
90
93
  },
91
- "gitHead": "e93fde814bee1e5c1488c7bc195057a74b7d2d91"
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,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="@skeletonizer/angular" />
5
- export * from './public-api';
@@ -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';