@skeletonizer/angular 0.0.9-alpha.0 → 0.0.19-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
|
@@ -44,11 +44,11 @@ By extending the `SkeletonAbstractComponent`, you also get access to the `proxy`
|
|
|
44
44
|
In the skeletonized part of the template, you **must** access the data through the `proxy(context)` method.
|
|
45
45
|
You can think of `proxy(context)` in the same way as you would think of `this` in a class method (or in the template, where the `this` is usually omitted when accessing props / methods and we usually call `foo` instead of `this.foo`). The only difference is that when using `proxy(context)`, the content-projected template will use the mocked values when the `showSkeleton` is `true`, and resolved values when `showSkeleton` is `false` - all while maintaining the type safety.
|
|
46
46
|
|
|
47
|
-
For more details about the `SkeletonAbstractComponent`, see the [SkeletonAbstractComponent](/packages/utils/README.md#
|
|
47
|
+
For more details about the `SkeletonAbstractComponent`, see the [SkeletonAbstractComponent](/packages/utils/README.md#skeletonabstractcomponent) section.
|
|
48
48
|
|
|
49
|
-
For more details about the `SchemaItem` property, see the [SchemaItem](/packages/utils/README.md#
|
|
49
|
+
For more details about the `SchemaItem` property, see the [SchemaItem](/packages/utils/README.md#schemaitem) section.
|
|
50
50
|
|
|
51
|
-
For more details about the `skeletonConfig` property, see the [TSchemaConfig](/packages/utils/README.md#
|
|
51
|
+
For more details about the `skeletonConfig` property, see the [TSchemaConfig](/packages/utils/README.md#tschemaconfig) section.
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
```typescript
|
|
@@ -246,7 +246,7 @@ export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> im
|
|
|
246
246
|
### Color Scheme
|
|
247
247
|
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`.
|
|
248
248
|
|
|
249
|
-
For more details about the `colorScheme` property, see the [colorScheme](/packages/utils/README.md#
|
|
249
|
+
For more details about the `colorScheme` property, see the [colorScheme](/packages/utils/README.md#colorscheme) section.
|
|
250
250
|
|
|
251
251
|
## Contributing
|
|
252
252
|
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: "
|
|
12
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
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
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizeDirective, decorators: [{
|
|
15
15
|
type: Directive,
|
|
16
16
|
args: [{
|
|
17
17
|
selector: '[skeletonize]',
|
|
@@ -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: "
|
|
12
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
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: "14.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: "<ng-container *ngIf=\"showSkeleton\">\n <ng-container *ngFor=\"let model of viewModels\">\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!showSkeleton\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n</ng-container>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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,
|
|
@@ -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: "
|
|
14
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
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
15
|
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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: "
|
|
33
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
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: "14.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: "<ng-container *ngIf=\"showSkeleton\">\n <ng-container *ngFor=\"let model of viewModels\">\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!showSkeleton\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n</ng-container>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skeletonizer/angular",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.19-alpha.0",
|
|
4
4
|
"description": "The way to skeletonize your Angular components",
|
|
5
5
|
"author": "Luka Varga",
|
|
6
6
|
"license": "MIT",
|
|
@@ -54,27 +54,27 @@
|
|
|
54
54
|
"**/*.{ts,js}": "eslint --fix"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
|
-
"@angular/animations": "^
|
|
58
|
-
"@angular/common": "^
|
|
59
|
-
"@angular/compiler": "^
|
|
60
|
-
"@angular/core": "^
|
|
61
|
-
"@angular/forms": "^
|
|
62
|
-
"@angular/platform-browser": "^
|
|
63
|
-
"@angular/platform-browser-dynamic": "^
|
|
64
|
-
"@angular/router": "^
|
|
57
|
+
"@angular/animations": "^18.0.0",
|
|
58
|
+
"@angular/common": "^18.0.0",
|
|
59
|
+
"@angular/compiler": "^18.0.0",
|
|
60
|
+
"@angular/core": "^18.0.0",
|
|
61
|
+
"@angular/forms": "^18.0.0",
|
|
62
|
+
"@angular/platform-browser": "^18.0.0",
|
|
63
|
+
"@angular/platform-browser-dynamic": "^18.0.0",
|
|
64
|
+
"@angular/router": "^18.0.0",
|
|
65
65
|
"rxjs": "~7.8.1",
|
|
66
66
|
"tslib": "^2.6.2",
|
|
67
67
|
"zone.js": "~0.14.4"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
|
-
"@angular-devkit/build-angular": "^
|
|
71
|
-
"@angular-eslint/builder": "
|
|
72
|
-
"@angular-eslint/eslint-plugin": "
|
|
73
|
-
"@angular-eslint/eslint-plugin-template": "
|
|
74
|
-
"@angular-eslint/schematics": "
|
|
75
|
-
"@angular-eslint/template-parser": "
|
|
76
|
-
"@angular/cli": "~
|
|
77
|
-
"@angular/compiler-cli": "^
|
|
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
78
|
"@types/jasmine": "~4.6.4",
|
|
79
79
|
"@typescript-eslint/eslint-plugin": "^7.5.0",
|
|
80
80
|
"@typescript-eslint/parser": "^7.5.0",
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
"karma-coverage": "~2.2.1",
|
|
86
86
|
"karma-jasmine": "~5.1.0",
|
|
87
87
|
"karma-jasmine-html-reporter": "~2.1.0",
|
|
88
|
-
"ng-packagr": "^
|
|
88
|
+
"ng-packagr": "^18.2.1",
|
|
89
89
|
"typescript": "~5.4.3"
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "4e0e1624e0f04c0e52658f573c15004ae2b9b3bd"
|
|
92
92
|
}
|