@skeletonizer/angular 0.0.10-alpha.0 → 0.0.20-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +11 -9
  2. package/dist/skeletonizer/esm2022/lib/skeletonize.directive.mjs +3 -3
  3. package/dist/skeletonizer/esm2022/lib/skeletonizer.skeleton.component.mjs +6 -8
  4. package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs +8 -10
  5. package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs.map +1 -1
  6. package/package.json +20 -19
package/README.md CHANGED
@@ -81,17 +81,19 @@ type TSkeletonizedPart = Pick<AppComponent, 'resources' | 'otherPropWeWantToUseI
81
81
  <ng-template let-context>
82
82
  <span>{{ proxy(context).otherPropWeWantToUseInSkeletonizedPart }}</span>
83
83
 
84
- <a *ngFor="let resource of proxy(context).resources" target="_blank" rel="noopener" [href]="resource.link">
85
- <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(resource.svg)"></div>
86
- <span>{{ resource.title }}</span>
87
- </a>
84
+ @for (resource of proxy(context).resources; track $index) {
85
+ <a target="_blank" rel="noopener" [href]="resource.link">
86
+ <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(resource.svg)"></div>
87
+ <span>{{ resource.title }}</span>
88
+ </a>
89
+ }
88
90
  </ng-template>
89
91
  </skeletonizer-skeleton>
