@shimmer-from-structure/angular 2.2.1 → 2.2.3

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

@@ -0,0 +1,298 @@
+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

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

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

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@shimmer-from-structure/angular" />
+export * from './public-api';

package/package.json

@@ -1,46 +1,38 @@
 {
-    "name": "@shimmer-from-structure/angular",
-    "version": "2.2.1",
-    "description": "Angular adapter for shimmer-from-structure",
-    "peerDependencies": {
-        "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0",
-        "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0"
+  "name": "@shimmer-from-structure/angular",
+  "version": "2.2.3",
+  "description": "Angular adapter for shimmer-from-structure",
+  "peerDependencies": {
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0"
+  },
+  "dependencies": {
+    "@shimmer-from-structure/core": "*",
+    "tslib": "^2.3.0"
+  },
+  "keywords": [
+    "angular",
+    "shimmer",
+    "skeleton",
+    "loading"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/darula-hpp/shimmer-from-structure.git",
+    "directory": "packages/angular"
+  },
+  "author": "Olebogeng Mbedzi",
+  "license": "MIT",
+  "module": "fesm2022/shimmer-from-structure-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
     },
-    "dependencies": {
-        "@shimmer-from-structure/core": "*"
-    },
-    "devDependencies": {
-        "@angular/compiler": "^19.0.0",
-        "@angular/compiler-cli": "^19.0.0",
-        "@angular/core": "^19.0.0",
-        "@angular/common": "^19.0.0",
-        "@angular/platform-browser": "^19.0.0",
-        "@angular/platform-browser-dynamic": "^19.0.0",
-        "ng-packagr": "^19.0.0",
-        "typescript": "~5.6.0",
-        "vitest": "^4.0.17",
-        "jsdom": "^27.4.0",
-        "@testing-library/dom": "^10.4.1",
-        "zone.js": "~0.15.0",
-        "rxjs": "~7.8.0"
-    },
-    "scripts": {
-        "build": "ng-packagr -p ng-package.json",
-        "test": "vitest run",
-        "format": "prettier --write .",
-        "prepublishOnly": "cp ../../README.md ."
-    },
-    "keywords": [
-        "angular",
-        "shimmer",
-        "skeleton",
-        "loading"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/darula-hpp/shimmer-from-structure.git",
-        "directory": "packages/angular"
-    },
-    "author": "Olebogeng Mbedzi",
-    "license": "MIT"
-}
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/shimmer-from-structure-angular.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/public-api.d.ts

@@ -0,0 +1,3 @@
+export { ShimmerComponent } from './shimmer.component';
+export { SHIMMER_CONFIG, provideShimmerConfig, injectShimmerConfig, shimmerDefaults, } from './shimmer-config.service';
+export type { ShimmerInputs, ShimmerConfig, ShimmerContextValue, ElementInfo, } from './types';

package/{src/shimmer-config.service.ts → shimmer-config.service.d.ts}

@@ -1,13 +1,11 @@
-import { InjectionToken, inject } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import type { ShimmerConfig, ShimmerContextValue } from '@shimmer-from-structure/core';
 import { shimmerDefaults } from '@shimmer-from-structure/core';
-
 /**
  * Injection token for global shimmer configuration.
  * Use `provideShimmerConfig()` to configure in your app.
  */
-export const SHIMMER_CONFIG = new InjectionToken<ShimmerConfig>('SHIMMER_CONFIG');
-
+export declare const SHIMMER_CONFIG: InjectionToken<ShimmerConfig>;
 /**
  * Provider function for shimmer configuration.
  * Use in your app's providers array.
@@ -24,25 +22,14 @@ export const SHIMMER_CONFIG = new InjectionToken<ShimmerConfig>('SHIMMER_CONFIG'
  * });
  * ```
  */
-export function provideShimmerConfig(config: ShimmerConfig) {
-    return { provide: SHIMMER_CONFIG, useValue: config };
-}
-
+export declare function provideShimmerConfig(config: ShimmerConfig): {
+    provide: InjectionToken<ShimmerConfig>;
+    useValue: ShimmerConfig;
+};
 /**
  * Inject and resolve shimmer configuration.
  * Merges injected config with defaults.
  * Returns fully resolved ShimmerContextValue with all properties defined.
  */
