@skeletonizer/angular 2.1.50 → 2.2.0

package/README.md

@@ -45,9 +45,16 @@ You can use Skeletonizer either in a standalone component or in a component that
 If you wish to use Skeletonizer in a standalone component, you need to add `SkeletonizerSkeletonComponent` in the imports of the component.
 The usage in a component that is a part of a module is the same as the standalone component, but you need to add `SkeletonizerSkeletonComponent` in the imports of the **module** where the component is declared.
 
-Every component that uses Skeletonizer should extend `SkeletonAbstractComponent`, which is available in `@skeletonizer/utils`.
+Every component that uses Skeletonizer should extend `SkeletonAbstractComponent`, which is available in `@skeletonizer/angular`.
 The `SkeletonAbstractComponent` requires you to pass a type argument that represents the data model of the **part(s) of the component that you intend to skeletonize**.
 It also requires you to implement the `skeletonConfig` (type validated against the type argument you pass to `SkeletonAbstractComponent`) and `showSkeleton` properties which must be passed to the `SkeletonizerSkeletonComponent` as inputs.
+
+**Note:** In Angular, both `skeletonConfig` and `showSkeleton` should be `Signal` types to take advantage of Angular's reactive primitives:
+- `skeletonConfig` should be a `Signal<TSchemaConfig<T>>` (can be `WritableSignal` if you need to modify it)
+- `showSkeleton` should be a `WritableSignal<boolean>` or `Signal<boolean>`. Use `.set()` to update its value
+- Call them as functions in templates: `skeletonConfig()` and `showSkeleton()`
+Alternatively, you can import `SkeletonAbstractComponent` from `@skeletonizer/utils` and use non-reactive types, but this is not recommended.
+
 By extending the `SkeletonAbstractComponent`, you also get access to the `proxy` method via which you can (type) safely access props and methods **within the skeletonized part of the current component**.
 
 In the skeletonized part of the template, you **must** access the data through the `proxy(context)` method.
@@ -61,9 +68,9 @@ For more details about the `skeletonConfig` property, see the [TSchemaConfig](/p
 
 
 ```typescript
-import { Component } from '@angular/core';
-import { SkeletonizerSkeletonComponent } from '@skeletonizer/angular';
-import { SchemaItem, SkeletonAbstractComponent, TSchemaConfig } from '@skeletonizer/utils';
+import { Component, signal, Signal, WritableSignal } from '@angular/core';
+import { SkeletonizerSkeletonComponent, SkeletonAbstractComponent } from '@skeletonizer/angular';
+import { SchemaItem, TSchemaConfig } from '@skeletonizer/utils';
 import { DomSanitizer } from '@angular/platform-browser';
 
 interface IResource {
@@ -86,7 +93,7 @@ type TSkeletonizedPart = Pick<AppComponent, 'resources' | 'otherPropWeWantToUseI
   template: `
     <h2>{{ pageTitle }}</h2>
 
-    <skeletonizer-skeleton [showSkeleton]="showSkeleton" [config]="skeletonConfig" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
+    <skeletonizer-skeleton [showSkeleton]="showSkeleton()" [config]="skeletonConfig()" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
       <ng-template let-context>
         <span>{{ proxy(context).otherPropWeWantToUseInSkeletonizedPart }}</span>
 
@@ -109,9 +116,9 @@ export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> im
   public otherPropWeWantToUseInSkeletonizedPart: string = 'angular';
 
   public resources: IResource[] = [];
-  public showSkeleton: boolean = true;
+  public showSkeleton: WritableSignal<boolean> = signal(true);
 
-  public readonly skeletonConfig: TSchemaConfig<TSkeletonizedPart> = {
+  public readonly skeletonConfig: Signal<TSchemaConfig<TSkeletonizedPart>> = signal({
     repeat: 1,
     schemaGenerator: () => ({
       otherPropWeWantToUseInSkeletonizedPart: new SchemaItem<string>().words(3),
@@ -122,7 +129,7 @@ export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> im
         svg: new SchemaItem().identical(loadingSvg),
       })),
     }),
-  };
+  });
 
   public constructor(
     public readonly sanitizer: DomSanitizer,
@@ -148,7 +155,7 @@ export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> im
 
       this.otherPropWeWantToUseInSkeletonizedPart = 'loaded title'
 
-      this.showSkeleton = false;
+      this.showSkeleton.set(false);
     }, Math.max(3_000, Math.random() * 10_000));
   }
 }
