@skeletonizer/angular 1.0.0 → 1.1.1
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/LICENSE +1 -1
- package/README.md +2 -2
- package/dist/skeletonizer/esm2022/lib/skeletonize.directive.mjs +4 -4
- package/dist/skeletonizer/esm2022/lib/skeletonizer.skeleton.component.mjs +4 -4
- package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs +6 -6
- package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs.map +1 -1
- package/package.json +23 -20
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -246,9 +246,9 @@ export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> im
|
|
|
246
246
|
```
|
|
247
247
|
|
|
248
248
|
### Color Scheme
|
|
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 `
|
|
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 `colorSchema` property to the `SkeletonizerSkeletonComponent`.
|
|
250
250
|
|
|
251
|
-
For more details about the `
|
|
251
|
+
For more details about the `colorSchema` 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:
|
|
@@ -8,10 +8,10 @@ export class SkeletonizeDirective {
|
|
|
8
8
|
ngAfterViewInit() {
|
|
9
9
|
SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema);
|
|
10
10
|
}
|
|
11
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
12
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.
|
|
11
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", 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.10", type: SkeletonizeDirective, isStandalone: true, selector: "[skeletonize]", inputs: { colorSchema: ["skeletonize", "colorSchema"] }, ngImport: i0 }); }
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: SkeletonizeDirective, decorators: [{
|
|
15
15
|
type: Directive,
|
|
16
16
|
args: [{
|
|
17
17
|
selector: '[skeletonize]',
|
|
@@ -21,4 +21,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
21
21
|
type: Input,
|
|
22
22
|
args: [{ alias: 'skeletonize' }]
|
|
23
23
|
}] } });
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25pemUuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvc2tlbGV0b25pemVyL3NyYy9saWIvc2tlbGV0b25pemUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFjLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RSxPQUFPLEVBQTRCLGlCQUFpQixFQUFFLE1BQU0scUJBQXFCLENBQUM7O0FBTWxGLE1BQU0sT0FBTyxvQkFBb0I7SUFHL0IsWUFDbUIsRUFBYztRQUFkLE9BQUUsR0FBRixFQUFFLENBQVk7SUFDOUIsQ0FBQztJQUVHLGVBQWU7UUFDcEIsaUJBQWlCLENBQUMsNEJBQTRCLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQzFGLENBQUM7K0dBVFUsb0JBQW9CO21HQUFwQixvQkFBb0I7OzRGQUFwQixvQkFBb0I7a0JBSmhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjsrRUFFeUMsV0FBVztzQkFBbEQsS0FBSzt1QkFBQyxFQUFFLEtBQUssRUFBRSxhQUFhLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJU2tlbGV0b25pemVyQ29sb3JTY2hlbWEsIFNrZWxldG9uRGlyZWN0aXZlIH0gZnJvbSAnQHNrZWxldG9uaXplci91dGlscyc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tza2VsZXRvbml6ZV0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBTa2VsZXRvbml6ZURpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBASW5wdXQoeyBhbGlhczogJ3NrZWxldG9uaXplJyB9KSBwdWJsaWMgY29sb3JTY2hlbWE6IElTa2VsZXRvbml6ZXJDb2xvclNjaGVtYSB8IHVuZGVmaW5lZDtcblxuICBwdWJsaWMgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSByZWFkb25seSBlbDogRWxlbWVudFJlZixcbiAgKSB7fVxuXG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgU2tlbGV0b25EaXJlY3RpdmUuc2tlbGV0b25pemVQcm9qZWN0ZWRUZW1wbGF0ZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHRoaXMuY29sb3JTY2hlbWEpO1xuICB9XG59XG4iXX0=
|
|
@@ -8,10 +8,10 @@ export class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
|
|
|
8
8
|
this.config = config;
|
|
9
9
|
this.setupModels();
|
|
10
10
|
}
|
|
11
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
12
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
11
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: SkeletonizerSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", 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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
16
|
args: [{ selector: 'skeletonizer-skeleton', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
|
|
17
17
|
SkeletonizeDirective,
|
|
@@ -32,4 +32,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
32
32
|
type: Input,
|
|
33
33
|
args: [{ alias: 'config', required: true }]
|
|
34
34
|
}] } });
|
|
35
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3NrZWxldG9uaXplci9zcmMvbGliL3NrZWxldG9uaXplci5za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9za2VsZXRvbml6ZXIvc3JjL2xpYi9za2VsZXRvbml6ZXIuc2tlbGV0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRixPQUFPLEVBQW9DLHdCQUF3QixFQUFpQixNQUFNLHFCQUFxQixDQUFDO0FBQ2hILE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQWFuRCxNQUFNLE9BQU8sNkJBQWlFLFNBQVEsd0JBQTJCO0lBTy9HLElBQXVELFdBQVcsQ0FBQyxNQUF3QjtRQUN6RixJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUVyQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQzsrR0FYVSw2QkFBNkI7bUdBQTdCLDZCQUE2Qix3UEFDMUIsV0FBVyx1RUNqQjNCLDBWQVNBLGlxQkRHSSxvQkFBb0IsbUZBQ3BCLGdCQUFnQjs7NEZBR1AsNkJBQTZCO2tCQVh6QyxTQUFTOytCQUNFLHVCQUF1QixpQkFHbEIsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1A7d0JBQ1Asb0JBQW9CO3dCQUNwQixnQkFBZ0I7cUJBQ2pCOzhCQUcwQyxXQUFXO3NCQUFyRCxZQUFZO3VCQUFDLFdBQVc7Z0JBRVMsWUFBWTtzQkFBN0MsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1MsS0FBSztzQkFBdEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1QsV0FBVztzQkFBMUIsS0FBSztnQkFFaUQsV0FBVztzQkFBakUsS0FBSzt1QkFBQyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCwgVGVtcGxhdGVSZWYsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJU2tlbGV0b25pemVyQ29sb3JTY2hlbWEsIFNjaGVtYSwgU2tlbGV0b25BZGFwdGVyQ29tcG9uZW50LCBUU2NoZW1hQ29uZmlnIH0gZnJvbSAnQHNrZWxldG9uaXplci91dGlscyc7XG5pbXBvcnQgeyBTa2VsZXRvbml6ZURpcmVjdGl2ZSB9IGZyb20gJy4vc2tlbGV0b25pemUuZGlyZWN0aXZlJztcbmltcG9ydCB7IE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza2VsZXRvbml6ZXItc2tlbGV0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vc2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBTa2VsZXRvbml6ZURpcmVjdGl2ZSxcbiAgICBOZ1RlbXBsYXRlT3V0bGV0LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa2VsZXRvbml6ZXJTa2VsZXRvbkNvbXBvbmVudDxUIGV4dGVuZHMgb2JqZWN0LCBTY29wZSBleHRlbmRzIFQ+IGV4dGVuZHMgU2tlbGV0b25BZGFwdGVyQ29tcG9uZW50PFQ+IHtcbiAgQENvbnRlbnRDaGlsZChUZW1wbGF0ZVJlZikgcHVibGljIHJlYWRvbmx5IHRlbXBsYXRlUmVmITogVGVtcGxhdGVSZWY8eyAkaW1wbGljaXQ6IFNjaGVtYTxUPiB8IFNjb3BlIH0+O1xuXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyBzaG93U2tlbGV0b24hOiBib29sZWFuO1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBwdWJsaWMgc2NvcGUhOiBTY29wZTtcbiAgQElucHV0KCkgcHVibGljIGNvbG9yU2NoZW1hPzogSVNrZWxldG9uaXplckNvbG9yU2NoZW1hO1xuXG4gIEBJbnB1dCh7IGFsaWFzOiAnY29uZmlnJywgcmVxdWlyZWQ6IHRydWUgfSkgcHVibGljIHNldCBjb25maWdJbnB1dChjb25maWc6IFRTY2hlbWFDb25maWc8VD4pIHtcbiAgICB0aGlzLmNvbmZpZyA9IGNvbmZpZztcblxuICAgIHRoaXMuc2V0dXBNb2RlbHMoKTtcbiAgfVxufVxuIiwiQGlmIChzaG93U2tlbGV0b24pIHtcbiAgQGZvciAobW9kZWwgb2Ygdmlld01vZGVsczsgdHJhY2sgbW9kZWwudXVpZCkge1xuICAgIDxkaXYgW3NrZWxldG9uaXplXT1cImNvbG9yU2NoZW1hXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBtb2RlbCB9XCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIH1cbn0gQGVsc2Uge1xuICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBzY29wZSB9XCI+PC9uZy1jb250YWluZXI+XG59XG4iXX0=
|
|
@@ -10,10 +10,10 @@ class SkeletonizeDirective {
|
|
|
10
10
|
ngAfterViewInit() {
|
|
11
11
|
SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema);
|
|
12
12
|
}
|
|
13
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
14
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.
|
|
13
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", 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.10", type: SkeletonizeDirective, isStandalone: true, selector: "[skeletonize]", inputs: { colorSchema: ["skeletonize", "colorSchema"] }, ngImport: i0 }); }
|
|
15
15
|
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: SkeletonizeDirective, decorators: [{
|
|
17
17
|
type: Directive,
|
|
18
18
|
args: [{
|
|
19
19
|
selector: '[skeletonize]',
|
|
@@ -29,10 +29,10 @@ class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
|
|
|
29
29
|
this.config = config;
|
|
30
30
|
this.setupModels();
|
|
31
31
|
}
|
|
32
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
33
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
32
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: SkeletonizerSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", 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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
37
|
args: [{ selector: 'skeletonizer-skeleton', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
|
|
38
38
|
SkeletonizeDirective,
|
|
@@ -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 { 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":";;;;;MAOa,oBAAoB,CAAA;AAG/B,IAAA,WAAA,CACmB,EAAc,EAAA;QAAd,IAAE,CAAA,EAAA,GAAF,EAAE,
|
|
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":";;;;;MAOa,oBAAoB,CAAA;AAG/B,IAAA,WAAA,CACmB,EAAc,EAAA;QAAd,IAAE,CAAA,EAAA,GAAF,EAAE;;IAGd,eAAe,GAAA;AACpB,QAAA,iBAAiB,CAAC,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC;;+GAR9E,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,CAAA,aAAA,EAAA,aAAA,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;+EAEyC,WAAW,EAAA,CAAA;sBAAlD,KAAK;uBAAC,EAAE,KAAK,EAAE,aAAa,EAAE;;;ACQ3B,MAAO,6BAAiE,SAAQ,wBAA2B,CAAA;IAO/G,IAAuD,WAAW,CAAC,MAAwB,EAAA;AACzF,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;QAEpB,IAAI,CAAC,WAAW,EAAE;;+GAVT,6BAA6B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,6BAA6B,wPAC1B,WAAW,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjB3B,0VASA,EDGI,MAAA,EAAA,CAAA,ymBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,oBAAoB,mFACpB,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAGP,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAXzC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,iBAGlB,iBAAiB,CAAC,IAAI,EAAA,UAAA,EACzB,IAAI,EACP,OAAA,EAAA;wBACP,oBAAoB;wBACpB,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,0VAAA,EAAA,MAAA,EAAA,CAAA,ymBAAA,CAAA,EAAA;8BAG0C,WAAW,EAAA,CAAA;sBAArD,YAAY;uBAAC,WAAW;gBAES,YAAY,EAAA,CAAA;sBAA7C,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACS,KAAK,EAAA,CAAA;sBAAtC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACT,WAAW,EAAA,CAAA;sBAA1B;gBAEsD,WAAW,EAAA,CAAA;sBAAjE,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;;;AEvB5C;;AAEG;;ACFH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skeletonizer/angular",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
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.1",
|
|
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": "a0b3a5c3b3d12cec97f9bf22830437ce1166c2a3"
|
|
92
95
|
}
|