-export function injectShimmerConfig(): ShimmerContextValue {
-    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,
-    };
-}
-
-// Re-export defaults for testing and reference
+export declare function injectShimmerConfig(): ShimmerContextValue;
 export { shimmerDefaults };

package/shimmer.component.d.ts

@@ -0,0 +1,48 @@
+import { ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { type ElementInfo } from '@shimmer-from-structure/core';
+import * as i0 from "@angular/core";
+/**
+ * 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>
+ * ```
+ */
+export declare class ShimmerComponent implements AfterViewInit, OnDestroy {
+    loading: import("@angular/core").InputSignal<boolean>;
+    shimmerColor: import("@angular/core").InputSignal<string>;
+    backgroundColor: import("@angular/core").InputSignal<string>;
+    duration: import("@angular/core").InputSignal<number>;
+    fallbackBorderRadius: import("@angular/core").InputSignal<number>;
+    measureContainer: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
+    elements: import("@angular/core").WritableSignal<ElementInfo[]>;
+    private contextConfig;
+    private platformId;
+    private isBrowser;
+    resolvedShimmerColor: import("@angular/core").Signal<string>;
+    resolvedBackgroundColor: import("@angular/core").Signal<string>;
+    resolvedDuration: import("@angular/core").Signal<number>;
+    resolvedFallbackBorderRadius: import("@angular/core").Signal<number>;
+    private resizeCleanup;
+    private mutationObserver;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private setupObservers;
+    private measureElements;
+    private cleanup;
+    /**
+     * Manually trigger re-measurement of elements.
+     * Useful when content changes programmatically.
+     */
+    remeasure(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ShimmerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ShimmerComponent, "shimmer", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "shimmerColor": { "alias": "shimmerColor"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "fallbackBorderRadius": { "alias": "fallbackBorderRadius"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/{src/types.ts → types.d.ts}

@@ -1,4 +1,3 @@
-
 /**
  * Input properties for the Shimmer component
  */
@@ -8,28 +7,22 @@ export interface ShimmerInputs {
      * @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/ng-package.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "allowedNonPeerDependencies": ["@shimmer-from-structure/core"]
-}

package/src/public-api.ts

@@ -1,14 +0,0 @@
-// Public API Surface
-export { ShimmerComponent } from './shimmer.component';
-export {
-    SHIMMER_CONFIG,
-    provideShimmerConfig,
-    injectShimmerConfig,
-    shimmerDefaults,
-} from './shimmer-config.service';
-export type {
-    ShimmerInputs,
-    ShimmerConfig,
-    ShimmerContextValue,
-    ElementInfo,
-} from './types';

package/src/shimmer-config.service.test.ts

@@ -1,88 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { TestBed } from '@angular/core/testing';
-import {
-    provideShimmerConfig,
-    injectShimmerConfig,
-    shimmerDefaults,
-    SHIMMER_CONFIG,
-} from './shimmer-config.service';
-
-describe('shimmer-config.service', () => {
-    describe('shimmerDefaults', () => {
-        it('exports default values', () => {
-            expect(shimmerDefaults).toBeDefined();
-            expect(shimmerDefaults.shimmerColor).toBeDefined();
-            expect(shimmerDefaults.backgroundColor).toBeDefined();
-            expect(shimmerDefaults.duration).toBeDefined();
-            expect(shimmerDefaults.fallbackBorderRadius).toBeDefined();
-        });
-    });
-
-    describe('provideShimmerConfig', () => {
-        it('creates a provider object', () => {
-            const config = { shimmerColor: '#fff', duration: 2 };
-            const provider = provideShimmerConfig(config);
-
-            expect(provider.provide).toBe(SHIMMER_CONFIG);
-            expect(provider.useValue).toBe(config);
-        });
-    });
-
-    describe('injectShimmerConfig', () => {
-        it('returns defaults when no provider is configured', () => {
-            TestBed.configureTestingModule({});
-
-            TestBed.runInInjectionContext(() => {
-                const config = injectShimmerConfig();
-
-                expect(config.shimmerColor).toBe(shimmerDefaults.shimmerColor);
-                expect(config.backgroundColor).toBe(shimmerDefaults.backgroundColor);
-                expect(config.duration).toBe(shimmerDefaults.duration);
-                expect(config.fallbackBorderRadius).toBe(shimmerDefaults.fallbackBorderRadius);
-            });
-        });
-
-        it('merges provided config with defaults', () => {
-            TestBed.configureTestingModule({
-                providers: [
-                    provideShimmerConfig({
-                        shimmerColor: 'rgba(255, 255, 255, 0.8)',
-                        duration: 3,
-                    }),
-                ],
-            });
-
-            TestBed.runInInjectionContext(() => {
-                const config = injectShimmerConfig();
-
-                expect(config.shimmerColor).toBe('rgba(255, 255, 255, 0.8)');
-                expect(config.duration).toBe(3);
-                // Should use defaults for non-provided values
-                expect(config.backgroundColor).toBe(shimmerDefaults.backgroundColor);
-                expect(config.fallbackBorderRadius).toBe(shimmerDefaults.fallbackBorderRadius);
-            });
-        });
-
-        it('returns fully resolved ShimmerContextValue', () => {
-            TestBed.configureTestingModule({
-                providers: [
-                    provideShimmerConfig({
-                        shimmerColor: '#aaa',
-                        backgroundColor: '#bbb',
-                        duration: 1.5,
-                        fallbackBorderRadius: 10,
-                    }),
-                ],
-            });
-
-            TestBed.runInInjectionContext(() => {
-                const config = injectShimmerConfig();
-
-                expect(config.shimmerColor).toBe('#aaa');
-                expect(config.backgroundColor).toBe('#bbb');
-                expect(config.duration).toBe(1.5);
-                expect(config.fallbackBorderRadius).toBe(10);
-            });
-        });
-    });
-});

package/src/shimmer.component.test.ts

@@ -1,153 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { Component } from '@angular/core';
-import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
-import { ShimmerComponent } from './shimmer.component';
-import { provideShimmerConfig, SHIMMER_CONFIG } from './shimmer-config.service';
-
-// Test wrapper component for content projection
-@Component({
-    selector: 'test-host',
-    standalone: true,
-    imports: [ShimmerComponent],
-    template: `
-    <shimmer [loading]="loading">
-      <div class="test-content" style="width: 100px; height: 50px;">Content</div>
-    </shimmer>
-  `,
-})
-class TestHostComponent {
-    loading = true;
-}
-
-describe('ShimmerComponent', () => {
-    let fixture: ComponentFixture<TestHostComponent>;
-    let hostComponent: TestHostComponent;
-
-    beforeEach(async () => {
-        vi.useFakeTimers();
-
-        await TestBed.configureTestingModule({
-            imports: [TestHostComponent, ShimmerComponent],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(TestHostComponent);
-        hostComponent = fixture.componentInstance;
-    });
-
-    it('renders children normally when loading=false', fakeAsync(() => {
-        hostComponent.loading = false;
-        fixture.detectChanges();
-        tick();
-
-        const content = fixture.nativeElement.querySelector('.test-content');
-        expect(content).toBeTruthy();
-        expect(content.textContent).toBe('Content');
-
-        // Should not have the measure container when not loading
-        const measureContainer = fixture.nativeElement.querySelector('.shimmer-measure-container');
-        expect(measureContainer).toBeFalsy();
-    }));
-
-    it('renders shimmer structure when loading=true', fakeAsync(() => {
-        hostComponent.loading = true;
-        fixture.detectChanges();
-        tick();
-
-        // Should render the measure container
-        const measureContainer = fixture.nativeElement.querySelector('.shimmer-measure-container');
-        expect(measureContainer).toBeTruthy();
-    }));
-
-    it('applies transparent text style to measure container', fakeAsync(() => {
-        hostComponent.loading = true;
-        fixture.detectChanges();
-        tick();
-
-        // Check that the measure container has the class
-        const measureContainer = fixture.nativeElement.querySelector('.shimmer-measure-container');
-        expect(measureContainer).toBeTruthy();
-        expect(measureContainer.classList.contains('shimmer-measure-container')).toBe(true);
-    }));
-});
-
-describe('ShimmerComponent with config provider', () => {
-    let fixture: ComponentFixture<TestHostComponent>;
-
-    beforeEach(async () => {
-        vi.useFakeTimers();
-
-        await TestBed.configureTestingModule({
-            imports: [TestHostComponent, ShimmerComponent],
-            providers: [
-                provideShimmerConfig({
-                    shimmerColor: 'rgba(255, 0, 0, 0.5)',
-                    backgroundColor: '#ff0000',
-                    duration: 2,
-                    fallbackBorderRadius: 8,
-                }),
-            ],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(TestHostComponent);
-    });
-
-    it('uses provided config values', fakeAsync(() => {
-        fixture.componentInstance.loading = true;
-        fixture.detectChanges();
-        tick();
-
-        // The config should be injected - we can verify by checking the SHIMMER_CONFIG token
-        const config = TestBed.inject(SHIMMER_CONFIG);
-        expect(config.shimmerColor).toBe('rgba(255, 0, 0, 0.5)');
-        expect(config.backgroundColor).toBe('#ff0000');
-        expect(config.duration).toBe(2);
-        expect(config.fallbackBorderRadius).toBe(8);
-    }));
-});
-
-describe('ShimmerComponent input overrides', () => {
-    @Component({
-        selector: 'test-override-host',
-        standalone: true,
-        imports: [ShimmerComponent],
-        template: `
-      <shimmer
-        [loading]="true"
-        [shimmerColor]="'#00ff00'"
-        [backgroundColor]="'#0000ff'"
-        [duration]="3"
-        [fallbackBorderRadius]="12"
-      >
-        <div>Content</div>
-      </shimmer>
-    `,
-    })
-    class TestOverrideHostComponent { }
-
-    beforeEach(async () => {
-        vi.useFakeTimers();
-
-        await TestBed.configureTestingModule({
-            imports: [TestOverrideHostComponent, ShimmerComponent],
-            providers: [
-                provideShimmerConfig({
-                    shimmerColor: 'rgba(255, 0, 0, 0.5)',
-                    duration: 1,
-                }),
-            ],
-        }).compileComponents();
-    });
-
-    it('component inputs override provider config', fakeAsync(() => {
-        const fixture = TestBed.createComponent(TestOverrideHostComponent);
-        fixture.detectChanges();
-        tick();
-
-        // The shimmer component should use input values over config
-        const shimmer = fixture.debugElement.children[0].componentInstance as ShimmerComponent;
-        expect(shimmer.resolvedShimmerColor()).toBe('#00ff00');
-        expect(shimmer.resolvedBackgroundColor()).toBe('#0000ff');
-        expect(shimmer.resolvedDuration()).toBe(3);
-        expect(shimmer.resolvedFallbackBorderRadius()).toBe(12);
-    }));
-});

package/src/shimmer.component.ts

@@ -1,264 +0,0 @@
-import {
-  Component,
-  input,
-  signal,
-  computed,
-  effect,
-  ElementRef,
-  viewChild,
-  AfterViewInit,
-  OnDestroy,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-} from '@angular/core';
-import { NgIf, NgFor } 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 global config
-  private contextConfig = injectShimmerConfig();
-
-  // 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) => {
-      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 {
-    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 {
-    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 {
-    this.measureElements();
-  }
-}

package/src/test/setup.ts

@@ -1,42 +0,0 @@
-import 'zone.js';
-import { vi } from 'vitest';
-
-// 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/tsconfig.json

@@ -1,26 +0,0 @@
-{
-    "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

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