@@ -158,9 +165,9 @@ You can also skeletonize multiple independent parts (ie. parts for which the dat
 You can also provide separate config and scope for each `skeletonizer-skeleton` component if needed, although it is recommended that you do not extend `SkeletonAbstractComponent` in this case, and you will need to provide your own (separate) `proxy`-like methods for each of the skeletonized parts of the component to maintain the same level of type safety in the template.
 
 ```typescript
-import { Component } from '@angular/core';
-import { SkeletonizerSkeletonComponent } from '@skeletonizer/angular';
-import { SchemaItem, SkeletonAbstractComponent, TSchemaConfig } from '@skeletonizer/utils';
+import { Component, signal, Signal, WritableSignal } from '@angular/core';
+import { SkeletonizerSkeletonComponent, SkeletonAbstractComponent } from '@skeletonizer/angular';
+import { SchemaItem, TSchemaConfig } from '@skeletonizer/utils';
 import { DomSanitizer } from '@angular/platform-browser';
 
 interface IResource {
@@ -181,7 +188,7 @@ type TSkeletonizedPart = Pick<AppComponent, 'resources' | 'otherPropWeWantToUseI
   template: `
     <h2>{{ pageTitle }}</h2>
 
-    <skeletonizer-skeleton [showSkeleton]="showSkeleton" [config]="skeletonConfig" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
+    <skeletonizer-skeleton [showSkeleton]="showSkeleton()" [config]="skeletonConfig()" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
       <ng-template let-context>
         @for (resource of proxy(context).resources; track $index) {
           <a target="_blank" rel="noopener" [href]="resource.link">
@@ -192,7 +199,7 @@ type TSkeletonizedPart = Pick<AppComponent, 'resources' | 'otherPropWeWantToUseI
       </ng-template>
     </skeletonizer-skeleton>
 
-    <skeletonizer-skeleton [showSkeleton]="showOtherSkeleton" [config]="skeletonConfig" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
+    <skeletonizer-skeleton [showSkeleton]="showOtherSkeleton()" [config]="skeletonConfig()" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
       <ng-template let-context>
         <span>{{ proxy(context).otherPropWeWantToUseInSkeletonizedPart }}</span>
       </ng-template>
@@ -208,9 +215,10 @@ export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> im
   public otherPropWeWantToUseInSkeletonizedPart: string = 'angular';
 
   public resources: IResource[] = [];
-  public showSkeleton: boolean = true;
+  public showSkeleton: WritableSignal<boolean> = signal(true);
+  public showOtherSkeleton: WritableSignal<boolean> = signal(true);
 
-  public readonly skeletonConfig: TSchemaConfig<TSkeletonizedPart> = {
+  public readonly skeletonConfig: Signal<TSchemaConfig<TSkeletonizedPart>> = signal({
     repeat: 1,
     schemaGenerator: () => ({
       otherPropWeWantToUseInSkeletonizedPart: new SchemaItem<string>().words(3),
@@ -221,7 +229,7 @@ export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> im
         svg: new SchemaItem().identical(loadingSvg),
       })),
     }),
-  };
+  });
 
   public constructor(
     public readonly sanitizer: DomSanitizer,
@@ -244,11 +252,11 @@ export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> im
         },
       ];
 
-      this.showSkeleton = false;
+      this.showSkeleton.set(false);
     }, Math.max(3_000, Math.random() * 10_000));
 
     setTimeout(() => {
-      this.showOtherSkeleton = false;
+      this.showOtherSkeleton.set(false);
     }, Math.max(6_000, Math.random() * 10_000));
   }
 }

package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs

