@shimmer-from-structure/angular 2.2.2 → 2.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, input, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import { NgIf, NgFor } from '@angular/common';
|
|
2
|
+
import { InjectionToken, inject, input, viewChild, signal, PLATFORM_ID, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { isPlatformBrowser, NgIf, NgFor } from '@angular/common';
|
|
4
4
|
import { shimmerDefaults, createResizeObserver, extractElementInfo } from '@shimmer-from-structure/core';
|
|
5
5
|
export { shimmerDefaults } from '@shimmer-from-structure/core';
|
|
6
6
|
|
|
@@ -68,8 +68,10 @@ class ShimmerComponent {
|
|
|
68
68
|
measureContainer = viewChild('measureContainer');
|
|
69
69
|
// Internal state
|
|
70
70
|
elements = signal([]);
|
|
71
|
-
// Inject
|
|
71
|
+
// Inject dependencies
|
|
72
72
|
contextConfig = injectShimmerConfig();
|
|
73
|
+
platformId = inject(PLATFORM_ID);
|
|
74
|
+
isBrowser = isPlatformBrowser(this.platformId);
|
|
73
75
|
// Resolved values (props > context > defaults)
|
|
74
76
|
resolvedShimmerColor = computed(() => this.shimmerColor() ?? this.contextConfig.shimmerColor);
|
|
75
77
|
resolvedBackgroundColor = computed(() => this.backgroundColor() ?? this.contextConfig.backgroundColor);
|
|
@@ -81,6 +83,9 @@ class ShimmerComponent {
|
|
|
81
83
|
constructor() {
|
|
82
84
|
// Effect to re-measure when loading state changes
|
|
83
85
|
effect((onCleanup) => {
|
|
86
|
+
// Skip effect on server
|
|
87
|
+
if (!this.isBrowser)
|
|
88
|
+
return;
|
|
84
89
|
const isLoading = this.loading();
|
|
85
90
|
const container = this.measureContainer();
|
|
86
91
|
if (isLoading && container) {
|
|
@@ -108,6 +113,8 @@ class ShimmerComponent {
|
|
|
108
113
|
this.cleanup();
|
|
109
114
|
}
|
|
110
115
|
setupObservers() {
|
|
116
|
+
if (!this.isBrowser)
|
|
117
|
+
return;
|
|
111
118
|
const container = this.measureContainer()?.nativeElement;
|
|
112
119
|
if (!container)
|
|
113
120
|
return;
|
|
@@ -127,6 +134,8 @@ class ShimmerComponent {
|
|
|
127
134
|
});
|
|
128
135
|
}
|
|
129
136
|
measureElements() {
|
|
137
|
+
if (!this.isBrowser)
|
|
138
|
+
return;
|
|
130
139
|
const container = this.measureContainer()?.nativeElement;
|
|
131
140
|
if (!container || !this.loading())
|
|
132
141
|
return;
|
|
@@ -163,7 +172,9 @@ class ShimmerComponent {
|
|
|
163
172
|
* Useful when content changes programmatically.
|
|
164
173
|
*/
|
|
165
174
|
remeasure() {
|
|
166
|
-
this.
|
|
175
|
+
if (this.isBrowser) {
|
|
176
|
+
this.measureElements();
|
|
177
|
+
}
|
|
167
178
|
}
|
|
168
179
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ShimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
169
180
|
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: `
|
|
@@ -1 +1 @@
|
|
|
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} from '@angular/core';\nimport { NgIf, NgFor } 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 global config\n private contextConfig = injectShimmerConfig();\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 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 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 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 this.measureElements();\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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"}
|
|
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":";;;;;;AAIA;;;AAGG;MACU,cAAc,GAAG,IAAI,cAAc,CAAgB,gBAAgB;AAEhF;;;;;;;;;;;;;;;AAeG;AACG,SAAU,oBAAoB,CAAC,MAAqB,EAAA;IACtD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE;AACxD;AAEA;;;;AAIG;SACa,mBAAmB,GAAA;AAC/B,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE;IAE/D,OAAO;AACH,QAAA,YAAY,EAAE,MAAM,CAAC,YAAY,IAAI,eAAe,CAAC,YAAY;AACjE,QAAA,eAAe,EAAE,MAAM,CAAC,eAAe,IAAI,eAAe,CAAC,eAAe;AAC1E,QAAA,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,eAAe,CAAC,QAAQ;AACrD,QAAA,oBAAoB,EAAE,MAAM,CAAC,oBAAoB,IAAI,eAAe,CAAC,oBAAoB;KAC5F;AACL;;ACrBA;;;;;;;;;;;;;AAaG;MAgGU,gBAAgB,CAAA;;AAE3B,IAAA,OAAO,GAAG,KAAK,CAAU,IAAI,CAAC;AAC9B,IAAA,YAAY,GAAG,KAAK,CAAqB,SAAS,CAAC;AACnD,IAAA,eAAe,GAAG,KAAK,CAAqB,SAAS,CAAC;AACtD,IAAA,QAAQ,GAAG,KAAK,CAAqB,SAAS,CAAC;AAC/C,IAAA,oBAAoB,GAAG,KAAK,CAAqB,SAAS,CAAC;;AAG3D,IAAA,gBAAgB,GAAG,SAAS,CAA6B,kBAAkB,CAAC;;AAG5E,IAAA,QAAQ,GAAG,MAAM,CAAgB,EAAE,CAAC;;IAG5B,aAAa,GAAG,mBAAmB,EAAE;AACrC,IAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;AAChC,IAAA,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;;AAGtD,IAAA,oBAAoB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC;AAC7F,IAAA,uBAAuB,GAAG,QAAQ,CAChC,MAAM,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,eAAe,CACnE;AACD,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;AACjF,IAAA,4BAA4B,GAAG,QAAQ,CACrC,MAAM,IAAI,CAAC,oBAAoB,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAC7E;;AAGO,IAAA,aAAa;AACb,IAAA,gBAAgB;AAExB,IAAA,WAAA,GAAA;;AAEE,QAAA,MAAM,CAAC,CAAC,SAAS,KAAI;;YAEnB,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE;AAErB,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE;AAChC,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE;AAEzC,YAAA,IAAI,SAAS,IAAI,SAAS,EAAE;;gBAE1B,IAAI,CAAC,OAAO,EAAE;;gBAGd,IAAI,CAAC,cAAc,EAAE;;gBAGrB,qBAAqB,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;YACrD;iBAAO;;gBAEL,IAAI,CAAC,OAAO,EAAE;YAChB;;YAGA,SAAS,CAAC,MAAK;gBACb,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;IAEA,eAAe,GAAA;;IAEf;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,OAAO,EAAE;IAChB;IAEQ,cAAc,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QAErB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAAE,aAAa;AACxD,QAAA,IAAI,CAAC,SAAS;YAAE;;AAGhB,QAAA,IAAI,CAAC,aAAa,GAAG,oBAAoB,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;;AAGlF,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;AAChD,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;gBAClB,IAAI,CAAC,eAAe,EAAE;YACxB;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,SAAS,EAAE;AACvC,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,UAAU,EAAE,KAAK;AAClB,SAAA,CAAC;IACJ;IAEQ,eAAe,GAAA;QACrB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QAErB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAAE,aAAa;AACxD,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAAE;;AAGnC,QAAA,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE;AAEnC,QAAA,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE;QACvD,MAAM,iBAAiB,GAAkB,EAAE;AAE3C,QAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;YAC/C,iBAAiB,CAAC,IAAI,CAAC,GAAG,kBAAkB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;AACrE,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,iBAAiB,CAAC;;AAGpC,QAAA,IAAI,IAAI,CAAC,gBAAgB,IAAI,SAAS,EAAE;AACtC,YAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,SAAS,EAAE;AACvC,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,UAAU,EAAE,KAAK;AAClB,aAAA,CAAC;QACJ;IACF;IAEQ,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,aAAa,GAAG,SAAS;QAChC;AACA,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;AAClC,YAAA,IAAI,CAAC,gBAAgB,GAAG,SAAS;QACnC;IACF;AAEA;;;AAGG;IACH,SAAS,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,eAAe,EAAE;QACxB;IACF;wGA/IW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzFjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,iZAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAqCU,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBA/F5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,cACP,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,KAAK,CAAC,EAAA,eAAA,EACL,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,iZAAA,CAAA,EAAA;;;AC/FH;;ACAA;;AAEG;;;;"}
|
package/package.json
CHANGED
package/shimmer.component.d.ts
CHANGED
|
@@ -24,6 +24,8 @@ export declare class ShimmerComponent implements AfterViewInit, OnDestroy {
|
|
|
24
24
|
measureContainer: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
|
|
25
25
|
elements: import("@angular/core").WritableSignal<ElementInfo[]>;
|
|
26
26
|
private contextConfig;
|
|
27
|
+
private platformId;
|
|
28
|
+
private isBrowser;
|
|
27
29
|
resolvedShimmerColor: import("@angular/core").Signal<string>;
|
|
28
30
|
resolvedBackgroundColor: import("@angular/core").Signal<string>;
|
|
29
31
|
resolvedDuration: import("@angular/core").Signal<number>;
|