@skeletonizer/angular 0.0.19-alpha.0 → 0.0.20-alpha.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
|
@@ -81,17 +81,19 @@ type TSkeletonizedPart = Pick<AppComponent, 'resources' | 'otherPropWeWantToUseI
|
|
|
81
81
|
<ng-template let-context>
|
|
82
82
|
<span>{{ proxy(context).otherPropWeWantToUseInSkeletonizedPart }}</span>
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
84
|
+
@for (resource of proxy(context).resources; track $index) {
|
|
85
|
+
<a target="_blank" rel="noopener" [href]="resource.link">
|
|
86
|
+
<div [innerHTML]="sanitizer.bypassSecurityTrustHtml(resource.svg)"></div>
|
|
87
|
+
<span>{{ resource.title }}</span>
|
|
88
|
+
</a>
|
|
89
|
+
}
|
|
88
90
|
</ng-template>
|
|
89
91
|
</skeletonizer-skeleton>
|
|
90
92
|
`,
|
|
91
93
|
styleUrls: ['./my-component.component.scss'],
|
|
92
94
|
// for standalone components, otherwise add SkeletonizerSkeletonComponent to the module imports of the module where MyComponent is declared
|
|
93
95
|
// standalone: true,
|
|
94
|
-
// imports: [SkeletonizerSkeletonComponent
|
|
96
|
+
// imports: [SkeletonizerSkeletonComponent],
|
|
95
97
|
})
|
|
96
98
|
export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> implements OnInit {
|
|
97
99
|
public pageTitle: string = 'Some prop that we do not wish to skeletonize, but wish to use in the view nonetheless';
|
|
@@ -172,12 +174,12 @@ type TSkeletonizedPart = Pick<AppComponent, 'resources' | 'otherPropWeWantToUseI
|
|
|
172
174
|
|
|
173
175
|
<skeletonizer-skeleton [showSkeleton]="showSkeleton" [config]="skeletonConfig" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
|
|
174
176
|
<ng-template let-context>
|
|
175
|
-
|
|
176
|
-
<a
|
|
177
|
+
@for (resource of proxy(context).resources; track $index) {
|
|
178
|
+
<a target="_blank" rel="noopener" [href]="resource.link">
|
|
177
179
|
<div [innerHTML]="sanitizer.bypassSecurityTrustHtml(resource.svg)"></div>
|
|
178
180
|
<span>{{ resource.title }}</span>
|
|
179
181
|
</a>
|
|
180
|
-
|
|
182
|
+
}
|
|
181
183
|
</ng-template>
|
|
182
184
|
</skeletonizer-skeleton>
|
|
183
185
|
|
|
@@ -190,7 +192,7 @@ type TSkeletonizedPart = Pick<AppComponent, 'resources' | 'otherPropWeWantToUseI
|
|
|
190
192
|
styleUrls: ['./my-component.component.scss'],
|
|
191
193
|
// for standalone components, otherwise add SkeletonizerSkeletonComponent to the module imports of the module where MyComponent is declared
|
|
192
194
|
// standalone: true,
|
|
193
|
-
// imports: [SkeletonizerSkeletonComponent
|
|
195
|
+
// imports: [SkeletonizerSkeletonComponent],
|
|
194
196
|
})
|
|
195
197
|
export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> implements OnInit {
|
|
196
198
|
public pageTitle: string = 'Some prop that we do not wish to skeletonize, but wish to use in the view nonetheless';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
|
|
2
2
|
import { SkeletonAdapterComponent } from '@skeletonizer/utils';
|
|
3
3
|
import { SkeletonizeDirective } from './skeletonize.directive';
|
|
4
|
-
import {
|
|
4
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
export class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
|
|
7
7
|
set configInput(config) {
|
|
@@ -9,16 +9,14 @@ export class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
|
|
|
9
9
|
this.setupModels();
|
|
10
10
|
}
|
|
11
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: "
|
|
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
13
|
}
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
16
|
args: [{ selector: 'skeletonizer-skeleton', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
|
|
17
17
|
SkeletonizeDirective,
|
|
18
|
-
NgIf,
|
|
19
|
-
NgFor,
|
|
20
18
|
NgTemplateOutlet,
|
|
21
|
-
], template: "
|
|
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"] }]
|
|
22
20
|
}], propDecorators: { templateRef: [{
|
|
23
21
|
type: ContentChild,
|
|
24
22
|
args: [TemplateRef]
|
|
@@ -34,4 +32,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
34
32
|
type: Input,
|
|
35
33
|
args: [{ alias: 'config', required: true }]
|
|
36
34
|
}] } });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3NrZWxldG9uaXplci9zcmMvbGliL3NrZWxldG9uaXplci5za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9za2VsZXRvbml6ZXIvc3JjL2xpYi9za2VsZXRvbml6ZXIuc2tlbGV0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRixPQUFPLEVBQW9DLHdCQUF3QixFQUFpQixNQUFNLHFCQUFxQixDQUFDO0FBQ2hILE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQWFuRCxNQUFNLE9BQU8sNkJBQWlFLFNBQVEsd0JBQTJCO0lBTy9HLElBQXVELFdBQVcsQ0FBQyxNQUF3QjtRQUN6RixJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUVyQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQzs4R0FYVSw2QkFBNkI7a0dBQTdCLDZCQUE2Qix3UEFDMUIsV0FBVyx1RUNqQjNCLDBWQVNBLGlxQkRHSSxvQkFBb0IsbUZBQ3BCLGdCQUFnQjs7MkZBR1AsNkJBQTZCO2tCQVh6QyxTQUFTOytCQUNFLHVCQUF1QixpQkFHbEIsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1A7d0JBQ1Asb0JBQW9CO3dCQUNwQixnQkFBZ0I7cUJBQ2pCOzhCQUcwQyxXQUFXO3NCQUFyRCxZQUFZO3VCQUFDLFdBQVc7Z0JBRVMsWUFBWTtzQkFBN0MsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1MsS0FBSztzQkFBdEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1QsV0FBVztzQkFBMUIsS0FBSztnQkFFaUQsV0FBVztzQkFBakUsS0FBSzt1QkFBQyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCwgVGVtcGxhdGVSZWYsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJU2tlbGV0b25pemVyQ29sb3JTY2hlbWEsIFNjaGVtYSwgU2tlbGV0b25BZGFwdGVyQ29tcG9uZW50LCBUU2NoZW1hQ29uZmlnIH0gZnJvbSAnQHNrZWxldG9uaXplci91dGlscyc7XG5pbXBvcnQgeyBTa2VsZXRvbml6ZURpcmVjdGl2ZSB9IGZyb20gJy4vc2tlbGV0b25pemUuZGlyZWN0aXZlJztcbmltcG9ydCB7IE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza2VsZXRvbml6ZXItc2tlbGV0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vc2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBTa2VsZXRvbml6ZURpcmVjdGl2ZSxcbiAgICBOZ1RlbXBsYXRlT3V0bGV0LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa2VsZXRvbml6ZXJTa2VsZXRvbkNvbXBvbmVudDxUIGV4dGVuZHMgb2JqZWN0LCBTY29wZSBleHRlbmRzIFQ+IGV4dGVuZHMgU2tlbGV0b25BZGFwdGVyQ29tcG9uZW50PFQ+IHtcbiAgQENvbnRlbnRDaGlsZChUZW1wbGF0ZVJlZikgcHVibGljIHJlYWRvbmx5IHRlbXBsYXRlUmVmITogVGVtcGxhdGVSZWY8eyAkaW1wbGljaXQ6IFNjaGVtYTxUPiB8IFNjb3BlIH0+O1xuXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyBzaG93U2tlbGV0b24hOiBib29sZWFuO1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBwdWJsaWMgc2NvcGUhOiBTY29wZTtcbiAgQElucHV0KCkgcHVibGljIGNvbG9yU2NoZW1hPzogSVNrZWxldG9uaXplckNvbG9yU2NoZW1hO1xuXG4gIEBJbnB1dCh7IGFsaWFzOiAnY29uZmlnJywgcmVxdWlyZWQ6IHRydWUgfSkgcHVibGljIHNldCBjb25maWdJbnB1dChjb25maWc6IFRTY2hlbWFDb25maWc8VD4pIHtcbiAgICB0aGlzLmNvbmZpZyA9IGNvbmZpZztcblxuICAgIHRoaXMuc2V0dXBNb2RlbHMoKTtcbiAgfVxufVxuIiwiQGlmIChzaG93U2tlbGV0b24pIHtcbiAgQGZvciAobW9kZWwgb2Ygdmlld01vZGVsczsgdHJhY2sgbW9kZWwudXVpZCkge1xuICAgIDxkaXYgW3NrZWxldG9uaXplXT1cImNvbG9yU2NoZW1hXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBtb2RlbCB9XCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIH1cbn0gQGVsc2Uge1xuICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBzY29wZSB9XCI+PC9uZy1jb250YWluZXI+XG59XG4iXX0=
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Directive, Input, TemplateRef, Component, ViewEncapsulation, ContentChild } from '@angular/core';
|
|
3
3
|
import { SkeletonDirective, SkeletonAdapterComponent } from '@skeletonizer/utils';
|
|
4
|
-
import {
|
|
4
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
|
|
6
6
|
class SkeletonizeDirective {
|
|
7
7
|
constructor(el) {
|
|
@@ -30,16 +30,14 @@ class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
|
|
|
30
30
|
this.setupModels();
|
|
31
31
|
}
|
|
32
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: "
|
|
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
34
|
}
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
37
|
args: [{ selector: 'skeletonizer-skeleton', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
|
|
38
38
|
SkeletonizeDirective,
|
|
39
|
-
NgIf,
|
|
40
|
-
NgFor,
|
|
41
39
|
NgTemplateOutlet,
|
|
42
|
-
], template: "
|
|
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"] }]
|
|
43
41
|
}], propDecorators: { templateRef: [{
|
|
44
42
|
type: ContentChild,
|
|
45
43
|
args: [TemplateRef]
|
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skeletonizer/angular",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.20-alpha.0",
|
|
4
4
|
"description": "The way to skeletonize your Angular components",
|
|
5
5
|
"author": "Luka Varga",
|
|
6
6
|
"license": "MIT",
|
|
@@ -62,6 +62,7 @@
|
|
|
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": "0.0.20-alpha.0",
|
|
65
66
|
"rxjs": "~7.8.1",
|
|
66
67
|
"tslib": "^2.6.2",
|
|
67
68
|
"zone.js": "~0.14.4"
|
|
@@ -88,5 +89,5 @@
|
|
|
88
89
|
"ng-packagr": "^18.2.1",
|
|
89
90
|
"typescript": "~5.4.3"
|
|
90
91
|
},
|
|
91
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "8c8651dfea6a80f5b85e17ff097e6e23024cc7ac"
|
|
92
93
|
}
|