@@ -1,58 +1,84 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Input, Directive, TemplateRef, ContentChild, ViewEncapsulation, Component } from '@angular/core';
-import { SkeletonDirective, SkeletonAdapterComponent } from '@skeletonizer/utils';
+import { input, inject, ElementRef, Directive, effect, TemplateRef, ContentChild, ViewEncapsulation, Component } from '@angular/core';
+import { SkeletonDirective, SkeletonAdapterComponent, Schema } from '@skeletonizer/utils';
 import { NgTemplateOutlet } from '@angular/common';
 
 class SkeletonizeDirective {
     constructor() {
+        this.colorSchema = input(undefined, { ...(ngDevMode ? { debugName: "colorSchema" } : {}), alias: 'skeletonize' });
         this.el = inject(ElementRef);
     }
     ngAfterViewInit() {
-        SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema);
+        SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SkeletonizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: SkeletonizeDirective, isStandalone: true, selector: "[skeletonize]", inputs: { colorSchema: ["skeletonize", "colorSchema"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SkeletonizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: SkeletonizeDirective, isStandalone: true, selector: "[skeletonize]", inputs: { colorSchema: { classPropertyName: "colorSchema", publicName: "skeletonize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SkeletonizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SkeletonizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skeletonize]',
                     standalone: true,
                 }]
-        }], propDecorators: { colorSchema: [{
-                type: Input,
-                args: [{ alias: 'skeletonize' }]
-            }] } });
+        }], propDecorators: { colorSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonize", required: false }] }] } });
 
 class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
-    set configInput(config) {
-        this.config = config;
-        this.setupModels();
+    constructor() {
+        super();
+        this.showSkeleton = input.required(...(ngDevMode ? [{ debugName: "showSkeleton" }] : []));
+        this.scope = input.required(...(ngDevMode ? [{ debugName: "scope" }] : []));
+        this.configInput = input.required({ ...(ngDevMode ? { debugName: "configInput" } : {}), alias: 'config' });
+        this.colorSchema = input(undefined, ...(ngDevMode ? [{ debugName: "colorSchema" }] : []));
+        effect(() => {
+            this.config = this.configInput();
+            this.setupModels();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SkeletonizerSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SkeletonizerSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SkeletonizerSkeletonComponent, isStandalone: true, selector: "skeletonizer-skeleton", inputs: { showSkeleton: { classPropertyName: "showSkeleton", publicName: "showSkeleton", isSignal: true, isRequired: true, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: true, transformFunction: null }, configInput: { classPropertyName: "configInput", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, colorSchema: { classPropertyName: "colorSchema", publicName: "colorSchema", isSignal: true, isRequired: false, transformFunction: null } }, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'skeletonizer-skeleton', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         SkeletonizeDirective,
                         NgTemplateOutlet,
-                    ], 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"] }]
-        }], propDecorators: { templateRef: [{
+                    ], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], showSkeleton: [{
-                type: Input,
-                args: [{ required: true }]
-            }], scope: [{
-                type: Input,
-                args: [{ required: true }]
-            }], colorSchema: [{
-                type: Input
-            }], configInput: [{
-                type: Input,
-                args: [{ alias: 'config', required: true }]
-            }] } });
+            }], showSkeleton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSkeleton", required: true }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: true }] }], configInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], colorSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorSchema", required: false }] }] } });
+
+/**
+ * Angular-specific abstract component for skeletonizer.
+ * Every Angular component that uses Skeletonizer should extend this class.
+ *
+ * This version uses Angular signals for reactive state management.
+ *
+ * @template T - The type of the data model for the skeletonized part of the component
+ */
+class SkeletonAbstractComponent {
+    /**
+     * Proxy method for type-safe access to properties/methods within the skeletonized part of the view.
+     *
+     * When accessing component properties/methods from within the skeletonized template,
+     * they should be accessed via this proxy method. This ensures:
+     * - All accessed properties/methods are part of the skeleton schema
+     * - TypeScript understands the correct type of each property/method
+     *
+     * @param scope - Either the skeleton schema or the actual scope object
+     * @returns The unwrapped scope object with proper typing
+     *
+     * @example
+     * ```html
+     * <ng-template let-context>
+     *   <div>{{ proxy(context).userName }}</div>
+     * </ng-template>
+     * ```
+     */
+    proxy(scope) {
+        return scope instanceof Schema ? scope.value : scope;
+    }
+}
 
 /*
  * Public API Surface of skeletonizer
@@ -62,5 +88,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SkeletonizerSkeletonComponent };
+export { SkeletonAbstractComponent, SkeletonizerSkeletonComponent };
 //# sourceMappingURL=skeletonizer-angular.mjs.map

package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs.map

@@ -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, inject, 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  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, 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;AAJjC,IAAA,WAAA,GAAA;AAMmB,QAAA,IAAA,CAAA,EAAE,GAAe,MAAM,CAAC,UAAU,CAAC;AAKrD,IAAA;IAHQ,eAAe,GAAA;AACpB,QAAA,iBAAiB,CAAC,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC;IACzF;8GANW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAApB,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;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;8BAEyC,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;IACpB;8GAXW,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,QAAA,EAAA,IAAA,EAAA,6BAA6B,wPAC1B,WAAW,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjB3B,0VASA,EAAA,MAAA,EAAA,CAAA,ymBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDGI,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;;2FAGP,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAXzC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,iBAGlB,iBAAiB,CAAC,IAAI,EAAA,UAAA,EACzB,IAAI,EAAA,OAAA,EACP;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;;;;"}
+{"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","../../../projects/skeletonizer/src/public-api.ts","../../../projects/skeletonizer/src/skeletonizer-angular.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","/*\n * Public API Surface of skeletonizer\n */\n\nexport * from './lib/skeletonizer.skeleton.component';\nexport * from './lib/skeleton-abstract.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/dist/skeletonizer/types/skeletonizer-angular.d.ts

