@shimmer-from-structure/angular 2.2.3 → 2.3.0

package/src/shimmer.component.ts

@@ -0,0 +1,277 @@
+import {
+  Component,
+  input,
+  signal,
+  computed,
+  effect,
+  ElementRef,
+  viewChild,
+  AfterViewInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  inject,
+  PLATFORM_ID,
+} from '@angular/core';
+import { NgIf, NgFor, isPlatformBrowser } from '@angular/common';
+import {
+  extractElementInfo,
+  createResizeObserver,
+  type ElementInfo,
+} from '@shimmer-from-structure/core';
+import { injectShimmerConfig } from './shimmer-config.service';
+
+/**
+ * Shimmer component that creates loading skeleton overlays based on content structure.
+ * Automatically measures projected content and creates matching shimmer blocks.
+ *
+ * @example
+ * ```html
+ * <shimmer [loading]="isLoading">
+ *   <div class="card">
+ *     <h2>{{ title }}</h2>
+ *     <p>{{ description }}</p>
+ *   </div>
+ * </shimmer>
+ * ```
+ */
+@Component({
+  selector: 'shimmer',
+  standalone: true,
+  imports: [NgIf, NgFor],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div style="position: relative;">
+      <!-- Always render content -->
+      <div
+        #measureContainer
+        [class.shimmer-measure-container]="loading()"
+        [attr.aria-hidden]="loading() ? 'true' : null"
+        [style.pointer-events]="loading() ? 'none' : null"
+      >
+        <ng-content></ng-content>
+      </div>
+
+      <!-- Shimmer overlay - only when loading -->
+      @if (loading()) {
+        <div
+          style="
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            overflow: hidden;
+            pointer-events: none;
+          "
+        >
+          @for (element of elements(); track $index) {
+            <div
+              [style.position]="'absolute'"
+              [style.left.px]="element.x"
+              [style.top.px]="element.y"
+              [style.width.px]="element.width"
+              [style.height.px]="element.height"
+              [style.backgroundColor]="resolvedBackgroundColor()"
+              [style.borderRadius]="
+                element.borderRadius === '0px'
+                  ? resolvedFallbackBorderRadius() + 'px'
+                  : element.borderRadius
+              "
+              [style.overflow]="'hidden'"
+            >
+              <div
+                class="shimmer-animation-element"
+                [style.background]="
+                  'linear-gradient(90deg, transparent, ' + resolvedShimmerColor() + ', transparent)'
+                "
+                [style.animationDuration]="resolvedDuration() + 's'"
+              ></div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: contents;
+      }
+
+      .shimmer-measure-container * {
+        color: transparent !important;
+      }
+
+      .shimmer-measure-container img,
+      .shimmer-measure-container svg,
+      .shimmer-measure-container video {
+        opacity: 0;
+      }
+
+      .shimmer-animation-element {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        animation: shimmer-animation 1.5s infinite;
+      }
+
+      @keyframes shimmer-animation {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(100%);
+        }
+      }
+    `,
+  ],
+})
+export class ShimmerComponent implements AfterViewInit, OnDestroy {
+  // Inputs using Angular signals
+  loading = input<boolean>(true);
+  shimmerColor = input<string | undefined>(undefined);
+  backgroundColor = input<string | undefined>(undefined);
+  duration = input<number | undefined>(undefined);
+  fallbackBorderRadius = input<number | undefined>(undefined);
+
+  // View child reference
+  measureContainer = viewChild<ElementRef<HTMLDivElement>>('measureContainer');
+
+  // Internal state
+  elements = signal<ElementInfo[]>([]);
+
+  // Inject dependencies
+  private contextConfig = injectShimmerConfig();
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+
+  // Resolved values (props > context > defaults)
+  resolvedShimmerColor = computed(() => this.shimmerColor() ?? this.contextConfig.shimmerColor);
+  resolvedBackgroundColor = computed(
+    () => this.backgroundColor() ?? this.contextConfig.backgroundColor
+  );
+  resolvedDuration = computed(() => this.duration() ?? this.contextConfig.duration);
+  resolvedFallbackBorderRadius = computed(
+    () => this.fallbackBorderRadius() ?? this.contextConfig.fallbackBorderRadius
+  );
+
+  // Cleanup function for ResizeObserver
+  private resizeCleanup: (() => void) | undefined;
+  private mutationObserver: MutationObserver | undefined;
+
+  constructor() {
+    // Effect to re-measure when loading state changes
+    effect((onCleanup) => {
+      // Skip effect on server
+      if (!this.isBrowser) return;
+
+      const isLoading = this.loading();
+      const container = this.measureContainer();
+
+      if (isLoading && container) {
+        // Clean up existing observers before setting up new ones
+        this.cleanup();
+
+        // Set up observers for this loading session
+        this.setupObservers();
+
+        // Defer measurement to next frame to ensure content is rendered
+        requestAnimationFrame(() => this.measureElements());
+      } else {
+        // Cleanup when not loading
+        this.cleanup();
+      }
+
+      // Cleanup on effect re-run or component destruction
+      onCleanup(() => {
+        this.cleanup();
+      });
+    });
+  }
+
+  ngAfterViewInit(): void {
+    // Effect will handle setup when container becomes available
+  }
+
+  ngOnDestroy(): void {
+    this.cleanup();
+  }
+
+  private setupObservers(): void {
+    if (!this.isBrowser) return;
+
+    const container = this.measureContainer()?.nativeElement;
+    if (!container) return;
+
+    // Set up ResizeObserver
+    this.resizeCleanup = createResizeObserver(container, () => this.measureElements());
+
+    // Set up MutationObserver for content changes
+    this.mutationObserver = new MutationObserver(() => {
+      if (this.loading()) {
+        this.measureElements();
+      }
+    });
+
+    this.mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: false,
+    });
+  }
+
+  private measureElements(): void {
+    if (!this.isBrowser) return;
+
+    const container = this.measureContainer()?.nativeElement;
+    if (!container || !this.loading()) return;
+
+    // Temporarily disconnect mutation observer to avoid recursion
+    this.mutationObserver?.disconnect();
+
+    const containerRect = container.getBoundingClientRect();
+    const extractedElements: ElementInfo[] = [];
+
+    Array.from(container.children).forEach((child) => {
+      extractedElements.push(...extractElementInfo(child, containerRect));
+    });
+
+    this.elements.set(extractedElements);
+
+    // Reconnect mutation observer
+    if (this.mutationObserver && container) {
+      this.mutationObserver.observe(container, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: false,
+      });
+    }
+  }
+
+  private cleanup(): void {
+    if (this.resizeCleanup) {
+      this.resizeCleanup();
+      this.resizeCleanup = undefined;
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = undefined;
+    }
+  }
+
+  /**
+   * Manually trigger re-measurement of elements.
+   * Useful when content changes programmatically.
+   */
+  remeasure(): void {
+    if (this.isBrowser) {
+      this.measureElements();
+    }
+  }
+}

package/src/test/setup.ts

@@ -0,0 +1,52 @@
+import 'zone.js';
+import 'zone.js/testing';
+import { vi, beforeAll } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+beforeAll(() => {
+  TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+});
+
+// Mock getBoundingClientRect since jsdom doesn't support layout
+Element.prototype.getBoundingClientRect = vi.fn(() => ({
+  width: 100,
+  height: 50,
+  top: 0,
+  left: 0,
+  bottom: 50,
+  right: 100,
+  x: 0,
+  y: 0,
+  toJSON: () => {},
+}));
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+// Mock getComputedStyle
+const originalGetComputedStyle = window.getComputedStyle;
+window.getComputedStyle = (elt) => {
+  const styles = originalGetComputedStyle(elt);
+  // Add borderRadius support for our tests
+  if (!styles.borderRadius) {
+    Object.defineProperty(styles, 'borderRadius', {
+      value: '4px',
+      writable: true,
+    });
+  }
+  return styles;
+};
+
+// Mock requestAnimationFrame
+global.requestAnimationFrame = (cb) => {
+  setTimeout(cb, 0);
+  return 0;
+};

package/src/types.ts

@@ -0,0 +1,34 @@
+/**
+ * Input properties for the Shimmer component
+ */
+export interface ShimmerInputs {
+  /**
+   * Whether the component is in loading state
+   * @default true
+   */
+  loading?: boolean;
+
+  /**
+   * Color of the shimmer effect gradient
+   */
+  shimmerColor?: string;
+
+  /**
+   * Background color of the shimmer blocks
+   */
+  backgroundColor?: string;
+
+  /**
+   * Duration of one shimmer animation cycle in seconds
+   */
+  duration?: number;
+
+  /**
+   * Fallback border radius (in pixels) when element has no border-radius
+   * @default 4
+   */
+  fallbackBorderRadius?: number;
+}
+
+// Re-export core types for convenience
+export type { ShimmerConfig, ShimmerContextValue, ElementInfo } from '@shimmer-from-structure/core';

package/tsconfig.eslint.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts", "vitest.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "DOM"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.test.ts", "node_modules", "dist"]
+}

package/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    pool: 'threads',
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    include: ['src/**/*.test.ts'],
+    css: true,
+  },
+});

package/fesm2022/shimmer-from-structure-angular.mjs

@@ -1,298 +0,0 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, viewChild, signal, PLATFORM_ID, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { isPlatformBrowser, NgIf, NgFor } from '@angular/common';
-import { shimmerDefaults, createResizeObserver, extractElementInfo } from '@shimmer-from-structure/core';
-export { shimmerDefaults } from '@shimmer-from-structure/core';
-
-/**
- * Injection token for global shimmer configuration.
- * Use `provideShimmerConfig()` to configure in your app.
- */
-const SHIMMER_CONFIG = new InjectionToken('SHIMMER_CONFIG');
-/**
- * Provider function for shimmer configuration.
- * Use in your app's providers array.
- *
- * @example
- * ```typescript
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *     provideShimmerConfig({
- *       shimmerColor: 'rgba(255, 255, 255, 0.3)',
- *       duration: 1.5
- *     })
- *   ]
- * });
- * ```
- */
-function provideShimmerConfig(config) {
-    return { provide: SHIMMER_CONFIG, useValue: config };
-}
-/**
- * Inject and resolve shimmer configuration.
- * Merges injected config with defaults.
- * Returns fully resolved ShimmerContextValue with all properties defined.
- */
-function injectShimmerConfig() {
-    const config = inject(SHIMMER_CONFIG, { optional: true }) ?? {};
-    return {
-        shimmerColor: config.shimmerColor ?? shimmerDefaults.shimmerColor,
-        backgroundColor: config.backgroundColor ?? shimmerDefaults.backgroundColor,
-        duration: config.duration ?? shimmerDefaults.duration,
-        fallbackBorderRadius: config.fallbackBorderRadius ?? shimmerDefaults.fallbackBorderRadius,
-    };
-}
-
-/**
- * Shimmer component that creates loading skeleton overlays based on content structure.
- * Automatically measures projected content and creates matching shimmer blocks.
- *
- * @example
- * ```html
- * <shimmer [loading]="isLoading">
- *   <div class="card">
- *     <h2>{{ title }}</h2>
- *     <p>{{ description }}</p>
- *   </div>
- * </shimmer>
- * ```
- */
-class ShimmerComponent {
-    // Inputs using Angular signals
-    loading = input(true);
-    shimmerColor = input(undefined);
-    backgroundColor = input(undefined);
-    duration = input(undefined);
-    fallbackBorderRadius = input(undefined);
-    // View child reference
-    measureContainer = viewChild('measureContainer');
-    // Internal state
-    elements = signal([]);
-    // Inject dependencies
-    contextConfig = injectShimmerConfig();
-    platformId = inject(PLATFORM_ID);
-    isBrowser = isPlatformBrowser(this.platformId);
-    // Resolved values (props > context > defaults)
-    resolvedShimmerColor = computed(() => this.shimmerColor() ?? this.contextConfig.shimmerColor);
-    resolvedBackgroundColor = computed(() => this.backgroundColor() ?? this.contextConfig.backgroundColor);
-    resolvedDuration = computed(() => this.duration() ?? this.contextConfig.duration);
-    resolvedFallbackBorderRadius = computed(() => this.fallbackBorderRadius() ?? this.contextConfig.fallbackBorderRadius);
-    // Cleanup function for ResizeObserver
-    resizeCleanup;
-    mutationObserver;
-    constructor() {
-        // Effect to re-measure when loading state changes
-        effect((onCleanup) => {
-            // Skip effect on server
-            if (!this.isBrowser)
-                return;
-            const isLoading = this.loading();
-            const container = this.measureContainer();
-            if (isLoading && container) {
-                // Clean up existing observers before setting up new ones
-                this.cleanup();
-                // Set up observers for this loading session
-                this.setupObservers();
-                // Defer measurement to next frame to ensure content is rendered
-                requestAnimationFrame(() => this.measureElements());
-            }
-            else {
-                // Cleanup when not loading
-                this.cleanup();
-            }
-            // Cleanup on effect re-run or component destruction
-            onCleanup(() => {
-                this.cleanup();
-            });
-        });
-    }
-    ngAfterViewInit() {
-        // Effect will handle setup when container becomes available
-    }
-    ngOnDestroy() {
-        this.cleanup();
-    }
-    setupObservers() {
-        if (!this.isBrowser)
-            return;
-        const container = this.measureContainer()?.nativeElement;
-        if (!container)
-            return;
-        // Set up ResizeObserver
-        this.resizeCleanup = createResizeObserver(container, () => this.measureElements());
-        // Set up MutationObserver for content changes
-        this.mutationObserver = new MutationObserver(() => {
-            if (this.loading()) {
-                this.measureElements();
-            }
-        });
-        this.mutationObserver.observe(container, {
-            childList: true,
-            subtree: true,
-            characterData: true,
-            attributes: false,
-        });
-    }
-    measureElements() {
-        if (!this.isBrowser)
-            return;
-        const container = this.measureContainer()?.nativeElement;
-        if (!container || !this.loading())
-            return;
-        // Temporarily disconnect mutation observer to avoid recursion
-        this.mutationObserver?.disconnect();
-        const containerRect = container.getBoundingClientRect();
-        const extractedElements = [];
-        Array.from(container.children).forEach((child) => {
-            extractedElements.push(...extractElementInfo(child, containerRect));
-        });
-        this.elements.set(extractedElements);
-        // Reconnect mutation observer
-        if (this.mutationObserver && container) {
-            this.mutationObserver.observe(container, {
-                childList: true,
-                subtree: true,
-                characterData: true,
-                attributes: false,
-            });
-        }
-    }
-    cleanup() {
-        if (this.resizeCleanup) {
-            this.resizeCleanup();
-            this.resizeCleanup = undefined;
-        }
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-            this.mutationObserver = undefined;
-        }
-    }
-    /**
-     * Manually trigger re-measurement of elements.
-     * Useful when content changes programmatically.
-     */
-    remeasure() {
-        if (this.isBrowser) {
-            this.measureElements();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ShimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ShimmerComponent, isStandalone: true, selector: "shimmer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, shimmerColor: { classPropertyName: "shimmerColor", publicName: "shimmerColor", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, fallbackBorderRadius: { classPropertyName: "fallbackBorderRadius", publicName: "fallbackBorderRadius", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "measureContainer", first: true, predicate: ["measureContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div style="position: relative;">
-      <!-- Always render content -->
-      <div
-        #measureContainer
-        [class.shimmer-measure-container]="loading()"
-        [attr.aria-hidden]="loading() ? 'true' : null"
-        [style.pointer-events]="loading() ? 'none' : null"
-      >
-        <ng-content></ng-content>
-      </div>
-
-      <!-- Shimmer overlay - only when loading -->
-      @if (loading()) {
-        <div
-          style="
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            overflow: hidden;
-            pointer-events: none;
-          "
-        >
-          @for (element of elements(); track $index) {
-            <div
-              [style.position]="'absolute'"
-              [style.left.px]="element.x"
-              [style.top.px]="element.y"
-              [style.width.px]="element.width"
-              [style.height.px]="element.height"
-              [style.backgroundColor]="resolvedBackgroundColor()"
-              [style.borderRadius]="
-                element.borderRadius === '0px'
-                  ? resolvedFallbackBorderRadius() + 'px'
-                  : element.borderRadius
-              "
-              [style.overflow]="'hidden'"
-            >
-              <div
-                class="shimmer-animation-element"
-                [style.background]="
-                  'linear-gradient(90deg, transparent, ' + resolvedShimmerColor() + ', transparent)'
-                "
-                [style.animationDuration]="resolvedDuration() + 's'"
-              ></div>
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:contents}.shimmer-measure-container *{color:transparent!important}.shimmer-measure-container img,.shimmer-measure-container svg,.shimmer-measure-container video{opacity:0}.shimmer-animation-element{position:absolute;top:0;left:0;width:100%;height:100%;animation:shimmer-animation 1.5s infinite}@keyframes shimmer-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ShimmerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'shimmer', standalone: true, imports: [NgIf, NgFor], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div style="position: relative;">
-      <!-- Always render content -->
-      <div
-        #measureContainer
-        [class.shimmer-measure-container]="loading()"
-        [attr.aria-hidden]="loading() ? 'true' : null"
-        [style.pointer-events]="loading() ? 'none' : null"
-      >
-        <ng-content></ng-content>
-      </div>
-
-      <!-- Shimmer overlay - only when loading -->
-      @if (loading()) {
-        <div
-          style="
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            overflow: hidden;
-            pointer-events: none;
-          "
-        >
-          @for (element of elements(); track $index) {
-            <div
-              [style.position]="'absolute'"
-              [style.left.px]="element.x"
-              [style.top.px]="element.y"
-              [style.width.px]="element.width"
-              [style.height.px]="element.height"
-              [style.backgroundColor]="resolvedBackgroundColor()"
-              [style.borderRadius]="
-                element.borderRadius === '0px'
-                  ? resolvedFallbackBorderRadius() + 'px'
-                  : element.borderRadius
-              "
-              [style.overflow]="'hidden'"
-            >
-              <div
-                class="shimmer-animation-element"
-                [style.background]="
-                  'linear-gradient(90deg, transparent, ' + resolvedShimmerColor() + ', transparent)'
-                "
-                [style.animationDuration]="resolvedDuration() + 's'"
-              ></div>
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `, styles: [":host{display:contents}.shimmer-measure-container *{color:transparent!important}.shimmer-measure-container img,.shimmer-measure-container svg,.shimmer-measure-container video{opacity:0}.shimmer-animation-element{position:absolute;top:0;left:0;width:100%;height:100%;animation:shimmer-animation 1.5s infinite}@keyframes shimmer-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
-        }], ctorParameters: () => [] });
-
-// Public API Surface
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SHIMMER_CONFIG, ShimmerComponent, injectShimmerConfig, provideShimmerConfig };
-//# sourceMappingURL=shimmer-from-structure-angular.mjs.map