90
92
  `,
91
93
  styleUrls: ['./my-component.component.scss'],
92
94
  // for standalone components, otherwise add SkeletonizerSkeletonComponent to the module imports of the module where MyComponent is declared
93
95
  // standalone: true,
94
- // imports: [SkeletonizerSkeletonComponent, NgFor], // ngFor is just for the sake of the example where the *ngFor is used in the template
96
+ // imports: [SkeletonizerSkeletonComponent],
95
97
  })
96
98
  export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> implements OnInit {
97
99
  public pageTitle: string = 'Some prop that we do not wish to skeletonize, but wish to use in the view nonetheless';
@@ -172,12 +174,12 @@ type TSkeletonizedPart = Pick<AppComponent, 'resources' | 'otherPropWeWantToUseI
172
174
 
173
175
  <skeletonizer-skeleton [showSkeleton]="showSkeleton" [config]="skeletonConfig" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
174
176
  <ng-template let-context>
175
- <div class="card-container">
176
- <a *ngFor="let resource of proxy(context).resources" class="card" target="_blank" rel="noopener" [href]="resource.link">
177
+ @for (resource of proxy(context).resources; track $index) {
178
+ <a target="_blank" rel="noopener" [href]="resource.link">
177
179
  <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(resource.svg)"></div>
178
180
  <span>{{ resource.title }}</span>
179
181
  </a>
180
- </div>
182
+ }
181
183
  </ng-template>
182
184
  </skeletonizer-skeleton>
183
185
 
@@ -190,7 +192,7 @@ type TSkeletonizedPart = Pick<AppComponent, 'resources' | 'otherPropWeWantToUseI
190
192
  styleUrls: ['./my-component.component.scss'],
191
193
  // for standalone components, otherwise add SkeletonizerSkeletonComponent to the module imports of the module where MyComponent is declared
192
194
  // standalone: true,
193
- // imports: [SkeletonizerSkeletonComponent, NgFor], // ngFor is just for the sake of the example where the *ngFor is used in the template
195
+ // imports: [SkeletonizerSkeletonComponent],
194
196
  })
195
197
  export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> implements OnInit {
196
198
  public pageTitle: string = 'Some prop that we do not wish to skeletonize, but wish to use in the view nonetheless';
package/dist/skeletonizer/esm2022/lib/skeletonize.directive.mjs CHANGED
@@ -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: "17.3.5", ngImport: i0, type: SkeletonizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
12
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: SkeletonizeDirective, isStandalone: true, selector: "[skeletonize]", inputs: { colorSchema: ["skeletonize", "colorSchema"] }, ngImport: i0 }); }
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: "17.3.5", ngImport: i0, type: SkeletonizeDirective, decorators: [{
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]',
package/dist/skeletonizer/esm2022/lib/skeletonizer.skeleton.component.mjs CHANGED
@@ -1,24 +1,22 @@
1
1
  import { Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
2
2
  import { SkeletonAdapterComponent } from '@skeletonizer/utils';
3
3
  import { SkeletonizeDirective } from './skeletonize.directive';
4
- import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
4
+ import { NgTemplateOutlet } from '@angular/common';
5
5
  import * as i0 from "@angular/core";
6
6
  export class SkeletonizerSkeletonComponent extends SkeletonAdapterComponent {
7
7
  set configInput(config) {
8
8
  this.config = config;
9
9
  this.setupModels();
10
10
  }
11
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SkeletonizerSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
12
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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 }); }
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: "17.0.0", version: "18.2.7", type: SkeletonizerSkeletonComponent, isStandalone: true, selector: "skeletonizer-skeleton", inputs: { showSkeleton: "showSkeleton", scope: "scope", colorSchema: "colorSchema", configInput: ["config", "configInput"] }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n", styles: ["[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}skeletonizer-skeleton{display:contents}\n"], dependencies: [{ kind: "directive", type: SkeletonizeDirective, selector: "[skeletonize]", inputs: ["skeletonize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
13
13
  }
14
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
14
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
15
15
  type: Component,
16
16
  args: [{ selector: 'skeletonizer-skeleton', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
17
17
  SkeletonizeDirective,
18
- NgIf,
19
- NgFor,
20
18
  NgTemplateOutlet,
21
- ], template: "<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"] }]
19
+ ], template: "@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n", styles: ["[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}skeletonizer-skeleton{display:contents}\n"] }]
22
20
  }], propDecorators: { templateRef: [{
23
21
  type: ContentChild,
24
22
  args: [TemplateRef]
@@ -34,4 +32,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
34
32
  type: Input,
35
33
  args: [{ alias: 'config', required: true }]
36
34
  }] } });
37
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3NrZWxldG9uaXplci9zcmMvbGliL3NrZWxldG9uaXplci5za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9za2VsZXRvbml6ZXIvc3JjL2xpYi9za2VsZXRvbml6ZXIuc2tlbGV0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRixPQUFPLEVBQW9DLHdCQUF3QixFQUFpQixNQUFNLHFCQUFxQixDQUFDO0FBQ2hILE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBZWhFLE1BQU0sT0FBTyw2QkFBaUUsU0FBUSx3QkFBMkI7SUFPL0csSUFBdUQsV0FBVyxDQUFDLE1BQXdCO1FBQ3pGLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBRXJCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDOzhHQVhVLDZCQUE2QjtrR0FBN0IsNkJBQTZCLHdQQUMxQixXQUFXLHVFQ25CM0IsMGJBV0EsaXFCRENJLG9CQUFvQixtRkFDcEIsSUFBSSw2RkFDSixLQUFLLG1IQUNMLGdCQUFnQjs7MkZBR1AsNkJBQTZCO2tCQWJ6QyxTQUFTOytCQUNFLHVCQUF1QixpQkFHbEIsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1A7d0JBQ1Asb0JBQW9CO3dCQUNwQixJQUFJO3dCQUNKLEtBQUs7d0JBQ0wsZ0JBQWdCO3FCQUNqQjs4QkFHMEMsV0FBVztzQkFBckQsWUFBWTt1QkFBQyxXQUFXO2dCQUVTLFlBQVk7c0JBQTdDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNTLEtBQUs7c0JBQXRDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNULFdBQVc7c0JBQTFCLEtBQUs7Z0JBRWlELFdBQVc7c0JBQWpFLEtBQUs7dUJBQUMsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSW5wdXQsIFRlbXBsYXRlUmVmLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSVNrZWxldG9uaXplckNvbG9yU2NoZW1hLCBTY2hlbWEsIFNrZWxldG9uQWRhcHRlckNvbXBvbmVudCwgVFNjaGVtYUNvbmZpZyB9IGZyb20gJ0Bza2VsZXRvbml6ZXIvdXRpbHMnO1xuaW1wb3J0IHsgU2tlbGV0b25pemVEaXJlY3RpdmUgfSBmcm9tICcuL3NrZWxldG9uaXplLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBOZ0ZvciwgTmdJZiwgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NrZWxldG9uaXplci1za2VsZXRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9za2VsZXRvbml6ZXIuc2tlbGV0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9za2VsZXRvbml6ZXIuc2tlbGV0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1xuICAgIFNrZWxldG9uaXplRGlyZWN0aXZlLFxuICAgIE5nSWYsXG4gICAgTmdGb3IsXG4gICAgTmdUZW1wbGF0ZU91dGxldCxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU2tlbGV0b25pemVyU2tlbGV0b25Db21wb25lbnQ8VCBleHRlbmRzIG9iamVjdCwgU2NvcGUgZXh0ZW5kcyBUPiBleHRlbmRzIFNrZWxldG9uQWRhcHRlckNvbXBvbmVudDxUPiB7XG4gIEBDb250ZW50Q2hpbGQoVGVtcGxhdGVSZWYpIHB1YmxpYyByZWFkb25seSB0ZW1wbGF0ZVJlZiE6IFRlbXBsYXRlUmVmPHsgJGltcGxpY2l0OiBTY2hlbWE8VD4gfCBTY29wZSB9PjtcblxuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBwdWJsaWMgc2hvd1NrZWxldG9uITogYm9vbGVhbjtcbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgcHVibGljIHNjb3BlITogU2NvcGU7XG4gIEBJbnB1dCgpIHB1YmxpYyBjb2xvclNjaGVtYT86IElTa2VsZXRvbml6ZXJDb2xvclNjaGVtYTtcblxuICBASW5wdXQoeyBhbGlhczogJ2NvbmZpZycsIHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyBzZXQgY29uZmlnSW5wdXQoY29uZmlnOiBUU2NoZW1hQ29uZmlnPFQ+KSB7XG4gICAgdGhpcy5jb25maWcgPSBjb25maWc7XG5cbiAgICB0aGlzLnNldHVwTW9kZWxzKCk7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJzaG93U2tlbGV0b25cIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgbW9kZWwgb2Ygdmlld01vZGVsc1wiPlxuICAgIDxkaXYgW3NrZWxldG9uaXplXT1cImNvbG9yU2NoZW1hXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBtb2RlbCB9XCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuPC9uZy1jb250YWluZXI+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCIhc2hvd1NrZWxldG9uXCI+XG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0ZW1wbGF0ZVJlZjsgY29udGV4dDogeyAkaW1wbGljaXQ6IHNjb3BlIH1cIj48L25nLWNvbnRhaW5lcj5cbjwvbmctY29udGFpbmVyPlxuIl19
35
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3NrZWxldG9uaXplci9zcmMvbGliL3NrZWxldG9uaXplci5za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9za2VsZXRvbml6ZXIvc3JjL2xpYi9za2VsZXRvbml6ZXIuc2tlbGV0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRixPQUFPLEVBQW9DLHdCQUF3QixFQUFpQixNQUFNLHFCQUFxQixDQUFDO0FBQ2hILE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQWFuRCxNQUFNLE9BQU8sNkJBQWlFLFNBQVEsd0JBQTJCO0lBTy9HLElBQXVELFdBQVcsQ0FBQyxNQUF3QjtRQUN6RixJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUVyQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQzs4R0FYVSw2QkFBNkI7a0dBQTdCLDZCQUE2Qix3UEFDMUIsV0FBVyx1RUNqQjNCLDBWQVNBLGlxQkRHSSxvQkFBb0IsbUZBQ3BCLGdCQUFnQjs7MkZBR1AsNkJBQTZCO2tCQVh6QyxTQUFTOytCQUNFLHVCQUF1QixpQkFHbEIsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1A7d0JBQ1Asb0JBQW9CO3dCQUNwQixnQkFBZ0I7cUJBQ2pCOzhCQUcwQyxXQUFXO3NCQUFyRCxZQUFZO3VCQUFDLFdBQVc7Z0JBRVMsWUFBWTtzQkFBN0MsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1MsS0FBSztzQkFBdEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1QsV0FBVztzQkFBMUIsS0FBSztnQkFFaUQsV0FBVztzQkFBakUsS0FBSzt1QkFBQyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCwgVGVtcGxhdGVSZWYsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJU2tlbGV0b25pemVyQ29sb3JTY2hlbWEsIFNjaGVtYSwgU2tlbGV0b25BZGFwdGVyQ29tcG9uZW50LCBUU2NoZW1hQ29uZmlnIH0gZnJvbSAnQHNrZWxldG9uaXplci91dGlscyc7XG5pbXBvcnQgeyBTa2VsZXRvbml6ZURpcmVjdGl2ZSB9IGZyb20gJy4vc2tlbGV0b25pemUuZGlyZWN0aXZlJztcbmltcG9ydCB7IE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza2VsZXRvbml6ZXItc2tlbGV0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vc2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2tlbGV0b25pemVyLnNrZWxldG9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBTa2VsZXRvbml6ZURpcmVjdGl2ZSxcbiAgICBOZ1RlbXBsYXRlT3V0bGV0LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa2VsZXRvbml6ZXJTa2VsZXRvbkNvbXBvbmVudDxUIGV4dGVuZHMgb2JqZWN0LCBTY29wZSBleHRlbmRzIFQ+IGV4dGVuZHMgU2tlbGV0b25BZGFwdGVyQ29tcG9uZW50PFQ+IHtcbiAgQENvbnRlbnRDaGlsZChUZW1wbGF0ZVJlZikgcHVibGljIHJlYWRvbmx5IHRlbXBsYXRlUmVmITogVGVtcGxhdGVSZWY8eyAkaW1wbGljaXQ6IFNjaGVtYTxUPiB8IFNjb3BlIH0+O1xuXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyBzaG93U2tlbGV0b24hOiBib29sZWFuO1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBwdWJsaWMgc2NvcGUhOiBTY29wZTtcbiAgQElucHV0KCkgcHVibGljIGNvbG9yU2NoZW1hPzogSVNrZWxldG9uaXplckNvbG9yU2NoZW1hO1xuXG4gIEBJbnB1dCh7IGFsaWFzOiAnY29uZmlnJywgcmVxdWlyZWQ6IHRydWUgfSkgcHVibGljIHNldCBjb25maWdJbnB1dChjb25maWc6IFRTY2hlbWFDb25maWc8VD4pIHtcbiAgICB0aGlzLmNvbmZpZyA9IGNvbmZpZztcblxuICAgIHRoaXMuc2V0dXBNb2RlbHMoKTtcbiAgfVxufVxuIiwiQGlmIChzaG93U2tlbGV0b24pIHtcbiAgQGZvciAobW9kZWwgb2Ygdmlld01vZGVsczsgdHJhY2sgbW9kZWwudXVpZCkge1xuICAgIDxkaXYgW3NrZWxldG9uaXplXT1cImNvbG9yU2NoZW1hXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBtb2RlbCB9XCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIH1cbn0gQGVsc2Uge1xuICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBzY29wZSB9XCI+PC9uZy1jb250YWluZXI+XG59XG4iXX0=
package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Directive, Input, TemplateRef, Component, ViewEncapsulation, ContentChild } from '@angular/core';
3
3
  import { SkeletonDirective, SkeletonAdapterComponent } from '@skeletonizer/utils';
4
- import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
4
+ import { NgTemplateOutlet } from '@angular/common';
5
5
 
6
6
  class SkeletonizeDirective {
7
7
  constructor(el) {
@@ -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: "17.3.5", ngImport: i0, type: SkeletonizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
14
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: SkeletonizeDirective, isStandalone: true, selector: "[skeletonize]", inputs: { colorSchema: ["skeletonize", "colorSchema"] }, ngImport: i0 }); }
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: "17.3.5", ngImport: i0, type: SkeletonizeDirective, decorators: [{
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,17 +29,15 @@ 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: "17.3.5", ngImport: i0, type: SkeletonizerSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
33
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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 }); }
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: "17.0.0", version: "18.2.7", type: SkeletonizerSkeletonComponent, isStandalone: true, selector: "skeletonizer-skeleton", inputs: { showSkeleton: "showSkeleton", scope: "scope", colorSchema: "colorSchema", configInput: ["config", "configInput"] }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n", styles: ["[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}skeletonizer-skeleton{display:contents}\n"], dependencies: [{ kind: "directive", type: SkeletonizeDirective, selector: "[skeletonize]", inputs: ["skeletonize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
34
34
  }
35
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
35
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkeletonizerSkeletonComponent, decorators: [{
36
36
  type: Component,
37
37
  args: [{ selector: 'skeletonizer-skeleton', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
38
38
  SkeletonizeDirective,
39
- NgIf,
40
- NgFor,
41
39
  NgTemplateOutlet,
42
- ], template: "<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"] }]
40
+ ], template: "@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n", styles: ["[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}skeletonizer-skeleton{display:contents}\n"] }]
43
41
  }], propDecorators: { templateRef: [{
44
42
  type: ContentChild,
45
43
  args: [TemplateRef]
package/dist/skeletonizer/fesm2022/skeletonizer-angular.mjs.map CHANGED
@@ -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 { NgFor, NgIf, 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 NgIf,\n NgFor,\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","<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","/*\n * Public API Surface of skeletonizer\n */\n\nexport * from './lib/skeletonizer.skeleton.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"skeletonizer-angular.mjs","sources":["../../../projects/skeletonizer/src/lib/skeletonize.directive.ts","../../../projects/skeletonizer/src/lib/skeletonizer.skeleton.component.ts","../../../projects/skeletonizer/src/lib/skeletonizer.skeleton.component.html","../../../projects/skeletonizer/src/public-api.ts","../../../projects/skeletonizer/src/skeletonizer-angular.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';\nimport { ISkeletonizerColorSchema, SkeletonDirective } from '@skeletonizer/utils';\n\n@Directive({\n selector: '[skeletonize]',\n standalone: true,\n})\nexport class SkeletonizeDirective implements AfterViewInit {\n @Input({ alias: 'skeletonize' }) public colorSchema: ISkeletonizerColorSchema | undefined;\n\n public constructor(\n private readonly el: ElementRef,\n ) {}\n\n public ngAfterViewInit(): void {\n SkeletonDirective.skeletonizeProjectedTemplate(this.el.nativeElement, this.colorSchema);\n }\n}\n","import { Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { ISkeletonizerColorSchema, Schema, SkeletonAdapterComponent, TSchemaConfig } from '@skeletonizer/utils';\nimport { SkeletonizeDirective } from './skeletonize.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n selector: 'skeletonizer-skeleton',\n templateUrl: './skeletonizer.skeleton.component.html',\n styleUrls: ['./skeletonizer.skeleton.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: true,\n imports: [\n SkeletonizeDirective,\n NgTemplateOutlet,\n ],\n})\nexport class SkeletonizerSkeletonComponent<T extends object, Scope extends T> extends SkeletonAdapterComponent<T> {\n @ContentChild(TemplateRef) public readonly templateRef!: TemplateRef<{ $implicit: Schema<T> | Scope }>;\n\n @Input({ required: true }) public showSkeleton!: boolean;\n @Input({ required: true }) public scope!: Scope;\n @Input() public colorSchema?: ISkeletonizerColorSchema;\n\n @Input({ alias: 'config', required: true }) public set configInput(config: TSchemaConfig<T>) {\n this.config = config;\n\n this.setupModels();\n }\n}\n","@if (showSkeleton) {\n @for (model of viewModels; track model.uuid) {\n <div [skeletonize]=\"colorSchema\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: model }\"></ng-container>\n </div>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: scope }\"></ng-container>\n}\n","/*\n * Public API Surface of skeletonizer\n */\n\nexport * from './lib/skeletonizer.skeleton.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skeletonizer/angular",
3
- "version": "0.0.10-alpha.0",
3
+ "version": "0.0.20-alpha.0",
4
4
  "description": "The way to skeletonize your Angular components",
5
5
  "author": "Luka Varga",
6
6
  "license": "MIT",
@@ -54,27 +54,28 @@
54
54
  "**/*.{ts,js}": "eslint --fix"
55
55
  },
56
56
  "peerDependencies": {
57
- "@angular/animations": "^17.3.2",
58
- "@angular/common": "^17.3.2",
59
- "@angular/compiler": "^17.3.2",
60
- "@angular/core": "^17.3.2",
61
- "@angular/forms": "^17.3.2",
62
- "@angular/platform-browser": "^17.3.2",
63
- "@angular/platform-browser-dynamic": "^17.3.2",
64
- "@angular/router": "^17.3.2",
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
+ "@skeletonizer/utils": "0.0.20-alpha.0",
65
66
  "rxjs": "~7.8.1",
66
67
  "tslib": "^2.6.2",
67
68
  "zone.js": "~0.14.4"
68
69
  },
69
70
  "devDependencies": {
70
- "@angular-devkit/build-angular": "^17.3.3",
71
- "@angular-eslint/builder": "17.3.0",
72
- "@angular-eslint/eslint-plugin": "17.3.0",
73
- "@angular-eslint/eslint-plugin-template": "17.3.0",
74
- "@angular-eslint/schematics": "17.3.0",
75
- "@angular-eslint/template-parser": "17.3.0",
76
- "@angular/cli": "~17.3.3",
77
- "@angular/compiler-cli": "^17.3.2",
71
+ "@angular-devkit/build-angular": "^18.2.7",
72
+ "@angular-eslint/builder": "18.3.1",
73
+ "@angular-eslint/eslint-plugin": "18.3.1",
74
+ "@angular-eslint/eslint-plugin-template": "18.3.1",
75
+ "@angular-eslint/schematics": "18.3.1",
76
+ "@angular-eslint/template-parser": "18.3.1",
77
+ "@angular/cli": "~18.2.7",
78
+ "@angular/compiler-cli": "^18.2.7",
78
79
  "@types/jasmine": "~4.6.4",
79
80
  "@typescript-eslint/eslint-plugin": "^7.5.0",
80
81
  "@typescript-eslint/parser": "^7.5.0",
@@ -85,8 +86,8 @@
85
86
  "karma-coverage": "~2.2.1",
86
87
  "karma-jasmine": "~5.1.0",
87
88
  "karma-jasmine-html-reporter": "~2.1.0",
88
- "ng-packagr": "^17.3.0",
89
+ "ng-packagr": "^18.2.1",
89
90
  "typescript": "~5.4.3"
90
91
  },
91
- "gitHead": "3cfb823e233c3b596348d628c8d561b02f5d7ca7"
92
+ "gitHead": "8c8651dfea6a80f5b85e17ff097e6e23024cc7ac"
92
93
  }