@skeletonizer/angular 2.6.0 → 2.6.2
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.
|
@@ -1,95 +1,219 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { NgTemplateOutlet } from
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
i0.ɵɵ
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { Component, ContentChild, Directive, ElementRef, TemplateRef, ViewEncapsulation, effect, inject, input } from "@angular/core";
|
|
3
|
+
import { Schema, SkeletonAdapterComponent, SkeletonDirective } from "@skeletonizer/utils";
|
|
4
|
+
import { NgTemplateOutlet } from "@angular/common";
|
|
5
|
+
var SkeletonizeDirective = class SkeletonizeDirective {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.colorSchema = input(void 0, {
|
|
8
|
+
...ngDevMode ? { debugName: "colorSchema" } : /* istanbul ignore next */ {},
|
|
9
|
+
alias: "skeletonize"
|
|
10
|
+
});
|
|
11
|
+
this.el = inject(ElementRef);
|
|
12
|
+
}
|
|
13
|
+
ngAfterViewInit() {
|
|
14
|
+
SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema());
|
|
15
|
+
}
|
|
16
|
+
static {
|
|
17
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
18
|
+
minVersion: "12.0.0",
|
|
19
|
+
version: "22.1.6",
|
|
20
|
+
ngImport: i0,
|
|
21
|
+
type: SkeletonizeDirective,
|
|
22
|
+
deps: [],
|
|
23
|
+
target: i0.ɵɵFactoryTarget.Directive
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
static {
|
|
27
|
+
this.ɵdir = i0.ɵɵngDeclareDirective({
|
|
28
|
+
minVersion: "17.1.0",
|
|
29
|
+
version: "22.1.6",
|
|
30
|
+
type: SkeletonizeDirective,
|
|
31
|
+
isStandalone: true,
|
|
32
|
+
selector: "[skeletonize]",
|
|
33
|
+
inputs: { colorSchema: {
|
|
34
|
+
classPropertyName: "colorSchema",
|
|
35
|
+
publicName: "skeletonize",
|
|
36
|
+
isSignal: true,
|
|
37
|
+
isRequired: false,
|
|
38
|
+
transformFunction: null
|
|
39
|
+
} },
|
|
40
|
+
ngImport: i0
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
45
|
+
minVersion: "12.0.0",
|
|
46
|
+
version: "22.1.6",
|
|
47
|
+
ngImport: i0,
|
|
48
|
+
type: SkeletonizeDirective,
|
|
49
|
+
decorators: [{
|
|
50
|
+
type: Directive,
|
|
51
|
+
args: [{
|
|
52
|
+
selector: "[skeletonize]",
|
|
53
|
+
standalone: true
|
|
54
|
+
}]
|
|
55
|
+
}],
|
|
56
|
+
propDecorators: { colorSchema: [{
|
|
57
|
+
type: i0.Input,
|
|
58
|
+
args: [{
|
|
59
|
+
isSignal: true,
|
|
60
|
+
alias: "skeletonize",
|
|
61
|
+
required: false
|
|
62
|
+
}]
|
|
63
|
+
}] }
|
|
64
|
+
});
|
|
65
|
+
var SkeletonizerSkeletonComponent = class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
|
|
66
|
+
constructor() {
|
|
67
|
+
super();
|
|
68
|
+
this.showSkeleton = input.required(...ngDevMode ? [{ debugName: "showSkeleton" }] : /* istanbul ignore next */ []);
|
|
69
|
+
this.scope = input.required(...ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []);
|
|
70
|
+
this.configInput = input.required({
|
|
71
|
+
...ngDevMode ? { debugName: "configInput" } : /* istanbul ignore next */ {},
|
|
72
|
+
alias: "config"
|
|
73
|
+
});
|
|
74
|
+
this.colorSchema = input(void 0, ...ngDevMode ? [{ debugName: "colorSchema" }] : /* istanbul ignore next */ []);
|
|
75
|
+
effect(() => {
|
|
76
|
+
this.config = this.configInput();
|
|
77
|
+
this.setupModels();
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
static {
|
|
81
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
82
|
+
minVersion: "12.0.0",
|
|
83
|
+
version: "22.1.6",
|
|
84
|
+
ngImport: i0,
|
|
85
|
+
type: SkeletonizerSkeletonComponent,
|
|
86
|
+
deps: [],
|
|
87
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
static {
|
|
91
|
+
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
92
|
+
minVersion: "17.0.0",
|
|
93
|
+
version: "22.1.6",
|
|
94
|
+
type: SkeletonizerSkeletonComponent,
|
|
95
|
+
isStandalone: true,
|
|
96
|
+
selector: "skeletonizer-skeleton",
|
|
97
|
+
inputs: {
|
|
98
|
+
showSkeleton: {
|
|
99
|
+
classPropertyName: "showSkeleton",
|
|
100
|
+
publicName: "showSkeleton",
|
|
101
|
+
isSignal: true,
|
|
102
|
+
isRequired: true,
|
|
103
|
+
transformFunction: null
|
|
104
|
+
},
|
|
105
|
+
scope: {
|
|
106
|
+
classPropertyName: "scope",
|
|
107
|
+
publicName: "scope",
|
|
108
|
+
isSignal: true,
|
|
109
|
+
isRequired: true,
|
|
110
|
+
transformFunction: null
|
|
111
|
+
},
|
|
112
|
+
configInput: {
|
|
113
|
+
classPropertyName: "configInput",
|
|
114
|
+
publicName: "config",
|
|
115
|
+
isSignal: true,
|
|
116
|
+
isRequired: true,
|
|
117
|
+
transformFunction: null
|
|
118
|
+
},
|
|
119
|
+
colorSchema: {
|
|
120
|
+
classPropertyName: "colorSchema",
|
|
121
|
+
publicName: "colorSchema",
|
|
122
|
+
isSignal: true,
|
|
123
|
+
isRequired: false,
|
|
124
|
+
transformFunction: null
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
queries: [{
|
|
128
|
+
propertyName: "templateRef",
|
|
129
|
+
first: true,
|
|
130
|
+
predicate: TemplateRef,
|
|
131
|
+
descendants: true
|
|
132
|
+
}],
|
|
133
|
+
usesInheritance: true,
|
|
134
|
+
ngImport: i0,
|
|
135
|
+
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",
|
|
136
|
+
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)}}[data-skeletonizer=wrapper-element] [data-skeletonizer=input],[data-skeletonizer=wrapper-element] [data-skeletonizer=select]{filter:blur(4px)}skeletonizer-skeleton{display:contents}\n"],
|
|
137
|
+
dependencies: [{
|
|
138
|
+
kind: "directive",
|
|
139
|
+
type: SkeletonizeDirective,
|
|
140
|
+
selector: "[skeletonize]",
|
|
141
|
+
inputs: ["skeletonize"]
|
|
142
|
+
}, {
|
|
143
|
+
kind: "directive",
|
|
144
|
+
type: NgTemplateOutlet,
|
|
145
|
+
selector: "[ngTemplateOutlet]",
|
|
146
|
+
inputs: [
|
|
147
|
+
"ngTemplateOutletContext",
|
|
148
|
+
"ngTemplateOutlet",
|
|
149
|
+
"ngTemplateOutletInjector"
|
|
150
|
+
]
|
|
151
|
+
}],
|
|
152
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
157
|
+
minVersion: "12.0.0",
|
|
158
|
+
version: "22.1.6",
|
|
159
|
+
ngImport: i0,
|
|
160
|
+
type: SkeletonizerSkeletonComponent,
|
|
161
|
+
decorators: [{
|
|
162
|
+
type: Component,
|
|
163
|
+
args: [{
|
|
164
|
+
selector: "skeletonizer-skeleton",
|
|
165
|
+
encapsulation: ViewEncapsulation.None,
|
|
166
|
+
standalone: true,
|
|
167
|
+
imports: [SkeletonizeDirective, NgTemplateOutlet],
|
|
168
|
+
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",
|
|
169
|
+
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)}}[data-skeletonizer=wrapper-element] [data-skeletonizer=input],[data-skeletonizer=wrapper-element] [data-skeletonizer=select]{filter:blur(4px)}skeletonizer-skeleton{display:contents}\n"]
|
|
170
|
+
}]
|
|
171
|
+
}],
|
|
172
|
+
ctorParameters: () => [],
|
|
173
|
+
propDecorators: {
|
|
174
|
+
templateRef: [{
|
|
175
|
+
type: ContentChild,
|
|
176
|
+
args: [TemplateRef]
|
|
177
|
+
}],
|
|
178
|
+
showSkeleton: [{
|
|
179
|
+
type: i0.Input,
|
|
180
|
+
args: [{
|
|
181
|
+
isSignal: true,
|
|
182
|
+
alias: "showSkeleton",
|
|
183
|
+
required: true
|
|
184
|
+
}]
|
|
185
|
+
}],
|
|
186
|
+
scope: [{
|
|
187
|
+
type: i0.Input,
|
|
188
|
+
args: [{
|
|
189
|
+
isSignal: true,
|
|
190
|
+
alias: "scope",
|
|
191
|
+
required: true
|
|
192
|
+
}]
|
|
193
|
+
}],
|
|
194
|
+
configInput: [{
|
|
195
|
+
type: i0.Input,
|
|
196
|
+
args: [{
|
|
197
|
+
isSignal: true,
|
|
198
|
+
alias: "config",
|
|
199
|
+
required: true
|
|
200
|
+
}]
|
|
201
|
+
}],
|
|
202
|
+
colorSchema: [{
|
|
203
|
+
type: i0.Input,
|
|
204
|
+
args: [{
|
|
205
|
+
isSignal: true,
|
|
206
|
+
alias: "colorSchema",
|
|
207
|
+
required: false
|
|
208
|
+
}]
|
|
209
|
+
}]
|
|
210
|
+
}
|
|
211
|
+
});
|
|
212
|
+
var SkeletonAbstractComponent = class {
|
|
213
|
+
proxy(scope) {
|
|
214
|
+
return scope instanceof Schema ? scope.value : scope;
|
|
215
|
+
}
|
|
216
|
+
};
|
|
94
217
|
export { SkeletonAbstractComponent, SkeletonizerSkeletonComponent };
|
|
95
|
-
|
|
218
|
+
|
|
219
|
+
//# sourceMappingURL=skeletonizer-angular.mjs.map
|
|
@@ -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/lib/skeleton-abstract.component.ts"
|
|
1
|
+
{"version":3,"file":"skeletonizer-angular.mjs","names":[],"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/lib/skeleton-abstract.component.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, inject, input, InputSignal } 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 public readonly colorSchema: InputSignal<ISkeletonizerColorSchema | undefined> = input<ISkeletonizerColorSchema | undefined>(\n undefined,\n { alias: 'skeletonize' },\n );\n\n private readonly el: ElementRef = inject(ElementRef);\n\n public ngAfterViewInit(): void {\n SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema());\n }\n}\n","import { Component, ContentChild, effect, input, InputSignal, 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 public readonly showSkeleton: InputSignal<boolean> = input.required<boolean>();\n public readonly scope: InputSignal<Scope> = input.required<Scope>();\n public readonly configInput: InputSignal<TSchemaConfig<T>> = input.required<TSchemaConfig<T>>({ alias: 'config' });\n public readonly colorSchema: InputSignal<ISkeletonizerColorSchema | undefined> = input<ISkeletonizerColorSchema | undefined>(undefined);\n\n public constructor() {\n super();\n\n effect(() => {\n this.config = this.configInput();\n this.setupModels();\n });\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","import { Signal } from '@angular/core';\nimport { Schema, TSchemaConfig, SkeletonAbstractComponent as BaseAbstract } from '@skeletonizer/utils';\n\ntype TAbstractComponent<T extends object> = {\n [K in keyof BaseAbstract<T>]: K extends 'proxy' ? BaseAbstract<T>[K] : Signal<BaseAbstract<T>[K]>;\n};\n\n/**\n * Angular-specific abstract component for skeletonizer.\n * Every Angular component that uses Skeletonizer should extend this class.\n *\n * This version uses Angular signals for reactive state management.\n *\n * @template T - The type of the data model for the skeletonized part of the component\n */\nexport abstract class SkeletonAbstractComponent<T extends object> implements TAbstractComponent<T> {\n /**\n * Configuration for the skeleton schema.\n * Defines how the skeleton data should be generated.\n */\n public abstract skeletonConfig: Signal<TSchemaConfig<T>>;\n\n /**\n * Signal that controls whether the skeleton is shown or the actual content.\n * Use `.set()` to update the value if using WritableSignal.\n */\n public abstract showSkeleton: Signal<boolean>;\n\n /**\n * Proxy method for type-safe access to properties/methods within the skeletonized part of the view.\n *\n * When accessing component properties/methods from within the skeletonized template,\n * they should be accessed via this proxy method. This ensures:\n * - All accessed properties/methods are part of the skeleton schema\n * - TypeScript understands the correct type of each property/method\n *\n * @param scope - Either the skeleton schema or the actual scope object\n * @returns The unwrapped scope object with proper typing\n *\n * @example\n * ```html\n * <ng-template let-context>\n * <div>{{ proxy(context).userName }}</div>\n * </ng-template>\n * ```\n */\n public proxy(scope: T | Schema<T>): T {\n return scope instanceof Schema ? scope.value : scope;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,31 +1,47 @@
|
|
|
1
|
-
import { AbstractControl } from
|
|
2
|
-
import * as i0 from
|
|
3
|
-
import { Signal, TemplateRef
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
import { AbstractControl } from "@angular/forms";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import { InputSignal, Signal, TemplateRef } from "@angular/core";
|
|
4
|
+
import { ISkeletonizerColorSchema, Schema, SkeletonAbstractComponent as SkeletonAbstractComponent$1, SkeletonAdapterComponent, TSchemaConfig } from "@skeletonizer/utils";
|
|
6
5
|
declare module '@skeletonizer/utils' {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
interface ISchemaLeafTypes {
|
|
7
|
+
angularAbstractControl: AbstractControl;
|
|
8
|
+
angularSignal: Signal<unknown>;
|
|
9
|
+
}
|
|
11
10
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
11
|
+
export declare class SkeletonizerSkeletonComponent<T extends object, Scope extends T> extends SkeletonAdapterComponent<T> {
|
|
12
|
+
readonly templateRef: TemplateRef<{
|
|
13
|
+
$implicit: Schema<T> | Scope;
|
|
14
|
+
}>;
|
|
15
|
+
readonly showSkeleton: InputSignal<boolean>;
|
|
16
|
+
readonly scope: InputSignal<Scope>;
|
|
17
|
+
readonly configInput: InputSignal<TSchemaConfig<T>>;
|
|
18
|
+
readonly colorSchema: InputSignal<ISkeletonizerColorSchema | undefined>;
|
|
19
|
+
constructor();
|
|
20
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonizerSkeletonComponent<any, any>, never>;
|
|
21
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonizerSkeletonComponent<any, any>, "skeletonizer-skeleton", never, {
|
|
22
|
+
"showSkeleton": {
|
|
23
|
+
"alias": "showSkeleton";
|
|
24
|
+
"required": true;
|
|
25
|
+
"isSignal": true;
|
|
26
|
+
};
|
|
27
|
+
"scope": {
|
|
28
|
+
"alias": "scope";
|
|
29
|
+
"required": true;
|
|
30
|
+
"isSignal": true;
|
|
31
|
+
};
|
|
32
|
+
"configInput": {
|
|
33
|
+
"alias": "config";
|
|
34
|
+
"required": true;
|
|
35
|
+
"isSignal": true;
|
|
36
|
+
};
|
|
37
|
+
"colorSchema": {
|
|
38
|
+
"alias": "colorSchema";
|
|
39
|
+
"required": false;
|
|
40
|
+
"isSignal": true;
|
|
41
|
+
};
|
|
42
|
+
}, {}, ["templateRef"], never, true, never>;
|
|
24
43
|
}
|
|
25
|
-
|
|
26
|
-
type TAbstractComponent<T extends object> = {
|
|
27
|
-
[K in keyof SkeletonAbstractComponent$1<T>]: K extends 'proxy' ? SkeletonAbstractComponent$1<T>[K] : Signal<SkeletonAbstractComponent$1<T>[K]>;
|
|
28
|
-
};
|
|
44
|
+
type TAbstractComponent<T extends object> = { [K in keyof SkeletonAbstractComponent$1<T>]: K extends 'proxy' ? SkeletonAbstractComponent$1<T>[K] : Signal<SkeletonAbstractComponent$1<T>[K]>; };
|
|
29
45
|
/**
|
|
30
46
|
* Angular-specific abstract component for skeletonizer.
|
|
31
47
|
* Every Angular component that uses Skeletonizer should extend this class.
|
|
@@ -34,36 +50,34 @@ type TAbstractComponent<T extends object> = {
|
|
|
34
50
|
*
|
|
35
51
|
* @template T - The type of the data model for the skeletonized part of the component
|
|
36
52
|
*/
|
|
37
|
-
declare abstract class SkeletonAbstractComponent<T extends object> implements TAbstractComponent<T> {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
export { SkeletonAbstractComponent, SkeletonizerSkeletonComponent };
|
|
53
|
+
export declare abstract class SkeletonAbstractComponent<T extends object> implements TAbstractComponent<T> {
|
|
54
|
+
/**
|
|
55
|
+
* Configuration for the skeleton schema.
|
|
56
|
+
* Defines how the skeleton data should be generated.
|
|
57
|
+
*/
|
|
58
|
+
abstract skeletonConfig: Signal<TSchemaConfig<T>>;
|
|
59
|
+
/**
|
|
60
|
+
* Signal that controls whether the skeleton is shown or the actual content.
|
|
61
|
+
* Use `.set()` to update the value if using WritableSignal.
|
|
62
|
+
*/
|
|
63
|
+
abstract showSkeleton: Signal<boolean>;
|
|
64
|
+
/**
|
|
65
|
+
* Proxy method for type-safe access to properties/methods within the skeletonized part of the view.
|
|
66
|
+
*
|
|
67
|
+
* When accessing component properties/methods from within the skeletonized template,
|
|
68
|
+
* they should be accessed via this proxy method. This ensures:
|
|
69
|
+
* - All accessed properties/methods are part of the skeleton schema
|
|
70
|
+
* - TypeScript understands the correct type of each property/method
|
|
71
|
+
*
|
|
72
|
+
* @param scope - Either the skeleton schema or the actual scope object
|
|
73
|
+
* @returns The unwrapped scope object with proper typing
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* ```html
|
|
77
|
+
* <ng-template let-context>
|
|
78
|
+
* <div>{{ proxy(context).userName }}</div>
|
|
79
|
+
* </ng-template>
|
|
80
|
+
* ```
|
|
81
|
+
*/
|
|
82
|
+
proxy(scope: T | Schema<T>): T;
|
|
83
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skeletonizer/angular",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.2",
|
|
4
4
|
"description": "The way to skeletonize your Angular components",
|
|
5
5
|
"author": "Luka Varga",
|
|
6
6
|
"license": "MIT",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@angular/platform-browser": ">=19.0.0",
|
|
63
63
|
"@angular/platform-browser-dynamic": ">=19.0.0",
|
|
64
64
|
"@angular/router": ">=19.0.0",
|
|
65
|
-
"@skeletonizer/utils": "^2.6.
|
|
65
|
+
"@skeletonizer/utils": "^2.6.2",
|
|
66
66
|
"rxjs": "^7.4.0",
|
|
67
67
|
"tslib": "^2.3.0",
|
|
68
68
|
"zone.js": ">=0.15.0"
|
|
@@ -76,31 +76,31 @@
|
|
|
76
76
|
"@angular-eslint/template-parser": "22.5.0",
|
|
77
77
|
"@angular/animations": "^22.1.6",
|
|
78
78
|
"@angular/cli": "^22.1.8",
|
|
79
|
-
"@angular/common": "^22.1.
|
|
79
|
+
"@angular/common": "^22.1.7",
|
|
80
80
|
"@angular/compiler": "^22.1.6",
|
|
81
|
-
"@angular/compiler-cli": "^22.1.
|
|
81
|
+
"@angular/compiler-cli": "^22.1.7",
|
|
82
82
|
"@angular/core": "^22.1.6",
|
|
83
|
-
"@angular/forms": "^22.1.
|
|
83
|
+
"@angular/forms": "^22.1.7",
|
|
84
84
|
"@angular/platform-browser": "^22.1.6",
|
|
85
85
|
"@angular/platform-browser-dynamic": "^22.1.6",
|
|
86
|
-
"@angular/router": "^22.1.
|
|
87
|
-
"@skeletonizer/utils": "^2.6.
|
|
86
|
+
"@angular/router": "^22.1.7",
|
|
87
|
+
"@skeletonizer/utils": "^2.6.2",
|
|
88
88
|
"@types/jasmine": "~6.0.0",
|
|
89
89
|
"@typescript-eslint/eslint-plugin": "^8.70.0",
|
|
90
90
|
"@typescript-eslint/parser": "^8.70.0",
|
|
91
91
|
"angular-eslint": "^22.5.0",
|
|
92
92
|
"eslint": "^10.10.0",
|
|
93
|
-
"jasmine-core": "~
|
|
93
|
+
"jasmine-core": "~7.0.2",
|
|
94
94
|
"karma": "~6.4.4",
|
|
95
95
|
"karma-chrome-launcher": "~3.2.0",
|
|
96
96
|
"karma-coverage": "~2.2.1",
|
|
97
97
|
"karma-jasmine": "~5.1.0",
|
|
98
|
-
"karma-jasmine-html-reporter": "~2.
|
|
99
|
-
"ng-packagr": "^22.
|
|
98
|
+
"karma-jasmine-html-reporter": "~2.3.0",
|
|
99
|
+
"ng-packagr": "^22.2.0",
|
|
100
100
|
"rxjs": "~7.8.2",
|
|
101
101
|
"tslib": "^2.8.1",
|
|
102
102
|
"typescript": "~6.0.3",
|
|
103
103
|
"zone.js": "~0.16.3"
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "6498991dc4b7ac04670b44391a725b576bdd38af"
|
|
106
106
|
}
|