@@ -0,0 +1,61 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, InputSignal, Signal } from '@angular/core';
+import { SkeletonAdapterComponent, Schema, TSchemaConfig, ISkeletonizerColorSchema, SkeletonAbstractComponent as SkeletonAbstractComponent$1 } from '@skeletonizer/utils';
+
+declare class SkeletonizerSkeletonComponent<T extends object, Scope extends T> extends SkeletonAdapterComponent<T> {
+    readonly templateRef: TemplateRef<{
+        $implicit: Schema<T> | Scope;
+    }>;
+    readonly showSkeleton: InputSignal<boolean>;
+    readonly scope: InputSignal<Scope>;
+    readonly configInput: InputSignal<TSchemaConfig<T>>;
+    readonly colorSchema: InputSignal<ISkeletonizerColorSchema | undefined>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonizerSkeletonComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonizerSkeletonComponent<any, any>, "skeletonizer-skeleton", never, { "showSkeleton": { "alias": "showSkeleton"; "required": true; "isSignal": true; }; "scope": { "alias": "scope"; "required": true; "isSignal": true; }; "configInput": { "alias": "config"; "required": true; "isSignal": true; }; "colorSchema": { "alias": "colorSchema"; "required": false; "isSignal": true; }; }, {}, ["templateRef"], never, true, never>;
+}
+
+type TAbstractComponent<T extends object> = {
+    [K in keyof SkeletonAbstractComponent$1<T>]: K extends 'proxy' ? SkeletonAbstractComponent$1<T>[K] : Signal<SkeletonAbstractComponent$1<T>[K]>;
+};
+/**
+ * Angular-specific abstract component for skeletonizer.
+ * Every Angular component that uses Skeletonizer should extend this class.
+ *
+ * This version uses Angular signals for reactive state management.
+ *
+ * @template T - The type of the data model for the skeletonized part of the component
+ */
+declare abstract class SkeletonAbstractComponent<T extends object> implements TAbstractComponent<T> {
+    /**
+     * Configuration for the skeleton schema.
+     * Defines how the skeleton data should be generated.
+     */
+    abstract skeletonConfig: Signal<TSchemaConfig<T>>;
+    /**
+     * Signal that controls whether the skeleton is shown or the actual content.
+     * Use `.set()` to update the value if using WritableSignal.
+     */
+    abstract showSkeleton: Signal<boolean>;
+    /**
+     * Proxy method for type-safe access to properties/methods within the skeletonized part of the view.
+     *
+     * When accessing component properties/methods from within the skeletonized template,
+     * they should be accessed via this proxy method. This ensures:
+     * - All accessed properties/methods are part of the skeleton schema
+     * - TypeScript understands the correct type of each property/method
+     *
+     * @param scope - Either the skeleton schema or the actual scope object
+     * @returns The unwrapped scope object with proper typing
+     *
+     * @example
+     * ```html
+     * <ng-template let-context>
+     *   <div>{{ proxy(context).userName }}</div>
+     * </ng-template>
+     * ```
+     */
+    proxy(scope: T | Schema<T>): T;
+}
+
+export { SkeletonAbstractComponent, SkeletonizerSkeletonComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonizer/angular",
-  "version": "2.1.50",
+  "version": "2.2.0",
   "description": "The way to skeletonize your Angular components",
   "author": "Luka Varga",
   "license": "MIT",
@@ -54,42 +54,42 @@
     "**/*.{ts,js}": "eslint --fix"
   },
   "peerDependencies": {
-    "@angular/animations": "^20.0.1",
-    "@angular/common": "^20.0.1",
-    "@angular/compiler": "^20.0.1",
-    "@angular/core": "^20.0.1",
-    "@angular/forms": "^20.0.1",
-    "@angular/platform-browser": "^20.0.1",
-    "@angular/platform-browser-dynamic": "^20.0.1",
-    "@angular/router": "^20.0.1",
-    "@skeletonizer/utils": "^2.1.50",
-    "rxjs": "~7.8.1",
+    "@angular/animations": "^21.1.0",
+    "@angular/common": "^21.1.0",
+    "@angular/compiler": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/forms": "^21.1.0",
+    "@angular/platform-browser": "^21.1.0",
+    "@angular/platform-browser-dynamic": "^21.1.0",
+    "@angular/router": "^21.1.0",
+    "@skeletonizer/utils": "^2.2.0",
+    "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.0.1",
-    "@angular-eslint/builder": "20.2.0",
-    "@angular-eslint/eslint-plugin": "20.2.0",
-    "@angular-eslint/eslint-plugin-template": "20.2.0",
-    "@angular-eslint/schematics": "20.2.0",
-    "@angular-eslint/template-parser": "20.2.0",
-    "@angular/cli": "~20.2.1",
-    "@angular/compiler-cli": "^20.0.1",
-    "@skeletonizer/utils": "^2.1.50",
-    "@types/jasmine": "~5.1.8",
-    "@typescript-eslint/eslint-plugin": "^8.33.1",
-    "@typescript-eslint/parser": "^8.33.1",
-    "angular-eslint": "^20.0.0",
-    "eslint": "^9.28.0",
-    "jasmine-core": "~5.8.0",
+    "@angular-devkit/build-angular": "^21.1.0",
+    "@angular-eslint/builder": "21.1.0",
+    "@angular-eslint/eslint-plugin": "21.1.0",
+    "@angular-eslint/eslint-plugin-template": "21.1.0",
+    "@angular-eslint/schematics": "21.1.0",
+    "@angular-eslint/template-parser": "21.1.0",
+    "@angular/cli": "~21.1.0",
+    "@angular/compiler-cli": "^21.1.0",
+    "@skeletonizer/utils": "^2.2.0",
+    "@types/jasmine": "~5.1.15",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "angular-eslint": "^21.1.0",
+    "eslint": "^9.39.2",
+    "jasmine-core": "~5.13.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^20.0.0",
-    "typescript": "~5.8.3"
+    "ng-packagr": "^21.1.0",
+    "typescript": "~5.9.3"
   },
-  "gitHead": "68b4dfc3d9dfb0ceac90513580cbba2207ff7fd2"
+  "gitHead": "3cbb3ce5029b087eb1f2317d98fe6a50157faf13"
 }

package/dist/skeletonizer/index.d.ts

@@ -1,17 +0,0 @@
-import * as i0 from '@angular/core';
-import { TemplateRef } from '@angular/core';
-import { SkeletonAdapterComponent, Schema, ISkeletonizerColorSchema, TSchemaConfig } from '@skeletonizer/utils';
-
-declare class SkeletonizerSkeletonComponent<T extends object, Scope extends T> extends SkeletonAdapterComponent<T> {
-    readonly templateRef: TemplateRef<{
-        $implicit: Schema<T> | Scope;
-    }>;
-    showSkeleton: boolean;
-    scope: Scope;
-    colorSchema?: ISkeletonizerColorSchema;
-    set configInput(config: TSchemaConfig<T>);
-    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonizerSkeletonComponent<any, any>, never>;
-    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>;
-}
-
-export { SkeletonizerSkeletonComponent };